{"id":20521,"date":"2016-10-12T10:02:32","date_gmt":"2016-10-12T02:02:32","guid":{"rendered":"http:\/\/localhost\/help\/?page_id=20521"},"modified":"2024-11-04T11:46:26","modified_gmt":"2024-11-04T03:46:26","slug":"simple-line-4-4-1","status":"publish","type":"page","link":"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/simple-line\/simple-line-4-4-1\/","title":{"rendered":"Simple Line (4.4.1)"},"content":{"rendered":"\n

This article applies to the Simple Line in versions 4.4.1 through 4.4.3 of P2 Explorer.\u00a0For help on the latest version, see Simple Line<\/a>.<\/p>\n

Overview<\/h2>\n

The Simple Line draws a line in various directions. It is typically used in mimics and schematics to join different elements. Configuring a line is very simple - you just choose the line direction you want to use. There are no configuration options aside from the style.\u00a0If you are a Style Administrator,\u00a0you can\u00a0add a new Simple Line\u00a0style<\/a>.<\/p>\n

The following diagram shows the configuration editor of the Simple Line:<\/p>\n

\"simple-line-config\"<\/a><\/div>\n
\u00a0<\/div>\n
\n

Tutorial:\u00a0Creating a Basic\u00a0Mimic<\/span><\/h2>\n

If you're unfamiliar with the process of building pages, read the article\u00a0Building an Explorer Page<\/a>.<\/p>\n

In this tutorial, we\u2019ll look at creating a basic\u00a0mimic by adding various components connected with Simple Lines.\u00a0<\/p>\n

\"mimic\"<\/a><\/p>\n

Let\u2019s go through this process, step-by-step.<\/p>\n

Note<\/strong>: This configuration uses the Sample Data <\/em>table\u00a0and datasets that can be optionally made available\u00a0during initial installation and setup. If you don't have access to this data, you will need to adjust the configuration to suit your data at your site.<\/p>\n

\u00a0<\/p>\n

Step 1. Prepare a Studio Page<\/strong><\/p>\n

\"New<\/p>\n

Before you start, click the New Page<\/strong>\u00a0button on the Home tab of the ribbon. Choose the Precision\u00a0layout.<\/p>\n

\"Precision<\/a><\/p>\n

Related: Precision\u00a0Layout<\/a> tutorial<\/p>\n

\u00a0<\/p>\n

Step 2. Add the Images to the Page<\/strong><\/p>\n

\"simple-line-tut-2\"<\/a><\/p>\n

We will start by adding the images to the page, so that we know what we will be connecting. Add 4 Image components, position them in approximately the right locations, and configure them as follows:<\/p>\n

Related: Image<\/a> tutorial<\/p>\n

Image 1<\/strong>:
\n Default Image URL:\u00a0https:\/\/oihelp.corporate.ifs.com\/help\/Images\/Truck_Small.svg<\/em>
\n X: 245
\n Y: 189<\/p>\n

Image 2<\/strong>:
\n Default Image URL:\u00a0https:\/\/oihelp.corporate.ifs.com\/help\/Images\/Crusher_Small.svg<\/em>
\n X: 482
\n Y: 298<\/p>\n

Image 3<\/strong>:
\n Default Image URL:\u00a0https:\/\/oihelp.corporate.ifs.com\/help\/Images\/Stacker_Small.svg<\/em>
\n X: 771
\n Y: 285<\/p>\n

Image 4<\/strong>:
\n Default Image URL:\u00a0https:\/\/oihelp.corporate.ifs.com\/help\/Images\/Stockpile_Large.svg<\/em>
\n X: 832
\n Y: 277
\n Width: 222
\n Height: 104<\/p>\n

\u00a0<\/p>\n

Step 3. Add a Simple Line<\/strong><\/p>\n

\"simple-line-tut-3\"<\/a><\/p>\n

Drag and drop the Simple Line<\/strong> component onto the canvas, positioned approximately as shown in the screenshot above. The Simple Line Component is in the Simple Shapes \"simple-shapes-icon\"\u00a0group.<\/p>\n

\u00a0<\/p>\n

Step 4. Configure the Simple Line<\/strong><\/p>\n

<\/a><\/p>\n

To configure the line, select the direction and cornering you want to apply, from the images in the component editor.<\/p>\n

Use the drag handles to manually adjust the size of the line. Note how the line extends to the bounds of the shape. This means that you can also use it in a grid layout to automatically resize with the page.<\/p>\n

Manually adjusting the size and location of the line using the drag handles can get a bit tricky, and it's often easier to use the arrow keys and move the other components on the page so they are correctly lined up with the line, rather than the other way around. In this example, you can configure the position as follows:<\/p>\n

X: 348
\n Y: 116
\n Width: 380
\n Height: 202<\/p>\n

\u00a0<\/p>\n

Step 5. Add Another Simple Line<\/strong><\/p>\n

\"simple-line-tut-5\"<\/a><\/p>\n

Add a second simple line to join the crusher and stacker. Straight lines are a bit easier to manually reposition, or you can use the following settings:<\/p>\n

X: 550
\n Y: 308
\n Width: 240
\n Height: 68<\/p>\n

\u00a0<\/p>\n

Step 6. Add and Configure the Data Labels<\/strong><\/p>\n

\"simple-line-tut-6\"<\/a><\/p>\n

Add 2 Data Labels to the page, position them above the lines, and configure them as follows.<\/p>\n

Related: Data Label<\/a> tutorial<\/p>\n

Data Label 1<\/strong>:<\/p>\n

Open the Value\u00a0<\/strong>Data Selector by clicking on the field. Click the Dataset \"Dataset\u00a0tab, and fill in the fields as follows:<\/p>\n