Start a new topic

Fun with Fonts - Part I: A Few Neat Tricks



Okay, now this surely isn't any award winning graphics project, but what I want to focus on is some interesting things with fonts.  The HMI is downloadable.


In the upper left hand corner is a text component with its font set to my maskit.zi (a simple 12x24 224 character font set).  Now I have seen a project (in the demo section I believe) for entering Encrypted Text - or perhaps Masked.  When the text is entered into t1.txt it is always an asterisk.  No reveal, no loops, just asterisks. 


Providing a cool way to enter a password on the screen without it being seen.


Just to the left of the asterisk is a hotspot that while pressed  switches fonts for the user to be able to verify their entry is correct.  Release and asterisks again.


So it makes sense to pop the password into a non visual component, the t2v and if it does need to be retrieved, the v2t pops it into t2 - you can see the characters entered though not seen are not lost.  Press the clear to erase t2.


The next thing is deals with larger font sets.  So when the resources on your Nextion flash start becoming strained as to what to keep and what not to:


I like to get rid of those big characters that I simply just don't need. 


In the km/h super large font, crossing too many 4K flash pages has to be taking a toll on performance.  And in the km/h example, we only needed 0 to 9 anyway.  So rather than 224 characters of 40x80 chewing up 89.6K, it is nice to take that down to 11 chars at ~8.83K.  Using ASCII at 95 chars will save some space but only gets it down to about 38K.


In the time portion of our clock, again 224 chars @24x48 would be ~32.25K, in 95 character ASCII, again we can get it down to ~13.68K - I am not going to grumble by shaving that down to 14 chars at ~4K.  In the date portion, We have a 12x24 font at 224 chars is ~8K.  With ASCII 95 chars that would be down to 3.42K.  Now most time resources aren't that tight but we still manage to shave it down to just ~2.8K using only the 38 characters needed and get to save some space.


So attached is the v36 HMI, it compiles and it runs.  You will see the ones cutting the space down nicely might be square, but they still display proper - and most importantly -- they save on some of those precious and limited resources.


And now you at least know, that it can be done.  I hope you enjoyed.



HMI
(39.7 KB)

1 person likes this idea

The maskit.zi is merely all asterisks



The time.zi contains just <space>.0123456789:h



The large numbers contain only <space>0123456789



And cal.zi contains just what it needs: <space>, the numbers 0123456789 to do the year and the date, and just enough letters for the 3 letter weekdays (Sun Mon Tue Wed Thu Fri Sat)  and 3 letter months (Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec).



And yet with all this fun, still no Variable Width fonts - still working on that one.




1 person likes this

How did you access the Font Preview window ?

In the Nextion Editor, locate Picture/Fonts lower left corner, click Fonts, Preview is left of Trash Can.

Okay, so here is another trick that you can do.  Create and Edit a small 96 character ASCII font and then swap out the characters with glyphs that you need in your Nextion Project.



In this font games.zi, I wanted to have Dice for playing Yahtzee, a cheap means of  playing poker or black jack, and of course Chess with timers.  After creating my glyphs (replacing the normal characters) I can add this font to my Nextion project and then by calling the normal character, my glyph will be displayed instead (exactly the result I wanted)


For playing cards:


Suits: c - Clubs, d - Diamonds, h - Hearts, and s - Spades

Cards: 2 through 9 = face value, v through z = 10, J, Q, K, and Ace
- t0.txt="2h" will give me the 2 of Hearts,

- t0.txt="vs" will give me the 10 of Spades,

- t0.txt="yc" will give me the King of Clubs


For dice games:


"a" - 1, "b" - 2, "i" - 3, "j" - 4, "k" - 5, "l" - 6


For Playing Chess:  (black font on a light background board)


- Uppercase M through R gives me my Black Chess Pieces

- Lowercase m through r gives me my White Chess Pieces

- I have my A to H and 1 to 8 for square positions

- I have everything I need for the time on the clocks 0 to 9 and :

- t0.txt="Wu" for my White Clock

- t0.txt="Yt" for my Black Clock


and for the other chess notations

- "S"  gives + for check
- "T"  gives en for enpassant
- "U" gives 000 for castle long
- "V" gives 00 for castle short
- "X" gives  x  for a capture



And there we have it, my microChess for a 320x240 Nextion display.



1 person likes this

Thanks, Patrick

oh, ... oh, ... OH !!  and the Points go to Gerhard !!!  It is a 32x32 custom ICON !



So it is possible to have a 32x32 icon inside a Text Component using a specialized .zi font file, and have it change to any of the 65536 foreground/background colors by setting the normal .pco/.bco attribute values.
Use the .sta=crop image and cropping works just like the normal text component.

And this little beauty only uses 171 bytes in font data space in Flash, and 12 bytes of RAM.


Login or Signup to post a comment