Een BCD klok in een paar regels Javascript


Op deze webpagina zal ik u laten zien hoe u een Binary Coded Decimal (BCD) klok kunt maken met maar enkele regels Javascript code. U kunt deze klok zo mooi maken als u zelf wilt. U kunt de voorbeelden als uitgangspunt nemen voor uw eigen ontwerp. Om een BCD klok in Javascript te kunnen maken heeft u alleen een eenvoudige tekstverwerker nodig. De klok werkt binnen een internet browser. De klokken die ik hier laat zien zijn getest met Internet Explorer versie 9, Google Crome en Firefox. Om de klok te maken hoeft u alleen maar tekst in te typen. Hoewel elke tekstverwerker voldoet, raad ik aan om dit NIET met MS Word te doen.
Het gratis programma Notepad++ zeer geschikt voor het ontwerpen van webpagina's. Er wordt met behulp van kleuren aangegeven of iets een getal is, een html instructie, een tekst, enzovoorts. Ook wordt aangegeven welke welke haakjes bij elkaar horen. Verderop staan nog tips over het gebruik van Notepad++ voor dit doel.

Wat is een BCD klok?

BCD betekent "decimal coded binary", dit wil zeggen dat een normaal decimaal getal wordt omgezet naar een binair getal, maar dan zo dat de decimale structuur behouden blijft. Hierdoor zijn deze binaire getallen voor iedereen vrij gemakkelijk te lezen...

Een decimaal getal bestaat uit een aantal cijfers, die elk de waarde 0 t/m 9 kunnen hebben.
Binaire getallen bestaan uit een aantal "bits", die elk de waarde 0 of 1 kunnen hebben.

Stel bijvoorbeeld dat we op een klok een tijd aflezen van 15:47:27 (iets na kwart voor 4 's middags). We hebben dan zes cijfers, die we stuk voor stuk omzetten in een binair getal. We hebben maximaal 4 bits per cijfer nodig:

1 wordt 0001,
5 wordt 0101,
4 wordt 0100,
7 wordt 0111,
2 wordt 0010, en de laatste 7 wordt ook 0111

Als u nog nooit met binaire getallen hebt gewerkt, dan lijkt dit misschien moeilijk, maar omdat het hoogste cijfer 9 is, zijn er maar 10 codes die u eventueel uit het hoofd zou kunnen leren. Makkelijker is echter om de logica te zien: de eerste bit staat voor 8, de tweede voor 4, de derde voor 2 en de laatste voor 1. Bij de 7 ziet u een 1 staan op de drie laatste plaatsen. U telt dan op: 4 + 2 + 1 = 7.

Bij een klok komen geen uren hoger dan 24 voor. Het eerste cijfer kan dus nooit groter zijn dan 2. Hierdoor zijn er maar twee bits nodig. Bij een klok laat men de andere twee bits daarom weg. In bijna elke andere toepassing van BCD getallen gebruikt men altijd vier bits, ongeacht de grootte van het cijfer. Evenzo zal bij minuten en seconden het eerste cijfer nooit groter worden dan 5. Voor de 5 zijn maar drie bits nodig, dus laat men hier de eerste bit weg.

In de BCD klokken die ik hier toon heb ik de bytes op hun zijkant gezet met de eerste bit bovenaan.

In echte BCD klokken, bijvoorbeeld voor aan de wand, worden vaak kleine lampjes gebruikt die aanstaan als een bit 1 is en uit als een bit 0 is. In uw Javascript klok hebt u alle vrijheid om iets leuks te verzinnen. U zou bijvoorbeeld een ander plaatje kunnen kiezen voor de 1 of de 0.

Het is gebruikelijk om de klok NIET te voorzien van enige informatie, zoals wat de uren en minuten zijn. Het staat u natuurlijk vrij om dat wel te doen.

Javascript

Javascript is a eenvoudige, maar zeer krachtige "scripttaal" waarmee elke webpagina terwijl deze te zien is in de browser veranderd kan worden, al dan niet afhankelijk van de invoer van de gebruiker. Met Javascript kan alles wat op een webpagina te zien is worden veranderd van kleur, tekst of van plaats. Dat geldt dan uiteraard voor uw eigen pagina, waarin u Javascript heeft opgenomen. U kunt niet andermans pagina's veranderen.

Javascript is gewoon tekst, die u zo kunt invoeren. Als er geen fouten in staan en de browser ondersteunt dit, dan worden de opdrachten uitgevoerd in de browser. De code die ik als voorbeeld geef zullen in alle moderne browsers zonder problemen lopen. De meer geavanceerde modellen, worden ook door vrijwel alle browsers ondersteund, maar in geval van Internet Explorer pas vanaf versie 9.

Korte uitleg html en Javascript code

Allereerst is er een html pagina gemaakt met daarin een aantal vormen, die de LEDs moeten voorstellen. In het meest eenvoudige geval zijn dat rechthoekige blokjes. Als u een moderne browser gebruikt, zoals Internet Explorer 9 of Mozilla FireFox of Google Chrome, dan kunt u elke denkbare vorm gebruiken. Essentieel is dat elk LEDje een unieke naam krijgt. Ik heb ervoor gekozen om dat systematisch te doen. Dat heeft als voordeel dat ik altijd weet welke LEDje welke bit weergeeft, maar ook zodat ik in Javascript efficiënt kan programmeren. Bijvoorbeeld: de tweede rij ledjes die het tweede cijfer van het uur voorstellen heten "uur2b1" (uur rij 2, bit 1), "uur2b2", enzovoorts. De Javascript functie wordt opgestart zodra de pagina geladen wordt. Dat gebeurt in het deel via de toevoeging onload = "". Deze functie kan op deze manier maar één keer aangeroepen worden en daarom moet in de code een herhaling zitten, zodat elke seconde opnieuw de tijd wordt bepaald. Dat gebeurt in het Javascript deel. Er zijn duizenden manieren om Javascript uit te laten rekenen welke bit moet worden aangezet en welke niet. Ik heb dat hier in weinig regels gedaan, al gaat dat ten koste van de leesbaarheid. In principe blijft dit deel van de Javsacript code altijd hetzelfde, maar het aanzetten van de LEDs is wel enigszins afhankelijk van hoe het LEDje in html is gemaakt. Om deze reden is voor het aanzetten van de LEDs een aparte functie gebruikt. Deze krijgt van het timer programma de naam van de LED mee en de waarde true (als de LED aanmoet) of false (als de LED uitmoet). Als u andere kleuren wilt dan kunt de opgegeven kleuren gewoon naar uw eigen smaak veranderen. In plaats van een naam als "red" of "blue" kunt u ook een getal invoeren, zodat meer kleuren mogelijk zijn.
Allereerst wordt in Javascript de tijd opgevraagd met de functie "new Date". Hierna worden uit deze datum de uren, minuten en seconden gehaald en deze worden gesplitst in de losse cijfers. Hoe gaat het bepalen van welke LEDje moet worden aangezet? Ik heb een array gemaakt, genaamd Bits, waarin Bits[0] gelijk is aan 1, Bits[1] aan 2, Bits[2] aan 4 en Bits[3] aan 8; deze waarden komen overeen met de waarden van de eerste t/m vierde bit van een getal. Om te weten of een van deze waardes (zeg de derde bit) in het decimale cijfer zit kun je nagaan of Bits[3] & Cijfer ongelijk is aan 0. In plaats van "ongelijk aan" moet je in Javascript != gebruiken. Het teken & wil zeggen dat bit voor bit wordt vergeleken. Ik loop de bits 1 t/m 4 af in een zogenaamde "for-lus". Ik geeft (Bits[3] & Cijfer) != 0 door aan de functie die de LED aan of uitzet. Immers (Bits[3] & Cijfer) != 0 is in de juiste gevallen true of false en kan dus meteen gebruikt worden. Zo hoef je geen if-statement te gebruiken.

Voorbeelden


  • Een simpele klok met rechthoekige LEDs. Werkt in vrijwel elke browser
  • Dezelfde klok, met gebruik van styles. Dit geeft meer controle.
  • Een klok met cirkelvormige LEDs. Werkt alleen in nieuwe browsers
    In dit voorbeeld worden SVG (Scalable Vector Graphics) elementen gebruikt. In Internet Explorer lager dan versie 9 werkt dit niet en vanaf versie 9 zijn enkele kleine aanpassingen in de html code nodig.
  • Een mooie bloemetjesklok. Dit voorbeeld laat zien hoe je afbeeldingen kunt gebruiken.

  • Klik hier voor een versie die met bijna alle browsers werkt.
    Ik heb hier transparante gifplaatjes gebruikt voor de Leds. Met transparante png plaatjes gaat het mis in google chrome. In veel gevallen zult u geen transparante plaatjes nodig hebben en dan is png het beste formaat.

    Notepad++

    Als u met Notepad++ werkt, kunt u uw programma heel gemakkelijk testen. Ga als volgt te werk:

    Meer informatie

    Goede informatie over html, style sheets en svg is te vinden op www.w3schools.com