Javascript LED bord

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Mark Hogeveen

Mark Hogeveen

03/04/2012 15:57:55
Quote Anchor link
Hallo, ik heb een soort lichtkrant gemaakt met javascript.
Maar nu weet ik niet meer hoe ik verder kan gaan.
De letters die in de variabele "tekst" worden gezet komen in de LED balk te schuiven van rechts naar links.
Nu weet ik dus niet hoe ik dat kan doen, letters omzetten in een blokjes patroon dat kan verschuiven.

Mijn eerste idee was om voor elke letter een array te maken.
In elke array staan 0 en 1. 0 is dat een Led lampje uit is, 1 is dat een lampje aan is. De nullen en eenen worden gelezen van boven af.

De LED balk bestaat uit een tabel van 10 x 100 cellen die elk een uniek id nummer heben (met de letters LED ervoor omdat een id in HTML moet beginnen met een letter) dus LED1 is het id van het eerste lampje links boven.

Met document.getElementById("LED1").style.backgroundColor="red";
kun je dus voor elk lampje de kleur veranderen, rood is bijvoorbeeld aan, zwart is uit.
Online voorbeeld van de code: http://jsfiddle.net/ngGuq/1/
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!-- Eigen LED balk -->

<script>
// @ is 3 seconden pauze, $ is split effect, ^ is scroll effect, _ is zon effect, # is flash effect, + is streep effect

tekst = "hier komt de tekst @";  // Typ hier de tekst voor op de led balk
kleurLedAan = "red";  // Kleur van de LED's als ze aan zijn (de letters)
kleurLedUit = "black"; // Kleur van de led's als ze uit zijn (de plek om de letters)

idNummer = 1;
for(i = 0; i < 1; i++) {
document.write('<table border="1" cellpadding="1">');
for(ii = 0; ii < 10; ii++) {
document.write('<tr>');
for(iii = 0; iii < 100; iii++) {
document.write('<td id="LED'+idNummer+'"></td>');
idNummer++;
}
document.write('</tr>');
}
document.write('</table>');
}
alfabet = new Array();
alfabet['A'] = new Array('0011111111','0100010000','1000010000','1000010000','0100010000','0011111111'); // A
alfabet['B'] = new Array('1111111111','1000100001','1000100001','1000100001','0111010001','0000001110'); // B
alfabet['C'] = new Array('0111111110','0100000010','1000000001','1000000001','1000000001','0100000010'); // C
alfabet['D'] = new Array('1111111111','1000000001','1000000001','1000000001','0100000010','0011111100'); // D
alfabet['E'] = new Array('1111111111','1000100001','1000100001','1000100001','0111010001','0000001110'); // E
alfabet['F'] = new Array('0000000000','1000100000','1000100000','1000100000','1000100000','1000000000'); // F
alfabet['G'] = new Array('1000000001','1000000001','1000000001','1000010001','1000010001','0100011110'); // G
alfabet['H'] = new Array('1111111111','0000010000','0000010000','0000010000','0000010000','1111111111'); // H
alfabet['I'] = new Array('0000000000','0000000000','0000000000','1111111111','0000000000','0000000000'); // I
alfabet['J'] = new Array('0000000110','0000000001','0000000001','0000000001','0000000001','1111111111'); // J
alfabet['K'] = new Array('1111111111','0000100000','0001010000','0010001000','0100000100','1000000011'); // K
alfabet['L'] = new Array('1111111111','0000000001','0000000001','0000000001','0000000001','0000000001'); // L
alfabet['M'] = new Array('1111111111','0100000000','0010000000','0010000000','0100000000','1111111111'); // M
alfabet['N'] = new Array('1111111111','0100000000','0011000000','0000110000','0000001100','1111111111'); // N
alfabet['O'] = new Array('0011111100','0100000010','1000000001','1000000001','0100000010','0011111100'); // O
alfabet['P'] = new Array('1111111111','1000010000','1000010000','1000010000','1000010000','0111100000'); // P
alfabet['Q'] = new Array('0011111100','0100000010','1000000001','1000000101','0100000010','0011111101'); // Q
alfabet['R'] = new Array('1111111111','1000100000','1000110000','1000101000','1000100110','0111000001'); // R
alfabet['S'] = new Array('0011000110','0100100001','1000100001','1000010001','0100010001','0010001110'); // S
alfabet['T'] = new Array('1000000000','1000000000','1111111111','1000000000','1000000000','0000000000'); // T
alfabet['U'] = new Array('1111111110','0000000001','0000000001','0000000001','0000000001','1111111110'); // U
alfabet['V'] = new Array('1111110000','0000001110','0000000001','0000000001','0000001110','1111110000'); // V
alfabet['W'] = new Array('1111111111','0000000010','0000000100','0000000100','0000000010','1111111111'); // W
alfabet['X'] = new Array('1110000111','0001001000','0000110000','0000110000','0001001000','0001111000'); // X
alfabet['Y'] = new Array('1000000001','0100000110','0010011000','0001100000','0011000000','1100000000'); // Y
alfabet['Z'] = new Array('1000000111','1000001001','1000010001','1000100001','1001000001','1110000001'); // Z
alfabet['.'] = new Array('0000000000','0000000000','0000000001','0000000000','0000000000','0000000000'); // punt
alfabet[':'] = new Array('0000000000','0000000000','1000000001','0000000000','0000000000','0000000000'); // dubbele punt
alfabet['!'] = new Array('0000000000','0000000000','1111111101','0000000000','0000000000','0000000000'); // uitroepteken
alfabet[' '] = new Array('0000000000','0000000000','0000000000','0000000000','0000000000','0000000000'); // spatie
newtekst = tekst.toUpperCase();



function beginStrepenEffect() {
strepenEffect = setInterval("strepen()",30);
nummer = 0;
nummer2 = 0;
document.getElementById("LED"+1).style.backgroundColor=kleurLedAan;
}

function strepen() {
nummer = nummer + 6;
document.getElementById("LED"+nummer).style.backgroundColor=kleurLedAan;
nummer2 = nummer + 1;
document.getElementById("LED"+nummer2).style.backgroundColor=kleurLedAan;
if(nummer > 990) {
clearInterval(strepenEffect);
setTimeout("stopStrepenEffect()",1000);
 }
}
function stopStrepenEffect() {
nummer3 = 0
for(tel = 0; tel < 1000; tel++) {
nummer3++;
document.getElementById("LED"+nummer3).style.backgroundColor=kleurLedUit;
 }
}


</script>
<body bgcolor="black">
<!-- Button om het streep effect te testen -->
<button onclick="beginStrepenEffect()">Klik voor strepen effect</button>
Gewijzigd op 03/04/2012 15:59:13 door Mark Hogeveen
 
Er zijn nog geen reacties op dit bericht.



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.