Dashboard 2 ui-template config error

Dashboard
1

Using Dashboard 2.0, after upgrade to 0.11.6 a previously working ui-template is showing config error when I open and close it. Am I doing something wrong?

image
image499×877 39.7 KB

Hovering over the red triangle says Invalid properties: - ui

[
    {
        "id": "10c9fcd88a6bb904",
        "type": "ui-template",
        "z": "40e930a4b072bbed",
        "group": "",
        "page": "869e7578693d5d46",
        "ui": "",
        "name": "",
        "order": 1,
        "width": 0,
        "height": 0,
        "format": ".bike_timer_text {\n    font-size: 400% !important;\n    text-align: center;\n    margin-top: 15%\n}\n.bike_counter_text {\n    font-size: 1000% !important;\n    text-align: center;\n    margin-top: 20%\n}\n\n    \n",
        "storeOutMessages": true,
        "passthru": true,
        "resendOnRefresh": true,
        "templateScope": "page:style",
        "className": "",
        "x": 190,
        "y": 80,
        "wires": [
            []
        ]
    },
    {
        "id": "869e7578693d5d46",
        "type": "ui-page",
        "name": "Bike Pedalling",
        "ui": "04ee189a49c54f22",
        "path": "/bikepedalling",
        "layout": "flex",
        "theme": "23aa79f4e489b044",
        "order": 10,
        "className": ""
    },
    {
        "id": "04ee189a49c54f22",
        "type": "ui-base",
        "name": "Dashboard",
        "path": "/dashboard"
    },
    {
        "id": "23aa79f4e489b044",
        "type": "ui-theme",
        "name": "Theme 1",
        "colors": {
            "surface": "#ffffff",
            "primary": "#514fba",
            "bgPage": "#eeeeee",
            "groupBg": "#ffffff",
            "groupOutline": "#cccccc"
        }
    }
]
2

Hi Colin, something definitely seems to have happened with the ui-template node - see Dynamic Properties - Ensure consistency on how dynamic classes (and other props) are set by joepavitt · Pull Request #497 · FlowFuse/node-red-dashboard · GitHub

But i havent worked out what yet (I dont work Mondays, back at keyboard tomorrow)

Annoyingly, all of my local testing environments are working

3

I spent a lot of time creating this button with a dimmer and after the last update it no longer works correctly. Before I sent on and off into it as a payload and it changed... but it passed the messages directly. Now, the message doesn't go through but the button doesn't work anymore.

image

<template>
    <v-card ref="card"
        style="display: flex; flex-direction: column; margin: auto; width: 75px; height: 105px; background-color: #4F4F4F; border: 1px solid #000000; border-radius: 18px;">
        <v-btn ref="botao"
            style="width: 75px; height: 75px; color: #000000; background-color: #4F4F4F; font-size: 14px; border-radius: 18px;"
            stacked @click="alternar">
            Luz
            <v-icon ref="icon" style="font-size: 45px;">mdi-lightbulb-variant-outline</v-icon>
        </v-btn>
        <v-slider ref="barra" v-model="barravalor" @end="deslisamento"></v-slider>
    </v-card>
</template>

<script>
    export default {
        data() {
            return {
                chave: 'a1',
                barravalor: 0
            };
        },
        methods: {
            alternar: function () {
                if (window.localStorage.getItem(this.chave) === 'ON') {
                    this.desligar();
                    this.send({ status: 'OFF' });
                } else if (window.localStorage.getItem(this.chave) === 'OFF') {
                    this.ligar();
                    this.send({ status: 'ON' });
                } else {
                    this.desligar();
                }
            },
            ligar: function () {            
                window.localStorage.setItem(this.chave, 'ON');
                this.$refs.icon.$el.style.color = '#BD9608';
                this.$refs.icon.$el.style.textShadow = '0px 0px 10px #BD9608';
                this.barravalor = 1;
                
            },
            desligar: function () {                
                window.localStorage.setItem(this.chave, 'OFF');
                this.$refs.icon.$el.style.color = '#A9A9A9';
                this.$refs.icon.$el.style.textShadow = '0px 0px 0px'; 
                this.barravalor = 0;
            },
            deslisamento: function () {
                if (window.localStorage.getItem(this.chave) === "ON") {
                    this.send({ brilho: parseInt(this.barravalor) });
                } else {
                    this.barravalor = 0;
                }       
            },
            setState (value) {
                if (value === 'ON') {                    
                    this.ligar();
                } else if (value === 'OFF') {                    
                    this.desligar();
                }
            },
        },
        mounted () {          
            this.setState(window.localStorage.getItem(this.chave));         
            this.$socket.on("msg-input:" + this.id, (msg) => {
                this.setState(msg.payload);
            });                               
        }
    }
</script>

Another important detail is that I still don't know how to maintain the status of the button when the page is updated.

4

Hi @diegodamaceno - so sorry for the inconvenience, for the template affected, can you open the Template in the Node RED Editor please and toggle off "Pass through" option, deploy, then toggle it back off again, and re-deploy?

That option was added in 0.11.6 and is the only thing that has changed on the UI Template.

Will be able to investigate properly again tomorrow once I'm working (off today).

5

Worked perfectly. The option to not let the message pass was great. Now I'm studying a way for the template to save the status of the button because when the page is updated, everything is lost in the template.

6

Which versions of Node-RED are you guys using @Colin and @diegodamaceno?

7

NR 3.1.3, nodejs 20

8

NR 3.1.3 nodejs 20.5.1

9

Thanks both - @knolleary fyi ^^ suspect this is linked to the validation problem we discussed in 3.1.3

10

Hi Joe, are there still issues with validation in v3.1.3?
It's strange you use a function not a validator :thinking:

11

Not sure I follow?

12

We are talking about the ui-template node for the ui property?
So:

ui: {
  type: 'ui-base',
  validate: function () {
    return (this.templateScope === 'widget:ui' && !!this.ui) || (this.templateScope !== 'widget:ui')
  }
}

It's a custom validation with a function (not RED.validators)
We modified RED.validators but not how a custom function works

13

This does still use Node-RED validation architecture, but none of the out-of-the-box RED.validators did the checks we needed, so we built our own.

14

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