Page 1 of 1

Interface HTML/JS Puzzle

Posted: Sat 15 Apr 2017 2:44 pm
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

Re: Interface HTML/JS Puzzle

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

Re: Interface HTML/JS Puzzle

Posted: Mon 17 Apr 2017 11:50 am
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.

Re: Interface HTML/JS Puzzle

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

Re: Interface HTML/JS Puzzle

Posted: Fri 21 Apr 2017 1:03 pm
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