Editing Screens

This section uses a bubble chart as an example to describe how to edit a screen.

Screen Development Page

On the screen development page, you can design and develop screens based on service requirements, add components, configure page layouts, associate data sources, and publish screens.

**Table 1** Functional area description
No.	Functional Area	Description
1	Component area	In the component area, DLV provides various components for you to add them to the canvas. For details about the components, see Overview.
2	Layer area	In the layer area, the name and thumbnail of each layer in a screen can be displayed, facilitating layer search. For details about layer management, see Managing Layers.
3	Canvas	Canvas of the screen.
4	Canvas zoombar	Drag the zoombar or click or to zoom in or zoom out the canvas. Click to adapt the canvas to the screen.
5	Horizontal ruler	When the button in the upper left corner of the canvas displays as , move the pointer to the horizontal rule area. When the pointer changes to a bidirectional arrow and a red auxiliary line is displayed on the canvas, double-click the mouse to add a red auxiliary line.
6	Vertical ruler	When the button in the upper left corner of the canvas displays as , move the pointer to the vertical rule area. When the pointer changes to a bidirectional arrow and a red auxiliary line is displayed on the canvas, double-click the mouse to add a red auxiliary line.
7	Configuration panel	When you select a screen or a component, the configuration information is displayed on the configuration panel. For details about how to configure a screen, see Editing Screens. For details about how to configure components, see Component Guide.
8	Publish area	The buttons in the publish area are described as follows: : return to the DLV console homepage. The modifications made on the screen development page are automatically saved. : preview a screen. During the screen development, you can preview the screen effect whenever you want. For details, see Previewing Screens. : publish a screen. After a screen is developed, you can share your screen with other users after publishing it. For details, see Publishing Screens.
9	Panel control area	Used to control the area displayed or hidden on the screen development page.
10	Layout	You can select multiple components to align them.

Editing Screens

Log in to the DLV console.
On the Screens page, locate the screen to be edited and click on the screen. The screen development page is displayed.

Figure 1 Editing a screen
On the canvas, set the screen parameters on the Page Settings panel on the right.
- Screen Size: width and height of the canvas. Unit: pixel.
- Background Color: background color of the screen.
- Background Image: You can upload a custom image as the background image of the screen. If this parameter is not set, no background image is available by default.
- Display Mode: zoom mode of the screen.
- Thumbnail: Click Capture Image to take a thumbnail of the current screen as the screen cover. When you search for the screen on the Screens page, you can see the thumbnail.
  
  Using a thumbnail as a screen cover may disclose your data.
- Reset: Click Reset Background to restore the default background color and image.
- Adhesion Sensitivity: If this parameter is set to No fill, this function is disabled. If this parameter is set to another value, when you drag a component to the position close to another component or auxiliary line and the distance between them is less than or equal to this value, the component automatically adheres to the other component or auxiliary line. Unit: pixel.
- Allow export: If this parameter is selected, the screen can be exported as an image or a PDF file.
- Global Parameters: global interaction parameters.
Figure 2 Screen page setting
Add and manage components.

Add required components to the canvas. For details, see Managing Components.
Manage layers.

After adding a component, you can manage the layer. For details, see Managing Layers.

Arranges Components

After adding components to the canvas, you can select multiple components and click the buttons in the layout area above the canvas to arrange the components.

Figure 3 Layout

Coordinates and Coordinate Auxiliary Lines of Components

In the upper left and lower right corner of a component, the coordinates and coordinate auxiliary lines of the component are displayed.

Figure 4 Coordinates and coordinate auxiliary lines of a component
Click to enlarge

Auxiliary Lines

Adding auxiliary lines
When the button in the upper left corner of the canvas displays as , move the pointer to the top of the canvas or on the left of the ruler. When the pointer changes to a bidirectional arrow and a red auxiliary line is displayed on the canvas, click the mouse to add a red auxiliary line. You can add multiple horizontal or vertical auxiliary lines to the canvas.

Figure 5 Auxiliary lines
Adjusting positions of auxiliary lines
Move over a red auxiliary line and hold down the left mouse button while dragging the auxiliary line until to a desired position on the canvas. The distance between the auxiliary line and the left, right, upper, and lower boundaries of the canvas is displayed on the ruler.
Showing/Hiding auxiliary lines
Click in the upper left corner of the canvas to hide all auxiliary lines. In this case, you cannot add auxiliary lines.

To display all auxiliary lines again, click in the upper left corner of the canvas. You can add auxiliary lines.

Figure 6 Showing/Hiding auxiliary lines
Deleting auxiliary lines
In the canvas, move over a red auxiliary line. When the pointer changes to a bidirectional arrow, hold down the left mouse button while dragging the auxiliary line to remove it from the canvas. Alternatively, right-click the auxiliary line and choose Delete from the shortcut menu.