{"id":5228,"date":"2025-09-16T09:21:55","date_gmt":"2025-09-16T07:21:55","guid":{"rendered":"https:\/\/www.rommelkist.nl\/elec\/?p=5228"},"modified":"2025-09-16T10:19:48","modified_gmt":"2025-09-16T08:19:48","slug":"windroos-deel-2","status":"publish","type":"post","link":"https:\/\/www.rommelkist.nl\/elec\/elektronica\/windroos-deel-2\/","title":{"rendered":"Windroos &#8211; deel 2"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.rommelkist.nl\/elec\/wp-content\/uploads\/2025\/09\/image-23.png\"><img loading=\"lazy\" decoding=\"async\" width=\"625\" height=\"618\" src=\"https:\/\/www.rommelkist.nl\/elec\/wp-content\/uploads\/2025\/09\/image-23.png\" alt=\"\" class=\"wp-image-5252\" srcset=\"https:\/\/www.rommelkist.nl\/wp-content\/uploads\/2025\/09\/image-23.png 625w, https:\/\/www.rommelkist.nl\/wp-content\/uploads\/2025\/09\/image-23-300x297.png 300w, https:\/\/www.rommelkist.nl\/wp-content\/uploads\/2025\/09\/image-23-425x420.png 425w\" sizes=\"auto, (max-width: 625px) 100vw, 625px\" \/><\/a><figcaption class=\"wp-element-caption\">De windrichtingmeter in testopstelling<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Het was\/is echt stoeien met Annex32 om op een visueel aantrekkelijke manier de resultaten van mijn windrichtingmeter te tonen. Daarvoor is een mix van BASIC, HTML en JavaScript nodig. In <a href=\"https:\/\/www.rommelkist.nl\/elec\/elektronica\/annex32-basic-windroos\/\" data-type=\"post\" data-id=\"5174\">deel 1 van deze serie<\/a> had ik het pure Annex32 BASIC programma aan de praat. De windrichtingmeter draait in het rond en geeft netjes de waardes als tekst aan: Noord, Noordoost, Oost, enzovoorts. Maar ik wil dus een visuele weergave: een naald die in een kompas\/ windroos ronddraait en zodoende toont waar de wind vandaan komt. En dat blijkt een stuk lastiger! Na lang rondzoeken op internet besloot ik Gemini te raadplegen en verzocht om een voorzet te doen. Ik heb trouwens het idee dat sinds AI ons helpt met onze zoektochten maar hulp de Google-zoekopdrachten steeds beroerde werken.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Mijn vraag was dat ik een webpagina aan het maken was in HTML met JavaScript en SVG (Scaleable Vector Graphics) waarin een polygon (250,50  270,250  230,250) afhankelijk van een variabele met een bepaalde hoek roteert om het punt 250, 250 (de basis van de polygon). De precieze vraag kan ik me niet meer herinneren, maar terugzoekend wat mijn vraag precies was, zag ik dat Gemini er het volgende van had gemaakt.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Ik heb een webpagina aan het maken HTML met javascript en SVG. Ik heb een en afhankelijk van een variabel wil ik deze polygon laten roteren om punt 250,250. Hoe doe ik dat?<\/p>\n<\/blockquote>\n\n\n\n<p class=\"wp-block-paragraph\">Een redelijk verminkte vraag! Vreemd dat de exacte vraag niet bewaard is gebleven! Dit is in ieder geval waar Gemini mee kwam &#8230;<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&amp;lt;!DOCTYPE html&gt;\n&amp;lt;html lang=&quot;nl&quot;&gt;\n&amp;lt;head&gt;\n    &amp;lt;title&gt;SVG Polygon Rotatie&amp;lt;\/title&gt;\n    &amp;lt;style&gt;\n        svg {\n            border: 1px solid black;\n        }\n    &amp;lt;\/style&gt;\n&amp;lt;\/head&gt;\n&amp;lt;body&gt;\n\n    &amp;lt;h1&gt;Roteren van een SVG Polygon&amp;lt;\/h1&gt;\n\n    &amp;lt;svg width=&quot;500&quot; height=&quot;500&quot;&gt;\n        &amp;lt;polygon id=&quot;mijnPolygon&quot; points=&quot;250,50 270,250 230,250&quot; style=&quot;fill:red;stroke:black;stroke-width:1&quot; \/&gt;\n        \n        &amp;lt;circle cx=&quot;250&quot; cy=&quot;250&quot; r=&quot;5&quot; fill=&quot;blue&quot; \/&gt;\n        \n    &amp;lt;\/svg&gt;\n\n    &amp;lt;p&gt;\n        &amp;lt;button onclick=&quot;rotatePolygonByVariable()&quot;&gt;Roteer de polygon&amp;lt;\/button&gt;\n    &amp;lt;\/p&gt;\n\n    &amp;lt;script&gt;\n        \/\/ De variabele die de rotatiehoek bepaalt\n        let rotatieHoek = 0;\n\n        \/\/ De functie om de polygon te roteren\n        function rotatePolygonByVariable() {\n            \/\/ Verhoog de hoek met 45 graden bij elke klik\n            rotatieHoek = (rotatieHoek + 45) % 360; \n\n            const polygon = document.getElementById(&#039;mijnPolygon&#039;);\n            const cx = 250; \/\/ x-co\u00f6rdinaat van het rotatiepunt\n            const cy = 250; \/\/ y-co\u00f6rdinaat van het rotatiepunt\n\n            \/\/ De transform-string: &#039;rotate(hoek, cx, cy)&#039;\n            const transformString = `rotate(${rotatieHoek}, ${cx}, ${cy})`;\n\n            \/\/ Pas de transform-attribuut toe\n            polygon.setAttribute(&#039;transform&#039;, transformString);\n        }\n    &amp;lt;\/script&gt;\n\n&amp;lt;\/body&gt;\n&amp;lt;\/html&gt;\n<\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\">&#8230; en onderstaand het resultaat.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><a href=\"https:\/\/www.rommelkist.nl\/elec\/wp-content\/uploads\/2025\/09\/image-21.png\"><img loading=\"lazy\" decoding=\"async\" width=\"763\" height=\"913\" src=\"https:\/\/www.rommelkist.nl\/elec\/wp-content\/uploads\/2025\/09\/image-21.png\" alt=\"\" class=\"wp-image-5235\" style=\"width:450px\" srcset=\"https:\/\/www.rommelkist.nl\/wp-content\/uploads\/2025\/09\/image-21.png 763w, https:\/\/www.rommelkist.nl\/wp-content\/uploads\/2025\/09\/image-21-251x300.png 251w, https:\/\/www.rommelkist.nl\/wp-content\/uploads\/2025\/09\/image-21-425x509.png 425w\" sizes=\"auto, (max-width: 763px) 100vw, 763px\" \/><\/a><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">En dat deed precies wat ik wilde! Wanneer je op de knop klikt draait de driehoek (poligon) om het punt 250, 250 (het kleine, blauwe cirkeltje. Makkelijk zat! Nu nog zorgen dat de rotatie gedaan wordt op basis van de waardes die uit de windrichtingmeter komen! Het pure BASIC programma moest dus gemengd worden met het HTML\/SVG\/JavaScript-programma. Vele varianten volgde. Hieronder een aantal van de meest belovenden!<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&#039;Windroos_2_test3.bas\n\nPIN.MODE 0, INPUT, PULLUP\nPIN.MODE 1, INPUT, PULLUP\nPIN.MODE 2, INPUT, PULLUP\nPIN.MODE 3, INPUT, PULLUP\n\nonhtmlreload WEBPAGE\n\ngosub   WEBPAGE\ntimer0 500, RICHTING &#039;meet richting elke 500 miliseconde\nwait\n\n\n&#039;#########################\nWEBPAGE:\n&#039;#########################\n\ncls\nA$ = ||\nA$ = A$ + |&amp;lt;!DOCTYPE html&gt;|\nA$ = A$ + |&amp;lt;html lang=&quot;nl&quot;&gt;|\nA$ = A$ + |&amp;lt;head&gt;|\nA$ = A$ + |    &amp;lt;title&gt;SVG Polygon Rotatie&amp;lt;\/title&gt;|\nA$ = A$ + |    &amp;lt;style&gt;|\nA$ = A$ + |        svg {|\nA$ = A$ + |            border: 1px solid black;|\nA$ = A$ + |        }|\nA$ = A$ + |    &amp;lt;\/style&gt;|\nA$ = A$ + |&amp;lt;\/head&gt;|\nA$ = A$ + |&amp;lt;body&gt;|\nA$ = A$ + ||\nA$ = A$ + |    &amp;lt;h1&gt;Roteren van een SVG Polygon&amp;lt;\/h1&gt;|\nA$ = A$ + ||\nA$ = A$ + |     &amp;lt;script&gt;|\nA$ = A$ + |         document.write(&amp;lt;p&gt;&#039;Text&#039;&amp;lt;\/p&gt;);|\nA$ = A$ + |     &amp;lt;\/script&gt;|\nA$ = A$ + ||\nA$ = A$ + |    &amp;lt;svg width=&quot;500&quot; height=&quot;500&quot;&gt;|\nA$ = A$ + |        &amp;lt;polygon id=&quot;mijnNaald&quot; points=&quot;250,50 270,250 230,250&quot; style=&quot;fill:red;stroke:black;stroke-width:1&quot; \/&gt;|\nA$ = A$ + |        |\nA$ = A$ + |        &amp;lt;circle cx=&quot;250&quot; cy=&quot;250&quot; r=&quot;5&quot; fill=&quot;blue&quot; \/&gt;|\nA$ = A$ + |        |\nA$ = A$ + |    &amp;lt;\/svg&gt;|\nA$ = A$ + ||\nA$ = A$ + |    &amp;lt;p&gt;|\nA$ = A$ + |        &amp;lt;button onclick=&quot;rotatePolygonByVariable()&quot;&gt;Roteer de polygon&amp;lt;\/button&gt;|\nA$ = A$ + |    &amp;lt;\/p&gt;|\nA$ = A$ + ||\nA$ = A$ + |&amp;lt;\/body&gt;|\nA$ = A$ + |&amp;lt;\/html&gt;|\n\nhtml A$\n\nA$ = &quot;&quot;\nA$ = A$ + |        let rotatieHoek = 0;|\nA$ = A$ + |        function rotatePolygonByVariable() {|\nA$ = A$ + |            rotatieHoek = (rotatieHoek + 45) % 360;|\nA$ = A$ + |            const polygon = document.getElementById(&#039;mijnNaald&#039;);|\nA$ = A$ + |            const cx = 250;|\nA$ = A$ + |            const cy = 250;|\nA$ = A$ + |            const transformString = `rotate(${rotatieHoek}, ${cx}, ${cy})`;|\nA$ = A$ + |            polygon.setAttribute(&#039;transform&#039;, transformString);|\nA$ = A$ + |        }|\n\nA$ = A$ + |        function rotateMe(rotatieHoek) {|\nA$ = A$ + |            const polygon = document.getElementById(&#039;mijnPolygon&#039;);|\nA$ = A$ + |            const cx = 250;|\nA$ = A$ + |            const cy = 250; |\nA$ = A$ + |            const transformString = `rotate(${rotatieHoek}, ${cx}, ${cy})`;|\nA$ = A$ + |            polygon.setAttribute(&#039;transform&#039;, transformString);|\nA$ = A$ + |        }|\n\n\njscript A$\nreturn\n\n&#039;#########################\nRICHTING:\n&#039;#########################\n\nA = pin(0)\nB = pin(1)\nC = pin(2)\nD = pin(3)\n\nIF (A = 0) AND (B = 1) AND (C = 1) AND (D = 1) THEN\n  wlog &quot;Noord&quot;\n  direction = 0\nEND IF\nIF (A = 0) AND (B = 0) AND (C = 1) AND (D = 1) THEN\n  wlog &quot;Noord-Oost&quot;\n  direction = 45\nEND IF\nIF (A = 1) AND (B = 0) AND (C = 1) AND (D = 1) THEN\n  wlog &quot;Oost&quot;\n  direction = 90\nEND IF\nIF (A = 1) AND (B = 0) AND (C = 0) AND (D = 1) THEN\n  wlog &quot;Zuid-Oost&quot;\n  direction = 135\nEND IF\nIF (A = 1) AND (B = 1) AND (C = 0) AND (D = 1) THEN\n  wlog &quot;Zuid&quot;\n  direction = 180\nEND IF\nIF (A = 1) AND (B = 1) AND (C = 0) AND (D = 0) THEN\n  wlog &quot;Zuid-West&quot;\n  direction = 225\nEND IF\nIF (A = 1) AND (B = 1) AND (C = 1) AND (D = 0) THEN\n  wlog &quot;West&quot;\n  direction = 270\nEND IF\nIF (A = 0) AND (B = 1) AND (C = 1) AND (D = 0) THEN\n  wlog &quot;Noord-West&quot;\n  direction = 315\nEND IF\n\nreturn\n<\/pre><\/div>\n\n\n<figure class=\"wp-block-image size-large is-resized\"><a href=\"https:\/\/www.rommelkist.nl\/elec\/wp-content\/uploads\/2025\/09\/image-20.png\"><img loading=\"lazy\" decoding=\"async\" width=\"766\" height=\"1024\" src=\"https:\/\/www.rommelkist.nl\/elec\/wp-content\/uploads\/2025\/09\/image-20-766x1024.png\" alt=\"\" class=\"wp-image-5233\" style=\"width:450px\" srcset=\"https:\/\/www.rommelkist.nl\/wp-content\/uploads\/2025\/09\/image-20-766x1024.png 766w, https:\/\/www.rommelkist.nl\/wp-content\/uploads\/2025\/09\/image-20-224x300.png 224w, https:\/\/www.rommelkist.nl\/wp-content\/uploads\/2025\/09\/image-20-768x1027.png 768w, https:\/\/www.rommelkist.nl\/wp-content\/uploads\/2025\/09\/image-20-411x550.png 411w, https:\/\/www.rommelkist.nl\/wp-content\/uploads\/2025\/09\/image-20.png 811w\" sizes=\"auto, (max-width: 766px) 100vw, 766px\" \/><\/a><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>De driehoek verschijnt keurig in beeld, maar doet het niet??? Ik kwam erachter dat wanneer er ergens in het script en fout staat, de uitvoer van de rest van de pagina stokt, zonder dat je daar perse een melding van krijgt. Het is dus niet altijd duidelijk of het gehele script \u00fcberhaupt uitgevoerd wordt. Ik moet onthouden hiervoor aan het einde van een script een soort test in te bouwen. Is dat laatste stukje script uitgevoerd? Dan pas is het gehele script doorlopen.<\/strong><br>Op het forum van <a href=\"https:\/\/cicciocb.com\/forum\/viewtopic.php?t=1665\">Annex RDS<\/a> hulp gezocht en gekregen! O.a. van <a href=\"https:\/\/peterneufeld.wordpress.com\/\">Peter Neufeld<\/a> die me ook al had geholpen met mijn <a href=\"https:\/\/www.rommelkist.nl\/elec\/elektronica\/annex32-basic-aanwezigheidssensor\/\" data-type=\"post\" data-id=\"5106\">radar-experiment<\/a>. Hieronder het script dat gebruik maakt van een extern JavaScript bibliotheek: &#8220;gauge.min.js&#8221; dat als bestand op de root van de ESP gezet moet worden. Het doet wat ik wil, maar niet met MIJN windroos. \ud83d\ude41 <\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&#039;Gauge_minimaal_1.bas\n\nPIN.MODE 0, INPUT, PULLUP\nPIN.MODE 1, INPUT, PULLUP\nPIN.MODE 2, INPUT, PULLUP\nPIN.MODE 3, INPUT, PULLUP\n\ndir = 0\n\nonhtmlreload WEBPAGE\n\ngosub   WEBPAGE\ntimer0 1000, RICHTING &#039;meet richting elke seconde\nwait\n\n\n&#039;#########################\nWEBPAGE:\n&#039;#########################\ncls\njsexternal &quot;\/gauge.min.js&quot; &#039; load javascript library for gauges\npause 500 &#039; gives time to the browser to import the library\n\nA$ = &quot;&quot;\nA$ = A$ + textbox$(dir)  + &quot;&amp;lt;br&gt;&quot;      &#039; textbox\nA$ = A$ + meter$(dir, 0, 360)+ &quot;&amp;lt;br&gt;&quot;  &#039; meter\n\nA$ = A$ + |&amp;lt;canvas id=&quot;gauge2&quot; data-type=&quot;linear-gauge&quot;|\nA$ = A$ + |        data-width=&quot;200&quot;|\nA$ = A$ + |        data-height=&quot;600&quot;|\nA$ = A$ + |        data-min-value=&quot;0&quot;|\nA$ = A$ + |        data-max-value=&quot;360&quot;|\nA$ = A$ + |        data-animation-rule=&quot;linear&quot;|\nA$ = A$ + |        data-animation-duration=&quot;100&quot;|\nA$ = A$ + |        data-var=&quot;dir&quot;|  &#039; this is where the variable is defined (dir in this case)\nA$ = A$ + |&gt;&amp;lt;\/canvas&gt;|\n\nhtml A$\na$ = &quot;&quot; &#039; clear a little bit of memory\nreturn\n\n\n&#039;#########################\nRICHTING:\n&#039;#########################\n\nA = pin(0)\nB = pin(1)\nC = pin(2)\nD = pin(3)\n\nIF (A = 0) AND (B = 1) AND (C = 1) AND (D = 1) THEN\n  wlog &quot;Noord&quot;\n  dir = 0\nEND IF\nIF (A = 0) AND (B = 0) AND (C = 1) AND (D = 1) THEN\n  wlog &quot;Noord-Oost&quot;\n  dir = 45\nEND IF\nIF (A = 1) AND (B = 0) AND (C = 1) AND (D = 1) THEN\n  wlog &quot;Oost&quot;\n  dir = 90\nEND IF\nIF (A = 1) AND (B = 0) AND (C = 0) AND (D = 1) THEN\n  wlog &quot;Zuid-Oost&quot;\n  dir = 135\nEND IF\nIF (A = 1) AND (B = 1) AND (C = 0) AND (D = 1) THEN\n  wlog &quot;Zuid&quot;\n  dir = 180\nEND IF\nIF (A = 1) AND (B = 1) AND (C = 0) AND (D = 0) THEN\n  wlog &quot;Zuid-West&quot;\n  dir = 225\nEND IF\nIF (A = 1) AND (B = 1) AND (C = 1) AND (D = 0) THEN\n  wlog &quot;West&quot;\n  dir = 270\nEND IF\nIF (A = 0) AND (B = 1) AND (C = 1) AND (D = 0) THEN\n  wlog &quot;Noord-West&quot;\n  dir = 315\nEND IF\n\nrefresh\nreturn\n<\/pre><\/div>\n\n\n<figure class=\"wp-block-image size-large is-resized\"><a href=\"https:\/\/www.rommelkist.nl\/elec\/wp-content\/uploads\/2025\/09\/image-19.png\"><img loading=\"lazy\" decoding=\"async\" width=\"739\" height=\"1024\" src=\"https:\/\/www.rommelkist.nl\/elec\/wp-content\/uploads\/2025\/09\/image-19-739x1024.png\" alt=\"\" class=\"wp-image-5232\" style=\"width:450px\" srcset=\"https:\/\/www.rommelkist.nl\/wp-content\/uploads\/2025\/09\/image-19-739x1024.png 739w, https:\/\/www.rommelkist.nl\/wp-content\/uploads\/2025\/09\/image-19-216x300.png 216w, https:\/\/www.rommelkist.nl\/wp-content\/uploads\/2025\/09\/image-19-768x1064.png 768w, https:\/\/www.rommelkist.nl\/wp-content\/uploads\/2025\/09\/image-19-397x550.png 397w, https:\/\/www.rommelkist.nl\/wp-content\/uploads\/2025\/09\/image-19.png 816w\" sizes=\"auto, (max-width: 739px) 100vw, 739px\" \/><\/a><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Nog een andere poging: werkt ook.<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&#039;Gauge_minimaal_2.bas\n\nPIN.MODE 0, INPUT, PULLUP\nPIN.MODE 1, INPUT, PULLUP\nPIN.MODE 2, INPUT, PULLUP\nPIN.MODE 3, INPUT, PULLUP\n\ndir = 0\n\nonhtmlreload WEBPAGE\n\ngosub   WEBPAGE\ntimer0 1000, RICHTING &#039;meet richting elke seconde\nwait\n\n\n&#039;#########################\nWEBPAGE:\n&#039;#########################\ncls\njsexternal &quot;\/gauge.min.js&quot; &#039; load javascript library for gauges\npause 500 &#039; gives time to the browser to import the library\n\nA$ = &quot;&quot;\nA$ = A$ + textbox$(dir)  + &quot;&amp;lt;br&gt;&quot;      &#039; textbox\nA$ = A$ + meter$(dir, 0, 360)+ &quot;&amp;lt;br&gt;&quot;  &#039; meter\n\nA$ = A$ + |&amp;lt;canvas data-type=&quot;radial-gauge&quot;|\nA$ = A$ + |        data-width=&quot;300&quot;|\nA$ = A$ + |        data-height=&quot;300&quot;|\nA$ = A$ + |        data-min-value=&quot;0&quot;|\nA$ = A$ + |        data-max-value=&quot;360&quot;|\nA$ = A$ + |        data-major-ticks=&quot;N,NE,E,SE,S,SW,W,NW,N&quot;|\nA$ = A$ + |        data-minor-ticks=&quot;22&quot;|\nA$ = A$ + |        data-ticks-angle=&quot;360&quot;|\nA$ = A$ + |        data-start-angle=&quot;180&quot;|\nA$ = A$ + |        data-stroke-ticks=&quot;false&quot;|\nA$ = A$ + |        data-highlights=&quot;false&quot;|\nA$ = A$ + |        data-color-plate=&quot;#33a&quot;|\nA$ = A$ + |        data-color-major-ticks=&quot;#f5f5f5&quot;|\nA$ = A$ + |        data-color-minor-ticks=&quot;#ddd&quot;|\nA$ = A$ + |        data-color-numbers=&quot;#ccc&quot;|\nA$ = A$ + |        data-color-needle=&quot;rgba(240, 128, 128, 1)&quot;|\nA$ = A$ + |        data-color-needle-end=&quot;rgba(255, 160, 122, .9)&quot;|\nA$ = A$ + |        data-value-box=&quot;true&quot;|\nA$ = A$ + |        data-animated-value=&quot;true&quot;|\nA$ = A$ + |        data-value-text-shadow=&quot;false&quot;|\nA$ = A$ + |        data-color-circle-inner=&quot;#fff&quot;|\nA$ = A$ + |        data-color-needle-circle-outer=&quot;#ccc&quot;|\nA$ = A$ + |        data-needle-circle-size=&quot;15&quot;|\nA$ = A$ + |        data-needle-circle-outer=&quot;false&quot;|\nA$ = A$ + |        data-animation-rule=&quot;linear&quot;|\nA$ = A$ + |        data-needle-type=&quot;line&quot;|\nA$ = A$ + |        data-needle-start=&quot;75&quot;|\nA$ = A$ + |        data-needle-end=&quot;99&quot;|\nA$ = A$ + |        data-needle-width=&quot;3&quot;|\nA$ = A$ + |        data-borders=&quot;true&quot;|\nA$ = A$ + |        data-border-inner-width=&quot;0&quot;|\nA$ = A$ + |        data-border-middle-width=&quot;0&quot;|\nA$ = A$ + |        data-border-outer-width=&quot;10&quot;|\nA$ = A$ + |        data-color-border-outer=&quot;#ccc&quot;|\nA$ = A$ + |        data-color-border-outer-end=&quot;#ccc&quot;|\nA$ = A$ + |        data-color-needle-shadow-down=&quot;#222&quot;|\nA$ = A$ + |        data-border-shadow-width=&quot;0&quot;|\nA$ = A$ + |        data-animation-target=&quot;plate&quot;|\nA$ = A$ + |        data-units=&quot;deg&quot;|\nA$ = A$ + |        data-title=&quot;DIRECTION&quot;|\nA$ = A$ + |        data-font-title-size=&quot;19&quot;|\nA$ = A$ + |        data-color-title=&quot;#f5f5f5&quot;|\nA$ = A$ + |        data-animation-duration=&quot;1500&quot;|\nA$ = A$ + |        data-var=&quot;dir&quot;|  &#039; this is where the variable is defined (dir in this case)\nA$ = A$ + |&gt;&amp;lt;\/canvas&gt;|\n\nhtml A$\na$ = &quot;&quot; &#039; clear a little bit of memory\nreturn\n\n\n&#039;#########################\nRICHTING:\n&#039;#########################\n\nA = pin(0)\nB = pin(1)\nC = pin(2)\nD = pin(3)\n\nIF (A = 0) AND (B = 1) AND (C = 1) AND (D = 1) THEN\n  wlog &quot;Noord&quot;\n  dir = 0\nEND IF\nIF (A = 0) AND (B = 0) AND (C = 1) AND (D = 1) THEN\n  wlog &quot;Noord-Oost&quot;\n  dir = 45\nEND IF\nIF (A = 1) AND (B = 0) AND (C = 1) AND (D = 1) THEN\n  wlog &quot;Oost&quot;\n  dir = 90\nEND IF\nIF (A = 1) AND (B = 0) AND (C = 0) AND (D = 1) THEN\n  wlog &quot;Zuid-Oost&quot;\n  dir = 135\nEND IF\nIF (A = 1) AND (B = 1) AND (C = 0) AND (D = 1) THEN\n  wlog &quot;Zuid&quot;\n  dir = 180\nEND IF\nIF (A = 1) AND (B = 1) AND (C = 0) AND (D = 0) THEN\n  wlog &quot;Zuid-West&quot;\n  dir = 225\nEND IF\nIF (A = 1) AND (B = 1) AND (C = 1) AND (D = 0) THEN\n  wlog &quot;West&quot;\n  dir = 270\nEND IF\nIF (A = 0) AND (B = 1) AND (C = 1) AND (D = 0) THEN\n  wlog &quot;Noord-West&quot;\n  dir = 315\nEND IF\n\nrefresh\nreturn\n<\/pre><\/div>\n\n\n<figure class=\"wp-block-image size-full is-resized\"><a href=\"https:\/\/www.rommelkist.nl\/elec\/wp-content\/uploads\/2025\/09\/image-18.png\"><img loading=\"lazy\" decoding=\"async\" width=\"814\" height=\"730\" src=\"https:\/\/www.rommelkist.nl\/elec\/wp-content\/uploads\/2025\/09\/image-18.png\" alt=\"\" class=\"wp-image-5231\" style=\"width:450px\" srcset=\"https:\/\/www.rommelkist.nl\/wp-content\/uploads\/2025\/09\/image-18.png 814w, https:\/\/www.rommelkist.nl\/wp-content\/uploads\/2025\/09\/image-18-300x269.png 300w, https:\/\/www.rommelkist.nl\/wp-content\/uploads\/2025\/09\/image-18-768x689.png 768w, https:\/\/www.rommelkist.nl\/wp-content\/uploads\/2025\/09\/image-18-425x381.png 425w\" sizes=\"auto, (max-width: 814px) 100vw, 814px\" \/><\/a><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Uiteindelijk krijg ik hulp van de grote Annex RDS chef <strong>cicciocb<\/strong> oftewel Francesco Ceccarella, de ontwikkelaar van Annex RDS. Dat resulteerde in onderstaand script. Het werkt, maar waarom het een wel en het ander niet werkt heb ik nog niet achterhaald. Ciccocb heeft trouwens nog een aantal aardige websites: o.a. <a href=\"https:\/\/wokwi.com\/makers\/cicciocb\">hier<\/a> en hier een <a href=\"https:\/\/www.youtube.com\/channel\/UCK8Vz1py0I6Y0UI4VDZXOmA\/videos\">YouTube<\/a> kanaal.<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&#039;Windroos_test_ciccioB_1.bas\n\ncls\n\nA$ = ||\nA$ = A$ + |&amp;lt;!DOCTYPE html&gt;|\nA$ = A$ + |&amp;lt;html lang=&quot;nl&quot;&gt;|\nA$ = A$ + |&amp;lt;head&gt;|\nA$ = A$ + |    &amp;lt;title&gt;SVG Polygon Rotatie&amp;lt;\/title&gt;|\nA$ = A$ + |    &amp;lt;style&gt;|\nA$ = A$ + |        svg {|\nA$ = A$ + |            border: 1px solid black;|\nA$ = A$ + |        }|\nA$ = A$ + |    &amp;lt;\/style&gt;|\nA$ = A$ + |&amp;lt;\/head&gt;|\nA$ = A$ + |&amp;lt;body&gt;|\nA$ = A$ + ||\nA$ = A$ + |    &amp;lt;h1&gt;Roteren van een SVG Polygon&amp;lt;\/h1&gt;|\nA$ = A$ + ||\nA$ = A$ + |    &amp;lt;svg width=&quot;500&quot; height=&quot;500&quot;&gt;|\nA$ = A$ + |        &amp;lt;polygon id=&quot;mijnPolygon&quot; points=&quot;250,50 270,250 230,250&quot; style=&quot;fill:red;stroke:black;stroke-width:1&quot; \/&gt;|\nA$ = A$ + |        |\nA$ = A$ + |        &amp;lt;circle cx=&quot;250&quot; cy=&quot;250&quot; r=&quot;5&quot; fill=&quot;blue&quot; \/&gt;|\nA$ = A$ + |        |\nA$ = A$ + |    &amp;lt;\/svg&gt;|\nA$ = A$ + ||\nA$ = A$ + |    &amp;lt;p&gt;|\nA$ = A$ + |        &amp;lt;button onclick=&quot;rotatePolygonByVariable()&quot;&gt;Roteer de polygon&amp;lt;\/button&gt;|\nA$ = A$ + |    &amp;lt;\/p&gt;|\nA$ = A$ + ||\nA$ = A$ + |&amp;lt;\/body&gt;|\nA$ = A$ + |&amp;lt;\/html&gt;|\n\nhtml A$\n\na$ = &quot;&quot;\nA$ = A$ + |        let rotatieHoek = 0;|\nA$ = A$ + |        function rotatePolygonByVariable() {|\nA$ = A$ + |            rotatieHoek = (rotatieHoek + 45) % 360; |\nA$ = A$ + |            const polygon = document.getElementById(&#039;mijnPolygon&#039;);|\nA$ = A$ + |            const cx = 250;|\nA$ = A$ + |            const cy = 250; |\nA$ = A$ + |            const transformString = `rotate(${rotatieHoek}, ${cx}, ${cy})`;|\nA$ = A$ + |            polygon.setAttribute(&#039;transform&#039;, transformString);|\nA$ = A$ + |        }|\n\nA$ = A$ + |        function rotateMe(rotatieHoek) {|\nA$ = A$ + |            const polygon = document.getElementById(&#039;mijnPolygon&#039;);|\nA$ = A$ + |            const cx = 250;|\nA$ = A$ + |            const cy = 250; |\nA$ = A$ + |            const transformString = `rotate(${rotatieHoek}, ${cx}, ${cy})`;|\nA$ = A$ + |            polygon.setAttribute(&#039;transform&#039;, transformString);|\nA$ = A$ + |        }|\n\njscript a$\n\n\n&#039; you can now control the position of the needle\n&#039;using jscall\npause 1000\njscall &quot;rotateMe(30)&quot;\npause 500\njscall &quot;rotateMe(60)&quot;\npause 500\njscall &quot;rotateMe(90)&quot;\npause 500\njscall &quot;rotateMe(120)&quot;\npause 500\njscall &quot;rotateMe(150)&quot;\n<\/pre><\/div>\n\n\n<figure class=\"wp-block-image size-large is-resized\"><a href=\"https:\/\/www.rommelkist.nl\/elec\/wp-content\/uploads\/2025\/09\/image-17.png\"><img loading=\"lazy\" decoding=\"async\" width=\"757\" height=\"1024\" src=\"https:\/\/www.rommelkist.nl\/elec\/wp-content\/uploads\/2025\/09\/image-17-757x1024.png\" alt=\"\" class=\"wp-image-5229\" style=\"width:400px\" srcset=\"https:\/\/www.rommelkist.nl\/wp-content\/uploads\/2025\/09\/image-17-757x1024.png 757w, https:\/\/www.rommelkist.nl\/wp-content\/uploads\/2025\/09\/image-17-222x300.png 222w, https:\/\/www.rommelkist.nl\/wp-content\/uploads\/2025\/09\/image-17-768x1039.png 768w, https:\/\/www.rommelkist.nl\/wp-content\/uploads\/2025\/09\/image-17-407x550.png 407w, https:\/\/www.rommelkist.nl\/wp-content\/uploads\/2025\/09\/image-17.png 808w\" sizes=\"auto, (max-width: 757px) 100vw, 757px\" \/><\/a><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Het advies dat ik gekregen heb, wat mij zeer aanspreekt omdat ik het zo ook wilde aanpakken, is om alles onder te brengen in aparte scripts. Een BASIC-script, een html-script, en een JavaScript-script. Dus daar ga ik vervolgens mee aan de slag.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Het was\/is echt stoeien met Annex32 om op een visueel aantrekkelijke manier de resultaten van mijn windrichtingmeter te tonen. Daarvoor is een mix van BASIC, HTML en JavaScript nodig. In deel 1 van deze serie had ik het pure Annex32 BASIC programma aan de praat. De windrichtingmeter draait in het rond en geeft netjes de waardes als tekst aan: Noord, Noordoost, Oost, enzovoorts. Maar ik wil dus een visuele weergave: een naald die in een kompas\/ windroos ronddraait en zodoende toont waar de wind vandaan komt. En dat blijkt een stuk lastiger! Na lang rondzoeken op internet besloot ik Gemini te<span class=\"more-link\"><a href=\"https:\/\/www.rommelkist.nl\/elec\/elektronica\/windroos-deel-2\/\">Read More &rarr;<\/a><\/span><\/p>\n","protected":false},"author":1,"featured_media":5246,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_crdt_document":"","footnotes":""},"categories":[5,3,206],"tags":[205,207,131,215],"class_list":["entry","author-admin","post-5228","post","type-post","status-publish","format-standard","has-post-thumbnail","category-3d-printen","category-elektronica","category-programmeren","tag-annex32-rds","tag-basic","tag-esp32-c3","tag-javascript"],"_links":{"self":[{"href":"https:\/\/www.rommelkist.nl\/elec\/wp-json\/wp\/v2\/posts\/5228","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.rommelkist.nl\/elec\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rommelkist.nl\/elec\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rommelkist.nl\/elec\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rommelkist.nl\/elec\/wp-json\/wp\/v2\/comments?post=5228"}],"version-history":[{"count":13,"href":"https:\/\/www.rommelkist.nl\/elec\/wp-json\/wp\/v2\/posts\/5228\/revisions"}],"predecessor-version":[{"id":5253,"href":"https:\/\/www.rommelkist.nl\/elec\/wp-json\/wp\/v2\/posts\/5228\/revisions\/5253"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.rommelkist.nl\/elec\/wp-json\/wp\/v2\/media\/5246"}],"wp:attachment":[{"href":"https:\/\/www.rommelkist.nl\/elec\/wp-json\/wp\/v2\/media?parent=5228"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rommelkist.nl\/elec\/wp-json\/wp\/v2\/categories?post=5228"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rommelkist.nl\/elec\/wp-json\/wp\/v2\/tags?post=5228"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}