ThermoMan / Thermostat-Tracking

Code to track and chart data from the 3M-50 WiFi enabled thermostat
8 stars 10 forks source link

Any desire for these? #69

Open Lerrissirrel opened 4 years ago

Lerrissirrel commented 4 years ago

Believe it or not, I do still occasionally play around with this. I'm not sure why but I suddenly got the urge to do a few things recently. Unfortunately, this is all based on V2 (and still not anywhere in github) but if any is interesting, I can see about incorporating these changes in the current code.

1) I changed the "rendering" display to be a greyscale version of the current chart with "Rendering..." written over the top of it. This turned out to be required due to the variable aspect ratio from # 2.

2) Everything scales with the browser display size. This has pros and cons since it means that you can't zoom in - as soon as you try, it redraws. Seems like something could be done to get the best of both worlds, though.

3) Fixed that the tabs sometimes ended up underneath the stationary banner. This happened as a result of using "#" to relocate the page focus. I found a very strange hack that addressed this.

4) Fixed some display problems of the daily chart during various edge conditions (various scenarios of the thermostat being on, or not, at the beginning or end of a chart).

5) Added a "Today" button to the daily chart (I had a few days in my therm's history that I was using to validate some of my # 4 changes, and got frustrated having to "next" or reload my way back to today)

6) Changed the set point line to change color depending on whether heat or cool is on (including verticals when it changes temp, but not mode. If changing mode, vertical is grey). This required an addition to the database but the code is "backward" compatible - it'll just draw grey if that info isn't available.

7) I realized that pChart breaks with recent (7.0?) php. I only did a temporary hack around this, but would do something nicer if I publish it on Github.

8) Made the "chart" (lower right hand corner of daily tab) toggle-able. Click the "Chart it" button to show, button changes to "Clear it", click it again to remove the chart.

9) Title of the daily chart no longer gives a range of dates if you're only looking at one day

10) This one's more style than anything - I took out the pChart grid lines due to the temp and humidity not being lined up. I added some vertical lines at the major ticks, though.

ThermoMan commented 4 years ago

I'm getting away from pChart too. My hosting service was killing the chart render because I as exceeding my allotted CPU allocation. So I was moving the rendering to a JavaScript library on the client side. I'm trying to switch to a MVC model with JSON for my data transfers. Right now though my code just barely collects data and doesn't display anything.

Lerrissirrel commented 4 years ago

Which JavaScript library are you looking at? I had just begun looking into it too as I thought interactive charts might be cool. I was going to investigate chart.js, mostly because it also had a php wrapper that would allow much of the existing code to remain.

ThermoMan commented 4 years ago

I was looking at https://www.amcharts.com/ for the graphing. I'm about half way through three different breaking changes and got hung up on my other gig (I switched careers from IT to house remodeling) and have not touched this in a while.

bootstrap-3.3.7 amcharts-3.20.12 (with the dark theme, everyone is doing dark themes these days dark.js) jquery-3.3.1 jquery.calendarPicker

Lerrissirrel commented 2 years ago

I know this discussion of chart package is off topic from my original post, not to mention 2+ years later but I decided to start poking around with this again recently.

After experimenting with chart.js, highchart and echarts I landed on echarts. The documentation is a bit hit or miss. It's got nice interaction for zooming/panning and turning lines on and off.

It's not all connected up yet. I'm currently spitting out, into a file, a JSON version of the data that comes as a byproduct of displaying a chart (still pChart) with Thermostat-tracking. The work in progress is still a separate page reading it in, parsing it and drawing the chart in a separate echarts page.

I've attached a PDF of an example. Some things I carried forward from the actual items in my, above, post, are the set temp line changing color depending heat vs cool, and the cycles being half-screen. eCharts actually let me draw the cycles so they look like they're "pushing" on the indoor temperature line by ending on the indoor temp line itself (cool pushing down from above, heat from below) .

Next step is to draw the chart within the existing Thermostat-Tracking window.

thermo_with_echarts.pdf

ThermoMan commented 2 years ago

I like it. I love how you can see the impact of humidity on the outdoor temperature!

There is a truth in programming: the best code I ever saw is what I wrote yesterday. The worst code I ever saw is what I wrote last year. My code is getting long in the tooth and really could use a top to bottom refactor (I got distracted and never completed the MVC conversion I was working on). I've also discovered that there is a plugin for our thermostats in Home Assistant but it has pretty much zero charting AFAIK and I love me some charts.

I was playing with ... I even forgot the name of it just now ... for charting and it had a neat feature. You could load up a lot of JSON data and with a date range selector on the bottom change the main chart display. Sort of like some of the stock price charts I've seen. But it was ugly as sin with few ways to change line styles and background colors.

Also, I'm pleased as punch that my software is still useful to some folks!