Thermostat Control with HTML and CSS - V3 A41

Post about your Basic project here

Moderator: Mmiscool

 Reply

User avatar

Thermostat Control with HTML and CSS - V3 A41

By joeman2116
- Mon Aug 22, 2016 10:26 pm #53634 'ESPBASIC V3 A41 ECOSTAT css
'DB1820S Temp Sensor Data PIN IS D4
'Pin D2 for led or relay output inside
'Pin D5 for led or relay output outside

memclear

cls
let tf = 0
let curr = 0
let outc = 0 'for second temp sensor
'int(setp)
setp = 22
settemp = 22
let stat = ON
let statout = ON
let setpout = 22

'cssclass "button", "background-color: #99e6e6;"
cssclass "align-self: center;"
css "test.css"
wprint "<head>"
wprint "<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
wprint "<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
wprint "<meta http-equiv='refresh'content='5;URL=/input?'>"
wprint "</head>"
wprint "<body bgcolor='#527a7a'>"

'wprint "<table align='center' width='150' bgcolor='lightblue' border='6' cellpadding='5'>"
'wprint "<th><b>MASTER Stat B</b></th>"
'wprint "<th</th></table><br>"

wprint "<table align='center' width='180' bgcolor='lightblue' border='4' cellpadding='5'>"
wprint "<td>"
Button "A/C FAN TEST", [fon2]
wprint "</td>"
wprint "<th</th></table><br>"

wprint "<table align='center' width='180' bgcolor='LIGHTblue' border='4' cellpadding='3'>"
wprint "<td>"
wprint "<b>A/C ASSIST Fan <b/>"
wprint "<mark>"
wprint htmlvar(stat)
wprint "</mark>"
wprint "<br>"
wprint "</td>"
wprint "<th</th></table>"
wprint "<br>"

'------------------------------------------------------------------------
wprint "<table align='center' width='254' bgcolor='LIGHTblue' border='5' cellpadding='5'>"
wprint "<td>"
Button "<B>Set A/C ASSIST FAN TEMPERATURE</B>",[setpt]
textbox setp
cssid htmlid(), "background-color:lightblue;text-align: center;display:block;width:254px"
wprint "<th</th></table><br>"
'wprint "<br>"
wprint "<table align='center' width='250' bgcolor='LIGHTBLUE' border='5' cellpadding='6'>"
wprint "<td>"
wprint "<b>A/C VENT TEMP= <b/>"
wprint htmlvar(curr)
wprint "(C)"
wprint "</td>"
wprint "<th</th></table><br>"

wprint "<table align='center' width='250' bgcolor='#00ace6' border='5' cellpadding='5'>"
wprint "<td>"
wprint "<b>A/C VENT TEMP= <b/>"
wprint htmlvar(tfout)
wprint "(F)"
wprint "</td>"
wprint "<th</th></table><br>"
'wprint "<br>"

'wprint "<table align='center' width='60' bgcolor='lightblue' border='4' cellpadding='5'>"
'wprint "<td>"
'Button " exit", [quit]
'wprint "</td>"
'wprint "<th</th></table><br>"
timer 4000, [refresh]
wait


[on2] ' FIRST SENSOR DB1820S ---------
io(po,d5,1)
let stat = "ON"
'udpwrite "192.168.1.213", 5001, "ON" 'SEND UDP COMMAND TO SLAVE 192.168.1.213 RELAY D5 "ON"
wait

[off2] ' FIRST SENSOR DB1820S ---------
io(po,d5,0)
let stat = "OFF"
udpwrite "192.168.1.213", 5001, "OFF"
wait

[fon2] ' TEST FAN ON ----------
io(po,d5,1)
let stat = "ON"
Wait

[setpt]
wprint "<head>"
wprint "<meta http-equiv='refresh' content='5;URL=/input?'>"
wprint "</head>"

Wait

[refresh]
curr = temp(1) 'curr ' read current temperature for device 1 db1820 SECOND SENSOR
outc = temp(0) ' outc ' read current temperature for device 0 db1820 FIRST SENSOR
tf = curr * 9 ' Fahrenheit CONVERSON
tf = tf / 5
tf = tf + 32

tfout = outc * 9
tfout = tfout / 5
tfout = tfout + 32
if curr < setp then goto [on2] else goto [off2] 'FAN ON IF CURRENT TEMP < GREATER THEN SETP
wait

[outcon] ' second db1820s sensor TURN RELAY D5 ON AND STAT ON
io(po,d5,1)
let statout = "ON"
wait

[outcoff] ' second db1820s sensor - TURN RELAY D5 OFF AND STAT OFF
io(po,d5,0)
let statout = "OFF"
wait

[quit]
timer 0
wprint "<a href='/'>Menu</a>"
end



TEST.CSS FILE - need to put this file in /uploads/test.css


button, input[type="button"], input[type="submit"] {
border-top: 1px solid #96d1f8;

background: #0d51b8;
background-image: -webkit-linear-gradient(top, #0d51b8, #048f3c);
background-image: -moz-linear-gradient(top, #0d51b8, #048f3c);
background-image: -ms-linear-gradient(top, #0d51b8, #048f3c);
background-image: -o-linear-gradient(top, #0d51b8, #048f3c);
background-image: linear-gradient(to bottom, #0d51b8, #048f3c);
-webkit-border-radius: 7;
-moz-border-radius: 7;
border-radius: 7px;
text-shadow: 0px 0px 3px #1a031a;
-webkit-box-shadow: 3px 4px 4px #666666;
-moz-box-shadow: 3px 4px 4px #666666;
box-shadow: 3px 4px 4px #666666;
font-family: Arial;
color: #ffffff;
font-size: 20px;
padding: 10px 20px 10px 20px;
border: solid #0c3752 2px;
text-decoration: none;
}

button:hover {
background: #0a4980;
background-image: -webkit-linear-gradient(top, #0a4980, #d95534);
background-image: -moz-linear-gradient(top, #0a4980, #d95534);
background-image: -ms-linear-gradient(top, #0a4980, #d95534);
background-image: -o-linear-gradient(top, #0a4980, #d95534);
background-image: linear-gradient(to bottom, #0a4980, #d95534);
text-decoration: none;
}

Enjoy
Joe
You do not have the required permissions to view the files attached to this post.
 Reply
Return to Projects