Up and Down Arrow Entities ?

[Electroguard]

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 ?

trendsboth.jpg

[MarioL]

hi. try it

Code: [Local Link Removed for Guests]

' tested with  ANNEX WiFi 1.44.2 - firefox 10
UParr$ = " &#8593"  'need space before &, change decimal number for other symbol
DOarr$ = " &#8595"  'need space before &, change decimal number for other symbol
ZZarr$ = " &#8623"  '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

[Electroguard]

Thanks MarioL, I shall give that a try.

[Electroguard]

I did try it (copied and pasted exactly), but I get...

22.8°C &#8593 &#8595
(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]

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:

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">&#9650;</span></pre><br>|
  a$ = a$ + |<pre>DROPPING<span class="big blue">&#9660</span></pre><br>|
  a$ = a$ + |<pre>SAME    <span class="big cyan">&#9644</span></pre><br>|
  html a$
return

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">

[Electroguard]

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)

[Electroguard]

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.

[cicciocb]

HI Robin,
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$ = "&uarr; &darr; &uarr; &darr;"
'set the content of the label using javascript
jscript |_$("myarrow").innerHTML="| + ar$ + |"|
pause 3000
up$ = "&uarr;" : down$ = "&darr;"
for z=0 to 1000
  jscript |_$("myarrow").innerHTML="| + up$ + |"|
  pause 1000
  jscript |_$("myarrow").innerHTML="| + down$ + |"|
  pause 1000
next z

[Electroguard]

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]

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$

trendsbit.jpg