Hypnos3
commented
5 years ago 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
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.