Binary Clock in ECMA/JS

by sphere360 in Circuits > Software

1583 Views, 9 Favorites, 0 Comments

Binary Clock in ECMA/JS

bclock.png

The binary-clock was probably reinvented many times, but this version has some new features, like additional date information (DMY, MDY), 24, am/pm switch and setting of visual apperance 01, graphical or both.

Decimal to Binary and Backwards

ex.png
table.png

At first it's not bad to know how to convert decimals in binary numbers and backwards.

decimal to binary:

You have to calculate the remainder of 2 (it's always 0 or 1) of a certain decimal, the calculation continues until >0. The appended 01 results from bottom to top is the binary number.

binary to decimal:

Fill the table of each time unit (binary) from right to left.

For the backward conversion you have to look at each position in the table that contains an 1 and add with the powers of 2 numbers like shown in the first row. You can ignore the zeroes because everything multiplied with 0 is 0.

Simplified MVC

dia2.png

It's a kind of simplified "MVC".

Model(s): Conversion from decimal to binary, Clock that returns time and date in certain format

View: Every visual feedback is returned to the Document Object Model (DOM)

Controller: User interacts with app, the model delivers the desired result and finally to the view.

BinaryTable

btable.png

The set of the unicodes describes the exponents for the powers of 2.

The binary table consists the powers of 2 description (first row), decimals for time units - h,m,s,d,m,y (first column), and the binary number per time unit.

Clock Unit

clock.png

The class provides the output of time and date in Dateformats (GB, US) .

Each timeunit has 2 digits, 4 digits eg. for year would result a too long binary number.

Controller

controller.png

Creates a new instance of clock and calls the timeDate method every second with the view. The output of the model is the argument for the view and visuals.

View

view.png

The view transmits to the DOM and returns the visual feedback as HTML. Some elements can be enabled or disabled (invisible), dependent on the settings of the checkboxes

The Finished App

I created a new repository on github follow this link:

https://github.com/RSTeam02/Binary-Clock

Small update:

the 2^6 column is only used when the year is greater equals 64, so it will be added between 64 and 99.