Skip to content

Instantly share code, notes, and snippets.

@maly

maly/7seg.html

Created November 17, 2013 18:40
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save maly/7516610 to your computer and use it in GitHub Desktop.
Save maly/7516610 to your computer and use it in GitHub Desktop.
Download ZIP
7segment vintage display
Raw
7seg.html
<!doctype html>
<html>
<head>
<style>
table.sevenseg{
background-color:#000000;
vertical-align: top;
display:inline-block;
margin:0;
padding:0;
}
td.on{
background-color:#ff0000;
text-align: center;
vertical-align: top;
}
td.off{
background-color:#440000;
text-align: center;
vertical-align: top;
}
td.bg{
background-color:#000000;
text-align: center;
vertical-align: top;
}
table.sevenseg tr.thin {
height:5px;
}
table.sevenseg tr.thick {
height:10px;
}
table.sevenseg td.narrow {
width:2px;
}
table.sevenseg td.wide {
width:7px;
}
div#sdisplay {
background-color:#000;
display:inline-block;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="7seg.js"></script>
</head>
<body>
<div id="sdisplay">
</div>
<script>var mydisp = DISP7(9, 'sdisplay');</script>
</body>
Raw
7seg.js
var DISP7 = DISP7 || function(elements, id) {
var html='';
for (var i=0;i<elements;i++) {
html += ' <table align="center" class="sevenseg sd'+i+id+'">\
<tr class="thin">\
<td class="bg narrow"></td>\
<td data-id="seg_a" class="off wide"></td>\
<td class="bg narrow"></td>\
</tr>\
\
<tr class="thick">\
<td data-id="seg_f" class="off narrow"></td>\
<td class="bg wide"></td>\
<td data-id="seg_b" class="off narrow"></td>\
</tr>\
\
<tr class="thin">\
<td class="bg narrow"></td>\
<td data-id="seg_g" class="off wide"></td>\
<td class="bg narrow"></td>\
</tr>\
\
<tr class="thick">\
<td data-id="seg_e" class="off narrow"></td>\
<td class="bg wide"></td>\
<td data-id="seg_c" class="off narrow"></td>\
</tr>\
\
<tr class="thin">\
<td class="bg narrow"></td>\
<td data-id="seg_d" class="off wide"></td>\
<td class="bg narrow"></td>\
</tr>\
</table>';
}
document.getElementById(id).innerHTML = html;
var set = function (d,s,f) {
if (f) {
$(".sd"+d+id+" td[data-id=seg_"+s+"]").removeClass("off");
$(".sd"+d+id+" td[data-id=seg_"+s+"]").addClass("on");
} else {
$(".sd"+d+id+" td[data-id=seg_"+s+"]").removeClass("on");
$(".sd"+d+id+" td[data-id=seg_"+s+"]").addClass("off");
}
};
return set;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment