{"id":395,"date":"2019-03-30T00:32:37","date_gmt":"2019-03-30T00:32:37","guid":{"rendered":"http:\/\/fenneclabs.net\/?p=395"},"modified":"2019-04-01T20:33:22","modified_gmt":"2019-04-01T20:33:22","slug":"super-simple-arduino-gui","status":"publish","type":"post","link":"https:\/\/fenneclabs.net\/index.php\/2019\/03\/30\/super-simple-arduino-gui\/","title":{"rendered":"Super simple Arduino User Interface"},"content":{"rendered":"<p>In this post I will begin with a short discussing on different paradigms for user interfaces, and give you an example for a GUI (graphical user interface) I find most useful:<\/p>\n<div class=\"ast-oembed-container \" style=\"height: 100%;\"><iframe loading=\"lazy\" title=\"Arduino menu system with encoder and OLED\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/wU_NfRFDRE0?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/div>\n<h1>User interfaces<\/h1>\n<p>Many projects that include a microcontroller require some kind of a user interface,\u00a0 either to interact with the operation of the device or to change internal configurations easily.<\/p>\n<p>The most straight forward way to make a UI for your project is to designate a knob or a button for each functionality. This interfaces are great! anyone that handled an oscilloscope or a soundboard would agree, you can manipulate each and every parameter by rotating or sliding the right knob.<\/p>\n<figure style=\"width: 877px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"irc_mi\" src=\"https:\/\/previews.123rf.com\/images\/ldelfoto\/ldelfoto1005\/ldelfoto100500006\/7039056-oscilloscope-front-panel-control-knobs.jpg\" alt=\"Image result for front panel knobs\" width=\"877\" height=\"584\" data-iml=\"1551734049340\" \/><figcaption class=\"wp-caption-text\">Oscilloscope interface panel<\/figcaption><\/figure>\n<p>These are not only easy to use, they are also easy to implement in software, however, the mechanical design is much more demanding and expansive, as the panel must be designed, drilled and assembled, and there a limit to the functionality you can fit in a given panel size.<\/p>\n<p>Another popular approach is to control the device via a PC or a smartphone. The interface can be a GUI that wraps a serial interface transferred via USB2Serial, bluetooth or WiFi. Sometimes, if the microcontroller is strong enough, a web-server can be installed on the device, which can be very handy.<\/p>\n<figure style=\"width: 418px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"irc_mi\" src=\"https:\/\/i2.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/07\/esp32-web-server-outputs.png?resize=623%2C435&amp;ssl=1\" alt=\"Image result for web server esp32\" width=\"418\" height=\"292\" data-iml=\"1551736104191\" \/><figcaption class=\"wp-caption-text\">Web Server on the ESP32<\/figcaption><\/figure>\n<p>The flaw of these UI implementation is in the dependability on an external machine to communicate with the device, as the GUI that wraps the underlying interface may not be compatible with all operational systems, or just be a pain to install on a new machine. Even more so, ten years from now, the GUI may be totally deprecated to any OS.<\/p>\n<p>Communication and especially wireless communication with the device may not always be simple, as it is not always transparent on how to initiate the communication &#8211; The user may fail to remember the correct baudrate, or have problems configuring the IP of the device.<\/p>\n<p>The UI I found most useful for the kind of projects that I make, is the prusa LCD screen + rotary encoder (combined with an underlying serial interface for remote control). It is extremely cheap, and easy to assemble, and allows to modify a vast number of configuration with only one finger!<\/p>\n<figure style=\"width: 480px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"irc_mi\" src=\"https:\/\/files.cults3d.com\/uploaders\/13632404\/illustration-file\/ad20f70d-be24-4bc4-a8ec-d3d8f3c1cc6c\/d290cbc9a527f640f02f931614481e1e_display_large_large.jpg\" alt=\"Image result for prusa controller lcd\" width=\"480\" height=\"480\" data-iml=\"1551737574566\" \/><figcaption class=\"wp-caption-text\">PRUSA UI<\/figcaption><\/figure>\n<p>This approach may be clunky if the user wishes to change multiple parameters quickly, also, it is also much more complicated to implement in code. Luckily, the second disadvantage I named is greatly reduced by the help the open source community, as I found a great library called &#8216;<a href=\"https:\/\/github.com\/jonblack\/arduino-menusystem\">menusystem<\/a>&#8216; that creates menus very easily.<\/p>\n<p>One great thing about the implementation of the menu system, is that it separates the rendering the the menu objects, making the menu portable for different display devices, as the menusystem is more of virtual construct, and the rendering part handles how the menusystem will be displayed.<\/p>\n<h1>Our setup<\/h1>\n<p>The setup includes an Arduino nano, a rotary encoder for scrolling the menu alongside an integrated push button, an RGB LED, an LDR (light dependent resistor) , a servo motor, and an OLED display (128&#215;64).<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-428\" src=\"http:\/\/fenneclabs.net\/wordpress\/wp-content\/uploads\/2019\/03\/menu-example-setup-3-1024x640.png\" alt=\"\" width=\"1024\" height=\"640\" srcset=\"https:\/\/fenneclabs.net\/wordpress\/wp-content\/uploads\/2019\/03\/menu-example-setup-3-1024x640.png 1024w, https:\/\/fenneclabs.net\/wordpress\/wp-content\/uploads\/2019\/03\/menu-example-setup-3-300x187.png 300w, https:\/\/fenneclabs.net\/wordpress\/wp-content\/uploads\/2019\/03\/menu-example-setup-3-768x480.png 768w, https:\/\/fenneclabs.net\/wordpress\/wp-content\/uploads\/2019\/03\/menu-example-setup-3.png 1815w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p>The servo motor is controlled by the menu to go to any desirable angle,\u00a0 the RGB LED color is controlled by three PWM output pins,\u00a0 all configurable in the menu, and lastly an LDR that measures the light intensity of the led, and returns a value which is constantly updated in the menu system.<\/p>\n<p>The code (<a href=\"https:\/\/www.dropbox.com\/s\/jwazra8fopahle9\/MenuTest.rar?dl=0\">available for download here<\/a>) is composed of several independent entities:<\/p>\n<ul>\n<li>Menusystem &#8211; handles the menu tree, where each node can be a a leaf or a subtree, it includes the textual data, and control values of these items.<\/li>\n<li>MyRenderer &#8211; realizes the menusystem to a display, it falls on the designer to define how he wants the menu to appear on the screen.<\/li>\n<li>input interface &#8211; handles the input hardware, and how it effects the menu.<\/li>\n<li>application &#8211; the code that makes up for the purpose of the device, and how it reacts to\u00a0 user input to the menu.<\/li>\n<\/ul>\n<p>This separation allows for the user to reuse the same code for different displays or user input hardware, only by changing the behavior of the relevant part.<\/p>\n<h1>Display initialization<\/h1>\n<p>Before we define the hierarchy of our menu, we must define the display hardware:<\/p>\n<pre class=\"lang:c++ decode:true\">\/\/#############OLED CONFIG#################\r\n#define SCREEN_WIDTH 128 \/\/ OLED display width, in pixels\r\n#define SCREEN_HEIGHT 32 \/\/ OLED display height, in pixels\r\n\r\n\/\/ Declaration for an SSD1306 display connected to I2C (SDA, SCL pins)\r\n#define OLED_RESET     4 \/\/ Reset pin # (or -1 if sharing Arduino reset pin)\r\nAdafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &amp;Wire, OLED_RESET);\r\n<\/pre>\n<p>As you can see I use the adafruit driver for the OLED screen(Adafruit_SSD1306), alongside the adafruit graphic engine(Adafruit_GFX). To link the display driver to the menu system, we write the following lines:<\/p>\n<pre class=\"lang:default decode:true\">MyRenderer my_renderer(&amp;display, textRows);\r\nMenuSystem ms(my_renderer);<\/pre>\n<h1>Menu items declarations<\/h1>\n<p>The menu items are declared in the following snippet:<\/p>\n<pre class=\"lang:default decode:true\">Menu ledMenu(\"LED MENU\", nullptr);\r\nBackMenuItem ledBackItem(\"Back\", &amp;on_ledBackItemSelected, &amp;ms);\r\nToggleMenuItem ledPowerItem(\"LED Power - \", nullptr, \"ON\", \"OFF\", false);\r\nNumericMenuItem ledRedItem(\"Red\", nullptr,0,0,255);\r\nNumericMenuItem ledGreenItem(\"Green\", nullptr, 0, 0, 255);\r\nNumericMenuItem ledBlueItem(\"Blue\", nullptr, 0, 0, 255);\r\nNumericDisplayMenuItem photoTransistorItem(\"Sensor\", nullptr, 0);\r\nMenu servoMenu(\"\", nullptr);\r\nBackMenuItem servoBackItem(\"Back\", on_servoBackItemSelected, &amp;ms);\r\nToggleMenuItem servoPowerItem(\"Servo Power - \", &amp;on_servoPowerItemSelected, \"ON\", \"OFF\", false);\r\nNumericMenuItem servoAngleItem(\"Set Angle\", nullptr, 0, 0, 180);<\/pre>\n<p>The menu declarations above are made of the following item types:<\/p>\n<ul>\n<li>Menusystem &#8211; the root node of the tree<\/li>\n<li>Menu &#8211; contains any son items, when triggered the menu enters its subtree.<\/li>\n<li>back &#8211;\u00a0 lets the user to go back one level on the menu tree by triggering it.<\/li>\n<li>ToggleMenuItem &#8211;\u00a0 switches between two states, like on\/off states. When triggered it toggles the sate.<\/li>\n<li>NumericMenuItem &#8211; contains a numeric value, when triggered, it is available for scrolling it up and down for editing the number.<\/li>\n<li>NumericDisplayMenuItem -shows a numeric value, unlike the former, it is not configurable. It is used here to show the value of the LDR sensor.<\/li>\n<\/ul>\n<p>The input parameters vary according to the menu item type, but all have the same first two parameters, a display string for the menu item, and a callback function that is called whenever a menu is pressed (or a &#8216;nullptr&#8217; of you don&#8217;t need the it).<\/p>\n<p>All the menu items above are part of the original Menusystem library, all but the ToggleMenuItem and NumericDisplayMenuItem , which were custom made by me. You can also add any kind of menu you&#8217;d like by taking any of the item classes as a template (the original ones or the on i made) and add a realization in the MyRenderer library. I must say that it is not as easy to do as I would have liked&#8230;<\/p>\n<h2>Menu Hierarchy<\/h2>\n<p>The definition of the menu is done after the setup() function is called, as it has to be used in the runtime of the uC:<\/p>\n<pre class=\"lang:default decode:true\">\tms.get_root_menu().add_menu(&amp;ledMenu);\r\n\tledMenu.add_item(&amp;ledBackItem);\r\n\tledMenu.add_item(&amp;ledPowerItem);\r\n\tledMenu.add_item(&amp;ledRedItem);\r\n\tledMenu.add_item(&amp;ledGreenItem);\r\n\tledMenu.add_item(&amp;ledBlueItem);\r\n\tledMenu.add_item(&amp;photoTransistorItem);\r\n\tms.get_root_menu().add_menu(&amp;servoMenu);\r\n\r\n\tservoMenu.add_item(&amp;servoBackItem);\r\n\tservoMenu.add_item(&amp;servoPowerItem);\r\n\tservoMenu.add_item(&amp;servoAngleItem);<\/pre>\n<figure id=\"attachment_409\" aria-describedby=\"caption-attachment-409\" style=\"width: 525px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-409 size-large\" src=\"http:\/\/fenneclabs.net\/wordpress\/wp-content\/uploads\/2019\/03\/Picture1-1-1024x470.png\" alt=\"\" width=\"525\" height=\"241\" srcset=\"https:\/\/fenneclabs.net\/wordpress\/wp-content\/uploads\/2019\/03\/Picture1-1-1024x470.png 1024w, https:\/\/fenneclabs.net\/wordpress\/wp-content\/uploads\/2019\/03\/Picture1-1-300x138.png 300w, https:\/\/fenneclabs.net\/wordpress\/wp-content\/uploads\/2019\/03\/Picture1-1-768x353.png 768w, https:\/\/fenneclabs.net\/wordpress\/wp-content\/uploads\/2019\/03\/Picture1-1.png 1270w\" sizes=\"auto, (max-width: 525px) 100vw, 525px\" \/><figcaption id=\"caption-attachment-409\" class=\"wp-caption-text\">Menu tree hierarchy<\/figcaption><\/figure>\n<h1>Encoder user interface<\/h1>\n<p>The physical interface of this device is a rotary encoder (EC11) which encodes four different states along its rotation using two pins:<\/p>\n<figure style=\"width: 298px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"irc_mi\" src=\"https:\/\/www.alps.com\/prod\/info\/E\/image\/Encoder\/Incremental\/EC11\/EC1110120201.jpg\" alt=\"Image result for EC11 pinout\" width=\"298\" height=\"198\" data-iml=\"1553873957824\" \/><figcaption class=\"wp-caption-text\">EC11 encoder<\/figcaption><\/figure>\n<p>To detect whether the encoder was rotated one step CW or CCW we use the following code to scroll the menu up and down:<\/p>\n<pre class=\"lang:c++ decode:true\">void knob_isr()\r\n{\r\n\tif (digitalRead(knobAPin))\r\n\t{\r\n\t\tif (digitalRead(knobBPin)) \/\/knob moved CW\r\n\t\t\tms.next();\r\n\t\telse if (!digitalRead(knobBPin)) \/\/knob moved CCW\r\n\t\t\tms.prev();\r\n\t}\r\n}<\/pre>\n<p>Where knobAPIN and\u00a0knobBPIN are the two state pins of the encoder<\/p>\n<p>The snippet is embedded inside an interrupt function that is called whenever\u00a0knobAPin changes, giving us fast response to the user.<\/p>\n<p>whenever the user wants to select a menu, he presses the rotary encoder, and the following function is called by an interrupt service:<\/p>\n<pre class=\"lang:c++ decode:true\">void pbPressed()\r\n{\r\n\tms.select();\r\n}<\/pre>\n<p>This triggers the menu callback function (if there is one) and triggers an action\u00a0 on the menu depending on its type (e.g. toggle the value, enter number editing mode, entering a submenu, etc..).<\/p>\n<h1>Summary<\/h1>\n<p>I have shown you an example on how you can make a GUI very easily using an encoder and an OLED screen. I hope that this example can be helpful as skeleton for adding GUI into your project. If I will find that this post is of interest to the community, then I will make a guide on how you can make your own GUI items and how to create a renderer for different displays (LCD, LED matrtix, etc&#8230;)<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this post I will begin with a short discussing on different paradigms for user interfaces, and give you an example for a GUI (graphical user interface) I find most useful: User interfaces Many projects that include a microcontroller require some kind of a user interface,\u00a0 either to interact with the operation of the device [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":428,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"default","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[24],"tags":[29,25,32,26,31,30,28,27,34,33],"class_list":["post-395","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ardiono","tag-adafruit-gfx","tag-arduino","tag-ec11","tag-gui","tag-menu-system","tag-menusystem","tag-oled","tag-rotary-encoder","tag-ui","tag-user-interface"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Super simple Arduino User Interface - FennecLabs<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fenneclabs.net\/index.php\/2019\/03\/30\/super-simple-arduino-gui\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Super simple Arduino User Interface - FennecLabs\" \/>\n<meta property=\"og:description\" content=\"In this post I will begin with a short discussing on different paradigms for user interfaces, and give you an example for a GUI (graphical user interface) I find most useful: User interfaces Many projects that include a microcontroller require some kind of a user interface,\u00a0 either to interact with the operation of the device [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fenneclabs.net\/index.php\/2019\/03\/30\/super-simple-arduino-gui\/\" \/>\n<meta property=\"og:site_name\" content=\"FennecLabs\" \/>\n<meta property=\"article:published_time\" content=\"2019-03-30T00:32:37+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-04-01T20:33:22+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/fenneclabs.net\/wordpress\/wp-content\/uploads\/2019\/03\/menu-example-setup-3.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1815\" \/>\n\t<meta property=\"og:image:height\" content=\"1134\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"tuval\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"tuval\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/fenneclabs.net\\\/index.php\\\/2019\\\/03\\\/30\\\/super-simple-arduino-gui\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/fenneclabs.net\\\/index.php\\\/2019\\\/03\\\/30\\\/super-simple-arduino-gui\\\/\"},\"author\":{\"name\":\"tuval\",\"@id\":\"https:\\\/\\\/fenneclabs.net\\\/#\\\/schema\\\/person\\\/8fa0b593db8821fbba7cf968ce4bd084\"},\"headline\":\"Super simple Arduino User Interface\",\"datePublished\":\"2019-03-30T00:32:37+00:00\",\"dateModified\":\"2019-04-01T20:33:22+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/fenneclabs.net\\\/index.php\\\/2019\\\/03\\\/30\\\/super-simple-arduino-gui\\\/\"},\"wordCount\":1296,\"commentCount\":16,\"image\":{\"@id\":\"https:\\\/\\\/fenneclabs.net\\\/index.php\\\/2019\\\/03\\\/30\\\/super-simple-arduino-gui\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/fenneclabs.net\\\/wordpress\\\/wp-content\\\/uploads\\\/2019\\\/03\\\/menu-example-setup-3.png\",\"keywords\":[\"adafruit GFX\",\"arduino\",\"EC11\",\"GUI\",\"menu system\",\"menusystem\",\"OLED\",\"rotary encoder\",\"UI\",\"User Interface\"],\"articleSection\":[\"Ardiono\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/fenneclabs.net\\\/index.php\\\/2019\\\/03\\\/30\\\/super-simple-arduino-gui\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/fenneclabs.net\\\/index.php\\\/2019\\\/03\\\/30\\\/super-simple-arduino-gui\\\/\",\"url\":\"https:\\\/\\\/fenneclabs.net\\\/index.php\\\/2019\\\/03\\\/30\\\/super-simple-arduino-gui\\\/\",\"name\":\"Super simple Arduino User Interface - FennecLabs\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/fenneclabs.net\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/fenneclabs.net\\\/index.php\\\/2019\\\/03\\\/30\\\/super-simple-arduino-gui\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/fenneclabs.net\\\/index.php\\\/2019\\\/03\\\/30\\\/super-simple-arduino-gui\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/fenneclabs.net\\\/wordpress\\\/wp-content\\\/uploads\\\/2019\\\/03\\\/menu-example-setup-3.png\",\"datePublished\":\"2019-03-30T00:32:37+00:00\",\"dateModified\":\"2019-04-01T20:33:22+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/fenneclabs.net\\\/#\\\/schema\\\/person\\\/8fa0b593db8821fbba7cf968ce4bd084\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/fenneclabs.net\\\/index.php\\\/2019\\\/03\\\/30\\\/super-simple-arduino-gui\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/fenneclabs.net\\\/index.php\\\/2019\\\/03\\\/30\\\/super-simple-arduino-gui\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/fenneclabs.net\\\/index.php\\\/2019\\\/03\\\/30\\\/super-simple-arduino-gui\\\/#primaryimage\",\"url\":\"https:\\\/\\\/fenneclabs.net\\\/wordpress\\\/wp-content\\\/uploads\\\/2019\\\/03\\\/menu-example-setup-3.png\",\"contentUrl\":\"https:\\\/\\\/fenneclabs.net\\\/wordpress\\\/wp-content\\\/uploads\\\/2019\\\/03\\\/menu-example-setup-3.png\",\"width\":1815,\"height\":1134},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/fenneclabs.net\\\/index.php\\\/2019\\\/03\\\/30\\\/super-simple-arduino-gui\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/fenneclabs.net\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Super simple Arduino User Interface\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/fenneclabs.net\\\/#website\",\"url\":\"https:\\\/\\\/fenneclabs.net\\\/\",\"name\":\"FennecLabs\",\"description\":\"A place to share our projects and ideas\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/fenneclabs.net\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/fenneclabs.net\\\/#\\\/schema\\\/person\\\/8fa0b593db8821fbba7cf968ce4bd084\",\"name\":\"tuval\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/6b3490250a039bd75465e65841410f47d97d30fd02ad212040a9dab70e98ef31?s=96&d=identicon&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/6b3490250a039bd75465e65841410f47d97d30fd02ad212040a9dab70e98ef31?s=96&d=identicon&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/6b3490250a039bd75465e65841410f47d97d30fd02ad212040a9dab70e98ef31?s=96&d=identicon&r=g\",\"caption\":\"tuval\"},\"url\":\"https:\\\/\\\/fenneclabs.net\\\/index.php\\\/author\\\/tuval\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Super simple Arduino User Interface - FennecLabs","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fenneclabs.net\/index.php\/2019\/03\/30\/super-simple-arduino-gui\/","og_locale":"en_US","og_type":"article","og_title":"Super simple Arduino User Interface - FennecLabs","og_description":"In this post I will begin with a short discussing on different paradigms for user interfaces, and give you an example for a GUI (graphical user interface) I find most useful: User interfaces Many projects that include a microcontroller require some kind of a user interface,\u00a0 either to interact with the operation of the device [&hellip;]","og_url":"https:\/\/fenneclabs.net\/index.php\/2019\/03\/30\/super-simple-arduino-gui\/","og_site_name":"FennecLabs","article_published_time":"2019-03-30T00:32:37+00:00","article_modified_time":"2019-04-01T20:33:22+00:00","og_image":[{"width":1815,"height":1134,"url":"https:\/\/fenneclabs.net\/wordpress\/wp-content\/uploads\/2019\/03\/menu-example-setup-3.png","type":"image\/png"}],"author":"tuval","twitter_card":"summary_large_image","twitter_misc":{"Written by":"tuval","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fenneclabs.net\/index.php\/2019\/03\/30\/super-simple-arduino-gui\/#article","isPartOf":{"@id":"https:\/\/fenneclabs.net\/index.php\/2019\/03\/30\/super-simple-arduino-gui\/"},"author":{"name":"tuval","@id":"https:\/\/fenneclabs.net\/#\/schema\/person\/8fa0b593db8821fbba7cf968ce4bd084"},"headline":"Super simple Arduino User Interface","datePublished":"2019-03-30T00:32:37+00:00","dateModified":"2019-04-01T20:33:22+00:00","mainEntityOfPage":{"@id":"https:\/\/fenneclabs.net\/index.php\/2019\/03\/30\/super-simple-arduino-gui\/"},"wordCount":1296,"commentCount":16,"image":{"@id":"https:\/\/fenneclabs.net\/index.php\/2019\/03\/30\/super-simple-arduino-gui\/#primaryimage"},"thumbnailUrl":"https:\/\/fenneclabs.net\/wordpress\/wp-content\/uploads\/2019\/03\/menu-example-setup-3.png","keywords":["adafruit GFX","arduino","EC11","GUI","menu system","menusystem","OLED","rotary encoder","UI","User Interface"],"articleSection":["Ardiono"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fenneclabs.net\/index.php\/2019\/03\/30\/super-simple-arduino-gui\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/fenneclabs.net\/index.php\/2019\/03\/30\/super-simple-arduino-gui\/","url":"https:\/\/fenneclabs.net\/index.php\/2019\/03\/30\/super-simple-arduino-gui\/","name":"Super simple Arduino User Interface - FennecLabs","isPartOf":{"@id":"https:\/\/fenneclabs.net\/#website"},"primaryImageOfPage":{"@id":"https:\/\/fenneclabs.net\/index.php\/2019\/03\/30\/super-simple-arduino-gui\/#primaryimage"},"image":{"@id":"https:\/\/fenneclabs.net\/index.php\/2019\/03\/30\/super-simple-arduino-gui\/#primaryimage"},"thumbnailUrl":"https:\/\/fenneclabs.net\/wordpress\/wp-content\/uploads\/2019\/03\/menu-example-setup-3.png","datePublished":"2019-03-30T00:32:37+00:00","dateModified":"2019-04-01T20:33:22+00:00","author":{"@id":"https:\/\/fenneclabs.net\/#\/schema\/person\/8fa0b593db8821fbba7cf968ce4bd084"},"breadcrumb":{"@id":"https:\/\/fenneclabs.net\/index.php\/2019\/03\/30\/super-simple-arduino-gui\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fenneclabs.net\/index.php\/2019\/03\/30\/super-simple-arduino-gui\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/fenneclabs.net\/index.php\/2019\/03\/30\/super-simple-arduino-gui\/#primaryimage","url":"https:\/\/fenneclabs.net\/wordpress\/wp-content\/uploads\/2019\/03\/menu-example-setup-3.png","contentUrl":"https:\/\/fenneclabs.net\/wordpress\/wp-content\/uploads\/2019\/03\/menu-example-setup-3.png","width":1815,"height":1134},{"@type":"BreadcrumbList","@id":"https:\/\/fenneclabs.net\/index.php\/2019\/03\/30\/super-simple-arduino-gui\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/fenneclabs.net\/"},{"@type":"ListItem","position":2,"name":"Super simple Arduino User Interface"}]},{"@type":"WebSite","@id":"https:\/\/fenneclabs.net\/#website","url":"https:\/\/fenneclabs.net\/","name":"FennecLabs","description":"A place to share our projects and ideas","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fenneclabs.net\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/fenneclabs.net\/#\/schema\/person\/8fa0b593db8821fbba7cf968ce4bd084","name":"tuval","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/6b3490250a039bd75465e65841410f47d97d30fd02ad212040a9dab70e98ef31?s=96&d=identicon&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/6b3490250a039bd75465e65841410f47d97d30fd02ad212040a9dab70e98ef31?s=96&d=identicon&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6b3490250a039bd75465e65841410f47d97d30fd02ad212040a9dab70e98ef31?s=96&d=identicon&r=g","caption":"tuval"},"url":"https:\/\/fenneclabs.net\/index.php\/author\/tuval\/"}]}},"_links":{"self":[{"href":"https:\/\/fenneclabs.net\/index.php\/wp-json\/wp\/v2\/posts\/395","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fenneclabs.net\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fenneclabs.net\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fenneclabs.net\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/fenneclabs.net\/index.php\/wp-json\/wp\/v2\/comments?post=395"}],"version-history":[{"count":14,"href":"https:\/\/fenneclabs.net\/index.php\/wp-json\/wp\/v2\/posts\/395\/revisions"}],"predecessor-version":[{"id":430,"href":"https:\/\/fenneclabs.net\/index.php\/wp-json\/wp\/v2\/posts\/395\/revisions\/430"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/fenneclabs.net\/index.php\/wp-json\/wp\/v2\/media\/428"}],"wp:attachment":[{"href":"https:\/\/fenneclabs.net\/index.php\/wp-json\/wp\/v2\/media?parent=395"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fenneclabs.net\/index.php\/wp-json\/wp\/v2\/categories?post=395"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fenneclabs.net\/index.php\/wp-json\/wp\/v2\/tags?post=395"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}