HTML Tiles: Need vastly expanded CSS/HTML parsing

Not Bugs
1

Looking good so far with respect to Tables and CSS styling (full code pasted below):

hv_html_tile_styling
hv_html_tile_styling1344×1284 74.6 KB

Source code 
<style>
tr {border:white 1 solid;}
td, th {font-size:14;padding:2 5;border:none;font-weight:bold;}
.bg1 {background-color:red;}
.bg2 {background-color:blue;}
</style>
<table>
<tr class='bg1'><th>A</th><th>B</th></tr>
<tr class='bg2'><td>C</td><td>D</td></tr>
</table>

However, note that (so far as I can tell) there’s no support yet for things like CSS --variables. I’ll be testing transitions, transforms and animations next.

UPDATES

  • Transitions (e.g. width 2s) are a no-go;
  • 2D Transforms (e.g. translate) are a no-go;
  • 3D Transforms (e.g. rotateX(150deg)) are a no-go;
  • Animations (e.g. @keyframes) are a no-go;
2

@g.slender how challenging would it be for CSS variables to get included with the HTML Tile lexicon? I foresee lots of interesting uses there.

3

Next… I dunno whether this constitutes a nitpick, or a quasi-bug, but when I intentionally include an HTML anchor with a known-good URL in its href, clicking that hyperlink in the finished Tile (shown here) does nothing.

hv_html_hyperlink_inactive
hv_html_hyperlink_inactive847×672 187 KB

What should I expect in this, admittedly unusual, use case?

4

3 posts were split to a new topic: [BUG] HTML tile is uneditable in some cases

5

Good question - nothing because I guess you tell me what you would expect

7

Welp… I’d like to flip that question back to the guys who initially requested the HTML Tile, for guidance from them. Surely their answer won’t be “Do nothing” (which is currently the situation)… so, should a weblink open in the host platform’s browser? Act like a URL tile (i.e. perhaps have the option of sending its links silently or opening the browser)?

8

The output of HubiGraph app on HE seems to include an iFrame component, which HV does not render. Every attempt I’ve made to utilize the ‘Graph’ attribute of a HubiGraph tile device results in a blank Tile on HV.

Can we look into that? Obviously, there are a number of means whereby graphs get created/transmitted/displayed, and this is a big deal for power users. Should we start a new thread only concerning various graphing utilities and how/whether HV accommodates their output?

9

Back with more findings, my brothers and sisters…

CSS tags that hubiVue does not (yet) recognize/honor:

:nth-child(even) selector
text-align: center / right property

The first makes it a challenge to introduce alternating colors in table rows. The latter makes it impossible to display table columns in any other fashion beside left-justified, such as here (using Gary Milne’s awesome new Hubitat app called Tile Builder…):

image
image1233×911 140 KB

Are these (and many others, I’m sure) the kind of things that HTML Tiles can eventually learn? Would make a world of difference!

10

Am I just talking to myself on this thread, lol??

11

This is the library I’m using that renders the HTML/CSS

…and specifically the supported CSS

I could raise any defects with the author to see if they’d be keen to implement fixes or enhancements, but as I’ve mentioned, this HTML tile is a stop-gap until I can get a full embedded chromekit widget into all platforms that will render as equally good as the standard Edge/Chrome/Safari browsers that we all use. That final step is the end goal, and will enable video, and anything that you can throw at a browser (all within a tile or window etc). I suspect it will happen by the end of the year, but not anytime soon.

12

Great to know, and of course I already understood you were “on the case” so I’m happy to continue looking forward to further enhancements along this line. I appreciate having these new nuggets to chew on in the meantime.

Unfortunately, this does mean HV may miss the boat just going out, carried along by all the fervor surrounding the new 3rd party app, Tile Builder. But that’s neither here nor there, just a fun carrot added to the stick.

Thanks for the insights!