Welcome to the Cumulus Support forum.

Latest Cumulus MX V3 release 3.28.6 (build 3283) - 21 March 2024

Cumulus MX V4 beta test release 4.0.0 (build 4017) - 17 March 2024

Legacy Cumulus 1 release v1.9.4 (build 1099) - 28 November 2014 (a patch is available for 1.9.4 build 1099 that extends the date range of drop-down menus to 2030)

Download the Software (Cumulus MX / Cumulus 1 and other related items) from the Wiki

Interface HTML/JS Puzzle

Share your Cumulus MX user interface here

Moderator: mcrossley

Post Reply
Herbaldew
Posts: 113
Joined: Sun 12 Mar 2017 8:33 pm
Weather Station: VP2+
Operating System: Raspberry Pi OS (64-bit)
Location: US Mid-Atlantic

Interface HTML/JS Puzzle

Post by Herbaldew »

I completed my last two CmX goals by getting the interface to go wide screen and lastly to add wind run and storm rain under their respective gauges on the gauge page. I wanted this because I leave the rPi browser set to the gauges page in full screen mode and often glance at it on my TV and don't have a mouse handy to get the wind run and storm rain from the tooltips.

Info: I added " StormRain: inp.StormRain.toString()," to gaugefeed.js and dashboard.js (dashboard.js because I also display storm rain there)(wind run entries are already there by default). The storm rain that I added to the rain gauge tooltip works and the wind run already in the wind direction tooltip works. However, the data will does not show up under the gauges like I want.

I added "<script src="js/dashboard.js"></script> " to gauges.html and it works.

So the puzzle: What is in dashboard.js that isn't in gaugefeed.js that is making it work like this? Although it works this way, loading dashboard.js as well as gaugefeed.js slows the load time of the page noticeably and I think it may cause the needles to be a tad sluggish.

Thanks - Herb


Edit: Just had a thought that it may be due to how I am adding the info below the gauges - I am using this:

Code: Select all

<p>Run:&nbsp; <span id="WindRunToday">-.-</span>&nbsp;miles</span><br>
Image
User avatar
steve
Cumulus Author
Posts: 26702
Joined: Mon 02 Jun 2008 6:49 pm
Weather Station: None
Operating System: None
Location: Vienne, France
Contact:

Re: Interface HTML/JS Puzzle

Post by steve »

I just typed a very long detailed reply but (not being used to typing a lot on a laptop) I keep hitting key combinations which do odd things - the last one logged me out and lost my reply.

Basically you need to add code to actually write the value to the html element. Look in dashboard.js - it has code to set the value of any html element from the corresponding supplied data item. You don't need to do that just for one or two extra ytems, but you do need code to set the value of the html element from your supplied data.
Steve
Herbaldew
Posts: 113
Joined: Sun 12 Mar 2017 8:33 pm
Weather Station: VP2+
Operating System: Raspberry Pi OS (64-bit)
Location: US Mid-Atlantic

Re: Interface HTML/JS Puzzle

Post by Herbaldew »

steve wrote:Basically you need to add code to actually write the value to the html element. Look in dashboard.js - it has code to set the value of any html element from the corresponding supplied data item.
I have looked at this several times now and it still isn't clicking. Are you talking about these entries?

Code: Select all

stormrain: inp.StormRain.toString(), (I added this one)
windrun: inp.WindRunToday.toString(),
If so, they are already in both gaugefeed.js and dashboard.js thus my confusion as to why gauges.html is requiring dashboard.js to be loaded to see this info.
User avatar
steve
Cumulus Author
Posts: 26702
Joined: Mon 02 Jun 2008 6:49 pm
Weather Station: None
Operating System: None
Location: Vienne, France
Contact:

Re: Interface HTML/JS Puzzle

Post by steve »

All you've done is caused the data to be made available as a javascript variable. You haven't added any javascript code to do anything with that data. In dashboard.js, there is this code:

Code: Select all

// Get the keys from the object and set
// the element with the same id to the value
Object.keys(data).forEach(function (key) {
    var id = '#' + key;
    if ($(id).length) {
        $(id).text(data[key]);
    }
});
The data supplied to dashboard.js and gauges.js has an item with a key of 'StormRain'. This means that if there is an html element with an id of 'StormRain', the code that I have quoted will cause that element to be updated with the value, but only in dashboard.js, there is no equivalent code in the gauges javascript. Tht's why it works when you include dashboard.js.

You need to add some javascript to gauges.js which actually writes the storm rain value to the html element you have added. If your html element has an id of 'stormrain', then something like

$('#stormrain').text(stormrain);

might work. The "#stormrain' is the id of the html element, and the other "stormrain" is the name of the javascript variable containing the value to be written.
Steve
Herbaldew
Posts: 113
Joined: Sun 12 Mar 2017 8:33 pm
Weather Station: VP2+
Operating System: Raspberry Pi OS (64-bit)
Location: US Mid-Atlantic

Re: Interface HTML/JS Puzzle

Post by Herbaldew »

I had fooled with trying to add those statements to gauges.js already and tried again - with anything I have tried either the gauges don't load at all or they load but don't "connect".

I am happy that my customized "gauges" page does work by adding dashboard.js to the page.

Thanks for the personalized attention :D
Post Reply