Creating an interactive diagram

ONLINE HELP
WINDEV, WEBDEV AND WINDEV MOBILE

Version:

Home | Sign in | English

This content has been translated automatically. Click here to view the French version.

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
End-user interface: field creation
End-user interface: diagram initialization
End-user interface: click management
End-user interface: hover management (WINDEV only)

WINDEV

WEBDEV

WINDEV Mobile

Others

See also

Creating an interactive diagram

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.

Note: This is a case study in seat reservation, 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,
mouse hover,
left button up,
select a shape,
...

This means that:

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:

Creating the plan.
Configuring seats.
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.

End-user interface: field creation

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: in the "Creation" pane, in the "Graphic controls" group, pull down "Office" and select "Diagram editor"..
In WEBDEV: in the "Creation" pane, in the "Graphic controls" group, click on "Diagrams"..

To make the Editor Diagram control read-only:

Open the control description window.
To hide toolbars and panels: In the "General" tab, deactivate the display of toolbars and panels..
To make the control "read-only", use one of the following methods:
- Method 1: In the "UI" tab of the control description window, select the "Read-only" option.
- Method 2: use the State property to make the field inactive..

End-user interface: diagram initialization

The initialization of the diagram consists of:

Load the "empty" plan into the interface (function DiagramLoad): the "empty" plan corresponds to the ".wddiag" file created previously..
Example:

diagChamp is Diagram
diagChamp <- EDIAG_Plan
diagChamp.Charge("plan_salle.wddiag")
// Rendre le diagramme inactif si nécessaire
EDIAG_Plan.Etat = Inactive

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:

FormeDuDiagramme is diagShape
FOR EACH FormeDuDiagramme OF diagChamp.Shape
	sNomForme = FormeDuDiagramme.Name // récupère le nom de la forme
	// Comparaison du nom de la forme à la liste des places réservées
	// => Traitement spécifique des places réservées: 
	// 	colore la place en rouge et associe "Réservé" à la note
	// => Traitement standard des places non réservées
END

Note: the list of reserved places can be presented in an array, a file, etc.

End-user interface: click management

In this example, the Diagram Editor control is read-only: it is not possible to directly manage the selected shape 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.

diagChamp is Diagram
...
// Récupère l'indice de la forme sous la souris
nIndice is int
nIndice = DiagramInfoXY(EDIAG_Plan, MouseXPos(mpControl), MouseYPos(mpControl))
// La forme sélectionnée correspond à diagChamp.Forme[nIndice]

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
	posX, posY are int <browser synchronized>

Browser click on the field Button: Retrieve position:

(XPos, YPos) = (MouseXPos(mpControl), MouseYPos(mpControl))

Server-click on Button field (AJAX enabled): Retrieve shape under mouse:

diagChamp is Diagram
...
// Récupère l'indice de la forme sous la souris
nIndice is int
nIndice = DiagramInfoXY(EDIAG_Plan, posX, posY)
// La forme sélectionnée correspond à diagChamp.Forme[nIndice]

All the characteristics of the selected shape will be available.

End-user interface: hover management (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.