Overview
Precision Layout is typically used for pages that contain schematic diagrams, or for other designs where using a Grid Layout is too restrictive or complicated.
This layout lets you put components anywhere on a page and make them any size. It offers more flexibility for single components than a Grid Layout, however because it has a fixed size it doesn’t scale between small and large resolutions.
A Precision Layout can also be inserted into a Grid Layout, and vice versa. You can use this feature to manipulate the resolution of the page so that it is fixed in one part and flexible in another.
Tutorial
Precision Layout has no specific parameters. You can begin using this layout by simply dragging the component and dropping it onto the canvas.
In this topic, we'll show you how to use the Precision Layout to design a simple schematic.
Let's look at how we're actually going to do this, step-by-step.
Step by Step: Creating a Schematic Using Precision Layout
Before you start, open a new tab in Explorer and click the "Create a New Page in Studio Mode" thumbnail.
If you have access to the training environment, you can follow the steps exactly as outlined here. Otherwise, you will need to adjust the configuration to suit your data.
Step 1. Open a blank page
If you want the entire display to be precision layout, you would normally simply select Precision Layout. But for this tutorial, let's select Blank, so we can get a better understanding of how the Precision Layout works.
- If you're feeling adventurous, you could also start with a grid layout and drag the Precision Layout component onto a grid cell. If you do this, the Precision Layout component can only extend to the maximum size of that cell.
Step 2. Add a Precision Layout
Drag and drop the Precision Layout from the components list. Precision Layout has no configuration options, so you don't need to do anything else here. It will automatically expand to take up the entire canvas. The Precision Layout is in the Layout 
group.
- If you add a Precision Layout to a Grid Layout, it will also expand to take up the entire grid cell that you've added it to.
Step 3. Add the Text Label for the title
This step adds the title to the page, which will automatically update depending on which entity the user selects.
- Drag and drop the Text Label component onto the canvas.
- You will notice that by default it has a square shape, and 4 drag handles will appear in the corners.
- Move the label to the upper left corner, and resize it to the size that you think the text will need.
- In the configuration options, complete the following:
- Content: Well Overview - {{selectedEntity}}
- Select the Title check box
- Select the Underline check box
Step 4. Add the Date Picker
This step adds a date picker to the page, which will drive the data displayed on the schematic.
- Drag and drop the Date Picker component onto the canvas.
- Move it to the upper right corner and resize it appropriately.
You don't need to change the configuration options if you don't want to - later we will add page defaults that match these events.
Step 5. Add the Entity Selector
This step allows the user to select an entity, which will drive the data displayed on the schematic.
- Drag and drop the Entity Selector control onto the canvas.
- Move it to the left side and resize it appropriately.
- Configure it as follows:
- Selected Entity: selectedEntity
- Template Filter: (Text) Well
- Number of Selections: 1
You don't need to change the Selected Entities and Hierarchy Name configuration options if you don't want to - in the next step we will add event defaults for them.
Step 6. Add the data
Before we can display the data on the page, we need to add the source data.
- Below the canvas, click the button labelled "Add Data".
- Choose the data you are going to use. For this tutorial, we are using a dataset called "OilPressure".
- In the configuration options, specify the following:
- Name: OilPressure1 (this is automatically added)
- Query: OilPressure (this is the query in P2 Server that is being used to return the data)
- Parameters - well: specify an event named selectedEntity
- Parameters - time: specify an event named endTime
These events correspond to the event defaults we created earlier, and will feed the other components on the page to display values for the selected date and entity.
Step 7. Add the background image
The background image provides the user with the ability to visualise the data. The image must be stored on a secure website (using https) accessible over the network.
- Drag and drop the Embed Page component onto the canvas.
- Move it to the right of the Entity Selector and resize it appropriately.
- In the Content box, type the full URL of the image e.g. https://cadrondev01.petroleumplace.com/explorerimages/GasLift.gif
Step 8. Add the Text Label for the tubing head
Now we'll start adding the cool stuff that will make our schematic show us relevant data. But a data point on its own is confusing if it's not labelled, so let's add a label first. We're going to start with the tubing head pressure.
- Drag and drop the Text Label component onto the canvas.
- Position it so that it sits above the tubing head in the background image, and resize it appropriately.
- In the configuration options, complete the following:
- Content: Tubing Head
- Select the Title check box
Step 9. Set the event defaults
This step is where the first bit of magic happens. Click the Event Defaults button in the top right of the toolbar, and add the following events:
- startTime (of type Datetime) - select a start date that you know will contain data e.g. 08/01/2011 12:00:00 AM
- endTime (of type Datetime) - select an end date that you know will contain data e.g. 08/02/2011 12:00:00 AM
- selectedEntity (of type Text) - specify an entity that you know is a well and has data associated with it e.g. Schola-C-1
By doing this, the Entity Selector and Date Picker automatically take in these default values, so we will immediately see some actual data in the next step.
Step 10. Add the Data Label for the tubing head
The actual value of the tubing head pressure is displayed by using a Data Label.
- Drag and drop the Data Label component onto the canvas.
- Position it so that it sits above the tubing head in the background image, and below the tubing head Text Label.
- Resize it appropriately.
- In the configuration options, type the following:
- Source Data: OilPressures1
- Value Column: THP_psi
Step 11. Add the label for the measurement units
We'll use another Text Label for the measurement units.
- Drag and drop the Text Label component onto the canvas.
- Position it so that it sits to the right of the Data Label for the tubing head, and resize it appropriately.
- In the configuration options, type the following content: psi.
You may notice that it starts to get a bit tricky to get the alignment just so. Simply persevere and it will work out.
Step 12. Add the labels for the remaining data
We have a few other values we'd like to display on this schematic, so let's go ahead and do that one by one. Refer to the above image and follow steps 8-11 to add the following:
- Casing A
- Casing B
- GL Choke (you will need to add another dataset (Chokes) to get this value, see Step 6)
- Gas Lift
Step 13. All done!
Congratulations! You now have a schematic page with data that will update according to the selected date and entity.
- Click the preview
button on the Studio toolbar to see what your page will look like in run-time. - Select different dates and entities and observe the changes in the data.
Don't forget to save your page!