{"id":18513,"date":"2017-12-20T10:27:21","date_gmt":"2017-12-20T02:27:21","guid":{"rendered":"http:\/\/localhost\/help\/?page_id=18513"},"modified":"2024-10-23T14:20:50","modified_gmt":"2024-10-23T06:20:50","slug":"level-meter","status":"publish","type":"page","link":"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/level-meter\/","title":{"rendered":"Level Meter"},"content":{"rendered":"\n<p class=\"left-bar\">This article applies to versions 4.4.2 and later of IFS OI Explorer. For more, see <a href=\"#Release_History\">Release History<\/a>.<\/p>\n<h2 class=\"page-subheading\">Overview<\/h2>\n<p class=\"overview\">The Level Meter is used for displaying level measurements against defined limits, called alarm thresholds.<\/p>\n<p class=\"intro-text\">The component changes in appearance when limits\/alarm thresholds are exceeded.<\/p>\n<p class=\"intro-text\">The measured value and any of the limits can be fixed or variable, using tags, attribute values, dataset values or a fixed or variable value defined in Studio.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Level-Meter-Intro-Pic.png\" rel=\"lightbox-0\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-18521 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Level-Meter-Intro-Pic.png\" width=\"187\" height=\"239\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Level-Meter-Intro-Pic.png 187w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Level-Meter-Intro-Pic-117x150.png 117w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Level-Meter-Intro-Pic-19x24.png 19w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Level-Meter-Intro-Pic-28x36.png 28w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Level-Meter-Intro-Pic-38x48.png 38w\" sizes=\"auto, (max-width: 187px) 100vw, 187px\" \/><\/a><\/p>\n<p class=\"intro-text\">For example, you can configure a level meter to compare the actual value of the selected storage tank's level against limits defined for that tank, or against tags that contain fixed values for the various limits.<\/p>\n<p class=\"left-bar-p2blue\">Related: <a title=\"Using the Process Controls\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/using-the-page-controls\/using-the-process-controls\/\">Using the Process Controls<\/a>\u00a0for users in display mode, Adding a <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/explorer-styles\/styling-displays\/\">Level Meter style<\/a>, <a title=\"Pressure Meter\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/pressure-meter\/\">Pressure Meter<\/a>, <a title=\"Temperature Meter\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/Temperature -meter\/\">Temperature Meter<\/a>, <a title=\"Gauge\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/gauge\/\">Gauge<\/a><\/p>\n<hr \/>\n<h2 class=\"page-subheading\">Properties of the Level Meter<\/h2>\n<p class=\"intro-text\">This section describes what needs to be configured in the Level Meter, in three main sections:<\/p>\n<ul class=\"intro-text\">\n<li>Minimum, Maximum and Limit Thresholds<\/li>\n<li>Measured Data<\/li>\n<li>Appearance<\/li>\n<\/ul>\n<table class=\"table-toc\" style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td style=\"padding-left: 5px;\" width=\"250\">\n<table>\n<tbody>\n<tr>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Level-Meter-Properties-1-1.png\" rel=\"lightbox-1\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-18586 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Level-Meter-Properties-1-1.png\" width=\"406\" height=\"891\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Level-Meter-Properties-1-1.png 406w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Level-Meter-Properties-1-1-68x150.png 68w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Level-Meter-Properties-1-1-11x24.png 11w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Level-Meter-Properties-1-1-16x36.png 16w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Level-Meter-Properties-1-1-22x48.png 22w\" sizes=\"auto, (max-width: 406px) 100vw, 406px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<td style=\"padding-left: 5px;\" width=\"250\">\n<table>\n<tbody>\n<tr>\n<td><strong>1. Limits<\/strong><\/td>\n<\/tr>\n<tr>\n<td>Set limits from <em>Low<\/em> through to <em>High High<\/em>, as well as a <em>Minimum<\/em> and a <em>Maximum<\/em> value.<\/td>\n<\/tr>\n<tr>\n<td><strong>2. Measured Data<\/strong><\/td>\n<\/tr>\n<tr>\n<td>Configure the data to measure against the different thresholds.<\/td>\n<\/tr>\n<tr>\n<td><strong>3. Appearance<\/strong><\/td>\n<\/tr>\n<tr>\n<td>This section has a number of options for configuring the meter's appearance in <em>Display\u00a0Mode<\/em>.<\/td>\n<\/tr>\n<tr>\n<td><strong>4. Position in Precision Layout<\/strong><\/td>\n<\/tr>\n<tr>\n<td>This section is available if the component is on a Precision Layout.<\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/06\/Position-in-Precision-Layout.png\" rel=\"lightbox-2\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-16308\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/06\/Position-in-Precision-Layout.png\" width=\"280\" height=\"159\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/06\/Position-in-Precision-Layout.png 330w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/06\/Position-in-Precision-Layout-150x85.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/06\/Position-in-Precision-Layout-24x14.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/06\/Position-in-Precision-Layout-36x20.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/06\/Position-in-Precision-Layout-48x27.png 48w\" sizes=\"auto, (max-width: 280px) 100vw, 280px\" \/><\/a><\/td>\n<\/tr>\n<tr>\n<td><strong>5. Position in Grid Layout<\/strong><\/td>\n<\/tr>\n<tr>\n<td>This section is available if the component is on a Grid Layout.<\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/06\/Position-in-Grid-Layout.png\" rel=\"lightbox-3\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-16307\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/06\/Position-in-Grid-Layout.png\" width=\"280\" height=\"90\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/06\/Position-in-Grid-Layout.png 329w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/06\/Position-in-Grid-Layout-150x48.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/06\/Position-in-Grid-Layout-24x8.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/06\/Position-in-Grid-Layout-36x12.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/06\/Position-in-Grid-Layout-48x15.png 48w\" sizes=\"auto, (max-width: 280px) 100vw, 280px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<td>&nbsp;<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"intro-text\">As well as defining the measured values and limits, you can define a label and units, and you can configure whether to show the measured value and label, alarm indicator and the limits.<\/p>\n<h3>Minimum, Maximum and Limits<\/h3>\n<p class=\"intro-text\">Choose values that range from low to high, using the <a title=\"Data Selector\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/data-selector\/\">Data Selector<\/a> for each limit in the property panel. These limits define the bands within the level meter: from top to bottom these bands are <em>High High, High, Outside Target, Target, Outside Target, Low<\/em>, and <em>Low Low<\/em>.<\/p>\n<p class=\"intro-text\">There are five separate categories of data that you can select for the minimum, the maximum and for each limit: <em>Dataset Column, Ad hoc Calulation, Attribute, Tag<\/em>, and <em>Value<\/em>.<\/p>\n<h3>Measured Data<\/h3>\n<p class=\"intro-text\">Use the <a title=\"Data Selector\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/data-selector\/\">Data Selector<\/a> to configure the data to measure. The measured data is displayed as a\u00a0vertical indicator (of a set colour), within the level meter. Its highest point marks the value, and is positioned within one of the bands. There are five separate categories of data that you can choose from: <em>Dataset Column, Ad hoc Calulation, Attribute, Tag<\/em>, and <em>Value<\/em>.<\/p>\n<h3>Appearance<\/h3>\n<p class=\"intro-text\">Each of the configuration options can be selected from the five different data categories: <em>Dataset Column, Ad hoc Calulation, Attribute, Tag<\/em>, and <em>Value<\/em>, using the <a title=\"Data Selector\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/data-selector\/\">Data Selector<\/a>.<\/p>\n<p class=\"intro-text\">To simplify the explanation, we'll just look at using fixed values.<\/p>\n<p class=\"intro-text\"><strong>Label Text:<\/strong> Type a label for the component, which appears on the page in display mode. This should describe the level you are measuring.<\/p>\n<p class=\"intro-text\"><strong>Units Text:<\/strong> Type the unit of measure here. In display mode, the unit of measure (for example, <em>Meters<\/em>) is displayed next to the value.<\/p>\n<p class=\"intro-text\"><strong>Decimals:<\/strong> Type in an integer for the number of decimal places for the measured value.<\/p>\n<p class=\"intro-text\"><strong>Confidence Threshold:<\/strong> The confidence value of the measured data is measured against this threshold. Both are percentage values. If the confidence value is below the threshold, the <a href=\"#Data_Indicator\">Data Indicator<\/a> appears in display mode.<\/p>\n<p class=\"intro-text\"><strong>Show Value:<\/strong> Select this option (set to <em>true<\/em>) if you want to the measured value and label displayed on the control.<\/p>\n<p class=\"intro-text\"><strong>Show Alarm Indicator:<\/strong> Select this option (set to <em>true<\/em>) if you want <a href=\"#Alarm_Indicator\">alarm indicators<\/a> on the control.<\/p>\n<p class=\"intro-text\"><strong>Show Limits on Hover:<\/strong> Select this option (set to <em>true<\/em>) if you want limits to appear when the user hovers the mouse over the level meter.<\/p>\n<p class=\"intro-text\"><strong>Style<\/strong>: The style you want to apply to the Level Meter component. If you are a Style Administrator, you can add a new <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/explorer-styles\/styling-displays\/\">Level Meter style<\/a>.<\/p>\n<h3>The Level Meter in Display Mode<\/h3>\n<p class=\"intro-text\">The level meter's appearance is partially based on how it is configured in the design mode, and partially based on the measured data and the alarm limits.<\/p>\n<p class=\"intro-text\">Note that the level meter's selected style will also affect its appearance: size, font size, colours, positioning of indicators.<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td style=\"padding-left: 5px;\" width=\"250\">\n<table>\n<tbody>\n<tr>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Level-Meter-in-Run-Mode-2.png\" rel=\"lightbox-4\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-18904 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Level-Meter-in-Run-Mode-2.png\" width=\"382\" height=\"447\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Level-Meter-in-Run-Mode-2.png 382w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Level-Meter-in-Run-Mode-2-128x150.png 128w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Level-Meter-in-Run-Mode-2-21x24.png 21w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Level-Meter-in-Run-Mode-2-31x36.png 31w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Level-Meter-in-Run-Mode-2-41x48.png 41w\" sizes=\"auto, (max-width: 382px) 100vw, 382px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<td style=\"padding-left: 5px;\" width=\"750\">\n<table>\n<tbody>\n<tr>\n<td><strong>1. Data Indicator<\/strong><\/td>\n<\/tr>\n<tr>\n<td>Here, the Data Indicator shows <em>Low Confidence Data<\/em> as the measured data's confidence is lower than the configured confidence threshold for the level meter component.<\/td>\n<\/tr>\n<tr>\n<td><strong>2. Alarm Indicator<\/strong><\/td>\n<\/tr>\n<tr>\n<td>This particular alarm indicator shows that the measured data is in the <em>High Alarm<\/em> band.<\/td>\n<\/tr>\n<tr>\n<td><strong>3. Limit Values<\/strong><\/td>\n<\/tr>\n<tr>\n<td>The values for <em>Minimum, Maximum<\/em> and the different limits can be seen when you hover over the level meter (if <em>Show Limits on Hover<\/em> is selected).<\/td>\n<\/tr>\n<tr>\n<td><strong>4. Bands<\/strong><\/td>\n<\/tr>\n<tr>\n<td>Background colours mark the different bands between the thresholds. <em>High High<\/em> at the top, matches <em>Low Low<\/em> at the bottom. <em>High<\/em> matches <em>Low<\/em>, and in the style used here, <em>Outside Target<\/em> matches the <em>Target<\/em> band. As shown in this example, the band (<em>High<\/em>)containing the <em>Measured Value<\/em> is coloured to match the <em>Alarm Indicator<\/em>.<\/td>\n<\/tr>\n<tr>\n<td><strong>5. The measured value position<\/strong><\/td>\n<\/tr>\n<tr>\n<td>The measured value is depicted by a centred line, positioned within its band, according to its value.<\/td>\n<\/tr>\n<tr>\n<td><strong>6. Measured value<\/strong><\/td>\n<\/tr>\n<tr>\n<td>The measured value. The decimal points are configured in <em>Decimals<\/em>.<\/td>\n<\/tr>\n<tr>\n<td><strong>7. Units<\/strong><\/td>\n<\/tr>\n<tr>\n<td>This is the text in <em>Units Text<\/em>.<\/td>\n<\/tr>\n<tr>\n<td><strong>8. Label<\/strong><\/td>\n<\/tr>\n<tr>\n<td>This is the text in <em>Label Text<\/em>.<\/td>\n<\/tr>\n<tr>\n<td><strong>9. Target Border<\/strong><\/td>\n<\/tr>\n<tr>\n<td>The target border surrounds the target band, and is coloured in grey, unless the measured value is in the <em>Outside Target<\/em> band, when it takes on the <em>Outside Target<\/em> colour.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h4>Alarm Indicator<\/h4>\n<p class=\"intro-text\">The Alarm Indicator only appears if <em>Show Alarm Indicator<\/em> is selected.<\/p>\n<p class=\"intro-text\">The Alarm Indicator is a coloured symbol representing the current state of the measurement, such as the blue triangle on the screenshot below.<\/p>\n<p class=\"note\"><strong>Note:<\/strong> The size, colour and position of the Alarm Indicator may vary, depending on the Level Meter's selected <em>Style<\/em>.<\/p>\n<p class=\"intro-text\">Hover over the alarm indicator to see the tooltip.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Level-Meter-Alarm-Tooltip.png\" rel=\"lightbox-5\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-18519 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Level-Meter-Alarm-Tooltip.png\" width=\"228\" height=\"244\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Level-Meter-Alarm-Tooltip.png 228w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Level-Meter-Alarm-Tooltip-140x150.png 140w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Level-Meter-Alarm-Tooltip-22x24.png 22w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Level-Meter-Alarm-Tooltip-34x36.png 34w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Level-Meter-Alarm-Tooltip-45x48.png 45w\" sizes=\"auto, (max-width: 228px) 100vw, 228px\" \/><\/a><\/p>\n<p class=\"intro-text\">The symbol depends on what band the measured value falls into. From highest to lowest bands, here is the key:<\/p>\n<table class=\"table-toc\" style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td style=\"padding-left: 5px;\" width=\"1\">\u00a0<\/td>\n<td width=\"150\"><strong>Band<\/strong><\/td>\n<td width=\"150\"><strong>Alarm Indicator<\/strong><\/td>\n<td width=\"20\"><strong>Symbol<\/strong><\/td>\n<td width=\"150\"><strong>Tooltip<\/strong><\/td>\n<td width=\"\">\u00a0<\/td>\n<\/tr>\n<tr>\n<td style=\"padding-left: 5px;\" width=\"1\">\u00a0<\/td>\n<td>High High<\/td>\n<td>Red Triangle<\/td>\n<td>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-18527 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/High-High-Low-Low-1.png\" width=\"24\" height=\"21\" \/><\/p>\n<\/td>\n<td>High High Alarm<\/td>\n<td>&nbsp;<\/td>\n<\/tr>\n<tr>\n<td style=\"padding-left: 5px;\" width=\"1\">\u00a0<\/td>\n<td>High<\/td>\n<td>Yellow Square<\/td>\n<td>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-18523 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Low-and-High.png\" width=\"25\" height=\"24\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Low-and-High.png 25w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Low-and-High-24x23.png 24w\" sizes=\"auto, (max-width: 25px) 100vw, 25px\" \/><\/p>\n<\/td>\n<td>High Alarm<\/td>\n<td>&nbsp;<\/td>\n<\/tr>\n<tr>\n<td style=\"padding-left: 5px;\" width=\"1\">\u00a0<\/td>\n<td>Outside Target<\/td>\n<td>Blue Triangle<\/td>\n<td>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-18528 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Outside-Target-1.png\" width=\"24\" height=\"21\" \/><\/p>\n<\/td>\n<td>Outside Target<\/td>\n<td>&nbsp;<\/td>\n<\/tr>\n<tr>\n<td style=\"padding-left: 5px;\" width=\"1\">\u00a0<\/td>\n<td>Target<\/td>\n<td>No Indicator<\/td>\n<td>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-16766\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/No-indicator.png\" width=\"18\" height=\"18\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/No-indicator.png 25w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/No-indicator-24x24.png 24w\" sizes=\"auto, (max-width: 18px) 100vw, 18px\" \/><\/p>\n<\/td>\n<td>&nbsp;<\/td>\n<td>&nbsp;<\/td>\n<\/tr>\n<tr>\n<td style=\"padding-left: 5px;\" width=\"1\">\u00a0<\/td>\n<td>Low<\/td>\n<td>Yellow Square<\/td>\n<td>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-18523 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Low-and-High.png\" width=\"25\" height=\"24\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Low-and-High.png 25w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Low-and-High-24x23.png 24w\" sizes=\"auto, (max-width: 25px) 100vw, 25px\" \/><\/p>\n<\/td>\n<td>Low Alarm<\/td>\n<td>&nbsp;<\/td>\n<\/tr>\n<tr>\n<td style=\"padding-left: 5px;\" width=\"1\">\u00a0<\/td>\n<td>Low Low<\/td>\n<td>Red Triangle<\/td>\n<td>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-18527 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/High-High-Low-Low-1.png\" width=\"24\" height=\"21\" \/><\/p>\n<\/td>\n<td>Low Low Alarm<\/td>\n<td>&nbsp;<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h4>Data Indicator<\/h4>\n<p class=\"intro-text\">The Data Indicator is a symbol that appears alongside the level meter if there is either Low Confidence Data or No Data.<\/p>\n<p class=\"intro-text\">The data indicator appears in a square background, as a cross <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-16295\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/06\/No-Data-icon.png\" width=\"20\" height=\"20\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/06\/No-Data-icon.png 25w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/06\/No-Data-icon-24x24.png 24w\" sizes=\"auto, (max-width: 20px) 100vw, 20px\" \/> if there is No Data, or as an exclamation mark <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-16318\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/06\/Low-Confidence-Symbol.png\" width=\"20\" height=\"19\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/06\/Low-Confidence-Symbol.png 25w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/06\/Low-Confidence-Symbol-24x23.png 24w\" sizes=\"auto, (max-width: 20px) 100vw, 20px\" \/> if there is Low Confidence Data.<\/p>\n<p class=\"note\"><strong>Note: <\/strong>The size, colours and positioning of the Data Indicator may vary, depending on the level meter's <em>Style<\/em>.<\/p>\n<p class=\"intro-text\">Sometimes there is no data to measure, for example if the level meter is configured to measure the actual level of a tank, and this attribute value is missing from the selected entity. In this instance, the data indicator shows the <em>No Data<\/em> symbol, and three Xs mark the place where the value would normally appear.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Data-Indicator-No-Data-Example.png\" rel=\"lightbox-6\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-18517 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Data-Indicator-No-Data-Example.png\" width=\"142\" height=\"240\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Data-Indicator-No-Data-Example.png 142w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Data-Indicator-No-Data-Example-89x150.png 89w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Data-Indicator-No-Data-Example-14x24.png 14w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Data-Indicator-No-Data-Example-21x36.png 21w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Data-Indicator-No-Data-Example-28x48.png 28w\" sizes=\"auto, (max-width: 142px) 100vw, 142px\" \/><\/a><\/p>\n<p class=\"intro-text\">If the measured data's confidence is lower than the level meter's defined confidence threshold, the data indicator shows the <em>Low Confidence<\/em> symbol. Data confidence threshold is measured as a percentage.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Data-Indicator-Low-Confidence-Example.png\" rel=\"lightbox-7\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-18516 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Data-Indicator-Low-Confidence-Example.png\" width=\"160\" height=\"236\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Data-Indicator-Low-Confidence-Example.png 160w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Data-Indicator-Low-Confidence-Example-102x150.png 102w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Data-Indicator-Low-Confidence-Example-16x24.png 16w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Data-Indicator-Low-Confidence-Example-24x36.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Data-Indicator-Low-Confidence-Example-33x48.png 33w\" sizes=\"auto, (max-width: 160px) 100vw, 160px\" \/><\/a><\/p>\n<p class=\"note\"><strong>Note: <\/strong>You need to select a <em>Confidence Threshold<\/em> in design mode, for this to work.<\/p>\n<hr \/>\n<h2 class=\"page-subheading\">Tutorial: Level Meter Updating with Selected Entity<\/h2>\n<p class=\"note\">If you're unfamiliar with the process of building pages, read the article\u00a0<a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-create-your-first-page\/building-an-explorer-page\/\" data-slimstat-clicked=\"false\" data-slimstat-type=\"2\" data-slimstat-tracking=\"false\" data-slimstat-callback=\"false\" data-slimstat-async=\"false\">Building an Explorer Page<\/a>.<\/p>\n<p class=\"intro-text\">Watch the video below to see how the level meter's appearance changes as the value is updated.<\/p>\n<p class=\"left-bar\">Note how the value updates after the date\/time toggle is selected. When the entities <strong>Cooling <\/strong>and <strong>Esmonde<\/strong> are selected, the <em>No Data<\/em> indicator appears. This is because neither of these entities have the attribute used in the <em>measured data<\/em>.<\/p>\n\r\n\t<!-- Begin Video.js -->\r\n\t<video id=\"example_video_id_1429994401\" class=\"video-js vjs-default-skin\" width=\"618\" height=\"454\" controls preload=\"none\" data-setup='[]'>\r\n\t\t<source src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/videos\/LevelMeterVideo.mp4\" type='video\/mp4' \/>\r\n\t\t\r\n\t\t\r\n\t<\/video>\r\n\t<!-- End Video.js -->\r\n\n<p class=\"intro-text\">The tutorial describes how to configure the level meter shown in the video.<\/p>\n<p class=\"left-bar\">Refer to the <strong>Level Meter<\/strong> page in the <em>Tutorials<\/em> workspace, if you have access to this.<\/p>\n<p class=\"intro-text\">There are four steps in the tutorial:<\/p>\n<ul class=\"intro-text\">\n<li>Step 1. Prepare the new tutorial page.<\/li>\n<li>Step 2. Update the selectedEntity default value.<\/li>\n<li>Step 3. Add hierarchy, labels and a current date\/time toggle.<\/li>\n<li>Step 4. Add and configure a level meter.<\/li>\n<\/ul>\n<p class=\"left-bar\"><strong>Note: <\/strong>If you have already completed any of the tutorials listed below, you can skip the first three steps and go straight to <a href=\"#Step_4_Add_and_Configure_a_Level_Meter\">Step 4<\/a>.<\/p>\n<ul class=\"intro-text\">\n<li><strong>Pressure Meter<\/strong> tutorial<\/li>\n<li><strong>Temperature Meter<\/strong> tutorial<\/li>\n<li><strong>Gauge<\/strong> tutorial<\/li>\n<\/ul>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Level-Meter-Tutorial-Intro.png\" rel=\"lightbox-8\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-18546 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Level-Meter-Tutorial-Intro.png\" width=\"914\" height=\"598\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Level-Meter-Tutorial-Intro.png 914w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Level-Meter-Tutorial-Intro-768x502.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Level-Meter-Tutorial-Intro-150x98.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Level-Meter-Tutorial-Intro-24x16.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Level-Meter-Tutorial-Intro-36x24.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Level-Meter-Tutorial-Intro-48x31.png 48w\" sizes=\"auto, (max-width: 914px) 100vw, 914px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p class=\"intro-text\"><strong>Step 1. Prepare the Tutorial Page<\/strong><\/p>\n<p class=\"left-bar\"><strong>Note: <\/strong>Before you start the tutorial, <a title=\"Preparing an Explorer page for Tutorials (Precision)\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/preparing-an-explorer-page-for-tutorials-precision\/\">prepare a precision layout page in Studio<\/a> and save it with a suitable name, such as <em>Level Meter<\/em>.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Precision-Layout-Page.png\" rel=\"lightbox-9\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-14582 size-medium\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Precision-Layout-Page-400x270.png\" width=\"400\" height=\"270\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p class=\"intro-text\"><strong>Step 2. Update the selectedEntity Default Value<\/strong><\/p>\n<p class=\"intro-text\">In this step we're going to assign a value to the <em>selectedEntity<\/em> page default.<\/p>\n<p class=\"left-bar\">Related: See how to add and configure a <a title=\"Default Values\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/default-value\/\">Default Value<\/a>.<\/p>\n<p class=\"intro-text\">1. Open the Default Values panel.<\/p>\n<p class=\"intro-text\">2. Type <em>Jackadder<\/em> in the <em>selectedEntity<\/em> value text box.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Default-Values-1.png\" rel=\"lightbox-10\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-17217 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Default-Values-1.png\" width=\"349\" height=\"205\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Default-Values-1.png 349w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Default-Values-1-150x88.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Default-Values-1-24x14.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Default-Values-1-36x21.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Default-Values-1-48x28.png 48w\" sizes=\"auto, (max-width: 349px) 100vw, 349px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p class=\"intro-text\"><strong>Step 3. Add Hierarchy, Labels and a Current Date\/Time Toggle<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Level-Tutorrial-step-1.png\" rel=\"lightbox-11\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-17218 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Level-Tutorrial-step-1.png\" width=\"908\" height=\"663\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Level-Tutorrial-step-1.png 908w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Level-Tutorrial-step-1-768x561.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Level-Tutorrial-step-1-150x110.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Level-Tutorrial-step-1-24x18.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Level-Tutorrial-step-1-36x26.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Level-Tutorrial-step-1-48x35.png 48w\" sizes=\"auto, (max-width: 908px) 100vw, 908px\" \/><\/a><\/p>\n<p class=\"intro-text\">The hierarchy is for selecting a new entity, and the current date\/time toggle is to refresh the data on the page. The labels are just for providing context to the page and can be left out, if you prefer.<\/p>\n<p class=\"left-bar\">Related: <a title=\"Hierarchy\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/hierarchy\/\">Hierarchy<\/a>, <a title=\"Current Date\/Time Toggle\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/current-time-toggle\/\">Current Date\/Time Toggle<\/a>, <a title=\"Text Label\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/text-label\/\">Text Label<\/a>.<\/p>\n<p class=\"intro-text\">1. Drag a Hierarchy onto the page. Resize it to fit the full height of the page.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Step-3.1.png\" rel=\"lightbox-12\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-16808\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Step-3.1.png\" width=\"600\" height=\"502\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Step-3.1.png 839w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Step-3.1-768x643.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Step-3.1-150x126.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Step-3.1-24x20.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Step-3.1-36x30.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Step-3.1-48x40.png 48w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/a><\/p>\n<p class=\"intro-text\">2. In the Hierarchy component's property panel, select <strong>P2 Corporate<\/strong> from the drop-down list of available hierarchies for the <strong>Hierarchy Name<\/strong>.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Step-2.2.png\" rel=\"lightbox-13\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-16794 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Step-2.2.png\" width=\"353\" height=\"437\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Step-2.2.png 353w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Step-2.2-121x150.png 121w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Step-2.2-19x24.png 19w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Step-2.2-29x36.png 29w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Step-2.2-39x48.png 39w\" sizes=\"auto, (max-width: 353px) 100vw, 353px\" \/><\/a><\/p>\n<p class=\"intro-text\">3. Drag a Current Date\/Time Toggle onto the page.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Step-3.3.png\" rel=\"lightbox-14\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-16809\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Step-3.3.png\" width=\"600\" height=\"380\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Step-3.3.png 822w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Step-3.3-768x486.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Step-3.3-150x95.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Step-3.3-24x15.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Step-3.3-36x23.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Step-3.3-48x30.png 48w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/a><\/p>\n<p class=\"intro-text\">4. In the Current Date\/Time Toggle component's property panel, type <strong>3<\/strong> in the <strong>Refresh Rate<\/strong> edit box, so that the page's <em>endTime<\/em> default is refreshed every three seconds.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Step-2.4.png\" rel=\"lightbox-15\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-16797 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Step-2.4.png\" width=\"347\" height=\"457\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Step-2.4.png 347w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Step-2.4-114x150.png 114w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Step-2.4-18x24.png 18w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Step-2.4-27x36.png 27w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Step-2.4-36x48.png 36w\" sizes=\"auto, (max-width: 347px) 100vw, 347px\" \/><\/a><\/p>\n<p class=\"intro-text\">5. Drag a Text Label onto the page, to the right of the hierarchy. Widen the label slightly.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Step-3.5.png\" rel=\"lightbox-16\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-16810\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Step-3.5.png\" width=\"600\" height=\"374\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Step-3.5.png 833w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Step-3.5-768x479.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Step-3.5-150x93.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Step-3.5-24x15.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Step-3.5-36x22.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Step-3.5-48x30.png 48w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/a><\/p>\n<p class=\"intro-text\">6. In the Text Label component's property panel, add data to the label's <strong>Content<\/strong>: the <strong>selectedEntity<\/strong> variable.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/step-6.png\" rel=\"lightbox-17\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-16802 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/step-6.png\" width=\"354\" height=\"450\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/step-6.png 354w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/step-6-118x150.png 118w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/step-6-19x24.png 19w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/step-6-28x36.png 28w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/step-6-38x48.png 38w\" sizes=\"auto, (max-width: 354px) 100vw, 354px\" \/><\/a><\/p>\n<p class=\"intro-text\">7. Drag another Text Label onto the page, above the current date\/time toggle. Widen the label slightly.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Level-Meter-Step-7.png\" rel=\"lightbox-18\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-18551 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Level-Meter-Step-7.png\" width=\"880\" height=\"347\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Level-Meter-Step-7.png 880w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Level-Meter-Step-7-768x303.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Level-Meter-Step-7-150x59.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Level-Meter-Step-7-24x9.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Level-Meter-Step-7-36x14.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Level-Meter-Step-7-48x19.png 48w\" sizes=\"auto, (max-width: 880px) 100vw, 880px\" \/><\/a><\/p>\n<p class=\"intro-text\">8. In the Text Label component's property panel, type <strong>Date\/Time Toggle<\/strong> in the <strong>Content<\/strong>.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/step-8.png\" rel=\"lightbox-19\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-16803 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/step-8.png\" width=\"355\" height=\"458\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/step-8.png 355w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/step-8-116x150.png 116w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/step-8-19x24.png 19w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/step-8-28x36.png 28w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/step-8-37x48.png 37w\" sizes=\"auto, (max-width: 355px) 100vw, 355px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p class=\"intro-text\"><strong>Step 4. Add and Configure a Level Meter<\/strong><\/p>\n<p class=\"left-bar-blue\">If you have already completed any of the tutorials listed below, open that tutorial page (for example, <em>Pressure Meter<\/em>), and save a copy to a new page called <em>Level Meter<\/em>.<\/p>\n<ul class=\"intro-text\">\n<li><strong>Pressure Meter<\/strong> tutorial<\/li>\n<li><strong>Temperature Meter<\/strong> tutorial<\/li>\n<li><strong>Gauge<\/strong> tutorial<\/li>\n<\/ul>\n<p class=\"left-bar\">Related: See how to select data for a component using the <a title=\"Data Selector\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/data-selector\/\">Data Selector<\/a>.<\/p>\n<p class=\"intro-text\">1. Drag a Level Meter component to the right of the hierarchy. (If you are using the saved copy of the <em>Pressure Meter\/Temperature Meter\/Gauge<\/em> page, first remove the Pressure Meter\/Temperature Meter\/Gauge component. Update the Default Value for <em>selectedEntity<\/em> to <em>Jackadder<\/em>.)<\/p>\n<p class=\"intro-text\">2. Click and drag the edges to widen and lengthen the component.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Level-step-1-and-2.png\" rel=\"lightbox-20\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-17220 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Level-step-1-and-2.png\" width=\"838\" height=\"560\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Level-step-1-and-2.png 838w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Level-step-1-and-2-768x513.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Level-step-1-and-2-150x100.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Level-step-1-and-2-24x16.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Level-step-1-and-2-36x24.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Level-step-1-and-2-48x32.png 48w\" sizes=\"auto, (max-width: 838px) 100vw, 838px\" \/><\/a><\/p>\n<p class=\"intro-text\">3. Click on the Level Meter so that the properties appear in the component's panel on the right.<\/p>\n<p class=\"intro-text\">4. Assign tags to the maximum, limits and the minimum of the component. For each separate property, use the Data Selector to select <a title=\"Using Tag Data\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/data-selector\/#Using_Tag_Data\">Tag Data<\/a>.<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td style=\"padding-left: 5px;\" width=\"250\">\n<table>\n<tbody>\n<tr>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Level-Meter-Step-4.4-1.png\" rel=\"lightbox-21\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-18614 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Level-Meter-Step-4.4-1.png\" width=\"350\" height=\"551\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Level-Meter-Step-4.4-1.png 350w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Level-Meter-Step-4.4-1-95x150.png 95w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Level-Meter-Step-4.4-1-15x24.png 15w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Level-Meter-Step-4.4-1-23x36.png 23w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Level-Meter-Step-4.4-1-30x48.png 30w\" sizes=\"auto, (max-width: 350px) 100vw, 350px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<td style=\"padding-left: 5px;\" width=\"750\">\n<table>\n<tbody>\n<tr>\n<td><strong>a) Maximum<\/strong>: Click the drop-down list, select tag MaxValue. Click the drop-down list again to close it.<\/td>\n<\/tr>\n<tr>\n<td><strong>b) High High Limit<\/strong>: Click the drop-down list, select tag HighHighLimit. Click the drop-down list again to close it.<\/td>\n<\/tr>\n<tr>\n<td><strong>c) High Limit<\/strong>: Click the drop-down list, select tag HighLimit. Click the drop-down list again to close it.<\/td>\n<\/tr>\n<tr>\n<td><strong>d) Outside Target (upper)<\/strong>: Click the drop-down list, select tag TargetRangeHigh. Click the drop-down list again to close it.<\/td>\n<\/tr>\n<tr>\n<td><strong>e) Outside Target (lower)<\/strong>: Click the drop-down list, select tag TargetRangeLow. Click the drop-down list again to close it.<\/td>\n<\/tr>\n<tr>\n<td><strong>f) Low Limit<\/strong>: Click the drop-down list, select tag LowLimit. Click the drop-down list again to close it.<\/td>\n<\/tr>\n<tr>\n<td><strong>g) Low Low Limit<\/strong>: Click the drop-down list, select tag LowLowLimit. Click the drop-down list again to close it.<\/td>\n<\/tr>\n<tr>\n<td><strong>h) Minimum<\/strong>: Click the drop-down list, select tag MinValue. Click the drop-down list again to close it.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<div class=\"best-prac\"><i class=\"fa fa-star fa-2x fa-pull-left\"><\/i><span class=\"best-prac-text\">TOP TIP<\/span><\/p>\n<p class=\"intro-text\">Alternatively, use the shortcut method: Locate a tag, attribute or attribute value from the Tag or Hierarchy Navigator, then drag and drop it into the applicable property.<\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/12\/Click-and-Drag-into-Level-MeterProperty.png\" rel=\"lightbox-22\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-23435\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/12\/Click-and-Drag-into-Level-MeterProperty.png\" width=\"1000\" height=\"519\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/12\/Click-and-Drag-into-Level-MeterProperty.png 1353w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/12\/Click-and-Drag-into-Level-MeterProperty-768x398.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/12\/Click-and-Drag-into-Level-MeterProperty-150x78.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/12\/Click-and-Drag-into-Level-MeterProperty-1280x664.png 1280w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/12\/Click-and-Drag-into-Level-MeterProperty-24x12.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/12\/Click-and-Drag-into-Level-MeterProperty-36x19.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/12\/Click-and-Drag-into-Level-MeterProperty-48x25.png 48w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/a><\/p>\n<\/div>\n<p>&nbsp;<\/p>\n<p class=\"intro-text\">5. Now use the Data Selector to select the <em>selectedEntity's <\/em> Tank Levels!Actual attribute value, from the <em>Storage Tank<\/em> template, to the measured value's <a title=\"Using Attribute Data\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/data-selector\/#Using_Attribute_Data\">Attribute Data<\/a>.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Level-Meter-Step-4.5.png\" rel=\"lightbox-23\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-18549 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Level-Meter-Step-4.5.png\" width=\"330\" height=\"460\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Level-Meter-Step-4.5.png 330w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Level-Meter-Step-4.5-108x150.png 108w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Level-Meter-Step-4.5-17x24.png 17w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Level-Meter-Step-4.5-26x36.png 26w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Level-Meter-Step-4.5-34x48.png 34w\" sizes=\"auto, (max-width: 330px) 100vw, 330px\" \/><\/a><\/p>\n<p class=\"intro-text\">This assigns the <em>selectedEntity's<\/em> Tank Levels!Actual attribute value to the measured value: <strong>selectedEntity[Storage Tank]:Tank Levels!Actual<\/strong>. <em>selectedEntity<\/em> is a variable, which the end-user can change by selecting different entities from the hierarchy on the page.<\/p>\n<p class=\"intro-text\">6. Configure the appearance of the level meter. For each separate property, use the Data Selector to select <a title=\"How to Select Value Data\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/data-selector\/#Using_Value_Data\">Value Data<\/a>.<\/p>\n<ul class=\"intro-text\">\n<li><strong>Label Text<\/strong>: Type in a <em>Value<\/em> of <em>Storage Tank Levels<\/em>.<\/li>\n<li><strong>Units Text<\/strong>: Type in a <em>Value<\/em> of <em>Meters<\/em>.<\/li>\n<li><strong>Decimals<\/strong>: Type in a <em>Value<\/em> of <em>2<\/em>.<\/li>\n<li><strong>Confidence Threshold<\/strong>: Select the variable <em>Value<\/em> of <em>confidenceThreshold<\/em> (this is a <a title=\"Page Default Values\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/default-value\/#Page_Default_Values\">page default<\/a>) .<\/li>\n<li><strong>Show Value<\/strong>: Select the <em>Value<\/em> to set it to <em>true<\/em>.<\/li>\n<li><strong>Show Alarm Indicator<\/strong>: Select the <em>Value<\/em> to set it to <em>true<\/em>.<\/li>\n<li><strong>Show Limits on Hover<\/strong>: Select the <em>Value<\/em> to set it to <em>true<\/em>.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Level-Meter-Step-4.6.png\" rel=\"lightbox-24\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-18550 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Level-Meter-Step-4.6.png\" width=\"337\" height=\"373\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Level-Meter-Step-4.6.png 337w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Level-Meter-Step-4.6-136x150.png 136w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Level-Meter-Step-4.6-22x24.png 22w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Level-Meter-Step-4.6-33x36.png 33w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Level-Meter-Step-4.6-43x48.png 43w\" sizes=\"auto, (max-width: 337px) 100vw, 337px\" \/><\/a><\/p>\n<p class=\"intro-text\">You now have a functioning level meter.<\/p>\n<p class=\"intro-text\">\u00a0<\/p>\n<p class=\"intro-text\"><strong>Try out the New Component<\/strong><\/p>\n<ul>\n<li class=\"intro-text\">Click the Preview <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/preview.png\" rel=\"lightbox-25\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2896\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/preview.png\" alt=\"preview\" width=\"13\" height=\"14\" \/><\/a> button on the Studio toolbar to see what your page will look like in display mode.<\/li>\n<li class=\"intro-text\">Select the current date\/time toggle so that the data can refresh at the configured refresh rate.<\/li>\n<li class=\"intro-text\">Select a different entity from the hierarchy, to see how the storage tank level changes.<\/li>\n<\/ul>\n<p class=\"note\"><strong>Note<\/strong> how the data updates every three seconds, because of the current date\/time toggle.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Level-Meter-Tutorial-Conclusion.png\" rel=\"lightbox-26\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-18545 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Level-Meter-Tutorial-Conclusion.png\" width=\"634\" height=\"450\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Level-Meter-Tutorial-Conclusion.png 634w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Level-Meter-Tutorial-Conclusion-150x106.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Level-Meter-Tutorial-Conclusion-24x17.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Level-Meter-Tutorial-Conclusion-36x26.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Level-Meter-Tutorial-Conclusion-48x34.png 48w\" sizes=\"auto, (max-width: 634px) 100vw, 634px\" \/><\/a><\/p>\n<hr \/>\n<h2 class=\"page-subheading\">Release History<\/h2>\n<ul class=\"intro-text\">\n<li><a title=\"Level Meter (4.4.1)\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/level-meter\/level-meter-4-4-1\/\">Level Meter 4.4.1<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>The Level Meter is used for displaying level measurements against configurable limits. Its appearance changes when limits\/alarm thresholds are exceeded. This article applies to Version 4.4.2 and later of IFS OI Explorer.<\/p>\n<p class=\"continue-reading-button\"> <a class=\"continue-reading-link\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/level-meter\/\">Read more<i class=\"crycon-right-dir\"><\/i><\/a><\/p>\n","protected":false},"author":8,"featured_media":16174,"parent":1407,"menu_order":309,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":"","_members_access_role":[],"_members_access_error":""},"categories":[11],"tags":[491,494],"class_list":["post-18513","page","type-page","status-publish","has-post-thumbnail","hentry","category-tutorial","tag-meters","tag-process-controls","Product-ex"],"_links":{"self":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/18513","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/comments?post=18513"}],"version-history":[{"count":2,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/18513\/revisions"}],"predecessor-version":[{"id":67036,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/18513\/revisions\/67036"}],"up":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/1407"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/media\/16174"}],"wp:attachment":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/media?parent=18513"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/categories?post=18513"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/tags?post=18513"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}