{"id":243035,"date":"2026-06-22T15:02:15","date_gmt":"2026-06-22T13:02:15","guid":{"rendered":"https:\/\/emariete.com\/co2-gadget-guia-web\/"},"modified":"2026-07-09T16:12:54","modified_gmt":"2026-07-09T16:12:54","slug":"co2-gadget-web-guide","status":"publish","type":"post","link":"https:\/\/emariete.com\/en\/co2-gadget-guia-web\/","title":{"rendered":"CO2 Gadget Web Interface Guide: Dark Mode, Charts and Screenshots"},"content":{"rendered":"<p class=\"wp-block-paragraph\">The CO2 Gadget web interface allows you to configure, monitor and update your meter from any browser, without having to install anything on your computer. Access it by typing <code>http:\/\/CO2-Gadget.local<\/code> in the address bar, or directly to the device\u2019s IP address if you prefer.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The design follows the Apple style: an automatic dark background (which adapts to your system\u2019s theme), clean typography and smooth animations. The top menu contains shortcuts to Home and Charts.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/emariete.com\/wp-content\/uploads\/2026\/07\/co2_web_home-1.png\" alt=\"CO\u2082 Gadget \u2013 Main dashboard displaying CO\u2082, temperature and humidity readings\" \/><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\">Navigation<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The top navigation bar has two sections:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\ud83c\udfe0 Home<\/strong> \u2014 home page showing real-time indicators<\/li>\n<li><strong>\ud83d\udcc8 Charts<\/strong> \u2014 direct access to historical charts<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">The icons on the right are:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u24d8<\/strong> \u2014 device information and versions<\/li>\n<li><strong>\u2699<\/strong> \u2014 access to preferences (equivalent to \/preferences.html)<\/li>\n<li><strong>\u26f6<\/strong> \u2014 full screen<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Available pages<\/h2>\n\n\n\n<table><thead><tr><th>Page<\/th><th>URL<\/th><th>What it offers<\/th><\/tr><\/thead><tbody>\n<tr><td><strong>Home<\/strong><\/td><td>\/<\/td><td>Real-time dashboard showing the three indicators<\/td><\/tr>\n<tr><td><strong>Charts<\/strong><\/td><td>\/charts.html<\/td><td>Historical data with date filtering and export options<\/td><\/tr>\n<tr><td><strong>Calibration<\/strong><\/td><td>\/calibration.html<\/td><td>Live reading + forced FRC calibration<\/td><\/tr>\n<tr><td><strong>Low Consumption<\/strong><\/td><td>\/low_power.html<\/td><td>Configuring the HIGH_PERFORMANCE and LOW_POWER modes<\/td><\/tr>\n<tr><td><strong>Preferences<\/strong><\/td><td>\/preferences.html<\/td><td>All device settings grouped by section<\/td><\/tr>\n<tr><td><strong>Status<\/strong><\/td><td>\/status.html<\/td><td>Summary of active features, Wi-Fi RSSI and version<\/td><\/tr>\n<tr><td><strong>OTA<\/strong><\/td><td>\/update<\/td><td>Firmware update via the browser<\/td><\/tr>\n<\/tbody><\/table>\n\n\n\n<h2 class=\"wp-block-heading\">1 \u2014 Home (\/)<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The dashboard displays the three indicators in real time, updating automatically:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>CO\u2082<\/strong> \u2014 large on the left. The ring changes colour depending on the level: green (excellent, &lt;800 ppm), orange (moderate) or red (high). Below it, the status is shown in text form (\u00abExcellent\u00bb, \u00abGood\u00bb, etc.)<\/li>\n<li><strong>Temperature<\/strong> \u2014 top right panel. Visible range from 10 \u00b0C to 50 \u00b0C<\/li>\n<li><strong>Humidity<\/strong> \u2014 bottom right-hand panel<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">By default, the readings are updated every 5 seconds. If the sensor is warming up, this is indicated on the dashboard and the readings may be blank or fluctuate rapidly until they stabilise (typically 10\u201315 minutes for an SCD4x).<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">2 \u2014 Charts (\/charts.html)<\/h2>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/emariete.com\/wp-content\/uploads\/2026\/07\/co2_web_charts.png\" alt=\"CO2 Gadget \u2013 Charts with range selector and export function\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Chart.js displays historical CO\u2082 data using a blue line and circular markers. The Y-axis is in ppm; the X-axis is time.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Filter by date range<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Uncheck the box <strong>\u00abDate range\u00bb<\/strong> to view the full history. For a specific period:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Click <strong>\u00abmm\/dd\/yyyy, \u2013:\u2013\u00ab<\/strong> in the \u00abFrom\u00bb field and select the start date and time<\/li>\n<li>Enter the same value in the \u00abTo\u00bb field\u00bb<\/li>\n<li>Click <strong>\u00abApply\u00bb<\/strong><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Export data<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The export buttons generate a file containing all the data visible in the graph:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>CSV<\/strong> \u2014 spreadsheet (date, time, ppm). Ideal for Excel or Google Sheets<\/li>\n<li><strong>JSON<\/strong> \u2014 structured data, useful for scripts or Home Assistant<\/li>\n<li><strong>PNG<\/strong> \u2014 a screenshot of the current graph, ready to share<\/li>\n<li><strong>SVG<\/strong> \u2014 vector, editable in Illustrator or Inkscape<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">3 \u2014 Calibration (\/calibration.html)<\/h2>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/emariete.com\/wp-content\/uploads\/2026\/07\/co2_web_calibration.png\" alt=\"CO2 Gadget \u2013 FRC calibration via your web browser\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">The calibration page has two functions: to read the sensor\u2019s current value in real time, and to perform a forced calibration (FRC).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Apply an FRC calibration<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Open the window and place the meter in fresh air (window open, outdoors, at least 400 ppm of CO\u2082)<\/li>\n<li>Wait 5\u201310 minutes for the reading to stabilise<\/li>\n<li>Enter the reference value in the ppm field (typically <strong>400 ppm<\/strong> (if you\u2019re outdoors)<\/li>\n<li>Click <strong>\u00abCalibrate\u00bb<\/strong><\/li>\n<li>The firmware applies the correction and the sensor then starts to give correct readings<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">It only works with sensors that support FRC: Sensirion SCD30, SCD40 and SCD41. The MH-Z19 and Senseair S8 use 400 ppm calibration (via the menu) or automatic ASC.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">4 \u2014 Low Power (\/low_power.html)<\/h2>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/emariete.com\/wp-content\/uploads\/2026\/07\/co2_web_low_power.png\" alt=\"CO2 Gadget \u2013 Configuring power-saving modes\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">This allows you to switch between the two binary modes available from v0.16.x:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>HIGH_PERFORMANCE (0)<\/strong> \u2014 continuous operation, all radios active, deepest sleep disabled<\/li>\n<li><strong>LOW_POWER (1)<\/strong> \u2014 deep sleep with periodic wake-ups. The interval is set in seconds<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">In LOW_POWER mode, the meter wakes up, takes a reading, sends data via MQTT if configured to do so, and goes back to sleep. This is what enables a battery life of up to 3 months with an 18650 battery.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">5 \u2014 Preferences (\/preferences.html)<\/h2>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/emariete.com\/wp-content\/uploads\/2026\/07\/co2_web_preferences.png\" alt=\"CO2 Gadget \u2013 Device settings\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">It is the most comprehensive page. It contains all the device settings, organised into sections:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Wi-Fi<\/strong> \u2014 SSID, password, static IP address, hostname<\/li>\n<li><strong>MQTT<\/strong> \u2014 broker, topics, username\/password, Discovery prefix<\/li>\n<li><strong>BLE<\/strong> \u2014 activate, BTHome, MyAmbiance<\/li>\n<li><strong>CO\u2082 sensor<\/strong> \u2014 model, calibration, pressure compensation<\/li>\n<li><strong>Outings<\/strong> \u2014 relay, NeoPixel and buzzer settings<\/li>\n<li><strong>Screen<\/strong> \u2014 brightness, dark mode, rotation<\/li>\n<li><strong>Low Power<\/strong> \u2014 sleep mode and settings<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">All changes must be saved (button <strong>\u00abSave\u00bb<\/strong>) and then <strong>\u00abRestart\u00bb<\/strong> so that they are implemented.<\/p>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><a href=\"https:\/\/emariete.com\/wp-content\/uploads\/2026\/07\/co2-gadget-web-dark-mode-status.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"720\" src=\"https:\/\/emariete.com\/wp-content\/uploads\/2026\/07\/co2-gadget-web-dark-mode-status.png\" alt=\"CO2 Gadget web interface in dark mode\" class=\"wp-image-243312\" srcset=\"https:\/\/emariete.com\/wp-content\/uploads\/2026\/07\/co2-gadget-web-dark-mode-status.png 1280w, https:\/\/emariete.com\/wp-content\/uploads\/2026\/07\/co2-gadget-web-dark-mode-status-300x169.png 300w, https:\/\/emariete.com\/wp-content\/uploads\/2026\/07\/co2-gadget-web-dark-mode-status-1024x576.png 1024w, https:\/\/emariete.com\/wp-content\/uploads\/2026\/07\/co2-gadget-web-dark-mode-status-768x432.png 768w, https:\/\/emariete.com\/wp-content\/uploads\/2026\/07\/co2-gadget-web-dark-mode-status-18x10.png 18w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/a><figcaption class=\"wp-element-caption\">Dark mode status panel \u2014 real-time data on CO\u2082, temperature, humidity and communication status<\/figcaption><\/figure>\n<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\">6 \u2014 Status (\/status.html)<\/h2>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/emariete.com\/wp-content\/uploads\/2026\/07\/co2_web_status.png\" alt=\"CO2 Gadget \u2013 Device status\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">A quick summary of what\u2019s up and running:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Feature badges<\/strong> \u2014 indicators showing which wireless connections and functions are active (Wi-Fi, BLE, MQTT, BTHome, etc.)<\/li>\n<li><strong>RSSI<\/strong> \u2014 Wi-Fi signal strength in dBm. Typical values: -30 (excellent), -70 (good), -90 (poor)<\/li>\n<li><strong>Firmware version<\/strong> \u2014 check which version you have installed<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">7 \u2014 OTA (\/update)<\/h2>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/emariete.com\/wp-content\/uploads\/2026\/07\/co2_web_update-2.png\" alt=\"CO2 Gadget \u2013 OTA update\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">It allows you to update the firmware without cables or tools. All you need is the file <code>.bin<\/code> compiled for your board:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Select the file <code>.bin<\/code> from your hard drive<\/li>\n<li>Click <strong>\u00abUpdate\u00bb<\/strong><\/li>\n<li>The device receives the file, checks it and restarts automatically<\/li>\n<li>After the restart, open \/status.html again and check that the version has changed<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">It works with Chromium-based browsers (Chrome, Edge, Brave). If the file is too large or has been named incorrectly, the interface will display an error message before it starts.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Access from outside the home<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">By default, the web interface is only accessible from the local area network (LAN). If you wish to access it from the internet:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>VPN<\/strong> \u2014 the safest option. Connect your mobile to your home network and access the local IP address<\/li>\n<li><strong>Cloudflare Tunnel<\/strong> \u2014 create a free tunnel on cloudflare.com to expose the device without opening any ports on the router<\/li>\n<li><strong>Port forwarding<\/strong> \u2014 \u274c <strong>Not recommended at all.<\/strong> Opening port 80 on the router to the device\u2019s IP address exposes it directly to the internet without any additional layers of protection. If the device does not have a password set, anyone can access all its settings. Always use a VPN or Cloudflare Tunnel.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Password<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">By default, the web interface <strong>has no password<\/strong>. To configure it:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Go to <strong>Preferences \u2192 Wi-Fi<\/strong> and enable the password<\/li>\n<li>Or from the device\u2019s on-screen menu<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">\u26a0\ufe0f Password fields on the website are disabled for security reasons (passwords are transmitted in plain text over the network). If you need to edit it via the website, add <code>?relaxedSecurity=true<\/code> to the URL:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><code>http:\/\/CO2-Gadget.local\/preferences.html?relaxedSecurity=true<\/code><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">TFT screenshot<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The endpoint <code>GET \/screenshot<\/code> Returns a PNG image showing what is currently displayed on the device\u2019s physical screen. Very useful for debugging or documentation:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>curl -o screen.png http:\/\/CO2-Gadget.local\/screenshot<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Not all board models have a TFT display. OLED and E-Ink devices, as well as some TFT displays, do not support this functionality. In such cases, the endpoint returns a message stating that it is not supported. Even on boards with TFT displays, the colours may not be accurate. The screenshot feature is implemented on a best-effort basis: it remains available even if it is not perfect, as it can be useful for debugging.<\/p>\n\n\n\n<hr class=\"wp-block-separator\" \/>\n\n\n\n<p class=\"wp-block-paragraph\"><em>Did you find this helpful? Share this article. Also have a look at the <a href=\"https:\/\/emariete.com\/en\/co2-gadget-guide-menu\/\">Menu Guide<\/a>. Any questions? Ask on the <a href=\"https:\/\/t.me\/emariete_chat\">Telegram group<\/a>.<\/em><\/p>","protected":false},"excerpt":{"rendered":"<p>All the pages of the CO2 Gadget web interface explained: Home, Charts with CSV\/JSON export, FRC Calibration, Low Power, Preferences, Status and OTA.<\/p>","protected":false},"author":1,"featured_media":243265,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","_lmt_disableupdate":"","_lmt_disable":"","footnotes":""},"categories":[13],"tags":[24,71],"class_list":["post-243035","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-co2-gadget","tag-co2-gadget","tag-co2-gadget-guias"],"modified_by":"Bautista","uagb_featured_image_src":{"full":["https:\/\/emariete.com\/wp-content\/uploads\/2026\/07\/Blue_banner_with_white_text_202607050739_5.jpeg",1376,768,false],"thumbnail":["https:\/\/emariete.com\/wp-content\/uploads\/2026\/07\/Blue_banner_with_white_text_202607050739_5-150x150.jpeg",150,150,true],"medium":["https:\/\/emariete.com\/wp-content\/uploads\/2026\/07\/Blue_banner_with_white_text_202607050739_5-300x167.jpeg",300,167,true],"medium_large":["https:\/\/emariete.com\/wp-content\/uploads\/2026\/07\/Blue_banner_with_white_text_202607050739_5-768x429.jpeg",768,429,true],"large":["https:\/\/emariete.com\/wp-content\/uploads\/2026\/07\/Blue_banner_with_white_text_202607050739_5-1024x572.jpeg",1024,572,true],"1536x1536":["https:\/\/emariete.com\/wp-content\/uploads\/2026\/07\/Blue_banner_with_white_text_202607050739_5.jpeg",1376,768,false],"2048x2048":["https:\/\/emariete.com\/wp-content\/uploads\/2026\/07\/Blue_banner_with_white_text_202607050739_5.jpeg",1376,768,false],"trp-custom-language-flag":["https:\/\/emariete.com\/wp-content\/uploads\/2026\/07\/Blue_banner_with_white_text_202607050739_5-18x10.jpeg",18,10,true]},"uagb_author_info":{"display_name":"Mariete","author_link":"https:\/\/emariete.com\/en\/author\/admin_xlyz052h\/"},"uagb_comment_info":0,"uagb_excerpt":"Todas las p\u00e1ginas de la interfaz web de CO2 Gadget explicadas: Inicio, Gr\u00e1ficas con exportaci\u00f3n CSV\/JSON, Calibraci\u00f3n FRC, Bajo Consumo, Preferencias, Estado y OTA.","_links":{"self":[{"href":"https:\/\/emariete.com\/en\/wp-json\/wp\/v2\/posts\/243035","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=243035"}],"version-history":[{"count":21,"href":"https:\/\/emariete.com\/en\/wp-json\/wp\/v2\/posts\/243035\/revisions"}],"predecessor-version":[{"id":243316,"href":"https:\/\/emariete.com\/en\/wp-json\/wp\/v2\/posts\/243035\/revisions\/243316"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/emariete.com\/en\/wp-json\/wp\/v2\/media\/243265"}],"wp:attachment":[{"href":"https:\/\/emariete.com\/en\/wp-json\/wp\/v2\/media?parent=243035"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/emariete.com\/en\/wp-json\/wp\/v2\/categories?post=243035"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/emariete.com\/en\/wp-json\/wp\/v2\/tags?post=243035"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}