How to tweak the sensitivity/delay of gauges

attoampere · 17 December 2021 15:23

Hi there,

being a total newbie to node-red I wanted to test-drive hotNipis awesome gauges.
Thereby I discovered that even the standard dashboard gauges are super unresponsive to large input changes via the slider.
How can one make them fast acting like real VU meters e.g.?

no fancy analog needle simulation needed (at first) just some useful real time response like here:

Thanks in advance

P.S. my goal would be to simulate a double scale, single needle caisson gauge like this here:

Colin · 17 December 2021 15:39

Are you sure it is not the slider output that is unresponsive? Add a debug node to find out.

attoampere · 17 December 2021 15:53

it has nothing to do with the slider. you can hand it a value of 100 and watch yourself how slowly it's adjusting to the value. so one clearly has to tweak something in the source of the dashboard gauge.
and i have zero clue about node-red, let alone it's package management yet.
so every hint is highly welcome and appreciated!

Colin · 17 December 2021 16:13

It takes about 1 second to get from end to end on my system. Is that what you class as slow?

attoampere · 17 December 2021 16:23

yeah 1 sec is useless, thanks for having quantified it Colin. any idea where to tweak the code to make it work in an instant?

Colin · 17 December 2021 16:50

It will be under .node-red/node_modules/node-red-dashboard somewhere. Someone who knows the code may chip in.

attoampere · 17 December 2021 20:43

github.com

node-red/node-red-dashboard/blob/master/nodes/ui_gauge.html

<style>
    input.gauge-color {
        width: 100px;
        text-align: center;
    }
    input.gauge-color::-webkit-color-swatch {
        border: none;
    }
</style>
<script type="text/javascript">
    RED.nodes.registerType('ui_gauge',{
        category: RED._("node-red-dashboard/ui_base:ui_base.label.category"),
        color: 'rgb(119, 198, 204)',
        defaults: {
            name: {value: ''},
            group: {type: 'ui_group', required: true},
            order: {value: 0},
            width: {value: 0, validate: function(v) {
                    var width = v || 0;
                    var currentGroup = $('#node-input-group').val() || this.group;

This file has been truncated. show original

github.com

node-red/node-red-dashboard/blob/master/nodes/ui_gauge.js

module.exports = function (RED) {
    var ui = require('../ui')(RED);

    function GaugeNode(config) {
        RED.nodes.createNode(this, config);
        this.colors = config.colors || ["#00B500","#E6E600","#CA3838"];
        var node = this;

        var group = RED.nodes.getNode(config.group);
        if (!group) { return; }
        var tab = RED.nodes.getNode(group.config.tab);
        if (!tab) { return; }

        if (config.width === "0") { delete config.width; }
        if (config.height === "0") { delete config.height; }
        if (config.height === "1") { config.hideMinMax = true; }
        node.autoheight = parseInt(group.config.width*0.5+1.5) || 4;
        if (config.gtype && config.gtype === "wave") { node.autoheight = parseInt(group.config.width*0.75+0.5); }
        if (config.gtype && config.gtype === "donut") { node.autoheight = parseInt(group.config.width -1); }
        if (config.gtype && config.gtype === "compass") { node.autoheight = parseInt(group.config.width -1); }

This file has been truncated. show original

couldn't find a thing pointing to that in the code

E1cid · 17 December 2021 21:03

github.com

node-red/node-red-dashboard/blob/master/src/components/ui-gauge/liquidFillGauge.js

/*!
 * @license Open source under BSD 2-clause (http://choosealicense.com/licenses/bsd-2-clause/)
 * Copyright (c) 2015, Curtis Bratton
 * All rights reserved.
 *
 * Liquid Fill Gauge v1.1
 */
/* global d3 */
function liquidFillGaugeDefaultSettings() {
    return {
        minValue: 0, // The gauge minimum value.
        maxValue: 100, // The gauge maximum value.
        circleThickness: 0.05, // The outer circle thickness as a percentage of it's radius.
        circleFillGap: 0.05, // The size of the gap between the outer circle and wave circle as a percentage of the outer circles radius.
        circleColor: "#178BCA", // The color of the outer circle.
        waveHeight: 0.05, // The wave height as a percentage of the radius of the wave circle.
        waveCount: 1, // The number of full waves per width of the wave circle.
        waveRiseTime: 1000, // The amount of time in milliseconds for the wave to rise from 0 to it's final height.
        waveAnimateTime: 18000, // The amount of time in milliseconds for a full wave to enter the wave circle.
        waveRise: true, // Control if the wave should rise from 0 to it's full height, or start at it's full height.

This file has been truncated. show original

hotNipi · 17 December 2021 21:38

Are you talking about those? First september give-away (let's create one gauge)

attoampere · 17 December 2021 21:40

first of all let me thank you E1cid for having pointed me to the correct file.
but now i see that node-red becomes messy, that i had to dig all of a sudden into all these layers(angularjs' Dependency Injection Containers) and node-reds package management just for having one single attribute changed. (waveRiseTime)

attoampere · 17 December 2021 21:58

oh the master himself. let me thank you for this splendid contribution first of all!!! yes i was talking about your awesome gauges hotNipi. they are the main reason for me to look into node-red. i hope that i'll be able to recreate the gauge with time. although i would prefer hiring you for some hours if that was possible as the gauge would require 3 differently sized ticks and so on. and i am quite certain that one would want to look at the result if you did it compared to some total noob.

hotNipi · 17 December 2021 22:10

Well, it is about midnight for today, near to Christmas for next week and near to big celebration of year to change in near future, I just moved to new house (not all stuff brought over jet), my dear Mrs called her sister with kids and cats to be our guests for next two weeks and new sauna stove promised to be delivered tomorrow morning.
So I have plenty of time

But for responsiveness of the gauge ..
find form the styles .g-needle
the speed of the animation is declared by transition: transform .1s; means 1 second. Feel free to change it as you need.
If you are targeting it to behave as VU meter, it will be complicated cos in real life those react differently on rising and falling incoming values. Can't be done with CSS (at least I don't know how)

attoampere · 17 December 2021 22:23

thanks a lot for having pointed me to transition: transform line. i've changed it to a 20th of a second. it works beautifully!
and no i am not trying to make it behave as a VU meter. i am just targeting this caisson gauge.

hotNipi · 17 December 2021 22:28

Just do experiments and ask specific questions if something does not go in the way you need it to go. I have limited computer time but there is for sure smarter guys than me so you'll get help anyway.

system · 16 January 2022 22:28

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

Topic		Replies	Views
Gauge can not responsive help me! General node-red-dashboard	7	243	22 February 2023
Dashboard very slow Dashboard	5	5678	19 August 2020
Node Red Dashboard Slow General	16	289	14 January 2023
UI Gauge is Available Dashboard dashboard-2	31	1175	23 February 2024
Gauge Node Color fixing Dashboard	16	2571	15 September 2021

How to tweak the sensitivity/delay of gauges

Related topics