Unify and improve the existing web pages

[melkati]

Currently there are several independent web pages (such as the main index.html page, with the measurements, or the preferences.html preferences page). There is no navigation between them. Moreover, these pages do not share CSS styles and color variables are not used everywhere.

The aim is to unify all this, to create a navigation system that is easy to extend and maintain, and to unify the CSS styles, improving them.

As with most new features, the tasks necessary to implement this are (open to change):

The tasks necessary are (open to change):

• [x] Define objetives and implementation
• [x] Unify and clean existing CSS, using color variables everywhere
• [x] Implement navigation system
• [x] Add data validation and sanity checks to configuration form
• [x] Dependencies in preferences page (MQTT needs WiFi to activate)
• [x] New option to show/hide MQTT sending in serial console
• [ ] Improve existing pages and add new
  • [x] Add advanced settings
  • [ ] Add calibration page
  • [ ] Add charts page
  • [x] Add backup and restore of settings on preferences page
  • [x] Add Captive Portal Preferences #
• [x] In deep testing and debugging in all environments
• [ ] Documentation for the web pages

[hapklaar]

Could you also include the possibility to custom calibrate the CO2 sensor using web or other remote protocol? I haven't been able to find how to 'calibrate by custom ppm' other than by serial connection, which is a bit cumbersome when wanting to calibrate to current outside values (421ppm).

[melkati]

Could you also include the possibility to custom calibrate the CO2 sensor using web or other remote protocol? I haven't been able to find how to 'calibrate by custom ppm' other than by serial connection, which is a bit cumbersome when wanting to calibrate to current outside values (421ppm).

Once the new web system is ready, we will include new options, including the calibration options.

While it gets ready, you already have some options to calibrate the CO2 sensor remotely and locally.

• You can do it from the menu on display. Just go to the calibration menu, set the "Custom Cal" to 421ppm and select "Calibrate at custom ppm". Done.
• You can do it via the http interface. Load in your internet browser the URL: http://CO2_GADGET_IP/settings?CalibrateCO2=421
• You can do it via MQTT by sending a message with the topic rootTopic/calibration and a number between 400 and 2000 in the Payload (421 for example) you can instruct CO2 Gadget to calibrate the sensor to that concentration. https://emariete.com/en/co2-meter-gadget/#Recepcion_de_comandos_por_MQTT

I hope this meets your needs. If you need any support with this, please open a new issue to keep this one focused on the web pages improvement topic.

[melkati]

A basic navigation bar has been implemented. You don't have to type and remember URLs anymore! Added tool tips. for help. Add better sanitize and data checks. Implemented status page. Implemented OTA page.