RGB 7 Segment Digital Display
Jump to navigation
Jump to search
An evolution of teh New Years Eve RGB Clock Top Hat project and 👷 RGB Hard Hat
Digit[edit]
Each digit is constructed out of a strip of 35 high density individually addressable RGB WS2812b LEDs.
Each of the seven segments in the digit are made up of a cut piece of 5 RGB LEDs.
Each segment is chained to the next in a figure of eight sequence, a lookup table is used to convert the traditional A-G segment ordering to the corrent index in the sequence.
General information about traditional 7-Segment displays here: https://en.wikipedia.org/wiki/Seven-segment_display
JavaScript Emulator[edit]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>rgb7</title>
<style>
body {
color: #fff;
background-color: #000;
}
h1 {
color: #f00;
}
.segment {
position: absolute;
}
#segA {
left: 100px;
top: 100px;
}
#segB {
left: 600px;
top: 200px;
}
#segC {
left: 600px;
top: 800px;
}
#segD {
left: 100px;
top: 1300px;
}
#segE {
left: 0px;
top: 800px;
}
#segF {
left: 0px;
top: 200px;
}
#segG {
left: 100px;
top: 700px;
}
</style>
<script>
var pixels = [];
var updateTimer;
var pos = 0;
var count = 0;
// segment/digits of 0-9
var digits = [
[1,1,1,1,1,1,0],
[0,1,1,0,0,0,0],
[1,1,0,1,1,0,1],
[1,1,1,1,0,0,1],
[0,1,1,0,0,1,1],
[1,0,1,1,0,1,1],
[1,0,1,1,1,1,1],
[1,1,1,0,0,0,0],
[1,1,1,1,1,1,1],
[1,1,1,1,0,1,1],
];
// index of A, B, C, D, E, F, G
var segments = [
[ 5, 6, 7, 8, 9],
[10,11,12,13,14],
[34,33,32,31,30],
[29,28,27,26,25],
[24,23,22,21,20],
[ 0, 1, 2, 3, 4],
[19,18,17,16,15]
];
function init() {
console.log("init rgb7");
for (var i = 0; i < 35; i++)
pixels.push(document.getElementById("p"+i.toString()));
console.log("Pixels: ", pixels.length);
updateTimer = setInterval(update, 1000);
}
function randomSequence() {
var r, g, b, rgb;
r = 0;
g = Math.round(Math.random() * 127);
b = Math.round(Math.random() * 255);
rgb = "rgb(" + r.toString() + ", " + g.toString() + ", " + b.toString() + ")";
pixels[pos].setAttribute("fill", rgb);
if (++pos > 34) pos = 0;
}
function countUp() {
var rgb = "rgb(0, 127, 255)";
for (var i = 0; i < 7; i++) {
for (var j = 0; j < 5; j++) {
if (digits[count][i]) {
pixels[segments[i][j]].setAttribute("fill", rgb);
} else {
pixels[segments[i][j]].setAttribute("fill", 0);
}
}
}
if (++count > 9) count = 0;
}
function update() {
// randomSequence();
countUp();
}
</script>
</head>
<body onload="init();">
<section>
<h1>Color 7-Segment Digit</h1>
<div id="segments">
<svg id="segA" class="segment" width="500" height="100">
<circle id="p5" cx="50" cy="50" r="50" fill="#339" />
<circle id="p6" cx="150" cy="50" r="50" fill="#333" />
<circle id="p7" cx="250" cy="50" r="50" fill="#333" />
<circle id="p8" cx="350" cy="50" r="50" fill="#333" />
<circle id="p9" cx="450" cy="50" r="50" fill="#339" />
</svg>
<svg id="segB" class="segment" width="100" height="500">
<circle id="p10" cx="50" cy="50" r="50" fill="#339" />
<circle id="p11" cx="50" cy="150" r="50" fill="#333" />
<circle id="p12" cx="50" cy="250" r="50" fill="#333" />
<circle id="p13" cx="50" cy="350" r="50" fill="#333" />
<circle id="p14" cx="50" cy="450" r="50" fill="#339" />
</svg>
<svg id="segC" class="segment" width="100" height="500">
<circle id="p34" cx="50" cy="50" r="50" fill="#339" />
<circle id="p33" cx="50" cy="150" r="50" fill="#333" />
<circle id="p32" cx="50" cy="250" r="50" fill="#333" />
<circle id="p31" cx="50" cy="350" r="50" fill="#333" />
<circle id="p30" cx="50" cy="450" r="50" fill="#339" />
</svg>
<svg id="segD" class="segment" width="500" height="100">
<circle id="p25" cx="50" cy="50" r="50" fill="#339" />
<circle id="p26" cx="150" cy="50" r="50" fill="#333" />
<circle id="p27" cx="250" cy="50" r="50" fill="#333" />
<circle id="p28" cx="350" cy="50" r="50" fill="#333" />
<circle id="p29" cx="450" cy="50" r="50" fill="#339" />
</svg>
<svg id="segE" class="segment" width="100" height="500">
<circle id="p20" cx="50" cy="50" r="50" fill="#339" />
<circle id="p21" cx="50" cy="150" r="50" fill="#333" />
<circle id="p22" cx="50" cy="250" r="50" fill="#333" />
<circle id="p23" cx="50" cy="350" r="50" fill="#333" />
<circle id="p24" cx="50" cy="450" r="50" fill="#339" />
</svg>
<svg id="segF" class="segment" width="100" height="500">
<circle id="p4" cx="50" cy="50" r="50" fill="#339" />
<circle id="p3" cx="50" cy="150" r="50" fill="#333" />
<circle id="p2" cx="50" cy="250" r="50" fill="#333" />
<circle id="p1" cx="50" cy="350" r="50" fill="#333" />
<circle id="p0" cx="50" cy="450" r="50" fill="#339" />
</svg>
<svg id="segG" class="segment" width="500" height="100">
<circle id="p19" cx="50" cy="50" r="50" fill="#339" />
<circle id="p18" cx="150" cy="50" r="50" fill="#333" />
<circle id="p17" cx="250" cy="50" r="50" fill="#333" />
<circle id="p16" cx="350" cy="50" r="50" fill="#333" />
<circle id="p15" cx="450" cy="50" r="50" fill="#339" />
</svg>
</div>
<footer>X</footer>
</section>
</body>
</html>