ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

Help / WLanguage / WLanguage functions / Controls, pages and windows / Drawing functions
  • Overview
  • Prerequisite depending on the platform
  • Pattern and 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
WindowsLinuxUniversal Windows 10 AppJavaReports and QueriesUser code (UMC)
WEBDEV
WindowsLinuxPHPWEBDEV - Browser code
WINDEV Mobile
AndroidAndroid Widget iPhone/iPadIOS WidgetApple WatchMac CatalystUniversal Windows 10 App
Others
Stored procedures
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
WEBDEV - Browser code

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.
WINDEVWEBDEV - Server codeLinux

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:
  1. Initialize the drawing in the Image control (dStartDrawing). This initialization is used to allocate a specific memory area for the management of drawings.
  2. Draw with the drawing functions.
  3. If necessary, insert text in your drawings with dText.
  4. Zoom and copy images as required with dCopyImage.
  5. If necessary, save the drawing using the save functions (dSaveImageBMP, dSaveImageGIF, dSaveImageJPEG, dSaveImagePNG).
  6. If necessary, print the file using iPrintImage.
  7. If necessary, destroy the drawing in memory with dEndDrawing.
WEBDEV - Server code 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:
  1. Declare a variable of type Image.
  2. Initialize the drawing in the variable (dStartDrawing). This initialization is used to allocate a specific memory area for the management of drawings.
  3. Draw with the drawing functions.
  4. If necessary, insert text in your drawings with dText.
  5. If necessary, save the drawing using the save functions (dSaveImageBMP, dSaveImageGIF, dSaveImageJPEG, dSaveImagePNG).
  6. If necessary, print the file using iPrintImage.
  7. If necessary, destroy the drawing in memory with dEndDrawing.
WEBDEV - Browser code

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:
  1. Start the drawing with dStartDrawing using the dForceDisplay constant.
  2. Use the drawing functions to create the drawing.
  3. Use dDisplay to display the drawing in the image.
Related Examples:
The drawing functions 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
Modifying the Hue, Saturation and Lightness 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.
WD Java Chart Designer 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.
WM Notes 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.
WM System 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
WW_Drawing_HTML5 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.
The drawing functions 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
The drawing functions 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
Minimum version required
  • Version 9
This page is also available for…
Comments
Click [Add] to post a comment

Last update: 06/22/2023

Send a report | Local help