An html/js implementation to the LCD Display problem on UVA.
Should be self explanatory but the number field takes digits and the hyphen(-) character. And then there's the scale.
Last active
December 10, 2015 05:18
-
-
Save kashyapp/4386850 to your computer and use it in GitHub Desktop.
7 segment display
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html> | |
| <head> | |
| <script src='lcd.js'></script> | |
| <style> | |
| body { | |
| background-color: black; | |
| color: green; | |
| font-family: menlo, monaco, monospace; | |
| font-size: 150%; | |
| } | |
| #lcd { | |
| font-weight: bold; | |
| text-align: center; | |
| color: #6F6; | |
| text-shadow: 0.3ex 0.3ex 0.2ex #6F6, -0.3ex 0.3ex 0.2ex #9F9, 0.3ex -0.3ex 0.2ex #9F9, -0.3ex -0.3ex 0.2ex #9F9, 0.7ex 0.7ex 1.9ex #9F9, 0.7ex 0.7ex 1.9ex #9F9, 0.7ex 0.7ex 1.9ex #9F9; | |
| margin: 50px; | |
| } | |
| input { | |
| font-family: inherit; | |
| background-color: green; | |
| color: black; | |
| font-weight: inherit; | |
| font-size: inherit; | |
| border: 2px solid #000; | |
| } | |
| input:focus { | |
| border: 2px dotted #0F0; | |
| } | |
| #myform { | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <form onsubmit="return false;" id="myform"> | |
| number: <input type="text" value="29-08-1765" id="txt" name="txt" tabindex=1/> | |
| / | |
| scale: <input type="text" value="2" id="scale" name="scale" size="2" tabindex=2/> | |
| </form> | |
| <pre id="lcd"> | |
| <pre> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var digits={ | |
| 0: ['-', '|', '|', ' ', '|', '|', '-'], | |
| 1: [' ', ' ', '|', ' ', ' ', '|', ' '], | |
| 2: ['-', ' ', '|', '-', '|', ' ', '-'], | |
| 3: ['-', ' ', '|', '-', ' ', '|', '-'], | |
| 4: [' ', '|', '|', '-', ' ', '|', ' '], | |
| 5: ['-', '|', ' ', '-', ' ', '|', '-'], | |
| 6: ['-', '|', ' ', '-', '|', '|', '-'], | |
| 7: ['-', ' ', '|', ' ', ' ', '|', ' '], | |
| 8: ['-', '|', '|', '-', '|', '|', '-'], | |
| 9: ['-', '|', '|', '-', ' ', '|', '-'], | |
| '-': [' ', ' ', ' ', '-', ' ', ' ', ' '], | |
| }; | |
| function space(scale) { | |
| var s = ''; | |
| scale = 1; | |
| for(var i=0; i < scale; i++) { | |
| s += ' '; | |
| } | |
| return s; | |
| } | |
| function r(rid, number, scale) { | |
| var s=""; | |
| for(var ni=0; ni < number.length; ni++) { | |
| var digit = number[ni]; | |
| s += ' '; | |
| for(var i=0; i < scale; i++) { | |
| s+=digits[digit][rid]; | |
| } | |
| s += ' '; | |
| s += space(scale); | |
| } | |
| s += '\n'; | |
| return s; | |
| } | |
| function c(cid, number, scale) { | |
| var s=""; | |
| for(var i=0; i < scale; i++) { | |
| for(var ni=0; ni < number.length; ni++) { | |
| var digit = number[ni]; | |
| s+=digits[digit][cid]; | |
| for(var j=0; j < scale; j++) { | |
| s+=' '; | |
| } | |
| s+=digits[digit][cid+1]; | |
| s += space(scale); | |
| } | |
| s+='\n'; | |
| } | |
| return s; | |
| } | |
| function lcd(number, scale) { | |
| return r(0, number, scale) + | |
| c(1, number, scale) + | |
| r(3, number, scale) + | |
| c(4, number, scale) + | |
| r(6, number, scale) ; | |
| } | |
| function refresh(event) { | |
| var pre = document.getElementById('lcd'); | |
| var text = document.getElementById('txt').value; | |
| var scale = document.getElementById('scale').value; | |
| pre.textContent = lcd(text, scale); | |
| return false; | |
| } | |
| function refresh2(event) { | |
| refresh(); | |
| return true; | |
| } | |
| onload = function() { | |
| document.getElementById('txt').focus(); | |
| document.getElementById('txt').onchange = refresh; | |
| document.getElementById('txt').onkeyup = refresh2; | |
| document.getElementById('scale').onchange = refresh; | |
| refresh(); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment