{"id":31956,"date":"2024-11-04T13:55:46","date_gmt":"2024-11-04T05:55:46","guid":{"rendered":"http:\/\/localhost\/help\/?page_id=31956"},"modified":"2024-11-05T09:43:34","modified_gmt":"2024-11-05T01:43:34","slug":"simple-line","status":"publish","type":"page","link":"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/simple-line\/","title":{"rendered":"Simple Line"},"content":{"rendered":"\n

This article applies to versions 4.11.1 and later of IFS OI Explorer. Note, some screenshots on this page may be of earlier versions. For more, see Release History<\/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 on a page.<\/p>\n

How to configure a line:<\/p>\n

    \n
  1. Choose the direction of the line.<\/li>\n
  2. Choose the arrowheads.<\/li>\n
  3. Choose the style.<\/li>\n
  4. Add conditions.<\/li>\n
  5. Optionally override the thickness and line style that come with the style.\u00a0<\/li>\n<\/ol>\n

    The following diagram shows the component editor of the Simple Line, with the component on its left:<\/p>\n

    \"\"<\/a><\/p>\n\n\n\n\n\n\n
    1<\/strong><\/td>\nChoose a line type.<\/td>\n<\/tr>\n
    2<\/strong><\/td>\nSelect an arrowhead for the beginning and end of the line.<\/td>\n<\/tr>\n
    3<\/strong><\/td>\n\n

    A style can be selected, and multiple conditions can be added.<\/p>\n

    The conditions enable a logic flow to be configured, resulting in changes in the line appearance by a different Style<\/strong> being applied when the conditions are met.<\/p>\n

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

    Related: Data Selector.<\/a><\/p>\n<\/td>\n<\/tr>\n

    4<\/strong><\/td>\nA different thickness and line style can be configured and will override the style selection.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

    \u00a0Related: Adding a Simple Line style<\/a><\/p>\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 mining mimic by adding various components connected with Simple Lines. At the end of the tutorial, your page should look like this:<\/p>\n

    \"\"<\/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

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

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

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

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

    \u00a0<\/p>\n

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

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

    Explorer comes with several pre-configured mining images in the component toolbox, available in the 'Other' \"\"\u00a0category.\u00a0<\/p>\n

    We will start by adding some of these images to the page. Add a Crusher, Stacker, and Stockpile, and configure them as follows:<\/p>\n\n\n\n\n\n
     <\/td>\nCrusher<\/strong><\/td>\nStacker<\/strong><\/td>\nStockpile<\/strong><\/td>\n<\/tr>\n
    X<\/strong><\/td>\n512<\/td>\n780<\/td>\n841<\/td>\n<\/tr>\n
    Y<\/strong><\/td>\n318<\/td>\n278<\/td>\n230<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

    There is no pre-configured image for a truck, so we'll add one using the Image component, which is in the 'Display' \"Display\u00a0category. Drag and drop this onto the page and configure it as follows:<\/p>\n

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

    Image<\/strong>:
    \nDefault Image URL:\u00a0https:\/\/oihelp.corporate.ifs.com\/help\/Images\/Truck_Small.svg<\/em>
    \nX: 245
    \nY: 189<\/p>\n

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

    \u00a0<\/p>\n

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

    \"\"<\/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 Display \"Display\u00a0group.<\/p>\n

    \u00a0<\/p>\n

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

    \"\"<\/a><\/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

    Configure the line as follows:<\/p>\n\n\n\n\n\n\n\n\n\n
    Direction<\/strong><\/td>\nLeft-Bottom Corner<\/td>\n\"\"<\/td>\n<\/tr>\n
    Start Arrow Type<\/strong><\/td>\nDiamond<\/td>\n\"\"<\/td>\n<\/tr>\n
    Start Arrow Size<\/strong><\/td>\n10<\/td>\n <\/td>\n<\/tr>\n
    End Arrow Type<\/strong><\/td>\nOpen Arrow<\/td>\n\"\"<\/td>\n<\/tr>\n
    End Arrow Size<\/strong><\/td>\n10<\/td>\n <\/td>\n<\/tr>\n
    Thickness<\/strong><\/td>\n1<\/td>\n <\/td>\n<\/tr>\n
    Position in Precision Layout<\/strong><\/td>\nX: 326
    \nY: 116
    \nWidth: 402
    \nHeight: 195<\/td>\n    		Tip:\u00a0Manually 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.\u00a0<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

    \u00a0<\/p>\n

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

    Add a second simple line to join the crusher and stacker. Straight lines are a bit easier to manually position.\u00a0Configure the line as follows:<\/p>\n

    \"\"<\/a><\/p>\n\n\n\n\n\n\n\n\n
    Direction<\/strong><\/td>\nHorizontal<\/td>\n\"\"\u00a0<\/td>\n<\/tr>\n
    End Arrow Type<\/strong><\/td>\nOval<\/td>\n\u00a0\"\"<\/td>\n<\/tr>\n
    End Arrow Size<\/strong><\/td>\n10<\/td>\n <\/td>\n<\/tr>\n
    Thickness<\/strong><\/td>\n3<\/td>\n <\/td>\n<\/tr>\n
    Line Style<\/strong><\/td>\nSolid<\/td>\n <\/td>\n<\/tr>\n
    Position in Precision Layout<\/strong><\/td>\nX: 547
    \nY: 302
    \nWidth: 240
    \nHeight: 80<\/td>\n    		 <\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

     <\/p>\n

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

    \"\"<\/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\n\n\n\n\n\n\n\n
     <\/td>\nData Label 1<\/strong><\/td>\nData Label 2<\/strong><\/td>\n<\/tr>\n
    Value<\/strong><\/td>\n\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

    		\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

    Decimals<\/strong><\/td>\n\"\"<\/a><\/td>\n\"\"<\/a><\/td>\n<\/tr>\n
    Alignment<\/strong><\/td>\n\"\"<\/td>\n\"\"<\/td>\n<\/tr>\n
    Position in Precision Layout<\/strong><\/td>\nX: 401
    \nY: 177
    \nWidth: 76
    \nHeight: 41<\/td>\n    		X: 637
    \nY: 297
    \nWidth: 76
    \nHeight: 41<\/td>\n<\/tr>\n
     <\/td>\n\"\"<\/a><\/td>\n\"\"<\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

     <\/p>\n

    Step 7. Add Text Labels<\/strong>\u00a0<\/p>\n

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

    Add 2 Text\u00a0Labels to the page, position them below\u00a0the lines, and configure them as follows.<\/p>\n

    Related: Text Label<\/a> tutorial<\/p>\n\n\n\n\n\n\n\n\n
     <\/td>\nText Label 1<\/strong><\/td>\nText Label 2<\/strong><\/td>\n<\/tr>\n
    Content<\/strong><\/td>\nTonnes per load<\/td>\nTonnes crushed per hour<\/td>\n<\/tr>\n
    Style<\/strong> (note your styles may differ)<\/td>\nSmall Text Label<\/td>\nSmall Text Label<\/td>\n<\/tr>\n
    Alignment<\/strong><\/td>\n\"\"<\/td>\n\"\"<\/td>\n<\/tr>\n
    Position in Precision Layout<\/strong><\/td>\nX: 380
    \nY: 219
    \nWidth: 127
    \nHeight: 34<\/td>\n    		X: 608
    \nY: 346
    \nWidth: 147
    \nHeight: 30<\/td>\n<\/tr>\n
     <\/td>\n\"simple-line-tut-7a\"<\/a><\/td>\n\"simple-line-tut-7b\"<\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

    \u00a0<\/p>\n

    Step 8. \u00a0Set\u00a0the Defaults<\/strong><\/p>\n

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

    At the moment, the page shows the default values that have been set for the Truckloads\u00a0<\/em>dataset in IFS OI Server. But we are interested in the values for the Brumby<\/em> mine.<\/p>\n

    Let\u2019s change the default data that is displayed. We do this by creating defaults for the variables\u00a0specified in the components in the previous steps. The variable we are most interested in is the selectedEntity<\/strong>\u00a0variable. Although this variable exists as a default value, no value has been assigned to it. We want the initial value of the Data Labels to show data\u00a0for the mine, Brumby<\/i>. We can set that here.<\/p>\n