Buienradar - windrichting

It is a custom gauge based on Canvas. There have been a few recent topics about these such gauges and their various libraries.

You may have to install the canvas library in your node-red static folder... similar to how I did in this post


Here is two examples of the same "gauge" with changes to size, colours, tick marks etc. The script source path assumes node-red's settings.js path is at /home/pi/node-red-static/ and the folder containing the library is called Canvas-Gauges but you can make it however you want and edit the path accordingly.

[{"id":"c09d075d66e41467","type":"random","z":"8c7dfd6121113522","name":"","low":"0","high":"360","inte":"true","property":"payload","x":340,"y":460,"wires":[["9dac9baa9ffe467e","0e36bebef61b9bec","d21356027fdc21f8"]]},{"id":"9dac9baa9ffe467e","type":"ui_template","z":"8c7dfd6121113522","group":"a86601a0d85e8a94","name":"Compass","order":1,"width":10,"height":8,"format":"<div style=\"margin:auto\">\n    \n<script src=\"/Canvas-Gauges/gauge.min.js\"></script>\n\n<canvas data-type=\"radial-gauge\"\n    data-width=\"350\"\n    data-height=\"350\"\n    data-min-value=\"0\"\n    data-max-value=\"360\"\n    data-major-ticks=\"N,NE,E,SE,S,SW,W,NW,N\"\n    data-minor-ticks=\"22\"\n    data-ticks-angle=\"360\"\n    data-start-angle=\"180\"\n    data-stroke-ticks=\"false\"\n    data-highlights=\"false\"\n    data-color-plate=\"#222\"\n    data-color-major-ticks=\"#f5f5f5\"\n    data-color-minor-ticks=\"#ddd\"\n    data-color-numbers=\"#ccc\"\n    data-color-needle=\"rgba(240, 128, 128, 1)\"\n    data-color-needle-end=\"rgba(255, 160, 122, .9)\"\n    data-value-box=\"false\"\n    data-value-Dec=\"0\" \n    data-value-text-shadow=\"false\"\n    data-color-circle-inner=\"#fff\"\n    data-color-needle-circle-outer=\"#ccc\"\n    data-needle-circle-size=\"15\"\n    data-needle-circle-outer=\"false\"\n    data-animation-rule=\"linear\"\n    data-needle-type=\"line\"\n    data-needle-start=\"70\"\n    data-needle-end=\"99\"\n    data-needle-width=\"3\"\n    data-borders=\"true\"\n    data-border-inner-width=\"0\"\n    data-border-middle-width=\"0\"\n    data-border-outer-width=\"10\"\n    data-color-border-outer=\"#ccc\"\n    data-color-border-outer-end=\"#ccc\"\n    data-color-needle-shadow-down=\"#222\"\n    data-border-shadow-width=\"0\"\n    data-animation-duration=\"1000\"\n    data-value={{msg.payload}}\n></canvas>\n</div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":660,"y":440,"wires":[[]]},{"id":"0e36bebef61b9bec","type":"ui_text","z":"8c7dfd6121113522","group":"a86601a0d85e8a94","order":2,"width":0,"height":0,"name":"","label":"Degrees","format":"{{msg.payload}}","layout":"col-center","x":660,"y":480,"wires":[]},{"id":"d21356027fdc21f8","type":"ui_template","z":"8c7dfd6121113522","group":"a86601a0d85e8a94","name":"Small Compass","order":3,"width":10,"height":3,"format":"<div style=\"margin:auto\">\n    \n<script src=\"/Canvas-Gauges/gauge.min.js\"></script>\n\n<canvas data-type=\"radial-gauge\"\n    data-width=\"140\"\n    data-height=\"140\"\n    data-min-value=\"0\"\n    data-max-value=\"360\"\n    data-major-ticks=\"N,NE,E,SE,S,SW,W,NW,N\"\n    data-font-Numbers-Size=\"28\"\n    data-minor-ticks=\"4\"\n    data-ticks-angle=\"360\"\n    data-start-angle=\"180\"\n    data-stroke-ticks=\"false\"\n    data-highlights=\"false\"\n    data-color-plate=\"#333333\"\n    data-color-major-ticks=\"lightblue\"\n    data-color-minor-ticks=\"lightgrey\"\n    data-color-numbers=\"cyan\"\n    data-color-needle=\"rgba(240, 128, 128, 1)\"\n    data-color-needle-end=\"rgba(255, 160, 122, .9)\"\n    data-value-box=\"false\"\n    data-value-Dec=\"0\" \n    data-value-text-shadow=\"false\"\n    data-color-circle-inner=\"#fff\"\n    data-color-needle-circle-outer=\"#ccc\"\n    data-needle-circle-size=\"5\"\n    data-needle-circle-outer=\"false\"\n    data-animation-rule=\"linear\"\n    data-needle-type=\"line\"\n    data-needle-start=\"70\"\n    data-needle-end=\"99\"\n    data-needle-width=\"3\"\n    data-borders=\"true\"\n    data-border-inner-width=\"0\"\n    data-border-middle-width=\"0\"\n    data-border-outer-width=\"2\"\n    data-color-border-outer=\"#ccc\"\n    data-color-border-outer-end=\"#ccc\"\n    data-color-needle-shadow-down=\"#222\"\n    data-border-shadow-width=\"0\"\n    data-animation-duration=\"1000\"\n    data-value={{msg.payload}}\n></canvas>\n</div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":680,"y":540,"wires":[[]]},{"id":"5c83c1e35c72d6e6","type":"inject","z":"8c7dfd6121113522","name":"","props":[{"p":"payload"}],"repeat":"3","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"true","payloadType":"bool","x":110,"y":320,"wires":[["01183e3a5d78bff9","0c8a61b04dc5fd5a","3309ec3494dbae53","5d6c7e51cc1523bf","ab02a775fe61480c","637cc3cb57087783","4d92bd212b2e6b74","9851b92096c23aec","a7cecd63f040a432","c09d075d66e41467"]]},{"id":"a86601a0d85e8a94","type":"ui_group","name":"Compass","tab":"2deac665c2e9da53","order":9,"disp":true,"width":10,"collapse":false},{"id":"2deac665c2e9da53","type":"ui_tab","name":"Gauges Galore","icon":"data_usage","disabled":false,"hidden":false}]