- Sun Jan 29, 2017 1:14 pm
#61726
This project started out as a bit of fun trying to get Esp_Basic to use 'Embedded Fonts' via the CSS3 @font-face rule, although after several days of getting nowhere it would appear that (as with the meter web component) Esp_Basics's CSS is not sufficiently compatible. But it still ended up as a bit of fun by installing some downloaded fonts and seeing what might be achievable.
The 'display' fonts used were free downloads from fontsquirrel, but a search for 'free fonts" will give many alternatives sources.
Until Esp_Basic is able to read embedded @font-face fonts on the fly, it is necessary to install new fonts, then re-start the browser for it to recognise the newly installed system fonts (which isn't any great hardship).
I've included several screen dumps so you can see what is achievable without needing to install any fonts yourself.
I've also included a couple of quick 'n' dirty scripts I used for playing around with different appearances. The 'clock' version displays an elapsed timer because my router is isolated from internet time, and the 'temp' version is for giving an idea of what different thermostat temperature displays might look like.
In both cases there are some pre-defined default configuration buttons, plus manual controls underneath.
Don't be surprised if you experience any 'quantum weirdness' with what is displayed. It's not the onset of madness, and don't get fooled into chasing ghosts ... just re-click the previous button and things might well then appear ok, else just browser Back then RUN again. I'm using 1Mb V3 A66 with latest Firefox.
Have fun.
The 'display' fonts used were free downloads from fontsquirrel, but a search for 'free fonts" will give many alternatives sources.
Until Esp_Basic is able to read embedded @font-face fonts on the fly, it is necessary to install new fonts, then re-start the browser for it to recognise the newly installed system fonts (which isn't any great hardship).
I've included several screen dumps so you can see what is achievable without needing to install any fonts yourself.
I've also included a couple of quick 'n' dirty scripts I used for playing around with different appearances. The 'clock' version displays an elapsed timer because my router is isolated from internet time, and the 'temp' version is for giving an idea of what different thermostat temperature displays might look like.
In both cases there are some pre-defined default configuration buttons, plus manual controls underneath.
Don't be surprised if you experience any 'quantum weirdness' with what is displayed. It's not the onset of madness, and don't get fooled into chasing ghosts ... just re-click the previous button and things might well then appear ok, else just browser Back then RUN again. I'm using 1Mb V3 A66 with latest Firefox.
Have fun.
Code: Select all
memclear
'Font Clock displays
'fc = "dimgray"
fc = "gray"
fw = 10
fnt = "Score Board"
tc = "orangered"
bc = "#404040"
br = 50
html |<br><br><br>|
ampm = "am"
hours = 2
mins = 5
secs = 0
dots = ":"
hourtens = 0
mintens = 0
sectens = 5
timer 1000, [tick]
[HOME]
cls
font = fnt
txtcol = tc
bckcol = bc
css1 = "border-width:0px;padding:1px;background-color:transparent;background-color:transparent;color:"&txtcol&";"
dcss = css1 & |width:92%;text-align:right;font-family:"|&font&|";font-size:180px;|
dotcss = css1 & |width:30px;font-family:"Courier new";font-size:60px;padding:1px;text-align:center;|
html | <!DOCTYPE html>|
html |<html>|
html |<head>|
html |<style> |
'html |#digits { background-color: yellow;}|
'html |@font-face { font-family:BPdotsUnicase; src:url(dots.otf);}|
html |@font-face {|
html |font-family: "Score Board"; src: local("Score Board"), url("uploads/scoreboard.ttf"), format("truetype");}|
html |@font-face {font-family:"Dot Matrix";src:local(Dot Matrix), url("uploads/DOTMATRI.TTF"), format("truetype");}|
'html |@font-face {
'html | font-family: Digital-7; src: local(Digital-7), url("/uploads/digital7.ttf"), format("truetype");|
'html | font-size:200px;|
'html |}|
html |</style>|
html |</head>|
html |<body>|
html |<br>|
html |<div style="width:80%;margin:auto;border:|&fw&|px solid |&fc&|;border-radius:|&br&|px;|
html |background-color:| & bckcol & |;">|
html |<table style="width:90%;margin:auto;padding:0;">|
html | <tr style="text-align:center;">|
html | <td>|
textbox hourtens
cssid htmlid(), dcss
html | </td>|
html | <td>|
textbox hours
cssid htmlid(), dcss
html | </td>|
html | <td style="text-align:center;width:26px;">|
textbox dots
cssid htmlid(), dotcss
html | </td>|
html | <td>|
textbox mintens
cssid htmlid(), dcss
html | </td>|
html | <td>|
textbox mins
cssid htmlid(), dcss
html | </td>|
html | <td style="font-family:arial;font-size:26px;text-align:center;padding:3px;color:| & txtcol
html |;"><b>| & ampm & |</b></td>|
html | <td>|
textbox sectens
cssid htmlid(), dcss
html | </td>|
html | <td>|
textbox secs
cssid htmlid(), dcss
html | </td>|
html | </tr>|
html |</table>|
html |</div>|
html |</body>|
html |</html>|
gosub [redo]
wait
end
[tick]
'if dots = ":" then dots = " " else dots = ":"
secs = secs + 1
if secs >9 then
secs = 0
sectens = sectens + 1
if sectens >5 then
sectens = 0
mins = mins + 1
if mins > 9 then
mins = 0
mintens = mintens + 1
if mintens > 5 then
mintens = 0
hours = hours + 1
if hours > 9 then
hours = 0
hourtens = hourtens + 1
if ampm <> " " then
if hourtens = 1 and hours > 2 then
hourtens = 0
hours = 1
endif
if hourtens = 1 and hours = 2 then
end
if ampm = "am" then ampm = "pm" else ampm = "am"
endif
else
if hourtens = 2 and hours > 3 then
hourtens = 0
hours = 0
endif
endif
endif
endif
endif
endif
endif
wait
[redo]
html "<br><br><br><br>"
html |<div style="text-align:center;">|
button "RedLED", [redLED]
html " "
button "YellowLED", [yellowLED]
html " "
button "blueLCD", [blueLCD]
html " "
button "green7", [green7]
html " "
button "LCDclear", [LCDclear]
html " "
button "LCDcyan", [LCDcyan]
html |</div>|
html |<div style="text-align:center;">|
html "<br><br><br><br>Curve "
slider br,0,100
cssid htmlid(), "width:70px"
html ", Font "
dropdown fnt, "Dot Matrix,Digital-7,Digital-7 Italic,Score Board,Ledsitex St,led16sgmnt,Triple Dot Digital-7"
'html ", Font colour "
'dropdown tc, "red,yellow,blue,lime,springgreen,orangered,orange,chartreuse,magenta,cyan,lightslategray,#303030"
'html ", Background colour "
'dropdown bc, "silver,gray,dimgray,lavender,honeydew,paleturquoise,cyan,ghostwhite,whitesmoke,snow,#303030,#404040"
button "Refresh", [HOME]
html |</div>|
'goto [HOME]
return
[LCDclear]
fnt = "Digital-7 italic"
tc = "#606060"
'tc = "cadetblue"
bc = "lavender"
br = 0
goto [HOME]
return
[LCDcyan]
fnt = "Digital-7"
'tc = "#404040"
tc = "navy"
bc = "cyan"
br = 20
goto [HOME]
return
[blueLCD]
fnt = "Digital-7"
tc = "blue"
bc = "ghostwhite"
br = 10
goto [HOME]
return
[yellowLED]
fnt = "Score Board"
tc = "yellow"
bc = "#404040"
br = 100
goto [HOME]
return
[redLED]
fnt = "Score Board"
tc = "orangered"
bc = "#404040"
br = 50
goto [HOME]
[green7]
fnt = "Digital-7 Italic"
tc = "springgreen"
bc = "#303030"
br = 70
goto [HOME]
return
Code: Select all
memclear
'Font Temperature displays
'fc = "dimgray"
fc = "gray"
fw = 1
fnt = "Score Board"
tc = "orangered"
bc = "#404040"
br = 50
html |<br><br><br>|
tval = "22"
sval = 19
deg = "º"
gosub [LCDclear]
[HOME]
cls
font = fnt
txtcol = tc
bckcol = bc
css1 = "border-width:0px;padding:1px;background-color:transparent;color:"&txtcol&";"
dcss = css1 & |width:92%;text-align:right;font-family:"|&font&|";font-size:120px;|
pcss = css1 & |width:20px;font-family:"Courier new";font-size:40px;text-align:left;|
'html | <!DOCTYPE html>|
'html |<html>|
'html |<head>|
'html |</head>|
'html |<body>|
html |<br>|
html |<div style="width:20%;margin:auto;border:|&fw&|px solid |&fc&|;border-radius:|&br&|px;|
html |background-color:| & bckcol & |;">|
html |<table style="width:90%;margin:auto;padding:0;border-width:1px;">|
html | <tr style="text-align:center;border-width:1px;">|
html | <td colspan="2" style="font-family:arial;font-size:20px;vertical-align:bottom;color:|&txtcol&|;" >Temp|
html | </td>|
html | </tr>|
html | <tr style="text-align:center;border-width:1px;">|
html | <td style=|&dcss&|>|
textbox tval
cssid htmlid(), dcss
html | </td>|
html | <td style="font-family:arial;font-size:26px;vertical-align:-50px;border:1px;color:|&txtcol&|;">|
html |<b style="vertical-align:-36px;">o</b>|
html |<b style="vertical-align:-50px;">C</b>|
html | </td>|
html | </tr>|
html |</table>|
html |</div>|
gosub [redo]
wait
end
[redo]
html "<br><br><br><br>"
html |<div style="text-align:center;">|
button "RedLED", [redLED]
html " "
button "YellowLED", [yellowLED]
html " "
button "blueLCD", [blueLCD]
html " "
button "green7", [green7]
html " "
button "LCDclear", [LCDclear]
html " "
button "LCDpale", [LCDpale]
html " "
button "LCDcyan", [LCDcyan]
html |</div>|
html |<div style="text-align:center;">|
html "<br><br><br><br>Curve "
slider br,0,100
cssid htmlid(), "width:70px"
html " Font "
dropdown fnt, "Dot Matrix,Digital-7,Digital-7 Italic,Score Board"
html ", Font colour "
dropdown tc, "yellow,blue,springgreen,orangered"
'dropdown tc, "red,yellow,blue,lime,springgreen,orangered,orange,chartreuse,magenta,cyan,lightslategray,#303030"
html ", Background colour "
dropdown bc, "cyan,ghostwhite,whitesmoke,#404040"
'dropdown bc, "silver,gray,dimgray,lavender,honeydew,paleturquoise,cyan,ghostwhite,whitesmoke,snow,#303030,#404040"
button "Refresh", [HOME]
html |</div>|
'goto [HOME]
return
[LCDpale]
fnt = "Digital-7 italic"
tc = "#505050"
'tc = "cadetblue"
bc = "paleturquoise"
'bc = "lavender"
br = 0
goto [HOME]
return
[LCDclear]
fnt = "Digital-7"
tc = "#505050"
'tc = "cadetblue"
'bc = "paleturquoise"
bc = "lavender"
br = 0
goto [HOME]
return
[LCDcyan]
fnt = "Digital-7 italic"
'tc = "#404040"
tc = "navy"
bc = "cyan"
br = 20
goto [HOME]
return
[blueLCD]
fnt = "Digital-7"
tc = "blue"
bc = "ghostwhite"
br = 10
goto [HOME]
return
[yellowLED]
fnt = "Score Board"
tc = "yellow"
bc = "#404040"
br = 100
goto [HOME]
return
[redLED]
fnt = "Score Board"
tc = "orangered"
bc = "#404040"
br = 50
goto [HOME]
[green7]
fnt = "Digital-7 Italic"
tc = "springgreen"
bc = "#303030"
br = 70
goto [HOME]
return
