Main UI widgets with html, css and js?

[tose (torsten)]

Hello, I see significant progress with the widgets in the main UI interface, and I’ve been considering integrating the timeline picker into the main UI as a widget for quite some time now. But the YAML concept makes this impossible.

The integration with a webview card is a possible workaround but native would a be much better.

Is there in the meantime a native way to create widgets with html, css and js?

[jsjames (Jeff James)]

raw HTML is not supported, but you can create those same elements in YAML format:

slots:
  default:
    - component: h3
      config:
        content: Device Status Report
        style:
          margin: 0
          color: "#2196f3"
    - component: span
      config:
        content: ="The current temperature is " + items.LivingRoom_Temperature.state
        style:
          font-weight: bold

CSS is supported by using the stylesheet tag under the config properties:

component: oh-label-card
config:
  title: My Item Card
  item: My_Temperature_Sensor
  stylesheet: >
    .card-header {
      color: green;
      background: yellow;
    }
    .badge {
      font-size: 14px;
    }

I don’t anticipate user-supplied js will be supported anytime soon given it opens a pretty big security hole.

[jsjames (Jeff James)]

I see the usefulness of a timeline picker control that could be built into openhab (i.e. a oh-timeline component) and think that would be a good way to proceed. Is there where a lot of the custom js scripting is needed?

[JustinG]

Yes and no. Here you can see some of the possibilities and how arbitrary html works in the yaml system:

MainUI Widgets and a 3D Smart Home

There have been previous examples of integrating openHAB with a 3D rendering, but they have required significant coding and have relied on some of the more specialized OH UI interfaces such as HABPanel. While working on a completely unrelated project recently, it occurred to me that the library I was using, model-viewer, is a perfect candidate for bringing 3D capability into OH just using the custom widget system. So, in this tutorial I’m going to go over: The basics of getting a 3D model show…

The main caveat there is that, if you are on the newest snapshots then the CSP has been updated and inline scripts are now blocked, although source scripts in $CONF/html are still allowed. There are, of course, ways to restructure to move all inline scripts to files so it is still possible.

I think your best bet, for something like this, would be to translate this into a custom html element. Then, as you can see in the example above with the model-viewer custom element, you just need to import the script and can use the yaml system to instantiate and configure the custom element pretty easily. That would probably also make it easier to officially incorporate it into MainUI.

[tose (torsten)]

@jsjames

raw HTML is not supported, but you can create those same elements in YAML format:

The timeline picker is far too complex to be represented with YAML.

@jsjames

Is there where a lot of the custom js scripting is needed?

You can have a short look in the source, thats also a lot.

@JustinG

Yes and no. Here you can see some of the possibilities and how arbitrary html works in the yaml system:

  MainUI Widgets and a 3D Smart Home Tutorials & Examples

I will look into this, thank’s. Also thank’s for your detailed description in the other thread.