krommetje
Super User
Joined: December 29 2004
Location: Netherlands
Online Status: Offline
Posts: 695
|
| Posted: December 19 2007 at 05:02 | IP Logged
|
|
|
This piece of code draws bargraphs on the screen to display numeric values, in my case, temperatures.
Code:
<html>
<head>
<!--
This file retrieved from the JS-Examples archives
http://www.js-examples.com
1000s of free ready to use scripts, tutorials, forums.
Author: dickmann.org - http://www.dickmann.org/
-->
</head>
<body>
<script>
border=2
width=25
n_bars=3
function bar(high,val){
document.write("<td valign=bottom>",high,
"<table bgcolor=#aa2222 border=",border," height=",high,
" width=",width,
" cellpadding=0 cellspacing=0>",
"<tr><td align=center valign=bottom>",
"<font color=#00000 size=-1 >",val,"</font>",
"</td></tr></table> ;</ td>")
}
document.writeln("<table bgcolor=#a0a0a0 height=200 width=",
n_bars*width," border=",border," >");
//make Netscape 2.0 happy, without surrounding table, the bars are verticaly tiled
//and without a border there is only text shown
bar(<%case (len (mid("{SENSOR2}",1 ,4)) when 3 then {SENSOR2}/10 when 2 then {SENSOR2} when 1 then {SENSOR2} else {SENSOR2}/100) %>,1);
bar(<% case (len (mid("{SENSOR3}",1 ,4)) when 3 then {SENSOR3}/10 when 2 then {SENSOR3} when 1 then {SENSOR3} else {SENSOR3}/100) %>,2);
bar(<% case (len (mid("{SENSOR0}",1 ,4)) when 3 then {SENSOR0}/10 when 2 then {SENSOR0} when 1 then {SENSOR0} else {SENSOR0}/100) %>,3);
bar(<% case (len (mid("{SENSOR1}",1 ,4)) when 3 then {SENSOR1}/10 when 2 then {SENSOR1} when 1 then {SENSOR1} else {SENSOR1}/100) %>,4);
document.writeln("</table>");
</script>
</body>
</html>
|
|
|
Some explanation:
Code:
border=2
width=25
n_bars=3
|
|
|
controls The Bordertype, the width and how many bars are displayed.
Code:
bar(<%case (len (mid("{SENSOR2}",1 ,4)) when 3 then {SENSOR2}/10 when 2 then {SENSOR2} when 1 then {SENSOR2} else {SENSOR2}/100) %>,1);
bar(<% case (len (mid("{SENSOR3}",1 ,4)) when 3 then {SENSOR3}/10 when 2 then {SENSOR3} when 1 then {SENSOR3} else {SENSOR3}/100) %>,2);
bar(<% case (len (mid("{SENSOR0}",1 ,4)) when 3 then {SENSOR0}/10 when 2 then {SENSOR0} when 1 then {SENSOR0} else {SENSOR0}/100) %>,3);
bar(<% case (len (mid("{SENSOR1}",1 ,4)) when 3 then {SENSOR1}/10 when 2 then {SENSOR1} when 1 then {SENSOR1} else {SENSOR1}/100) %>,4);
|
|
|
this is an example of displaying temperatures but you can substitute your own code as long as is between the <% and %> and it is a numeric value... any other type will not display anything. I leave it to your fantasy in how to implement it in your HA-screens.
Peter
Edited by krommetje - December 19 2007 at 05:03
|
Active Topics 
Memberlist 
Search 
Help
Register 
Login
PowerHome Messageboard : PowerHome Macros, Scripts, and Formulas Repository
Topic: Javascript Bargraphs to display temps etc
