Is it easy to create a dynamic table in the webserver?

Do you have questions about writing plugins or scripts in Python? Meet the coders here.
krambriw
Plugin Developer
Posts: 2570
Joined: Sat Jun 30, 2007 2:51 pm
Location: Stockholm, Sweden
Contact:

Re: Is it easy to create a dynamic table in the webserver?

Post by krambriw » Sat Dec 26, 2015 3:11 pm

Websochet with JavaScript, you think?
Yes, that will do. Even if all variables are not updated with every event, you can solve it rather easily buy defining global variables for them all at the initial load of the page. Then when an event is incoming, you just extract what is passed and then update related variables.

Mastiff
Experienced User
Posts: 872
Joined: Thu May 03, 2012 10:43 am

Re: Is it easy to create a dynamic table in the webserver?

Post by Mastiff » Sat Dec 26, 2015 4:11 pm

Sounds good. Then I'll just have to figure out what parts of your code I need to use for that. Or is it maybe not possible to use that code to receive changes in variables?

krambriw
Plugin Developer
Posts: 2570
Joined: Sat Jun 30, 2007 2:51 pm
Location: Stockholm, Sweden
Contact:

Re: Is it easy to create a dynamic table in the webserver?

Post by krambriw » Sat Dec 26, 2015 7:02 pm

Or is it maybe not possible to use that code to receive changes in variables?
Well, I have written a lot of code,,,but if you remember I mentioned that you have to give all text or other variables in the html-part an id that you can refer to. Otherwise, you cannot update them from your javascript code.

A simple example see below:

You have the following html code for a text element in the page:

Code: Select all

        <td><text id="mStatus" ALIGN="center"><font face="arial" color="white" font size="3">&nbsp;--&nbsp;</text></td>
Lets say you would like to change the text based on an incoming event holding a value? The event appears, you search the event.data for specific content (key-words) and if found, you go ahead, extract the data and update your variables/elements in the html-code. This is some javascript code typically used for exactly such purpose:

Code: Select all


    function wsMessage(event) {
        if (event.data == "GoodNight") {
            document.getElementById("mStatus").style.backgroundColor="black";
            document.getElementById("mStatus").style.color ="white";
            document.getElementById("mStatus").style.fontSize ="25";
            document.getElementById("mStatus").style.fontFamily ="arial";
            document.getElementById("mStatus").innerHTML = "&nbsp;Time to sleep";
        }
        if (event.data == "GoodMorning") {
            document.getElementById("mStatus").style.backgroundColor="yellow";
            document.getElementById("mStatus").style.color ="black";
            document.getElementById("mStatus").style.fontSize ="25";
            document.getElementById("mStatus").style.fontFamily ="arial";
            document.getElementById("mStatus").innerHTML = "&nbsp;Time to wake-up";
        }
}


Mastiff
Experienced User
Posts: 872
Joined: Thu May 03, 2012 10:43 am

Re: Is it easy to create a dynamic table in the webserver?

Post by Mastiff » Sun Dec 27, 2015 9:49 am

I see. It's still event based, right? That's the thing. I don't use any events that will help, and I'm really working hard to simplify the code. I think maybe this for me would be trying too hard to make it fancy. When I have the regular web site code I will see the latest values when I log on, and I think that would be sufficient. I am planning to put up a tablet in a puicture frame for an always on control system in the living room, but I can use an auto reload every couple of minutes to keep that current. But thanks a lot for the effort! It was worth seeing if it should be implemented. :mrgreen:

krambriw
Plugin Developer
Posts: 2570
Joined: Sat Jun 30, 2007 2:51 pm
Location: Stockholm, Sweden
Contact:

Re: Is it easy to create a dynamic table in the webserver?

Post by krambriw » Sun Dec 27, 2015 11:14 am

I see. It's still event based, right? That's the thing. I don't use any events that will help
Once you have a page as sample, it will be easier to follow your thoughts

Anyway, you need to provide the data to the webpage somehow (initially and when it changes). If you don't have an event helping out, you might consider designing such that regularly sends out the table regardless if it has changed content or not.

In my own solution I have heartbeat events so the browser retries to reconnect automatically until it is connected again and then an event with full status updates are sent out to all connected clients. In this way, I can make my changes and restart the EG server without problems, all webclients will automatically be in full operation shortly after a reboot.

krambriw
Plugin Developer
Posts: 2570
Joined: Sat Jun 30, 2007 2:51 pm
Location: Stockholm, Sweden
Contact:

Re: Is it easy to create a dynamic table in the webserver?

Post by krambriw » Sun Dec 27, 2015 11:27 am

...or, maybe I misunderstood, send an event that just triggers the calculation and updates the table

krambriw
Plugin Developer
Posts: 2570
Joined: Sat Jun 30, 2007 2:51 pm
Location: Stockholm, Sweden
Contact:

Re: Is it easy to create a dynamic table in the webserver?

Post by krambriw » Sun Dec 27, 2015 11:54 am

...and another thing, I see that you are using eg.globals in the html code for the tables. As it is designed, to update those tables, you need to reload the whole page. If you are happy with that, you could send a one-minute websocket event to the clients (or add a reload timer in your javascript code) and they can reload the page and update the tables for you.

If you instead would like to update individual elements, don't use use eg.globals in the html code.

So a typical line from your table:

Code: Select all

<td>{{eg.globals.Romtemperatur['1']}}</span></div></td>
could instead look like:

Code: Select all

<td><text id = "Romtemperatur_xy"</text></span></div></td>
"Romtemperatur_xy" can then be updated using websockets in a python script (sending the actual value from eg.globals.Romtemperatur['1'])

Post Reply