Embedded Files
This deceptively simple project can teach a thing or two about style and functionality.
It uses 4 sliders and 3 colour-selector charts to control:
This allows easy size and colour selection for your specified message$, eg: for creating button styles, etc.
The script demonstrates use of the ONHTMLCHANGE command to read the values of the web page controls when anything has been changed.
It also demonstrates how mouse onclick can run commands in your own subroutine, in this case to display current values in wlog and ser mon.
TIP: HTML components inside of <tags> can have title="name" inserted in the opening tag to cause the "name" to show as a tooltip on hover, ie:
<input title='Font colour'...
Basic:
Font Size
Font Colour
Font Padding
Background Colour
Border Size
Border Colour
Corner Radius
' Label Styler
message$ = "Hello World"
fontsize$ = "4" 'font size (in em)
fontcol$ = "#888800" 'font colour
fontbak$ = "#0000ff" 'font background colour
fontpad$ = "2" 'font padding (in em)
bordsize$ = "1" 'border thickness (in em)
bordrad$ = "4" 'border corner radius (in em - dependent on border thickness
bordcol$ = "#666666" 'border colour
gosub makestyle
gosub paint
onhtmlchange htmlchanged
wait
htmlchanged:
fontpad$ = str$(fontpad)
fontsize$ = str$(fontsize)
bordsize$ = str$(bordsize)
bordrad$ = str$(bordrad)gosub makestylegosub paintreturnmakestyle:mystyle$ = ""mystyle$ = mystyle$ + "font-size:" + fontsize$ + "em;"mystyle$ = mystyle$ + "color:" + fontcol$ + ";"mystyle$ = mystyle$ + "background:" + fontbak$ + ";"mystyle$ = mystyle$ + "padding:." + fontpad$ + "em;"mystyle$ = mystyle$ + "border:." + bordsize$ + "em solid " + bordcol$ + ";"mystyle$ = mystyle$ + "border-radius:." + bordrad$ + "em;"returnpaint:clsa$ = |<br><br>|a$ = a$ + |<div id='message' data-var='clicked' onclick='cmdButton(this)' style='display: table; margin-right:auto;margin-left:auto;text-align:center;|a$ = a$ + mystyle$ 'this is the var that is loaded with all the css stylesa$ = a$ + |'>|a$ = a$ + message$ 'this is the message to be displayeda$ = a$ + |</div>|a$ = a$ + |<br><b><br><br>|a$ = a$ + |<div id='controls' style='display: table; margin-right:auto;margin-left:auto;text-align:center;|a$ = a$ + |'>|a$ = a$ + |<br>|fontsize = val(fontsize$)a$ = a$ + slider$(fontsize,1,18,1) + |<br>|a$ = a$ + |<input title='Font colour' type="color" data-var="fontcol$" onchange="cmdChange(event)" value="| + fontcol$ + |"><br>|fontpad = val(fontpad$)a$ = a$ + slider$(fontpad,1,9) + |<br>|a$ = a$ + |<input title='Background colour' type="color" data-var="fontbak$" onchange="cmdChange(event)" value="| + fontbak$ + |"><br>|bordsize = val(bordsize$)a$ = a$ + slider$(bordsize,0,6) + |<br>|a$ = a$ + |<input title='Gragient colour' type="color" data-var="bordcol$" onchange="cmdChange(event)" value="| + bordcol$ + |"><br>|bordrad = val(bordrad$)a$ = a$ + slider$(bordrad,0,9) + |<br>|a$ = a$ + |</div>|html a$a$ = ""returnclicked:print "Font colour=";fontcol$;" Backround colour=";fontbak$;" Font size=";fontsize$;" Padding=";fontpad$;print " Border colour=";bordcol$;" Border size=";bordsize$;" Border radius=";bordrad$ wlog "Font colour="+fontcol$+" Backround colour="+fontbak$+" Font size="+fontsize$+" Padding="+fontpad$+" Border colour="+bordcol$+" Border size="+bordsize$+" Border radius="+bordrad$return'---------------------- END -----------------------
Page updated
Google Sites
Report abuse