Skip to content

Instantly share code, notes, and snippets.

@rappch1 rappch1/1 - TIM5xx
Last active Sep 15, 2017

Embed
What would you like to do?
WhatTheData 2017: Real SICK Data
[
{
"id": "954f7ac0.fbdf78",
"type": "tab",
"label": "1 - TIM5xx",
"disabled": false,
"info": ""
},
{
"id": "5eeb4006.422398",
"type": "debug",
"z": "954f7ac0.fbdf78",
"name": "",
"active": false,
"console": "false",
"complete": "false",
"x": 627,
"y": 74,
"wires": []
},
{
"id": "bc15a2d7.38132",
"type": "mqtt in",
"z": "954f7ac0.fbdf78",
"name": "scan",
"topic": "io/cybus/energie-campus/sick/1/laserscanner/og/buero/scan",
"qos": "0",
"broker": "10e889ef.451a0e",
"x": 107,
"y": 75,
"wires": [
[
"203ceefd.1815ea"
]
]
},
{
"id": "5cdb40d3.d8ac1",
"type": "ui_template",
"z": "954f7ac0.fbdf78",
"group": "ef0dd28c.b253",
"name": "ScanVisualization",
"order": 1,
"width": "20",
"height": "20",
"format": "<!--<div ng-bind-html=\"msg.payload\"></div>-->\n<canvas style=\"position: absolute; top: 0; left: 0;\" id=\"canvasLayerGrid\" width=\"1070\" height=\"1070\"></canvas>\n<canvas style=\"position: absolute; top: 0; left: 0;\" id=\"canvasLayerWarning\" width=\"1070\" height=\"1070\"></canvas>\n<canvas style=\"position: absolute; top: 0; left: 0;\" id=\"canvasLayerProtective\" width=\"1070\" height=\"1070\"></canvas>\n<canvas style=\"position: absolute; top: 0; left: 0;\" id=\"canvasLayerScan\" width=\"1070\" height=\"1070\"></canvas>\n\n<script>\n var scale = 0.1;\n var everyNthScanPoint = 1;\n var i = 0;\n var j = 0;\n \n function clear(canvas)\n {\n var context = canvas.getContext('2d');\n context.clearRect(0, 0, canvas.width, canvas.height);\n }\n\n function drawScanPoint(canvas, x, y, color)\n {\n var context = canvas.getContext('2d');\n var radius = 5;\n var centerX = canvas.width / 2;\n var centerY = canvas.height / 2;\n \n context.beginPath();\n context.arc(centerX + x, centerY + y, radius, 0, 2 * Math.PI, false);\n context.fillStyle = color;\n context.fill();\n context.lineWidth = 1;\n context.strokeStyle = '#333333';\n context.stroke();\n }\n \n function drawScanRay(canvas, x, y, color)\n {\n var context = canvas.getContext('2d');\n var centerX = canvas.width / 2;\n var centerY = canvas.height / 2;\n context.beginPath();\n context.moveTo(centerX, centerY);\n context.lineTo(centerX + x, centerY + y);\n context.lineWidth = 1;\n context.strokeStyle = color;\n context.stroke();\n }\n \n function drawLine(canvas, firstPos, secondPos, color)\n {\n var context = canvas.getContext('2d');\n var centerX = canvas.width / 2;\n var centerY = canvas.height / 2;\n context.beginPath();\n context.moveTo(centerX + firstPos[0], centerY + firstPos[1]);\n context.lineTo(centerX + secondPos[0], centerY + secondPos[1]);\n context.lineWidth = 2;\n context.strokeStyle = color;\n context.stroke();\n }\n \n function drawGrid(canvas)\n {\n clear(canvas);\n var gridSize = 50;\n var span = 10;\n var absBorder = gridSize * span;\n for (i = -span; i <= span; i++)\n {\n drawLine(canvas, [-absBorder, i*gridSize], [absBorder, i*gridSize], '#AAAAAA');\n drawLine(canvas, [i*gridSize, -absBorder], [i*gridSize, absBorder], '#AAAAAA');\n }\n }\n \n function drawText(canvas, text)\n {\n var context = canvas.getContext(\"2d\");\n context.font = \"30px Arial\";\n context.fillText(text,100,100); \n }\n \n function toRad(angleDeg)\n {\n return angleDeg * Math.PI / 180.0;\n }\n \n function calcPos(angle, distance, rotation, scale)\n {\n var x = scale * Math.sin(angle + rotation) * distance;\n var y = scale * Math.cos(angle + rotation) * distance;\n return [x,y];\n }\n \n function drawScan(canvas, parsedData, color)\n {\n clear(canvas);\n var angles = parsedData.angles;\n var distances = parsedData.distances;\n var numPoints = angles.length;\n \n var rotation = toRad(90.0);\n for (j = 0; j < numPoints; j+=everyNthScanPoint)\n {\n if (distances[j] == 0)\n {\n continue;\n }\n var pos = calcPos(angles[j], distances[j], rotation, scale);\n drawScanRay(canvas, pos[0], pos[1], color);\n drawScanPoint(canvas, pos[0], pos[1], color);\n }\n }\n \n function msgIsOfType(msgString, typeString)\n {\n return(msgString.indexOf(typeString) == 2)\n }\n \n var canvasGrid = document.getElementById('canvasLayerGrid');\n drawGrid(canvasGrid);\n \n (function(scope) {\n scope.$watch('msg.payload', function(msg) {\n //var parsedData = JSON.parse(msg);\n var canvas = document.getElementById('canvasLayerScan');\n drawScan(canvas, msg, 'red');\n return;\n });\n })(scope);\n</script>",
"storeOutMessages": true,
"fwdInMessages": true,
"templateScope": "local",
"x": 433,
"y": 74,
"wires": [
[
"5eeb4006.422398"
]
]
},
{
"id": "203ceefd.1815ea",
"type": "json",
"z": "954f7ac0.fbdf78",
"name": "",
"pretty": false,
"x": 249,
"y": 75,
"wires": [
[
"5cdb40d3.d8ac1"
]
]
},
{
"id": "10e889ef.451a0e",
"type": "mqtt-broker",
"z": "",
"broker": "energie-campus.cybus.io",
"port": "1883",
"clientid": "",
"usetls": false,
"verifyservercert": true,
"compatmode": true,
"keepalive": "15",
"cleansession": true,
"willTopic": "",
"willQos": "0",
"willRetain": "false",
"willPayload": "",
"birthTopic": "",
"birthQos": "0",
"birthRetain": "false",
"birthPayload": ""
},
{
"id": "ef0dd28c.b253",
"type": "ui_group",
"z": "",
"name": "Scan",
"tab": "67028f01.3e52b",
"order": 1,
"disp": true,
"width": "20"
},
{
"id": "67028f01.3e52b",
"type": "ui_tab",
"z": "",
"name": "1 - TIM5xx",
"icon": "dashboard",
"order": 1
}
]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.