Dashboard template httpstatic (Node-red on NAS/Docker instance)

Dear all,

got a setup/understanding issue with my Node-red Docker based installation on my QNAP NAS . I would like to use the nice steel gauges from https://laptrinhx.com/steelseries-and-node-red-3482335268/ in my dashboard. They are loaded with the script template and need to have the httpstatic directory to be pointed at a location of choice where you need to put the two js files. Some also use this to store and load pictures I believe.

I do have changed the set the httpstatic line in the settings.js to : httpStatic: '/data/myjs', and copied the two files to the very same directory on my docker instance. Unfortunately I do have a empty Dashboard loaded that just displays the name of the template object with a wite frame :frowning:

Interestingly I do have created a 2nd simple flow that just creates a file and used the “current” directory to store a timestamp. When I looked in the console that new file was strangely created in the /usr/src/node-red directory. Well I copied the two java files to that directory too but with out success. The Dashboard is still empty.

Now as beginner I am stuck with ideas and would appreciate any help. Below my configuration :

Cheers bkumio


NodeRed Startup log:
8 Apr 20:03:15 - [info] Node-RED version: v1.2.9
8 Apr 20:03:15 - [info] Node.js version: v10.23.2
8 Apr 20:03:15 - [info] Linux 4.14.24-qnap x64 LE
8 Apr 20:03:16 - [info] Loading palette nodes
8 Apr 20:03:19 - [info] Dashboard version 2.28.2 started at /ui
8 Apr 20:03:19 - [info] Settings file : /data/settings.js
8 Apr 20:03:19 - [info] HTTP Static : /data/myjs
8 Apr 20:03:19 - [info] Context store : 'default' [module=memory]
8 Apr 20:03:19 - [info] User directory : /data
8 Apr 20:03:19 - [warn] Projects disabled : editorTheme.projects.enabled=false
8 Apr 20:03:19 - [info] Flows file : /data/flows.json

The dashboard template has got the following code :

<script src="tween-min.js"></script>
<script src="steelseries-min.js"></script>
<script>
var radial4;
    (function(scope){ 
        scope.$watch('msg', function(msg) {
           if (typeof(msg.value) != "undefined") radial4.setValueAnimated(msg.value);
           if (typeof(msg.threshold) != "undefined") radial4.setThreshold(msg.threshold);
           if (typeof(msg.odo) != "undefined")radial4.setOdoValue(msg.odo);  
           if (typeof(msg.userLed) != "undefined") radial4.setUserLedOnOff(msg.userLed);  
           if (typeof(msg.trend) != "undefined")
            {
                if (msg.trend==1)     radial4.setTrend(steelseries.TrendState.UP);
                if (msg.trend==0)     radial4.setTrend(steelseries.TrendState.STEADY);
                if (msg.trend==-1)    radial4.setTrend(steelseries.TrendState.DOWN);
                if (msg.trend==-2)    radial4.setTrend(steelseries.TrendState.OFF);
            }
        });
    })(scope);

    var sections = [steelseries.Section(0, 25, 'rgba(0, 0, 220, 0.3)'),
                        steelseries.Section(25, 50, 'rgba(0, 220, 0, 0.3)'),
                        steelseries.Section(50, 75, 'rgba(220, 220, 0, 0.3)') ],

            // Define one area
    areas = [steelseries.Section(75, 100, 'rgba(220, 0, 0, 0.3)')],

    radial4 = new steelseries.Radial('canvasRadial4', {
            gaugeType: steelseries.GaugeType.TYPE4,
            size: 292,
            section: sections,
            area: areas,
            titleString: "Heating",
            unitString: "Degrees C",
            threshold: 50,
            thresholdRising: false,
            userLedVisible: true,
            useOdometer: true,
            lcdVisible: true,
            trendVisible: true
        });
                        
    radial4.setFrameDesign(steelseries.FrameDesign.BLACK_METAL);
    radial4.setValueAnimated(0);
    radial4.setThreshold(50);
    radial4.blinkUserLed(0);
    radial4.setOdoValue(0);


</script>

<canvas id="canvasRadial4" width="401" height="401"></canvas>