WindRose visualization needs reload

[Sineos]

The visualization for the WindRose data needs a reload before starting to display the data. Reason is unknown and Angular and I are not exactly friends. Any pointer would be appreciated.

[Hypnos3]

Ich hatte das Problem, das die Windrose leer war oder nur kurz nach dem Laden der Seite angezeigt wurde.

Ich bin leider nur Anfänger und habe per trail und error etwas herumgespielt.

Neben kleineren Änderungen, hab ich im wesentlichen geändert, das das init(); und leere zeichnen drawWindRose(); nur einmal aufgerufen wird. Damit funktioniert es jetzt.

Das Problem mit dem Reload tritt aber immer noch auf.

Der code der Windrose sieht jetzt wie folgt aus:

<script>

    /*
     * Version 6 of the Windrose/Radar gauge
     * Originally created by Mark Crossley
     * Source: https://www.weather-watch.com/smf/index.php/topic,55071.0.html
     *
     */

     // Create some global variables to hold references to the buffers
    var g_bufferRadar, g_bufferRadarFrame, g_bufferRadarBackground,
        g_bufferRadarForeground, g_ctxRadarGauge;
    var g_radarPlotSize;
    
    // Global variables that already exist in gauges-ss, if merging into gauge-ss, you
    // DO NOT need to add these
    var g_size = 281;
    //var data = {};
    var g_frameDesign = steelseries.FrameDesign.BLACK_METAL;
    var g_background = steelseries.BackgroundColor.BRUSHED_METAL;
    var g_foreground = steelseries.ForegroundType.TYPE1;
    //var g_imgPathURL = 'images/';
    var LANG = {};
    LANG.compass = ['N', 'NE', 'E', 'SE', 'S', 'SW', 'W', 'NW'];
    
    // Optional - background image - Already in gauges-ss
    //var g_imgSmall = document.createElement("img");                     //  background image
    //g_imgSmall.setAttribute("src", g_imgPathURL + "logoLarge.png");
    
    function init() {
    
      // Calcuate the size of the gauge background and so the size of radar plot required
      g_radarPlotSize = g_size * 0.68;
    
      // Create a hidden div to host the Radar plot
      var div = document.createElement('div');
      div.style.display = 'none';
      document.body.appendChild(div);
    
      // radar plot canvas buffer
      g_bufferRadar = document.createElement('canvas');
      g_bufferRadar.width = g_radarPlotSize;
      g_bufferRadar.height = g_radarPlotSize;
      g_bufferRadar.id = 'radarPlot';
      div.appendChild(g_bufferRadar);
    
      // Create a steelseries gauge frame
      g_bufferRadarFrame = document.createElement('canvas');
      g_bufferRadarFrame.width = g_size;
      g_bufferRadarFrame.height = g_size;
      var ctxFrame = g_bufferRadarFrame.getContext('2d');
      steelseries.drawFrame(ctxFrame, g_frameDesign, g_size/2, g_size/2, g_size, g_size);
    
      // Create a steelseries gauge background
      g_bufferRadarBackground = document.createElement('canvas');
      g_bufferRadarBackground.width = g_size;
      g_bufferRadarBackground.height = g_size;
      var ctxBackground = g_bufferRadarBackground.getContext('2d');
      steelseries.drawBackground(ctxBackground, g_background, g_size/2, g_size/2, g_size, g_size);
      // Optional - add a background image
      //var drawSize = g_size * 0.831775;
      //var x = (g_size - drawSize) / 2;
      //ctxBackground.drawImage(g_imgSmall, x, x, drawSize, drawSize);
    
      // Add the compass points
      drawCompassPoints(ctxBackground, g_size);
    
      // Create a steelseries gauge forground
      g_bufferRadarForeground = document.createElement('canvas');
      g_bufferRadarForeground.width = g_size;
      g_bufferRadarForeground.height = g_size;
      var ctxForegound = g_bufferRadarForeground.getContext('2d');
      steelseries.drawForeground(ctxForegound, g_foreground, g_size, g_size, false);
    
      // Get the context of the gauge canavs on the HTML page
      g_ctxRadarGauge = document.getElementById('canvasRdGauge').getContext('2d');
    }
    
    // Just draw an empty gauge as a placeholder when the page loads
    function drawWindRose() {
      // Paint the gauge frame
      g_ctxRadarGauge.drawImage(g_bufferRadarFrame, 0, 0);
    
      // Paint the gauge background
      g_ctxRadarGauge.drawImage(g_bufferRadarBackground, 0, 0);
    
      // Paint the gauge foreground
      g_ctxRadarGauge.drawImage(g_bufferRadarForeground, 0, 0);
    }
    
    // Redraw the gauge with data
    function doWindRose(windRoseData) {
      //console.log(windRoseData);
      // Clear the gauge
      g_ctxRadarGauge.clearRect(0, 0, g_size, g_size);
    
      // Clear the existing radar plot
      g_bufferRadar.width = g_bufferRadar.height = g_radarPlotSize;
    
      // Create a new radar plot
      var radar = new RGraph.Radar('radarPlot', windRoseData);
      radar.Set('chart.strokestyle', 'black');
      radar.Set('chart.colors.alpha', 0.4);
      radar.Set('chart.colors', ['red']);
    
      radar.Set('chart.title', 'Wind  Rose');
      radar.Set('chart.title.size', Math.ceil(0.045 * g_radarPlotSize));
      radar.Set('chart.title.bold', false);
      radar.Set('chart.gutter.top', 0.2 * g_radarPlotSize);
      radar.Set('chart.gutter.bottom', 0.2 * g_radarPlotSize);
    
      radar.Set('chart.tooltips.effect', 'snap');
      radar.Set('chart.labels.axes', '');
      radar.Set('chart.background.circles', true);
      radar.Set('chart.radius', g_radarPlotSize/2);
      radar.Draw();
    
      // Paint the gauge frame
      g_ctxRadarGauge.drawImage(g_bufferRadarFrame, 0, 0);
    
      // Paint the gauge background
      g_ctxRadarGauge.drawImage(g_bufferRadarBackground, 0, 0);
    
      // Paint the radar plot
      var offset = (g_size - g_radarPlotSize) / 2;
      g_ctxRadarGauge.drawImage(g_bufferRadar, offset, offset);
    
      // Paint the gauge foreground
      g_ctxRadarGauge.drawImage(g_bufferRadarForeground, 0, 0);
    
    }
    
    
    // Helper function to put the compass points on the background
    function drawCompassPoints(ctx, size) {
      ctx.save();
      // set the font
      ctx.font = (0.06 * size) + 'px serif';
      ctx.fillStyle = '#505050'; //'#000000';
      ctx.textAlign = 'center';
      ctx.textBaseline = 'middle';
    
      // Draw the compass points
      for (var i=0; i<4; i++) {
        ctx.translate(size/2, size*0.125);
        ctx.fillText(LANG.compass[i*2], 0, 0, size);
        ctx.translate(-size/2, -size*0.125);
        // Move to center
        ctx.translate(size/2, size/2);
        ctx.rotate(Math.PI/2);
        ctx.translate(-size/2, -size/2);
      }
      ctx.restore();
    }
    
    angular.element(document).ready(function () {
        //console.log('init + drawWindRose');
        init();
        drawWindRose();
    });

    (function(scope) {
        scope.$watch('msg', function(msg) {
            if (msg != null && msg.payload != null) {
                //init();
                //drawWindRose();
                //data.WindRoseData = msg.payload;
                doWindRose(msg.payload);
            }
        });
    })(scope);
</script>

<canvas id="canvasRdGauge" width="301" height="301">No canvas in your browser...sorry...</canvas>

[Sineos]

Many thanks for digging into this. Unfortunately this change does not work for me. In recent FF and Chrome, still a reload is required before it starts showing data.