Displaying a Web Page

Is there any way to display a web page within a dashboard tile? I can see how to display a jpg image, and I can see how to create a link within a tile, but neither of these is what I really want.

The reason for asking is that my weather station has the ability to generate "embeddable" web pages such as the following, and I'd like to be able to get this report up on my dashboard.

Untitled

Agreed, it would be a very useful additional tile. Sadly not possible yet as far as I know.

+1 for iframe support

Oh well, at least in the short term I can stop looking for a solution that doesn't exist! Thanks!

1 Like

Maybe you can find a local web-to-jpg program that can convert the html output and serve a jpeg to your dashboard, setting it to update every hour or so.
It's a workaround, but hey. It shoulf work somewhat :sunglasses:

Yes, I'd thought about that approach, but so far haven't been able to find anything which will do the job.

Here are a couple of options I found supported with an API. Might be of interest...

https://www.google.com/search?client=ms-android-samsung&ei=_09xXfDVB8u5rQH3t5f4DA&q=convert+Web+page+to+image+api&oq=convert+Web+page+to+image+api

Interesting - thank you - it might well do the job, but rather expensive. I think I'll just keep my fingers crossed that this might end up being a supported feature of HE.

1 Like

Well thanks to a reply posted to a related question in another part of the forum, I've now been able to achieve what I want. I'll share the solution in case it's a help to others.

The answer is a simple driver (below), and then to create a virtual switch, assign that driver to it, and use an "attribute" tile to display the web frame.

Here's the driver as I have it - your frame call goes in the "sendEvent" line where marked.

preferences {
}
metadata {
definition (name: "weatherFrame", namespace: "srp", author: "srp") {
capability "Switch"
attribute "myFrame", "text"
}
}
def on() {
sendEvent(name: "switch", value: "on")
sendEvent(name: "myFrame", value: "your iframe" )
}
def off() {
sendEvent(name: "switch", value: "off")
}
def installed() {
on()
}

2 Likes

So, you place markup for iframe in the send event? Can you show a concrete example, I'm slow witted.

Heh, heh! I did try to post the whole thing, but the forum input editor snipped out the relevant bits. Here's a screenshot instead. The link is to a public page, but unless the weather in the wilds of Scotland is of interest to you, you'll want to replace it with something of your own!

2 Likes

Excellent

Here's a modified version that allows you to set the src url for the iFrame in the driver details, so you can use more than one virtual device with difference configurations. Also adapts to the size of the tile, without having to be statically set.

preferences {
        input("src", "text", title: "iFrame Url",  required: true)
    }
metadata {
    definition (name: "weatherFrame", namespace: "srp", author: "srp") {
        capability "Switch"
        attribute "myFrame", "text"
    }
}
def on() {
    sendEvent(name: "switch", value: "on")
    sendEvent(name: "myFrame", value: "<div style='height: 100%; width: 100%'><iframe src='${src}' style='height: 100%; width:100%; border: none;'></iframe><div>")
}
def off() {
    sendEvent(name: "switch", value: "off")
}
def installed() {
    on()
}
5 Likes

This is awesome, thank you guys for your work. Is there any way to get the iframe to refresh at certain intervals?

It just does! :slight_smile:

This does work great. Using it for nest cameras. Any idea why one of my cameras shows black? Think it’s iPhone related. Seems to work on iPad.

Cool, this works! Thanks guys!

1 Like

Is there something I'm doing wrong. I can't get this to fit.
DashMyFrame

There is a css thing to make it fill. I'll see if I can track it down.

Take a look at the RadarTile from HubiGraph. There are some others that do similar solutions. It does some similar things. But in short, you have to specify an attribute with an iframe that has a height, width and overflow set properly... There are also so css tricks to remove titles, etc.