HTML help on LED positioning

All that relates to Javascript, CSS, HTML, ....
Post Reply
Zim
Posts: 280
Joined: Mon Feb 08, 2021 9:15 pm
Has thanked: 253 times
Been thanked: 128 times

HTML help on LED positioning

Post 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$

User avatar
Electroguard
Posts: 836
Joined: Mon Feb 08, 2021 6:22 pm
Has thanked: 268 times
Been thanked: 317 times

Re: HTML help on LED positioning

Post 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
Zim
Posts: 280
Joined: Mon Feb 08, 2021 9:15 pm
Has thanked: 253 times
Been thanked: 128 times

Re: HTML help on LED positioning

Post by Zim »

Thanks Electroguard
User avatar
Electroguard
Posts: 836
Joined: Mon Feb 08, 2021 6:22 pm
Has thanked: 268 times
Been thanked: 317 times

Re: HTML help on LED positioning

Post 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'
You do not have the required permissions to view the files attached to this post.
Zim
Posts: 280
Joined: Mon Feb 08, 2021 9:15 pm
Has thanked: 253 times
Been thanked: 128 times

Re: HTML help on LED positioning

Post by Zim »

Outstanding! Thankyou!
Zim
Post Reply