when I started with my home automation system I was trying out quite some and was obviously looking for the best ! And I am convinced to have found it in openHAB!!!
The breadth of supported devices and bindings, the quality, responsiveness and the comity of the community is awesome.
The number of different UIs shows that there is also a focus on the interfaces and that they have developed over time. The only thing that looks a little bit “old-fashioned” are the charts and creating buttons to display different time intervals is not really up to date.
I found that dygraphs could be a new, modern and flexible approach to visualize data from the devices. I have placed an example graph from the website showing that the displayed interval can be set from the time line below.
I do not know whether this is the right way to address this idea and if it will be considered a valuable enhancement to integrate dygraphs into openHAB2. Furthermore I am unfortunately no professional programmer and only limited but well experiencde in shell, Javascript, node.js, C and C++ ( never really did Java ) …
But I would offer myself to support where ever possible to support the implementation to learn during this process how to contribute to openHAB … if my idea finds some resonance in the community
Ok, as far as I understand is the first part introducing InfluxDB as “another” persistent data storage backend and building graphs with “Grafana” in the second step seems to me very similar to Dygraphs except of being more easy customizable via the Grafana GUI instead of manual javascript programming in css style sheets. In the end the outcome is the same that you create a dynamic URL with a Grafana graph of your data which you can then include as an interactive image into your sitemap.
But the view is static to change the range you need to leverage buttons again. Dygraphs allows dynamic range adjustments and also moving the mouse over the graph and showing the graph values in a small window and so on. This is much more dynamic and would create a higher user experience as it is currently likewise available in Apples Homekit.
But it is a great first step to find out how to create a graph with Dygraphs from the persistent data and import it as a dynamic image into the sitemap. I will try to achieve this in a first approach
So, thank you very much for guiding me to your tutorial
As Dygraphs is a Javascript class that just needs to be included in the appropriate js file and the rest is CSS style sheet formatting, I think it should be feasible to leverage Dygraphs to create a new chart item to modernize the view of the openHAB.
I am still of the opinion that the default chart items looks a bit “old-fashioned” and that a lean, modern style and view of the charts would create a modern look and a much better user experience for openHAB like the Basic UI does compared to the Comet Visu view which is the “old” iPhone style.
I would like to understand if there is some interest to modernize the view or if every one should create his individual look.
Many years back I looked at dygraphs and I started using it in HABmin. For some reason I moved away from it (I forget why now). There are many different charting libraries out there, but with HABmin I ended up using the visjs library. I just had a quick look on github and dygraphs is not getting a lot of active development these days where visjs is very active…
Personally I like the idea of client side graphing so I think it’s worth looking into, but you might want to look around at the options first (feel free to ‘steel’ anything from HABmin as it implements this already ).
Hi Chris, thanks for joining and thanks for your offer
I will take a look!
What I like about dygraphs is that you can dynamically set the range of the graph section that you want to show instead of creating static buttons for hours, days, months where you cannot even set it apropriately but need to use the intervals given.
Secondly the option to show the graph values in a separate small box while moving the mouse or the finger over the graph and choose interactively which charts you want to see:
You can also have a small “unboxed” version of the graph as a so called “sparkline” or in openHAB sytax as a small preview of the graph in the “frame label”. The line in the bottom of the next example could be part of a frame label as used in the openHAB sitemaps to enter views below (e.g. with the full graph)
I will take a look at vis.js but I am not sure if they are comparable. And yes I agree that there is not much work in the class … but it could also be that it works so well and does its job that its not needed
I’m not sure why you think that? In my opinion, they definitely are similar. Both offer client side charting with dynamic zoom and plenty of styling. I’m sure each offers different features, but they are broadly similar. If you have very specific ideas in mind, then maybe there’s something that one library does that the other doesn’t of course.
Have you tried HABmin? If not, I’d suggest to take a look as it uses vis for the charting.
Christoph pointed me there also and I will take look. My first impression is that it “Grafana” is more of a standalone approach that you can leverage to individualize your views but it seems hard to me to use it as a default, lean tool to create default charts. Too much variances make it hard to use it for default charting
Hi Chris, I apologize to have given such a quick response … Of course you are right that vis.js like dygraphs (which is actually also .js) are similar. I just quickly spotted some pictures in the web and did not find my most appreciated function - why I came up with dygraphs at all - the range selector which I find great and the spark line to create a small preview as label …
Hence, please apologize my quick judgement. I probably should take a closer look to the documentation of vis.js
And I kindly appreciate your offer to tell you my ideas. Actually those three given in the examples would make me already very happy
No problem, and no need to apologise. I’ve not got any special interest in either - I just remember starting with dygraphs and dropping it in HABmin as it didn’t end up suiting my needs. Vis is very heavily used which I think is important - if someone does decide to do this, then you want to hook on to a library that has a future
the viz.js timeline showcase for IBM PowerHA comes close to what I mean regarding dynamic graph view but scrolling in with the mouse or touch pad also moves the website up and down which is a little bit inconvenient. I am not sure whether my other two use cases are possible but I assume that showing the data while moving the mouse over the graph should not be too difficult and creating a “thumbnail” of a graph to have a preview as a label should also be no rocket science.
I am happy with the easiness of the Basic UI … For me personally HABmin is to massive in the way to customize it. I tried but I got lost somehow. Probably I should give it again a try … especially when your graphs could do the magic
But I mean isn’ the existence of tutorials like the one from Christoph and your efforts in HABmin a proof that the current built-in charts in openHAB need a little cosmetics ???
I couldn’t work out what examples you meant, but scrolling of websites is an issue for the container - not the library. If you look at HABmin, you won’t find the page scrolling. If you integrate these libraries into a page, then you’ll just have to take care of things like this.
I didn’t necessarily mean for you to use it - just try the graphing. It take no customisation, but it does what I think you want, and if you’re planning this sort of thing, it’s worth a look I think.
Absolutely - I completely agree. A nice client side chart would be good in the UIs I think.
! And I am convinced to have found it in openHAB!!!
) …
