Watty Stuff » Electronics

Thursday, November 20th, 2025 | Author: Watty
I think the idea is regular LEDS behind a mask.
Time setting isn’t in the code. It’s assumed there is a time and date function that can be called. A micro controller can do that in software using a 32.768 kHz watch crystal.
Here is the javascript, for those that don’t know how to scrape it with the browser:
<script type="text/javascript">
var tick_tock = false;
function set_line_1(num) {
var txt = 'IVIIIXII';
switch (num) { 
case 0: case 24:
txt = '<span style="color:DarkOliveGreen;">IVIIIXII</span> '; 
break; 
case 1: case 13:
txt = '<span style="color:DarkOliveGreen;">IV</span><span style="color:Chartreuse;">I</span><span style="color:DarkOliveGreen;">IIXII</span>';
break; 
case 2: case 14:
txt = '<span style="color:DarkOliveGreen;">IV</span><span style="color:Chartreuse;">II</span><span style="color:DarkOliveGreen;">IXII</span>';
break; 
case 3: case 15:
txt = '<span style="color:DarkOliveGreen;">IV</span><span style="color:Chartreuse;">III</span><span style="color:DarkOliveGreen;">XII</span>';
break; 
case 4: case 16:
txt = '<span style="color:Chartreuse;">IV</span><span style="color:DarkOliveGreen;">IIIXII</span>';
break; 
case 5: case 17:
txt = '<span style="color:DarkOliveGreen;">I</span><span style="color:Chartreuse;">V</span><span style="color:DarkOliveGreen;">IIIXII</span>';
break; 
case 6:case 18:
txt = '<span style="color:DarkOliveGreen;">I</span><span style="color:Chartreuse;">VI</span><span style="color:DarkOliveGreen;">IIXII</span>';
break; 
case 7: case 19:
txt = '<span style="color:DarkOliveGreen;">I</span><span style="color:Chartreuse;">VII</span><span style="color:DarkOliveGreen;">IXII</span>';
break; 
case 8: case 20:
txt = '<span style="color:DarkOliveGreen;">I</span><span style="color:Chartreuse;">VIII</span><span style="color:DarkOliveGreen;">XII</span>';
break; 
case 9: case 21:
txt = '<span style="color:DarkOliveGreen;">IVII</span><span style="color:Chartreuse;">IX</span><span style="color:DarkOliveGreen;">II</span>';
break; 
case 10: case 22:
txt = '<span style="color:DarkOliveGreen;">IVIII</span><span style="color:Chartreuse;">X</span><span style="color:DarkOliveGreen;">II</span>';
break; 
case 11: case 23:
txt = '<span style="color:DarkOliveGreen;">IVIII</span><span style="color:Chartreuse;">XI</span><span style="color:DarkOliveGreen;">I</span>';
break; 
case 12: 
txt = '<span style="color:DarkOliveGreen;">IVIII</span><span style="color:Chartreuse;">XII</span>';
break; 
default: 
txt = '<span style="color:Red;">IVIIIX</span>';
} 
return txt;
}
function set_line_2(num) {
var txt = 'IIIV';
switch (num) {
case 0:
txt = '<span style="color:DarkOliveGreen;">IIIV</span>'; 
break; 
case 1:
txt = '<span style="color:Chartreuse;">I</span><span style="color:DarkOliveGreen;">IIV</span>';
break; 
case 2: 
txt = '<span style="color:Chartreuse;">II</span><span style="color:DarkOliveGreen;">IV</span>';
break; 
case 3: 
txt = '<span style="color:Chartreuse;">III</span><span style="color:DarkOliveGreen;">V</span>';
break; 
case 4: 
txt = '<span style="color:DarkOliveGreen;">II</span><span style="color:Chartreuse;">IV</span>';
break; 
case 5:
txt = '<span style="color:DarkOliveGreen;">III</span><span style="color:Chartreuse;">V</span>';
break; 
default: 
txt = '<span style="color:Red;">IIIV</span>';
} 
return txt;
}
function set_line_3(num) {
var txt = 'IVIIIX';
switch (num) { 
case 0:
txt = '<span style="color:DarkOliveGreen;">IVIIIX</span>'; 
break; 
case 1:
txt = '<span style="color:DarkOliveGreen;">IV</span><span style="color:Chartreuse;">I</span><span style="color:DarkOliveGreen;">IIX</span>';
break; 
case 2: 
txt = '<span style="color:DarkOliveGreen;">IV</span><span style="color:Chartreuse;">II</span><span style="color:DarkOliveGreen;">IX</span>';
break; 
case 3: 
txt = '<span style="color:DarkOliveGreen;">IV</span><span style="color:Chartreuse;">III</span><span style="color:DarkOliveGreen;">X</span>';
break; 
case 4: 
txt = '<span style="color:Chartreuse;">IV</span><span style="color:DarkOliveGreen;">IIIX</span>';
break; 
case 5:
txt = '<span style="color:DarkOliveGreen;">I</span><span style="color:Chartreuse;">V</span><span style="color:DarkOliveGreen;">IIIX</span>';
break; 
case 6:
txt = '<span style="color:DarkOliveGreen;">I</span><span style="color:Chartreuse;">VI</span><span style="color:DarkOliveGreen;">IIX</span>';
break; 
case 7:
txt = '<span style="color:DarkOliveGreen;">I</span><span style="color:Chartreuse;">VII</span><span style="color:DarkOliveGreen;">IX</span>';
break; 
case 8:
txt = '<span style="color:DarkOliveGreen;">I</span><span style="color:Chartreuse;">VIII</span><span style="color:DarkOliveGreen;">X</span>';
break; 
case 9: 
txt = '<span style="color:DarkOliveGreen;">IVII</span><span style="color:Chartreuse;">IX</span>';
break; 
default: 
txt = '<span style="color:Red;">IVIIIX</span>';
} 
return txt;
}
function animate() {
var time = new Date();
window.setTimeout('animate()', 500);
tick_tock = ! tick_tock;
var hours_roman = 'IVIIIXII';
var tens_roman = 'IIIV';
var units_roman = 'IVIIIX';
var hours = time.getHours();
var minutes = time.getMinutes();
var seconds = time.getSeconds();
var second_units = minutes % 10;
var months = time.getMonth();
var days = time.getDate();
var d_ind = '<span style="color:DarkOliveGreen;">D</span>&nbsp;';
var prefix_txt = '<span style="color:Chartreuse;">A</span>&nbsp;';
var suffix_txt = '&nbsp;<span style="color:DarkOliveGreen;">P</span>';

if (document.getElementById("crown").indeterminate){ // do date
d_ind = '<span style="color:Chartreuse;">D</span>&nbsp;';
units_roman = d_ind + set_line_3(days % 10);
days = Math.floor(days / 10); 
tens_roman = set_line_2(days); 
hours_roman = set_line_1(months+1); 
}
else { // time

if (document.getElementById("crown").checked ==1) {
second_units = seconds % 10;
}
second_units = Math.floor(second_units);
units_roman = set_line_3 (second_units); 
units_roman = d_ind + units_roman;
var seconds_tens = 0;
if (document.getElementById("crown").checked ==1) {
seconds_tens = seconds / 10;
}
else {
seconds_tens = minutes / 10;
}
seconds_tens =Math.floor(seconds_tens);
tens_roman = set_line_2 (seconds_tens);
if (document.getElementById("crown").checked ==1) {
if (tick_tock) {
var prefix_txt = '<span style="color:DarkOliveGreen;">A</span>&nbsp;';
var suffix_txt = '&nbsp;<span style="color:Chartreuse;">P</span>';
}
else {
var prefix_txt = '<span style="color:Chartreuse;">A</span>&nbsp;';
var suffix_txt = '&nbsp;<span style="color:DarkOliveGreen;">P</span>'; 
}
}
else // normal time
{
if (hours > 12) {
prefix_txt = '<span style="color:DarkOliveGreen;">A</span>&nbsp;';
suffix_txt = '&nbsp;<span style="color:Chartreuse;">P</span>';
} 
else {
prefix_txt = '<span style="color:Chartreuse;">A</span>&nbsp;';
suffix_txt = '&nbsp;<span style="color:DarkOliveGreen;">P</span>'; 
}
}
hours_roman = set_line_1 (hours);
}
tens_roman = prefix_txt + tens_roman + suffix_txt;
document.getElementById("line_1").innerHTML = hours_roman;
document.getElementById("line_2").innerHTML= tens_roman;
document.getElementById("line_3").innerHTML= units_roman; 
}

function ts(cb) {
if (cb.readOnly) cb.checked=cb.readOnly=false;
else if (!cb.checked) cb.readOnly=cb.indeterminate=true;
}

</script>
<p><br>
Click crown (mode) <input id="crown" name="crown" value="fast" type="checkbox" onclick="ts(this)"><br>
<div style="width:200px; height:140px; background-color:DarkSlateGray;">
<br/>
<div style="text-align: center; font-size:32px; font-family: Courier New,Courier,monospace;">
<span id="line_1">hours</span><br />
<span id="line_2">tens</span><br/>
<span id="line_3">units</span><br/>
</div></div>
<script type="text/javascript">
animate();
</script>
It’s done to make it easy to translate to JAL or something else on a micro controller such as PIC or Cortex M0
Category: Electronics, PIC Micro, Programming | Leave a Comment
Roman Digital Clock

Watty wrote earlier

Archive for the Category ◊ Electronics ◊
