{"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":"\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u00bfPara qu\u00e9 poner pantalla t\u00e1ctil a un medidor de CO2?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">En este post, vamos a hablar sobre la nueva y emocionante caracter\u00edstica de un medidor de CO\u2082: la pantalla t\u00e1ctil a color. Con una pantalla t\u00e1ctil a color, los usuarios pueden ver los datos de manera clara y precisa, y interactuar con el dispositivo de manera intuitiva. \u00a1Sigue leyendo para obtener m\u00e1s informaci\u00f3n sobre c\u00f3mo esta caracter\u00edstica puede mejorar tu experiencia con el medidor de CO\u2082!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">No hay duda, <strong>las cosas entran por los ojos<\/strong> y una pantalla t\u00e1ctil en color para nuestro medidor de CO2 casero <strong>lleva el proyecto a otro nivel<\/strong>. \u00bfQui\u00e9n se puede resistir a una bonita pantalla t\u00e1ctil a todo color de un tama\u00f1o m\u00e1s que correcto?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ya tenemos un <strong>medidor de CO\u2082 de calidad, con un mont\u00f3n de funcionalidades y posibilidades de ampliaci\u00f3n, a bajo precio<\/strong>. Ahora toca darle <strong>un toque de lujo<\/strong>. Algo de lo que podemos prescindir, pero <strong>\u00a1qu\u00e9 leche!<\/strong>, vamos a darnos <strong>un capricho<\/strong> para sentirnos orgullosos y tener <strong>algo que, al ense\u00f1\u00e1rselo a nuestros amigos y familia y decirles eso de \u00ablo he hecho yo\u00bb, provoque el efecto \u00a1Wow!<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Aqu\u00ed tenemos a la criatura en cuesti\u00f3n, en una de sus primeras versiones (tranquilo, ya ir\u00e1 mejorando con el tiempo y haci\u00e9ndose m\u00e1s bonita):<\/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>Su instalaci\u00f3n no puede ser m\u00e1s sencilla&#8230;<\/strong> solo conectar cuatro cables, cargar en la tarjeta MicroSD de la pantalla el fichero que te voy a proporcionar m\u00e1s abajo y actualizar y configurar el medidor.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">El secreto est\u00e1 en la elecci\u00f3n de la pantalla: <strong>Una pantalla inteligente Nextion<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Esta pantalla es muy especial (y te la recomiendo para utilizarla en <strong>cualquier otro proyecto<\/strong> que tengas en la que necesites una pantalla).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Lo que hace distinta a esta pantalla sobre las dem\u00e1s es que no se trata de una simple pantalla, sino que <strong>tiene integrado toda la interface de usuario, como gr\u00e1ficos, botones, etc. y cuenta con su propio microprocesador para gestionar todo eso, <\/strong>y nosotros solamente tenemos que decirle qu\u00e9 dato queremos que \u00abpinte\u00bb en determinado sitio o esperar a que la pantalla nos diga \u00abme han pulsado en tal sitio\u00bb.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">La gran ventaja es que <strong>puedes dise\u00f1ar tu propia interface de usuario con herramientas sencillas<\/strong> (yo lo he hecho con PowerPoint) sin necesidad de tener grandes conocimientos t\u00e9cnicos.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">En breve tendr\u00e9 una versi\u00f3n \u00abpresentable\u00bb que podr\u00e1s descargar de aqu\u00ed <strong>con todas las instrucciones, <\/strong>para que puedas incorporarla a tu <em>Medidor de CO2 casero de eMariete<\/em>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">La pantalla que vamos a usar<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Mientras que lo termino, <strong>si quieres comprarla, te recomiendo hacerlo en este enlace de AliExpress,<\/strong> que es exactamente la misma pantalla que yo estoy utilizando (as\u00ed te asegurar\u00e1s de no tener problemas):<\/p>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Si la compras en otro sitio <strong>ten cuidado<\/strong> porque hay una versi\u00f3n id\u00e9ntica, pero en <strong>chino <\/strong>que despu\u00e9s <strong>solo podr\u00e1s usar con el editor en chino<\/strong> (si sabes chino puedes ignorar este comentario \ud83d\ude09).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ya sabes que este art\u00edculo es una ampliaci\u00f3n del \u00abMedidor de CO2 casero de eMariete\u00bb. Si no lo has le\u00eddo, <strong>empieza por aqu\u00ed<\/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\/medidor-casero-co2\/\">Un medidor de CO2 casero con Wifi contra el coronavirus: El 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=\"\u00abUn medidor de CO2 casero con Wifi contra el coronavirus: El CO2 Easy\u00bb \u2014 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\">C\u00f3mo a\u00f1adir una pantalla t\u00e1ctil a tu medidor de CO2<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Para a\u00f1adir la pantalla t\u00e1ctil a tu medidor, necesitar\u00e1s lo siguiente:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>La pantalla Nextion correcta<\/li>\n\n\n\n<li>El fichero que tienes que cargar en la pantalla<\/li>\n\n\n\n<li>Una versi\u00f3n de ESP Easy que soporte la pantalla<\/li>\n\n\n\n<li>Configurar el plugin<\/li>\n\n\n\n<li>A\u00f1adir las reglas que necesites<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Supongo que ya tienes la pantalla <strong>correcta<\/strong>. Es importante que sea <strong>exactamente <\/strong>el mismo modelo para que te funcione el fichero que he preparado. Ten cuidado porque hay <strong>muchos modelos <\/strong>de pantallas Nextion con peque\u00f1as diferencias y podr\u00eda no funcionarte. Te recomiendo que la compres en el enlace que te he puesto antes.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A<strong>qu\u00ed puedes descargar el fichero <a href=\"https:\/\/emariete.com\/wp-content\/uploads\/2021\/03\/Medidor%20CO2.HMI\">HMI para la pantalla Nextion<\/a><\/strong>. Solo tienes que cargarlo con el editor de Nextion en tu pantalla y ajustar las reglas.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ten una cuenta que el plugin de Nextion <strong>no est\u00e1 incluido en el build normal<\/strong> de ESP Easy. Necesitar\u00e1s el build que incluye \u00abTEST\u00bb en el nombre (est\u00e1 en el paquete completo que descargas desde la p\u00e1gina de releases de ESP Easy en GitHub).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Gr\u00e1balo en tu ESP8266 y a\u00f1\u00e1delo como dispositivo en el desplegable de la pesta\u00f1a \u00abDevices\u00bb (Dispositivos):<\/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\">Ahora tienes que<strong> configurar el dispositivo Nextion<\/strong> para que quede de la siguiente manera (pincha en la imagen para verla completa):<\/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\">L\u00f3gicamente, tendr\u00e1s que <strong>cambiar los nombres de dispositivos por los tuyos<\/strong>. Por ejemplo, en la l\u00ednea 1, si tu sensor se llama CO2 y el valor se llama PPM, tendr\u00e1s que poner [CO2#PPM].<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Con esto tu pantalla ya estar\u00eda funcionando y cada 15 segundos (el valor indicado en la configuraci\u00f3n en \u00abInterval\u00bb) los valores se actualizar\u00e1n.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Queda pendiente de implementar la parte t\u00e1ctil y sus reglas, ya que, aunque puedes hacer click con el dedo y cambiar entre las diferentes pantallas, todav\u00eda <strong>no est\u00e1 terminado de implementar <\/strong>y ESP Easy no recibe esos clicks. Te animo a avanzar por aqu\u00ed y compartir en el grupo de Telegram tus avances para que otros usuarios se puedan beneficiar.<\/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}]}}