Page 1 of 1
HTML help on LED positioning
Posted: Tue Feb 23, 2021 11:15 pm
by Zim
Hi Gents
Can someone
please set me straight on what I'm doing wrong on positioning the Led?
This doesn't reposition it. Lots of hair pulled out...
Thanks
Zim
Code: [Local Link Removed for Guests]
cls
b$ = "yellow"
led1$ = "position: fixed;top: 50px;right: 500;"
A$ = ""
A$ = A$ + |<!DOCTYPE html><html><body><style>|
A$ = A$ + |body {background-color: black;}|
A$ = A$ + |p {font-size:36px;}|
A$ = A$ + |</style></body>|
A$ = A$ + led$(b$, "Ld1") 'color, ID
A$ = A$ + cssid$("Ld1", led1$) ' ID, css
html A$
Re: HTML help on LED positioning
Posted: Wed Feb 24, 2021 11:21 am
by Electroguard
It may be to do with the LED$ component being a 'Canvas' type graphic which is positioned relative to its screen canvas.
I added a 'Test' checkbox$ as a comparison (
script enclosed below), which does display ok at the specified coordinates
So apart from the missing 'WAIT' and missing units (px) from 'right', your script is actually working ok with HTML components.
I vaguely remember having to delve into canvas graphics for doing the EasyNet Alerts Monitor Project...
https://sites.google.com/site/annexwifi ... ts-monitor
Or you could make your own LED using CSS...
https://www.w3schools.com/howto/howto_css_circles.asp
cls
test = 1
b$ = "yellow"
led1$ = "position: fixed;top: 150px;right: 500px;"
A$ = ""
A$ = A$ + |<!DOCTYPE html><html><body><style>|
A$ = A$ + |body {background-color: black;}|
A$ = A$ + |p {font-size:36px;}|
A$ = A$ + |</style></body>|
A$ = A$ + led$(b$, "Ld1") 'color, ID
a$ = a$ + checkbox$(Test,"Ld1")
A$ = A$ + cssid$("Ld1", led1$) ' ID, css
html A$
wait
Re: HTML help on LED positioning
Posted: Wed Feb 24, 2021 9:14 pm
by Zim
Thanks Electroguard
Re: HTML help on LED positioning
Posted: Thu Feb 25, 2021 10:43 am
by Electroguard
You can position the LED$ components where you want by wrapping them in DIVs.
Your yellow LED is now in a div, and the positional coordinates have been added to the div style
(Note that the original led1$ positional style has been commented out, so any references to "Ld1" actually do nothing)
The red led on the same line, and the green led on the next line, shows what happens to anything else subsequently defined in that div.
The pink and blue leds show how to create other divs to independently place other components wherever you wish.
Screenshot-2.jpg
cls
b$ = "yellow"
c$ = "red"
d$ = "green"
e$ = "magenta"
f$ = "blue"
A$ = ""
'A$ = A$ + |<!DOCTYPE html><html>
A$ = A$ + |<body><style>|
A$ = A$ + |body {background-color: black;}|
A$ = A$ + |p {font-size:36px;}|
A$ = A$ + |</style></body>|
A$ = A$ + |<div style='display: table; margin-right:auto;margin-left:auto;position: fixed;top: 150px;left: 150px;'>|
A$ = A$ + led$(b$, "Ld1")
A$ = A$ + led$(c$, "Ld1") + |<br>|
A$ = A$ + led$(d$, "Ld1") + |</div>|
A$ = A$ + |<div style='display: table; margin-right:auto;margin-left:auto;text-align:center;position: fixed;top: 120px;left: 120px;'>|
A$ = A$ + led$(e$, "Ld1") + |</div>|
A$ = A$ + |<div style='display: table; margin-right:auto;margin-left:auto;text-align:center;position: fixed;top: 125px;left: 128px;'>|
A$ = A$ + led$(f$, "Ld1") + |</div>|
'led1$ = "position: fixed;top: 150px;right: 500px;"
'A$ = A$ + cssid$("Ld1", led1$) ' ID, css
html A$
wait'
Re: HTML help on LED positioning
Posted: Thu Feb 25, 2021 5:59 pm
by Zim
Outstanding! Thankyou!
Zim