Hey @hotNipi,
These gauges look awesome good. Pure art... Hand made stuff, no AI involved I assume
If you should find some time (or energy...)... My D1 dashboard is 'very' primitive, so should be doable to convert it to D2. The only problem is that I almost only have multistate-swich nodes on my dashboard, and there is no real D2 alternative available. So if you could ever create a simple prototype version for D2, that would be a very big help.
P.S. I don't expect you to build a full blown version, just some basic template stuff to get noobs like me started ...
And if you don't have time, then I completely understand it!! In that case you can perhaps join our support circle for code wizards who’ve magically run out of time for open source development
Hi Bart, is it worth creating a separate thread? You could describe what you need from the multistate-switch. Might even start some competition for people to build interesting versions?
Might also prompt people to create separate D2 and web component versions.
I had already last week a (very quick) at vuetify, to see whether something related was available. But I didn't find anything, which is why I asked it tonight.. Seems I have been searching with the wrong keywords, because something like you guys find would indeed do the job. Like e.g. 3 options for temperature control: ON, OFF, AUTOMATIC.
I have no idea at all whether it would be popular, but I "think" that for a lot of home automation dashboards it would be very useful for lots of use cases. So if it ever would be promoted to become a core ui node, that would be great. Of course, Rome was also not build in 1 day...
Yes indeed. Good idea to share the animation, so people know what we are discussing.
But of course it doesn't need to have that look and feel.
If everything in the dashboard has the same kind of style, that is good enough for me.
I think the button toggle should do the trick. Examples didn't show option to have different colors for states. That's only thing I see what is actually missing if to compare with multistate switch.
Ah yes indeed, good that you point that out!!
The colors is a very strong visual indication of the state. Like red and green, for OFF and ON.
Don't have much styling in my D1 dashboard, but all my multi-state switches have colors.
So if you could find some time to share an example of a colored button toggle, that would really get my started to migrate do D2...
<template>
<div class="mss-wrapper">
<v-chip variant="text">
{{label}}
</v-chip>
<v-btn-toggle mandatory divided rounded="xl" :variant="variant" :color="selectedColor" v-model="selection">
<v-btn v-for="option in options">
<template v-if="option.icon" v-slot:prepend>
<v-icon> {{option.icon}} </v-icon>
</template>
{{option.label}}
</v-btn>
</v-btn-toggle>
</div>
</template>
<script>
export default {
data() {
return {
//define me here
label:"Multistate Prototype",
options:[
{label:"On",icon:"mdi-power-cycle",color:"green"},
{label:"Off",icon:"mdi-power-off",color:"red"},
{label:"Auto",color:"blue"},// you can omit the icon
{label:"Manual"}// can omit color - defaults to theme color
],
// "outlined" (if the site bg is white or very light)"
// "default" (if the site bg is dark)"
// ("text" or "plain" also available but requires some styling)
look:"outlined",
// no need to change those
selection: null,
changeByInput:false, // in case of input - render but don't send the msg out
}
},
watch: {
msg: function(){
if(this.msg.payload != undefined){
if(typeof this.msg.payload === "number"){
// validation should be ore strict based on defined options
this.changeByInput = true
this.selection = this.msg.payload
}
}
},
selection:function(){
if(this.changeByInput == true){
this.changeByInput = false
}
else{
this.send({payload:this.selection,topic:'multistate'})
}
}
},
computed: {
selectedColor:function(){
if(this.selection == null){
return ""
}
return this.options[this.selection].color ?? "rgb(var(--v-theme-primary))"
},
variant:function(){
return this.look == "default" ? null : this.look
}
},
}
</script>
<style>
/*styles should be defined in separate ui_template targeted to the site*/
.mss-wrapper {
display:grid;
grid-template-columns:1fr 1fr;
align-items:center;
}
.mss-wrapper .v-chip__content{
white-space:normal;
border-color:rgba(var(--v-border-color),.3);
}
.mss-wrapper .v-btn-group{
width:max-content;
}
.mss-wrapper .v-btn--variant-elevated, .mss-wrapper .v-btn--variant-outlined{
color:#cccccc;
}
</style>
Using the Vuetify framework, it's styling will coordinate nicely with the other widgets, for a consistent appearance (unless of course they are overridden by CSS)
Morning @hotNipi,
After a short night of sleep, I am not really convinced whether that is a good option.
Because in our multistate-switch ui node for D1, we support these value types:
So if we now consider numeric input als indices, we cannot support numeric values anymore.
Therefore my proposal is to support these options again...
Thoughts?
