First september give-away (let's create one gauge)

Dashboard
81

:smiley: If your senses can handle more, then there is a "whole page" (minus the browser bars) option. You can comment out the sections you want. Set this override template to head for the whole dashboard, or to a widget to limit it to the tab.

[{"id":"607cb00158428334","type":"ui_template","z":"3cd636ebd5398d6e","group":"d1ae1ccfedfa70c5","name":"Carbon override","order":3,"width":0,"height":0,"format":"<style id=\"HotNipi-gaugeTweeks\">\n\nbody.nr-dashboard-theme {\n    /* Carbon-Fiber look */\n    background-color: rgb(32, 32, 32);\n    background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(to bottom, rgb(8, 8, 8), rgb(32, 32, 32));\n    background-size: 10px 10px, 10px 10px, 10px 5px;\n    background-position: 0px 0px, 5px 5px, 0px 0px;\n}\nbody.nr-dashboard-theme md-toolbar {\n    /* Carbon-Fiber look */\n    background-color: rgb(32, 32, 32);\n    background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(to bottom, rgb(8, 8, 8), rgb(32, 32, 32));\n    background-size: 10px 10px, 10px 10px, 10px 5px;\n    background-position: 0px 0px, 5px 5px, 0px 0px;\n}\nbody.nr-dashboard-theme md-sidenav {\n    /* Carbon-Fiber look */\n    background-color: rgb(32, 32, 32);\n    background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(to bottom, rgb(8, 8, 8), rgb(32, 32, 32));\n    background-size: 10px 10px, 10px 10px, 10px 5px;\n    background-position: 0px 0px, 5px 5px, 0px 0px;\n}\n\n.nr-dashboard-theme md-content {\n    /* Carbon-Fiber look */\n    background-color: rgb(32, 32, 32);\n    background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(to bottom, rgb(8, 8, 8), rgb(32, 32, 32));\n    background-size: 10px 10px, 10px 10px, 10px 5px;\n    background-position: 0px 0px, 5px 5px, 0px 0px;\n}\n\n.nr-dashboard-theme md-card {\n    /* Carbon-Fiber look */\n    background-color: rgb(32, 32, 32);\n    background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(to bottom, rgb(8, 8, 8), rgb(32, 32, 32));\n    background-size: 10px 10px, 10px 10px, 10px 5px;\n    background-position: 0px 0px, 5px 5px, 0px 0px;\n}\n\n.nr-dashboard-theme ui-card-panel {\n    /* Carbon-Fiber look */ \n    background-color: rgb(32, 32, 32);\n    background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(to bottom, rgb(8, 8, 8), rgb(32, 32, 32));\n    background-size: 10px 10px, 10px 10px, 10px 5px;\n    background-position: 0px 0px, 5px 5px, 0px 0px;\n}\n\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":720,"y":40,"wires":[[]]},{"id":"d1ae1ccfedfa70c5","type":"ui_group","name":"Gauge 1","tab":"20bb081.66afff8","order":1,"disp":false,"width":"8","collapse":false},{"id":"20bb081.66afff8","type":"ui_tab","name":"New Gauge","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

image
image1228×709 290 KB

1 Like
82

Strangely, I do not see any results from the overrides on my end.

Imported into new flow, nothing changed on my end (I don't think dark mode should matter EDIT - nope, nether did disabling my rounded corner template), but just the normal gauges?

Node-Red v2.0.5

image
image1147×642 45 KB

image
image1025×495 83.8 KB

83

You should do a bit research about the CSS selectors.
https://www.w3schools.com/cssref/css_selectors.asp

md-card.nr-dashboard-template.gauge2

Tries to select md-card element which has classes nr-dashboard-template and gauge2. For sure such thing does not exist.

84

My experiment was using node-red-dashboard v3, in which the widgets get an extra class from the editor.
Are you using v2.30?

With v2.30 you get md-card class="nr-dashboard-template visible"
v3 gives you (e.g.) md-card class="nr-dashboard-template rainbow visible"

My CSS styling is applied to, for example, md-card.nr-dashboard-template.rainbow .g-plate

You can also feed msg.className into the gauge template, which allows dynamic style changes such as cycling through a variety of appearances.
But - if you do so, the gauge value becomes NaN. There may be a fix for this; as a work-around I'm using a flow variable set from the slider and attached to the msg with msg.className.

Sorry, many edits.
I've seen and admired the dynamic backlight switch example but not studied how it works on v2.30.

85

Ahh, got it. I am waiting on further upgrades until after things settle down.

EDIT - OK, I forgot that the dashboard was a installable node-contrib :stuck_out_tongue: I apparently am running 2.30.0 and no further apparent updates available.

image

86

to get dashboard v3: npm i node-red-dashboard@next

I've only installed it on a Pi Zero testbed.

87

Right... I do recall ...now... reading something about a beta... my fault :blush:

88

I am sure it is not quite correctly implemented... I basically needed to create a continuous feedback loop (but only noticeable if I toss in a debug... doesn't seem to actually affect performance at all?)... else every time I switch backgrounds the needles/values reset.

I simply do not have the understanding about proper scope?? or whatever is needed to retain values.

Or perhaps I am sending the payloads incorrectly?? Again, I am really struggling to understand how all that msg. stuff works. Reading without clear examples (preferably with diagrams in crayon :rofl: ) only gets my brain (with seemingly dyslexic tendency) so far.

90

If you need to send different commands to the gauge so it can do different things for you, you'll need to tell to the gauge at least something about how to handle this incoming message.

Lets change the label only if msg.topic says so:

scope.$watch('msg', function(msg) {
    if (msg) {
        // Do something when msg arrives
        if(msg.topic && msg.topic == 'value'){// dealing with value (change the needle rotation) only if topic says so
            const v = Math.floor(((msg.payload - min) / (max - min)) * 100);
            document.getElementById('gauge_'+scope.$id).style.setProperty('--gauge-value', v);
            document.getElementById('gauge_val_'+scope.$id).innerText = v;
        }
        if(msg.topic && msg.topic == 'label'){// change label without changing any other thing
            document.getElementById('gauge_label_'+scope.$id).innerText = msg.payload;
        }
    }

The code inside ui_template runs at the front-end side. If you won it to remember something (state) you'll need to implement such remembering mechanism.
Multiple options for that at the front-end side. For example Window.localStorage - Web APIs | MDN .

But the other way is to hold all such information at the server side and detect when front-end side needs that information and send it then. Safe way is to detect when dashboard connects or changes the tabs. Using ui_control node to catch those events and then read latest state from flow or global context and send it to the gauge.
Of course the gauge must understand that the message is some kind and deal with it properly, like shown above.

91

Hi, @hotNipi love the gauges but i use uibuilder not the dashboard . My question is how hard would it be to use the gauges on uibuilder?

92

Same as easy or hard as for dashboard. It is pure html/css so not much tricks here. May be the mayor difference will be the dashboard given container and the css rules applied to it so it takes to respect the situation thus many css rules are written depend on that. So one to one copy will not work but probably not to hard to figure out what it takes.

If to turn it into some front-end library component like Vue, then don't count on me. I have no experiences on those.

93

thanks for replying @hotNipi i will give it a try :wink:

94

Just to clarify... I see that you have included msg.topic twice in the above.
Is the first to test if msg.topic actually exists, and then if so, the second checks if it equals 'value'?

95

Exactly. As the topic is not required parameter of msg object, it is reasonable to write custom code just a bit fail safe.
You don't have to do it, if you know your flows and msg's structure. But if you ever share your code ...

3 Likes
96

I do miss the time to do any fancy stuff for now, but at least I can give the time keeper.

hotnipi-gauges-with-clock.json (29.3 KB)

Also the structure of the HTML is slightly changed to give an option to show the label of the element on top of the gauge. (requires some CSS changes also)

image
image328×546 32.2 KB

Thank you @nygma2004 for creating awesome explanatory video of this creature :slight_smile:

7 Likes
97

I like how the needle calculations are done by the second... makes a nice analog movement of the minute and hour needles... And yes I DID stare closely :face_with_monocle: at the minute one, watching the gradual changes :innocent:

I may have to swap out my electro-mechanical clicky clocks with tablets now :laughing:

98

I've been following this thread since the beginning... you guys are absolutely crazy!

I love it. :nerd_face: :laughing:

99

A little bit of play with realism again and it seems like possible to achieve something...

image
image1875×700 212 KB

15 Likes
100

Now thats just showing off, as you should!
awesome!

101

To break the silence and give a bit boost for ideas :wink:

image
image286×511 32 KB

hotnipi-gauge-advanced.json (32.1 KB)

10 Likes