ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

Help / Developing an application or website / Controls, windows and pages / Controls: Available types / Diagram Editor control
  • Overview
  • Principle
  • How to?
  • Creating the plan
  • Configuring seats
  • User interface: creating the control
  • User interface: initializing the diagram
  • User interface: click
  • User interface: hover (WINDEV only)
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
Overview
The Diagram Editor control allows end users to create and edit diagrams.
For example, you can use a seating chart (stadium, venue, offices, etc.) to allow users to book seats. In this case, end users should be able to click the plan directly to select their seats.
Remark: In this example, end users will be able to book seats, but the same principle can be used in many other types of applications.
Principle
Users will handle the plan via the Diagram Editor control. This plan is read-only. The user should not edit the diagram, but interact with its elements. In this case, the user must be able to select seats, without modifying the plan.
The Diagram Editor control has different events to support interactions:
  • double click on a shape,
  • WINDEV mouse hover,
  • WINDEV left button up,
  • select a shape,
  • ...
This means that:
  • WINDEV hovering over an element opens a tooltip.
  • users can click or double-click a shape to select it (select and book seats in this case). The color or image of the seat can change depending on whether it is available or reserved.
How to?
These are the steps to create an interactive diagram:
  1. Creating the plan.
  2. Configuring seats.
  3. Creating the user interface:

Creating the plan

The seating plan is a diagram created with the Diagram Editor control. This plan contains different shapes that represent available seats.
This plan is saved as a ".wddiag" file. Users will then be able to select seats in the plan using a Diagram Editor control.

Configuring seats

Once the plan is created, each element must be "configured".
In the case of a concert hall for example, each seat has a name and a status. The status can be easily saved in the Note property of the diagShape variable.
This information must be configured in the diagram (in the ".wddiag" file corresponding to the plan).
Tips:
  • This can be done using a specific window. This window will allow the author of the plan to name each seat and associate a comment if necessary.
  • Booked / available seats can be stored in an array, file, etc. to easily check for available seats.

User interface: creating the control

To successfully book seats, the user should not be able to edit the diagram in the Diagram Editor control.
To create the Diagram Editor control:
  • In WINDEV: on the "Creation" tab, in the "Graphic controls" group, expand "Office" and select "Diagram Editor".
  • In WEBDEV: on the "Creation" tab, in the "Graphic controls" group, click "Diagrams".
To make the Editor Diagram control read-only:
  1. Open the control description window.
  2. To hide the toolbars and panels: In the "General" tab, disable toolbars and panels.
  3. To make the control "read-only", use one of the following methods:
    • WINDEV Method 1: In the "UI" tab of the control description window, select "Read-only".
    • Method 2: in the code, use the State property to make the control unresponsive.

User interface: initializing the diagram

The initialization of the diagram consists of:
  1. Loading the "blank" plan in the interface (DiagramLoad): the "blank" plan corresponds to the ".wddiag" file created previously.
    Example:
    diagControl is Diagram
    diagControl <- DIAGEDT_Plan
    diagControl.Load("seating_plan.wddiag")
    // Make the diagram unresponsive if necessary
    DIAGEDT_Plan.State = Inactive
  2. Initializing the plan to view the seats that are already booked, for example. To do so, simply handle the shape corresponding to the seat using a variable of type diagShape. You can associate a note, change the border, background color, etc, ...
    Example:
    ShapeInDiagram is diagShape
    FOR EACH ShapeInDiagram OF diagControl.Shape
    sShapeName = ShapeInDiagram.Name // Gets the name of the shape
    // Compare shape name to the list of reserved seats
    // => Specific process for reserved seats:
    // applies a red color to the seat and associates "Reserved" to the note
    // => Standard process for available seats
    END
Remark: the list of reserved seats can be stored in an array, a file, etc.

User interface: click

In this example, the Diagram Editor control is read-only: the selected shape cannot be directly handled using the Selection property. To identify the seat that was clicked, the DiagramInfoXY function should be used.
In WINDEV, when the end user clicks an available seat in the plan, this seat must be selected. Simply use the "Left button up" event in the Diagram Editor control. DiagramInfoXY allows you to identify the shape that was clicked.
diagControl is Diagram
...
// Gets the index of the shape under the cursor
nIndex is int
nIndex = DiagramInfoXY(DIAGEDT_Plan, MouseXPos(mpControl), MouseYPos(mpControl))
// The selected shape corresponds to diagControl.Shape[nIndex]
All the characteristics of the selected shape will be available.
This works slightly differently in WEBDEV. In browser code, only the "Double click on a shape" event is available. Moreover, diagShape variables are not accessible in browser code. To manage double-clicks, you should create a Button control. This Button control contains server and browser code that allows retrieving the mouse position and selecting seats:
  • Browser code:
    • Button control initialization (server code):
      GLOBAL
      XPos, YPos are int <browser synchronized>
    • Click on the Button control - Browser side: Retrieve the position:
      (XPos, YPos) = (MouseXPos(mpControl), MouseYPos(mpControl))
    • Click on the Button control - Server side (AJAX enabled): Get the shape under the cursor:
      diagControl is Diagram
      ...
      // Gets the index of the shape under the cursor
      nIndex is int
      nIndex = DiagramInfoXY(DIAGEDT_Plan, XPos, YPos)
      // The selected shape corresponds to diagControl.Shape[nIndex]
All the characteristics of the selected shape will be available.

User interface: hover (WINDEV only)

You can make a tooltip appear when the user hovers over a seat, using the "Mouse hover" event of the Diagram Editor control. As with clicks, you can use DiagramInfoXY to determine which seat is being hovered. Simply use the ToolTip property of the Diagram Editor control to display the desired information.
Minimum version required
  • Version 27
This page is also available for…
Comments
Click [Add] to post a comment

Last update: 05/23/2023

Send a report | Local help