# Custom Elements Ui-Template Dashboard 2.0

**URL:** <https://discourse.nodered.org/t/custom-elements-ui-template-dashboard-2-0/85228>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [5 February 2024 20:00 UTC](https://discourse.nodered.org/t/custom-elements-ui-template-dashboard-2-0/85228 "2024-02-05T20:00:16Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![diegodamaceno](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/diegodamaceno/32/85742_2.png) [@diegodamaceno](https://discourse.nodered.org/u/diegodamaceno)\
**Post date:** [5 February 2024 20:00 UTC](https://discourse.nodered.org/t/custom-elements-ui-template-dashboard-2-0/85228/1 "2024-02-05T20:00:16Z")

</div>

Leave here your question and element of your creation to publicize the dashboard 2.0 and improve it. @hotNipi

---

<div class="post-metadata">

**Author:** ![diegodamaceno](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/diegodamaceno/32/85742_2.png) [@diegodamaceno](https://discourse.nodered.org/u/diegodamaceno)\
**Post date:** [5 February 2024 20:01 UTC](https://discourse.nodered.org/t/custom-elements-ui-template-dashboard-2-0/85228/2 "2024-02-05T20:01:54Z")

</div>

on/off button

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/a/7ab54ec4c8015907379bb2c4785e5522945e7198.png)

```auto
<template>
    <v-btn class="button" ref="button" stacked @click="alternar">
        <div class="title">Luz</div>
        <v-icon class="icon" ref="icon">{{icon}}</v-icon>
    </v-btn>
</template>

<script>
    export default {
        data() {
            return {
                value: "OFF",
                icon: "mdi-lightbulb-outline"
            };
        },
        methods: {
            alternar: function () {
                if (this.value === 'ON') {
                    this.desligar();
                } else if (this.value === 'OFF') {
                    this.ligar();
                } else {
                    this.desligar();
                }
            },
            ligar: function () {
                this.icon = "mdi-lightbulb-on-outline";
                this.$refs.icon.$el.style.color = '#BD9608';
                this.$refs.icon.$el.style.textShadow = '0px 0px 10px #BD9608';
                if (this.value === 'OFF') {
                    this.send({ payload: 'ON' });
                    this.value = "ON"; 
                }
            },
            desligar: function () {
                this.icon = "mdi-lightbulb-outline";
                this.$refs.icon.$el.style.color = '#A9A9A9';
                this.$refs.icon.$el.style.textShadow = '0px 0px 0px';
                if (this.value === 'ON') {
                    this.send({ payload: 'OFF' });
                    this.value = "OFF"; 
                }
            }
        },
        watch: {
            msg: function(){
                if(this.msg.payload != undefined){
                    console.log('got message :',this.msg)
                    if (this.msg.payload === "ON") {
                        this.ligar();
                    } else if (this.msg.payload === "OFF") {
                        this.desligar();                        
                    }
                }
            }
        }
    }
</script>

<style>
    .button {
        display: flex; 
        flex-direction: column; 
        margin: auto; 
        height: 100%; 
        width: 100%; 
        background-color: #4F4F4F; 
        color: #000000; 
        border: 1px solid #000000; 
        ont-size: 14px; 
        border-radius: 18px;"
    }
    .title {
        font-size: 14px;
    }
    .icon {
        font-size: 40px;
    }
</style>

```

---

<div class="post-metadata">

**Author:** ![diegodamaceno](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/diegodamaceno/32/85742_2.png) [@diegodamaceno](https://discourse.nodered.org/u/diegodamaceno)\
**Post date:** [5 February 2024 20:06 UTC](https://discourse.nodered.org/t/custom-elements-ui-template-dashboard-2-0/85228/3 "2024-02-05T20:06:24Z")

</div>

How can we place the buttons side by side and not one below the other in the group? @hotNipi @joepavitt

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/9/89842b087c129d36bea798126d1e9626390b513d.jpeg)

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [5 February 2024 20:37 UTC](https://discourse.nodered.org/t/custom-elements-ui-template-dashboard-2-0/85228/4 "2024-02-05T20:37:39Z")

</div>

Inside group make your widget to live in defined area like this:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/b/6b559c2234da5919c48339b9034b268fd229dac2.png)

So there is space for another widgets to live at side.

---

<div class="post-metadata">

**Author:** ![diegodamaceno](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/diegodamaceno/32/85742_2.png) [@diegodamaceno](https://discourse.nodered.org/u/diegodamaceno)\
**Post date:** [5 February 2024 21:17 UTC](https://discourse.nodered.org/t/custom-elements-ui-template-dashboard-2-0/85228/5 "2024-02-05T21:17:41Z")

</div>

Mine doesn't open the option like that... I can only run sideways.

---

<div class="post-metadata">

**Author:** ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)\
**Post date:** [5 February 2024 21:31 UTC](https://discourse.nodered.org/t/custom-elements-ui-template-dashboard-2-0/85228/6 "2024-02-05T21:31:33Z")

</div>

Doesn't it depend upon which **layout** you have selected in the page props?

> <https://github.com/FlowFuse/node-red-dashboard/tree/main/docs/layouts>
>
> //github.com/FlowFuse/node-red-dashboard/tree/main/docs/layouts

---

<div class="post-metadata">

**Author:** ![gerry](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gerry/32/21604_2.png) [@gerry](https://discourse.nodered.org/u/gerry)\
**Post date:** [5 February 2024 22:29 UTC](https://discourse.nodered.org/t/custom-elements-ui-template-dashboard-2-0/85228/7 "2024-02-05T22:29:54Z")

</div>

@hotNipi has posted tons of great "css sttuff" some of which I've used already, now he's posting more and I'm trying to figure out how to preserve all this for the future when I'll probably need it rather than hunting through the forum for hours. Is there somewhere somehow his code can be put somewhere so everyone can find it easier, easily?  
Probably not the place but thought I'd tack it on here

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [5 February 2024 22:33 UTC](https://discourse.nodered.org/t/custom-elements-ui-template-dashboard-2-0/85228/8 "2024-02-05T22:33:42Z")

</div>

Just don't ask for category with my name or smth like that 😃  
This forum has really good searching capabilities.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [6 February 2024 11:01 UTC](https://discourse.nodered.org/t/custom-elements-ui-template-dashboard-2-0/85228/9 "2024-02-06T11:01:08Z")

</div>

Maybe get them tagged with "css"?

If you have a list of threads, I'd be happy to add the tag if people agree.

* * *

PS: Meant to say that would be for generic CSS related matters - not necessarily for D1/D2 specific. Some of the things posted cover both though.

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [6 February 2024 11:44 UTC](https://discourse.nodered.org/t/custom-elements-ui-template-dashboard-2-0/85228/10 "2024-02-06T11:44:57Z")

</div>

I want to start documenting more of the examples into the documentation. I already put a placeholder page in place here: [UI Template Examples | Node-RED Dashboard 2.0](https://dashboard.flowfuse.com/user/template-examples.html)

The source for that docs page is here: [node-red-dashboard/docs/user/template-examples.md at main · FlowFuse/node-red-dashboard · GitHub](https://github.com/FlowFuse/node-red-dashboard/blob/main/docs/user/template-examples.md)

All PRs and contributions are welcome

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [6 February 2024 11:46 UTC](https://discourse.nodered.org/t/custom-elements-ui-template-dashboard-2-0/85228/11 "2024-02-06T11:46:46Z")

</div>

Hmmm, that option _should_ be opening like that for _all_ layouts. (fyi @Paul-Reed)

Each layout just then interprets the value slightly differently (sometimes as a fixed `px` value, e.g. `2 x 48 px`, sometimes as a fraction, e.g `2/12`.

Can you share a little recording (or open a GH issue if it's definitely not opening like that) as that suggests a bug on the element sizing widget.

---

<div class="post-metadata">

**Author:** ![diegodamaceno](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/diegodamaceno/32/85742_2.png) [@diegodamaceno](https://discourse.nodered.org/u/diegodamaceno)\
**Post date:** [6 February 2024 13:12 UTC](https://discourse.nodered.org/t/custom-elements-ui-template-dashboard-2-0/85228/12 "2024-02-06T13:12:04Z")

</div>

Here the same shape always opens regardless of the layout you place. I keep trying to adjust the position of the elements. I confess that it is quite complicated given the way I create the elements.

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/7/f73d63612f89391ec998d57bd7f8fa0811c607bd.png)

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [6 February 2024 13:16 UTC](https://discourse.nodered.org/t/custom-elements-ui-template-dashboard-2-0/85228/13 "2024-02-06T13:16:18Z")

</div>

Ah yes, understood - that's the _group_ size, which will always be a given width. The `template` nodes can then be sized accordingly by setting their width for each node, e.g. if each template has a width of `2`, then you'll have 3 x side-by-side

---

<div class="post-metadata">

**Author:** ![diegodamaceno](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/diegodamaceno/32/85742_2.png) [@diegodamaceno](https://discourse.nodered.org/u/diegodamaceno)\
**Post date:** [28 February 2024 16:36 UTC](https://discourse.nodered.org/t/custom-elements-ui-template-dashboard-2-0/85228/14 "2024-02-28T16:36:01Z")

</div>

Below is an example of a button that issues a reboot to an ssh node to restart the server using the password. Password "780705"

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/8/785e8be05f78337cbe9600124ddf7971030cece5.png)

```auto
<template>
  <div>
    <v-btn class="button_reboot" ref="button" stacked @click="opendialog">
      <div class="title_reboot">Reboot</div>
      <v-icon class="icon_reboot" ref="icon">{{icon}}</v-icon>
    </v-btn>
    <v-dialog class="dialog_reboot" v-model="dialog">
      <v-text-field class="text_dialog_reboot" label="Senha" variant="outlined" v-model="senha" @keyup.enter="closedialog"></v-text-field>
      <v-btn class="btn_dialog_reboot" @click="closedialog">Autorizar</v-btn>
    </v-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {        
        icon: "mdi-restart",
        dialog: false,
        senha: '' 
      };
    },
    methods: {
      opendialog() {
        this.dialog = true;
        this.$refs.button.$el.style.backgroundColor = '#FF8C00';
      },
      closedialog() {
        if (this.senha === '780705') { 
          this.dialog = false;
          this.ligar();
          this.senha = ''
          this.$refs.button.$el.style.backgroundColor = '#4F4F4F';
        } else {
          this.senha = ''
          this.$refs.button.$el.style.backgroundColor = '#4F4F4F';
        }
      },
      ligar() {     
        this.send({ payload: 'reboot' });
      }     
    }
  };
</script>

<style>
  .dialog_reboot {
    display: flex;
    flex-direction: column;
    margin: auto;
    background-color: #A9A9A9;
    border: 1px solid #000000;
    border-radius: 18px;
    height: 150px;
    width: 300px;
  }

  .btn_dialog_reboot {
    display: flex;
    margin: auto;
    background-color: #A9A9A9;
    border: 1px solid #000000;
    color: #000000;
    border-radius: 08px;
    width: 40%;
  }

  .button_reboot {
    display: flex;
    flex-direction: column;
    margin: auto;
    height: 75px;
    width: 75px;
    background-color: #4F4F4F;
    color: #000000;
    border: 1px solid #000000;
    font-size: 14px;
    border-radius: 18px;
  }

  .title_reboot {
    font-size: 75%;
  }

  .icon_reboot {
    font-size: 40px;
  }
</style>

```

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [29 February 2024 17:40 UTC](https://discourse.nodered.org/t/custom-elements-ui-template-dashboard-2-0/85228/15 "2024-02-29T17:40:36Z")

</div>

Had someone just DM me asking a question about accessing the width/height and just wanted to share the answer here too.

Anything configured on the `ui-template` in the Node-RED Editor is available inside the `ui-template` via `this.props`, e.g:

In the Template:

```html
<template>
    <div>Width: {{ props.width }}</div>
    <div>Height: {{ props.height }}</div>
</template>

```

In the Vue Component's Logic:

```html
<script>
    export default {
        mounted() {
            // code here when the component is first loaded
            console.log(this.props.width, this.props.height)
        }
    }
</script>

```

---

<div class="post-metadata">

**Author:** ![Buckskin](https://avatars.discourse-cdn.com/v4/letter/b/b9e5f3/32.png) [@Buckskin](https://discourse.nodered.org/u/Buckskin)\
**Post date:** [29 February 2024 19:43 UTC](https://discourse.nodered.org/t/custom-elements-ui-template-dashboard-2-0/85228/16 "2024-02-29T19:43:11Z")

</div>

Is there a write-up on` props` 'cause there is loads of stuff there?

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [1 March 2024 11:16 UTC](https://discourse.nodered.org/t/custom-elements-ui-template-dashboard-2-0/85228/17 "2024-03-01T11:16:31Z")

</div>

Not formally, as it's not something I'd anticipated many utilising, for now the best I can offer is the source where they're first defined: [node-red-dashboard/nodes/widgets/ui\_template.html at c595d8eb9f194f406c3f2e9abb33a9fbafdcbc59 · FlowFuse/node-red-dashboard · GitHub](https://github.com/FlowFuse/node-red-dashboard/blob/c595d8eb9f194f406c3f2e9abb33a9fbafdcbc59/nodes/widgets/ui_template.html#L75-L120)

Worth noting thought that some of that is also legacy from node-red-dashboard 1.0, and I've not done a full clear out of.

The other nice place to see this is in our Debug View: [Debugging Dashboard 2.0 | Node-RED Dashboard 2.0](https://dashboard.flowfuse.com/contributing/widgets/debugging.html)

Where I have a full table of the properties, their values, etc. at runtime for your own Dashboard

---

<div class="post-metadata">

**Author:** ![Buckskin](https://avatars.discourse-cdn.com/v4/letter/b/b9e5f3/32.png) [@Buckskin](https://discourse.nodered.org/u/Buckskin)\
**Post date:** [1 March 2024 23:14 UTC](https://discourse.nodered.org/t/custom-elements-ui-template-dashboard-2-0/85228/18 "2024-03-01T23:14:54Z")

</div>

Brilliant, thank you for pointing this out. I had ignored this because I haven't thought of developing a `ui_widget` but there is useful stuff for `ui_template` widgets also

---

<div class="post-metadata">

**Author:** ![diegodamaceno](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/diegodamaceno/32/85742_2.png) [@diegodamaceno](https://discourse.nodered.org/u/diegodamaceno)\
**Post date:** [20 March 2024 15:40 UTC](https://discourse.nodered.org/t/custom-elements-ui-template-dashboard-2-0/85228/19 "2024-03-20T15:40:55Z")

</div>

@joepavitt

Here's another button implementation with a password request for 3 home alarm states. I do not offer automation for the alarm, but rather the ui-template code for dashboard 2.0 in 1x1. I hope you cooperate. Use whatever you want.

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/2/622cef097171a3751cb7ebc3f58e75a2b1bb033d.png)

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/6/868557d626c41ea4130bb36fe7ca061817771bef.png)

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/3/33402a457178f641aeb1c8b7fe7d35713b66f8ce.png)

```auto
<template>
    <v-btn class="button_alarme" stacked @click="opendialog">
        <div class="title_alarme">{{ titulo_presenca }}</div>
        <v-icon class="icon_alarme" ref="icon_alarme">{{ icon }}</v-icon>
        <div class="title_alarme">{{ titulo_status }}</div>
    </v-btn>
    <v-dialog class="dialog_alarme" v-model="dialog" @click:outside="closedialog_b">
        <v-text-field class="text_dialog_alarme" type="password" label="Senha" variant="outlined" v-model="senha" @keyup.enter="closedialog_a"></v-text-field>
        <v-btn class="btn_dialog_alarme" @click="closedialog_a">Autorizar</v-btn>
    </v-dialog>
</template>

<script>
    export default {
        data() {
            return {
                value: '',
                senha: '',
                icon:'mdi-home-alert',
                titulo_presenca: '--',
                titulo_status: '--',
                dialog: false                
            };
        },
        mounted() {            
            this.$socket.on('widget-load:' + this.id, (msg) => {
                this.value = msg.payload;
                if (this.value === "ativo_em_casa") {
                    this.ativo_em_casa();
                } else if (this.value === "ativo_fora_de_casa") {
                    this.ativo_fora_de_casa();
                } else if (this.value === "desativado") {
                    this.desativado();
                }
            });
        },
        methods: {
            opendialog() {
                this.dialog = true;
            },
            closedialog_a() {
                if (this.senha === '1234') {
                    this.senha = '';                    
                    this.dialog = false;
                    this.ativo_em_casa();
                    this.send({ payload: 'ativo_em_casa' });
                } else if (this.senha === '12345') {
                    this.senha = '';
                    this.dialog = false;
                    this.ativo_fora_de_casa();
                    this.send({ payload: 'ativo_fora_de_casa' });
                } else if (this.senha === '0') {
                    this.senha = '';
                    this.dialog = false;
                    this.desativado();
                    this.send({ payload: 'desativado' });
                } else {
                    this.senha = '';
                }
            },
            closedialog_b() {                
                this.senha = '';
                this.dialog = false;
            },
            ativo_em_casa() {                
                this.$refs.icon_alarme.$el.style.color = '#F0881D';                 
                this.icon = "mdi-home-lock";
                this.titulo_presenca = "Presente";
                this.titulo_status = "Ativo";
            },
            ativo_fora_de_casa() {                
                this.$refs.icon_alarme.$el.style.color = '#F0491D';                
                this.icon = "mdi-home-lock";
                this.titulo_presenca = "Ausente";
                this.titulo_status = "Ativo";
            },
            desativado() {                
                this.$refs.icon_alarme.$el.style.color = '#1DF088';                
                this.icon = "mdi-home-lock-open";
                this.titulo_presenca = "Presente";
                this.titulo_status = "Desativado";
            }
        }
    }
</script>

<style>
    .dialog_alarme {
        display: flex;
        flex-direction: column;
        margin: auto;
        background-color: #A9A9A9;
        border: 1px solid #000000;
        border-radius: 18px;
        height: 150px;
        width: 300px;
    }
    
    .btn_dialog_alarme {
        display: flex;
        margin: auto;
        background-color: #A9A9A9;
        border: 1px solid #000000;
        color: #000000;
        border-radius: 08px;
        width: 40%;
    }
    .button_alarme {
        display: flex; 
        flex-direction: column; 
        margin: auto; 
        height: 75px; 
        width: 75px; 
        background-color: #4F4F4F; 
        color: #000000; 
        border: 1px solid #000000; 
        font-size: 14px; 
        border-radius: 18px;
    }
    .title_alarme {
        font-size: 60%;
    }
    .icon_alarme {
        font-size: 40px;
    }
</style>

```

---

<div class="post-metadata">

**Author:** ![diegodamaceno](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/diegodamaceno/32/85742_2.png) [@diegodamaceno](https://discourse.nodered.org/u/diegodamaceno)\
**Post date:** [22 March 2024 15:52 UTC](https://discourse.nodered.org/t/custom-elements-ui-template-dashboard-2-0/85228/20 "2024-03-22T15:52:37Z")

</div>

@joepavitt

I would like to introduce a new component for the thermostat. This component is designed to receive temperature, humidity, and battery level data from a Zigbee sensor. Furthermore, it calculates the Heat Index (HI) directly and accurately. Additionally, it produces a comprehensive object containing all the information, including the calculated HI. This component is fully functional and supports page refresh in browsers.

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/2/72e8711f8cde77191698c0879e22778080ff2228.png)

```auto
<template>
    <div class="card_ic">
        <div class="title_temp_umi_ic">T/{{ temp }}° U/{{ umR }}%</div>
        <div class="sample_ic" ref="ic">{{ ic }}°</div>
        <div class="title_bat_ic" ref="bat">{{ bat }}%</div>
    </div>
</template>

<script>
export default {
    data() {
        return {               
            temp: 0,
            umR: 0,
            bat: 0,
            hi: 0,
            tempF: 0,
            icparcial: 0,
            ic: 0
        };
    },
    mounted() {            
        this.$socket.on('widget-load:' + this.id, (msg) => { 
            this.temp = parseInt(msg.payload.temperature);
            this.umR = parseInt(msg.payload.humidity);
            this.bat = parseInt(msg.payload.battery);
            this.active();
        });
    },
    methods: {
        active() {

            this.tempF = (this.temp * 9 / 5) + 32;
            this.hi = 0.5 * (this.tempF + 61.0 + ((this.tempF - 68.0) * 1.2) + (this.umR * 0.094));

            if (this.hi > 79) {
                this.hi = -42.379 + 2.04901523 * this.tempF + 10.14333127 * this.umR - 0.22475541 * this.tempF * this.umR - 0.00683783 * this.tempF * this.tempF - 0.05481717 * this.umR * this.umR + 0.00122874 * this.tempF * this.tempF * this.umR + 0.00085282 * this.tempF * this.umR * this.umR - 0.00000199 * this.tempF * this.tempF * this.umR * this.umR;
                if ((this.umR <= 13) && ((this.tempF >= 80) && this.tempF <= 112)) {
                    this.hi -= ((13 - this.umR) / 4) * Math.sqrt((17 - Math.abs(this.tempF - 95.)) / 17);
                }
                if ((this.umR > 85) && ((this.tempF >= 80) && this.tempF <= 87)) {
                    this.hi += ((this.umR - 85) / 10) * ((87 - this.tempF) / 5);
                }
            }

            this.icparcial = (this.hi - 32) / 1.8;
            this.ic = this.icparcial.toFixed(0);            

            this.send({ payload: {
                temperature: this.temp,
                humidity: this.umR,
                ic: this.ic,
                battery: this.bat
            }});    

            if (this.ic < 22) {
                this.$refs.ic.style.textShadow = '0px 0px 10px #1DF088';
            } else if (this.ic >= 22 && this.ic <= 27) {
                this.$refs.ic.style.textShadow = '0px 0px 10px #F0881D';
            } else if (this.ic > 27) {
                this.$refs.ic.style.textShadow = '0px 0px 10px #F0491D';
            }

        },       

    },
    watch: {
        msg: function(msg) {
            if (msg.payload != undefined) {
                this.temp = parseInt(msg.payload.temperature);
                this.umR = parseInt(msg.payload.humidity);
                this.bat = parseInt(msg.payload.battery);
                this.active();
            }
        }
    }
};
</script>

<style>
.card_ic {
    display: flex;
    flex-direction: column;
    margin: auto;
    height: 75px !important;
    width: 75px !important;
    background-color: #4F4F4F !important;
    border: 1px solid #000000;
    font-size: 14px;
    border-radius: 18px;
}

.title_temp_umi_ic {
    display: flex;
    margin: auto;
    font-size: 65%;
}

.title_bat_ic {
    display: flex;
    margin: auto;
    font-size: 80%;
}

.sample_ic {
    display: flex;
    margin: auto;
    font-size: 24px;
}
</style>

```

[Next page](https://discourse.nodered.org/t/custom-elements-ui-template-dashboard-2-0/85228.md?page=2)