This is what is shown on the Rachio mobile app. I would need to change the rain drop icons to other icons depending on whether the irrigation system skipped watering one day. I would use different icons for different skip reasons (e.g., skip due to rain or skip due to wind, etc.). Probably would want to show amount of rain too. And I would probably just do a few days, like yesterday, today, and the next two days. Not sure yet. Anyway, I am working on custom code in Hubitat so that there’s a device with all this data in it. My question is: what’s the best way to get something like this into Sharptools? A bunch of tiles with hero attributes? A media tile? A Node.js app? Something else?
The best idea I’ve been able to come up with on my own here is to create a weather forecast tile and put an image tile below each day somehow to show the rain drops for irrigation running. Really, what I would need for that though is something more akin to the Dakboard weather forecast, which is really quite nice
. I wonder though if there’s any way for me to generate something like this dakboard forecast? Except, I would ideally have the weather for the previous day as well. The create your own weather forecast widget doesn’t seem like it will work because the spacing won’t be right. Plus, I’m not fond of the branding on it…
As you noted you could create something close with theweather.com/widget, but it doesn’t scale as wide as your screenshot and it has their branding on it:
If you’re looking to build a custom image / layout, you could use something similar to the approach in the custom traffic display that we discussed previously. That approach is more effort, but would give you full control of the resulting look and feel.
Ok, thanks. That’s what I suspected I would need to do, but wanted to confirm before working on it. This dashboard is going to be really cool once I get this all figured out, especially if some of my feature requests come to fruition at some point
So, for this use case, unlike the traffic one, I need Hubitat device state. Is the idea the same no matter where I do this; namely, return a URL for an image for Sharptools to display? And I can create the image in node.js or hubitat (groovy) or wherever?
I am asking around in the Hubitat forums about how to do what you did with that node.js app. There’s a few things I have to figure out:
(1) The Rachio API gives me all the weather data, including URLs for the weather icons. So, if I could somehow combine multiple icons in Hubitat that would work…
(2) then I need to figure out how to post the composite image to a URL for serving sharptoools…
In the meantime, I found a weather widget that can adjust in size. Maybe it could work. But it’s not an image…any way to make that work?
There are other uses cases besides Sharptools that make it to where building this in Hubitat makes the most sense. The native Rachio integration for example doesn’t provide the start time of the next run, which is what I want to show on sharptools dashboard. But having that next run info in Hubitat would enable aborting or delaying the next run for any number of reasons, such as motion in the yard or windows open. Plus, I am more familiar with groovy than node.js.
That’s not so much the case for the traffic icon though, at least I don’t think it is. I haven’t decided yet whether I’m going to keep that in Glitch or move over to Hubitat.
Would sharptools render an SVG that uses the SVG image element for embedding a JPG? If so, maybe I could create the SVG in Hubitat using various JPGs I get from hubitat state, and then send the SVG to Sharptools.
Yes, we’re not doing any special processing on the images. They’re going straight from the source to your browser, so as long as the browser <img> tag can display it, you should be good to go.
Hi @Justin_Leonard - I put together a technical proof of concept for you showing how you can use a Hubitat app to render a dynamic SVG image directly to the browser from Hubitat:
You could use the URL that’s generated directly in a SharpTools media tile.
Ok, that’s awesome. Thanks! That works great. The local endpoint will work for my home dashboard on the local network, but I suppose I’ll have to figure out a way to expose the image for remote access (like on my phone when I’m away from home). Maybe put on github or something.
So, I’ve got this working great for the irrigation schedule tile. I’m confident it’s going to work well for that since it’s a pure svg file, with no image element. But I’m also exploring if I can use this to change the background image of a dashboard based on my hub events. I’ve got it to where I can change the URL embedded in an SVG image element based on hub events, but when I try to display it in sharptools, it doesn’t display. That’s the case even though it displays fine in the browser.
This is the SVG:
Try hosting a raw copy of that SVG somewhere (like on GitHub) to make sure it’s working as expected.
I tried hosting it on GitHub and it would not render in my browser properly and it included some debug information in the browser console.
Edit: Failing to view the raw SVG when it’s hosted on GitHub might actually be a result of GitHub’s stricter Content Security Policy… that being said, the concept of simplifying the test still fundamentally applies - I tried creating a simple HTML page with just an image tag on it pointing to your SVG and it’s the same thing. So there’s something about the approach used in the SVG that won’t work when loaded in a page rather than loaded directly or embedded directly. (demo)
Hmm, yeah looks like that’s a known limitation of SVG. Some posts suggest workarounds but I haven’t gotten any of them to work. I’ll figure out some other way.
