It's useless, but it's pretty.
File .bas:
Code: [Local Link Removed for Guests]
' AHT21 temperature/humidity sensor
H1$ = "" : trendH$ = "" ' Humidity: previous value and trend
T1$ = "" : trendT$ = "" ' Temperature: previous value and trend
S$ = ""
S = 30 ' 30 seconds between measurements
interval = S*1000 ' in milliseconds
address = &H38 ' I2C device address
ioBuff.dim(0,3) = &HE1, &H08, &H00 ' Calibrate command
ioBuff.dim(1,3) = &HAC, &H33, &H00 ' Measure command
ioBuff.dim(2,6) ' Read results
I2C.setup 4, 5 ' SDA->GPIO4 (D2) SCL->GPIO5 (D1) for Wemos D1 Mini
'Reset
I2C.begin address
I2C.write &HBA
I2C.end
' Calibrate
I2C.write_ioBuff(0), address, address
pause 500
I2C.read_ioBuff(2), address, address, 1
if ioBuff.read(2, 0) <> 24 then END else gosub measure
onHtmlReload web
lastMeasure = millis
while 1
if millis-lastMeasure >= interval then
lastMeasure = millis
gosub measure
S = 30
endif
S$ = str$(S) + " s"
refresh
pause 1000
S = S - 1
wlog ramfree
wend
END
' -----------------------
web:
cls
cssExternal "/AHT21.css"
a$ = |<center><br>|
a$ = a$ + |<div class="trend"><h2>TEMPERATURE</h2><img class="trend" src="| + trendT$ + |.png"></div>|
a$ = a$ + |<p><img src="thermometer.png">| + textBox$(T$,"temperature") + |</p>|
a$ = a$ + |<div class="trend"><h2>HUMIDITY</h2><img class="trend" src="| + trendH$ + |.png"></div>|
a$ = a$ + |<p><img src="hygrometer.png"> | + textBox$(H$,"humidity") + |</p>|
a$ = a$ + |<div class="trend"><h2>NEXT MEASURE</h2></div>|
a$ = a$ + |<p><img src="reloj.png">| + textBox$(S$,"interval") + |</p>|
html a$
a$ = ""
return
' ------------------------
measure:
I2C.write_ioBuff(1), address, address
pause 100
I2C.read_ioBuff(2), address, address, 6
' Humidity -------------
byte0 = ioBuff.read(2, 1) << 16
byte1 = ioBuff.read(2, 2) << 8
byte2 = ioBuff.read(2, 3)
H = (byte0 OR Byte1 OR byte2) >> 4
H = H * 100 / 1048576
H$ = str$(H, "%2.1f")+ " %"
H$ = replace$(H$, ".", ",")
' Temperature ----------
byte3 = (ioBuff.read(2, 3) AND &H0F) << 16
byte4 = ioBuff.read(2, 4) << 8
byte5 = ioBuff.read(2, 5)
T = (byte3 OR byte4) OR byte5
T = ((T*200) / 1048576) - 50
T$ = str$(T, "%2.1f") + " °C"
T$ = replace$(T$, ".", ",")
' Trend icon -----------
if H$<H1$ then trendH$ = "down"
if H$>H1$ then trendH$ = "up"
if H$=H1$ then trendH$ = "equal"
H1$ = H$
if T$<T1$ then trendT$ = "down"
if T$>T1$ then trendT$ = "up"
if T$=T1$ then trendT$ = "equal"
T1$ = T$
gosub web
return
Code: [Local Link Removed for Guests]
* {
margin: 0px;
padding:0px;
font-family: Verdana;
font-size: 38px;
font-weight: 700;
}
p {
display: flex;
justify-content: center;
align-items: center;
height: 140px;
max-width: 480px;
margin-bottom: 20px;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
background-color: #EEE;
}
img {float:left;}
input {
border: none;
width: 180px;
text-align: center;
background-color: #EEE;
}
#interval {color: black;}
#humidity {color :blue;}
#temperature {color :red;}
h2{color: green;}
.trend {
display:flex;
justify-content: center;
align-items: center;
height: 70px;
max-width: 580px;
}
.trend img {
float: right;
width: 50px;
height: 50px;
margin-left: 15px;
}
@media only screen and (max-width: 600px) {
body {background-color: lightblue;}
p {max-width: 320px; max-height: 90px;}
input {max-width: 150px;}
img {width: 90px; height: 90px;}
}