A seven segment font to display numeric data

uskiara · May 4, 2020, 7:26am

Dear all,
first of all please let me apologise for my poor English, but I’m Italian.
More, I’m not pretty sure whether I’m using correctly the “Community” to post what follows (Administrators: please forgive me).

During this lock-down time I approached AI2 to create a digital dashboard for my old convertible car. I built an Arduino “sniffer” that listens to the motor control ECU, and sends via BT every 200 milliseconds a new set of diagnostic data to a pad where my AI2 code runs displaying nice digital dasboards. And everything works fine ! .

During this development I wanted to display the received data by using a 7 segment numeric font but, because AI2 doesn’t feature such font, I’ve created one by myself.

The attached pdf file is actually a 7z file containing three files: small, mid and large 7 segment fonts (rename it as .7z to open). Each number is a single png file that can be used as a sprite image.
The use is quite simple: upload the image to show the new digit having erased the previous one by drawing a “none color” line, (or dot, with enough H and W to rubber out the old one).

The only concern is that the image loading is a slow operation and this solution could lead to a little video refresh delay if you need to work in “real-time” (i.e. <= 200 millisecond).
Anyway, I hope that this can be useful for anyone.

Stay safe, stay healthy.

7_Segments.pdf (42.9 KB)

Juan_Antonio · May 4, 2020, 9:21am

@uskiara I can’t open your pdf file.

uskiara · May 4, 2020, 9:29am

Dear Juan Antonio,
please change its extension to .7z, than you should be able to open it.
It is an archive file (it contains three other .7z files: each one contains 10 .png files , one for each number form 0 to 9, in three sizes)
Sorry to have it done so complicated, but the upload policy does not allow to post zipped files.
Hoping you should open it now.
If not, please let me know if there is another way to share on the AI2 platform.
Kind regards,
Ugo.

PS if this does not solve the problem I will zip the archive in winzip instead of 7z.

Juan_Antonio · May 4, 2020, 9:33am

OK, it works.

uskiara · May 4, 2020, 9:53am

Ok, thanks a lot for your interest!
Please find attached some sample blocks.
In the meanwhile, I recognized that I told a wrong instruction (sorry) : there is no need to erase the old image, just by loading the new image-digit the old one is cancelled.
(the need to erase the previous digit applies only if you use the write_text on canvas instruction).
Apologise for this.
Cheers.

[mod edit - tidied up image display]

TIMAI2 · May 4, 2020, 1:24pm

You could try using a webviewer, an “alarm clock” font, some javascript…
(I used a slider to emulate the revs)

revCounter.aia (29.4 KB)

HTML:

<!DOCTYPE html>
<html>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>

<head>
	<title>Revs | Example</title>
	
	<style type="text/css">
		@font-face {
			font-family: 'alarm_clockregular';
			src: url('alarm_clock-webfont.woff2') format('woff2'), url('alarm_clock-webfont.woff') format('woff');
			font-weight: normal;
			font-style: normal;
		}
		
		body{
			font-family: 'alarm_clockregular';
			background-color:black;
		}
		h1 {
			color:lightgreen;
		}
	</style>
</head>

<body>
	<h1 id ="revs"></h1>
</body>

<script>
	var revs = window.AppInventor.getWebViewString();
	var myRevs = setInterval( myTimer , 10);
	
	function myTimer() {
	revs = window.AppInventor.getWebViewString();
	document.getElementById("revs").innerHTML = pad(revs,4);
	}
	
	function pad(num, size) {
    var s = "000000000" + num;
    return s.substr(s.length-size);
}
</script>

</html>

uskiara · May 4, 2020, 4:55pm

Dear TIMAI2,
many thanks for your hints.
Honestly I’ve tried to use your script and I’ve faced some troubles, but don’t worry (and so do I) !!!
First trouble has been the location where the .html file is stored on the phone filesystem (I’m not using the companion and build every time the apk) but after several retries now it seems to find it (at least I don’t get any longer the “page not found” message ).
Just one comment: when I load the HTML by means of the “Media upload”, the preview shows me a totally black page. Is it normal ?
The reason why I have reloaded the three files (html, woff and woff2), is because I wanted to put them in a specific directory on my PC) .
Once loaded on the phone, the app starts, it shows the slider, but no numbers at all.
The slider works. The app does not crash neither gives runtime errors.
But the Webviewer area remains totally white. I have also resized it , in the case it was a screen proportionality issue. But nothing has changed.
I have also tried to change a bit your code, trying to use a .ttf format, but I am an “absolute beginner” with java, then I have for sure done some bugs.
Anyway… I’ll never give up.
I’ll keep you posted
Have a great day !

PS Just for information: I am a “young programmer” , just 62 years old and I started programming code for mil-aircraft >40 yeas ago, in machine code directly, so Java and HTML are a bit mysterious for me

TIMAI2 · May 4, 2020, 5:09pm

You have a few but not that many years on me

If running the aia I provided as an apk, you have to change the url for the html file which is set in the designer:

from:

file:///mnt/sdcard/AppInventor/assets/rev.html

to:

file:///android_asset/rev.html

the html and woff files need to be in the same directory, otherwise you will have to edit file paths in the html file

the webviewer will just show a black/white background if the html file is not connecting to the woff files
and/or the html file is not found

the fontface styling 'should' work with a ttf file

I recommend you get my aia project working before you try any modifcations....

uskiara · May 4, 2020, 6:49pm

Hi TIMAI2,
it works !!!
I have added the preamble ///android_asset/ in the path for both rev.html (in the screen1 initialize, because I’ve removed it from the designer), and in the java source code for the two woff_x files and now it works really fine
The result is pretty awesome. I think that I will modify my digital dashboard accordingly.
The next time that I will come to the US I owe you a pizza !!!
Best,Ugo.

TIMAI2 · May 4, 2020, 8:13pm

It is javascript not java…

Also, you won’t find me in the USA…

Glad you got it working OK

btw what car ?

(I have a 1962 MG Midget - not an ECU in sight!)

uskiara · May 4, 2020, 9:56pm

Hi,
It’s a Renault Mégane Cabriolet Phase 1- 1998.
Not really a “classic car”, like yours, just old, but a nice one with smooth design and soft curves. French people defined her shape like “a coup de crayon”.

Back to technical details: she’s equipped with 4 ECU’s : Body Computer, ABS, Electric Roof and Engine Control. Is this one that I’m “sniffing” with the Arduino board thanks to a K-line to 5Volts adapter circuit (I love playing with electronics).
It has been a bit tricky to understand the meaning of the diagnostic messages, because the X85 protocol is very old, proprietary, and w/o any documentation, but scanning byte by byte and bit by bit I have been able to decode it.
When I will get retired I would like to buy a true “classic car” (a FIAT 124 sport-spider or a Karmann Ghia cabriolet) and restore it, but for the time being my Meggy is enough !
Let’s say in a different way : next time you will come to Italy …I owe you a pizza !!!
Cheers.

TIMAI2 · May 4, 2020, 10:04pm

I know the car, it is like a taller version of the MGF
I like your choices for a future purchase

uskiara · May 5, 2020, 6:48am

OMG !!!
I took a sight on your web site (my PM in “contacts”): what a wonderful, heavy and deep restoration !
I believe that your days have 48 hours instead of 24 !
Keep in touch!