Questions about upgrading to Dashboard 2.0

Dashboard
1

Background
I use Node Red old dashboard extensively, and have built a number of dynamically generated UIs using UI Template nodes. For example, a lighting control panel that enumerates lights within a "zone", then displays sliders for each light in that zone.

I'd like to get to work installing Dashboard 2.0 and leveraging some of the new technologies there (which I personally I have no idea about yet...)

Questions

  1. Can I run old Dashboard concurrently with Dashboard 2.0? (This would allow me to actually build for Dashboard 2.0 whilst still being able to turn the lights / heating on!)

  2. Can you look at the below code and screenshot, and tell me if I can achieve this kind of thing in Dashboard 2.0, maybe with some pointers?

Here are the main things I need to do:

  • Implement sliders, buttons, colour pickers
  • Loop through JS objects / arrays etc and display the output in CSS divs / tables etc.
  • Conditionally display things based on incoming messages, e.g. if msg.toggle is true, then show some control or conditional CSS etc

... so here's an example of what I would need to port:

<div class="slider-container">
    <div ng-repeat="(key, value) in msg.fixturesettings" class="slider-row">
        <div class="slider-label"><div class="slider-label-text">{{value.label}} <span style="slider-val">(<span ng-if="value.controltype != '1_non_dim'">{{value.setting.brightness}}</span><span ng-if="value.controltype == '1_non_dim'">{{(value.setting.state === true) ? 'On' : 'Off'}}</span>)</span></div></div>
        <div class="slider-colpick"><div ng-if="value.controltype != '3_RGB'" class="no-color-picker">(W)</div><input ng-if="value.controltype == '3_RGB'" class="picker" type="color" ng-model="value.colour" ng-change="send({sysaction: 'col', topic: key, colour: value.colour, zone: msg.zoneid})" /></div>
        <div class="slider-slider">
            <div ng-if="value.controltype == '1_non_dim'"><md-switch ng-model="value.setting.state" ng-change="send({sysaction: 'switch', topic: key, state: value.setting.state, zone:msg.zoneid})"></md-switch></div>
            <div ng-if="value.controltype != '1_non_dim'"><md-slider min="0" max="100" step="{{value.resolution}}" ng-model="value.setting.brightness" ng-change="send({sysaction: 'bri', topic: key, brightness: value.setting.brightness, zone:msg.zoneid})"></md-slider></div>
        </div>
    </div>
</div>

image
image1817Ă—1746 258 KB

2

Yes

Yes, using similar constructs in the vue flavour instead of angularjs

Something like this (100% untested)

<div class="slider-container">
    <div v-for="(value, key) in msg.fixturesettings" :key="key" class="slider-row">
        <div class="slider-label">
            <div class="slider-label-text">
                {{ value.label }} 
                <span class="slider-val">
                    (<span v-if="value.controltype !== '1_non_dim'">{{ value.setting.brightness }}</span>
                    <span v-else>{{ value.setting.state ? 'On' : 'Off' }}</span>)
                </span>
            </div>
        </div>
        <div class="slider-colpick">
            <div v-if="value.controltype !== '3_RGB'" class="no-color-picker">(W)</div>
            <input v-if="value.controltype === '3_RGB'" class="picker" type="color" v-model="value.colour" @change="send({ sysaction: 'col', topic: key, colour: value.colour, zone: msg.zoneid })" />
        </div>
        <div class="slider-slider">
            <div v-if="value.controltype === '1_non_dim'">
                <input type="checkbox" v-model="value.setting.state" @change="send({ sysaction: 'switch', topic: key, state: value.setting.state, zone: msg.zoneid })" />
            </div>
            <div v-else>
                <input type="range" min="0" max="100" :step="value.resolution" v-model="value.setting.brightness" @change="send({ sysaction: 'bri', topic: key, brightness: value.setting.brightness, zone: msg.zoneid })" />
            </div>
        </div>
    </div>
</div>
1 Like
3

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