Hello guys!!,
First of all i'm new with html and javascript, i have some experience with c++.
As i said i'm trying to build a gps skyplot on Node-red dashboard for that purpose i took and edit this
html code to get cover about circle's color wich was needed to be by gps constellation. With my edition i got this:
`
<!DOCTYPE html>
<html>
<head>
<meta charset='ISO-8859-1'>
<script src="https://d3js.org/d3.v3.min.js"></script>
</head>
<body style='background-color:lightgray'>
<div id="chart" style='width: 400px; height: 400px; padding-left: 5px; padding-bottom: 5px;'></div>
<script>
var deg2rad = Math.PI/180;
var width = 400, height = 350, radius = Math.min(width, height) / 2 - 30;
var svg = d3.select("#chart").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
var r = d3.scale.linear()
.domain([90, 0])
.range([0, radius]);
var line = d3.svg.line.radial()
.radius(function(d) {return r(d[1]);})
.angle(function(d) {return -d[0] + Math.PI / 2;});
var gr = null;
createSkyplot();
var json = {"type" : "GSV",
"inView" : [{"data" : [1, 45, 90,"#EEE41D"]},
{"data" : [2, 70, 180,"#EEE41D"]},
{"data" : [3, 70, 225,"#EC1C0B"]},
{"data" : [4, 70, 270,"#EC1C0B"]},
{"data" : [5, 70, 315,"#0BA1EC"]},
{"data" : [6, 70, 0,"#0BA1EC"]}]
};
updateSkyPlot(json);
function createSkyplot(){
//////////////////////
gr = svg.append("g")
.attr("class", "r axis")
.selectAll("g")
.data(r.ticks(5))
.enter().append("g");
gr.append("circle").attr("r", r).style('fill', 'white');
gr.append("text")
.attr("y", function(d) { return -r(d) - 4; })
.attr("transform", "rotate(20)")
.style("text-anchor", "middle")
.style('fill', 'blue')
.text(function(d) { return d;});
/////////////////////
/////////////////////
var ga = svg.append("g")
.attr("class", "a axis")
.selectAll("g")
.data(d3.range(0, 360, 45))
.enter().append("g")
.attr("transform", function(d) {return "rotate(" + (d - 90) + ")";});
ga.append("line").attr("x2", radius).style('stroke', 'black').style('stroke-dasharray', '1,8');
ga.append("text")
.attr("x", radius + 6)
.attr("dy", ".35em")
.style("text-anchor", function(d) { return d < 360 && d > 90 ? "end" : null; })
.attr("transform", function(d) { return d < 360 && d > 90 ? "rotate(180 " + (radius + 3) + ",0)" : null; })
.text(function(d) { return d + "°"; });
/////////////////////
}
function updateSkyPlot(d){
var pos = [];
var inview = d.inView;
for (var elem in inview){
if (inview.hasOwnProperty(elem)) {
// the azimuth should be in radians and substracted from (Math.PI/2) "data" : [1, 45, 90]
var d = [(Math.PI/2) - inview[elem].data[2]*deg2rad, inview[elem].data[1]];
pos.push({ "angle": d, "label": inview[elem].data[0] , "col": inview[elem].data[3] });
}
}
var r = d3.scale.linear()
.domain([90, 0])
.range([0, radius]);
var line = d3.svg.line.radial()
.radius(function(d) {return r(d[1]);})
.angle(function(d) {return -d[0] + Math.PI / 2;});
var color = d3.scale.category20();
svg.selectAll('circle').remove();
gr.append("circle").attr("r", r).style('fill', 'white');
var points = svg.selectAll("point")
.data(pos)
.enter()
.append("a")
.attr("transform", function(d) {
var coors = line([d.angle]).slice(1).slice(0, -1);
return "translate(" + coors + ")"
});
points.append("circle")
.attr("class", "point")
.attr("r", 8)
.attr("fill",function(d,i){return color(d.col);});
points.append("text")
.text( function(d) { return d.label })
.attr("transform", "translate(-4,5)")
}
</script>
</body>
</html>
At the above code there are two main functions with are CreateSkyplot() and updateSkyPlot(). These two functions needed to work a json data.
So there is my ask for help, how could i push json data into this code ?, i'been spending a couple days and still didn't make it work.
this is what i actually have on Node-Red.
[{"id":"cd495777.95bf48","type":"ui_template","z":"671b9ab9.9caff4","group":"c90580c4.94fb","name":"","order":1,"width":"0","height":"0","format":"<!DOCTYPE html>\n<html>\n\t<head>\n\t\t<meta charset='ISO-8859-1'>\n\t\t<script src=\"https://d3js.org/d3.v3.min.js\"></script>\n\t</head>\n\n\t<body style='background-color:lightgray'>\n\t\t<div id=\"chart\" style='width: 400px; height: 400px; padding-left: 5px; padding-bottom: 5px;'></div>\n\n\t\t<script>\n\t\t(function(scope) {\n // watch msg object from Node-RED\n scope.$watch('msg',function(msg) {\n // new message received\n var Data=msg.payload;\n //window.alert(strlink2);\n //document.getElementById(\"refee\").setAttribute(\"href\",strlink2);\n \t\t\tvar deg2rad = Math.PI/180;\n var width = 400, height = 350, radius = Math.min(width, height) / 2 - 30;\n \n var svg = d3.select(\"#chart\").append(\"svg\")\n \t\t\t .attr(\"width\", width)\n \t\t\t .attr(\"height\", height)\n \t\t\t .append(\"g\")\n \t\t\t .attr(\"transform\", \"translate(\" + width / 2 + \",\" + height / 2 + \")\");\n \t\t\t\t \n var r = d3.scale.linear()\n \t\t\t .domain([90, 0])\n \t\t\t .range([0, radius]);\n \n var line = d3.svg.line.radial()\n \t\t\t .radius(function(d) {return r(d[1]);})\n \t\t\t .angle(function(d) {return -d[0] + Math.PI / 2;});\n \n var gr = null;\n \n createSkyplot();\n \n \t\t\tvar json = {\"type\" : \"GSV\",\n \"inView\" : [{\"data\" : [1, 45, 90,\"#69b3a2\"]},\n {\"data\" : [3, 70, 180,\"#69b3a2\"]},\n {\"data\" : [5, 70, 225,\"#A82051\"]},\n {\"data\" : [3, 70, 270,\"#69b3a2\"]},\n {\"data\" : [3, 70, 315,\"#69b3a2\"]},\n {\"data\" : [3, 70, 0,\"#69b3a2\"]}]\n };\n \n //updateSkyPlot(json);\n updateSkyPlot(Data);\n \n function createSkyplot(){\t\n \t //////////////////////\t\t\t \n \t gr = svg.append(\"g\")\n \t\t\t\t .attr(\"class\", \"r axis\")\n \t\t\t\t .selectAll(\"g\")\n \t\t\t\t .data(r.ticks(5))\n \t\t\t\t .enter().append(\"g\");\n \n gr.append(\"circle\").attr(\"r\", r).style('fill', 'white');\n \n \t gr.append(\"text\")\n \t\t .attr(\"y\", function(d) { return -r(d) - 4; })\n \t\t .attr(\"transform\", \"rotate(20)\")\n \t\t .style(\"text-anchor\", \"middle\")\n \t\t .style('fill', 'blue')\n \t .text(function(d) { return d;});\n \t /////////////////////\n \n \t /////////////////////\n \t var ga = svg.append(\"g\")\n \t\t\t\t .attr(\"class\", \"a axis\")\n \t\t\t\t .selectAll(\"g\")\n \t\t\t\t .data(d3.range(0, 360, 45))\n \t\t\t\t .enter().append(\"g\")\n \t\t\t .attr(\"transform\", function(d) {return \"rotate(\" + (d - 90) + \")\";});\n \n ga.append(\"line\").attr(\"x2\", radius).style('stroke', 'black').style('stroke-dasharray', '1,8');\n \t \n \t ga.append(\"text\")\n \t .attr(\"x\", radius + 6)\n \t .attr(\"dy\", \".35em\")\n \t .style(\"text-anchor\", function(d) { return d < 360 && d > 90 ? \"end\" : null; })\n \t\t .attr(\"transform\", function(d) { return d < 360 && d > 90 ? \"rotate(180 \" + (radius + 3) + \",0)\" : null; })\n \t .text(function(d) { return d + \"°\"; });\n \t /////////////////////\n }\n \n function updateSkyPlot(d){\n \tvar pos = [];\n \tvar inview = d.inView;\n \n \tfor (var elem in inview){\n \t\tif (inview.hasOwnProperty(elem)) {\n \t\t\t// the azimuth should be in radians and substracted from (Math.PI/2)\t\"data\" : [1, 45, 90]\n \t\t\tvar d = [(Math.PI/2) - inview[elem].data[2]*deg2rad, inview[elem].data[1]]; \n \t\t\tpos.push({ \"angle\": d, \"label\": inview[elem].data[0] , \"col\": inview[elem].data[3] });\n \t\t}\n \t}\n \n \tvar r = d3.scale.linear()\n \t\t.domain([90, 0])\n \t\t.range([0, radius]);\n \n \tvar line = d3.svg.line.radial()\n \t\t.radius(function(d) {return r(d[1]);})\n \t\t.angle(function(d) {return -d[0] + Math.PI / 2;});\n \n \tvar color = d3.scale.category20();\n \n \tsvg.selectAll('circle').remove();\n \n \tgr.append(\"circle\").attr(\"r\", r).style('fill', 'white');\n \n var points = svg.selectAll(\"point\")\n \t.data(pos)\n \t.enter()\n \t.append(\"a\")\n \t.attr(\"transform\", function(d) {\n \t\tvar coors = line([d.angle]).slice(1).slice(0, -1);\n \t\treturn \"translate(\" + coors + \")\"\n \t});\n \n points.append(\"circle\")\n \t.attr(\"class\", \"point\")\n \t.attr(\"r\", 8)\n .attr(\"fill\",function(d,i){return color(d.col);});\n \n \tpoints.append(\"text\")\n \t\t.text( function(d) { return d.label })\n \t\t.attr(\"transform\", \"translate(-4,5)\")\n });\t\n }\n })(scope);\n\t\t</script>\n\n\t</body>\n</html>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":400,"y":1880,"wires":[["ea5302c.44631"]]},{"id":"9d15c900.429ef8","type":"inject","z":"671b9ab9.9caff4","name":"JSON2","topic":"","payload":"{\"type\":\"GSV\",\"inView\":[{\"data\":[1,25,90,\"#69b3a2\"]},{\"data\":[2,25,180,\"#69b3a2\"]},{\"data\":[3,25,225,\"#A82051\"]},{\"data\":[4,25,270,\"#69b3a2\"]},{\"data\":[5,25,315,\"#69b3a2\"]},{\"data\":[6,25,0,\"#69b3a2\"]}]}","payloadType":"json","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":210,"y":1880,"wires":[["cd495777.95bf48"]]},{"id":"ea5302c.44631","type":"debug","z":"671b9ab9.9caff4","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":560,"y":1880,"wires":[]},{"id":"c90580c4.94fb","type":"ui_group","z":"","name":"Skyplot","tab":"a624fbe6.d612b8","order":1,"disp":true,"width":"6","collapse":false},{"id":"a624fbe6.d612b8","type":"ui_tab","z":"","name":"GPS","icon":"gps_fixed","order":1,"disabled":false,"hidden":false}]
Thanks for reading and any advice. Regards!!