{"id":5269,"date":"2025-09-20T17:13:38","date_gmt":"2025-09-20T15:13:38","guid":{"rendered":"https:\/\/www.rommelkist.nl\/elec\/?p=5269"},"modified":"2025-10-19T22:27:13","modified_gmt":"2025-10-19T20:27:13","slug":"windroos-deel-3","status":"publish","type":"post","link":"https:\/\/www.rommelkist.nl\/elec\/programmeren\/windroos-deel-3\/","title":{"rendered":"Windroos &#8211; deel 3"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Eindelijk! Na vele uren geklooi werkt eindelijk mijn windroos in Annex BASIC op de ESP32-C3! Het programma is netjes opgedeeld. Er wordt een extern JavaScript bestand &#8220;script_naaldrotatie.js&#8221; aangeroepen, er zijn twee routines: WEBPAGE voor het opbouwen van de webpagina en DIRECTION voor het bepalen van de richting van de windrichtingmeter.<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\n\/\/ De functie om de polygon te roteren\n\nfunction rotateMe(rotatieHoek) {\n    const polygon = document.getElementById(&#039;mijnPolygon&#039;);\n    const cx = 250;\n    const cy = 250; \n    const transformString = `rotate(${rotatieHoek}, ${cx}, ${cy})`;\n    polygon.setAttribute(&#039;transform&#039;, transformString);\n}\n<\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\">Het JavaScript krijgt een waarde voor rotatieHoek van de windrichtingmeter.<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&#039;Windroos_final_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\njsexternal &quot;\/script_naaldrotatie.js&quot;              &#039;points to a required external javascript file\n\nonhtmlreload WEBPAGE\n\ntimer0 1000, DIRECTION &#039;get DIRECTION every second\nwait\n\n\n&#039;#########################\nWEBPAGE:\n&#039;#########################\ncls\n\nA$ = &quot;&quot;\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;h2&gt;Windrichting&amp;lt;\/h2&gt;|\nA$ = A$ + ||\nA$ = A$ + |    &amp;lt;svg width=&quot;500&quot; height=&quot;500&quot;&gt;|\n\na$ = a$ + |  &amp;lt;circle r=&quot;250&quot; cx=&quot;250&quot; cy=&quot;250&quot; fill=&quot;white&quot; stroke=&quot;black&quot; stroke-width=&quot;1&quot; \/&gt;|\na$ = a$ + |  &amp;lt;circle r=&quot;200&quot; cx=&quot;250&quot; cy=&quot;250&quot; fill=&quot;white&quot; stroke=&quot;black&quot; stroke-width=&quot;3&quot; \/&gt;|\na$ = a$ + |  &amp;lt;circle r=&quot;7&quot; cx=&quot;250&quot; cy=&quot;250&quot; fill=&quot;black&quot; stroke=&quot;black&quot; stroke-width=&quot;1&quot; \/&gt;|\n\na$ = a$ + |  &amp;lt;text x=&quot;240&quot; y=&quot;40&quot; fill=&quot;red&quot; font-size=&quot;28&quot;&gt;N&amp;lt;\/text&gt;|\na$ = a$ + |  &amp;lt;text x=&quot;390&quot; y=&quot;100&quot; fill=&quot;red&quot; font-size=&quot;28&quot;&gt;NO&amp;lt;\/text&gt;|\na$ = a$ + |  &amp;lt;text x=&quot;455&quot; y=&quot;255&quot; fill=&quot;red&quot; font-size=&quot;28&quot;&gt;O&amp;lt;\/text&gt;|\na$ = a$ + |  &amp;lt;text x=&quot;390&quot; y=&quot;430&quot; fill=&quot;red&quot; font-size=&quot;28&quot;&gt;ZO&amp;lt;\/text&gt;|\na$ = a$ + |  &amp;lt;text x=&quot;240&quot; y=&quot;485&quot; fill=&quot;red&quot; font-size=&quot;28&quot;&gt;Z&amp;lt;\/text&gt;|\na$ = a$ + |  &amp;lt;text x=&quot;70&quot; y=&quot;430&quot; fill=&quot;red&quot; font-size=&quot;28&quot;&gt;ZW&amp;lt;\/text&gt;|\na$ = a$ + |  &amp;lt;text x=&quot;15&quot; y=&quot;255&quot; fill=&quot;red&quot; font-size=&quot;28&quot;&gt;W&amp;lt;\/text&gt;|\na$ = a$ + |  &amp;lt;text x=&quot;70&quot; y=&quot;100&quot; fill=&quot;red&quot; font-size=&quot;28&quot;&gt;NW&amp;lt;\/text&gt;|\na$ = a$ + |  &amp;lt;line x1=&quot;50&quot; y1=&quot;250&quot; x2=&quot;450&quot; y2=&quot;250&quot; style=&quot;stroke:red;stroke-width:1&quot; \/&gt;|\na$ = a$ + |  &amp;lt;line x1=&quot;250&quot; y1=&quot;80&quot; x2=&quot;250&quot; y2=&quot;450&quot; style=&quot;stroke:red;stroke-width:1&quot; \/&gt;|\na$ = a$ + |  &amp;lt;line x1=&quot;110&quot; y1=&quot;110&quot; x2=&quot;395&quot; y2=&quot;390&quot; style=&quot;stroke:red;stroke-width:1&quot; \/&gt;|\na$ = a$ + |  &amp;lt;line x1=&quot;110&quot; y1=&quot;390&quot; x2=&quot;395&quot; y2=&quot;110&quot; style=&quot;stroke:red;stroke-width:1&quot; \/&gt;|\n\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$ + ||\nA$ = A$ + |&amp;lt;\/body&gt;|\nA$ = A$ + |&amp;lt;\/html&gt;|\nhtml A$\nreturn\n\n\n&#039;#########################\nDIRECTION:\n&#039;#########################\nA = pin(0)\nB = pin(1)\nC = pin(2)\nD = pin(3)\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\njscall &quot;rotateMe(&quot; ;dir; &quot;)&quot;\n&#039;wlog &quot;Waarde dir &quot;, dir\n\npause 500\n\nreturn\n<\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\">En dan 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-31.png\"><img loading=\"lazy\" decoding=\"async\" width=\"741\" height=\"976\" src=\"https:\/\/www.rommelkist.nl\/elec\/wp-content\/uploads\/2025\/09\/image-31.png\" alt=\"\" class=\"wp-image-5272\" style=\"width:450px\" srcset=\"https:\/\/www.rommelkist.nl\/wp-content\/uploads\/2025\/09\/image-31.png 741w, https:\/\/www.rommelkist.nl\/wp-content\/uploads\/2025\/09\/image-31-228x300.png 228w, https:\/\/www.rommelkist.nl\/wp-content\/uploads\/2025\/09\/image-31-418x550.png 418w\" sizes=\"auto, (max-width: 741px) 100vw, 741px\" \/><\/a><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Nu nog kijken hoe het programma zelfstartend gemaakt moet worden.<\/p>\n\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-78.png\"><img loading=\"lazy\" decoding=\"async\" width=\"717\" height=\"1024\" src=\"https:\/\/www.rommelkist.nl\/elec\/wp-content\/uploads\/2025\/09\/image-78-717x1024.png\" alt=\"\" class=\"wp-image-5618\" style=\"width:450px\" srcset=\"https:\/\/www.rommelkist.nl\/wp-content\/uploads\/2025\/09\/image-78-717x1024.png 717w, https:\/\/www.rommelkist.nl\/wp-content\/uploads\/2025\/09\/image-78-210x300.png 210w, https:\/\/www.rommelkist.nl\/wp-content\/uploads\/2025\/09\/image-78-768x1098.png 768w, https:\/\/www.rommelkist.nl\/wp-content\/uploads\/2025\/09\/image-78-385x550.png 385w, https:\/\/www.rommelkist.nl\/wp-content\/uploads\/2025\/09\/image-78.png 1065w\" sizes=\"auto, (max-width: 717px) 100vw, 717px\" \/><\/a><figcaption class=\"wp-element-caption\">Ook een leuk idee<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">In een oude Circuit Cellar (2000) kwam ik bovenstaand schema tegen: S1 tm S8 zijn reed relais. Op de schacht van de windrichting meter is slechts \u00e9\u00e9n magneet gemonteerd. Deze kan ook maar een schakelaar per keer omzetten. De weerstanden vormen een spanningsdeler en afhankelijk van de schakelaar komt er spanning op de uitgang (label &#8220;Weather vane&#8221;) te staan die door een microcontroller uitgelezen kan worden en zo dus de windrichting uitleest. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Eindelijk! Na vele uren geklooi werkt eindelijk mijn windroos in Annex BASIC op de ESP32-C3! Het programma is netjes opgedeeld. Er wordt een extern JavaScript bestand &#8220;script_naaldrotatie.js&#8221; aangeroepen, er zijn twee routines: WEBPAGE voor het opbouwen van de webpagina en DIRECTION voor het bepalen van de richting van de windrichtingmeter. Het JavaScript krijgt een waarde voor rotatieHoek van de windrichtingmeter. En dan het resultaat! Nu nog kijken hoe het programma zelfstartend gemaakt moet worden. In een oude Circuit Cellar (2000) kwam ik bovenstaand schema tegen: S1 tm S8 zijn reed relais. Op de schacht van de windrichting meter is slechts \u00e9\u00e9n<span class=\"more-link\"><a href=\"https:\/\/www.rommelkist.nl\/elec\/programmeren\/windroos-deel-3\/\">Read More &rarr;<\/a><\/span><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_crdt_document":"","footnotes":""},"categories":[206],"tags":[205,207,215],"class_list":["entry","author-admin","post-5269","post","type-post","status-publish","format-standard","category-programmeren","tag-annex32-rds","tag-basic","tag-javascript"],"_links":{"self":[{"href":"https:\/\/www.rommelkist.nl\/elec\/wp-json\/wp\/v2\/posts\/5269","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=5269"}],"version-history":[{"count":4,"href":"https:\/\/www.rommelkist.nl\/elec\/wp-json\/wp\/v2\/posts\/5269\/revisions"}],"predecessor-version":[{"id":5620,"href":"https:\/\/www.rommelkist.nl\/elec\/wp-json\/wp\/v2\/posts\/5269\/revisions\/5620"}],"wp:attachment":[{"href":"https:\/\/www.rommelkist.nl\/elec\/wp-json\/wp\/v2\/media?parent=5269"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rommelkist.nl\/elec\/wp-json\/wp\/v2\/categories?post=5269"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rommelkist.nl\/elec\/wp-json\/wp\/v2\/tags?post=5269"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}