Air quality. Data output to Monitor

Moderators: grovkillen, Stuntteam, TD-er

Post Reply
Message
Author
cannca
New user
Posts: 7
Joined: 03 Jan 2022, 11:30

Air quality. Data output to Monitor

#1 Post by cannca » 03 Jan 2022, 11:40

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
Core team member
Posts: 8643
Joined: 01 Sep 2017, 22:13
Location: the Netherlands
Contact:

Re: Air quality. Data output to Monitor

#2 Post by TD-er » 03 Jan 2022, 12:37

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
New user
Posts: 7
Joined: 03 Jan 2022, 11:30

Re: Air quality. Data output to Monitor

#3 Post by cannca » 03 Jan 2022, 13:42

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.

Image

TD-er
Core team member
Posts: 8643
Joined: 01 Sep 2017, 22:13
Location: the Netherlands
Contact:

Re: Air quality. Data output to Monitor

#4 Post by TD-er » 03 Jan 2022, 13:58

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
New user
Posts: 7
Joined: 03 Jan 2022, 11:30

Re: Air quality. Data output to Monitor

#5 Post by cannca » 03 Jan 2022, 14:46

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.

User avatar
chromo23
Normal user
Posts: 821
Joined: 10 Sep 2020, 16:02
Location: germany

Re: Air quality. Data output to Monitor

#6 Post by chromo23 » 03 Jan 2022, 17:37

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
New user
Posts: 7
Joined: 03 Jan 2022, 11:30

Re: Air quality. Data output to Monitor

#7 Post by cannca » 03 Jan 2022, 21:27

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.

User avatar
chromo23
Normal user
Posts: 821
Joined: 10 Sep 2020, 16:02
Location: germany

Re: Air quality. Data output to Monitor

#8 Post by chromo23 » 03 Jan 2022, 22:24

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
New user
Posts: 7
Joined: 03 Jan 2022, 11:30

Re: Air quality. Data output to Monitor

#9 Post by cannca » 03 Jan 2022, 23:21

{"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?


User avatar
chromo23
Normal user
Posts: 821
Joined: 10 Sep 2020, 16:02
Location: germany

Re: Air quality. Data output to Monitor

#11 Post by chromo23 » 04 Jan 2022, 12:44

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
Bildschirmfoto 2022-01-04 um 12.46.13.png (21.85 KiB) Viewed 8725 times
Bildschirmfoto 2022-01-04 um 12.45.30.png
Bildschirmfoto 2022-01-04 um 12.45.30.png (23.08 KiB) Viewed 8725 times
EDIT2: ..forgot to remove a lot of unnecessary styling in the html file...
co2.html_new.zip
(4.21 KiB) Downloaded 158 times

cannca
New user
Posts: 7
Joined: 03 Jan 2022, 11:30

Re: Air quality. Data output to Monitor

#12 Post by cannca » 04 Jan 2022, 17:58

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

Post Reply

Who is online

Users browsing this forum: No registered users and 26 guests