Create custom ui node in Dashboard 2

General
, ,
36

To make this Dashboard 2.0 friendly, you'd adjust:

<div class="wrapper">
    <div class="fluid" style="height:{{msg.payload}}%"></div>    
    <div class="frame"></div>
    <div class="txt">{{msg.payload}}%</div>
</div>

to be:

<div class="wrapper">
    <div class="fluid" :style="'height:' + msg.payload + '%'"></div>    
    <div class="frame"></div>
    <div class="txt">{{msg.payload}}%</div>
</div>

or, if you want to use Template Literals syntax:

<div class="wrapper">
    <div class="fluid" :style="`height:${msg.payload}%`"></div>    
    <div class="frame"></div>
    <div class="txt">{{msg.payload}}%</div>
</div>

Detail on why in our docs: Template ui-template | Node-RED Dashboard 2.0