Proper way to remove object?

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

Proper way to remove object?

Post by Zim »

What is the proper way to remove a led$ object from screen. If I invoke a led$, how do i remove it? Do I have to redraw the whole page, or do I have to place another led on top with the same color as background? I just want the led visible under certain conditions (as a visual warning)
The code below is how I draw an led, but what code would remove it?

Thanks
Zim

Code: [Local Link Removed for Guests]

e$ = "red"
A$ = A$ + |<!DOCTYPE html><html>|
A$ = A$ + |<body><style>|
A$ = A$ + |body {background-color: black;}|
A$ = A$ + |</style></body>|
A$ = A$ + |<div style='display: table; margin-right:auto;margin-left:auto;text-align:center;position: fixed;top: 110px;left: 120px;'>|
A$ = A$ + led$(e$, "Ld1") + |</div>|
html A$
A$ = ""


User avatar
Fernando Perez
Posts: 378
Joined: Mon Feb 15, 2021 10:09 pm
Location: Santander (Spain)
Has thanked: 195 times
Been thanked: 267 times

Re: Proper way to remove object?

Post by Fernando Perez »

Please, analyze this code:

Code: [Local Link Removed for Guests]

false = 0
true = 1
visible = true
led = 0

OnHtmlReload Page
gosub Page
Wait

Page:
  CLS
  a$ = |<center><div id="led1">|+LED$(led)+|</div><br>|
  a$ = a$ + BUTTON$("Click me", jump1, "but1")
  HTML a$
return

jump1:
  if visible = true then CSS cssid$("led1", "visibility: hidden;")
  if visible = false then CSS cssid$("led1", "visibility: visible;")
  visible = 1 - visible
  refresh
return
User avatar
Electroguard
Posts: 836
Joined: Mon Feb 08, 2021 6:22 pm
Has thanked: 268 times
Been thanked: 317 times

Re: Proper way to remove object?

Post by Electroguard »

The only way I could define my own On and Off LED colours when I was doing the Alerts Monitor project (a long time ago) was to create my own LED's.
Therefore I was initially interested with the later ability to define the text colour of LED$ component, but I couldn't find a way to still use them as bi-state LEDs any more. It's only possible to define one colour anyway (the specified string$ colour name) so it is not possible to define On and Off colours... and presumably it cannot still be a bi-colour LED anyway if has been defined as a colour string$ variable, thereby preventing it being defined as a changeable bi-state numeric variable. Nor can the original component colour be re-defined with a different string$ colour, because that would create an additional new component of the new colour name.
You could create a new colour$ LED to overwrite the original location, but creating a new html object would cause screen flicker, and it would need to be done every time it needs to change colour.
Maybe it is now easier to change the named colour LED's actual colour by 'styling' it to something different.
Or perhaps you could just hack out the relevant lines (3) from the Alerts Monitor to create your own LEDs with your chosen On and Off colours, which you would change using CSS cssid$ (in place of the old TRACE syntax) without flicker … and if you assign your page background colour to a variable name, you could also use it to specify the LED Off colour.
User avatar
Fernando Perez
Posts: 378
Joined: Mon Feb 15, 2021 10:09 pm
Location: Santander (Spain)
Has thanked: 195 times
Been thanked: 267 times

Re: Proper way to remove object?

Post by Fernando Perez »

As you can imagine, there are many ways to achieve this, but perhaps the simplest is to enclose the LED $ object in a <div> with a unique ID and change its visibility property.
Luck!
User avatar
Fernando Perez
Posts: 378
Joined: Mon Feb 15, 2021 10:09 pm
Location: Santander (Spain)
Has thanked: 195 times
Been thanked: 267 times

Re: Proper way to remove object?

Post by Fernando Perez »

The "WLOG" window reveals to us, when we execute an LED $, that Cicciocb has synthesized, for our convenience, a standard SVG object:

Code: [Local Link Removed for Guests]

<svg height = '20 'width = '30' style = 'top: 5; position: relative'>
  <circle cx = '15 'cy = '10' r = '9' stroke = 'black' data-var = 'led' fill = 'red' />
</svg>
If instead of using LED $, we bother to use HTML code, the possibilities multiply, but so does our work.
(See https://www.w3schools.com/graphics/svg_circle.asp)
Zim
Posts: 280
Joined: Mon Feb 08, 2021 9:15 pm
Has thanked: 253 times
Been thanked: 128 times

Re: Proper way to remove object?

Post by Zim »

Thanks so much for the suggestions...I will give them a try!

Zim
Post Reply