[DONE] Add embedded WebView tile [was HTML display]

Displaying HTML within a device attribute is important to me. Please consider.

Yep, its on the list of things to add.

I will be adding “url image” to the tiles sooner, with an update frequency, so if you have a camera with a URL or a webserver image (weather/radar etc) that you want to show, that when you refresh every 5 seconds or 1 min etc it will update the tile face, and click will go full screen. This will be quick to add

5 Likes

Can you explain a little further what specifically you mean by “within” an attribute?

Do you mean render the HTML contained within the attribute as if it was rendered in a web browser? What kind of device outputs HTML and what size box would you be expecting the output of the HTML be rendered into ??

This is a feature I’d really like to see too. Many devices have an attribute which contains html to render within a HE dashboard tile. OpenWeather device, Hub Information Device, WebCore graph tile devices, etc.

I’d like to have that render as the main component of a tile, ideally filling the tile.

1 Like

Please vote for this, and with enough interest, it will be implemented.

2 Likes

Thanks for adding the Simple HTML tile in release 1.4.3! I’ve been trying it out, but unfortunately I wasn’t able to make it work off device attributes from OpenWeather, Hub Information Device, or Life360 with States, but I’m guessing that’s down to the HTML being returned.

As an example, I tried the myTile attribute from OpenWeather. This shows just the text TABLE SECTION in the tile. I extracted the HTML from the attribute (via developer tools when viewing the device attributes page) and tried pasting that in as HTML/URL, but got the same results.

This is the HTML I was trying:

<strong><style type="text/css">.cI{height:45%}.cIb{height:80%}</style><table style="text-align:center;display:inline"><tbody><tr><td><b>Werrington, GB</b></td></tr><tr><td>Scattered clouds</td></tr><tr><td>  7°C<img class="cI" src="https://tinyurl.com/icnqz/29.png">Feels like   5°C</td></tr><tr style="font-size:85%"><td><img class="cIb" src="https://tinyurl.com/icnqz/wb2.png">West @   7 MPH, gusts @  16 MPH</td></tr><tr style="font-size:80%"><td><img class="cIb" src="https://tinyurl.com/icnqz/wb.png">  31 inHg <img class="cIb" src="https://tinyurl.com/icnqz/wh.png">89% <img class="cIb" src="https://tinyurl.com/icnqz/wu.png">0% <img class="cIb" src="https://tinyurl.com/icnqz/wr.png">None<br><img class="cIb" src="https://tinyurl.com/icnqz/wsr.png">07:41 <img class="cIb" src="https://tinyurl.com/icnqz/wss.png">16:50<a href="https://openweathermap.org/city/2648409" target="_blank"><img class="cI" src="https://tinyurl.com/icnqz/OWM.png" style="height:2em"></a> @ 21:45</td></tr></tbody></table></strong>
1 Like

Correct. It is very basic, and won’t display more complex HTML… in saying that, leave it with me to see if I can amp it up a notch or two so that it is more useful.

Thanks again for the feedback and appreciate the time/effort to give me something to target.

1 Like

Grant, are you having to implement HTML rendering engine one <tag> at a time? I’m noticing that some inline styling works, but others don’t. I also notice that the current render eats all extra whitespace, which may not always be desirable (tabs, non-breaking spaces, etc.).

Not me personally, but a library I’m using - but essentially yes that’s correct. Not ideal and unfortunately I’m unable (yet) to utilise the built in web browser on every platform. The eventual goal is for the full Safari/WebKit experience, but for now it’s this basic HTML renderer as a short gap measure.

1 Like

Ha, I’ve been leaving words out lately… I meant ONE TAG AT A TIME, but good answer either way. Understood it’s a W-I-P and happy to keep testing. The scaling of the HTML Tile is … interesting … so I was trying my best to style it somehow. If you could somehow publish the subset of HTML / CSS it does allow, that’d be cool.

In the meantime, is there a legit reason that the input field for “URL/HTML” has to be limited to a single line? I get that for “URL”. But for “HTML” it’d be nice to have a multi-line (ideally, resizable) “canvas” in which to paste and edit HTML code.

Could the TIle type have three selectors under Properties instead of 2, for this purpose?

[DEVICE] [URL] [HTML]

1 Like

Good idea and will look at this and some other improvements

I’ve since beta tested the beschnizzle out of that HTML Tile type and found to my surprise that it will accommodate quite a few <tags> and <styles> –
things like centering, or text color/size, box/frame thickness, etc. – but at the same time hilariously misinterprets others (like <table> and <grid>) that I’d really love to play with one day.

Good news is that I think I’ve solved the Table support. I didn’t to include the needed extra library for HTML. So it seems to be working fine for example provided earlier. I’ll add the extra large textfield that supports multi-line too !!

2 Likes

2 Likes

That’s looking really good! Looking forward to trying it out :sunglasses:

1 Like

Can confirm the HTML display tiles just got a lot more powerful, able to display Tables with more than acceptable fidelity:

Source HTML .tg {border-collapse:collapse;border-spacing:0;} .tg td{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px; overflow:hidden;padding:10px 5px;word-break:normal;} .tg th{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px; font-weight:normal;overflow:hidden;padding:10px 5px;word-break:normal;} .tg .tg-rpk7{background-color:#96fffb;border-color:#000000;color:#cb0000;font-family:"Arial Black", Gadget, sans-serif !important; font-size:22px;font-style:italic;text-align:left;vertical-align:top}
First Second Third
1 Like

Happy to report that HTML Tiles also make a great means of showing the contents of a Variable Connector (hub variable) whose value changes often from short to long strings:


Whereas a standard Device Tile or Label Tile, with a fixed font size (based on what you set in Theme Editor and TileStyles), would otherwise truncate longer text strings.

So… neat!

Yep, and I could possibly add variables into the static HTML based off a device - just need to think about what tag would be suitable to mark the attributes so that I can update the static HTML with those values. But overall, should be very possible.

1 Like

I feel like I’ve seen them all over the years:
CSS = --var
WebCoRE = {var}
Reactor, Rule Machine and Tile Template Manager = %var%
Even seen some double-percents and double-braces!