přikládám svůj user.htm, používám SDS micro na sledování teplot topení, místností, atd
Náhled výstupu zde
Kód zobrazuje graf:
aktuální teploty z teplotních čidel
hodnoty teplot
názvy teplotních čidel
stav, zdali se teplota snižuje, zvyšuje či je stejná
náhodné barvy sloupců (někomu by se nemuselo líbit - jednoduchá modifikace)
refresh tlačítko - pro testování
Snad by se mohlo někomu hodit
Pokud by jste někdo narazil na nějaké zlepšení či chybu, neváhejte napsat
PS: kód by se dal zoptimalizovat, či použít jQuery
<!doctype html>
<html lang="cs">
<head>
<meta charset="windows-1250" />
<style type="text/css">
body, ul, li, span, strong{ margin:0; padding:0; font-size:100%; font-family:serif; }
#box{ position:fixed; top:50%; left:50%; margin-top:-220px; margin-left:-450px; width:900px; height:440px; }
#refresh{ position:absolute; right:0; top:0; display:block; width:20px; height:20px; background:red; font- size:0; z-index:999; }
#graph{ position:relative; top:0; width:100%; height:240px; }
.bar { position:absolute; bottom:0;width: 50px; height: 0px; border-left: 1px solid #1d1d1d; border-top: 1px solid #1d1d1d; border-right: 1px solid #1d1d1d; -webkit-transition: .22s all linear 0s; -moz-transition: .22s all linear 0s; -ms-transition: .22s all linear 0s; -o-transition: .22s all linear 0s; }
.bar span{ position:absolute; width:140px; left:-90%; bottom:-120px; text-align:right; white-space:nowrap; -webkit-transform: rotate(270deg);-moz-transform: rotate(270deg);-o-transform: rotate(270deg);writing-mode: lr-tb;}
.bar strong{ position:absolute; bottom:-25px; display:block; width:50px; text-align:center; margin:0; padding:0;font-size:80%;}
</style>
<script type="text/javascript">
var reqTemp = null;
var reqTempName = null;
var boolNames = true;
var boolColors = true;
var cas = null;
var timeout = 1000
var tempNames = null;
var barMultiple = 2;
var barDistance = 56;
function fceCidla(){
if(reqTemp.readyState == 4 && reqTemp.status == 200){
if(reqTemp.responseText != ''){
var cidlaTeploty = reqTemp.responseText.split("|");
for(i = 1; i <= cidlaTeploty.length; i++){
objTemp = document.getElementById('temp' + i) ;
objName = document.getElementById('name' + i) ;
pom = cidlaTeploty[i-1] / 100;
if(pom > 200){
objTemp.innerHTML = '-';
objName.innerHTML = ' ';
pom=0;
}else{
//objTemp.innerHTML = pom.toFixed(2) + " °C";
objTemp.innerHTML = pom.toFixed(2) + "";
objName.innerHTML = tempNames[i-1];
}
grow('bar', i, Math.round(pom * barMultiple), boolColors);
}
boolColors = false;
}
}
}
function grow(id, num, height, colors) {
var obj = document.getElementById(id + num);
obj.style.height = height + 'px';
obj.style.left = barDistance * (num - 1) + 'px';
if(colors){
obj.style.backgroundColor = getRandomColor();
}
}
function getRandomColor () {
var hex = Math.floor(Math.random() * 0xFFFFFF);
return "#" + ("000000" + hex.toString(16)).substr(-6);
}
function startRequest(){
if(window.XMLHttpRequest){
reqTemp = new XMLHttpRequest();
reqTempName = new XMLHttpRequest();
}else if(window.ActiveXObject){
reqTemp = new ActiveXObject("Microsoft.XMLHTTP");
reqTempName = new ActiveXObject("Microsoft.XMLHTTP");
}
if(reqTempName && boolNames){
boolNames = false;
reqTempName.open("GET", "get_sys[391]?rn=16&rand="+Math.random(), true)
reqTempName.onreadystatechange = function(){
if(reqTempName.readyState == 4 && reqTempName.status == 200){
if(reqTempName.responseText != ''){
tempNames = reqTempName.responseText.split("|");
}
}
};
reqTempName.send(null);
}
if(reqTemp){
reqTemp.open("GET", "get_sys[310]?rn=16&rand="+Math.random(), true)
reqTemp.onreadystatechange = fceCidla;
reqTemp.send(null);
}
cas = setTimeout('startRequest()', timeout);
}
</script>
<title>SDS live</title>
</head>
<body onload="startRequest();">
<div id="box">
<a id="refresh" href="javascript:window.location.reload()" title="Refresh"> </a>
<div id="graph">
<div id="bar1" class="bar"><span id="name1"></span><strong id="temp1"></strong></div>
<div id="bar2" class="bar"><span id="name2"></span><strong id="temp2"></strong></div>
<div id="bar3" class="bar"><span id="name3"></span><strong id="temp3"></strong></div>
<div id="bar4" class="bar"><span id="name4"></span><strong id="temp4"></strong></div>
<div id="bar5" class="bar"><span id="name5"></span><strong id="temp5"></strong></div>
<div id="bar6" class="bar"><span id="name6"></span><strong id="temp6"></strong></div>
<div id="bar7" class="bar"><span id="name7"></span><strong id="temp7"></strong></div>
<div id="bar8" class="bar"><span id="name8"></span><strong id="temp8"></strong></div>
<div id="bar9" class="bar"><span id="name9"></span><strong id="temp9"></strong></div>
<div id="bar10" class="bar"><span id="name10"></span><strong id="temp10"></strong></div>
<div id="bar11" class="bar"><span id="name11"></span><strong id="temp11"></strong></div>
<div id="bar12" class="bar"><span id="name12"></span><strong id="temp12"></strong></div>
<div id="bar13" class="bar"><span id="name13"></span><strong id="temp13"></strong></div>
<div id="bar14" class="bar"><span id="name14"></span><strong id="temp14"></strong></div>
<div id="bar15" class="bar"><span id="name15"></span><strong id="temp15"></strong></div>
<div id="bar16" class="bar"><span id="name16"></span><strong id="temp16"></strong></div>
</div>
</div>
</body>
</html>