{"id":9248,"date":"2026-04-01T16:40:21","date_gmt":"2026-04-01T23:40:21","guid":{"rendered":"https:\/\/visualgdb.com\/w\/?p=9248"},"modified":"2026-04-01T16:40:21","modified_gmt":"2026-04-01T23:40:21","slug":"connecting-a-rotary-encoder-to-esp32-using-ai","status":"publish","type":"post","link":"https:\/\/visualgdb.com\/tutorials\/ai\/esp32\/encoder\/","title":{"rendered":"Connecting a Rotary Encoder to ESP32 using AI"},"content":{"rendered":"

In this tutorial we will use AI edits to modify the ESP32 HTTP server example to handle a rotary encoder and show its real-time position on the main page.<\/p>\n

We will use AI edits to quickly do trivial work (e.g. translate encoder signals to rotation value), while still keeping full control over the code quality. Before you begin, install VisualGDB 6.1 or later.<\/p>\n

    \n
  1. Start Visual Studio and launch the ESP-IDF project wizard:\"\"<\/a><\/li>\n
  2. Enter the name and location where you would like to put the project:\"\"<\/a><\/li>\n
  3. Proceed with the default build system settings:\"\"<\/a><\/li>\n
  4. Select the consolidated ESP-IDF toolchain and ESP-IDF version you would like to use:\"\"<\/a><\/li>\n
  5. On the Project Sample selection page select http_server -> simple<\/strong>:\"\"<\/a><\/li>\n
  6. On the last page of the wizard, pick the debug settings that work with your device:\"\"<\/a><\/li>\n
  7. Press “Finish” to create the project. Make sure it gets configured correctly:\"\"<\/a><\/li>\n
  8. Before adding any changes, we will verify that the original project can connect to the Wi-Fi network. Open VisualGDB Project Properties and configure the Wi-Fi SSID\/Password parameters:\u00a0
    \n\"\"<\/a><\/li>\n
  9. Press F5 to build the project and start debugging it. Once it loads and connects to the Wi-Fi network, try opening http:\/\/<IP ADDRESS>\/<\/strong> (not https) in the browser and make sure it shows the default message:\u00a0
    \n\"\"<\/a><\/li>\n
  10. We will use the GPIO driver to interface with the rotary encoder, so make sure it is referenced from the main component’s CMakeLists.txt<\/strong> file:\"\"<\/a><\/li>\n
  11. In this tutorial we will use the ESP32-WROVER kit board<\/a>, that uses most GPIO pins for existing peripherals. As we are not using on-board LCD display in this tutorial, we will borrow the GPIO19 and GPIO22 pins for use with the encoder:\"\"<\/a><\/li>\n
  12. To start using them, we would need to first configure them as inputs using the ESP-IDF GPIO functions in main()<\/strong>. Instead of doing it by hand, we will use VisualGDB’s symbol-level edits to quickly update the code based on a minimal prompt. Click the edit button in the CodeJumps link above main() <\/strong>to begin the edit:\"\"<\/a><\/li>\n
  13. Use the following prompt:\n
    setup gpio#19+22 as pullup inputs using @gpio_config + read to tmp vars using @gpio_get_level<\/pre>\n

    \n\"\"<\/a><\/li>\n
  14. VisualGDB will automatically pick main()<\/strong> and all declarations used by it, will pass it to the model together with the symbols mentioned in the prompt. This works much more efficiently than passing entire files at a time, so it only takes a few seconds to get the edits done:\"\"<\/a>Note that VisualGDB automatically passes the definitions of gpio_config_t<\/strong>, gpio_get_level()<\/strong>, etc. to the model, so it will work equally well with frameworks that are less known than ESP-IDF.<\/li>\n
  15. Now we will ask the AI to read and print the GPIO values in a loop. Use this prompt on main()<\/strong>:\n
    in loop, print IO19=..,..<\/pre>\n
    This will update the while() loop in the end to print the GPIO values:
    \n    \"\"<\/a><\/li>\n
  16. Build the code and start another debugging session. Once the firmware starts, connect to the board’s COM port via a context menu in Solution Explorer and make sure it prints the values:\"\"<\/a><\/li>\n
  17. You can now connect the encoder to the pins on the board and try turning it. The IO19 and IO22 values should change as your rotate the knob:\"\"<\/a><\/li>\n
  18. Now we will restructure the code to have all encoder-related logic in a single source file. It will use the RotaryEncoder<\/strong> struct to store the encoder configuration and state, and will have RotaryEncoder_XXX()<\/strong> functions for various functionality.\u00a0 Add a new file called RotaryEncoder.c<\/strong> the project:\"\"<\/a><\/li>\n
  19. Similarly, add RotaryEncoder.h<\/strong> containing an empty RotaryEncoder struct:\n
    #pragma once\r\n\r\nstruct RotaryEncoder\r\n{\r\n};<\/pre>\n
    Make sure RotaryEncoder.h<\/strong> is included from main.c<\/strong> and RotaryEncoder.c<\/strong>.<\/li>\n
  20. Now we can use the AI to move initialization code to our new encoder driver. Add the “RotaryEncoderInit(&s_Encoder)<\/strong>” call to main and use the following prompt:\n
    s_Encoder above main, init in @RotaryEncoder.c; move gpio init there<\/pre>\n
    \"\"<\/a><\/li>\n
  21. This is sufficient for the AI to create the missing declarations, definitions, and move the current initialization code where it belongs:\"\"<\/a><\/li>\n
  22. Note that the init function still has hardcoded GPIO19 and GPIO22 pins. To make the driver more flexible, we should instead pass them as arguments and store in RotaryEncoder’s fields. Use this prompt:\n
    Take int pinA=19, pinB as args, store in PinA\/B fields<\/pre>\n
    \"\"<\/a><\/li>\n
  23. This will quickly add the fields to the struct, add initialization code and update the call in main()<\/strong>:\"\"<\/a><\/li>\n
  24. Now we will add an interrupt handler that will get invoked whenever the signal on either of the pins changes. Use this prompt on the init function:\n
    Add edge-triggered interrupt handler (static RotaryEncoder_HandleGPIOInterrupt) on both pins.\r\nUse @gpio_install_isr_service , @gpio_isr_handler_add<\/pre>\n
    \"\"<\/a>In this example we used a very small, but fast model, that generated the correct function, but did not make a forward declaration. You can fix it by moving the function manually, or by using a larger model to generate code.<\/li>\n
  25. Note that the AI used the ESP_ERROR_CHECK<\/strong> macro for error handling, because it was used in the original main() function. In our encoder driver, we want to return an error code instead. Use the “if\/return instead of ESP_ERROR_CHECK<\/strong>” prompt to quickly change the relevant parts:\"\"<\/a><\/li>\n
  26. Now we will use AI to actually analyze the rising\/falling edges on the encoder signals, and update the count. The logic for it is very straight-forward if you look at the state diagram<\/a> from Wikipedia, however it requires several similar checks. AI can very easily write them based on a fairly concise summary:\n
    Maintain EncoderPosition field & LastKnownA\/B\r\nUpdate like this:\r\n\r\nPositive edge on A with B=1 or negative with B=0 => increment\r\nPositive B with !A or negative B with A => also\r\nOthers => decrement<\/pre>\n
    As the edits are concentrated in a single relatively small function, even large models will manage them quite fast:\"\"<\/a><\/li>\n
  27. Now let’s manually update the main loop to print the encoder position and try it out:
    \n\"\"<\/a>If you try rotating the encoder now, you should see the position update in real time.<\/li>\n
  28. The last step would be to update the HTTP server to show the encoder position. We will do it by adding a root page with a simple field, and an \/encoderval<\/strong> API returning the value. The example project registers handlers for various pages in the start_webserver()<\/strong> function. AI can very easily add more similar pages there, along with the necessary structures. Begin editing start_webserver()<\/strong>:\"\"<\/a><\/li>\n
  29. Note how VisualGDB highlighted the symbols that were used by start_webserver(). <\/strong>They will be automatically included in the context window, so AI be able to use them for reference:\"\"<\/a><\/li>\n
  30. Use this prompt:\n
    register handlers for \/ (root) and \/encoderval<\/pre>\n
    \"\"<\/a>This will quickly copy the layout of the existing handlers, adding the two additional ones.<\/li>\n
  31. Select both handlers for editing and use this prompt to create basic implementations:\n
    Implement handlers: encoderval return value from @s_Encoder ; root - page with a div and a script loading \/encoderval in an infinite loop with await<\/pre>\n
    \"\"<\/a><\/li>\n
  32. In this example, the model decided to call the update function instead of having an infinite loop with awaits. Using “fetch\/set in an infinite loop, no delays” as a refinement prompt quickly changes the layout to the fastest possible:\"\"<\/a><\/li>\n
  33. If you run the application now and open the device IP address in the browser, you will see the encoder value being updated in real time:\"\"<\/a><\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"
    In this tutorial we will use AI edits to modify the ESP32 HTTP server example to handle a rotary encoder<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[253],"tags":[],"_links":{"self":[{"href":"https:\/\/visualgdb.com\/w\/wp-json\/wp\/v2\/posts\/9248"}],"collection":[{"href":"https:\/\/visualgdb.com\/w\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/visualgdb.com\/w\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/visualgdb.com\/w\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/visualgdb.com\/w\/wp-json\/wp\/v2\/comments?post=9248"}],"version-history":[{"count":6,"href":"https:\/\/visualgdb.com\/w\/wp-json\/wp\/v2\/posts\/9248\/revisions"}],"predecessor-version":[{"id":9288,"href":"https:\/\/visualgdb.com\/w\/wp-json\/wp\/v2\/posts\/9248\/revisions\/9288"}],"wp:attachment":[{"href":"https:\/\/visualgdb.com\/w\/wp-json\/wp\/v2\/media?parent=9248"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/visualgdb.com\/w\/wp-json\/wp\/v2\/categories?post=9248"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/visualgdb.com\/w\/wp-json\/wp\/v2\/tags?post=9248"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}