I am new to html coding jQuery, zepto, etc and find the syntax rather unintuitive. I am trying to set up my Yun to host a simple web page with a bar graph showing the water level in a container. It needs to auto update and support multiple clients. I found an excellent example I was able to easily bend to my needs which displays a number:
YunServer_Sensor_values_to_HTML_page
and have found another html example on displaying a bar graph:
but am having a hard time bringing them together. I cannot figure out how to get zepto to modify the chart contents with the value returned from the Yun sketch.
Below is what I have so far. It prints the numeric value returned and a fixed width bar. Any suggestions on how to get the bar to change dynamically with the data?
<!DOCTYPE html>
<head>
<script type="text/javascript" src="zepto.min.js"></script>
<script type="text/javascript">
function refresh() {
$('#level').load('/arduino/weirLevel');
}
</script>
</head>
<body onload="setInterval(refresh, 1000);">
<h1 id="header">Wier Water Level</h1>
<span id="level">Waiting for data...</span>
</body>
<style>
.chart div {
font: 50px sans-serif;
background-color: steelblue;
text-align: right;
padding: 3px;
margin: 1px;
color: white;
}
</style>
<div class="chart">
<div style="width: 192px;">9.6</div>
</div>