Page 1 of 2
Is it easy to create a dynamic table in the webserver?
Posted: Sat Dec 12, 2015 9:32 pm
by Mastiff
I have a setup with the temperature of the all the rooms in my house in a table, and I'm using this code for the webpage:
Code: Select all
<tr>
<td align="left" nowrap><a href="http://mastiffen.mine.nu:6789/andre.html">{{eg.globals.Rom[1]}}</a></span></td>
<td>{{eg.globals.Romtemperatur['1']}}</span></div></td>
<td> {{eg.globals.Tid['1']}}</span></td>
<td>{{eg.globals.Signal['1']}}</span></div></td>
<td></a><img src="graphics/{{eg.globals.NettsideOvn['1']}}" alt="" width="25" height="25"></span></td>
<td>{{eg.globals.Termostatemperatur['1']}}</span></td>
<td>{{eg.globals.Alarmtemperatur1['1']}}</span></td>
</tr>
<tr>
<td align="left"><a href="http://mastiffen.mine.nu:6789/andre.html">{{eg.globals.Rom[2]}}</a></span></td>
<td>{{eg.globals.Romtemperatur['2']}}</span></div></td>
<td> {{eg.globals.Tid['2']}}</span></td>
<td>{{eg.globals.Signal['2']}}</span></div></td>
<td><img src="graphics/{{eg.globals.NettsideOvn['2']}}" alt="" width="25" height="25"></span></td>
<td>{{eg.globals.Termostatemperatur['2']}}</span></td>
<td>{{eg.globals.Alarmtemperatur1['2']}}</span></td>
</tr>
To show it simpler, it's really just repeating these same variables:
Code: Select all
{{eg.globals.Rom[1]}} {{eg.globals.Romtemperatur['1']}} {{eg.globals.Tid['1']}} {{eg.globals.Signal['1']}} {{eg.globals.Termostatemperatur['1']}} {{eg.globals.Alarmtemperatur1['1']}}
{{eg.globals.Rom[2]}} {{eg.globals.Romtemperatur['2']}} {{eg.globals.Tid['2']}} {{eg.globals.Signal['2']}} {{eg.globals.Termostatemperatur['2']}} {{eg.globals.Alarmtemperatur1['2']}}
{{eg.globals.Rom[3]}} {{eg.globals.Romtemperatur['3']}} {{eg.globals.Tid['3']}} {{eg.globals.Signal['3']}} {{eg.globals.Termostatemperatur['3']}} {{eg.globals.Alarmtemperatur1['3']}}
{{eg.globals.Rom[4]}} {{eg.globals.Romtemperatur['4']}} {{eg.globals.Tid['4']}} {{eg.globals.Signal['4']}} {{eg.globals.Termostatemperatur['4']}} -
{
Would it be easy to change that to a dynamic table, or is that a rather difficult project?
Re: Is it easy to create a dynamic table in the webserver?
Posted: Sat Dec 12, 2015 9:34 pm
by Mastiff
Here's what the table looks like (there is a first row with the headings, I don't know if that would have to be coded into the dynamic table, or if it should be a separate, but linked table.
Re: Is it easy to create a dynamic table in the webserver?
Posted: Sun Dec 13, 2015 6:40 am
by krambriw
What do you mean with 'a dynamic table' ?
Re: Is it easy to create a dynamic table in the webserver?
Posted: Sun Dec 13, 2015 9:15 am
by Mastiff
Isn't that the correct name for a table with values that changes all the time? Like whenever a new temperature comes in from one of the sensors.
Re: Is it easy to create a dynamic table in the webserver?
Posted: Sun Dec 13, 2015 9:51 am
by krambriw
I see, you mean a table where data is dynamically updated without making refresh of the complete webpage (data in the table automatically gets updated when they change) ?
If that is what you are looking for, websocket is the answer. For each incoming event, you have to identify what sensor it comes from and then update specific elements in the webpage (like icons, values, text etc etc, all depending on your needs)
If you look at a short simple sample from one of my web pages, it could look like this:
This part in the javascript is detecting an event from a light level sensor and updating specific elements in the html page:
Code: Select all
if (event.data.search("OW_up_")!=-1) { //Ljus mot ├Âster
var m = event.data;
var n = m.split('_');
light_level = n;
light = parseFloat(light_level[2]);
if (n[3] == 'White') {
document.getElementById("t14").style.color ="white";
} else {
document.getElementById("t14").style.color ="orange";
}
document.getElementById("t14").style.fontFamily ="arial";
document.getElementById("t14").style.fontSize ="25";
document.getElementById("t14").innerHTML = " Ljusnivå "+light.toPrecision(3)+" %";
}
Here the actual html code:
Code: Select all
<body id="theBody" onLoad="init()" bgcolor=black text=white link=white vlink=white alink=white />
<center>
<table border="2" width="100%" height="85%">
<tr><!-- Row 1 -->
<td><text id="t14" ALIGN="center"><font face="arial" color="white" font size="3"> Väntar på ljusnivå %</text></td>
</tr>
</table>
</center>
</body>
As you can see, it is important that each element in the html-code has a unique id if you wanna manipulate it.
Another example could be a lamp where you wanna indicate it's status (on or off):
Javascript
Code: Select all
if (event.data.match("AC 00 46 7a 6e 08 on")) {
//VARDAGSRUM
//alert(event.data);
document.getElementById("p11").style.backgroundColor="#FBF14D";
document.getElementById("p11").style.color ="black";
document.getElementById("p11").className = "on";
document.getElementById('i11').src = "lamp-on.png";
document.getElementById("p11").style.fontSize ="25";
}
if (event.data.match("AC 00 46 7a 6e 08 off")) {
//VARDAGSRUM
//alert(event.data);
document.getElementById("p11").style.backgroundColor="black";
document.getElementById("p11").style.color ="white";
document.getElementById("p11").className = "off";
document.getElementById('i11').src = "lamp-off.png";
document.getElementById("p11").style.fontSize ="25";
}
Html
Code: Select all
<body id="theBody" onLoad="init()" bgcolor=black text=white link=white vlink=white alink=white />
<center>
<table border="2" width="100%" height="85%">
<tr><!-- Row 6 -->
<td><button id="p11" class="off" onMouseDown="TriggerEvent('D8', this)" style="background-color:black"><img src="lamp-on.png" id="i11" ALIGN="right"> Vardagsrum </button></td>
</tr>
</table>
</center>
</body>
Re: Is it easy to create a dynamic table in the webserver?
Posted: Sun Dec 13, 2015 10:01 am
by Mastiff
Fancy! But I think that's a bit over my head. Even though the scary thing was that I think I actually understood quite a bit of it!
But I don't really mean that advanced, with websockets. I just would like to be able to show the latest sensor reading for each room when I go into the page with the table. But instead of having a number of lines which has to be added to when a new room or zone or whatever is added to the table (there are still a bunch of rooms that don't yet have their own sensors, and then there's the alarms and stuff) I would simply like to be able to add to the table in EG, and then it should reflect in the table on the webpage growing one row. Was that more clear?
Re: Is it easy to create a dynamic table in the webserver?
Posted: Sun Dec 13, 2015 11:14 am
by krambriw
Well, regardless, there is a bit of hard work whatever path to follow.
One example of what you are thinking of is actually used in the ClimateDataCalculation plug, look for HighChartSnippet function. You could send data to the function and Python code can create the html. This you could do regularly or event triggered. Does that sound more familiar? Simpler, I doubt...in one way or another, you need to update html code with data. I would personally go for a solution using websockets (you can start with just one single data value to get used to the technique, the rest will then be rather easy)
Re: Is it easy to create a dynamic table in the webserver?
Posted: Sun Dec 13, 2015 11:24 am
by Mastiff
Well, then at least I know it isn't easy.
But I will have a look at this in a week or so, thanks! Some people like to read books at Christmas. I have other plans!
Re: Is it easy to create a dynamic table in the webserver?
Posted: Sun Dec 13, 2015 11:56 am
by krambriw
It's up to you
Re: Is it easy to create a dynamic table in the webserver?
Posted: Sun Dec 13, 2015 12:17 pm
by Mastiff
Yeah, I know. I think I'll dedicate the 25th to trying to get this up and running with websockets. If I do, I'll implement it in the system.
Btw is websockets something that works with phones as well? My system needs javascript enabled, but does websockets demand something even more advanced, so only some phone browsers will work? Not everybody's running Chrome on Android, unfortunately...
Re: Is it easy to create a dynamic table in the webserver?
Posted: Sun Dec 13, 2015 1:44 pm
by krambriw
Works also fine with Safari on an Iphone or Ipad
Re: Is it easy to create a dynamic table in the webserver?
Posted: Sun Dec 13, 2015 2:05 pm
by Mastiff
Good, thanks!
Re: Is it easy to create a dynamic table in the webserver?
Posted: Fri Dec 25, 2015 3:25 pm
by Mastiff
I've had a bit of a look at the code now, and I understand some parts of it (which is not bad for me...). But I see that it works on events. Is it possible to have similar code that reacts to changes in variables, or does it have to be connected to an event? I have (almost) all my temperature stuff working in one script now, that sets the temp for everything and turns on and off the ovens. So what I have coming out of it is this:
Code: Select all
print '%s.: Temperatur: %s, termostattemperatur: %s, tidspunkt: %s\n'%((eg.globals.Rom[int(Rom)]),eg.globals.Romtemperatur[Rom],eg.globals.Termostatemperatur[Rom], eg.globals.Tid[Rom])
It means that for each signal from one of the temp sensors the room temp for that room (Romtemperatur[Rom] changes, and the time for the last signal from that sensor (Tid[Rom]) changes as well. So can the websocket code monitor those changes, or can it only react to new events?
Re: Is it easy to create a dynamic table in the webserver?
Posted: Fri Dec 25, 2015 7:08 pm
by krambriw
Is it possible to have similar code that reacts to changes in variables
A general answer is yes. Both in python and in javascript you can evaluate variable values using similar methods. But the question is what is your goal? What do you wan't to do?
Some advice (how I would tackle it):
If you intend to evaluate values and do some critical actions, I would for sure recommend doing that in the server using some python code. On the other hand, if the purpose is just to adopt the presentation in the browser, it could be fine to let that be handled by the client itself using javascript code.
Using a server based solution is however also much more efficient if it is a complex calculation, calculate once, broadcast result to all clients instead of having everyone do the same...
Best regards, Waltre
Re: Is it easy to create a dynamic table in the webserver?
Posted: Sat Dec 26, 2015 9:09 am
by Mastiff
Well, what I want (after you gave me the idea when I really was looking for something else... ) is just to have the temps and times and heater statuses (on or off) change on the website when they do in EG without having to reload the full page.
There is no real calculation, in the main script I just split the input from the temp sensor and check if that means that the heater should be turned on or off and set variables of the splitted part of the input and on/off for the heater. So my EG web page is basically only lines like this:
Code: Select all
<tr>
<td align="left" nowrap>{{eg.globals.Rom[1]}}</a></span></td>
<td>{{eg.globals.Romtemperatur['1']}}</span></div></td>
<td> {{eg.globals.Tid['1']}}</span></td>
<td>{{eg.globals.Signal['1']}}</span></div></td>
<td></a><img src="graphics/{{eg.globals.NettsideOvn['1']}}" alt="" width="25" height="25"></span></td>
<td>{{eg.globals.Termostatemperatur['1']}}</span></td>
<td>{{eg.globals.Alarmtemperatur1['1']}}</span></td>
</tr>
You may recognize the three top variables from the print statement above. The Rom is the name of the room, ROmtemperatur is the temp, the Tid is the time of the last sensor broadcast, while the Signal is the signal strength of the sensor. Except for the name of the room, which of course doesn't change, the rest of these change for each sensor broadcast. Then the Termostattemperatur and Alarmtemperatur doesn't change if they aren't changed from another web page, while the NettsideOvn is the variable that shows if the heater for that zone/room is on. So not that advanced. Websochet with JavaScript, you think?