{"id":237685,"date":"2021-02-17T18:18:18","date_gmt":"2021-02-17T17:18:18","guid":{"rendered":"https:\/\/emariete.com\/?p=237685"},"modified":"2021-02-17T18:18:18","modified_gmt":"2021-02-17T17:18:18","slug":"colour-touch-screen-colour-meter-co2","status":"publish","type":"post","link":"https:\/\/emariete.com\/en\/pantalla-tactil-color-medidor-co2\/","title":{"rendered":"Colour touch screen for CO\u2082 meter Wow!"},"content":{"rendered":"<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Why put a touch screen on a CO2 meter?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">In this post, we are going to talk about an exciting new feature of a CO\u2082 meter: the colour touch screen. With a colour touchscreen, users can view data clearly and accurately, and interact with the device intuitively. Read on to learn more about how this feature can enhance your CO\u2082 meter experience!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">There is no doubt about it, <strong>things come in through the eyes<\/strong> and a colour touchscreen for our home CO2 meter <strong>takes the project to another level<\/strong>Who can resist a beautiful, full-colour touchscreen in the right size?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We already have a <strong>quality CO\u2082 meter, with a lot of functionalities and expansion possibilities, at a low price<\/strong>. Now it's time to give him <strong>a touch of luxury<\/strong>. Something we can do without, but we can <strong>What a load of crap!<\/strong>let's give each other <strong>a whim<\/strong> to be proud of and to have <strong>something that, when we show it to our friends and family and tell them \"I made it myself\", will cause the Wow! effect.<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Here we have the creature in question, in one of its first versions (don't worry, it will get better and prettier with time):<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"338\" src=\"https:\/\/emariete.com\/wp-content\/uploads\/2021\/02\/Moco2TouchscreenDemo1A.gif\" alt=\"\" class=\"wp-image-237686\"\/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\"><strong>Installation couldn't be simpler...<\/strong> just plug in four cables, load the file I'll provide below onto the MicroSD card in the display, and update and configure the meter.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The secret is in the choice of screen: <strong>A Nextion smart display<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This is a very special screen (and I recommend it for use in <strong>any other project<\/strong> you have where you need a screen).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">What makes this display different from the others is that it is not just a simple display, but rather <strong>has integrated all the user interface, such as graphics, buttons, etc. and has its own microprocessor to manage all that, <\/strong>and we only have to tell it what data we want it to \"paint\" in a certain place or wait for the screen to tell us \"I have been clicked on such and such a place\".<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The big advantage is that <strong>you can design your own user interface with easy-to-use tools.<\/strong> (I have done it with PowerPoint) without the need for great technical knowledge.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">I will soon have a \"presentable\" version that you can download from here. <strong>with all the instructions, <\/strong>so that you can incorporate it into your <em>eMariete's homemade CO2 meter<\/em>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">The screen we are going to use<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">While I finish it, <strong>If you want to buy it, I recommend you to do it in this AliExpress link,<\/strong> which is exactly the same screen I'm using (so you'll be sure not to have any problems):<\/p>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If you buy it elsewhere <strong>be careful<\/strong> because there is an identical version, but in <strong>Chinese <\/strong>that after <strong>you will only be able to use with the Chinese editor<\/strong> (if you know Chinese you can ignore this comment \ud83d\ude09).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You already know that this article is an extension of the \"eMariete home CO2 meter\". If you haven't read it, <strong>start here<\/strong>:<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-wp-embed is-provider-emariete wp-block-embed-emariete\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"wp-embedded-content\" data-secret=\"IdFX5C6Jpd\"><a href=\"https:\/\/emariete.com\/en\/carbon-gas-co2-meter\/\">A home CO2 meter with Wifi against the coronavirus: The CO2 Easy<\/a><\/blockquote><iframe loading=\"lazy\" class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; clip: rect(1px, 1px, 1px, 1px);\" title=\"&quot;A home CO2 meter with Wifi against the coronavirus: The CO2 Easy&quot; - eMariete\" src=\"https:\/\/emariete.com\/medidor-casero-co2\/embed\/#?secret=Ps8PZPm2aV#?secret=IdFX5C6Jpd\" data-secret=\"IdFX5C6Jpd\" width=\"600\" height=\"338\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-como-anadir-una-pantalla-tactil-a-tu-medidor-de-co2\">How to add a touch screen to your CO2 meter<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">To add the touch screen to your meter, you will need the following:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The right Nextion display<\/li>\n\n\n\n<li>The file you have to load on the screen<\/li>\n\n\n\n<li>A version of ESP Easy that supports the screen<\/li>\n\n\n\n<li>Configure the plugin<\/li>\n\n\n\n<li>Add the rules you need<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">I assume you already have the screen <strong>Correct<\/strong>. It is important that it is <strong>exactly <\/strong>the same model to make the file I have prepared work for you. Be careful because there are <strong>many models <\/strong>Nextion screens with small differences and it might not work for you. I recommend you to buy it from the link I gave you before.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A<strong>here you can download the file <a href=\"https:\/\/emariete.com\/wp-content\/uploads\/2021\/03\/Medidor%20CO2.HMI\">HMI for the Nextion display<\/a><\/strong>. Just load it with the Nextion editor on your screen and adjust the rules.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Please note that the Nextion plugin <strong>not included in the normal build<\/strong> build of ESP Easy. You'll need the build that includes \"TEST\" in the name (it's in the full package that you download from the ESP Easy release page on GitHub).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Save it to your ESP8266 and add it as a device in the \"Devices\" tab drop-down:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/emariete.com\/wp-content\/uploads\/2021\/03\/Nextion-ESPEasy-Device-Add.png\"><img loading=\"lazy\" decoding=\"async\" width=\"906\" height=\"655\" src=\"https:\/\/emariete.com\/wp-content\/uploads\/2021\/03\/Nextion-ESPEasy-Device-Add.png\" alt=\"\" class=\"wp-image-238155\" srcset=\"https:\/\/emariete.com\/wp-content\/uploads\/2021\/03\/Nextion-ESPEasy-Device-Add.png 906w, https:\/\/emariete.com\/wp-content\/uploads\/2021\/03\/Nextion-ESPEasy-Device-Add-300x217.png 300w, https:\/\/emariete.com\/wp-content\/uploads\/2021\/03\/Nextion-ESPEasy-Device-Add-768x555.png 768w\" sizes=\"auto, (max-width: 906px) 100vw, 906px\" \/><\/a><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Now you have to<strong> configure the Nextion device<\/strong> to look like this (click on the image to see it in full):<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><a href=\"https:\/\/emariete.com\/wp-content\/uploads\/2021\/03\/Nextion-ESPEasy-Device-Config.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/emariete.com\/wp-content\/uploads\/2021\/03\/Nextion-ESPEasy-Device-Config.png\" alt=\"\" class=\"wp-image-238151\" width=\"592\" height=\"1063\" srcset=\"https:\/\/emariete.com\/wp-content\/uploads\/2021\/03\/Nextion-ESPEasy-Device-Config.png 592w, https:\/\/emariete.com\/wp-content\/uploads\/2021\/03\/Nextion-ESPEasy-Device-Config-167x300.png 167w, https:\/\/emariete.com\/wp-content\/uploads\/2021\/03\/Nextion-ESPEasy-Device-Config-570x1024.png 570w\" sizes=\"auto, (max-width: 592px) 100vw, 592px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Logically, you will have to <strong>change device names to your own<\/strong>. For example, in line 1, if your sensor is called CO2 and the value is called PPM, you would put [CO2#PPM].<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">With this your display will be working and every 15 seconds (the value indicated in the configuration under \"Interval\") the values will be updated.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The touch part and its rules are yet to be implemented, as although you can click with your finger and switch between the different screens, it is still <strong>is not finished implementing <\/strong>and ESP Easy does not get those clicks. I encourage you to move forward here and share your progress in the Telegram group so that other users can benefit from it.<\/p>\n<div class=\"essb_break_scroll\"><\/div>","protected":false},"excerpt":{"rendered":"<p>Add a beautiful touch screen to your eMariete Home CO2 Meter to take your project to the next level! Get an easy-to-configure Nextion smart display with graphics, buttons and an integrated microprocessor. Design your own interface without a lot of technical knowledge - show off what you've created and amaze your friends and family!<\/p>","protected":false},"author":1,"featured_media":237696,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","_lmt_disableupdate":"yes","_lmt_disable":"no","footnotes":""},"categories":[12,16,17],"tags":[26,28,41],"class_list":["post-237685","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-co2-easy","category-medidor-co2","category-proyectos-arduino","tag-espeasy","tag-esp8266","tag-nodemcu"],"modified_by":"Mariete","uagb_featured_image_src":{"full":["https:\/\/emariete.com\/wp-content\/uploads\/2021\/02\/Pantalla-tactil-a-color-para-el-medidor-de-CO\u2082-\u00a1Wow.png",1080,608,false],"thumbnail":["https:\/\/emariete.com\/wp-content\/uploads\/2021\/02\/Pantalla-tactil-a-color-para-el-medidor-de-CO\u2082-\u00a1Wow-150x150.png",150,150,true],"medium":["https:\/\/emariete.com\/wp-content\/uploads\/2021\/02\/Pantalla-tactil-a-color-para-el-medidor-de-CO\u2082-\u00a1Wow-300x169.png",300,169,true],"medium_large":["https:\/\/emariete.com\/wp-content\/uploads\/2021\/02\/Pantalla-tactil-a-color-para-el-medidor-de-CO\u2082-\u00a1Wow-768x432.png",768,432,true],"large":["https:\/\/emariete.com\/wp-content\/uploads\/2021\/02\/Pantalla-tactil-a-color-para-el-medidor-de-CO\u2082-\u00a1Wow-1024x576.png",1024,576,true],"1536x1536":["https:\/\/emariete.com\/wp-content\/uploads\/2021\/02\/Pantalla-tactil-a-color-para-el-medidor-de-CO\u2082-\u00a1Wow.png",1080,608,false],"2048x2048":["https:\/\/emariete.com\/wp-content\/uploads\/2021\/02\/Pantalla-tactil-a-color-para-el-medidor-de-CO\u2082-\u00a1Wow.png",1080,608,false],"trp-custom-language-flag":["https:\/\/emariete.com\/wp-content\/uploads\/2021\/02\/Pantalla-tactil-a-color-para-el-medidor-de-CO\u2082-\u00a1Wow.png",18,10,false]},"uagb_author_info":{"display_name":"Mariete","author_link":"https:\/\/emariete.com\/en\/author\/admin_xlyz052h\/"},"uagb_comment_info":6,"uagb_excerpt":"\u00a1A\u00f1ade una bonita pantalla t\u00e1ctil a tu Medidor de CO2 casero de eMariete para llevar tu proyecto a otro nivel! Obt\u00e9n una pantalla inteligente Nextion f\u00e1cil de configurar, con gr\u00e1ficos, botones y un microprocesador integrado. Dise\u00f1a tu propia interfaz sin grandes conocimientos t\u00e9cnicos. \u00a1Ense\u00f1a lo que has creado y sorprende a los tuyos!","_links":{"self":[{"href":"https:\/\/emariete.com\/en\/wp-json\/wp\/v2\/posts\/237685","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/emariete.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/emariete.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/emariete.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/emariete.com\/en\/wp-json\/wp\/v2\/comments?post=237685"}],"version-history":[{"count":1,"href":"https:\/\/emariete.com\/en\/wp-json\/wp\/v2\/posts\/237685\/revisions"}],"predecessor-version":[{"id":241541,"href":"https:\/\/emariete.com\/en\/wp-json\/wp\/v2\/posts\/237685\/revisions\/241541"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/emariete.com\/en\/wp-json\/wp\/v2\/media\/237696"}],"wp:attachment":[{"href":"https:\/\/emariete.com\/en\/wp-json\/wp\/v2\/media?parent=237685"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/emariete.com\/en\/wp-json\/wp\/v2\/categories?post=237685"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/emariete.com\/en\/wp-json\/wp\/v2\/tags?post=237685"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}