{"id":947,"date":"2021-01-15T14:04:27","date_gmt":"2021-01-15T14:04:27","guid":{"rendered":"http:\/\/www.igfasouza.com\/blog\/?p=947"},"modified":"2021-04-27T11:02:12","modified_gmt":"2021-04-27T10:02:12","slug":"raspberry-pi-vert-x-web-potentiometer","status":"publish","type":"post","link":"http:\/\/www.igfasouza.com\/blog\/raspberry-pi-vert-x-web-potentiometer\/","title":{"rendered":"Raspberry Pi Vert.X web potentiometer"},"content":{"rendered":"<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.igfasouza.com\/blog\/wp-content\/uploads\/2021\/01\/vertx.jpg\" alt=\"\" width=\"471\" height=\"220\" class=\"alignnone size-full wp-image-948\" srcset=\"http:\/\/www.igfasouza.com\/blog\/wp-content\/uploads\/2021\/01\/vertx.jpg 471w, http:\/\/www.igfasouza.com\/blog\/wp-content\/uploads\/2021\/01\/vertx-300x140.jpg 300w\" sizes=\"auto, (max-width: 471px) 100vw, 471px\" \/><\/p>\n<p><b>How\u2019s the form?<\/b><\/p>\n<p>After I wrote my <a href=\"http:\/\/www.igfasouza.com\/blog\/resolutions-ideas-2021\/\" rel=\"noopener\" target=\"_blank\">motivation resolutions post<\/a> I came with the idea that it is possible to do a lot of Raspberry Pi projects without a wait or by any new component.<br \/>\n<em>&#8220;Invest your time before you invest your money and build something before you buy the component.&#8221;<\/em><br \/>\nJust create a virtual one.<\/p>\n<p>For example, If you don&#8217;t have a 7 segment display you can follow <a href=\"http:\/\/www.igfasouza.com\/blog\/quarkus-qute-with-raspberry-pi\/\" rel=\"noopener\" target=\"_blank\">this<\/a>;<br \/>\nIf you don&#8217;t have an 8&#215;8 Led Matrix you can follow <a href=\"http:\/\/www.igfasouza.com\/blog\/micronaut-velocity-with-raspberry-pi\/\" rel=\"noopener\" target=\"_blank\">this<\/a> and so on.<\/p>\n<p>You can go ahead and use this idea to start your project without waiting more time and without buying anything.<\/p>\n<p>Today I want to show a way to play with a potentiometer.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.igfasouza.com\/blog\/wp-content\/uploads\/2021\/01\/Electronic-Component-Potentiometer-297x300.jpg\" alt=\"\" width=\"297\" height=\"300\" class=\"alignnone size-medium wp-image-949\" srcset=\"http:\/\/www.igfasouza.com\/blog\/wp-content\/uploads\/2021\/01\/Electronic-Component-Potentiometer-297x300.jpg 297w, http:\/\/www.igfasouza.com\/blog\/wp-content\/uploads\/2021\/01\/Electronic-Component-Potentiometer-768x776.jpg 768w, http:\/\/www.igfasouza.com\/blog\/wp-content\/uploads\/2021\/01\/Electronic-Component-Potentiometer-1013x1024.jpg 1013w, http:\/\/www.igfasouza.com\/blog\/wp-content\/uploads\/2021\/01\/Electronic-Component-Potentiometer-624x631.jpg 624w, http:\/\/www.igfasouza.com\/blog\/wp-content\/uploads\/2021\/01\/Electronic-Component-Potentiometer.jpg 1860w\" sizes=\"auto, (max-width: 297px) 100vw, 297px\" \/><\/p>\n<p><b>From Wikipedia<\/b><br \/>\nA potentiometer is a three-terminal resistor with a sliding or rotating contact that forms an adjustable voltage divider. If only two terminals are used, one end and the wiper, it acts as a variable resistor or rheostat.<\/p>\n<p><b>From Google<\/b><br \/>\nAn instrument for measuring an electromotive force by balancing it against the potential difference produced by passing a known current through a known variable resistance.<\/p>\n<p><b>From Youtube<\/b><br \/>\n<iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/F9U29RkqHXA\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/p>\n<p><b>And More<\/b><br \/>\n<a href=\"https:\/\/passive-components.eu\/resistors-potentiometers-basic-principles\" rel=\"noopener\" target=\"_blank\">potentiometers basic principles<\/a><\/p>\n<h2>Idea<\/h2>\n<p>A simple web application that I can use as a potentiometer.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.igfasouza.com\/blog\/wp-content\/uploads\/2021\/01\/20210115_121231-1024x1024.jpg\" alt=\"\" width=\"625\" height=\"625\" class=\"alignnone size-large wp-image-950\" srcset=\"http:\/\/www.igfasouza.com\/blog\/wp-content\/uploads\/2021\/01\/20210115_121231-1024x1024.jpg 1024w, http:\/\/www.igfasouza.com\/blog\/wp-content\/uploads\/2021\/01\/20210115_121231-150x150.jpg 150w, http:\/\/www.igfasouza.com\/blog\/wp-content\/uploads\/2021\/01\/20210115_121231-300x300.jpg 300w, http:\/\/www.igfasouza.com\/blog\/wp-content\/uploads\/2021\/01\/20210115_121231-768x768.jpg 768w, http:\/\/www.igfasouza.com\/blog\/wp-content\/uploads\/2021\/01\/20210115_121231-624x624.jpg 624w\" sizes=\"auto, (max-width: 625px) 100vw, 625px\" \/><\/p>\n<p>This time I decided to do it with <a href=\"https:\/\/github.com\/eclipse-vertx\/vert.x\" rel=\"noopener\" target=\"_blank\">Vert.X<\/a>.<\/p>\n<p>Vert.x is an open-source, reactive and polyglot software development toolkit from the developers of Eclipse. Vert.x is a tool-kit for building reactive applications on the JVM<br \/>\nIt is called polyglot due to its support for multiple JVM and non-JVM languages like Java, Groovy, Ruby, Python, and JavaScript.<\/p>\n<p>Being reactive, verticles remain dormant until they receive a message or event. Verticles communicate with each other through the event bus. The message can be anything from a string to a complex object. Message handling is ideally asynchronous, messages are queued to the event bus, and control is returned to the sender. Later it&#8217;s dequeued to the listening verticle. The response is sent using Future and callback methods and with that, I can create something that calls the REST several times in a sequence without care about the answer and with no blocks.<\/p>\n<p>If I use setPwm(), my LED can be any value between 0 and 100, and using an input range will only call one time to change the value. This will jump the value from current to select and not will create a potentiometer style.<\/p>\n<p>But I can add some CSS style and create a knob and simulate a real potentiometer. Now I can call my REST interface for each value and simulate a real use of a potentiometer.<\/p>\n<p><iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/kZroINYWST8\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/p>\n<p>I can combine this with my <a href=\"http:\/\/www.igfasouza.com\/blog\/raspberry-pi-servo-java-duke-robot\/\" rel=\"noopener\" target=\"_blank\">Duke robot<\/a> and control the Duke\u2019s arm.<br \/>\nI can combine it with my <a href=\"http:\/\/www.igfasouza.com\/blog\/raspberry-christmas-hat\/\" rel=\"noopener\" target=\"_blank\">Christmas hats<\/a> and create a nice fade effect.<\/p>\n<p>I can do a simple Led example.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.igfasouza.com\/blog\/wp-content\/uploads\/2021\/01\/01_Blinking-LED_bb-1024x777.jpg\" alt=\"\" width=\"625\" height=\"474\" class=\"alignnone size-large wp-image-951\" srcset=\"http:\/\/www.igfasouza.com\/blog\/wp-content\/uploads\/2021\/01\/01_Blinking-LED_bb-1024x777.jpg 1024w, http:\/\/www.igfasouza.com\/blog\/wp-content\/uploads\/2021\/01\/01_Blinking-LED_bb-300x228.jpg 300w, http:\/\/www.igfasouza.com\/blog\/wp-content\/uploads\/2021\/01\/01_Blinking-LED_bb-768x583.jpg 768w, http:\/\/www.igfasouza.com\/blog\/wp-content\/uploads\/2021\/01\/01_Blinking-LED_bb-624x473.jpg 624w, http:\/\/www.igfasouza.com\/blog\/wp-content\/uploads\/2021\/01\/01_Blinking-LED_bb.jpg 1764w\" sizes=\"auto, (max-width: 625px) 100vw, 625px\" \/><\/p>\n<h2>Code<\/h2>\n<p>I just used the Vert.X web start hello world example.<\/p>\n<div class=\"codecolorer-container java blackboard\" style=\"overflow:auto;white-space:nowrap;\"><table cellspacing=\"0\" cellpadding=\"0\"><tbody><tr><td class=\"line-numbers\"><div>1<br \/>2<br \/>3<br \/>4<br \/>5<br \/>6<br \/>7<br \/>8<br \/>9<br \/>10<br \/>11<br \/>12<br \/>13<br \/>14<br \/>15<br \/>16<br \/>17<br \/>18<br \/><\/div><\/td><td><div class=\"java codecolorer\">&nbsp; &nbsp; <span class=\"kw1\">private<\/span> <span class=\"kw4\">void<\/span> changePwmValue<span class=\"br0\">&#40;<\/span>RoutingContext routingContext<span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <a href=\"http:\/\/www.google.com\/search?hl=en&amp;q=allinurl%3Adocs.oracle.com+javase+docs+api+string\"><span class=\"kw3\">String<\/span><\/a> range <span class=\"sy0\">=<\/span> routingContext.<span class=\"me1\">pathParam<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">&quot;id&quot;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <a href=\"http:\/\/www.google.com\/search?hl=en&amp;q=allinurl%3Adocs.oracle.com+javase+docs+api+system\"><span class=\"kw3\">System<\/span><\/a>.<span class=\"me1\">out<\/span>.<span class=\"me1\">println<\/span><span class=\"br0\">&#40;<\/span>range<span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span> <span class=\"co1\">\/\/just to see calls<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"kw1\">final<\/span> GpioController gpio <span class=\"sy0\">=<\/span> GpioFactory.<span class=\"me1\">getInstance<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; Gpio.<span class=\"me1\">pwmSetMode<\/span><span class=\"br0\">&#40;<\/span>Gpio.<span class=\"me1\">PWM_MODE_MS<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; Gpio.<span class=\"me1\">pwmSetRange<\/span><span class=\"br0\">&#40;<\/span><span class=\"nu0\">100<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; Gpio.<span class=\"me1\">pwmSetClock<\/span><span class=\"br0\">&#40;<\/span><span class=\"nu0\">500<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; GpioPinPwmOutput led01 <span class=\"sy0\">=<\/span> gpio.<span class=\"me1\">provisionSoftPwmOutputPin<\/span><span class=\"br0\">&#40;<\/span>RaspiPin.<span class=\"me1\">GPIO_15<\/span>, <span class=\"st0\">&quot;LeftGreen&quot;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; led01.<span class=\"me1\">setPwm<\/span><span class=\"br0\">&#40;<\/span><a href=\"http:\/\/www.google.com\/search?hl=en&amp;q=allinurl%3Adocs.oracle.com+javase+docs+api+integer\"><span class=\"kw3\">Integer<\/span><\/a>.<span class=\"me1\">parseInt<\/span><span class=\"br0\">&#40;<\/span>range<span class=\"br0\">&#41;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n<br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; routingContext.<span class=\"me1\">response<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .<span class=\"me1\">putHeader<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">&quot;content-type&quot;<\/span>, <span class=\"st0\">&quot;application\/json&quot;<\/span><span class=\"br0\">&#41;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .<span class=\"me1\">setStatusCode<\/span><span class=\"br0\">&#40;<\/span><span class=\"nu0\">200<\/span><span class=\"br0\">&#41;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .<span class=\"me1\">end<\/span><span class=\"br0\">&#40;<\/span>Json.<span class=\"me1\">encodePrettily<\/span><span class=\"br0\">&#40;<\/span>range<span class=\"br0\">&#41;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><\/div><\/td><\/tr><\/tbody><\/table><\/div>\n<p>Disclaimer \u2013 I got the CSS from <a href=\"https:\/\/codepen.io\/jean-emmanuel\/pen\/GpxYdg\" rel=\"noopener\" target=\"_blank\">here<\/a><\/p>\n<p>You can get the full code on my <a href=\"https:\/\/github.com\/igfasouza\/Vert.x-Potentiometer-web-Starter-example\" rel=\"noopener\" target=\"_blank\">GitHub<\/a>.<\/p>\n<p><iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/Lyd8RQ2WS-I\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/p>\n<h2>Links<\/h2>\n<p><a href=\"https:\/\/vertx.io\/\" rel=\"noopener\" target=\"_blank\">https:\/\/vertx.io\/<\/a><\/p>\n<p><a href=\"https:\/\/github.com\/eclipse-vertx\/vert.x\" rel=\"noopener\" target=\"_blank\">https:\/\/github.com\/eclipse-vertx\/vert.x<\/a><\/p>\n<p><a href=\"https:\/\/passive-components.eu\/resistors-potentiometers-basic-principles\/\" rel=\"noopener\" target=\"_blank\">https:\/\/passive-components.eu\/resistors-potentiometers-basic-principles\/<\/a><\/p>\n<p><a href=\"https:\/\/pi4j.com\/\" rel=\"noopener\" target=\"_blank\">https:\/\/pi4j.com\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>How\u2019s the form? After I wrote my motivation resolutions post I came with the idea that it is possible to do a lot of Raspberry Pi projects without a wait or by any new component. &#8220;Invest your time before you&hellip; <a href=\"http:\/\/www.igfasouza.com\/blog\/raspberry-pi-vert-x-web-potentiometer\/\" class=\"more-link\">Continue Reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":948,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[23,24],"tags":[17,21,13],"class_list":["post-947","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-java","category-raspberry-pi","tag-java","tag-pi4j","tag-raspberry-pi"],"_links":{"self":[{"href":"http:\/\/www.igfasouza.com\/blog\/wp-json\/wp\/v2\/posts\/947","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.igfasouza.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.igfasouza.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.igfasouza.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.igfasouza.com\/blog\/wp-json\/wp\/v2\/comments?post=947"}],"version-history":[{"count":5,"href":"http:\/\/www.igfasouza.com\/blog\/wp-json\/wp\/v2\/posts\/947\/revisions"}],"predecessor-version":[{"id":1208,"href":"http:\/\/www.igfasouza.com\/blog\/wp-json\/wp\/v2\/posts\/947\/revisions\/1208"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/www.igfasouza.com\/blog\/wp-json\/wp\/v2\/media\/948"}],"wp:attachment":[{"href":"http:\/\/www.igfasouza.com\/blog\/wp-json\/wp\/v2\/media?parent=947"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.igfasouza.com\/blog\/wp-json\/wp\/v2\/categories?post=947"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.igfasouza.com\/blog\/wp-json\/wp\/v2\/tags?post=947"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}