ESP8266 Community Forum

Posted: **Sun Sep 11, 2016 10:16 pm**

Code is crude but works fine.

Need help with some code to center my temp variables within the html text boxes??

Thanks Joe

CODE

'ESPBASIC V3 A44 ECOSTATcss77 dual statmode
'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
let statmode = "TOOHOT"
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='5'>"
wprint "<td>"
button "MODE", [NIL]
'html |<div style="position:absolute;top:100; center;"> Some text </div>|
dropdown statmode, "TOOCOLD,TOOHOT"
cssid htmlid(), "background-color:#008ae6;text-align: center;display:block;width:102px"
wprint "<br>"
wprint "</td>"
wprint "<th</th></table><br>"

wprint "<table align='center' width='192' bgcolor='LIGHTblue' border='4' cellpadding='3'>"
wprint "<td>"
button "FAN IP 77", [NIL]
'wprint "<b>A/C ASSIST Fan-<b/>"
wprint "<b>"
wprint "<mark>"
wprint htmlvar(stat)
wprint "</mark>"
wprint "</b>"
wprint "<br>"
wprint "</td>"
wprint "<th</th></table>"
wprint "<br>"
wprint "<table align='center' width='192' bgcolor='lightblue' border='4' cellpadding='3'>"
wprint "<td>"
wprint "Dropdown"
dropdown setp, "15,19,21,22,23,25,26,27,28,30,32,35,38"
wprint "List"
Button "<B>Trigger Level</B>",[setpt]
textbox setp
cssid htmlid(), "background-color:LIGHTGREEN;text-align: center;display:block;width:170px"

wprint "Current Trigger Level"
wprint "<th</th></table><br>"
wprint "<br>"

wprint "<table align='center' width='80' bgcolor='LIGHTBLUE' border='1' cellpadding='1'>"
wprint "<td>"
button "TEMP",[NIL]
wprint "<b>"
wprint "<mark>"
wprint htmlvar(curr)
'cssid htmlid(), "background-color:YELLOW;text-align: center;display:block;width:90px"
wprint "---(C)"
wprint "</mark>"
wprint "</b>"
wprint "</td>"
wprint "<td>"
wprint "<b>"
button "TEMP",[NIL]
wprint "<mark>"
wprint htmlvar(tfout)
wprint "---(F)"
wprint "</mark>"
wprint "</b>"
wprint "</td>"
wprint "<th</th></table><br>"

timer 4000, [refreshcold]
wait
[on2] ' FIRST SENSOR DB1820S ---------
io(po,d5,1)
let stat = "-ON"
wait

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

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

if statmode == "TOOHOT" then goto [refreshhot]
'cssid htmlid(), "background-color:#29a3a3;text-align: center;display:block;width:95px"
'cssid htmlid(), "background-color:#29a3a3;text-align: center;width:254px"
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]
'cssid htmlid(), "background-color:orange;text-align: center;display:block;width:254px"
'cssid htmlid(), "background-color:orange;text-align: center;width:95px"
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

[NIL]
wait

test1.css file:

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: 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;
}

Posted: **Sun Sep 11, 2016 11:28 pm**

Try this and see what you get.

Code: Select all

'ESPBASIC V3 A44 ECOSTATcss77 dual statmode
'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
let statmode = "TOOHOT"
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='5'>"
wprint "<td>"
button "MODE", [NIL]
'html |<div style="position:absolute;top:100; center;"> Some text </div>|
dropdown statmode, "TOOCOLD,TOOHOT"
cssid htmlid(), "background-color:#008ae6;text-align: center;display:block;width:102px"
wprint "<br>"
wprint "</td>"
wprint "<th</th></table><br>"

wprint "<table align='center' width='192' bgcolor='LIGHTblue' border='4' cellpadding='3'>"
wprint "<td>"
button "FAN IP 77", [NIL]
'wprint "<b>A/C ASSIST Fan-<b/>"
wprint "<b>"
wprint "<mark>"
wprint "  " & htmlvar(stat)
wprint "</mark>"
wprint "</b>"
wprint "<br>"
wprint "</td>"
wprint "<th</th></table>"
wprint "<br>"
wprint "<table align='center' width='192' bgcolor='lightblue' border='4' cellpadding='3'>"
wprint "<td>"
wprint "  Dropdown "
dropdown setp, "15,19,21,22,23,25,26,27,28,30,32,35,38"
wprint "List"
Button "<B>Trigger Level</B>",[setpt]
textbox setp
cssid htmlid(), "background-color:LIGHTGREEN;text-align: center;display:block;width:170px"

wprint "   Current Trigger Level"
wprint "<th</th></table><br>"
wprint "<br>"

wprint "<table align='center' width='80' bgcolor='LIGHTBLUE' border='1' cellpadding='1'>"
wprint "<td>"
button "TEMP",[NIL]
wprint "<b>"
wprint "<mark>"
wprint "  " & htmlvar(curr)
'cssid htmlid(), "background-color:YELLOW;text-align: center;display:block;width:90px"
wprint "---(C)"
wprint "</mark>"
wprint "</b>"
wprint "</td>"
wprint "<td>"
wprint "<b>"
button "TEMP",[NIL]
wprint "<mark>"
wprint "  " & htmlvar(tfout)
wprint "---(F)"
wprint "</mark>"
wprint "</b>"
wprint "</td>"
wprint "<th</th></table><br>"

timer 4000, [refreshcold]
wait
[on2] ' FIRST SENSOR DB1820S ---------
io(po,d5,1)
let stat = "-ON"
wait

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

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

if statmode == "TOOHOT" then goto [refreshhot]
'cssid htmlid(), "background-color:#29a3a3;text-align: center;display:block;width:95px"
'cssid htmlid(), "background-color:#29a3a3;text-align: center;width:254px"
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]
'cssid htmlid(), "background-color:orange;text-align: center;display:block;width:254px"
'cssid htmlid(), "background-color:orange;text-align: center;width:95px"
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

[NIL]
wait

Posted: **Mon Sep 12, 2016 7:25 am**

forlotto,

I tried the code but no change- variables such as temperature are still not centered.
(note) I edited the first post, just added the css file- forgot it on the original post.

--------------------------quote="forlotto"]Try this and see what you get.

Code: Select all

'ESPBASIC V3 A44 ECOSTATcss77 dual statmode
'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
let statmode = "TOOHOT"
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='5'>"
wprint "<td>"
button "MODE", [NIL]
'html |<div style="position:absolute;top:100; center;"> Some text </div>|
dropdown statmode, "TOOCOLD,TOOHOT"
cssid htmlid(), "background-color:#008ae6;text-align: center;display:block;width:102px"
wprint "<br>"
wprint "</td>"
wprint "<th</th></table><br>"

wprint "<table align='center' width='192' bgcolor='LIGHTblue' border='4' cellpadding='3'>"
wprint "<td>"
button "FAN IP 77", [NIL]
'wprint "<b>A/C ASSIST Fan-<b/>"
wprint "<b>"
wprint "<mark>"
wprint "  " & htmlvar(stat)
wprint "</mark>"
wprint "</b>"
wprint "<br>"
wprint "</td>"
wprint "<th</th></table>"
wprint "<br>"
wprint "<table align='center' width='192' bgcolor='lightblue' border='4' cellpadding='3'>"
wprint "<td>"
wprint "  Dropdown "
dropdown setp, "15,19,21,22,23,25,26,27,28,30,32,35,38"
wprint "List"
Button "<B>Trigger Level</B>",[setpt]
textbox setp
cssid htmlid(), "background-color:LIGHTGREEN;text-align: center;display:block;width:170px"

wprint "   Current Trigger Level"
wprint "<th</th></table><br>"
wprint "<br>"

wprint "<table align='center' width='80' bgcolor='LIGHTBLUE' border='1' cellpadding='1'>"
wprint "<td>"
button "TEMP",[NIL]
wprint "<b>"
wprint "<mark>"
wprint "  " & htmlvar(curr)
'cssid htmlid(), "background-color:YELLOW;text-align: center;display:block;width:90px"
wprint "---(C)"
wprint "</mark>"
wprint "</b>"
wprint "</td>"
wprint "<td>"
wprint "<b>"
button "TEMP",[NIL]
wprint "<mark>"
wprint "  " & htmlvar(tfout)
wprint "---(F)"
wprint "</mark>"
wprint "</b>"
wprint "</td>"
wprint "<th</th></table><br>"

timer 4000, [refreshcold]
wait
[on2] ' FIRST SENSOR DB1820S ---------
io(po,d5,1)
let stat = "-ON"
wait

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

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

if statmode == "TOOHOT" then goto [refreshhot]
'cssid htmlid(), "background-color:#29a3a3;text-align: center;display:block;width:95px"
'cssid htmlid(), "background-color:#29a3a3;text-align: center;width:254px"
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]
'cssid htmlid(), "background-color:orange;text-align: center;display:block;width:254px"
'cssid htmlid(), "background-color:orange;text-align: center;width:95px"
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

[NIL]
wait

[/quote]

Posted: **Mon Sep 12, 2016 9:31 pm**

Hrmmm odd I can usually use spacing to shore things up in my code although I have not used CSS per say the css to me looks as if it shouldn't have much to do with the text you talk of so no need for inclusion.

I guess I will have you attempt one more thing than I could suggest possibly using some form of text like an underscore to make it look more centered at the beginning or get help from someone a bit more in tune with alignment myself possibly as I said it is mighty strange that spaces would not show. One other thing you could try is &nbsp or posssibly enlarge the text just a hair so it stretches the full size under your buttons maybe.

One last shot at it give it a shot hope it works dunno to be honest at this point but ez to copy paste and run.

Code: Select all

'ESPBASIC V3 A44 ECOSTATcss77 dual statmode
'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
let statmode = "TOOHOT"
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='5'>"
wprint "<td>"
button "MODE", [NIL]
'html |<div style="position:absolute;top:100; center;"> Some text </div>|
dropdown statmode, "TOOCOLD,TOOHOT"
cssid htmlid(), "background-color:#008ae6;text-align: center;display:block;width:102px"
wprint "<br>"
wprint "</td>"
wprint "<th</th></table><br>"

wprint "<table align='center' width='192' bgcolor='LIGHTblue' border='4' cellpadding='3'>"
wprint "<td>"
button "FAN IP 77", [NIL]
'wprint "<b>A/C ASSIST Fan-<b/>"
wprint "<b>"
wprint "<mark>"
wprint "<center>" & htmlvar(stat) & "</center>"
wprint "</mark>"
wprint "</b>"
wprint "<br>"
wprint "</td>"
wprint "<th</th></table>"
wprint "<br>"
wprint "<table align='center' width='192' bgcolor='lightblue' border='4' cellpadding='3'>"
wprint "<td>"
wprint "  Dropdown "
dropdown setp, "15,19,21,22,23,25,26,27,28,30,32,35,38"
wprint "List"
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='80' bgcolor='LIGHTBLUE' border='1' cellpadding='1'>"
wprint "<td>"
button "TEMP",[NIL]
wprint "<b>"
wprint "<mark>"
wprint "<center>" & htmlvar(curr) & "</center>"
'cssid htmlid(), "background-color:YELLOW;text-align: center;display:block;width:90px"
wprint "---(C)"
wprint "</mark>"
wprint "</b>"
wprint "</td>"
wprint "<td>"
wprint "<b>"
button "TEMP",[NIL]
wprint "<mark>"
wprint "<center>" & htmlvar(tfout) & "</center>"
wprint "---(F)"
wprint "</mark>"
wprint "</b>"
wprint "</td>"
wprint "<th</th></table><br>"

timer 4000, [refreshcold]
wait
[on2] ' FIRST SENSOR DB1820S ---------
io(po,d5,1)
let stat = "-ON"
wait

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

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

if statmode == "TOOHOT" then goto [refreshhot]
'cssid htmlid(), "background-color:#29a3a3;text-align: center;display:block;width:95px"
'cssid htmlid(), "background-color:#29a3a3;text-align: center;width:254px"
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]
'cssid htmlid(), "background-color:orange;text-align: center;display:block;width:254px"
'cssid htmlid(), "background-color:orange;text-align: center;width:95px"
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

[NIL]
wait

ESP8266 Community Forum

ECOSTAT -Updtated thermostat Need help to Center Variables

ECOSTAT -Updtated thermostat Need help to Center Variables

Re: ECOSTAT -Updtated thermostat Need help to Center Variab

Re: ECOSTAT -Updtated thermostat Need help to Center Variab

Re: ECOSTAT -Updtated thermostat Need help to Center Variab