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

[krambriw]

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]

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]

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 = " 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 = " Time to wake-up";
        }
}

[Mastiff]

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.

[krambriw]

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]

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

[krambriw]

...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'])