# Buienradar - windrichting

**URL:** <https://discourse.nodered.org/t/buienradar-windrichting/49841>\
**Category:** Dashboard\
**Created:** [17 August 2021 12:35 UTC](https://discourse.nodered.org/t/buienradar-windrichting/49841 "2021-08-17T12:35:46Z")\
**Posts on this page:** 1\
**Showing post:** 13

<div class="post-metadata">

**Author:** ![Gunner](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gunner/32/43582_2.png) [@Gunner](https://discourse.nodered.org/u/Gunner)\
**Post date:** [19 August 2021 08:01 UTC](https://discourse.nodered.org/t/buienradar-windrichting/49841/13 "2021-08-19T08:01:59Z")

</div>

> [@dick](#):
>
> the display you mentioned is not that i can find in NR.

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

> **[Canvas Gauges](https://canvas-gauges.com/)**
>
> Canvas gauges are open source minimalist HTML5-based components for web applications.

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

> [@Gauge Node Color fixing](https://discourse.nodered.org/t/gauge-node-color-fixing/49410/14):
>
> What do you mean "also".. it IS the heart of that particular graphing method. What I did was change my node-red settings.js ... /\*\* When httpAdminRoot is used to move the UI to a different root path, the \* following property can be used to identify a directory of static content \* that should be served at http://localhost:1880/. \*/ httpStatic: '/home/pi/node-red-static/', Create a subfolder in my node-red-static folder called RGraph and extracted the contents of the dow…

* * *

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.

```auto
[{"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}]

```

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/d/bd14e016c2dcd05072a43b986a581a9d4b88d135.png)

---

_[View the full topic](https://discourse.nodered.org/t/buienradar-windrichting/49841)._