Up and Down Arrow Entities ?
- Electroguard
- Posts: 860
- Joined: Mon Feb 08, 2021 6:22 pm
- Has thanked: 276 times
- Been thanked: 323 times
Up and Down Arrow Entities ?
Directional 'trend' arrows can offer a useful indication of weather trends (eg: if is getting hotter or colder)
I have implemented on TFT and VGA, so would be good to also add to web page.
Am using textbox$ to show refreshed direction updates, but no up or down arrows available as text chars, so was trying to use up "↑" and down "↑" arrow html entities - but they don't display as text chars, and I can't think how I can use them ... any ideas ?
I have implemented on TFT and VGA, so would be good to also add to web page.
Am using textbox$ to show refreshed direction updates, but no up or down arrows available as text chars, so was trying to use up "↑" and down "↑" arrow html entities - but they don't display as text chars, and I can't think how I can use them ... any ideas ?
You do not have the required permissions to view the files attached to this post.
Re: Up and Down Arrow Entities ?
hi. try it
see: https://www.w3schools.com/charsets/ref_utf_arrows.asp for more simbols
Code: [Local Link Removed for Guests]
' tested with ANNEX WiFi 1.44.2 - firefox 10
UParr$ = " ↑" 'need space before &, change decimal number for other symbol
DOarr$ = " ↓" 'need space before &, change decimal number for other symbol
ZZarr$ = " ↯" 'need space before &, change decimal number for other symbol
temp$ = "22.8°C "
text$ = temp$ + UParr$ + DOarr$ + ZZarr$
html textbox$(text$)
see: https://www.w3schools.com/charsets/ref_utf_arrows.asp for more simbols
Last edited by MarioL on Tue Aug 08, 2023 1:52 pm, edited 2 times in total.
- Electroguard
- Posts: 860
- Joined: Mon Feb 08, 2021 6:22 pm
- Has thanked: 276 times
- Been thanked: 323 times
- Electroguard
- Posts: 860
- Joined: Mon Feb 08, 2021 6:22 pm
- Has thanked: 276 times
- Been thanked: 323 times
Re: Up and Down Arrow Entities ?
I did try it (copied and pasted exactly), but I get...
22.8°C ↑ ↓
(copied from browser webpage)
So assuming that you have already tried it and it evidently works for you, what am I missing ?
Edit: Ok, so it looks like it may be quite browser specific, which would explain why the differences.
Edit again: Would just have been nice, but is not so important anyway.
22.8°C ↑ ↓
(copied from browser webpage)
So assuming that you have already tried it and it evidently works for you, what am I missing ?
Edit: Ok, so it looks like it may be quite browser specific, which would explain why the differences.
Edit again: Would just have been nice, but is not so important anyway.
- Fernando Perez
- Posts: 378
- Joined: Mon Feb 15, 2021 10:09 pm
- Location: Santander (Spain)
- Has thanked: 195 times
- Been thanked: 267 times
Re: Up and Down Arrow Entities ?
It's strange. I have tested Mariol's code and it works perfectly for me in Mozilla, Edge, Chrome and Opera.
I have encouraged myself to do my tests on special characters and Mariol's method works for me with all the ones I have tried:
Upload this code to your ESP32 and tell me.
Could it be that your browser is using a different character set than UTF-8?
Try adding this at the beginning of your html code:
<metacharset="UTF-8">
I have encouraged myself to do my tests on special characters and Mariol's method works for me with all the ones I have tried:
Code: [Local Link Removed for Guests]
onhtmlreload web
gosub web
wait
END
web:
cls
a$ = "<center>"
a$ = a$ + |<style>.big {font-size:2.6em;font-weight:bold;padding-left:40px;}</style>|
a$ = a$ + |<style>.red {color:red;}.blue{color:blue;}.cyan{color:cyan;}</style>|
a$ = a$ + |<pre>RISING <span class="big red">▲</span></pre><br>|
a$ = a$ + |<pre>DROPPING<span class="big blue">▼</span></pre><br>|
a$ = a$ + |<pre>SAME <span class="big cyan">▬</span></pre><br>|
html a$
return
Could it be that your browser is using a different character set than UTF-8?
Try adding this at the beginning of your html code:
<metacharset="UTF-8">
- Electroguard
- Posts: 860
- Joined: Mon Feb 08, 2021 6:22 pm
- Has thanked: 276 times
- Been thanked: 323 times
Re: Up and Down Arrow Entities ?
Yay, that did it... thanks to you both.
Edit: (is cos I am using a little Falkon browser in MX Linux to launch all my Annex device in, keeping Firefox for everything else)
Edit: (is cos I am using a little Falkon browser in MX Linux to launch all my Annex device in, keeping Firefox for everything else)
- Electroguard
- Posts: 860
- Joined: Mon Feb 08, 2021 6:22 pm
- Has thanked: 276 times
- Been thanked: 323 times
Re: Up and Down Arrow Entities ?
Nope, tricked myself there when I saw the up and down arrows on the web page.
But its not that simple - the problem is not displaying an html Up or Down arrow, cos that's easy to write any html entity to the browser.
The problem is how to change anything that has already been written to the browser... or how to change an up arrow to a down arrow later when needed.
That's what textbox$ is used for init, so the webpage can be easily updated when its corresponding variable changes.
But an html entity is is not simple text, it is a code which needs to be interpreted by the browser, so filling a string variable with html entity characters just displays them in the webpage textbox$ as the literal text.
If I was a total masochist I could probably do it using replace$, but I aint that desperate.
But its not that simple - the problem is not displaying an html Up or Down arrow, cos that's easy to write any html entity to the browser.
The problem is how to change anything that has already been written to the browser... or how to change an up arrow to a down arrow later when needed.
That's what textbox$ is used for init, so the webpage can be easily updated when its corresponding variable changes.
But an html entity is is not simple text, it is a code which needs to be interpreted by the browser, so filling a string variable with html entity characters just displays them in the webpage textbox$ as the literal text.
If I was a total masochist I could probably do it using replace$, but I aint that desperate.
- cicciocb
- Site Admin
- Posts: 2060
- Joined: Mon Feb 03, 2020 1:15 pm
- Location: Toulouse
- Has thanked: 439 times
- Been thanked: 1360 times
- Contact:
Re: Up and Down Arrow Entities ?
HI Robin,
try the code below; it shows how you can create "labels" in html (probably I could also create a LABEL$(variable) function
try the code below; it shows how you can create "labels" in html (probably I could also create a LABEL$(variable) function
Code: [Local Link Removed for Guests]
'example of creation of a simple label
a$ = |<label id="myarrow"></label>| 'myarrow is the name of the label
cls
b$ = "25.2°C"
html textbox$(b$) + a$ ' the label is at the right of the textbox
'prepare the content of the label
ar$ = "↑ ↓ ↑ ↓"
'set the content of the label using javascript
jscript |_$("myarrow").innerHTML="| + ar$ + |"|
pause 3000
up$ = "↑" : down$ = "↓"
for z=0 to 1000
jscript |_$("myarrow").innerHTML="| + up$ + |"|
pause 1000
jscript |_$("myarrow").innerHTML="| + down$ + |"|
pause 1000
next z
- Electroguard
- Posts: 860
- Joined: Mon Feb 08, 2021 6:22 pm
- Has thanked: 276 times
- Been thanked: 323 times
Re: Up and Down Arrow Entities ?
Thanks Francesco, I'll try to squeeze in the required html Up, Down, Blank for the 6 weather vars without overloading things, but it looks like it could end up being quite big for 6 channels each with 3 choices... was easy for vga, cos just copied the appropriate image filename to be displayed, end of.
- Electroguard
- Posts: 860
- Joined: Mon Feb 08, 2021 6:22 pm
- Has thanked: 276 times
- Been thanked: 323 times
Re: Up and Down Arrow Entities ?
Just to wrap this up... Up and Down are only points of view (ask any bat who's hanging around), so was easiest just to use "<" to show Down and ">" to show Up trends in textbox$(h1$
Not perfect, but simple and works:
DownArrow$ = "<-": UpArrow$ = "->"
if data$>humidity$ then hum$="UpCyanS12.jpg": h1$=UpArrow$ else if data$<humidity$ then hum$="DownPinkS12.jpg": h1$=DownArrow$
Not perfect, but simple and works:
DownArrow$ = "<-": UpArrow$ = "->"
if data$>humidity$ then hum$="UpCyanS12.jpg": h1$=UpArrow$ else if data$<humidity$ then hum$="DownPinkS12.jpg": h1$=DownArrow$
You do not have the required permissions to view the files attached to this post.