Custom Elements Ui-Template Dashboard 2.0

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

1 Like

on/off button

image

<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>

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

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

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

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

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

@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

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

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.

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

The source for that docs page is here: node-red-dashboard/docs/user/template-examples.md at main · FlowFuse/node-red-dashboard · GitHub

All PRs and contributions are welcome

1 Like

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.

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

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

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

<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>

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:

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

In the Vue Component's Logic:

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

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

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

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

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

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