How to render html elements from an item into HABPanel?

Apps & Services HABPanel
1

Hi all!

Is it possible to render html elements stored in an item into a < div > element of HABPanel widget?

I have an item which stores html code (actually it is an SVG image), which I want to be rendered in the HABPanel.

For example, the item value is

<b<test</b>

When I use ng-bind-html it does not work as expected:

<div id="wrapper" ng-bind-html="{{ itemValue('Weather_GIS_ConditionIcon') }}"></div>`

results in

<div id="wrapper" ng-bind-html="<b>test</b>"></div>

Any help?

2

Does this help you at all?
Or are you thinking of something else?

Could your Item value be used to influence the state of the item in the SVG file?

I have a dimmer item that causes different states in an SVG.

3

No, I’m not using it as a floorplan. I just have a weather svg icon itself stored in the item and need to make it render in HABPanel.

4

Yes, I was thinking that you could insert an SVG file with multiple states, that are determined by the Item.

Rather than load different SVG files.

It’s only an idea.

5

Problem solved, ng-bind-html must not have values enclosed in {{ }}

Also, according to this post

some HTML values are treated as unsafe by default so must be processed with $sce.trustAsHtml(html)

1 Like