NEXTO XF #83 – Changing the screen background and adding basic objects

Nexto XF #83 – Changing the screen background and adding basic objects

The objective of this tutorial is to explain how to add web server functionality to the XF325-W CPU

Components

Equipment: 1 computer/laptop.

                       1 XF325-W

Software:  MasterTool X

Tutorial Sections

1. ARCHITECTURE
2. DEVELOPMENT

1. ARCHITECTURE

A computer/laptop is required to use MasterTool X.

Figure 1. Computer running MasterTool X

2. DEVELOPMENT

Visual editing of screens in the Web Server allows users to customize the interface, making it more intuitive and suitable for the application. The main actions include changing the background color and inserting/configuring graphic objects.

Changing the page background color

To change the screen background:

1. In the project tree, access Visualization (created page)
2. Open the desired page
3. Right-click an empty area of the screen
4. Select the Background option
5. Enable the Use color checkbox

After that:

1. Choose the desired color:
   • Select a predefined color
   • Or click the button with three dots (...) to open the full selector

In this selector, you can:

• Choose custom colors
• Define specific shades
• Click OK
• Click OK again to confirm

Figure 2. Adding a background color to the screen using predefined colors

Figure 3. Adding a background color to the screen using custom colors

Inserting objects on the screen

To add graphic elements:

1. Go to the Visualization Toolbox (right side)
2. Choose a category

In the example:

• Category: Basic
• Select an object (e.g., Rectangle)
• Click and drag it onto the screen

Figure 4. Adding basic objects to the screen

Adjusting the object size

After inserting the object:

• Click it
• Use the edges to:
  • Increase the size
  • Decrease the size

Simply drag with the mouse as needed.

Figure 5. Adjusting the dimensions of basic objects on the screen

Object properties

When the object is selected:

• The Toolbox is replaced by the Properties window (right side)

In this area, the user can configure:

• Object color
• Text (when applicable)
• Association with variables
• Behavior
• General appearance

Association with variables

One of the main features is:

• Linking objects to PLC variables

Example:

• A rectangle can change color according to a Boolean variable
• Text can display variable values

Figure 6. Parameterizing the properties of basic objects on the screen