If you use Cumulus, please donate Image

Please read this post before posting

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

Interface HTML/JS Puzzle

Share your Cumulus MX user interface here
Herbaldew
Posts: 26
Joined: Sun Mar 12, 2017 8:33 pm
Weather Station: VP2+
Operating System: Win 7 Pro
Location: US Mid-Atlantic

Interface HTML/JS Puzzle

Postby Herbaldew » Sat Apr 15, 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: 26030
Joined: Mon Jun 02, 2008 6:49 pm
Weather Station: Davis VP2
Operating System: Raspbian
Location: Sanday, Orkney
Contact:

Re: Interface HTML/JS Puzzle

Postby steve » Sat Apr 15, 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
-----
Hosting available for Cumulus web sites. See http://sandaysoft.com/forum/viewtopic.php?f=2&t=11876

Like Cumulus and want to support it? Please donate! Image

Herbaldew
Posts: 26
Joined: Sun Mar 12, 2017 8:33 pm
Weather Station: VP2+
Operating System: Win 7 Pro
Location: US Mid-Atlantic

Re: Interface HTML/JS Puzzle

Postby Herbaldew » Mon Apr 17, 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: 26030
Joined: Mon Jun 02, 2008 6:49 pm
Weather Station: Davis VP2
Operating System: Raspbian
Location: Sanday, Orkney
Contact:

Re: Interface HTML/JS Puzzle

Postby steve » Mon Apr 17, 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
-----
Hosting available for Cumulus web sites. See http://sandaysoft.com/forum/viewtopic.php?f=2&t=11876

Like Cumulus and want to support it? Please donate! Image

Herbaldew
Posts: 26
Joined: Sun Mar 12, 2017 8:33 pm
Weather Station: VP2+
Operating System: Win 7 Pro
Location: US Mid-Atlantic

Re: Interface HTML/JS Puzzle

Postby Herbaldew » Fri Apr 21, 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


Return to “Customisation”

Who is online

Users browsing this forum: No registered users and 1 guest