Drawing in WINDEV, WEBDEV and WINDEV Mobile

ONLINE HELP
WINDEV, WEBDEV AND WINDEV MOBILE

Version:

Home | Sign in | English

Help / WLanguage / WLanguage functions / Controls, pages and windows / Drawing functions

Overview
Prerequisite depending on the platform
Drawing in PHP
Drawing in Browser code
Using the drawing functions in Linux
How to draw?
Drawing in an Image control
Drawing in an Image variable
Drawing in browser code

WINDEV

WEBDEV

WINDEV Mobile

Others

See also

Drawing in WINDEV, WEBDEV and WINDEV Mobile

Overview

WINDEV, WEBDEV and WINDEV Mobile include several functions for displaying, drawing, copying and saving the drawings and images from your applications or sites.

WINDEV, WEBDEV et WINDEV Mobile propose functions used to:

draw several drawings,
display any type of image,
copy the drawings and the images,
save drawings and images.

Prerequisite depending on the platform

Drawing in Browser code

Some drawing functions are available in Browser code. The drawing functions in Browser code are based on the HTML 5 standard. More specifically, these functions are based on the "canvas" tag of HTML 5.

The drawing features in browser code are available for the recent browsers only (supporting the HTML 5 standard). To find out whether the drawing features are proposed by your browser, use DrawingAvailable.

Caution: To use the drawing functions with Internet Explorer 9, the project must include the reference to the DTD file. To do so, the HTML mode must be "HTML 4.01 Transitional + DTD". This option is available in the "Advanced" tab of the project description window.
Reminder: To open the project description window, go to the "Project" tab, "Project" group and click "Description".

Special case: Drawing in the browser of an Android phone: The browser drawing functions are only available starting with version 3 of Android.

Using the drawing functions in Linux

To use the drawing function in Linux, the QT library (Core and GUI) version 5 (or later) must be installed.

In Ubuntu, this library can be installed with the following commands:

sudo apt-get install libqtcore5
sudo apt-get install libqtgui5

In mandriva 2010 Spring, this library can be installed with the following commands:

urpmi libqtgui5

How to draw?

Drawing in an Image control

To draw in an Image control:

Initialize the drawing in the Image control (dStartDrawing). This initialization is used to allocate a specific memory area for the management of drawings.
Draw with the drawing functions.
If necessary, insert text in your drawings with dText.
Zoom and copy images as required with dCopyImage.
If necessary, save the drawing using the save functions (dSaveImageBMP, dSaveImageGIF, dSaveImageJPEG, dSaveImagePNG).
If necessary, print the file using iPrintImage.
If necessary, destroy the drawing in memory with dEndDrawing.

Remark: Before handling the Image control, check whether the type of the Image or Clickable Image control is "Generated image".

Drawing in an Image variable

To draw in an Image variable, some rules must be complied with:

Declare a variable of type Image.
Initialize the drawing in the variable (dStartDrawing). This initialization is used to allocate a specific memory area for the management of drawings.
Draw with the drawing functions.
If necessary, insert text in your drawings with dText.
If necessary, save the drawing using the save functions (dSaveImageBMP, dSaveImageGIF, dSaveImageJPEG, dSaveImagePNG).
If necessary, print the file using iPrintImage.
If necessary, destroy the drawing in memory with dEndDrawing.

Drawing in browser code

In browser code, transferring the drawing into the image can be quite long (several drawing functions will be used).

To optimize the drawing in the image, the drawing can be displayed once the drawing functions have been used. To do so, simply:

Start the drawing with dStartDrawing using the dForceDisplay constant.
Use the drawing functions to create the drawing.
Use dDisplay to display the drawing in the image.

Related Examples:

Unit examples (WINDEV): The drawing functions

[ + ] Using the main drawing functions of WINDEV to:
- Initialize an Image control for drawing
- Draw simple shapes
- Write a text into a drawing
- Change the color in a drawing

Unit examples (WINDEV): Modifying the Hue, Saturation and Lightness

[ + ] Process on the images via the WLanguage dModifyHSL function.
This function is used to modify the hue, the saturation and the lightness of an image.

Training (WINDEV): WD Java Chart Designer

[ + ] WINDEV enables you to create some Java applications without even knowing Java.
You program with a 5GL (WLanguage) and WINDEV generates the Java code.
The drawing functions of WINDEV are available in Java generation.
This example explains how to create charts with these drawing functions.
Three types of charts are presented in this example:
- the bar chart,
- the scatter chart,
- and the line chart.

Cross-platform examples (WINDEV Mobile): WM Notes

[ + ] This example is using the drawing functions of WLanguage for Android and iOS.
It allows you to draw graphic "notes" and to save them.

Cross-platform examples (WINDEV Mobile): WM System

[ + ] This application is an example of some of the features of WINDEV Mobile available for Android/iOS.
The following system functions are used:
- NFC
- Multimedia control
- Brightness
- Volume
- Wi-Fi
- Bluetooth
- Toast
- Compass
- Accelerometer
- Camera control
- LED
- Vibration
- Notifications
- Drawing functions
- Internet

Training (WEBDEV): WW_Drawing_HTML5

[ + ] WEBDEV includes some drawing functions in browser code, for the browsers that support the HTML5. standard.
This educational example presents:
- an array of drawings,
- and an implementation: the visual choice by the Web user of the categories of seats when making a reservation for a show.

Unit examples (WEBDEV): The drawing functions

[ + ] This example presents the main drawing functions of WEBDEV and it allows you to:
- Initialize an Image control for drawing
- Draw simple shapes
- Write a text in a drawing
- Change the color in a drawing

Unit examples (WINDEV Mobile): The drawing functions

[ + ] Using the main drawing functions:
- Initialize an Image control for drawing
- Draw simple shapes
- Write a text into a drawing
- Define the color in a drawing