Display html string item in main UI

Add-ons UIs
1

I like to display a string item (that I get from the feed binding) on a page of main UI with openHAB 4.2. This string contains

  1. html text formatting like <b> <i>
  2. html paragraphs like <p>
  3. html entities like &auml;

I would like to display the string with its formatting. Is this somehow possible in Main UI? I just found a workaround to save the html to a file an display it in an iframe in HABpanel, what seems to be no solution for mainUI.

For transformig the html entities to their character representation there seems also be no solution other than writing an own transformation like described here?

2

If you can save it as a file then you can also display that file in MainUI using a webframe:

This is currently your best option. There is no single component that will render an html string.

If the html tree is 100% consistent and it is only the text between the tags that changes, then you could build a custom widget that replicates the html tags and populate that with the appropriate content. However, this would be far more work and gets you almost no advantage over the webframe solution.

3

Thanks for pointing me to the webframe. Is there an easy solution to write a file if the string item changes?
And any idea how to preserve the overall styling of the main UI? (Since in the frame the CSS of main UI cannot be used)

4

On further thought, I take it back. There is a fairly easy solution. As I stated above, you can use arbitrary html tags in widgets. So you should be able make you own iframe widget and use the srcdoc attribute to have the iframe parse your item html:

- component: iframe
  config:
    srcdoc: =@@'nameOf Your HtmlItem'

That still doesn’t solve the css issue (although at that point you might be able to put a .css file in your /conf/html folder append a header to your html string with a style element pointing to that sheet and avoid a CORS issue, but I haven’t tried).

5

Thanks, that goes in the right direction! I was able to create an own widget with this config and could display the text without html code. As you described the standard browser font is used that does not look really nice. I will try to inject my own CSS file.

6

You can also try using the f7-text-editor component which can display sanitized html:

component: f7-text-editor
  config:
  buttons: []
  value: =@@'PCBureau_Power' + " with some <i>html</i> <b>formatting</b>!<p>Another paragraph with &auml;"

image
image617Ă—316 7.43 KB

There doesn’t seem to be an easy way to make it read-only though, maybe that could be achieved with some CSS or some other technique:

2 Likes
7

Turns out you can inject the css into the iframe directly in the widget without worrying about css file. Here I use an oh-context mostly to make the css string prettier in the widget editor, but you could just make it all one big long expression in the iframe if you wanted to:

uid: iframe_css
props:
  parameterGroups: []
  parameters: []
tags: []
component: oh-context
config:
  constants: 
    styleDirective: >
      <style>
        .bold-text {
          color: red !important;
          font-weight: 900;
          text-decoration: underline;
        }
      </style>
    simulatedItem: '<span class="bold-text" style="color: green;">Red text</span>'
slots:
  default:
    - component: iframe
      config:
        srcdoc: =const.styleDirective + const.simulatedItem

image
image313Ă—161 1.5 KB

8

try using the f7-text-editor component which can display sanitized html

This is almost the solution I liked to achive, thanks!

The small line in the header of the invisible editor buttons and that it is still an editor not a read only text are not perfect, but I can live with that. Also good that html is alredy sanitized (also if some people perhaps like to have working hyperlinks)

Would be really cool if main UI would provide such kind of cell one day so it would be really easy to display some html formatted text.

9

Also a solution that is usable if there is no need for aditional files. Many thanks for trying it out!
But I have not managed to extract the needed css to get the same visual impression than the rest of the page yet but it should be possible with fidling around a bit longer with the necessary css.

10

Please try this:

It should solve both your problems.
Example usage:

component: f7-card
config:
  title: Test HTML widget
slots:
  default:
    - component: widget:html_display
      config:
        html: =@@'PCBureau_Power' + " with some <i>html</i> <b>formatting</b>!<p>Another paragraph with &auml;"
        stylesheet: >
          .text-editor {
            border: 0;
            background: transparent;
          }
1 Like
11

Sounds promising but I could not make it work as desired. It was still editable and button header was visible. I used my previous defined f7-text-editor widget from your previous post as default-component, right?
Do I also need to add a f7-card-content? (But the text there is not using the html tags)

12

Can you also use this in a sitemap?

13

No, all the solutions presented here are specific to the MainUI custom widget system. I am not sure, but I do not think there is a similar solution for sitemaps.