Orologio con SVG e JavaScript / Sgart.it

Passaggio all'ora legale 26 marzo 2023 02:00 03:00 sposta avanti l'orologio di 1 ora (si dorme 1 ora in meno)

Questo orologio è simile al precedente ma utilizza, al posto dei canvas, il tag HTML SVG (Scalable Vector Graphics).

Il tag SVG è vettoriale e quindi nativamente scalabile a piacere senza perdita di qualità grafica.

Interfaccia

Il tag HTML per realizzare il disegno dell'orologio è questo

<svg version="1.1" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" width="100%" hight="100%" id="sgart-clock">
	<style>
		.text { font-family: Arial, Helvetica, sans-serif; font-size: 22px; font-weight: bold;}
	</style>
	<g>
		<!-- sfondo e bordo esterno -->
		<circle cx="256" cy="256" r="255" />
		<circle cx="256" cy="256" r="240" fill="#eee" />
	</g>
	<g>
		<!-- linee dei 5 minuti -->
		<line x1="256" y1="66" x2="256" y2="26" stroke="#000" stroke-width="15" />
		<line x1="356" y1="82.795" x2="371" y2="56.814" stroke="#000" stroke-width="10" />
		<line x1="429.205" y1="156" x2="455.186" y2="141" stroke="#000" stroke-width="10" />
		<line x1="446" y1="256" x2="486" y2="256" stroke="#000" stroke-width="15" />
		<line x1="429.205" y1="356" x2="455.186" y2="371" stroke="#000" stroke-width="10" />
		<line x1="356" y1="429.205" x2="371" y2="455.186" stroke="#000" stroke-width="10" />
		<line x1="256" y1="446" x2="256" y2="486" stroke="#000" stroke-width="15" />
		<line x1="156" y1="429.205" x2="141" y2="455.186" stroke="#000" stroke-width="10" />
		<line x1="82.795" y1="356" x2="56.814" y2="371" stroke="#000" stroke-width="10" />
		<line x1="66" y1="256" x2="26" y2="256" stroke="#000" stroke-width="15" />
		<line x1="82.795" y1="156" x2="56.814" y2="141" stroke="#000" stroke-width="10" />
		<line x1="156" y1="82.795" x2="141" y2="56.814" stroke="#000" stroke-width="10" />	
	</g>
	<g>
		<!-- lancette ore, minuti e secondi con relativo id per animazione in JavaScript -->
		<line x1="256" y1="256" x2="256" y2="430" stroke="#333" stroke-width="15" id="sgart-clock-hours" />
		<line x1="256" y1="256" x2="256" y2="70" stroke="#000" stroke-width="10" id="sgart-clock-minutes" />
		<line x1="256" y1="256" x2="430" y2="256" stroke="#F00" stroke-width="5" id="sgart-clock-seconds" />
	</g>
	<g>
		<!-- cerchio lancette -->
		<circle cx="256" cy="256" r="15" />
		<!-- testi -->
		<text x="256" y="155" textLenght="300" text-anchor="middle" class="text" fill="#800">sgart.it</text>
		<text x="256" y="357" textLenght="300" text-anchor="middle" class="text" fill="#888" id="sgart-clock-text">00:00:00</text>
	</g>
</svg>

dove viene disegnato, il bordo, una linea ogni 5 minuti, le lancette statiche oltre ai testi.

Animazione

Per animare le lancette serve un po' di JavaScript per ricalcolare ogni volta la posizione X e Y delle lancette usando le funzioni Math.cos(rad) e Math.sin(rad)

const updateClock = ()=>{
	const width = 512;
	const height = 512;
	const centerX = width /2;
	const centerY = height /2;
	const dt = new Date();

	const setCoords = (elmId, num60, radius) => {
		const rad = (Math.PI / 30) * (num60+45);

		const x = centerX + Math.cos(rad) * radius;
		const y = centerY + Math.sin(rad) * radius;
		//console.log(x, y);
		
		const elm = document.getElementById(elmId);
		// aggiorno le coordinate
		elm.setAttribute("x2", x);
		elm.setAttribute("y2", y);
	};

	// second
	const radiusSecond = 200;
	const seconds = dt.getSeconds();
	setCoords("sgart-clock-seconds", seconds, radiusSecond);

	// minutes
	const radiusMinutes = 186;
	const minutes = dt.getMinutes();
	setCoords("sgart-clock-minutes", minutes, radiusMinutes);

	// hours
	const radiusHours = 150;
	const hours = dt.getHours();
	const hoursRad = (60/12) * (hours % 12) + (minutes * 5/60);
	setCoords("sgart-clock-hours", hoursRad, radiusHours);

	// text
	// console.log(dt.getHours(), minutes, seconds);
	const elmClockText = document.getElementById("sgart-clock-text");
	elmClockText.innerHTML = (hours<10?"0":"") + hours + ":" + (minutes<10?"0":"") + minutes + ":" +(seconds<10?"0":"") + seconds;
};
// forzo l'aggiornamento immediato
updateClock();
// richiamo ogni tot tempo l'aggiornamento
setInterval(updateClock, 250);

Creazione SVG

Per creare velocemente il disegno dell'orologio, in particolare per calcolare le posizioni X e Y di ogni tacca dei 5 minuti, ho usato un foglio Excel dove, dopo aver eseguito tutti i calcoli, genero il tag SVG line

Excel per calcoli

Dove le formule sono:

Gradi = 360/60*A13
Offset = B13+$C$6
Radianti = PI.GRECO()/180*C13
Mod15 = RESTO(A13;15)
Radius min = $H$5-SE(E13=0;$H$8;$H$7)
X min = ARROTONDA(COS($D13)*F13; 3)+$H$3
Y min = ARROTONDA(SEN($D13)*F13;3)+$H$4
X max = ARROTONDA(COS($D13)*$H$5;3)+$H$3
Y max = ARROTONDA(SEN($D13)*$H$5;3)+$H$4
Width = SE(E13=0;$H$11;$H$10)
Colore = #000
Tag = =SOSTITUISCI("<line x1="""&G13&""" y1="""&H13&""" x2="""&I13&""" y2="""&J13&""" stroke="""&L13&""" stroke-width="""&K13&""" />";",";".")

Il file Excel è questo sgart-clock-svg.xlsx