{"id":179,"date":"2016-04-27T14:42:32","date_gmt":"2016-04-27T14:42:32","guid":{"rendered":"http:\/\/justanotherelectronicsblog.com\/?p=179"},"modified":"2016-04-27T14:42:32","modified_gmt":"2016-04-27T14:42:32","slug":"quick-gui-for-mbed-projects-using-dear-imgui-and-serial","status":"publish","type":"post","link":"https:\/\/justanotherelectronicsblog.com\/?p=179","title":{"rendered":"Quick GUI for MBED projects using Dear ImGui and Serial"},"content":{"rendered":"<p>A lot of microcontroller projects communicate with a computer using a serial connection as this is still a very simple and cheap way of communicating. Making a program on the PC to communicate with a microcontroller can however be a bit tricky. On accident I stumbled on the Dear ImGui library, a C++ library to quickly make a GUI, for debugging a C++ project for example. I really liked the look of it, it looked really simple, with a lot of usable gui objects. Dear ImGui can use OpenGL, DirectX, Vulcan and more. It is cross platform as well, as long as OpenGL is used.<\/p>\n<p>A gui is just half of the issues solved, a good library for serial communication is also needed. After a quick look Serial popped up. Except for the annoyingly generic name it is a very nice looking library. Cross platform and simple to use, being made to look and feel like PySerial.<\/p>\n<p>With these two libraries it is possible to make a C++ cross platform GUI for all kinds of microcontroller projects. I decided to make a simple project first that can read and write to some IO ports, set the DAC and read in two ADC&#8217;s.<\/p>\n<p>And the result looks like this:<\/p>\n<p><a href=\"http:\/\/justanotherelectronicsblog.com\/wp-content\/uploads\/2016\/04\/Selection_009.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-180\" src=\"http:\/\/justanotherelectronicsblog.com\/wp-content\/uploads\/2016\/04\/Selection_009.png\" alt=\"Selection_009\" width=\"563\" height=\"734\" srcset=\"https:\/\/justanotherelectronicsblog.com\/wp-content\/uploads\/2016\/04\/Selection_009.png 563w, https:\/\/justanotherelectronicsblog.com\/wp-content\/uploads\/2016\/04\/Selection_009-230x300.png 230w\" sizes=\"auto, (max-width: 563px) 100vw, 563px\" \/><\/a><\/p>\n<p><!--more--><\/p>\n<p>There is no tutorial for Dear Imgui at this moment but the imgui.h file and the demo project together form the documentation. To save everyone some time here a small explanation of the code. An empty Dear ImGui project looks like this when OpenGL is used.<\/p>\n<pre class=\"lang:c++ decode:true\">int main(int, char**)\r\n{\r\n    \/\/ Setup window\r\n    glfwSetErrorCallback(error_callback);\r\n    if (!glfwInit())\r\n        return 1;\r\n    GLFWwindow* window = glfwCreateWindow(1280, 720, \"ImGui OpenGL2 example\", NULL, NULL);\r\n    glfwMakeContextCurrent(window);\r\n\r\n    \/\/ Setup ImGui binding\r\n    ImGui_ImplGlfw_Init(window, true);\r\n\r\n    ImVec4 clear_color = ImColor(114, 144, 154);\r\n\r\n    \/\/ Main loop\r\n    while (!glfwWindowShouldClose(window))\r\n    {\r\n        glfwPollEvents();\r\n        ImGui_ImplGlfw_NewFrame();\r\n\t\t\r\n\tShowTestGui(&amp;showtestgui);\r\n\r\n        \/\/ Rendering\r\n        int display_w, display_h;\r\n        glfwGetFramebufferSize(window, &amp;display_w, &amp;display_h);\r\n        glViewport(0, 0, display_w, display_h);\r\n        glClearColor(clear_color.x, clear_color.y, clear_color.z, clear_color.w);\r\n        glClear(GL_COLOR_BUFFER_BIT);\r\n        ImGui::Render();\r\n        glfwSwapBuffers(window);\r\n    }\r\n\r\n    \/\/ Cleanup\r\n    ImGui_ImplGlfw_Shutdown();\r\n    glfwTerminate();\r\n\r\n    return 0;\r\n}<\/pre>\n<p>&nbsp;<\/p>\n<p>ImGui creates a while loop that is being executed as long as the ImGui window is not closed. The ShowTestGui(&amp;showtestgui); is the function I&#8217;ve added, this function contains all the code that creates the ImGui objects. Let&#8217;s start at the top with the &#8220;Hello world&#8221; and the button:<\/p>\n<pre class=\"lang:c++ decode:true\">\tImGui::Text(\"Hello world\");\r\n\t\r\n\tif(ImGui::Button(\"OK\"))\r\n\t{\r\n\t\tshowtestwindow = !showtestwindow;\r\n\t}\r\n\r\n\tif(showtestwindow)\r\n\t{\r\n\t\tImGui::ShowTestWindow(&amp;showtestwindow); \r\n\t}<\/pre>\n<p>Just a few lines to create some text, a button and actually make the button do something, nice.<\/p>\n<p>ImGui::Text shows, as expected, a simple line of text. Nothing exciting but &#8220;Hello world&#8221; is always a nice start. ImGui::Button(&#8220;OK&#8221;) creates a button with the text &#8220;OK&#8221; on it, returning true if it&#8217;s pressed and false otherwise. If it&#8217;s being pressed the demo window of ImGui will be shown or removed. That was simple :)<\/p>\n<p>To create the 8 checkboxes for the LEDs the following code is used:<\/p>\n<pre class=\"lang:c++ decode:true \">ImGui::Text(\"LEDs:\");\r\nstatic bool led[8] = {false};\r\nImGui::Checkbox(\"##LED1\", &amp;led[0]); ImGui::SameLine();\r\nImGui::Checkbox(\"##LED2\", &amp;led[1]); ImGui::SameLine();\r\nImGui::Checkbox(\"##LED3\", &amp;led[2]); ImGui::SameLine();\r\nImGui::Checkbox(\"##LED4\", &amp;led[3]); ImGui::SameLine();\r\nImGui::Checkbox(\"##LED5\", &amp;led[4]); ImGui::SameLine();\r\nImGui::Checkbox(\"##LED6\", &amp;led[5]); ImGui::SameLine();\r\nImGui::Checkbox(\"##LED7\", &amp;led[6]); ImGui::SameLine();\r\nImGui::Checkbox(\"##LED8\", &amp;led[7]);<\/pre>\n<p>ImGui::Checkbox creates a checkbox, normally a checkbox has a textlabel, ImGui::Checkbox(&#8220;LED8&#8221;, &amp;led[7]); would have the text LED8 next to it. ## means that the checkbox has no visible label, hence no text is shown next to the checkbox. Every object in ImGui needs a label as they also serve as the identifier for the object. The ID of the checkbox is now LED8 but no text is shown.<\/p>\n<p>ImGui::SameLine does exactly as one would expect, it puts the next ImGui object on the same line as the previous one. The array led[8] will contain the values of the checkboxes. Every time a checkbox is clicked it will store the value in this array.<\/p>\n<p>The checkboxes for Inputs are made in the same way.<\/p>\n<p>To create a graph the following code is used:<\/p>\n<pre class=\"lang:default decode:true \">static float adc1arr[100];\r\nImGui::PlotLines(\"ADC1\", adc1arr, IM_ARRAYSIZE(adc1arr), 0, NULL, 0, 100, ImVec2(0,120));\r\nImGui::SameLine();\r\nstatic int adc1speed = 1;\r\nconst char* items[] = {\"100Khz\", \"10Khz\", \"1Khz\", \"100Hz\"};\r\nImGui::Combo(\"Speed##1\", &amp;adc1speed, items, IM_ARRAYSIZE(items));<\/pre>\n<p>adc1arr contains the values to be plotted. ImGui::Plotlines actually plots the graph. &#8220;ADC1&#8221; is the label, then the array to plot, then the size of the array to plot. Next the offset, here 0. Then an overlay text, here not used. 0 and 100 are the min and max value of the array and ImVec(0, 120) the size of the graph.<\/p>\n<p>ImGui::Combo creates a Combobox. The choice is stored in adc1speed. items are all the items listed in the Combobox.<\/p>\n<p>And last, the slider:<\/p>\n<pre class=\"lang:default decode:true \">static int tint;\r\nImGui::Text(\"DACs:\");\r\nImGui::SliderInt(\"DAC value\", &amp;tint, 0, 100);<\/pre>\n<p>Very simple, ImGui::SliderInt creates a slider that returns an integer value and in this case the slider goes from 0 to 100.<\/p>\n<p>&nbsp;<\/p>\n<p>That&#8217;s all for now, in the next post the serial communication will get explained.<br \/>\nIf you are very curious, the full code can be found in my <a href=\"https:\/\/github.com\/riktw\/Dear_ImGui_MBED\">github<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>A lot of microcontroller projects communicate with a computer using a serial connection as this is still a very simple and cheap way of communicating. Making a program on the PC to communicate with a microcontroller can however be a bit tricky. On accident I stumbled on the Dear ImGui library, a C++ library to [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[11],"tags":[],"class_list":["post-179","post","type-post","status-publish","format-standard","hentry","category-microcontrollers"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Quick GUI for MBED projects using Dear ImGui and Serial - jaeblog<\/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:\/\/justanotherelectronicsblog.com\/?p=179\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Quick GUI for MBED projects using Dear ImGui and Serial - jaeblog\" \/>\n<meta property=\"og:description\" content=\"A lot of microcontroller projects communicate with a computer using a serial connection as this is still a very simple and cheap way of communicating. Making a program on the PC to communicate with a microcontroller can however be a bit tricky. On accident I stumbled on the Dear ImGui library, a C++ library to [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/justanotherelectronicsblog.com\/?p=179\" \/>\n<meta property=\"og:site_name\" content=\"jaeblog\" \/>\n<meta property=\"article:published_time\" content=\"2016-04-27T14:42:32+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/justanotherelectronicsblog.com\/wp-content\/uploads\/2016\/04\/Selection_009.png\" \/>\n<meta name=\"author\" content=\"riktw\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"riktw\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/justanotherelectronicsblog.com\\\/?p=179#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/justanotherelectronicsblog.com\\\/?p=179\"},\"author\":{\"name\":\"riktw\",\"@id\":\"https:\\\/\\\/justanotherelectronicsblog.com\\\/#\\\/schema\\\/person\\\/d77e39721321c4a472b49909a8f1982b\"},\"headline\":\"Quick GUI for MBED projects using Dear ImGui and Serial\",\"datePublished\":\"2016-04-27T14:42:32+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/justanotherelectronicsblog.com\\\/?p=179\"},\"wordCount\":679,\"commentCount\":1,\"image\":{\"@id\":\"https:\\\/\\\/justanotherelectronicsblog.com\\\/?p=179#primaryimage\"},\"thumbnailUrl\":\"http:\\\/\\\/justanotherelectronicsblog.com\\\/wp-content\\\/uploads\\\/2016\\\/04\\\/Selection_009.png\",\"articleSection\":[\"Microcontrollers\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/justanotherelectronicsblog.com\\\/?p=179#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/justanotherelectronicsblog.com\\\/?p=179\",\"url\":\"https:\\\/\\\/justanotherelectronicsblog.com\\\/?p=179\",\"name\":\"Quick GUI for MBED projects using Dear ImGui and Serial - jaeblog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/justanotherelectronicsblog.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/justanotherelectronicsblog.com\\\/?p=179#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/justanotherelectronicsblog.com\\\/?p=179#primaryimage\"},\"thumbnailUrl\":\"http:\\\/\\\/justanotherelectronicsblog.com\\\/wp-content\\\/uploads\\\/2016\\\/04\\\/Selection_009.png\",\"datePublished\":\"2016-04-27T14:42:32+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/justanotherelectronicsblog.com\\\/#\\\/schema\\\/person\\\/d77e39721321c4a472b49909a8f1982b\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/justanotherelectronicsblog.com\\\/?p=179#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/justanotherelectronicsblog.com\\\/?p=179\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/justanotherelectronicsblog.com\\\/?p=179#primaryimage\",\"url\":\"http:\\\/\\\/justanotherelectronicsblog.com\\\/wp-content\\\/uploads\\\/2016\\\/04\\\/Selection_009.png\",\"contentUrl\":\"http:\\\/\\\/justanotherelectronicsblog.com\\\/wp-content\\\/uploads\\\/2016\\\/04\\\/Selection_009.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/justanotherelectronicsblog.com\\\/?p=179#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/justanotherelectronicsblog.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Quick GUI for MBED projects using Dear ImGui and Serial\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/justanotherelectronicsblog.com\\\/#website\",\"url\":\"https:\\\/\\\/justanotherelectronicsblog.com\\\/\",\"name\":\"jaeblog\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/justanotherelectronicsblog.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/justanotherelectronicsblog.com\\\/#\\\/schema\\\/person\\\/d77e39721321c4a472b49909a8f1982b\",\"name\":\"riktw\",\"url\":\"https:\\\/\\\/justanotherelectronicsblog.com\\\/?author=1\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Quick GUI for MBED projects using Dear ImGui and Serial - jaeblog","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:\/\/justanotherelectronicsblog.com\/?p=179","og_locale":"en_US","og_type":"article","og_title":"Quick GUI for MBED projects using Dear ImGui and Serial - jaeblog","og_description":"A lot of microcontroller projects communicate with a computer using a serial connection as this is still a very simple and cheap way of communicating. Making a program on the PC to communicate with a microcontroller can however be a bit tricky. On accident I stumbled on the Dear ImGui library, a C++ library to [&hellip;]","og_url":"https:\/\/justanotherelectronicsblog.com\/?p=179","og_site_name":"jaeblog","article_published_time":"2016-04-27T14:42:32+00:00","og_image":[{"url":"http:\/\/justanotherelectronicsblog.com\/wp-content\/uploads\/2016\/04\/Selection_009.png","type":"","width":"","height":""}],"author":"riktw","twitter_card":"summary_large_image","twitter_misc":{"Written by":"riktw","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/justanotherelectronicsblog.com\/?p=179#article","isPartOf":{"@id":"https:\/\/justanotherelectronicsblog.com\/?p=179"},"author":{"name":"riktw","@id":"https:\/\/justanotherelectronicsblog.com\/#\/schema\/person\/d77e39721321c4a472b49909a8f1982b"},"headline":"Quick GUI for MBED projects using Dear ImGui and Serial","datePublished":"2016-04-27T14:42:32+00:00","mainEntityOfPage":{"@id":"https:\/\/justanotherelectronicsblog.com\/?p=179"},"wordCount":679,"commentCount":1,"image":{"@id":"https:\/\/justanotherelectronicsblog.com\/?p=179#primaryimage"},"thumbnailUrl":"http:\/\/justanotherelectronicsblog.com\/wp-content\/uploads\/2016\/04\/Selection_009.png","articleSection":["Microcontrollers"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/justanotherelectronicsblog.com\/?p=179#respond"]}]},{"@type":"WebPage","@id":"https:\/\/justanotherelectronicsblog.com\/?p=179","url":"https:\/\/justanotherelectronicsblog.com\/?p=179","name":"Quick GUI for MBED projects using Dear ImGui and Serial - jaeblog","isPartOf":{"@id":"https:\/\/justanotherelectronicsblog.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/justanotherelectronicsblog.com\/?p=179#primaryimage"},"image":{"@id":"https:\/\/justanotherelectronicsblog.com\/?p=179#primaryimage"},"thumbnailUrl":"http:\/\/justanotherelectronicsblog.com\/wp-content\/uploads\/2016\/04\/Selection_009.png","datePublished":"2016-04-27T14:42:32+00:00","author":{"@id":"https:\/\/justanotherelectronicsblog.com\/#\/schema\/person\/d77e39721321c4a472b49909a8f1982b"},"breadcrumb":{"@id":"https:\/\/justanotherelectronicsblog.com\/?p=179#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/justanotherelectronicsblog.com\/?p=179"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/justanotherelectronicsblog.com\/?p=179#primaryimage","url":"http:\/\/justanotherelectronicsblog.com\/wp-content\/uploads\/2016\/04\/Selection_009.png","contentUrl":"http:\/\/justanotherelectronicsblog.com\/wp-content\/uploads\/2016\/04\/Selection_009.png"},{"@type":"BreadcrumbList","@id":"https:\/\/justanotherelectronicsblog.com\/?p=179#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/justanotherelectronicsblog.com\/"},{"@type":"ListItem","position":2,"name":"Quick GUI for MBED projects using Dear ImGui and Serial"}]},{"@type":"WebSite","@id":"https:\/\/justanotherelectronicsblog.com\/#website","url":"https:\/\/justanotherelectronicsblog.com\/","name":"jaeblog","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/justanotherelectronicsblog.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/justanotherelectronicsblog.com\/#\/schema\/person\/d77e39721321c4a472b49909a8f1982b","name":"riktw","url":"https:\/\/justanotherelectronicsblog.com\/?author=1"}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/justanotherelectronicsblog.com\/index.php?rest_route=\/wp\/v2\/posts\/179","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/justanotherelectronicsblog.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/justanotherelectronicsblog.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/justanotherelectronicsblog.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/justanotherelectronicsblog.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=179"}],"version-history":[{"count":5,"href":"https:\/\/justanotherelectronicsblog.com\/index.php?rest_route=\/wp\/v2\/posts\/179\/revisions"}],"predecessor-version":[{"id":185,"href":"https:\/\/justanotherelectronicsblog.com\/index.php?rest_route=\/wp\/v2\/posts\/179\/revisions\/185"}],"wp:attachment":[{"href":"https:\/\/justanotherelectronicsblog.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=179"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/justanotherelectronicsblog.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=179"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/justanotherelectronicsblog.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=179"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}