|Description||This application note walks the user through the steps to get a 4D Systems Goldelox screen to display any text or string typed and rendered using third-party or even customized fonts other than the 4D System fonts that are displayed by default when writing text, labels or strings.|
This application note is intended to provide users of 4D Systems Goldelox Display Module and beginners, information on how to serially display third party fonts or customized fonts. In order to carry out this application note the following items are required:
and other superseded modules
Visit www.4dsystems.com.au to see the latest products using the Goldelox graphics processor.
- 4D Programming Cable / µUSB-PA5/µUSB-PA5-II
- micro-SD (µSD) memory card
- Workshop 4 IDE (installed according to the installation document)
When downloading an application note, a list of recommended application notes is shown. It is assumed that the user has read or has a working knowledge of the topics presented in these recommended application notes.
This application note walks the user through the steps to get a 4D Systems Goldelox Display up and running for the first-timer, with the guarantee at the end of displaying any text or string typed and rendered using third-party or even customized fonts other than the 4D System fonts that are displayed by default when writing text, labels or strings.
This application note starts with a basic tutorial in the creation of a simple Visi project to generate a sample media font base on a uSD card which will be used by a Goldelox display of choice.
Furthermore, this application note would serve as a guide for any beginner in converting any Goldelox display to a Serial display using the Serial Environment of Workshop 4, using the SPE application from 4D Systems.
At the end, the user will be introduced in operating the Serial Commander application tool inside the Workshop 4 IDE to stream data, commands and functions to control and show the custom fonts or third party fonts created using the ViSi Environment, on the display module connected to the host PC using a 4D programming cable.
This application note, although written for Serial, requires the use of the ViSi environment to generate the necessary files which will be copied to the uSD card. The display module is then configured as a slave device by loading it with the SPE application. With the uSD card mounted onto the display, the host, which is the Serial Commander in this application note, will then be able to control the display and access the contents of the uSD card.
This application note starts with the creation of a basic ViSi project. Users who want to learn more about the ViSi environment may consult the application note
Topics discussed include instructions on how to launch Workshop 4, how to open a ViSi project, how to change the target display, how to create a new ViSi project, how to save a ViSi project, how to connect the target display to the PC, and how to compile and download a program.
Open the Workshop 4 (WS4) IDE and click "Create a new project".
Choose the Display module you want to use. For this example we select the uOLED-128-G2, and click Next.
Select the ViSi evironment
This will open the ViSi development environment window within the WS4 IDE as shown below.
On the ViSi code area, position the cursor as shown below:
On the WS4 main menu, click Widgets and then select Labels tab on the objects ribbon.
Next, select and click on the Strings Icon
Click inside the display area in the Form or WYSIWYG section of WS4 IDE to drop the String placeholder represented by a dashed red box.
Scroll down to the Object Inspector area and find the String property field. To add a font and open the string editor, simply double click on the (...) of the String property field as shown below.
This opens the string editor where you can select the font type, and text style, size and other attributes. See next photo below for details.
In the font selection area of the string editor, click on the down arrow and select the desired font type. As an example, we use the Sony Sketch EF font and we set the size to 24 as shown below. The user may at his own desire select another font.
We will now add the second string. To do so, we repeat the steps starting from the selection of the String icon on the Labels menu. Again click on the Form or WYSIWYG section to drop the new string placeholder.
In the same manner as in String1, on the Object Inspector area, go to the String2 properties and click (...) to open the String Editor window. For this exercise, select Harlow Solid Italic with size of 20.
Click OK to finalize and exit the String Editor window.
Next go to the Object Inspector area and on the Object menu select Form1 as shown below:
Next, click "Paste all Code".
This completes the ViSi code which generates the data for the fonts we will be using for the simulation.
NOTE: During this procedure, the 4D programming cable or the Display module should NOT be connected yet.
First step is to copy the font data to a uSD card. Insert uSD to USB adapter and plug to PC.
FAT format the uSD card then go back to ViSi project window.
On the ViSi window Home ribbon in WS4 click the Compile button. At this point you might be prompted to save the file. Choose a location and type in the filename you desire (3PFontsDemo was used for this example).
After clicking on Compile, you will be prompted to select and confirm the drive to where the font files will be saved. Click OK to confirm and start copying.
Windows security might prompt whether to allow RawCopy.exe to run, click Yes.
Another prompt will appear asking you if you want to overwrite the files on the selected drive, click Yes.
That's it! You have successfully copied the font data to the uSD card. Eject from the USB and adapter and insert it to the Display module you are using for this demo. (uOLED-128-G2 in this example)
Go back to the WS4 IDE, right click on the 3PFontsDemo in the statement
Next, click "Open file at Cursor" and this should open a new screen as shown below:
Please take note of the values at the arrow tip in the foregoing picture which appears on your screen, write them down as we need it later for the font simulation. They represent the sector in the uSD card where the font data is stored in Hex format.
Here, the first font points to sector 0x0 and the second is on 0x21. In case you see different values, that's not a problem, just note them down. This ends the first part of this application note.
The display must be configured as a slave device first before it can be controlled by a host. For instructions on how to launch Workshop 4, how to connect the display module to the PC, and how to configure the display as a slave device, kindly refer to the section “Setup Procedure” of the application note below.
This application note also introduces the user to the Serial Protocol thru the use of the Serial Commander.
Click to open the Gfx tab. Select gfx_Cls and press the Send button below.
Next, from the same menu, select media_SetSector. Here you are prompted to enter the Sector addresses. Remember the Hex values from part 1 of this section? The values are 0x0 and 0x21. Now we need to use these values. Inside the 3PFontsDemo.4DViSi are two third-party font types namely Sony Sketch EF located at 0x0 and Harlow Solid Italic located at 0x21. If you get different numbers, use those what you got instead.
The first exercise will be to use the Sony Sketch EF font, here located at 0x0, meaning HiWord = 0 and LoWord = 0 in decimal form. 0x0 is "0" and "0" for HiWord and LoWord respectively. The screen defaults is zero for both thus we need not enter anything on the boxes below and simply press Send.
Now open the Txt menu by clicking on the Txt tab. Select txt_FontID and enter "7" in the FontNumber box. See below photo for details:
FontNumber = 7 denotes media(i.e. uSD_Card) fonts which are fonts not included in the 4DSystem fonts.
Next step, click on the Other tab to open the Other menu. At this point, we are ready to write and display text on the display module screen. Select putstr and type "Hello World" or any text you may prefer. For this example, we type "Hello World". See photo below for details.
Looking at your display, it should look and show these:
As mentioned earlier, a second third-party font has been embedded in the 3PFontsDemo Visi application which is the Harlow Solid Italic type font. To do so, repeat all the previous steps starting with the gfx-Cls command. When you reach the media_SetSector portion enter HiWord = 0 and LoWord = 33 in the boxes provided. This points now to the sector of the uSD where the second font data is stored.
Note: 33 is the decimal equivalent of 0x21 which is hexadecimal notation. In case you got a different value convert it to decimal and enter this in the LoWord box.
Follow the succeeding steps as in the first font exercise. Sending the next string to the display assuming we type again "Hello World" will show:
The user may use the Serial Commander to change the text style, FGcolour, BGcolour, Bold, Italic, underline or other attributes and properties as the user may prefer and be able to view the results on the display.
This application note has shown the user the versatility of the 4D Systems Intelligent displays in particular the Goldelox series which is featured in this application note being capable of displaying custom or third party fonts other than the 4D System fonts available by default.
Further, it is our hope that we have delivered useful information which guarantees the user the ease-of-use in setting up 4D systems displays for serial display applications.