Orologio analogico javascript coolclock
Le dimensioni, in pixel, sono rispettivamente: 300x300, 250x250, 200x200, 150x150, 100x100.
Premessa Torna su
8 giugno 2012 - Girando per la rete, casualmente mi sono imbattuto in un orologio javascript personalizzabile. Il bello è che non avrebbe bisogno di alcun file grafico, tutta la parte grafica è realizzata dal codice javascript e controllata mediante semplici impostazioni. Si possono controllare: larghezza, lunghezza, opacità e posizione di tutti gli elementi.
Nel mio caso ho reso trasparenti: il bordo, le tacche delle ore e le tacche dei minuti ed ho inserito come sfondo la foto di un orologio a cui ho cancellato le lancette.
Per vedere le innumerevoli vere possibilità grafiche e le istruzioni originali andare a questo indirizzo.
P.S.
12 giugno 2012 - Usando PHP e lo stesso javascript ho fatto anche questo:
Utilizzo Torna su
Versione mia
Scaricare il file zippato (da questa pagina in basso), scompattarlo e fare doppio clic sul file index.html. Fatto!
Per inserirlo in una vostra pagina web, basta ricreare la stessa struttura oppure cambiare il percorso ai file javascript e al file immagine.
In pratica nell'head della pagina devono essere presenti queste due righe:
<!--[if IE]><script type="text/javascript" src="PATH/excanvas.js"></script><![endif]--> <script src="PATH/coolclock.js" type="text/javascript"></script>Dove al posto di "PATH" va inserito il percorso ai file javascript.
Il tag body deve richiamare il javascript con questa riga di codice:
<body onload="CoolClock.findAndCreateClocks()">Infine inserire il canvas con id univoco, per esempio nel mio caso:
<a href="http://www.we-wood.com/" title="Visita il sito WeWood Go to wewood web site">
<canvas style="width:250px; height: 250px;background:url('img_clock/wewood250.png')center center no-repeat;"
height="250" width="250" id="wewood250" class="CoolClock:wewood250:115"></canvas></a>
naturalmente in background:url inserire il giusto percorso all'immagine.
Utilizzo generale e personalizzazione Torna su
Nella mia versione ho inserito l'unica skin direttamente nel file coolclock.js, se si vuole personalizzare o usare più versioni di orologio conviene usare un altro file contenente le skin: andare al sito originale e scaricare: coolclock.js, moreskins.js e excanvas.js.
coolclock.js: È il "motore" dell'applicazione.
excanvas.js: Serve per rendere compatibile il codice alle versioni di Internet Explorer che non supportano il tag <canvas>
moreskins.js:Contiene le skins, ovvero, le impostazioni per la rappresentazione grafica degli orologi.
La skin dell'orologio di base appare così (vedere i commenti inseriti da me):
swissRail: {
outerBorder: { lineWidth: 2, radius:95, color: "black", alpha: 1 }, /*bordo esterno*/
smallIndicator: { lineWidth: 2, startAt: 88, endAt: 92, color: "black", alpha: 1 }, /*tacche dei minuti*/
largeIndicator: { lineWidth: 4, startAt: 79, endAt: 92, color: "black", alpha: 1 }, /*tacche delle ore*/
hourHand: { lineWidth: 8, startAt: -15, endAt: 50, color: "black", alpha: 1 }, /*lancetta delle ore*/
minuteHand: { lineWidth: 7, startAt: -15, endAt: 75, color: "black", alpha: 1 }, /*lancetta dei minuti*/
secondHand: { lineWidth: 1, startAt: -20, endAt: 85, color: "red", alpha: 1 }, /*lancetta dei secondi*/
secondDecoration: { lineWidth: 1, startAt: 70, radius: 4, fillColor: "red", color: "red", alpha: 1 } /*cerchio su lanc sec*/
}
swissRail è il nome della skin, deve coincidere con il nome della classe indicato in:<canvas id="c1" class="CoolClock:swissRail:95"></canvas> /* 95 è la misura del raggio dell'orologio sovrascrive il valore indicato nella skin */
Proprietà Torna su
lineWidth: larghezza del tratto
radius: raggio della circonferenza
color: colore del tratto; può essere letterale (red) oppure in esadecimale (#ff0000)
alpha: opacità da 0 (zero=trasparente), a 1 (uno=opaco); consente valori decimali 0.1, 0.2....)
startAt: da dove deve iniziare il tratto rispetto al centro
endAt:dove deve finire il tratto rispetto al centro
fillColor:colore di riempimento.
Ora che si conosce il significato di tutte le parti delle skin basta fare un po di prove e ricordarsi di caricare i javascript inserendo nell'head:
<!--[if IE]><script type="text/javascript" src="PATH/excanvas.js"></script><![endif]--> <script src="PATH/coolclock.js" type="text/javascript"></script> <script src="PATH/moreskins.js" type="text/javascript"></script>Sostituendo a PATH il percorso reale ai file javascript.
Il tag body deve essere così:
<body onload="CoolClock.findAndCreateClocks()">Infine inserire il <canvas> tipo:
<canvas style="width:250px; height: 250px;" height="250" width="250" id="a1" class="CoolClock:swissRail:115"></canvas>Se si usano più orologi fare attenzione ad utilizzare valori di "id" univoci.
impostare la classe del canvas a CoolClock:NOME_SKIN:RAGGIO
Il raggio può essere indicato anche solo dove si imposta la classe, senza doverlo modificare nelle skins.
Alla prossima 9-)
Download Torna su
Dimensioni: 300x300 250x250 200x200 150x150 100x100
Torna su
Tutto il contenuto di questo sito se non diversamente dichiarato è di Giovanni Ubaldi ed è distribuito con Licenza:
Creative Commons Attribuzione - Condividi allo stesso modo 4.0 Internazionale.