Facebook Pixel

AN-00058 Designer or ViSi How to Draw Pixels and Lines

Description This application note shows how to program a 4D display module in the Designer environment to make it draw points and lines on the screen. The 4DGL code of the Designer project can be copied and pasted to an empty ViSi project and it will compile normally. The code can also be integrated to that of an existing ViSi project.
Supported Processor PICASO, DIABLO16
Supported Environment Designer, ViSi
Difficulty Easy

File Downloads
Files
 

Description

This application note shows how to program a 4D display module in the Designer environment to make it draw points and lines on the screen. The 4DGL code of the Designer project can be copied and pasted to an empty ViSi project and it will compile normally. The code can also be integrated to that of an existing ViSi project.

Before getting started, the following are required:

  • Any Picaso, Diablo16, or Goldelox display module. Visit 4dsystems.com.au to see the latest products using any of these graphics processors.
  • 4D Programming Cable / µUSB-PA5/uUSBPA5-II
    for non-gen4 displays (uLCD-xxx / uOLED-xxx)
  • 4D Programming Cable & gen4-IB / 4D-UPA / gen4-PA
    for gen4 displays (gen4-uLCD-xxx)
  • 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. 

Note: The attached Designer project and the discussions in this application note make use of a uLCD-32PTU, which is a 320-pixel-by-240-pixel display. Goldelox displays, however, are usually smaller. The uOLED-96-G2, for instance, is a 96-pixel-by-64-pixel display. For Goldelox display users, the discussions are still relevant and there should be no difficulty in editing the simple project.

 

Application Overview

The Designer environment enables the user to write 4DGL code in its natural form to program the display module. 4DGL is a graphics oriented language allowing rapid application development, and the syntax structure was designed using elements of popular languages such as C, Basic, Pascal and others. Programmers familiar with these languages will feel right at home with 4DGL.

The purpose of this application note is, besides showing the user how to draw pixels and lines, to introduce the basics of 4DGL through examples.

 

Setup Procedure

For instructions on how to launch Workshop 4, how to open a Designer project, and how to change the target display, kindly refer to the section “Setup Procedure” of the application note

Designer Getting Started - First Project

For instructions on how to launch Workshop 4, how to open a ViSi project, and how to change the target display, kindly refer to the section “Setup Procedure” of the application note

ViSi Getting Started - First Project for Goldelox

or

ViSi Getting Started - First Project for Picaso and Diablo16

  

Create a New Project

For instructions on how to create a new Designer project, please refer to the section “Create a New Project” of the application note

Designer Getting Started - First Project

For instructions on how to create a new ViSi project, please refer to the section “Create a New Project” of the application note

ViSi Getting Started - First Project for Goldelox

or

ViSi Getting Started - First Project for Picaso and Diablo16

 

Design the Project

Display Resolution and Coordinate System

Before starting to draw, it is necessary to know how positions of points on the display screen are determined. 4D Systems offers display screens of various resolutions and sizes. When the user opens a new project, the Choose Your Product window shows the screen resolutions and sizes of different display modules.

 

For the uLCD-32PTU screen:

For all modules, positions of points are determined starting from the origin, which is always located at the top-left corner. The location of this reference point is common to all orientations – the portrait, landscape, portrait rotated, and landscape rotated. Two most commonly used orientations are portrait and landscape.

Landscape orientation:

Portrait orientation:

Observe the similarity of the above to the Cartesian coordinate system. The y axis points downward here, however. This system applies to all display modules and all orientations.

Start Drawing

From this point onwards, graphics functions and their use will be discussed. The user is advised to use the Designer program skeleton provided by Workshop as a starting code. Just insert additional codes between lines 11 and 12.

 

Draw a Pixel

gfx_PutPixel(x, y, colour)

This function draws a pixel at position x, y using the specified colour.

Example:

 

The screen (uLCD-32PTU, portrait orientation in this example) will look like as shown below.

Portrait orientation:

The size of the pixel is exaggerated here since it is actually very small. 

Draw a Line

gfx_Line(x1, y1, x2, y2, colour)

This function draws a line from point (x1, y1) to point (x2, y2) using the specified colour.

Example:

The screen (uLCD-32PTU, portrait orientation in this example) will look like as shown below.

More Graphics Functions

There are other functions related to the those for drawing pixels and lines - the gfx_GetPixel(x, y), gfx_Hline(y, x1, x2, colour), gfx_Vline(x, y1, y2, colour), gfx_LineTo(xpos, ypos), etc. Learning how to use these functions is relatively easy after having been acquainted with how points are addressed in 4D display screens and how pixels and lines are drawn. Users who want to experiment with these functions may refer to section 2.6 Graphics Functions of any of the following documents:

Goldelox Internal Functions Manual

Picaso Internal Functions Manual

Diablo16 Internal Functions Manual

The following sections of this application note discuss how to clear the screen, how to add a delay, and how to further use the repeat…until/forever loop.

Clearing the Screen

Often times it is necessary to clear the screen to remove unwanted graphics or create a flashing effect.

Clear the screen using the function gfx_Cls( ). To illustrate:

 

The code above repetitively draws a red line, clears the screen, and draws a green line. To illustrate:

Note that in the code a new function is introduced – pause(duration). This function adds a time delay, the unit of which is in milliseconds. Adding a delay is necessary for the observer to see the lines drawn since the instructions are executed so fast. Try, for example, removing line 24 of the code.

Using the Repeat…Until/Forever Loop

Using loops is one way to shorten a code. Again, a loop is a part of the program used to perform repetitive operations. For example, the programmer can use a loop to draw multiple lines. To illustrate:

The figure above shows a code for drawing horizontal lines from top to bottom of the screen. The figure below shows the outcome.

A line-by-line discussion of the code now follows. Lines previously discussed are bypassed.

In line 9, y is declared as a variable.

Values of variables, as opposed to constants, may change during the course of program execution. Here the incrementing value of y is used in drawing the horizontal lines. Also, the programmer must declare y as a variable first before using it. To learn more about variables in 4DGL, consult the 4DGL Programmers Reference Manual.

In line 10, the value of y is initially set to zero.

The statements from lines 12 to 16 make up the repeat…until loop. The instructions inside the loop are executed repetitively until a condition is met. Below is the syntax or format for declaring a repeat…until loop.

The condition, in this case, is when the increasing value of the variable y, which was initially set to zero, is equal to 320.

Replacing until(condition) with forever will make the loop execute indefinitely. There other kinds of loops besides the repeat...until/forever loop. These are discussed in the 4DGL Programmers Reference Manual

The statement in line 13 now makes use of the value of the variable y to draw a green horizontal line.

After a line is drawn, the value of y is increased by five.

Note that the expression y := y + 5 can also be written as y += 5. When the next iteration of the loop occurs, the new horizontal line will be drawn five pixels below the previous line. This repeats until the value of y reaches 320. The program then pauses for 3 seconds then exits.

 

Run the Program

For instructions on how to save a Designer project, how to connect the target display to the PC, how to select the program destination, and how to compile and download a program, please refer to the section “Run the Program” of the application note

Designer Getting Started - First Project

For instructions on how to save a ViSi project, how to connect the target display to the PC, how to select the program destination, and how to compile and download a program, please refer to the section “Run the Program” of the application note

ViSi Getting Started - First Project for Goldelox

or

ViSi Getting Started - First Project for Picaso and Diablo16

The uLCD-32PTU, uLCD-35DT, uOLED-96-G2, and/or uOLED-160-G2 display modules are commonly used as examples, but the procedure is the same for other displays.

Share: