Vous pouvez brancher votre kindle à votre box et vous en servir pour afficher ce que vous voulez. Ici, je m’en sers juste pour afficher l’heure et la date, sans internet, mais vous pourriez récupérer bien d’autres informations online.
- Connectez votre Kindle PW2 à un ordinateur
- Déposez le fichier horloge.html ci-joint à la racine (attention, ne le mettez pas dans le dossier « document » comme on a l’habitude de le faire)
- Déconnecter proprement votre Kindle (sous PC, clic droit sur l’icône USB de la barre des tâches, puis éjecter)
- Une fois la kindle disponible, aller dans le menu (les trois petites lignes) et choisir Navigateur Expérimental
- dans la barre de navigation taper
file:///mnt/us/horloge.html- fermez la fenêtre qui s’ouvre avec les réseaux wifi
- la date et l’heure devraient apparaître et se mettre à jour toutes les 60 secondes
<!DOCTYPE html>
<html>
<head> <meta charset="UTF-8">
<script>
window.setInterval('refresh()', 60000); // Call a function every 10000 milliseconds (OR 10 seconds).
var monthNames = ["January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December"
];
var dayNames = ["Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi" ];
function pad(num, size) {
var s = num+"";
while (s.length < size) s = "0" + s;
return s;
}
function refresh() {
var d = new Date();
// j'ai décalé de 1919 jours car ma kindle n'est pas synchronisée via internet
d.setDate(d.getDate()+1919);
var month = d.getMonth()+1;
var monthname = monthNames[d.getMonth()];
var dayname = dayNames[d.getDay()];
var date = dayname+" "+d.getDate()+" "+monthname+"\n"+d.getFullYear();
var t = pad(d.getHours(),2)+":"+pad(d.getMinutes(),2);
document.getElementById("target-date").textContent = date;
document.getElementById("target-time").textContent = t;
}
</script>
<style>
#face {
stroke-width: 2px; stroke: #fff;
}
#hour, #min, #sec {
stroke-width: 1px; fill: #333; stroke: #555;
}
#sec { stroke: #f55; }
</style>
</head>
<body onload="refresh();" style="font-size:30pt; font-weight:bold; text-align:center; ">
<p id="target-date" ></p>
<p id="target-time" ></p>
</body>
On notera que le navigateur expérimental accepte le svg. Les scripts comme celui-ci fonctionne donc également:
<!DOCTYPE html>
<html>
<head> <meta charset="UTF-8">
<script>
setInterval(function() {
function r(el, deg) {
el.setAttribute('transform', 'rotate('+ deg +' 50 50)')
}
var d = new Date()
r(sec, 6*d.getSeconds())
r(min, 6*d.getMinutes())
r(hour, 30*(d.getHours()%12) + d.getMinutes()/2)
}, 1000)
</script>
<style>
body {
margin: 0;
background: midnightblue;
}
#clock-container {
display: inline-block;
position: relative;
width: 20%;
padding-bottom: 100%;
vertical-align: middle;
overflow: hidden;
background: midnightblue;
}
#face { stroke-width: 2px; stroke: #fff; }
#hour, #min, #sec {
stroke-width: 1px;
fill: #333;
stroke: #555;
}
#sec { stroke: #f55; }
</style>
</head>
<body >
Source: dudley Storey: http://thenewcode.com/943/An-SVG-Analog-Clock-In-6-Lines-of-JavaScript
and https://codepen.io/dudleystorey/pen/HLBki
<div id="clock-container">
<svg id="clock" viewBox="0 0 100 100">
<circle id="face" cx="50" cy="50" r="45"/>
<g id="hands">
<rect id="hour" x="47.5" y="12.5" width="5" height="40" rx="2.5" ry="2.55" />
<rect id="min" x="48.5" y="12.5" width="3" height="40" rx="2" ry="2"/>
<line id="sec" x1="50" y1="50" x2="50" y2="16" />
</g>
</svg>
</div>
</body>
Ce script provient de Dudley Storey:
http://thenewcode.com/943/An-SVG-Analog-Clock-In-6-Lines-of-JavaScript
Version complète: date, heure et horloge
<!DOCTYPE html>
<html>
<head> <meta charset="UTF-8">
<script>
setInterval(function() {
function r(el, deg) {
el.setAttribute('transform', 'rotate('+ deg +' 50 50)');
}
var dh = new Date()
r(sec, 6*d.getSeconds())
r(min, 6*dh.getMinutes())
r(hour, 30*(dh.getHours()%12) + dh.getMinutes()/2)
refresh();
}, 1000)
var monthNames = ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"
];
var dayNames = ["Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi" ];
function pad(num, size) {
var s = num+"";
while (s.length < size) s = "0" + s;
return s;
}
// Refresh or reload page.
function refresh() {
//window .location.reload();
var d = new Date();
var d2 = new Date();
d.setDate(d.getDate()+1919);
var month = d.getMonth()+1;
var monthname = monthNames[d.getMonth()];
var dayname = dayNames[d.getDay()];
var date = dayname+" "+d.getDate()+" "+monthname+"\n"+d.getFullYear();
var t = pad(d.getHours(),2)+":"+pad(d.getMinutes(),2);
document.getElementById("target-date").textContent = date;
document.getElementById("target-time").textContent = t;
}
</script>
<style>
body {
margin: 0;
background: white;
}
#clock {
background:white;
}
circle {
background:white;
stroke-width:1px;
stroke:black;
}
#clock-container {
position: fixed;
width: 30%;
background: white;
}
.marks {
transform: translate(20px, 20px);
stroke-width: 0.2;
}
#face { stroke-width: 2px; stroke: black;background: white; }
#hour, #min, #sec {
stroke-width: 1px;
fill: #333;
stroke: #555;
}
#sec { stroke: #f55; }
</style>
</head>
<body onload="refresh();" style="font-size:30pt; font-weight:bold; text-align:center; ">
<div style="width:30%; height:50%;position:fixed; top:200px; z-index:100; right:20%">
<svg id="clock" viewBox="0 0 100 100">
<circle id="face" cx="50" cy="50" r="45" fill="white"/>
<g id="hands">
<rect id="hour" x="47.5" y="12.5" width="5" height="40" rx="2.5" ry="2.55" />
<rect id="min" x="48.5" y="12.5" width="3" height="40" rx="2" ry="2"/>
</g>
</svg>
</div>
<span style="position:absolute; top:100px;z-index:1000;" id="target-date" ></span>
<span id="target-time" style="position:absolute; top:200px; left:150px;z-index:1000;"></span>
<div style="display:none">
Source: dudley Storey: http://thenewcode.com/943/An-SVG-Analog-Clock-In-6-Lines-of-JavaScript
and https://codepen.io/dudleystorey/pen/HLBki
</div>
</body>
