-->
Page 1 of 1

ECOSTAT2 - With Multiple Sensors, Html, CSS, Dropdowns

PostPosted: Wed Sep 14, 2016 8:48 pm
by joeman2116
Thanks to lots of help from the forum, Mike, forlotto, Electroguard, Rotohammer and others.

Here is the Ecostat2
The hardware is an ecoplug by kab which has been modified and reprogramed with a new esp8266.
The 2 DS18B20 digital thermometers provides 9-bit to 12-bit precision. Adding many more sensors is very easy.

The program provides examples on using html, centering, mark and others.
Dropdown list
All with enhanced appearance using css.


The software in general, provides the user the choice to monitor for a Toohot or Toocold condition and turn on or off a device (relay - fan etc)

The code is not pretty but works well and I invite anyone to help make it better, more features etc....
Its intent is to provide a foundation for real world examples. I hope to continue to addon features .
Maybe some buttons to call up other esp modules or udp stuff to control other slave modules

Enjoy
Joe

Code: Select all'ESPBASIC V3 A42 ECOSTATcss79 SPECIAL FOR ECHOPLUG with slider DUAL TEMP
'DB1820S Temp Sensor Data PIN IS D4 
'Pin D2 for led or relay output inside' forecoplug relay
'Pin D5 for led or relay output outside

memclear
cls
let tf = 0
let curr = 0
let outc = 0 'for second temp sensor
let statmode = "TOOCOLD"
setp = 19
settemp = 19
let stat = "ON"
let statout = "ON"
let setpout = 19

'cssclass "button", "background-color: #99e6e6;"
cssclass "align-self: center;"
css "test1.css"
wprint "<head>"
wprint "<meta http-equiv='refresh'content='5;URL=/input?'>"
wprint "</head>"
wprint "<body bgcolor='#527a7a'>"
wprint "<table align='center' width='102' bgcolor='lightblue' border='4' cellpadding='1'>"
wprint "<td>"
button "MODE", [NIL]
dropdown statmode, "TOOCOLD,TOOHOT"
cssid htmlid(), "background-color:#008ae6;text-align: center;display:block;width:105px"
'wprint "<br>"
wprint "</td>"
wprint "<th</th></table><br>"
wprint "<table align='center' width='170' bgcolor='LIGHTblue' border='2' cellpadding='1'>"
wprint "<td>"
button "FAN IP E79", [NIL]
cssid htmlid(), "background-color:LIGHTGREEN;text-align: center;display:block;width:170px"
wprint "<b>"
wprint "<center>"
wprint "<mark>" & htmlvar(stat) & "</mark>"
wprint "</center>"
wprint "</b>"
wprint "</td>"
wprint "<th</th></table>"
wprint "<br>"
wprint "<table align='center' width='192' bgcolor='lightblue' border='4' cellpadding='3'>"
wprint "<td>"
wprint "<center>"
wprint "Dropdown"
dropdown setp, "15,18,19,21,22,23,25,26,27,28,30,32,35,38"
wprint "</center>"
Button "<B>Trigger Level</B>",[setpt]
textbox setp
cssid htmlid(), "background-color:LIGHTGREEN;text-align: center;display:block;width:170px"
wprint "<center> Current Trigger Level </center>"
wprint "<th</th></table><br>"
wprint "<br>"
wprint "<table align='center' width='200' bgcolor='LIGHTBLUE' border='2' cellpadding='2'>"
wprint "<td>"
button "VTEMP-C",[NIL]
cssid htmlid(), "background-color:LIGHTGREEN;text-align: center;display:block;width:150px"
wprint "<b>"
wprint "<center>"
wprint "<mark>" & htmlvar(curr) & "</mark>"
wprint "</center>"
wprint "</b>"
wprint "</td>"
wprint "<td>"
wprint "<b>"
button "VTEMP-F",[NIL]
cssid htmlid(), "background-color:LIGHTGREEN;text-align: center;display:block;width:150px"
wprint "<center>"
wprint "<mark>" & htmlvar(tfout) & "</mark>"
wprint "</center>"
wprint "</b>"
wprint "</td>"
wprint "<th</th></table><br>"
wprint "<table align='center' width='200' bgcolor='LIGHTBLUE' border='2' cellpadding='2'>"
wprint "<td>"
button "ROOM TEMP-C",[NIL]
cssid htmlid(), "background-color:LIGHTGREEN;text-align: center;display:block;width:200px"
wprint "<b>"
wprint "<center>"
wprint "<mark>" & htmlvar(outc) & "</mark>"
wprint "</center>"
wprint "</b>"
wprint "</td>"
wprint "<th</th></table><br>"

timer 5000, [refreshcold]
wait

[on2] ' FIRST SENSOR DB1820S ---------
io(po,d2,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,d2,0)
let stat = "OFF"
wait

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

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

[refreshcold]
if statmode == "TOOHOT" then goto [refreshhot]
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
[refreshhot]
if statmode == "COLD" then goto [refreshhot]
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,d2,1)
let statout = "ON"
wait

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

[NIL]
wait




CSS:CODE

Code: Select allbutton, 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: 1px 1px 3px #666666;
  cursor: pointer;
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;
}





Re: ECOSTAT2 - With Multiple Sensors, Html, CSS, Dropdowns

PostPosted: Thu Sep 15, 2016 10:28 pm
by forlotto
Nicely done ;) glad to help you at least with the formatting of your program ... Had I had more time I would not have rushed through the other parts.

But I thank you much for sharing this as public domain good work a nice example!

Curious to know if you actually run this and if you do would you mind just shooting a video of operation as it would help others understand the intent and purpose while it seems logical and straight forward for me the intent or purpose may not be as easily clear to others aside from that action always seems to speak better than words.

Take Care Joeman

-forlotto

Re: ECOSTAT2 - With Multiple Sensors, Html, CSS, Dropdowns

PostPosted: Sat Dec 24, 2016 10:17 am
by heckler
joeman,
Thanks for sharing your code!

Can you please explain what the second "css code" file is for? Is it supposed to be saved to the esp also??

thanks
dwight

Re: ECOSTAT2 - With Multiple Sensors, Html, CSS, Dropdowns

PostPosted: Mon Feb 27, 2017 8:10 pm
by joeman2116
heckler wrote:joeman,
Thanks for sharing your code!

Can you please explain what the second "css code" file is for? Is it supposed to be saved to the esp also??

thanks
dwight


Dwight,

The second code file - test1.css is saved in the same directory as default.bas
It purpose is to provide the various gradient and button format - makes things look pretty.
Without the css file the presentation is very plain looking. It will work without it but is provides a much better appearance....

Joe :D