l0gic Posted May 17, 2018 Share Posted May 17, 2018 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 Quote Link to comment Share on other sites More sharing options...
l0gic Posted May 20, 2018 Author Share Posted May 20, 2018 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... Quote Link to comment Share on other sites More sharing options...
kccsf Posted May 21, 2018 Share Posted May 21, 2018 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 1 Quote Link to comment Share on other sites More sharing options...
l0gic Posted May 22, 2018 Author Share Posted May 22, 2018 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 Quote Link to comment Share on other sites More sharing options...
kccsf Posted May 22, 2018 Share Posted May 22, 2018 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 Quote Link to comment Share on other sites More sharing options...
l0gic Posted May 24, 2018 Author Share Posted May 24, 2018 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 Quote Link to comment Share on other sites More sharing options...
kccsf Posted May 25, 2018 Share Posted May 25, 2018 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 Quote Link to comment Share on other sites More sharing options...
l0gic Posted May 25, 2018 Author Share Posted May 25, 2018 Thanks, I have indeed gone with chartjs. It looked a good balance of simplicity and quality. All the best Kevin Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.