Lichtkrant met LED-lampjes
De bedoeling van deze bladzijde is zonder toelichting wel duidelijk. Op deze pagina wordt uitgelegd hoe je dit aanpakt.
De code van het voorbeeld kun je downloaden om zelf te gebruiken.
- Besproken wordt:
- De oorsprong van het script.
- De werking van het script, in globale termen.
- Inbouwen in je eigen site.
- De oorsprong van het script
- Dit script is gemaakt door Tim Kim, die zijn werk publiceert op CodePen.
- Op deze bladzijde staat een bewerking van een van zijn scripts. Het origineel kun je downloaden van codepen.io/timkim/pen/EajvGw.
- De aanpassingen bestaan uit het verwijderen van een overbodige optie, het splitsen van HTML, JavaScript en CSS in aparte
bestanden en het passend maken binnen wat bij het programmeren met jQuery gebruikelijk is.
- Algemene beschrijving
- Dit is een jQuery toepassing. Behalve het script heb je dus ook jQuery nodig, minimaal versie 1.9.1. Dit kun je het beste van een CDN halen. Hier is Google Apis ingezet.
- Het script zelf bestaat uit een JavaScript-bestand met de naam ledlichtkrant.js. Die hoef je niet aan te passen. Daarnaast is er een CSS-bestand met de naam ledlichtkrant.css. Dan is er wat HTML en JavaScript om de lichtkrant in je document te zetten en te starten. Plaatjes worden niet gebruikt.
- Voor elk LED-je maak je een <div>-tag aan, met de classes "y_xx", light en off.
- De class "y_xx" vraagt wat toelichting:
- De LED's zijn gegroepeerd in een raster van 7 × 60 lampjes. De aanduiding y_xx staat voor de rijen en de kolommen in het raster.
- De y geeft de rij aan, geteld van boven naar beneden. Er zijn 7 rijen, y loopt van 0 tot en met 6.
- De xx geeft de kolom aan, geteld van links naar rechts. Er zijn 60 kolommen, xx loopt van 0 tot en met 59. Het aantal van 60 kolommen kun je overigens aanpassen. Het aantal rijen (7) niet.
- De <div class='y_xx light off>-tags worden gemaakt door de function prepareScoller().
- Inbouwen in je eigen site
- Code die je in je pagina moet opnemen om het werkend te krijgen staat hieronder genoemd.
- Bepaal eerst de lengte van de scroller op het scherm. Dat doe je door de variabele SCROLLER_LENGTH (in ledlichtkrant.js) in te stellen. Hier is 60 gebruikt. Als je dat verandert, moet je ook width (in #wrapper, file ledlichtkrant.css) aanpassen. Width moet 7 × SCROLLER_LENGTH zijn. Hier is dat dus 420px.
- Stel vervolgens de tekst in, in de regel var myMessage = textToLED('LED-lampjes lichtkrant!');. Deze regel vind je in de file ledlichtkrant.js.
- Het script zet de tekst om naar hoofdletters. Je kunt daarom alleen hoofdletters gebruiken.
- Elk karakter is opgebouwd met een raster van 5 punten breed en 7 punten hoog. Dat kun je niet veranderen.
- De function charToLED() bevat de definitie van het hele alfabet en de 'speciale karakters'. Voor elke rij van
5 leds is er een regel van 7 maal
true(lampje aan) offalse(lampje uit). Merk op dat rij en kolom hier verwisseld zijn. Dat is even lastig denken, maar het went. - Het is mogelijk je eigen karakters toe te voegen. De spatie en het liggende streepje heb ik zelf gemaakt
- De kleur van de LED-jes verander je door in file ledlichtkrant.css, in de class .on, de kleurcode van background-color en box-shadow te veranderen. Het mooiste effect krijg je als deze twee eigenschappen dezelfde kleur hebben.
- Het effect wordt het mooist (vind ik) als je heldere kleuren toepast, op een donkere achtergrond.
- Aanpassen van de achtergrondkleur van de lichtkrant is ook mogelijk. Verander daarvoor de gradiënt in #theMarquee
en/of de kleur in .off.
- Omdat dit script jQuery gebruikt, is er ook een
$(document).ready()-function. Deze zet je het beste aan het eind van je code, net vóór de <body>-tag. - De $(document).ready()-function roept alleen draw() aan om de lichtkrant te starten.
- Tenslotte:
- Complexe scripts als dit vragen veel rekenkracht. Vooral bij mobiele apparaten is dat een probleem. Daarom is dit script minder geschikt voor mobile sites.
- Deze lichtkrant komt het beste tot zijn recht op een desktop-PC, in een site die iets aankondigt of presenteert.
Gebruik:
- De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.
De code ziet er als volgt uit:
(Zet dit in de <HEAD>).
<link rel="stylesheet" href="ledlichtkrant.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="ledlichtkrant.js"></script>
(Zet dit in de <BODY>, op de plaats waar de lichtkrant moet verschijnen).
<div id='wrapper'><div id='theMarquee'></div></div>
<script>
prepareScroller('theMarquee');
</script>
(Zet dit aan het einde van de <BODY>, dus net voor de </body>-tag).
<script>
$(document).ready(function() {
draw();
});</script>
Downloaden:
Druk op de knop:
File: voorb144.zip, 2617 bytes.
