Welcome to the new home of the Cumulus Support forum.

Latest Cumulus release v1.9.4 (build 1099) - Nov 28 2014
Latest Cumulus MX release - v3.0.0 build 3043 Jan 20 2017. See the Wiki for download

Interface HTML/JS Puzzle

Share your Cumulus MX user interface here
Post Reply
Herbaldew
Posts: 84
Joined: Sun 12 Mar 2017 8:33 pm
Weather Station: VP2+
Operating System: Raspbian Stretch
Location: US Mid-Atlantic

Interface HTML/JS Puzzle

Post by Herbaldew » Sat 15 Apr 2017 2:44 pm

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: 26714
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 » Sat 15 Apr 2017 3:06 pm

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: 84
Joined: Sun 12 Mar 2017 8:33 pm
Weather Station: VP2+
Operating System: Raspbian Stretch
Location: US Mid-Atlantic

Re: Interface HTML/JS Puzzle

Post by Herbaldew » Mon 17 Apr 2017 11:50 am

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: 26714
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 » Mon 17 Apr 2017 12:16 pm

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: 84
Joined: Sun 12 Mar 2017 8:33 pm
Weather Station: VP2+
Operating System: Raspbian Stretch
Location: US Mid-Atlantic

Re: Interface HTML/JS Puzzle

Post by Herbaldew » Fri 21 Apr 2017 1:03 pm

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