L'application développée est un fichier SVG que l'on peut intégrer dans une page Internet en utilisant le code :
<object type="image/svg+xml" data="http://aeronautique.xyz/watch/watch.svg">Montre UTC</object>
Le fichier SVG contient l'image vectorielle de la montre : aiguilles, éléments graphiques et textes et du code JavaScript destiné à animer la montre. Il y a quelques déclarations de styles en CSS décrites ci-après.
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" class="circle" onload="Horloge()">
<style type='text/css'><![CDATA[
.circle {
border-radius: 50%;
width: 200px;
height: 200px;
}
#ah {
filter: url(#myfilter);
-webkit-filter: url(#myfilter);
}
#blanc {
stroke:white;
fill:white;
}
]]></style>
La première ligne contient la balise de tête <svg/> et des attributs fixant la taille de l'image et le script à lancer au chargement de l'image : onload="Horloge()"
Suit, une déclaration de styles donnant une forme ronde à la montre : border-radius et décrivant des styles qui seront manipulés par la suite avec le code JS, notamment la propriété : filter
<script type="text/javascript"><![CDATA[
function process(event) {
// Read out the inclination value
var beta = event.beta == null ? -200 : Math.round(event.beta)*2-300;
var gamma = Math.round(event.gamma*.6)*-1/.6;
document.getElementById('ah').setAttribute("transform",
"rotate("+ gamma +" 100 200) translate(0 " + beta +")");
}
<g id="ah" transform="rotate(0 200 300) translate(0 -200)"> <rect width="400" height="300" x="-100" y="-300" style="fill:rgb(128,76,25);stroke:none" /> <rect width="400" height="300" x="-100" style="fill:rgb(114,159,207);stroke:none" /> <rect width="400" height="300" x="-100" y="300" style="fill:rgb(128,76,25);stroke:none" /> <rect width="400" height="300" x="-100" y="600" style="fill:rgb(114,159,207);stroke:none" /> </g>
Le script JS est encadré par CDATA qui évite l'interprétation des commandes JS comme étant du XML. La fonction process va lire les données d'inclinaison de la tablette. Ces données vont déplacer l'image de fond décrite en SVG sous le regroupement <g/> Le fond de l'image est constitué de 4 <rect/> de couleur (exprimée en rgb).