Air quality. Data output to Monitor

[cannca]

Hi all. I have mounted an air quality sensor with an ESP8266 and a senseair s8.
Everything works perfect.

Now I ask how I could get the values ​​that it gives to put it on a monitor and make it look like a commercial one. Now I see you entering ESP.

Excuse me for my English, I use a translator.

[TD-er]

What kind of "monitor" do you mean? I am asking because you mention you are using a translator, so it could also mean "display".

We do have support for several displays, like OLED 128x64 small displays or 20x2 or 20x4 character LCD displays.
We also support some small TFT graphical displays.

Or do you mean to fetch the data from another computer?

[cannca]

What I want is to show the data through a screen / monitor of all the life with VGA output.

I think it can be done by displaying the data on a web page, but the problem is that I don't know how to do it.

Something like this, which is where I got the project data, but it is incomplete and does not show how to do it.
The idea is that it shows the C02, without having to be accessing ESP all the time.

[TD-er]

The ESP itself doesn't have a VGA or HDMI output, so you cannot connect a standard computer monitor to it.

You can do several other things:
- Attach one of the many supported display modules to the ESP.
- Create a dashboard file and upload it to the ESP.

The last option (with the dashboard file) may help you to format a webpage served from the ESP, which can be shown on any device with a browser (e.g. the tablet in your photo)

There is a basic example of such a dashboard.esp file on the wiki, and there are some topics here on the forum with examples made by others.
For example: viewtopic.php?f=6&t=8811&p=55560&hilit= ... esp#p55530

[cannca]

Exactly, I know that it could not be connected as a traditional monitor.

What I want is the second option, create a panel.
The information you have already seen that would be basic, a logo (or without it)
Some tutorial to follow and help me do it.

[chromo23]

i also did a more individual page. feel free to use the provided file
viewtopic.php?f=6&t=8792&p=55398

i always wanted to make some kind of an how to but since my "condition" got worse i sadly try to avoid computers as much as i can.
but if you have questions i´ll try to answer them even if it takes some time.

Edit: also here another one i made for somebody else
viewtopic.php?f=4&t=8806&p=55546

edit2: I really can recommend this for starters (it helped me a lot): https://www.w3schools.com/

[cannca]

I see a .css is used
The problem that I don't know how to build it. The ones I see are more complex and with buttons / functions.

I just want him to show me a logo and the CO2 ppm value, if it shows the temperature and humidity value, it is ok, but if not it is also perfect.
As it is in the photo that I put as an example.

[chromo23]

Send me your json data and i´ll make you a simple html page with the sensordata.
Follow this url scheme

Code: Select all

http://<espeasyip>/json?view=sensorupdate

and copy n paste the content here

[cannca]

{"Sensors":[
{
"TaskValues": [
{"ValueNumber":1,
"Name":"PPM",
"NrDecimals":0,
"Value":2015
},
{"ValueNumber":2,
"Name":"TEMP",
"NrDecimals":0,
"Value":28
}],
"TaskEnabled":"true",
"TaskNumber":1
}
],
"TTL":60000
}


This is what you want?

[chromo23]

yes

[chromo23]

Here you go.
It is a simple html page fetching data via json and refreshing it every 10seconds.
Best viewed with the additional css i provided you.
(its the automode css. so it shows the color scheme depending on your systems color mode but i can also provide you with light or dark schemes only.)
upload both files to your device: Tools > File Browser > Upload

you can access the html file like this

Code: Select all

http://<espeasyip>/co2.html

or if you rename it to index.html simply by entering the ip or name

Code: Select all

http://<espeasyip>

EDIT: If you use the page as index.html you will loose the ability to use the main tab in espeasy. it will bring you directly to the page. also the reboot button will not work anymore. this can be done by entering reboot in the command input field in the tools tab

The styling you have to do by yourself. (Most webbrowsers have a developer mode when viewing a page where you can make changes in the styling instantly without altering the file itself.)

This is how it supposed to look either in dark or in light mode:

Bildschirmfoto 2022-01-04 um 12.46.13.png (21.85 KiB) Viewed 9952 times

Bildschirmfoto 2022-01-04 um 12.45.30.png (23.08 KiB) Viewed 9952 times

EDIT2: ..forgot to remove a lot of unnecessary styling in the html file...

co2.html_new.zip

(4.21 KiB) Downloaded 222 times

[cannca]

Thanks for the work, I'll see if I can mount it