Javascript to convert binary to hex

bryanvieta — Fri, 23 Apr 2021 11:35:53 +0000

The numbering systems like binary, hexadecimal, and decimal are used by the electronic systems very heavily. All the computer motherboards and other electronic systems processors understand binary numbers only. If you want to communicate with the machine, then you need to send all the commands in binary numbers.

Here, in this article, I’m going to share the javascript code for binary to hex conversion. For one of my projects, I had to create a binary to hex converter to convert the binary values into hexadecimal and then store those values in the database.

When do you need to use a converter?

This converter is useful for the students. Along with students, if you are studying electronics or you are developing an internet of things the product or embedded system. I’m going to share the full code which you can just copy and paste and use in your project.

When I found out that I had to develop a converter, firstly, I had no idea about the numbering system. I wasted one-day understanding this and then I started developing the converter.
Code for binary to hex conversion:

var bin = document.getElementById("text_value").value;
var binn = bin.toString(2).toUpperCase();
document.getElementById("ans").innerHTML = binn;

This is the code I found on StackOverflow. This code is great and it works well but there is a problem. This is good if you are looking to develop a tool for the students. If you want to develop a tool, then you need to make a few modifications to the code. You need to use a Javascript library called Bignumber.js. This library is used if you want to deal with large numbers.

When you are working with on an IoT product or an embedded system then you need to use the following code:

var bin = document.getElementById("text_value").value;
    var m = new BigNumber(bin, 16)
    var binn = m.toString(2).toUpperCase();   
document.getElementById("ans").innerHTML = binn;

The Bignumber.js library is not an inbuilt library in Javascript. You need to import the script in the head tag. Just copy and paste the following code in the

tag.

<script src="https://cdnjs.cloudflare.com/ajax/libs/bignumber.js/8.0.2/bignumber.min.js" integrity="sha512-7UzDjRNKHpQnkh1Wf1l6i/OPINS9P2DDzTwQNX79JxfbInCXGpgI1RPb3ZD+uTP3O5X7Ke4e0+cxt2TxV7n0qQ==" crossorigin="anonymous"></script>

And done! You have built the binary to hex converter done. You can insert any binary number in the textbox and you will get the right hexadecimal result for the large numbers as well. If you made the converter with any other technique, then just share it by commenting below.

Convert Decimal to Binary for IOT Product With Vue.js

bryanvieta — Thu, 07 Jan 2021 12:17:38 +0000

I just made a recent Internet of things product for a company using Raspberry pi. It is a safe locker that opens with a correct decimal number. My client wanted to convert decimal to binary number and then save that to the database. When the user sends a query to change the password, the server should convert binary to decimal and show that to the user for updating.

I have used Bcrypt earlier but this was a new experience for me. However, I managed to find a code to convert decimal to binary online but I have to make many changes in the code to make it work correctly for the bigger numbers.

For this app, I used Vue.js in the front-end and Node.js for the back-end and IOT connection. Most of the code is Vanilla.js. Vue.js and Node.js are for just a few operations.

For the decimal to binary and again binary to decimal conversion, I have used Vue.js and axios to send data to the back-end. Here is the code:

Decimal to binary code:

var xx = document.getElementById("input").value;
var xy = parseInt(xx);
  var xz = xy.toString(2);
    document.getElementById("demo").innerHTML = xz;

I found the above code online, this code returns the correct answer only for 16 characters long input. In case, you insert an input that is longer than 16 characters then you get the wrong answer.

To solve this problem, I used Bignumber.js. This is a great Javascript library to perform the arithmetic operations more precisely. To get the correct answers for more than 16 characters, you need to use Bignumber.js. Here is the code:

Vue.js Code with Bignumber.js:

dectobin() {
      var x = new BigNumber(this.text_value, 10)
    var dectobin = x.toString(2);
    this.ans = dectobin;
            },

In the above code, dectobin() function is called at the click event on the button. Apart from that, this.text_value is used to get the value from the user input. toString is an in-built javascript function to get the binary value of a number.

Vue.js code for binary to decimal:

bintodec() {
      var cc = new BigNumber(this.text_value, 2);
       this.ans = cc;
     },

Just like the above operation, bintodec() function is also called at the click event from the user. Again, text_value is the value updated by the user.

So, above is the simple code for decimal to binary conversion. I spend almost one day to understand the concept of bignumber and binary numbers. If you are also dealing with such numbers then I hope this code helps you! Demo

DEV Community: bryanvieta

Javascript to convert binary to hex

Convert Decimal to Binary for IOT Product With Vue.js