Jump to content
Datashack
l0gic

http/jScript/jQuery - Can't get my head around it

Recommended Posts

Guys,

I'm well into home automation and all that good stuff, and I want to push some data out to a web page for display.

I've done the local stuff in python, pull data into a DB and stick it into a single line csv based file which I then ftp up to the web site.

 

The issue I have is that I just can not grasp the interaction on the web side. I've decided to use canvas-guage ( a jScript based gauge display system), easy to use - I have that working but with static gauge values.

I have a text file sitting in the directory, I need to open it (into an array?) that I can reference for each gauge.

Typical file example; 

20180516,11:46:48,Grid,0.83,41.66,0.08,5.87,150.0,Battery,6.07,22,0.79,0.0,0,Solar,4.71,105.81,1020.0,House,10.24,138.1,139.0,870.0,Inverters,336.7,1.90,347.000,323.000,670.000,3.185

Are arrays persistent in this environment? i.e I call a bit of jScript to open the file and place into an array. The Guage jScript can then access the array and pull the values out. Gauge1.data.value = myarray[12] type thing?

I'm not even sure how to use/ where to put the Js code to be honest. I'm referencing in the head area and placing any code in the body area.

I've been throwing code snippets into the html with gay abandon and opening the browser console shows no errors (sometimes) but  also no results.

To be honest I'm struggling to parse the file at the moment as I can't get my head around blobs and the like. Looking for code examples has pulled nothing from the hat for me. So before a go and kick the cat I thought I'd ask if the effort was worth it or is my assumption about the array (or whatever) being available not a runner.

As I see it I need to do the following steps;

Parse file into an array (or something else?)

reference array items as need, convert from string to float and apply to specific gauge code.

 

 

Any guidance much appreciated, if only for the sake of the cat.

Cheers guys

 

Kevin

BTW I don't have a cat :)

Share this post


Link to post
Share on other sites

OK, I now understand that I can place all the code into an external file and just stick a reference to it in the html.

I 'think' I can then kick it off with an 'onload' reference in the html out to the js file.

There is mention of global values so it looks like the data will be available to the web code including the gauge code.

 

All I need to do is find out the typical layout of an external js file and then try an knock up the code...

 

 

Share this post


Link to post
Share on other sites

Hi

As you are outputting the file with your data values in can you format it slightly differently?

guage.htm:

<html>
<head>
<script src="https://cdn.rawgit.com/Mikhus/canvas-gauges/gh-pages/download/2.1.5/all/gauge.min.js"></script>
<script src="guagevalues.js"></script>
</head>
<body>
<canvas id="cg1"></canvas>
<script>
var guagevalues = data.split(",");
var gauge = new LinearGauge({ renderTo: 'cg1' });
gauge.value = guagevalues[6];
</script>
</body>
</html>

guagevalues.js:

var data = '20180516,11:46:48,Grid,0.83,41.66,0.08,5.87,150.0,Battery,6.07,22,0.79,0.0,0,Solar,4.71,105.81,1020.0,House,10.24,138.1,139.0,870.0,Inverters,336.7,1.90,347.000,323.000,670.000,3.185';

Steve

  • Thanks 1

Share this post


Link to post
Share on other sites

Cheers Steve, I'll give this a bash. I can change the format of the uploaded file as I require.

So as I understand it I upload a preformed js file rather than a txt file, saves all the reading and parsing I guess.

For me to utilize multiple gauges I assume I just rename the original gauge1 and run off declaring other gauges as needed gauge1, gauge3 .....

As I mentioned js is a dark art for me, I just have a mental block with it. What is the function of the <canvas id = "cg1"></canvas>?

It looks to me that it is declaring the whole of the body as an area in which to render the gauge(s)?

Give me python any day!  :)

 

Again, thanks

 

Kevin

Share this post


Link to post
Share on other sites

Rather than use ajax to request the data file from the server, I figured as you are creating the file it was simpler to just format it slightly differently and include it. If it is not in a valid javascript format it wouldn't work.

Yes you can just copy that for each gauge or of course place the code in a function ie 'createGuage', accepting a data value and canvas id.

The canvas element is the surface on which the graph is drawn. So you will need a canvas per graph. The 'renderTo' parameter needs to point to the id of the canvas on which it should be rendered.

As you are versed in python you might wish to format your data like so:

var data = {
	"Grid": [0.83,41.66,0.08,5.87,150],
	"Battery":[6.07,22,0.79,0,0],
	"Solar":[4.71,105.81,1020],
	"House":[10.24,138.1,139,870],
	"Inverters":[336.7,1.9,347,323,670,3.185]
};

Then there is no need to split your data you can just do:

var gauge = new LinearGauge({ renderTo: 'cg1' });
gauge.value = data['House'][0];

Steve

Share this post


Link to post
Share on other sites

Just some feedback, I now have gazillions of gauges telling all the stuff that I don't need to know, but gauges - shiny!

Thanks for all your guidance Steve, much appreciated!

I now need to get a decent page or two together for the stuff I actually require.

I will then add some graphing probably on a per day basis to visualise performance, I'll pull a rolling day out of the database and drop it on the web page as before.

Do you have any recommendations for JScript graphing tools before I randomly start on one?

Again, thanks

 

Kevin 

Share this post


Link to post
Share on other sites

No problem - glad you got it working!

I am afraid I've never needed/used a javascript charting library so cannot recommend one. If i did need one I would probably give the following a try:

If I wanted something simple:

https://www.chartjs.org/

If I needed something more complex:

https://d3js.org/

 

(Based on https://www.slant.co/topics/3890/~javascript-charting-libraries)

Steve

Share this post


Link to post
Share on other sites

Thanks, I have indeed gone with chartjs. It looked a good balance of simplicity and quality.

All the best

 

Kevin

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...