Assign Variable in UI-Template from msg [solved]

Dashboard
1

I am using Steel Series Gauges in a Dashboard to show temperatures. I would like to adjust the colors to reflect the heating/cooling setpoints.

image

The gauge is created inside a ui-template node. I am sending the heat/cool and threshold (midpoint) value to the ui-template - I am able to retrieve and use the 'threshold' value because it's a part of the Steel Series gauges parameters. Here is the code used in the ui-template;

<script src="/myjs/tween-min.js"></script>
<script src="/myjs/steelseries-min.js"></script>
<script>
var radial1;
    (function(scope){ 
        scope.$watch('msg', function(msg) {
            if (typeof(msg.temp) != "undefined") radial1.setValueAnimated(msg.temp);
            if (typeof(msg.thresholdpnt) != "undefined") radial1.setThreshold(msg.thresholdpnt);
            var setCool = msg.coolsetpnt;
            var setHeat = msg.heatsetpnt;
        });
    })(scope);

    var sections = [steelseries.Section(10, setHeat, 'rgba(0, 0, 220, 0.3)'),
                        steelseries.Section(setHeat, setCool, 'rgba(0, 220, 0, 0.3)'),
                        steelseries.Section(setCool, 30, 'rgba(220, 0, 0, 0.3)') ],

    areas = [steelseries.Section(setHeat, setCool, 'rgba(80, 220, 100, 0.3)')],
    
    radial1 = new steelseries.Radial('canvasradial1', {
            gaugeType: steelseries.GaugeType.TYPE2,
            minValue: 10,
            maxValue: 30,
            size: 235,
            section: sections,
            area: areas,
            unitString: "Degrees C",
            thresholdRising: false,
            userLedVisible: false,
            ledVisible: false,
            useOdometer: false,
            lcdVisible: true,
            lcdDecimals: 1,
            trendVisible: false
        });
                        
    radial1.setFrameDesign(steelseries.FrameDesign.BLACK_METAL);
    radial1.setValueAnimated(0);
    radial1.blinkUserLed(0);
    radial1.setOdoValue(0);
</script>
<canvas id="canvasradial1" width="401" height="401"></canvas>

I have added the variables I want to use to the code - assigning them in the scope function, and then using them in the 'sections' and 'areas'. I know this is not correct and it doesn't work - just wanted to make it easier to understand what I am trying to do. I know from another template I was doing recently I could use the msg.coolsetpnt outside of the script, in HTML by enclosing it in double curly brackets. What is the proper way within the script to use the values from msg.coolsetpnt and msg.heatsetpnt?

2

Guess I got up too early this morning...had a little nap and took a look at this again and realized my mistake :yawning_face: - the variable has to be declared outside the 'scope' function...

var radial1;
var setHeat;
var setCool;
    (function(scope){ 
        scope.$watch('msg', function(msg) {
            if (typeof(msg.temp) != "undefined") radial1.setValueAnimated(msg.temp);
            if (typeof(msg.thresholdpnt) != "undefined") radial1.setThreshold(msg.thresholdpnt);
            setCool = msg.coolsetpnt;
            setHeat = msg.heatsetpnt;
        });
    })(scope);

    var sections = [steelseries.Section(10, setHeat, 'rgba(0, 0, 220, 0.3)'),
                        steelseries.Section(setHeat, setCool, 'rgba(0, 220, 0, 0.3)'),
                        steelseries.Section(setCool, 30, 'rgba(220, 0, 0, 0.3)') ],

    areas = [steelseries.Section(setHeat, setCool, 'rgba(80, 220, 100, 0.3)')],

now all is working well - feeling kinda stupid now for asking, but will leave this up in case it helps others :flushed:

1 Like
3

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