Ui_template disappears when msg.payload input

Dashboard
1

Hey guys,
I think the ui_template is my final boss :sob:

I would like to create a template like this:

Screenshot_20240929_090243_Edge
Screenshot_20240929_090243_Edge1200×522 43 KB

It works quite well so far, but as soon as I send "msg.payload.LWL" or "msg.payload" to the template, it disappears. The icon alone works.

The icon function is based on

On/off button for dashboard 2.0 in ui_template (updates and improvements)

<template>
    <div class="container">
        <div class="title">Garagem</div>
        <v-icon 
            class="icon" 
            ref="icon" 
            @click="alternar" 
            :style="iconStyle"
        >
            {{ iconName }}
        </v-icon>
        <p class="textstyle">
            <span class="hostname-label">Hostname: </span>
            <a :href="`http://${msg.payload.StatusNET.IPAddress}`" class="hostname" target="_blank" rel="noopener noreferrer">
                {{ msg.payload.StatusNET.Hostname }}
            </a>
            <br />
            <span>IP: {{ msg.payload.StatusNET.IPAddress }}</span>
            <br />
            <span :class="{'online': msg.payload.LWT === 'Online', 'offline': msg.payload.LWT === 'Offline'}">
                Status: {{ msg.payload.LWT }}
            </span>
            <br />
            <span>Restart Grund: {{ msg.payload.StatusPRM.RestartReason }}</span>
            <br />
            <span>Firmware: {{ msg.payload.StatusFWR.Version }}</span>
        </p>
    </div>
</template>

<script>
export default {
    data() {
        return {
            value: '',
            iconName: 'mdi-television-ambient-light'
        };
    },
    computed: {
        iconStyle() {
            return {
                color: this.value === 'ON'  '#BD9608' : '#A9A9A9',
                textShadow: this.value === 'ON'  '0px 0px 10px #BD9608' : '0px 0px 0px'
            };
        }
    },
    methods: {
        alternar() {
            if (this.value === 'ON') {
                this.off_alternar();
            } else {
                this.on_alternar();
            }
        },
        on_alternar() {
            this.value = "ON";
            this.send({ payload: "ON" });
        },
        off_alternar() {
            this.value = "OFF";
            this.send({ payload: "OFF" });
        },
        on() {
            this.value = "ON";
        },
        off() {
            this.value = "OFF";
        }
    },
    watch: {
        msg(newVal) {
            if (newVal.payload === "ON") {
                this.on();
            } else {
                this.off();
            }                        
        }
    },
    mounted() {
        this.off();
    }
}
</script>

<style>
.container {
    display: flex;
    flex-direction: column;
    margin: auto;
    height: auto;
    width: 100%;
    background-color: #4F4F4F;
    color: #000000;
    border: 1px solid #000000;
    font-size: 14px;
    border-radius: 18px;
    align-items: flex-start;
    padding: 10px;
}

.title {
    margin: 5px auto auto auto;
    font-size: 85%;
    text-align: center;
}

.icon {
    width: 50%;
    margin: -7px auto auto auto;
    font-size: 300%;
    transition: color 0.3s, text-shadow 0.3s;
}

.textstyle {
    margin-top: 5px;
    text-align: left;
    color: #FFFFFF;
}

.hostname-label {
    font-weight: bold;
}

.hostname {
    color: #800080;
    text-decoration: underline;
}

.hostname:visited {
    color: #800080;
}

.online {
    color: green;
    font-weight: bold;
}

.offline {
    color: red;
    font-weight: bold;
}
</style>

Does anyone have an idea what I'm doing wrong?
Thanks in advance again :sweat_smile:

2

Your template is doing exactly what you asked it to do. It is showing you stuff like msg.payload.StatusNET.IPAddress If you send an empty payload or different payload, it will show you exactly that.

Use a data value and something in the topic to differentiate different inputs.

Here is a recent post demonstrating that: Dashboard 2.0 ui-template multiple injections - #3 by Steve-Mcl

1 Like
3

If I send an inject with on or off the template disappears, if I resend the data it takes over the status and the template is back

<template>
    <div class="container">
        <div class="title">Garagem</div>
        <v-icon 
            class="icon" 
            ref="icon" 
            @click="alternar" 
            :style="iconStyle"
        >
            {{ iconName }}
        </v-icon>
        <p class="textstyle">
            <span class="hostname-label">Hostname: </span>
            <a :href="`http://${msg.payload.StatusNET.IPAddress}`" class="hostname" target="_blank" rel="noopener noreferrer">
                {{ msg.payload.StatusNET.Hostname }}
            </a>
            <br />
            <span>IP: {{ msg.payload.StatusNET.IPAddress }}</span>
            <br />
            <span :class="{'online': status === 'Online', 'offline': status === 'Offline'}">
               Status: {{ status }}
            </span>
            <br />
            <span>Restart Grund: {{ msg.payload.StatusPRM.RestartReason }}</span>
            <br />
            <span>Firmware: {{ msg.payload.StatusFWR.Version }}</span>
        </p>
    </div>
</template>

<script>
export default {
    data() {
        return {
            value: '',
            iconName: 'mdi-television-ambient-light'
        };
    },
    computed: {
        iconStyle() {
            return {
                color: this.value === 'ON' ? '#BD9608' : '#A9A9A9',
                textShadow: this.value === 'ON' ? '0px 0px 10px #BD9608' : '0px 0px 0px'
            };
        }
    },
    methods: {
        alternar() {
            if (this.value === 'ON') {
                this.off_alternar();
            } else {
                this.on_alternar();
            }
        },
        on_alternar() {
            this.value = "ON";
            this.send({ payload: "ON" });
        },
        off_alternar() {
            this.value = "OFF";
            this.send({ payload: "OFF" });
        },
        on() {
            this.value = "ON";
        },
        off() {
            this.value = "OFF";
        }
    },
    watch: {
        msg: function () {
            if (this.msg.topic === 'switch') {
                if (this.msg.payload === "ON") {
                    this.on();
                } else {
                    this.off();
                }
            } else if (this.msg.topic === 'status') {
                this.status = this.msg.payload.LWT;
            } 
        }
    },
    mounted() {
        this.off();
    }
}
</script>

<style>
.container {
    display: flex;
    flex-direction: column;
    margin: auto;
    height: auto;
    width: 100%;
    background-color: #4F4F4F;
    color: #000000;
    border: 1px solid #000000;
    font-size: 14px;
    border-radius: 18px;
    align-items: flex-start;
    padding: 10px;
}

.title {
    margin: 5px auto auto auto;
    font-size: 85%;
    text-align: center;
}

.icon {
    width: 50%;
    margin: -7px auto auto auto;
    font-size: 300%;
4

Because you are still using msg.payload.StatusNET.Hostname in the html.

I said

And I linked you to a working example.

5

Didn't saw the data Part :see_no_evil:

6

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.