Hubigraphs V3.0 Release
9/17 - Version 4.0 - Weather Tile 2.0. Alright, story time. My wife HATES WeatherTile 1.0. She says that is is not organized the way she want. I asked her to design the tile she wanted. She did. 8 hours of HTML grid coding later, she changed her mind. After that she gave me three other designs. So... I have been working for the past month on multiple rewrites of Weather Tile. I am pleased to announce the following features:
- Native support for Open Weather (current & forecast weather -- hourly, daily)
- Support for all measurement units and conversions
- Drag and drop design -- DESKTOP BROWSERS ONLY
- Native display via Attribute on Hubitat Dashboard
- Modify each sub-tile individually -- (color, size, weight, icon, etc)
- Support to display hubitat devices (temp, humidity, pressure, velocity, etc);
See the post below for installation instructions and other stuff
8/17 - Version 3.3 - Radar Tile. So i was poking around the community looking for a radar tile to put on my console. Couldn't find one, so I created on. Version 3.3 Introduces the radar tile. It actually isn't much but has the following features
- Utilizes the Windy.com embedded radar map.
- Auto detects lat/long for local hub
- Non-flashing refresh (that part was...fun to figure out)-- refresh rate is selectable.
- Optionally create a HubiGraph tile for inclusion on dashboard
- Ability to select zoom level.
- Radar stretches to match your tile size
- Marks you location based on lat/long. (The screen-shot doesn't have it cause I like to stay hidden)
One more note, it seems the radar is never more than 10-15 minutes out of date. Increasing refresh rate does not make the radar newer. That is driven by Windy.com.
8/14 - Version 3.2 - Forecast Tile. By VERY popular demand (one person asked besides my wife), I am ready to introduce the forecast tile. It is an "extension" of the Weather Tile. See post below for details! Also, HubiGraphs now upload the needed HubiGraph.js AND WeatherTile.js as part of Package Manager (which I highly recommend)
8/8 - Version 3.0 - Weather Tile. So, I have spent the past few creating something new for my wife. The WEATHER TILE. Yes, before anyone says anything, there is not a graph involved yet. My wife has already submitted multiple request for features. But this initial version has the following features and caveats.
- The weather tile will AUTOMATICALLY resize according to the size of the tile.
- Background and font color selection.
- Support for Imperial or Metric (and other units) on a per attribute basis.
- OpenWeather support - This is the main producer of data for the panel. You DO NOT NEED a separate Open Weather driver. You do however NEED an OpenWeather API key. The panel is updated on a schedule and receives new weather data and forecast data.
- PWS support - The panel supports overriding certain values with those on your PWS.
- Lat/Long loaded from local hub location.
- Support for the following values:
- Current Temperature (Open Weather and PWS)
- Current Conditions (Open Weather)
- Daily High and Low Forecast (Open Weather)
- Feels Like Temperature (Open Weather and PWS)
- Daily Chance of Precipitation (Open Weather)
- Remaining Precipitation (Open Weather)
- Daily Precipitation (Open Weather and PWS)
- Wind Speed (Open Weather and PWS)
- Wind Gust (Open Weather and PWS)
- Wind Direction (Open Weather and PWS)
- Barometric Pressure (Open Weather and PWS)
- Barometric Pressure Trend (Open Weather and PWS)
- Humidity (Open Weather and PWS)
- Dew Point (Open Weather and PWS)
- Dew Point Effect (Open Weather and PWS)
- Local Sunrise and Sunset
7/23- Version 2.25 - Current Value Overlays - I have added (to Time Graphs Only) the ability to overlay the "current" value of the graph lines. I did this as an experiment and it turned out well enough to release. Let me know in the comments what you would like to see in the new "overlay" box.
7/18/202 - Version 2.2 - Long Term Storage. One of the most requested features has been the ability to keep data around (like InfluxDB). While I am not wanting to solve that problem (store ALL your data), I have still been annoyed that the database maintains only about 1,000 attribute states. This means for items that refresh every minute, you can only build/refresh a graph that covers about a day. So, a new option has been added to Time Graphs.
When you set up Long Term storage (completely optional), it will BEGIN to store new data each time a graph is refreshed, initially built or on a schedule (selectable). Please don't email me asking why only one day populates (at first), I can only pull data that is in the database. Below is a two week graph that is now populating with actual and heat-index temperature:
Last thing: HubiGraph will ONLY store the things it is graphing...
7/9/2020 - Version 2.1 - Heat Maps are now available. NOTE FOR THIS RELEASE, YOU MUST UPDATE HubiGraph.js For those of you who have too many devices, I have created a new take on the Bar Graph -- a Heat Map. If you are wondering what a Heat Map is, look it up on Google (that's what I did). Below are some examples, but here are the features:
- Support for value mapping and time mapping (specific trigger or last update).
- Support for gradient display. I came up with a way to input multiple gradients, you'll have to try it to understand.
- Filter by supported attribute (motion, switch, battery, etc). Don't worry, you can still choose any sensor, just...carpal tunnel?
- Don't like square? Just choose your number of columns!
- Reorder you devices. It is supported, but man, it takes forever.
- Hub-free processing. All the heavy lifting is done by the web-browser.
Take a look...
The above is a representation of all the temperatures in my house (all 61 of them ) * Please be careful with this build. My wife is mad at me now that she knows how many devices I have...
Here is a battery status. Green is 100%, red is 15% and black is zero
Here is a map of all the my devices and when they last checked in. Green is today, orange is a week ago, and black is over a week.
7/3/2020 - Version 2.0 - Many BIG changes. Well, not to all the released formats of graphs. With this release we introduce TIME GRAPHS (not to be confused with Time Lines. Here is a picture so you will keep reading.
- Line Graphs are deprecated and WILL NO LONGER be supported (by me). Timegraph functionality support and EXCEEDS what you could do with LineGraphs. I am keeping LineGraphs in the repository so you don't have to rebuild your graphs if you are happy.
- TimeGraphs are named such because they group data by time, NOT by receipt of data. I learned some lessons with my Weather Station. Pressure would only update if it changed by a certain amount. As a result, integrating data was at best sporadic, at worst wrong. TimeGraphs now groups the data by time and allows the user to decide whether to extrapolate or "drop" the data. It also offers multiple functions -- by plot -- for multiple points over a given time period. (Average, Min, Max, Mid)
- There are now 3 choices in how to display results:
- Integration Time: This is the amount of time to integrate (duh). If no data exists in that space, the user can either extrapolate (default) or drop (to a user specified value).
- Timespan: This is the amount of time for the graph to cover.
- Update Rate: This is how often the graph will update (without hitting the hub). So if I set it for 5 minutes, then every five minutes, the graph will show any data (integrated) received over the last 5 minutes.
- Time Graphs take ALL the processing off the Hub, except to extract historical data upon webpage/tile REFRESH. Theoretically, this means that if you use the auto-refresh function, you will never impact the Hub again.
- Each plot now has INDEPENDENT controls. This means you can have a line, bars, scatter and area plots all on the same graph. I have no idea what you will do with this, but it works.
- Options are now streamlined. Each plot has its own controls and MANY, MANY options, including but not limited to color, size, opacity. Area graphs can now set the fill color as can bar-graphs. Scatter plots now support choosing you point type (star, circle, square, polygon, etc).
- Device selection is completely open (Everything is available -- with one exception). If the database does not have a "most recent value" for a desired attribute (i.e. it has no data) then that attribute will be unavailable. I have annotated the drop-down with the latest value for convenience.
- Limitations: As with other graphs the only limit is the amount of data I can get to from the database. The max time is a week, but that depends HEAVILY on the number of data points returned. In my testing, I usually get around 1200. I have no idea why.
6/24/2020 - Version 1.80 - Bug fixes and slider improvements. The UI experience should be smoother now. Man! I hate HTML and jQuery!
6/20/2020 - Try to figure out that title? Well, this release is focused on Line Graphs. I am introducing two new line modes
- Line Drop Graphs - This one was requested by the community. For numerical graphs, you can now select to have the line "drop" after a selectable amount of time. The result? Below is my weather station and I heave it set to drop if it has not received an update in 10 minutes. The user can set the "drop value as well".
- Switches, Contact Sensors, Doors, windows, etc. By community request, I have implemented the ability to draw line graphs for "triggers" - switches, motion, contact triggers, etc. HubiGraphs will automatically detect the triggers and let you set the values accordingly. The result? See below. I don't know about the utility, but gotta keep the public happy.
6/18/2020- You see what I did there? Yes, this release addresses some of the most "requested" fixes. I got two out of three done:
- Timelines now supports grouping events. This means that you can set a threshold, say 1 minute and if another event triggers within 1 minute of the last one stopping, it will group it as one event. How is this useful? Well, as an example, if you want to see how often a room was occupied and don't want to look at 30+ active/inactive motion triggers; right on top of each other. As another example, my daugher doesn't sleep well. I have a motion sensor pointed at her bed. I set the threshold to 15 minutes and I can easily see when she went more than 15 minutes without moving during the night. To use it, look at "Combine events with events less than ? apart" in the options.
- Major Bug Fix. Now when you select Timelines that span more than a day, the popup will display properly. Due to Google never fixing this bug, I had to re-build the pop-up from the ground up. But... we can now add enhanced pop-ups to all the graphs. Ideas?
- What is not fixed. I am still looking in to the Timeline Horizonal Axis color. Turns out this is hard...
6/17/2020 - *******************************READ THIS ***************************************
BLUF- A whole slew of new features. YOU WILL NEED TO LOAD HubiGraph.js in to the File Manager in order to make this build work!
How do you do this?
- Right-click on the link above or HERE click "Save Link as...." *Please DO NOT rename it. Its name is important!
- Save it to your computer...
- Go to your Hubitat webpage
a. Go to "Settings"
b. Select "File Manager"
c. Click "Upload"
d. Choose the file.
I am proud? confused? whatever. to release version 1.6 of Hubigraphs. The good news: iit introduces a whole slew of features:
a. Unified code-set. I have worked to unify the user interface. All the graph setup API calls run from the same source code in Hubigraphs.groovy. This means that all I can fix things once and not in 5 seperate files. I can now start looking at enhancing timelines and
Below is what you should see. Just DRAG and DROP the tiles to set the order! This works for Bar, Range and Timeline Graphs
Hubigraph.js WILL NEED TO BE LOADED INTO FILE MANAGER.
NOTE: Currently this not supported by Package Manager. It will need to be done manually.
c. Two new graph types
This is a basic bar graph. It can display in horizontal or vertical. It should have every option you can think of. Remember: It currently only supports numerical attributes.
RANGE BAR GRAPH
This is a "special" instance of the bar graph. It shows the range of a numerical value as well as current. See below is an example of some temperature sensors (inside and outside). This shows the current value, min and max for a 24 hour period.
Let me know what you think.
6/9/2020 - This release adds a change to the Hubigraph Tile Device. There is now a new attribute -- "Graph_No_Title". Using an "Attribute" Tile on the Dashboard with "Graph_No_Title" automatically removes the Tile Title (not the graph title). Screenshots before and after in posts below.
6/7/2020 - Story time: After release 1.07 I decided it was time to show my wife the fruits of my labors. I carefully explained the Hubitat Application system and how to go about setting up graphs. She loved the graphs, but after a thoughtful moment asked, "Why does the setup have to be so ... ugly?". What?!!!! Welcome to version 1.5. Why 1.5? Well, I have now learned and jumped through the hoops of Material Design Lite, HTML, CSS and every other acrynomn you can think of. I got some help from my son and together, we produced the arguably most beautiful app (setup) in the Hubitat ecosystem. Disagree with me? Too bad, my wife likes it. Let me know what you think...
6/4/2020 - It is important in today's environment that we have full transparency. Therefore, with this update we introduce two major updates.
- We now offer a color picker with a transparency option. You may now pick any of the 16,777,217 (one for transparent; which isn't really a color) colors for your lines, timelines and gauges. Why anyone would EVER want a to graph a transparent line.....???? But, someone may want it, so it is there.
- We have changed the font size drop-down for a slider, which will show a live preview of the font size.
- A few other bug fixes that the community suggested.
6/2/2020 - In celebration of saving 15% or more on my car insurance ... I am releasing HubiGraphs and not calling it Beta of Alpha anymore! Actually, I have not received too many bugs/feature requests so I cleaned some things up (especially the configuration screens) and embedded a preview in the setup screen. I think it looks pretty cool; comment below.
5/27/2020 - Small update to address issues on initial installation.
5/25/2020 - I took a look at the "insane" amount of time it takes to load a graph. I did some tinkering and have about a 10X (on my hub) speed up! What did I do? Instead of loading all the events on a device when building the initial graph, I am now only loading those requested attributes. Also, becuase of the amount of time it "was" taking, my son implemented a "wait screen" that you will see while the graphs are loading. As always, enjoy and let me know what you see. Also, there are various reports of "time-jitter" in the initial graph. Could be a bug in groovy, but please comment below if you see the issue.
5/23/2020 - As some people have noticed, we have added HubiGraphs to the package manager . In addition, this release allows the LineGraphs Hyper-smoothing. What does this mean? You can now specify the max number of points on the graph -- per line. Screenshots below.
5/21/2020 - Added custom labels to the Line & Time Graph. This means that if you want to call your Weather Station : BaromRel something else on the graph, feel free.
5/19/2020 - I got bored writing documentation, so... by popular request (all 2 of you), I added Gauges. See screenshots below. You will need to update the parent app and create a new Child App (hubigraph_gauge.groovy). Code is in the same place. Screenshots below. One note, I have not yet added protections against stupid values for min/max and the highlight border colors. You can do some weird things if you are not careful. Take a look and enjoy. Screenshots below.
5/15/2020 - Beta build is available. This one unifies all the work under a new device type Hubigraph Tile. This add auto-creating a child device (Hubigraph Tile) from the LineGraph and TimeLine apps. This means no more need to copy/paste the address into the tile. I also did some renaming and cleanup. Also, we have added a double tap to the graph tile which will make go full screen, until you double tap again. See screens below.
-> GITHUB REPOSITORY <-
Hubigraphs enables a user to build a graph only using User Apps. These graphs can be displayed on the Hubitat dashboard using an Attribute tile.
It is important to understand the design of Hubigraphs in order to grasp both the advantages and the limitations of Hubigraphs.
- Hubigraphs is designed to work on a dashboard. As such, when you load (or refresh) a dashboard, the "tile" queries the database for all events covering the graph's time period. This can be thousands of events (depending on your device). To be clear, it can take 20-30 seconds for the initial loading. That is the bad news.
- Hubigraphs does not add any loading to the Hubitat Hub. Once a dashboard is loaded, the graphs update using the same endpoint as the dashboard. Therefore, all updates from that point forward DO NOT add any load to Hubitat, it is all on the device that is displaying the dashboard.
- Hubigraphs uses Google Charts Therefore, all the limitations, advantages and ease/difficulty of use is inherited from Google Charts. In the alpha build, I tried to incorporate as many options as possible (axes, labels, titles, etc). Some people have asked for features that to be blunt would require designing and implementing my own graphing API.
- Hubigraphs was designed to work without external devices. I enjoy playing around with Grafana, Influxdb, and other technologies, but it has required too much maintenance and configuration. I designed Hubigraphs only within the confines of Hubitat (user apps, dashboard, etc). I have no plans to support other platforms (SharpTools, and other third party dashboards at this time). Do I care if you "steal" my code, modify it, and add native support for those platforms? Not at all (see my FAQ).
New Gauges Loaded onto the Dashboard
My Dashboard with two LineGraph Tiles
AFTER DOUBLE 'CLICK' -- Full Screen Mode
TimeLine Showing Motion
Google Charts API
a. Line Graph
- Displaying graphs on a dashboard
a. Automatic child device ( Hubigraph Tile Device ) creation
b. Add to dashboard via Graph attribute on an Attribute Tile
- Support for all devices on Hub
a. Timelines - Choose your attributes/triggers for on/off status
b. Line Graphs - Choose "numerical" attributes.
- Graph Configuration Support
a. Colors - (Titles, Labels, Lines, Axes, Backgrounds, etc)
b. Font Size - (Titles, Labels, Axes, etc)
c. Axes - (Location, Single/Dual, Number Tics, etc)
- Hubigraph Tile Device
a. Auto install/uninstall from LineGraph/Timeline App
b. Double-tap -> Full Screen Graph Mode
- Real-time, Periodic Graph Updates
a. Real-time updates support sub-second updates
b. Periodic updates to reduce browser loading
I. If this is your first time doing something like this, read through the following:
II. Install the following device drivers:
III. Install the following Apps
IV. Enable OAuth on the following Apps
- TimeLine Child App
- LineGraph Child App
V. To Install a New Graph
- Load Hubigraph Parent App
- Choose Create New Line Graph or Create New TimeLine
- Choose Enable API
a. You should see the message "Token created. Click done to continue".
- Tap Select your Device/Data
- Select as many sensors as you want to graph
a. Sensors need to have numerical data (i.e 1, 2.342, 2003.298, etc)
b. You can select non-numerical data sensors (i.e. motion) but it won't work
- For each Sensor select the attributes you want to graph
a. Attributes are populated based on the last 250 events for that sensor. Example, if a battery report has not been sent in the last 250 events, battery will not show up.
b. You may select as many attributes as you want.
- Select Done
- Select as many sensors as you want to graph
a. Sensors can have numerical data (i.e 1, 2.342, 2003.298, etc)
- For each Sensor select the attributes you want to graph
- Select Next
- Configure the Start and End events
a. Known capabilities will auto-poluate
b. For numerical values, set a threshold. Directions are at the top of the page
- Choose the Order of Display
a. When you choose a number, it swaps with the attribute that had that number before. Make sense?
- Select Next
VI. Configure Graph
- I am NOT going into detail here. There are various options depending on the Graph type. Some Hints:
- Update Rate
a. Real Time only updates when data is received
b. Other options update on a schedule
- Set Size of Graph
a. Only change this if you do not use the Tile Option
a. Useful if doing Date String Formatting
- Horizonal Axis Format
a. This section is a bit technical. Select "Show String Formatting Help" for a good explanation
b. For a preview, look below at "Horizonal Axis Sample"
- Line for Sensor:Attribute
a. Choose the axis, currently BOTH is unsupported
- Realtime is kinda useless, but it works
- There really isn't much else
VII. Other Things
- The LOCAL GRAPH URL can be used to preview and adjust the Graph without a Tile on a dashboard.
- If you want a child device created/updated, turn on Install Hubigraph Tile Device for Dashboard Display.
a. Name is under Name for Hubigraph Tile Device
b. A device will be created once you choose Done
c. If you delete the HubiGraph, the child device will be deleted as well.
- Graph Data management
a. Optionally allow app to register for relevant events (Faster refresh/load times)
- Graph Overlay (pop-up) configuration
- Single line, dual Y-Axis support (this is proving challenging)
- Other stuff.
"Your idea is stupid and slow and I don't like it" - Don't use the app
"Your app is crashing my Hub. I submitted a support ticket" - Don't do that, the fine folks at hubitat do not maintain the app. This software is given free of charge with no support.
"The latest update broke the app, FIX IT". I do this for fun, please don't make it un-fun.
"I have a great idea for a feature". Go ahead and post it, I might get around to it...
"You ignored my great idea". See #2
"I hate you for getting my hopes up, your app is awful/buggy/stupid". Ok
"Please fix your app, it's broken". All cards on the table, I built this app for my wife. I will continue to support and provide updates as long as she uses it.
"I stole your code and made it soooo much better" Thanks. Please post it so I can start using it.
"You are awfully sarcastic, I don't like you". I have teenagers.
"You stole the "Hubi" name, your app doesn't deserve it." My daughter came up with it. If the hubitat owners object, I will change it.
"Your latest fix made things worse." I already covered this and See #9
Enjoy. Please take a look and tell me what you think.