Ahora que estoy empezando a usar matrices de Leds he observado que es algo complicado dibujar los diferentes caracteres o gráficos de forma directa, pues los valores que hay que usar están en binario, bueno, en realidad se trabaja con un rango de números entre 0 y 255 por fila que se obtienen al usar la base dos y el exponente correspondiente al número de columna.
En resumen, si queremos encender los siguientes Leds para formar una flecha hay que pasar los siguientes números.
1 2 3 4 5 6 7 8 9 10 11 12 13 | Para la flecha seria: 0 1 0 0 0 0 0 0 = 2 1 1 1 0 0 0 0 0 = 7 0 1 1 1 0 0 0 0 = 14 0 0 1 1 1 0 0 1 = 156 0 0 0 1 1 1 1 1 = 248 0 0 0 0 1 1 1 1 = 240 0 0 0 0 1 1 1 1 = 240 0 0 0 1 1 1 1 1 = 248 Nótese que la numeración binaria esta invertida por lo que se lee al revés, de izquierda a derecha... |
Pues bien, para hacer más fácil el trabajo he creado un programa en html/javascript/css que hace eso mismo.
Y este es el código:
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 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 | <!DOCTYPE html> <html> <head> <title></title> <meta charset="UTF-8"> <meta name="autor" content="giltesa"> <meta name="copyright" content="giltesa.com"> <script src="script.js"></script> <link href="style.css" rel="stylesheet" media="screen"> <link rel="shortcut icon" href="favicon.ico"> <!-- Notas en el script.js--> </head> <body> <div> <input id="11" name="1" type="checkbox" onclick="calc(this)" /> <input id="12" name="2" type="checkbox" onclick="calc(this)" /> <input id="13" name="4" type="checkbox" onclick="calc(this)" /> <input id="14" name="8" type="checkbox" onclick="calc(this)" /> <input id="15" name="16" type="checkbox" onclick="calc(this)" /> <input id="16" name="32" type="checkbox" onclick="calc(this)" /> <input id="17" name="64" type="checkbox" onclick="calc(this)" /> <input id="18" name="128" type="checkbox" onclick="calc(this)" /> <label id="1">0</label> <br /> <input id="21" name="1" type="checkbox" onclick="calc(this)" /> <input id="22" name="2" type="checkbox" onclick="calc(this)" /> <input id="23" name="4" type="checkbox" onclick="calc(this)" /> <input id="24" name="8" type="checkbox" onclick="calc(this)" /> <input id="25" name="16" type="checkbox" onclick="calc(this)" /> <input id="26" name="32" type="checkbox" onclick="calc(this)" /> <input id="27" name="64" type="checkbox" onclick="calc(this)" /> <input id="28" name="128" type="checkbox" onclick="calc(this)" /> <label id="2">0</label> <br /> <input id="31" name="1" type="checkbox" onclick="calc(this)" /> <input id="32" name="2" type="checkbox" onclick="calc(this)" /> <input id="33" name="4" type="checkbox" onclick="calc(this)" /> <input id="34" name="8" type="checkbox" onclick="calc(this)" /> <input id="35" name="16" type="checkbox" onclick="calc(this)" /> <input id="36" name="32" type="checkbox" onclick="calc(this)" /> <input id="37" name="64" type="checkbox" onclick="calc(this)" /> <input id="38" name="128" type="checkbox" onclick="calc(this)" /> <label id="3">0</label> <br /> <input id="41" name="1" type="checkbox" onclick="calc(this)" /> <input id="42" name="2" type="checkbox" onclick="calc(this)" /> <input id="43" name="4" type="checkbox" onclick="calc(this)" /> <input id="44" name="8" type="checkbox" onclick="calc(this)" /> <input id="45" name="16" type="checkbox" onclick="calc(this)" /> <input id="46" name="32" type="checkbox" onclick="calc(this)" /> <input id="47" name="64" type="checkbox" onclick="calc(this)" /> <input id="48" name="128" type="checkbox" onclick="calc(this)" /> <label id="4">0</label> <br /> <input id="51" name="1" type="checkbox" onclick="calc(this)" /> <input id="52" name="2" type="checkbox" onclick="calc(this)" /> <input id="53" name="4" type="checkbox" onclick="calc(this)" /> <input id="54" name="8" type="checkbox" onclick="calc(this)" /> <input id="55" name="16" type="checkbox" onclick="calc(this)" /> <input id="56" name="32" type="checkbox" onclick="calc(this)" /> <input id="57" name="64" type="checkbox" onclick="calc(this)" /> <input id="58" name="128" type="checkbox" onclick="calc(this)" /> <label id="5">0</label> <br /> <input id="61" name="1" type="checkbox" onclick="calc(this)" /> <input id="62" name="2" type="checkbox" onclick="calc(this)" /> <input id="63" name="4" type="checkbox" onclick="calc(this)" /> <input id="64" name="8" type="checkbox" onclick="calc(this)" /> <input id="65" name="16" type="checkbox" onclick="calc(this)" /> <input id="66" name="32" type="checkbox" onclick="calc(this)" /> <input id="67" name="64" type="checkbox" onclick="calc(this)" /> <input id="68" name="128" type="checkbox" onclick="calc(this)" /> <label id="6">0</label> <br /> <input id="71" name="1" type="checkbox" onclick="calc(this)" /> <input id="72" name="2" type="checkbox" onclick="calc(this)" /> <input id="73" name="4" type="checkbox" onclick="calc(this)" /> <input id="74" name="8" type="checkbox" onclick="calc(this)" /> <input id="75" name="16" type="checkbox" onclick="calc(this)" /> <input id="76" name="32" type="checkbox" onclick="calc(this)" /> <input id="77" name="64" type="checkbox" onclick="calc(this)" /> <input id="78" name="128" type="checkbox" onclick="calc(this)" /> <label id="7">0</label> <br /> <input id="81" name="1" type="checkbox" onclick="calc(this)" /> <input id="82" name="2" type="checkbox" onclick="calc(this)" /> <input id="83" name="4" type="checkbox" onclick="calc(this)" /> <input id="84" name="8" type="checkbox" onclick="calc(this)" /> <input id="85" name="16" type="checkbox" onclick="calc(this)" /> <input id="86" name="32" type="checkbox" onclick="calc(this)" /> <input id="87" name="64" type="checkbox" onclick="calc(this)" /> <input id="88" name="128" type="checkbox" onclick="calc(this)" /> <label id="8">0</label> </div> </body> </html> |
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 | /* CONVERSOR DE GRÁFICOS DE 8x8 PIXELES A BINARIO PARA MATRICES DE DIODOS LEDs La página HTML se compone de una matriz de Checkbox de 8x8, haciendo un total de 64 unidades. Cada columna tiene un valor en base 2 con potencia correspondiente a su Número de columna: Columna 1 = 2^0 = 1 Columna 2 = 2*1 = 2 Columna 3 = 2*2 = 4 Columna 4 = 2*3 = 8 Columna 5 = 2*4 = 16 Columna 6 = 2*5 = 32 Columna 7 = 2*6 = 64 Columna 8 = 2*7 = 128 Podemos seleccionar varios checbox para que sus valores se sumen de forma que obtengamos un número de 0 a 255, ese código será el empleado por cada fila de Leds de la matriz. */ function calc(elemento){ // Del elemento pulsado se lee la cadena que contiene su ID, // se pasa a entero, se divide por 10 y se obtiene un float, // se pasa de nuevo a entero para desechar los decimales y obtenemos el número de fila pulsada. var numFila = parseInt( parseInt( elemento.id ) / 10 ); // Ahora se lee la label de esa fila, la cual su ID coincide con el número de fila obtenido, // para obtener la cadena con el valor de bits almacenados la cual se pasa a entero. var numLabel = parseInt( document.getElementById( numFila ).innerHTML ); // Se lee la cadena que contiene el valor de bits correspondiente al orden de la columna, y se pasa a entero. var numCheckBox = parseInt( elemento.name ); // Se crea la variable que contendrá el nuevo dato a escribir en el label una vez pulsado el Checkbox var nuevoDato = 0; // Cuando se pulse un checkbox... if( elemento.checked == true ){ // Cambiarle el color a rojo y sumar el valor del label correspondiente a su fila o el valor del checbox. elemento.className = "checkedSi"; nuevoDato = numLabel + numCheckBox; } else{ // Cambiarle el color a rojo y sumar el valor del label correspondiente a su fila o el valor del checbox. elemento.className = "checkedNo"; nuevoDato = numLabel - numCheckBox; }; // Se escribe el nuevo valor del label. document.getElementById( numFila ).innerHTML = nuevoDato; }; |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | body{ background:black; } label{ color:white; margin-left:15px; } div{ margin:20px; } input{ background-color:black; } input.checkedSi{ background-color:lime; } input.checkedNo{ background-color:black; } |