{"title":"Symbols","description":"","products":[{"product_id":"time-series-table-plus","title":"Time Series Table+","description":"\u003c!-- START: Redesigned Product Page for Time Series Table+ --\u003e\n\u003cp\u003e \u003c\/p\u003e\n\u003c!-- 1. HERO SECTION --\u003e\n\u003csection class=\"product-hero-section\"\u003e\n\u003cdiv class=\"product-hero-container\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/icon3_671416c7-a502-46d0-a8f4-9cd57d675631_160x160.png?v=1684764049\" alt=\"Time Series Table+ Product Icon\" class=\"product-hero-icon\"\u003e\n\u003cp class=\"product-subtitle-tag\"\u003ePI Vision Custom Symbol\u003c\/p\u003e\n\u003ch1\u003eView and Analyze Raw Time-Series Data in PI Vision\u003c\/h1\u003e\n\u003cp class=\"product-description\"\u003eStop guessing what happened between interpolated points. Time Series Table+ displays your data on a per-timestamp basis, giving you the power to filter, group, and export raw values with precision.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 2. FEATURES SECTION --\u003e\n\u003csection class=\"product-features-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eThe Engineer's Essential Toolkit\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-grid-three-col\"\u003e\n\u003cdiv class=\"features-column\"\u003e\n\u003ch3\u003ePowerful Data Shaping\u003c\/h3\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eTranspose Table Layout:\u003c\/strong\u003e Instantly pivot your table to view timestamps as columns or rows.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eAdvanced Grouping \u0026amp; Filtering:\u003c\/strong\u003e Group rows based on specific criteria and apply filters to isolate the data you need.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eCustom Time Ranges:\u003c\/strong\u003e Define custom time ranges independent of the main PI Vision timebar for focused analysis.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-column\"\u003e\n\u003ch3\u003eAdvanced Analysis \u0026amp; Visualization\u003c\/h3\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eMultistate Formatting:\u003c\/strong\u003e Apply conditional coloring to highlight out-of-spec values, specific strings, or boolean states.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eAutomatic Column Totals:\u003c\/strong\u003e Instantly calculate the Sum, Average, Min, or Max for any numeric column.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eDynamic Timestamp Selection:\u003c\/strong\u003e Easily change the displayed timestamps to navigate through your data.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-column\"\u003e\n\u003ch3\u003eSeamless Integration \u0026amp; Export\u003c\/h3\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eOne-Click Data Export:\u003c\/strong\u003e Download data in Excel, PDF, CSV, or JSON formats directly from your browser.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eFlexible Data Retrieval:\u003c\/strong\u003e Supports recorded, interpolated, and joined data retrieval methods.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eHigh-Performance Design:\u003c\/strong\u003e Built with efficient scrolling and paging to handle large datasets smoothly.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 3. USE CASES SECTION --\u003e\n\u003csection class=\"use-cases-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eFrom Ad Hoc Analysis to Formal Reporting\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-cases-grid\"\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg class=\"icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" fill=\"currentColor\"\u003e\u003cpath d=\"M15.5 14h-.79l-.28-.27A6.471 6.471 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eDetailed Event Analysis\u003c\/h3\u003e\n\u003cp\u003eZero in on the exact time range of a process event and view the raw, timestamped data leading up to and following it.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg class=\"icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" fill=\"currentColor\"\u003e\u003cpath d=\"M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eOperator Log Sheet Review\u003c\/h3\u003e\n\u003cp\u003eView manually entered operator logs or lab data alongside your process values, perfectly aligned by timestamp.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg class=\"icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" fill=\"currentColor\"\u003e\u003cpath d=\"M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 14h-8v-2h8v2zm0-4h-8v-2h8v2zm-3-5V3.5L18.5 9H13z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eShift Handover Reporting\u003c\/h3\u003e\n\u003cp\u003eQuickly generate and export a clean table of key values at the end of a shift for consistent handover reports.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg class=\"icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" fill=\"currentColor\"\u003e\u003cpath d=\"M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-2 16l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eData Validation \u0026amp; Troubleshooting\u003c\/h3\u003e\n\u003cp\u003ePull raw, recorded values to quickly validate calculations, check sensor readings, or troubleshoot data quality issues.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 4. SCREENSHOTS SECTION --\u003e\n\u003csection class=\"screenshots-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eYour Data, Your Way, in PI Vision\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshots-grid\"\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-custom-symbol-time-series-table-tranposed.png?v=1755595166\" alt=\"A time series table in PI Vision transposed to show timestamps as columns.\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eTranspose Rows \u0026amp; Columns\u003c\/h4\u003e\n\u003cp\u003eInstantly pivot your table to view your data with either timestamps in rows or columns.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/aveva-pi-vision-custom-symbol-time-series-table-multistate-2_600x600.png?v=1721020255\" alt=\"A time series table with multistate coloring applied to highlight specific values.\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eMultistate \u0026amp; Conditional Formatting\u003c\/h4\u003e\n\u003cp\u003eApply colors to numeric ranges, strings, and booleans for instant visual insights.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/aveva-pi-vision-custom-symbol-time-series-table-grouping_600x600.png?v=1721019742\" alt=\"A PI Vision table with data grouped by category and filtered.\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eGroup \u0026amp; Filter Data\u003c\/h4\u003e\n\u003cp\u003eOrganize your data with powerful grouping and use column filters to show only what's relevant.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-custom-symbol-time-series-table-column-totals-group.png?v=1721023806\" alt=\"A time series table showing column totals for average, min, and max.\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eAutomatic Column Totals\u003c\/h4\u003e\n\u003cp\u003eInstantly calculate the Sum, Average, Min, or Max for any numeric column in your table.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/aveva-pi-vision-custom-symbol-time-series-table-export-data_600x600.png?v=1721020273\" alt=\"The data export dialog for the Time Series Table+ symbol.\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eOne-Click Data Export\u003c\/h4\u003e\n\u003cp\u003eExport tables in multiple formats like Excel, PDF, and CSV for reporting and offline analysis.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/aveva-pi-vision-custom-symbol-time-series-table_600x600.png?v=1721019714\" alt=\"A time series table with custom light and dark themes applied.\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eCustom Themes \u0026amp; Styling\u003c\/h4\u003e\n\u003cp\u003eChoose from different visual themes and customize the table style to match your dashboard.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 5. DEMO VIDEO SECTION --\u003e\n\u003csection class=\"demo-video-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eSee Time Series Table+ in Action\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"video-card\"\u003e\n\u003cdiv class=\"video-wrapper\"\u003e\u003cvideo preload=\"metadata\" controls=\"controls\"\u003e\n        \u003csource src=\"https:\/\/cdn.shopify.com\/videos\/c\/o\/v\/21b0cc4c6f654a7e835c26ec997956d2.mp4\" type=\"video\/mp4\"\u003e\n        Your browser does not support the video tag.\n      \u003c\/source\u003e\u003c\/video\u003e\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003cstyle\u003e\n  \/* --- GENERAL SECTION STYLES --- *\/\n  .section-header {\n    display: flex; flex-direction: column; align-items: center; text-align: center;\n    max-width: 800px; margin: 0 auto 3.5rem auto;\n  }\n  .section-header h2 {\n    color: #111; margin-bottom: 1rem; font-size: 1.8rem;\n  }\n  .section-header p {\n    color: #333; line-height: 1.7; font-size: 1rem;\n  }\n  .feature-list {\n    list-style: none; padding: 0; margin: 0;\n  }\n  .feature-list li {\n    position: relative; padding-left: 30px; margin-bottom: 1.25rem;\n    line-height: 1.6; color: #333;\n  }\n  .feature-list li::before {\n    content: '✔'; position: absolute; left: 0; top: 2px;\n    color: #3F72E5; font-size: 1.2rem;\n  }\n  .feature-list li strong {\n    color: #111; font-weight: 600;\n  }\n\n  \/* --- 1. HERO SECTION --- *\/\n  .product-hero-section {\n    padding: 5rem 1rem; text-align: center;\n  }\n  .product-hero-container {\n      max-width: 700px; margin: 0 auto;\n  }\n  .product-hero-icon {\n      width: 80px; height: auto; margin-bottom: 2rem;\n  }\n  .product-subtitle-tag {\n    color: #3F72E5; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.5px;\n  }\n  h1 {\n    font-size: 2.5rem; margin-bottom: 1.5rem;\n  }\n  .product-description {\n    line-height: 1.7; font-size: 1.1rem; color: #333;\n  }\n\n  \/* --- 2. FEATURES SECTION --- *\/\n  .product-features-section {\n    padding: 4rem 1rem; background-color: #f9fafb;\n  }\n  .features-grid-three-col {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n    gap: 2.5rem;\n    max-width: 1200px; margin: 0 auto;\n  }\n  .features-column h3 {\n    font-size: 1.3rem; margin-bottom: 1.5rem; color: #111;\n  }\n \n  \/* --- 3. USE CASES SECTION --- *\/\n  .use-cases-section {\n    padding: 4rem 1rem;\n  }\n  .use-cases-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n    gap: 2rem;\n    max-width: 1200px; margin: 0 auto;\n  }\n  .use-case-card {\n    background: white; border-radius: 20px; padding: 2rem; text-align: center;\n    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);\n  }\n  .use-case-card .icon {\n    width: 40px; height: 40px; color: #3F72E5; margin-bottom: 1rem;\n  }\n  .use-case-card h3 {\n    font-size: 1.2rem; color: #111; margin-bottom: 0.5rem;\n  }\n  .use-case-card p {\n    color: #333; font-size: 0.9rem; line-height: 1.6;\n  }\n\n  \/* --- 4. SCREENSHOTS SECTION --- *\/\n  .screenshots-section {\n    padding: 4rem 1rem; background-color: #f9fafb;\n  }\n  .screenshots-grid {\n    display: grid;\n    grid-template-columns: 1fr; \/* Default to 1 column for mobile *\/\n    gap: 2rem;\n    max-width: 1200px; margin: 0 auto;\n  }\n  .screenshot-card {\n    background: white; border-radius: 20px;\n    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);\n    overflow: hidden;\n  }\n  .screenshot-card img {\n    width: 100%; height: auto; display: block; background-color: #f9fafb;\n  }\n  .screenshot-card-content {\n    padding: 1.5rem;\n  }\n  .screenshot-card-content h4 {\n    font-size: 1.2rem; margin: 0 0 0.5rem 0; color: #111;\n  }\n  .screenshot-card-content p {\n    font-size: 0.95rem; line-height: 1.6; color: #333; margin: 0;\n  }\n \n  \/* --- 5. DEMO VIDEO SECTION --- *\/\n  .demo-video-section {\n    padding: 4rem 1rem;\n  }\n  .video-card {\n    max-width: 1000px; margin: 0 auto; border-radius: 20px;\n    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);\n    overflow: hidden;\n  }\n  .video-wrapper {\n    position: relative; padding-bottom: 56.25%; height: 0;\n  }\n  .video-wrapper video {\n    position: absolute; top: 0; left: 0; width: 100%; height: 100%;\n  }\n\n  \/* --- RESPONSIVE STYLES --- *\/\n  @media (min-width: 750px) {\n    .screenshots-grid {\n      grid-template-columns: 1fr 1fr; \/* 2 columns for tablet and up *\/\n    }\n  }\n\u003c\/style\u003e\n\u003c!-- END: Redesigned Product Page --\u003e","brand":"Software Athlete","offers":[{"title":"Default Title","offer_id":43711414567203,"sku":"1","price":0.0,"currency_code":"EUR","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/aveva-pi-vision-custom-control-time-series-table.png?v=1720762939"},{"product_id":"pi-vision-custom-symbol-histogram","title":"Histogram+","description":"\u003c!-- START: Redesigned Product Page for Histogram+ --\u003e\n\u003cp\u003e \u003c\/p\u003e\n\u003c!-- 1. HERO SECTION --\u003e\n\u003csection class=\"product-hero-section\"\u003e\n\u003cdiv class=\"product-hero-container\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/icon_2162af50-e7ef-4db4-aa58-7987244baa8f_160x160.png?v=1684762062\" alt=\"Histogram+ Product Icon\" class=\"product-hero-icon\"\u003e\n\u003cp class=\"product-subtitle-tag\"\u003ePI Vision Custom Symbol\u003c\/p\u003e\n\u003ch1\u003eUncover the Shape of Your Data with Histograms\u003c\/h1\u003e\n\u003cp class=\"product-description\"\u003eStop guessing and see the true distribution of your process data. Histogram+ instantly visualizes the frequency of data points, revealing patterns, central tendencies, and outliers at a glance.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 2. FEATURES SECTION --\u003e\n\u003csection class=\"product-features-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eFrom Raw Data to Statistical Insight\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-grid-three-col\"\u003e\n\u003cdiv class=\"features-column\"\u003e\n\u003ch3\u003eUnderstand Data Distribution\u003c\/h3\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eFrequency Analysis:\u003c\/strong\u003e Instantly see how often different values occur within your dataset.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eSupports All Data Types:\u003c\/strong\u003e Works with numbers, strings, booleans, and enumeration values.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eCustomizable Bins:\u003c\/strong\u003e Define the number of bins or let the symbol automatically calculate the optimal grouping.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-column\"\u003e\n\u003ch3\u003eAdvanced Statistical Overlays\u003c\/h3\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eDisplay Percentiles:\u003c\/strong\u003e Overlay key statistical markers like P10, P50 (median), and P90 directly on the chart.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eBell Curve \u0026amp; Standard Deviation:\u003c\/strong\u003e Visualize the normal distribution curve and standard deviation lines for your data.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eMultistate Limit Lines:\u003c\/strong\u003e Use multistate configurations to highlight target ranges or critical operating limits.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-column\"\u003e\n\u003ch3\u003eSeamless Integration \u0026amp; Export\u003c\/h3\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eOne-Click Data Export:\u003c\/strong\u003e Download the raw or aggregated chart data to CSV or JSON for further analysis.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eLive Data Connection:\u003c\/strong\u003e Works with PI Tags, AF Attributes, and custom PI Vision calculations.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eSimple Configuration:\u003c\/strong\u003e All features are managed through an easy-to-use panel directly within PI Vision.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 3. USE CASES SECTION --\u003e\n\u003csection class=\"use-cases-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eIdentify Trends and Optimize Performance\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-cases-grid\"\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg class=\"icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" fill=\"currentColor\"\u003e\u003cpath d=\"M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-1 14H5V8h6v7zm2 0v-7h6v7h-6z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eQuality Control \u0026amp; SPC\u003c\/h3\u003e\n\u003cp\u003eAnalyze the distribution of a key quality parameter to understand process capability and variability against spec limits.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg class=\"icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" fill=\"currentColor\"\u003e\u003cpath d=\"M4 10h3v7H4zM10.5 10h3v7h-3zM17 10h3v7h-3zM22 6H2V4h20v2z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003ePerformance Monitoring\u003c\/h3\u003e\n\u003cp\u003eTrack the distribution of equipment cycle times or asset performance to identify the most common operating states.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg class=\"icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" fill=\"currentColor\"\u003e\u003cpath d=\"M13 2.05v3.03c4.39.54 7.5 4.53 6.95 8.92-.46 3.63-3.36 6.51-6.95 6.95v3.03c5.5-.55 9.5-5.43 8.95-10.93-.55-5.5-5.43-9.5-10.95-8.95zM3.05 13H.02c.55 5.5 5.43 9.5 10.93 8.95v-3.03c-3.6-.45-6.5-3.35-6.9-6.92z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eProcess Optimization\u003c\/h3\u003e\n\u003cp\u003eAnalyze a process variable's distribution to see if it's centered on its target, helping to reduce waste and improve efficiency.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg class=\"icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" fill=\"currentColor\"\u003e\u003cpath d=\"M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6v-5c0-3.07-1.63-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.64 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eAlarm Rationalization\u003c\/h3\u003e\n\u003cp\u003eVisualize the frequency of different alarm states or values to identify \"chattering\" alarms and optimize alarm limits.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 4. SCREENSHOTS SECTION --\u003e\n\u003csection class=\"screenshots-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003ePowerful Statistical Analysis, Simplified\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshots-grid\"\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/supportsalldatatypes_480x480.png?v=1684762120\" alt=\"A PI Vision histogram showing the distribution of string-based enumeration values.\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eAnalyze Any Data Type\u003c\/h4\u003e\n\u003cp\u003eCreate histograms not just for numbers, but also for strings, booleans, and enumeration values.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/aveva-pi-vision-custom-symbol-histogram-3.png?v=1720763457\" alt=\"A histogram with multistate coloring applied to highlight different sections of the chart.\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eMultistate Visualization\u003c\/h4\u003e\n\u003cp\u003eApply color-coding to bars or display limit lines based on your multistate configuration.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/histogram-square.png?v=1743333780\" alt=\"A PI Vision histogram with a bell curve and standard deviation lines overlaid.\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eDisplay Statistical Overlays\u003c\/h4\u003e\n\u003cp\u003eAdd percentiles, standard deviations, and a normal distribution (bell curve) to your chart for deeper analysis.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/aveva-pi-vision-custom-symbol-histogram-export_600x600.png?v=1720767397\" alt=\"The data export dialog for the Histogram+ symbol, showing CSV and JSON options.\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eOne-Click Data Export\u003c\/h4\u003e\n\u003cp\u003eEasily export the underlying or aggregated data to CSV or JSON for further analysis in other tools.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 5. DEMO VIDEO SECTION --\u003e\n\u003csection class=\"demo-video-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eSee Histogram+ in Action\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"video-card\"\u003e\n\u003cdiv class=\"video-wrapper\"\u003e\u003cvideo preload=\"metadata\" controls=\"controls\"\u003e\n        \u003csource src=\"https:\/\/cdn.shopify.com\/videos\/c\/o\/v\/152179d4d405488e94f4b4afe7bbec82.mp4\" type=\"video\/mp4\"\u003e\n        Your browser does not support the video tag.\n      \u003c\/source\u003e\u003c\/video\u003e\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003cstyle\u003e\n  \/* --- GENERAL SECTION STYLES --- *\/\n  .section-header {\n    display: flex; flex-direction: column; align-items: center; text-align: center;\n    max-width: 800px; margin: 0 auto 3.5rem auto;\n  }\n  .section-header h2 {\n    color: #111; margin-bottom: 1rem; font-size: 1.8rem;\n  }\n  .section-header p {\n    color: #333; line-height: 1.7; font-size: 1rem;\n  }\n  .feature-list {\n    list-style: none; padding: 0; margin: 0;\n  }\n  .feature-list li {\n    position: relative; padding-left: 30px; margin-bottom: 1.25rem;\n    line-height: 1.6; color: #333;\n  }\n  .feature-list li::before {\n    content: '✔'; position: absolute; left: 0; top: 2px;\n    color: #3F72E5; font-size: 1.2rem;\n  }\n  .feature-list li strong {\n    color: #111; font-weight: 600;\n  }\n\n  \/* --- 1. HERO SECTION --- *\/\n  .product-hero-section {\n    padding: 5rem 1rem; text-align: center;\n  }\n  .product-hero-container {\n      max-width: 700px; margin: 0 auto;\n  }\n  .product-hero-icon {\n      width: 80px; height: auto; margin-bottom: 2rem;\n  }\n  .product-subtitle-tag {\n    color: #3F72E5; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.5px;\n  }\n  h1 {\n    font-size: 2.5rem; margin-bottom: 1.5rem;\n  }\n  .product-description {\n    line-height: 1.7; font-size: 1.1rem; color: #333;\n  }\n\n  \/* --- 2. FEATURES SECTION --- *\/\n  .product-features-section {\n    padding: 4rem 1rem; background-color: #f9fafb;\n  }\n  .features-grid-three-col {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n    gap: 2.5rem;\n    max-width: 1200px; margin: 0 auto;\n  }\n  .features-column h3 {\n    font-size: 1.3rem; margin-bottom: 1.5rem; color: #111;\n  }\n \n  \/* --- 3. USE CASES SECTION --- *\/\n  .use-cases-section {\n    padding: 4rem 1rem;\n  }\n  .use-cases-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n    gap: 2rem;\n    max-width: 1200px; margin: 0 auto;\n  }\n  .use-case-card {\n    background: white; border-radius: 20px; padding: 2rem; text-align: center;\n    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);\n  }\n  .use-case-card .icon {\n    width: 40px; height: 40px; color: #3F72E5; margin-bottom: 1rem;\n  }\n  .use-case-card h3 {\n    font-size: 1.2rem; color: #111; margin-bottom: 0.5rem;\n  }\n  .use-case-card p {\n    color: #333; font-size: 0.9rem; line-height: 1.6;\n  }\n\n  \/* --- 4. SCREENSHOTS SECTION --- *\/\n  .screenshots-section {\n    padding: 4rem 1rem; background-color: #f9fafb;\n  }\n  .screenshots-grid {\n    display: grid;\n    grid-template-columns: 1fr; \/* Default to 1 column for mobile *\/\n    gap: 2rem;\n    max-width: 1200px; margin: 0 auto;\n  }\n  .screenshot-card {\n    background: white; border-radius: 20px;\n    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);\n    overflow: hidden;\n  }\n  .screenshot-card img {\n    width: 100%; height: auto; display: block; background-color: #f9fafb;\n  }\n  .screenshot-card-content {\n    padding: 1.5rem;\n  }\n  .screenshot-card-content h4 {\n    font-size: 1.2rem; margin: 0 0 0.5rem 0; color: #111;\n  }\n  .screenshot-card-content p {\n    font-size: 0.95rem; line-height: 1.6; color: #333; margin: 0;\n  }\n \n  \/* --- 5. DEMO VIDEO SECTION --- *\/\n  .demo-video-section {\n    padding: 4rem 1rem;\n  }\n  .video-card {\n    max-width: 1000px; margin: 0 auto; border-radius: 20px;\n    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);\n    overflow: hidden;\n  }\n  .video-wrapper {\n    position: relative; padding-bottom: 56.25%; height: 0;\n  }\n  .video-wrapper video {\n    position: absolute; top: 0; left: 0; width: 100%; height: 100%;\n  }\n\n  \/* --- RESPONSIVE STYLES --- *\/\n  @media (min-width: 750px) {\n    .screenshots-grid {\n      grid-template-columns: 1fr 1fr; \/* 2 columns for tablet and up *\/\n    }\n  }\n\u003c\/style\u003e\n\u003c!-- END: Redesigned Product Page --\u003e","brand":"Software Athlete","offers":[{"title":"Default Title","offer_id":43801585090851,"sku":"","price":1800.0,"currency_code":"EUR","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/aveva-pi-vision-custom-control-histogram-thumbnail.png?v=1720761738"},{"product_id":"manual-data-entry-for-pi-vision","title":"Manual Data Entry+","description":"\u003c!-- START: Redesigned Product Page for Manual Data Entry+ (Corrected) --\u003e\n\u003cp\u003e \u003c\/p\u003e\n\u003c!-- 1. HERO SECTION --\u003e\n\u003csection class=\"product-hero-section\"\u003e\n\u003cdiv class=\"product-hero-container\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/aveva-pi-vision-custom-symbol-manual-data-entry-icon.png?v=1720764649\" alt=\"Manual Data Entry+ Product Icon\" class=\"product-hero-icon\"\u003e\n\u003cp class=\"product-subtitle-tag\"\u003ePI Vision Custom Symbol\u003c\/p\u003e\n\u003ch1\u003eThe Manual Data Entry Symbol for PI Vision\u003c\/h1\u003e\n\u003cp class=\"product-description\"\u003eFinally, a simple and powerful way to enter data directly in PI Vision. Replace PI Manual Logger and spreadsheets with an integrated solution for capturing critical operational data.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 2. FEATURES SECTION --\u003e\n\u003csection class=\"product-features-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eStreamline Your Manual Data Workflows\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-grid-three-col\"\u003e\n\u003cdiv class=\"features-column\"\u003e\n\u003ch3\u003eEfficient Data Management\u003c\/h3\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eMultiple Tag Input:\u003c\/strong\u003e Add or edit values for multiple PI points and AF attributes at once in a clean layout.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eCopy \u0026amp; Paste from Excel:\u003c\/strong\u003e Seamlessly bring in data by copying from a spreadsheet and pasting directly into the symbol.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eCSV Import \u0026amp; Export:\u003c\/strong\u003e Easily import data from CSV files and export your data to multiple formats, including PDF.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-column\"\u003e\n\u003ch3\u003eData Integrity \u0026amp; Quality\u003c\/h3\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eReal-Time Validation:\u003c\/strong\u003e Prevent bad data at the source with instant validation feedback as users type.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eBuilt-in Audit Trail:\u003c\/strong\u003e Automatically log all user changes for full traceability, accountability, and compliance.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eMultistate Coloring:\u003c\/strong\u003e Apply conditional formatting to highlight out-of-spec or critical values instantly.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-column\"\u003e\n\u003ch3\u003eFlexible Configuration\u003c\/h3\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eCustomizable Columns:\u003c\/strong\u003e Configure which data columns are visible, editable, or required for different users.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eSupports All Data Types:\u003c\/strong\u003e Works seamlessly with numeric, string, boolean, and enumeration (dropdown) data.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eIntuitive Timestamp Picker:\u003c\/strong\u003e Use an intuitive calendar for precise timestamp inputs.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 3. USE CASES SECTION --\u003e\n\u003csection class=\"use-cases-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eBuilt for Critical Industrial Use Cases\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-cases-grid\"\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg class=\"icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" fill=\"currentColor\"\u003e\u003cpath d=\"M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eOperator Rounds \u0026amp; Logbooks\u003c\/h3\u003e\n\u003cp\u003eCreate digital logbooks for operators to record manual readings, safety checks, and shift handover notes.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg class=\"icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" fill=\"currentColor\"\u003e\u003cpath d=\"M4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6zm16-4H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-3 10H9v-2h8v2zm-4-4H9V7h4v2z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eLab \u0026amp; Quality Data Entry\u003c\/h3\u003e\n\u003cp\u003eAllow lab technicians to enter quality sample results directly into PI Vision, linking them to specific batches or times.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg class=\"icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" fill=\"currentColor\"\u003e\u003cpath d=\"M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm-1-13h2v2h-2zm0 4h2v6h-2z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eDowntime \u0026amp; Incident Logging\u003c\/h3\u003e\n\u003cp\u003eCapture critical details during downtime events, including reason codes and operator comments for analysis.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg class=\"icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" fill=\"currentColor\"\u003e\u003cpath d=\"M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eManual Override \u0026amp; Backup\u003c\/h3\u003e\n\u003cp\u003eProvide a reliable way to enter critical data manually when automated systems or sensors are temporarily offline.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 4. SCREENSHOTS SECTION --\u003e\n\u003csection class=\"screenshots-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003ePowerful Data Management, Made Simple\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshots-grid\"\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-custom-symbol-manual-data-entry-2.png?v=1721985116\" alt=\"A PI Vision form for entering data for multiple tags at once.\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eEnter Data for Multiple Tags\u003c\/h4\u003e\n\u003cp\u003eAdd or edit values for a collection of PI points or attributes in a single, efficient interface.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-manual-data-entry_600x600.png?v=1720759032\" alt=\"A manual data entry symbol with multistate coloring applied to values.\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eMultistate Visualization\u003c\/h4\u003e\n\u003cp\u003eApply color-coding based on limits to instantly identify out-of-spec or critical values as they are entered.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/aveva-pi-vision-custom-symbol-manual-data-entry-input-table-copy-paste-from-excel_600x600.png?v=1721020180\" alt=\"Pasting data from an Excel spreadsheet into the Manual Data Entry+ symbol.\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eImport from Excel \u0026amp; CSV\u003c\/h4\u003e\n\u003cp\u003eSeamlessly bring in data from external sources by copying from Excel or uploading a CSV file.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/aveva-pi-vision-custom-symbol-manual-data-entry-input-table-export-to-pdf_600x600.png?v=1721020361\" alt=\"The export dialog showing options for Excel, PDF, and CSV download.\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eOne-Click Data Export\u003c\/h4\u003e\n\u003cp\u003eExport the current table view to multiple formats, including Excel, CSV, and PDF, for reporting.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/aveva-pi-vision-custom-symbol-manual-data-entry-input-table-enum-dropdown.png?v=1721020068\" alt=\"Editing data in a PI Vision table using a dropdown menu for consistent entry.\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eUse Dropdowns for Consistency\u003c\/h4\u003e\n\u003cp\u003eEnsure standardized data entry for reason codes and categories with pre-configured dropdown menus.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-custom-symbol-manual-data-entry_600x600.webp?v=1720785021\" alt=\"An intuitive calendar interface for selecting a precise timestamp.\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eIntuitive DateTime Picker\u003c\/h4\u003e\n\u003cp\u003eUse a familiar calendar and time selector to assign a precise timestamp to your manual data entries.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/aveva-pi-vision-custom-symbol-manual-data-entry-audit-trail.png?v=1720768096\" alt=\"A PI Vision table showing the built-in audit trail with user logging.\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eBuilt-in Audit Trail\u003c\/h4\u003e\n\u003cp\u003eAutomatically log all user changes for full traceability, accountability, and compliance with regulations.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/aveva-pi-vision-custom-symbol-manual-data-entry-validation_600x600.png?v=1721020220\" alt=\"An error message showing real-time data validation in a PI Vision table.\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eReal-Time Data Validation\u003c\/h4\u003e\n\u003cp\u003ePrevent bad data at the source with instant validation feedback as operators type.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 5. DEMO VIDEO SECTION --\u003e\n\u003csection class=\"demo-video-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eSee Manual Data Entry+ in Action\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"video-card\"\u003e\n\u003cdiv class=\"video-wrapper\"\u003e\u003cvideo preload=\"metadata\" controls=\"controls\"\u003e\n        \u003csource src=\"https:\/\/cdn.shopify.com\/videos\/c\/o\/v\/eebf22eb96744d57b855f5d57b4567a0.mp4\" type=\"video\/mp4\"\u003e\n        Your browser does not support the video tag.\n      \u003c\/source\u003e\u003c\/video\u003e\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003cstyle\u003e\n  \/* --- GENERAL SECTION STYLES --- *\/\n  .section-header {\n    display: flex; flex-direction: column; align-items: center; text-align: center;\n    max-width: 800px; margin: 0 auto 3.5rem auto;\n  }\n  .section-header h2 {\n    color: #111; margin-bottom: 1rem; font-size: 1.8rem;\n  }\n  .section-header p {\n    color: #333; line-height: 1.7; font-size: 1rem;\n  }\n  .feature-list {\n    list-style: none; padding: 0; margin: 0;\n  }\n  .feature-list li {\n    position: relative; padding-left: 30px; margin-bottom: 1.25rem;\n    line-height: 1.6; color: #333;\n  }\n  .feature-list li::before {\n    content: '✔'; position: absolute; left: 0; top: 2px;\n    color: #3F72E5; font-size: 1.2rem;\n  }\n  .feature-list li strong {\n    color: #111; font-weight: 600;\n  }\n\n  \/* --- 1. HERO SECTION --- *\/\n  .product-hero-section {\n    padding: 5rem 1rem; text-align: center;\n  }\n  .product-hero-container {\n      max-width: 700px; margin: 0 auto;\n  }\n  .product-hero-icon {\n      width: 80px; height: auto; margin-bottom: 2rem;\n  }\n  .product-subtitle-tag {\n    color: #3F72E5; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.5px;\n  }\n  h1 {\n    font-size: 2.5rem; margin-bottom: 1.5rem;\n  }\n  .product-description {\n    line-height: 1.7; font-size: 1.1rem; color: #333;\n  }\n\n  \/* --- 2. FEATURES SECTION --- *\/\n  .product-features-section {\n    padding: 4rem 1rem; background-color: #f9fafb;\n  }\n  .features-grid-three-col {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n    gap: 2.5rem;\n    max-width: 1200px; margin: 0 auto;\n  }\n  .features-column h3 {\n    font-size: 1.3rem; margin-bottom: 1.5rem; color: #111;\n  }\n \n  \/* --- 3. USE CASES SECTION --- *\/\n  .use-cases-section {\n    padding: 4rem 1rem;\n  }\n  .use-cases-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n    gap: 2rem;\n    max-width: 1200px; margin: 0 auto;\n  }\n  .use-case-card {\n    background: white; border-radius: 20px; padding: 2rem; text-align: center;\n    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);\n  }\n  .use-case-card .icon {\n    width: 40px; height: 40px; color: #3F72E5; margin-bottom: 1rem;\n  }\n  .use-case-card h3 {\n    font-size: 1.2rem; color: #111; margin-bottom: 0.5rem;\n  }\n  .use-case-card p {\n    color: #333; font-size: 0.9rem; line-height: 1.6;\n  }\n\n  \/* --- 4. SCREENSHOTS SECTION --- *\/\n  .screenshots-section {\n    padding: 4rem 1rem; background-color: #f9fafb;\n  }\n  .screenshots-grid {\n    display: grid;\n    grid-template-columns: 1fr; \/* Default to 1 column for mobile *\/\n    gap: 2rem;\n    max-width: 1200px; margin: 0 auto;\n  }\n  .screenshot-card {\n    background: white; border-radius: 20px;\n    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);\n    overflow: hidden;\n  }\n  .screenshot-card img {\n    width: 100%; height: auto; display: block; background-color: #f9fafb;\n  }\n  .screenshot-card-content {\n    padding: 1.5rem;\n  }\n  .screenshot-card-content h4 {\n    font-size: 1.2rem; margin: 0 0 0.5rem 0; color: #111;\n  }\n  .screenshot-card-content p {\n    font-size: 0.95rem; line-height: 1.6; color: #333; margin: 0;\n  }\n \n  \/* --- 5. DEMO VIDEO SECTION --- *\/\n  .demo-video-section {\n    padding: 4rem 1rem;\n  }\n  .video-card {\n    max-width: 1000px; margin: 0 auto; border-radius: 20px;\n    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);\n    overflow: hidden;\n  }\n  .video-wrapper {\n    position: relative; padding-bottom: 56.25%; height: 0;\n  }\n  .video-wrapper video {\n    position: absolute; top: 0; left: 0; width: 100%; height: 100%;\n  }\n\n  \/* --- RESPONSIVE STYLES --- *\/\n  @media (min-width: 750px) {\n    .screenshots-grid {\n      grid-template-columns: 1fr 1fr; \/* 2 columns for tablet and up *\/\n    }\n  }\n\u003c\/style\u003e\n\u003c!-- END: Redesigned Product Page --\u003e","brand":"Software Athlete","offers":[{"title":"Default Title","offer_id":43921305043235,"sku":"","price":2000.0,"currency_code":"EUR","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/aveva-pi-vision-custom-control-manual-data-entry-thumbnail.png?v=1720761653"},{"product_id":"datetime-picker-plus","title":"DateTime Picker+","description":"\u003c!-- START: Redesigned Product Page for DateTime Picker+ --\u003e\n\u003cp\u003e \u003c\/p\u003e\n\u003c!-- 1. HERO SECTION --\u003e\n\u003csection class=\"product-hero-section\"\u003e\n\u003cdiv class=\"product-hero-container\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/datepicker_317d5598-cd64-4b0a-afe9-31bade6441ce_160x160.png?v=1684761485\" alt=\"DateTime Picker+ Product Icon\" class=\"product-hero-icon\"\u003e\n\u003cp class=\"product-subtitle-tag\"\u003ePI Vision Custom Symbol\u003c\/p\u003e\n\u003ch1\u003eTake Control of Your Dashboard's Time Context\u003c\/h1\u003e\n\u003cp class=\"product-description\"\u003eGo beyond the default PI Vision timebar. DateTime Picker+ gives you the power to create intuitive, custom, and operator-friendly time navigation controls directly on your display.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 2. FEATURES SECTION --\u003e\n\u003csection class=\"product-features-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eTime Navigation, Built for Operators\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-grid-three-col\"\u003e\n\u003cdiv class=\"features-column\"\u003e\n\u003ch3\u003eFlexible Time Navigation\u003c\/h3\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003ePredefined Intervals:\u003c\/strong\u003e Create one-click buttons for common time ranges like \"Last Hour,\" \"Yesterday,\" or \"Week to Date.\"\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eCustom Time Ranges:\u003c\/strong\u003e Allow users to select a specific start and end time with an intuitive calendar interface.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eCustom Data Sources:\u003c\/strong\u003e Define time ranges dynamically based on the start and end times of your own AF Event Frames.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-column\"\u003e\n\u003ch3\u003eIntuitive User Controls\u003c\/h3\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eMultiple Display Modes:\u003c\/strong\u003e Choose the best interface for your users, including a calendar, dropdown menus, or button lists.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eShift Offset Configuration:\u003c\/strong\u003e Easily define production-specific time frames, such as a shift that runs from 6:00 AM to 6:00 PM.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eRelative Time Adjustments:\u003c\/strong\u003e Create \"Next\" and \"Previous\" buttons to step forward or backward by a set interval (e.g., day, week).\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-column\"\u003e\n\u003ch3\u003ePowerful Configuration\u003c\/h3\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eSynchronize Across Displays:\u003c\/strong\u003e Link multiple DateTime Picker+ symbols together for consistent navigation.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eHighly Customizable:\u003c\/strong\u003e Tailor colors, fonts, and styles to perfectly match your dashboard's design.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eSimple Setup:\u003c\/strong\u003e All options are managed through a user-friendly configuration panel within PI Vision.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 3. USE CASES SECTION --\u003e\n\u003csection class=\"use-cases-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eBuild More Powerful and User-Friendly Dashboards\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-cases-grid\"\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg class=\"icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" fill=\"currentColor\"\u003e\u003cpath d=\"M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eShift-Based Reporting\u003c\/h3\u003e\n\u003cp\u003eCreate buttons for \"Current Shift,\" \"Previous Shift,\" and \"Yesterday's Day Shift\" to simplify daily production analysis for operators.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg class=\"icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" fill=\"currentColor\"\u003e\u003cpath d=\"M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eWeekly \u0026amp; Monthly KPI Dashboards\u003c\/h3\u003e\n\u003cp\u003eAllow managers to quickly switch between \"Last Week,\" \"Month to Date,\" and \"Last Month\" views on high-level KPI dashboards.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg class=\"icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" fill=\"currentColor\"\u003e\u003cpath d=\"M15.5 14h-.79l-.28-.27A6.471 6.471 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eAd Hoc Incident Analysis\u003c\/h3\u003e\n\u003cp\u003eEmpower engineers to use the calendar picker to isolate a specific, custom time range when troubleshooting an event.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg class=\"icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" fill=\"currentColor\"\u003e\u003cpath d=\"M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eKiosk \u0026amp; Overview Displays\u003c\/h3\u003e\n\u003cp\u003eCreate simple \"Previous Day\" and \"Next Day\" buttons for public displays, making them easy for anyone to navigate.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 4. SCREENSHOTS SECTION --\u003e\n\u003csection class=\"screenshots-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eIntuitive Time Controls for Any Dashboard\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshots-grid\"\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/aveva-pivision-custom-control-datetime-picker.png?v=1720761395\" alt=\"A custom datetime picker in PI Vision with buttons for next, previous, and specific dates.\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eIntuitive Controls\u003c\/h4\u003e\n\u003cp\u003eAllow users to quickly step through time ranges or jump to a specific date with simple, easy-to-use buttons.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-custom-symbol-datetime-picker-range-selection_3bf3fc49-26af-4225-b951-faf438c1dbf9.png?v=1734615363\" alt=\"A calendar interface in PI Vision for selecting a custom start and end date range.\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eInteractive Calendar View\u003c\/h4\u003e\n\u003cp\u003eEnable users to select precise start and end times using a familiar and interactive calendar interface.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-custom-symbol-datetime-picker-customizeable-buttons.png?v=1734615364\" alt=\"A row of custom buttons for predefined time intervals like 'Today', 'Yesterday', and 'Last Week'.\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eCustomizable Buttons\u003c\/h4\u003e\n\u003cp\u003eCreate a set of custom, one-click buttons for your most frequently used time intervals and reports.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/customize_1652ce0c-4029-4753-8653-6522da841359_480x480.png?v=1684761853\" alt=\"The styling and configuration panel for the DateTime Picker+ symbol.\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eHighly Customizable\u003c\/h4\u003e\n\u003cp\u003eTake full control over the appearance, including colors, fonts, and styles, to perfectly match your dashboard.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/aveva-pi-vision-custom-symbol-datetime-picker.png?v=1720764282\" alt=\"A styled DateTime Picker+ symbol in a finished PI Vision dashboard.\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eStyle It Your Way\u003c\/h4\u003e\n\u003cp\u003ePersonalize your picker with flexible styling options to create a polished and professional look.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 5. DEMO VIDEO SECTION --\u003e\n\u003csection class=\"demo-video-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eSee DateTime Picker+ in Action\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"video-card\"\u003e\n\u003cdiv class=\"video-wrapper\"\u003e\u003cvideo preload=\"metadata\" controls=\"controls\"\u003e\n        \u003csource src=\"https:\/\/cdn.shopify.com\/videos\/c\/o\/v\/1e2cf4e8fda64767a45e69a4c2f94972.mp4\" type=\"video\/mp4\"\u003e\n        Your browser does not support the video tag.\n      \u003c\/source\u003e\u003c\/video\u003e\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003cstyle\u003e\n  \/* --- GENERAL SECTION STYLES --- *\/\n  .section-header {\n    display: flex; flex-direction: column; align-items: center; text-align: center;\n    max-width: 800px; margin: 0 auto 3.5rem auto;\n  }\n  .section-header h2 {\n    color: #111; margin-bottom: 1rem; font-size: 1.8rem;\n  }\n  .section-header p {\n    color: #333; line-height: 1.7; font-size: 1rem;\n  }\n  .feature-list {\n    list-style: none; padding: 0; margin: 0;\n  }\n  .feature-list li {\n    position: relative; padding-left: 30px; margin-bottom: 1.25rem;\n    line-height: 1.6; color: #333;\n  }\n  .feature-list li::before {\n    content: '✔'; position: absolute; left: 0; top: 2px;\n    color: #3F72E5; font-size: 1.2rem;\n  }\n  .feature-list li strong {\n    color: #111; font-weight: 600;\n  }\n\n  \/* --- 1. HERO SECTION --- *\/\n  .product-hero-section {\n    padding: 5rem 1rem; text-align: center;\n  }\n  .product-hero-container {\n      max-width: 700px; margin: 0 auto;\n  }\n  .product-hero-icon {\n      width: 80px; height: auto; margin-bottom: 2rem;\n  }\n  .product-subtitle-tag {\n    color: #3F72E5; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.5px;\n  }\n  h1 {\n    font-size: 2.5rem; margin-bottom: 1.5rem;\n  }\n  .product-description {\n    line-height: 1.7; font-size: 1.1rem; color: #333;\n  }\n\n  \/* --- 2. FEATURES SECTION --- *\/\n  .product-features-section {\n    padding: 4rem 1rem; background-color: #f9fafb;\n  }\n  .features-grid-three-col {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n    gap: 2.5rem;\n    max-width: 1200px; margin: 0 auto;\n  }\n  .features-column h3 {\n    font-size: 1.3rem; margin-bottom: 1.5rem; color: #111;\n  }\n \n  \/* --- 3. USE CASES SECTION --- *\/\n  .use-cases-section {\n    padding: 4rem 1rem;\n  }\n  .use-cases-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n    gap: 2rem;\n    max-width: 1200px; margin: 0 auto;\n  }\n  .use-case-card {\n    background: white; border-radius: 20px; padding: 2rem; text-align: center;\n    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);\n  }\n  .use-case-card .icon {\n    width: 40px; height: 40px; color: #3F72E5; margin-bottom: 1rem;\n  }\n  .use-case-card h3 {\n    font-size: 1.2rem; color: #111; margin-bottom: 0.5rem;\n  }\n  .use-case-card p {\n    color: #333; font-size: 0.9rem; line-height: 1.6;\n  }\n\n  \/* --- 4. SCREENSHOTS SECTION --- *\/\n  .screenshots-section {\n    padding: 4rem 1rem; background-color: #f9fafb;\n  }\n  .screenshots-grid {\n    display: grid;\n    grid-template-columns: 1fr; \/* Default to 1 column for mobile *\/\n    gap: 2rem;\n    max-width: 1200px; margin: 0 auto;\n  }\n  .screenshot-card {\n    background: white; border-radius: 20px;\n    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);\n    overflow: hidden;\n  }\n  .screenshot-card img {\n    width: 100%; height: auto; display: block; background-color: #f9fafb;\n  }\n  .screenshot-card-content {\n    padding: 1.5rem;\n  }\n  .screenshot-card-content h4 {\n    font-size: 1.2rem; margin: 0 0 0.5rem 0; color: #111;\n  }\n  .screenshot-card-content p {\n    font-size: 0.95rem; line-height: 1.6; color: #333; margin: 0;\n  }\n \n  \/* --- 5. DEMO VIDEO SECTION --- *\/\n  .demo-video-section {\n    padding: 4rem 1rem;\n  }\n  .video-card {\n    max-width: 1000px; margin: 0 auto; border-radius: 20px;\n    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);\n    overflow: hidden;\n  }\n  .video-wrapper {\n    position: relative; padding-bottom: 56.25%; height: 0;\n  }\n  .video-wrapper video {\n    position: absolute; top: 0; left: 0; width: 100%; height: 100%;\n  }\n\n  \/* --- RESPONSIVE STYLES --- *\/\n  @media (min-width: 750px) {\n    .screenshots-grid {\n      grid-template-columns: 1fr 1fr; \/* 2 columns for tablet and up *\/\n    }\n  }\n\u003c\/style\u003e\n\u003c!-- END: Redesigned Product Page --\u003e","brand":"Software Athlete","offers":[{"title":"Default Title","offer_id":43964117483811,"sku":"","price":1600.0,"currency_code":"EUR","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/aveva-pi-vision-custom-control-datetime-picker-thumbnail.png?v=1720761757"},{"product_id":"pi-vision-custom-control-combo-chart","title":"Combo Chart+","description":"\u003c!-- START: Redesigned Product Page for Combo Chart+ --\u003e\n\u003cp\u003e \u003c\/p\u003e\n\u003c!-- 1. HERO SECTION --\u003e\n\u003csection class=\"product-hero-section\"\u003e\n\u003cdiv class=\"product-hero-container\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/aveva-pi-vision-custom-symbol-combo-chart-icon_240x240.png?v=1720767616\" alt=\"Combo Chart+ Product Icon\" class=\"product-hero-icon\"\u003e\n\u003cp class=\"product-subtitle-tag\"\u003ePI Vision Custom Symbol\u003c\/p\u003e\n\u003ch1\u003eThe Ultimate Combination Chart for PI Vision\u003c\/h1\u003e\n\u003cp class=\"product-description\"\u003eCombine bars, lines, areas, and scatter plots on a single, powerful chart. Combo Chart+ gives you the flexibility to visualize complex relationships and tell a complete data story in one place.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 2. FEATURES SECTION --\u003e\n\u003csection class=\"product-features-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eUnleash Your Data's Full Potential\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-grid-three-col\"\u003e\n\u003cdiv class=\"features-column\"\u003e\n\u003ch3\u003eVersatile Charting Engine\u003c\/h3\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eCombine Any Chart Type:\u003c\/strong\u003e Overlay lines, bars (stacked or grouped), areas, and scatter plots for comprehensive visuals.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eMultiple Y-Axes:\u003c\/strong\u003e Display data with different scales and units on unlimited, configurable Y-axes.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eSparkline Mode:\u003c\/strong\u003e Enable compact, minimalist chart views perfect for dashboards and summary tables.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-column\"\u003e\n\u003ch3\u003ePowerful Analytical Overlays\u003c\/h3\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eEvent Frame Visualization:\u003c\/strong\u003e Overlay event frames directly on the chart to correlate events with process data.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eMultistate Limit Lines:\u003c\/strong\u003e Use multistate features to clearly display operational limits, targets, or thresholds.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eOn-Demand Statistics:\u003c\/strong\u003e Calculate statistics like averages, min, and max values by simply selecting a time range on the chart.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-column\"\u003e\n\u003ch3\u003eIntuitive User Experience\u003c\/h3\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eCustomizable Time Range:\u003c\/strong\u003e Easily adjust the time range for targeted, ad hoc analysis.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eOne-Click Data Export:\u003c\/strong\u003e Export chart data in CSV or JSON formats for external analysis and reporting.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eNo-Code Configuration:\u003c\/strong\u003e All features are managed through an easy-to-use panel directly within PI Vision.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 3. SPC SECTION (NEW \u0026 SEO-FOCUSED) --\u003e\n\u003csection class=\"feature-split-section\"\u003e\n\u003cdiv class=\"feature-split-card-container layout-reversed\"\u003e\n\u003cdiv class=\"feature-card-main\"\u003e\n\u003cdiv class=\"feature-card-text-wrapper\"\u003e\n\u003ch2\u003eBring Statistical Process Control (SPC) Back to PI Vision\u003c\/h2\u003e\n\u003cp\u003eFor years, users have missed the built-in SPC capabilities of PI ProcessBook. With Combo Chart+, you can finally create powerful SPC control charts directly within modern PI Vision dashboards.\u003c\/p\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eVisualize Control Limits:\u003c\/strong\u003e Plot your process variable as a line and overlay your Upper and Lower Control Limits (UCL\/LCL) as separate traces.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eIdentify Special Causes:\u003c\/strong\u003e Use multistate coloring to automatically highlight points that violate standard SPC rules (e.g., Nelson, WECO).\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eCorrelate with Events:\u003c\/strong\u003e Overlay event frames on your control chart to instantly see how process upsets impact statistical performance.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"feature-card-image\"\u003e\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/aveva-pi-vision-custom-symbol-combo-chart-multistate.png?v=1720763669\" alt=\"An SPC control chart in PI Vision created with Combo Chart+, showing upper and lower control limits.\"\u003e\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 4. USE CASES SECTION --\u003e\n\u003csection class=\"use-cases-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eFrom Process Analysis to Business Intelligence\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-cases-grid\"\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg class=\"icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" fill=\"currentColor\"\u003e\u003cpath d=\"M16 6l2.29 2.29-4.88 4.88-4-4L2 16.59 3.41 18l6-6 4 4 6.3-6.29L22 12V6h-6z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eProduction vs. Target Analysis\u003c\/h3\u003e\n\u003cp\u003ePlot actual production as a bar chart against a target line, and overlay downtime events to see their impact.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg class=\"icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" fill=\"currentColor\"\u003e\u003cpath d=\"M4 10h3v7H4zM10.5 10h3v7h-3zM17 10h3v7h-3zM22 6H2V4h20v2z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eStatistical Process Control (SPC)\u003c\/h3\u003e\n\u003cp\u003eMonitor process stability by plotting your key variable against its calculated statistical control limits (UCL\/LCL).\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg class=\"icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" fill=\"currentColor\"\u003e\u003cpath d=\"M13 2.05v3.03c4.39.54 7.5 4.53 6.95 8.92-.46 3.63-3.36 6.51-6.95 6.95v3.03c5.5-.55 9.5-5.43 8.95-10.93-.55-5.5-5.43-9.5-10.95-8.95zM3.05 13H.02c.55 5.5 5.43 9.5 10.93 8.95v-3.03c-3.6-.45-6.5-3.35-6.9-6.92z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eEnergy \u0026amp; Utility Consumption\u003c\/h3\u003e\n\u003cp\u003eCompare electricity usage (line chart) with gas consumption (bar chart) on a single timeline with multiple Y-axes.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg class=\"icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" fill=\"currentColor\"\u003e\u003cpath d=\"M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-1 14H5V8h6v7zm2 0v-7h6v7h-6z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eQuality \u0026amp; Process Correlation\u003c\/h3\u003e\n\u003cp\u003ePlot a key quality parameter as a scatter plot over your main process variable to identify correlations.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 5. SCREENSHOTS SECTION --\u003e\n\u003csection class=\"screenshots-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eBuild Any Chart You Can Imagine\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshots-grid\"\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/aveva-pi-vision-custom-symbol-combo-chart.png?v=1720763355\" alt=\"A PI Vision combo chart showing line and bar series together.\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eAll-In-One Charting\u003c\/h4\u003e\n\u003cp\u003eCombine multiple chart types like lines, bars, and areas for a complete, holistic view of your data.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-bar-chart-stacked-2_600x600.png?v=1720759357\" alt=\"A stacked bar chart created with the Combo Chart+ symbol in PI Vision.\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eStacked or Grouped Bar Charts\u003c\/h4\u003e\n\u003cp\u003eVisualize data series effectively with powerful bar chart overlays, either stacked or grouped.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/aveva-pi-vision-custom-symbol-combo-chart-area_600x600.png?v=1720763306\" alt=\"An area chart combined with other series in the Combo Chart+ symbol.\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eArea Chart Overlays\u003c\/h4\u003e\n\u003cp\u003eHighlight trends and visualize cumulative data by adding shaded area charts to your display.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/aveva-pi-vision-custom-symbol-combo-chart-multiple-yaxis_600x600.png?v=1720767587\" alt=\"A PI Vision chart with multiple Y-axes for different data scales.\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eMultiple Y-Axes\u003c\/h4\u003e\n\u003cp\u003eCustomize and manage unlimited Y-axes to cohesively display data series with different scales and units.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/aveva-pi-vision-custom-symbol-combo-chart-multistate.png?v=1720763669\" alt=\"A PI Vision chart with multistate limit lines for SPC.\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eMultistate Limit Lines\u003c\/h4\u003e\n\u003cp\u003eVisually indicate key thresholds, targets, or statistical control limits (UCL\/LCL) with dashed or solid lines.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-custom-symbol-combo-chart-event-details_600x600.png?v=1721019405\" alt=\"A PI Vision chart showing event frames overlaid on the data.\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eDisplay Event Frames\u003c\/h4\u003e\n\u003cp\u003eOverlay and annotate event frames directly on the chart to correlate process data with operational events.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/aveva-pi-vision-custom-symbol-combo-chart-statistics_600x600.png?v=1720767514\" alt=\"Calculating statistics on a selected time range within a PI Vision chart.\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eOn-Demand Statistics\u003c\/h4\u003e\n\u003cp\u003eSimply click and drag to select a time range and instantly calculate key statistics like average, min, and max.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/aveva-pi-vision-custom-symbol-combo-chart-sparkline_600x600.png?v=1720767530\" alt=\"A compact sparkline chart used for a summary view in PI Vision.\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eCompact Sparkline Mode\u003c\/h4\u003e\n\u003cp\u003eEnable a minimalist sparkline view for quick, compact trend visualizations in tables or summary dashboards.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 6. DEMO VIDEO SECTION --\u003e\n\u003csection class=\"demo-video-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eSee Combo Chart+ in Action\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"video-card\"\u003e\n\u003cdiv class=\"video-wrapper\"\u003e\u003cvideo preload=\"metadata\" controls=\"controls\"\u003e\n        \u003csource src=\"https:\/\/cdn.shopify.com\/videos\/c\/o\/v\/1e2cf4e8fda64767a45e69a4c2f94972.mp4\" type=\"video\/mp4\"\u003e\n        Your browser does not support the video tag.\n      \u003c\/source\u003e\u003c\/video\u003e\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003cstyle\u003e\n  \/* --- GENERAL SECTION STYLES --- *\/\n  .section-header {\n    display: flex; flex-direction: column; align-items: center; text-align: center;\n    max-width: 800px; margin: 0 auto 3.5rem auto;\n  }\n  .section-header h2 {\n    color: #111; margin-bottom: 1rem; font-size: 1.8rem;\n  }\n  .section-header p {\n    color: #333; line-height: 1.7; font-size: 1rem;\n  }\n  .feature-list {\n    list-style: none; padding: 0; margin: 0;\n  }\n  .feature-list li {\n    position: relative; padding-left: 30px; margin-bottom: 1.25rem;\n    line-height: 1.6; color: #333;\n  }\n  .feature-list li::before {\n    content: '✔'; position: absolute; left: 0; top: 2px;\n    color: #3F72E5; font-size: 1.2rem;\n  }\n  .feature-list li strong {\n    color: #111; font-weight: 600;\n  }\n\n  \/* --- 1. HERO SECTION --- *\/\n  .product-hero-section {\n    padding: 5rem 1rem; text-align: center;\n  }\n  .product-hero-container {\n      max-width: 700px; margin: 0 auto;\n  }\n  .product-hero-icon {\n      width: 80px; height: auto; margin-bottom: 2rem;\n  }\n  .product-subtitle-tag {\n    color: #3F72E5; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.5px;\n  }\n  h1 {\n    font-size: 2.5rem; margin-bottom: 1.5rem;\n  }\n  .product-description {\n    line-height: 1.7; font-size: 1.1rem; color: #333;\n  }\n\n  \/* --- 2. FEATURES SECTION --- *\/\n  .product-features-section {\n    padding: 4rem 1rem; background-color: #f9fafb;\n  }\n  .features-grid-three-col {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n    gap: 2.5rem;\n    max-width: 1200px; margin: 0 auto;\n  }\n  .features-column h3 {\n    font-size: 1.3rem; margin-bottom: 1.5rem; color: #111;\n  }\n \n  \/* --- 3. SPC SECTION --- *\/\n  .feature-split-section {\n    padding: 5rem 1rem;\n    overflow-x: hidden;\n  }\n  .feature-split-card-container {\n    display: grid;\n    grid-template-columns: repeat(10, 1fr);\n    align-items: center;\n    max-width: 1100px;\n    margin: 0 auto;\n  }\n  .layout-reversed .feature-card-main {\n    grid-column: 4 \/ span 7;\n    display: flex;\n    justify-content: flex-end;\n  }\n  .layout-reversed .feature-card-image {\n    grid-column: 1 \/ span 5;\n  }\n  .layout-reversed .feature-card-text-wrapper {\n    text-align: left;\n  }\n  .feature-card-main {\n    grid-row: 1; z-index: 1; background: white; border-radius: 20px;\n    padding: 3rem; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);\n  }\n  .feature-card-text-wrapper {\n    max-width: 500px;\n  }\n  .feature-card-image {\n    grid-row: 1; z-index: 2; border-radius: 20px;\n    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);\n    transition: transform 0.3s ease;\n  }\n  .feature-card-image:hover { transform: scale(1.03); }\n  .feature-card-image img {\n    width: 100%; height: auto; display: block; border-radius: 20px;\n  }\n  .feature-card-main h2 {\n    color: #111; margin-bottom: 1.5rem; font-size: 1.8rem;\n  }\n  .feature-card-main p {\n    color: #333; line-height: 1.7; margin-bottom: 2rem;\n  }\n  \n  \/* --- 4. USE CASES SECTION --- *\/\n  .use-cases-section {\n    padding: 4rem 1rem; background-color: #f9fafb;\n  }\n  .use-cases-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n    gap: 2rem;\n    max-width: 1200px; margin: 0 auto;\n  }\n  .use-case-card {\n    background: white; border-radius: 20px; padding: 2rem; text-align: center;\n    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);\n  }\n  .use-case-card .icon {\n    width: 40px; height: 40px; color: #3F72E5; margin-bottom: 1rem;\n  }\n  .use-case-card h3 {\n    font-size: 1.2rem; color: #111; margin-bottom: 0.5rem;\n  }\n  .use-case-card p {\n    color: #333; font-size: 0.9rem; line-height: 1.6;\n  }\n\n  \/* --- 5. SCREENSHOTS SECTION --- *\/\n  .screenshots-section {\n    padding: 4rem 1rem;\n  }\n  .screenshots-grid {\n    display: grid;\n    grid-template-columns: 1fr; \/* Default to 1 column for mobile *\/\n    gap: 2rem;\n    max-width: 1200px; margin: 0 auto;\n  }\n  .screenshot-card {\n    background: white; border-radius: 20px;\n    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);\n    overflow: hidden;\n  }\n  .screenshot-card img {\n    width: 100%; height: auto; display: block; background-color: #f9fafb;\n  }\n  .screenshot-card-content {\n    padding: 1.5rem;\n  }\n  .screenshot-card-content h4 {\n    font-size: 1.2rem; margin: 0 0 0.5rem 0; color: #111;\n  }\n  .screenshot-card-content p {\n    font-size: 0.95rem; line-height: 1.6; color: #333; margin: 0;\n  }\n \n  \/* --- 6. DEMO VIDEO SECTION --- *\/\n  .demo-video-section {\n    padding: 4rem 1rem; background-color: #f9fafb;\n  }\n  .video-card {\n    max-width: 1000px; margin: 0 auto; border-radius: 20px;\n    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);\n    overflow: hidden;\n  }\n  .video-wrapper {\n    position: relative; padding-bottom: 56.25%; height: 0;\n  }\n  .video-wrapper video {\n    position: absolute; top: 0; left: 0; width: 100%; height: 100%;\n  }\n\n  \/* --- RESPONSIVE STYLES --- *\/\n  @media (min-width: 750px) {\n    .screenshots-grid {\n      grid-template-columns: 1fr 1fr; \/* 2 columns for tablet and up *\/\n    }\n  }\n  @media (max-width: 900px) {\n    .feature-split-card-container {\n        grid-template-columns: 1fr;\n    }\n    .feature-card-image {\n        grid-column: 1; grid-row: 1; margin-bottom: -40px;\n    }\n    .feature-card-main {\n        grid-column: 1; grid-row: 2; padding-top: 60px;\n        justify-content: center;\n    }\n    .feature-card-text-wrapper {\n        max-width: 100%; text-align: center;\n    }\n    .feature-list {\n        display: inline-block; text-align: left;\n    }\n  }\n\u003c\/style\u003e\n\u003c!-- END: Redesigned Product Page --\u003e","brand":"Software Athlete","offers":[{"title":"Default Title","offer_id":44127721619747,"sku":"","price":2000.0,"currency_code":"EUR","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/aveva-pi-vision-custom-symbol-combo-chart-thumbnail.png?v=1720763374"},{"product_id":"pi-vision-manual-input-table-custom-symbol","title":"Manual Input Table+","description":"\u003c!-- START: Redesigned Product Page for Manual Input Table+ --\u003e\n\u003cp\u003e \u003c\/p\u003e\n\u003c!-- 1. HERO SECTION --\u003e\n\u003csection class=\"product-hero-section\"\u003e\n\u003cdiv class=\"product-hero-container\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/icon2_e99dea70-8289-47fb-98cb-cbd219dbed3e_160x160.png?v=1684763155\" alt=\"Manual Input Table+ Product Icon\" class=\"product-hero-icon\"\u003e\n\u003cp class=\"product-subtitle-tag\"\u003ePI Vision Custom Symbol\u003c\/p\u003e\n\u003ch1\u003eThe Ultimate Manual Data Entry Table for PI Vision\u003c\/h1\u003e\n\u003cp class=\"product-description\"\u003eReplace PI Manual Logger and spreadsheets. Manual Input Table+ is a powerful, integrated solution for adding, editing, and managing critical operational data directly within your dashboards.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 2. FEATURES SECTION --\u003e\n\u003csection class=\"product-features-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eStreamline Your Manual Data Workflows\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-grid-three-col\"\u003e\n\u003cdiv class=\"features-column\"\u003e\n\u003ch3\u003eEfficient Data Management\u003c\/h3\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eBulk Add, Edit \u0026amp; Delete:\u003c\/strong\u003e Perform data operations on large sets of values at once for maximum efficiency.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eCopy \u0026amp; Paste from Excel:\u003c\/strong\u003e Seamlessly bring in data by copying from a spreadsheet and pasting directly into the table.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eCSV Import \u0026amp; Export:\u003c\/strong\u003e Easily import data from CSV files and export your table to multiple formats, including PDF.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-column\"\u003e\n\u003ch3\u003eData Integrity \u0026amp; Quality\u003c\/h3\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eReal-Time Validation:\u003c\/strong\u003e Prevent bad data at the source with instant validation feedback as users type.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eBuilt-in Audit Trail:\u003c\/strong\u003e Automatically log all user changes for full traceability, accountability, and compliance.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eMultistate Coloring:\u003c\/strong\u003e Apply conditional formatting to highlight out-of-spec or critical values instantly.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-column\"\u003e\n\u003ch3\u003eFlexible Configuration\u003c\/h3\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eCustomizable Columns:\u003c\/strong\u003e Configure which data columns are visible, editable, or required for different users.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eSupports All Data Types:\u003c\/strong\u003e Works seamlessly with numeric, string, boolean, and enumeration (dropdown) data.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eIntuitive Setup:\u003c\/strong\u003e All features are managed through a user-friendly configuration panel—no coding required.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 3. USE CASES SECTION --\u003e\n\u003csection class=\"use-cases-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eBuilt for Critical Industrial Use Cases\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-cases-grid\"\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg class=\"icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" fill=\"currentColor\"\u003e\u003cpath d=\"M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eOperator Rounds \u0026amp; Logbooks\u003c\/h3\u003e\n\u003cp\u003eCreate digital logbooks for operators to record manual readings, safety checks, and shift handover notes.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg class=\"icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" fill=\"currentColor\"\u003e\u003cpath d=\"M4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6zm16-4H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-3 10H9v-2h8v2zm-4-4H9V7h4v2z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eLab \u0026amp; Quality Data Entry\u003c\/h3\u003e\n\u003cp\u003eAllow lab technicians to enter quality sample results directly into PI Vision, linking them to specific batches or times.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg class=\"icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" fill=\"currentColor\"\u003e\u003cpath d=\"M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm-1-13h2v2h-2zm0 4h2v6h-2z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eDowntime \u0026amp; Incident Logging\u003c\/h3\u003e\n\u003cp\u003eCapture critical details during downtime events, including reason codes and operator comments for analysis.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg class=\"icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" fill=\"currentColor\"\u003e\u003cpath d=\"M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eManual Override \u0026amp; Backup\u003c\/h3\u003e\n\u003cp\u003eProvide a reliable way to enter critical data manually when automated systems or sensors are temporarily offline.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 4. SCREENSHOTS SECTION --\u003e\n\u003csection class=\"screenshots-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003ePowerful Data Management, Made Simple\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshots-grid\"\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/aveva-pi-vision-custom-symbol-manual-data-entry-input-table-add_600x600.png?v=1721020203\" alt=\"Adding bulk historical data to a PI Vision table.\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eBulk Add Historical Data\u003c\/h4\u003e\n\u003cp\u003eQuickly backfill data or add entire sets of historical records in a single operation.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/aveva-pi-vision-custom-symbol-manual-data-entry-input-table-enum-dropdown_600x600.png?v=1721020068\" alt=\"Editing data in a PI Vision table using a dropdown menu for consistent entry.\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eInline Editing with Dropdowns\u003c\/h4\u003e\n\u003cp\u003eCorrect archived values, adjust timestamps, or use dropdowns for consistent data entry.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/aveva-pi-vision-custom-symbol-manual-data-entry-input-table-delete_600x600.png?v=1720768128\" alt=\"Selecting and deleting multiple rows of data in a PI Vision data entry table.\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eBulk Data Deletion\u003c\/h4\u003e\n\u003cp\u003eClean up test data or remove incorrect entries for multiple tags at once with ease.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/aveva-pi-vision-custom-symbol-manual-data-entry-input-table-multistate_600x600.png?v=1720768167\" alt=\"A manual input table with multistate coloring to highlight out-of-spec values.\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eMultistate \u0026amp; Conditional Formatting\u003c\/h4\u003e\n\u003cp\u003eApply color-coding based on limits to instantly identify out-of-spec or critical values.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/aveva-pi-vision-custom-symbol-manual-data-entry-input-table-copy-paste-from-excel_600x600.png?v=1721020180\" alt=\"Pasting data from an Excel spreadsheet into the Manual Input Table+ symbol.\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eImport from Excel \u0026amp; CSV\u003c\/h4\u003e\n\u003cp\u003eSeamlessly bring in data from external sources by copying from Excel or uploading a CSV file.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/aveva-pi-vision-custom-symbol-manual-data-entry-input-table-export-to-pdf_600x600.png?v=1721020361\" alt=\"The export dialog showing options for Excel, PDF, and CSV download.\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eOne-Click Data Export\u003c\/h4\u003e\n\u003cp\u003eExport the current table view to multiple formats, including Excel, CSV, and PDF, for reporting.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/aveva-pi-vision-custom-symbol-manual-data-entry-audit-trail.png?v=1720768096\" alt=\"A PI Vision table showing the built-in audit trail with user logging.\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eBuilt-in Audit Trail\u003c\/h4\u003e\n\u003cp\u003eAutomatically log all user changes for full traceability, accountability, and compliance.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/aveva-pi-vision-custom-symbol-manual-data-entry-input-table-validation_600x600.png?v=1721020102\" alt=\"An error message showing real-time data validation in a PI Vision table.\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eReal-Time Data Validation\u003c\/h4\u003e\n\u003cp\u003ePrevent bad data at the source with instant validation feedback as users type.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 5. DEMO VIDEO SECTION --\u003e\n\u003csection class=\"demo-video-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eSee Manual Input Table+ in Action\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"video-card\"\u003e\n\u003cdiv class=\"video-wrapper\"\u003e\u003cvideo preload=\"metadata\" controls=\"controls\"\u003e\n        \u003csource src=\"https:\/\/cdn.shopify.com\/videos\/c\/o\/v\/47d57cb8b48f4b6b8da7fc68527debc5.mp4\" type=\"video\/mp4\"\u003e\n        Your browser does not support the video tag.\n      \u003c\/source\u003e\u003c\/video\u003e\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003cstyle\u003e\n  \/* --- GENERAL SECTION STYLES --- *\/\n  .section-header {\n    display: flex; flex-direction: column; align-items: center; text-align: center;\n    max-width: 800px; margin: 0 auto 3.5rem auto;\n  }\n  .section-header h2 {\n    color: #111; margin-bottom: 1rem; font-size: 1.8rem;\n  }\n  .section-header p {\n    color: #333; line-height: 1.7; font-size: 1rem;\n  }\n  .feature-list {\n    list-style: none; padding: 0; margin: 0;\n  }\n  .feature-list li {\n    position: relative; padding-left: 30px; margin-bottom: 1.25rem;\n    line-height: 1.6; color: #333;\n  }\n  .feature-list li::before {\n    content: '✔'; position: absolute; left: 0; top: 2px;\n    color: #3F72E5; font-size: 1.2rem;\n  }\n  .feature-list li strong {\n    color: #111; font-weight: 600;\n  }\n\n  \/* --- 1. HERO SECTION --- *\/\n  .product-hero-section {\n    padding: 5rem 1rem; text-align: center;\n  }\n  .product-hero-container {\n      max-width: 700px; margin: 0 auto;\n  }\n  .product-hero-icon {\n      width: 80px; height: auto; margin-bottom: 2rem;\n  }\n  .product-subtitle-tag {\n    color: #3F72E5; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.5px;\n  }\n  h1 {\n    font-size: 2.5rem; margin-bottom: 1.5rem;\n  }\n  .product-description {\n    line-height: 1.7; font-size: 1.1rem; color: #333;\n  }\n\n  \/* --- 2. FEATURES SECTION --- *\/\n  .product-features-section {\n    padding: 4rem 1rem; background-color: #f9fafb;\n  }\n  .features-grid-three-col {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n    gap: 2.5rem;\n    max-width: 1200px; margin: 0 auto;\n  }\n  .features-column h3 {\n    font-size: 1.3rem; margin-bottom: 1.5rem; color: #111;\n  }\n \n  \/* --- 3. USE CASES SECTION --- *\/\n  .use-cases-section {\n    padding: 4rem 1rem;\n  }\n  .use-cases-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n    gap: 2rem;\n    max-width: 1200px; margin: 0 auto;\n  }\n  .use-case-card {\n    background: white; border-radius: 20px; padding: 2rem; text-align: center;\n    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);\n  }\n  .use-case-card .icon {\n    width: 40px; height: 40px; color: #3F72E5; margin-bottom: 1rem;\n  }\n  .use-case-card h3 {\n    font-size: 1.2rem; color: #111; margin-bottom: 0.5rem;\n  }\n  .use-case-card p {\n    color: #333; font-size: 0.9rem; line-height: 1.6;\n  }\n\n  \/* --- 4. SCREENSHOTS SECTION --- *\/\n  .screenshots-section {\n    padding: 4rem 1rem; background-color: #f9fafb;\n  }\n  .screenshots-grid {\n    display: grid;\n    grid-template-columns: 1fr; \/* Default to 1 column for mobile *\/\n    gap: 2rem;\n    max-width: 1200px; margin: 0 auto;\n  }\n  .screenshot-card {\n    background: white; border-radius: 20px;\n    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);\n    overflow: hidden;\n  }\n  .screenshot-card img {\n    width: 100%; height: auto; display: block; background-color: #f9fafb;\n  }\n  .screenshot-card-content {\n    padding: 1.5rem;\n  }\n  .screenshot-card-content h4 {\n    font-size: 1.2rem; margin: 0 0 0.5rem 0; color: #111;\n  }\n  .screenshot-card-content p {\n    font-size: 0.95rem; line-height: 1.6; color: #333; margin: 0;\n  }\n \n  \/* --- 5. DEMO VIDEO SECTION --- *\/\n  .demo-video-section {\n    padding: 4rem 1rem;\n  }\n  .video-card {\n    max-width: 1000px; margin: 0 auto; border-radius: 20px;\n    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);\n    overflow: hidden;\n  }\n  .video-wrapper {\n    position: relative; padding-bottom: 56.25%; height: 0;\n  }\n  .video-wrapper video {\n    position: absolute; top: 0; left: 0; width: 100%; height: 100%;\n  }\n\n  \/* --- RESPONSIVE STYLES --- *\/\n  @media (min-width: 750px) {\n    .screenshots-grid {\n      grid-template-columns: 1fr 1fr; \/* 2 columns for tablet and up *\/\n    }\n  }\n\u003c\/style\u003e\n\u003c!-- END: Redesigned Product Page --\u003e","brand":"Software Athlete","offers":[{"title":"Default Title","offer_id":44406715973923,"sku":"","price":2000.0,"currency_code":"EUR","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/aveva-pi-vision-custom-control-manua-input-table.png?v=1720762967"},{"product_id":"pi-vision-custom-symbol-af-table","title":"AF Table+","description":"\u003c!-- START: Redesigned Product Page for AF Table+ --\u003e\n\u003cp\u003e \u003c\/p\u003e\n\u003c!-- 1. HERO SECTION --\u003e\n\u003csection class=\"product-hero-section\"\u003e\n\u003cdiv class=\"product-hero-container\"\u003e\n\u003cimg class=\"product-hero-icon\" alt=\"AF Table+ Product Icon\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/icon2_bd7ce5ae-eb78-4981-8ff2-63a306aded7c_160x160.png?v=1684758942\"\u003e\n\u003cp class=\"product-subtitle-tag\"\u003ePI Vision Custom Symbol\u003c\/p\u003e\n\u003ch1\u003eBring Your SQL \u0026amp; AF Tables to Life in PI Vision\u003c\/h1\u003e\n\u003cp class=\"product-description\"\u003eUnlock the data in your AF Tables. AF Table+ allows you to display, edit, filter, and manage data from SQL databases and other sources directly within your PI Vision dashboards.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 2. FEATURES SECTION --\u003e\n\u003csection class=\"product-features-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eThe Bridge Between Your Data and Your Dashboards\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-grid-three-col\"\u003e\n\u003cdiv class=\"features-column\"\u003e\n\u003ch3\u003eSeamless Data Integration\u003c\/h3\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eDisplay Any AF Table:\u003c\/strong\u003e Natively displays any AF Table, including those linked to SQL databases, files, and more.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eBulk Data Import:\u003c\/strong\u003e Upload CSV files directly or copy and paste data from Excel to quickly populate your tables.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eReal-Time Connection:\u003c\/strong\u003e View live data from your SQL sources like Microsoft SQL and MySQL.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-column\"\u003e\n\u003ch3\u003ePowerful Data Management\u003c\/h3\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eAdd, Edit \u0026amp; Delete:\u003c\/strong\u003e Perform full CRUD operations (Create, Read, Update, Delete) on static AF Tables.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eBulk Deletion:\u003c\/strong\u003e Quickly remove multiple rows at once for efficient table management.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eAdvanced Filtering:\u003c\/strong\u003e Use column-specific filters or advanced SQL queries to precisely control the data you see.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-column\"\u003e\n\u003ch3\u003eAdvanced Analysis \u0026amp; Reporting\u003c\/h3\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eMultistate Support:\u003c\/strong\u003e Apply conditional formatting to highlight critical values, statuses, and outliers.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eOne-Click Export:\u003c\/strong\u003e Download your table data in Excel, PDF, CSV, or JSON formats for reporting and offline analysis.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eTime Range Filtering:\u003c\/strong\u003e Automatically filter table data based on the PI Vision display's time range.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 3. USE CASES SECTION --\u003e\n\u003csection class=\"use-cases-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eIntegrate, Manage, and Visualize Your Relational Data\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-cases-grid\"\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg fill=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"icon\"\u003e\u003cpath d=\"M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eManaging Operator Logbooks\u003c\/h3\u003e\n\u003cp\u003eCreate and manage digital logbooks for shifts, maintenance activities, or safety checks directly in PI Vision.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg fill=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"icon\"\u003e\u003cpath d=\"M4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6zm16-4H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-3 10H9v-2h8v2zm-4-4H9V7h4v2z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eIntegrating Lab (LIMS) Data\u003c\/h3\u003e\n\u003cp\u003eDisplay quality or sample data from your LIMS database alongside your real-time process data for full context.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg fill=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"icon\"\u003e\u003cpath d=\"M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zM4 12h4v6H4v-6zm6 6h4v-6h-4v6zm10 0h-4v-6h4v6zM4 6h16v2H4V6z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eProduction \u0026amp; Asset Tracking\u003c\/h3\u003e\n\u003cp\u003eDisplay and update production targets, asset information, or maintenance records stored in external SQL databases.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg fill=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"icon\"\u003e\u003cpath d=\"M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm-1-13h2v2h-2zm0 4h2v6h-2z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eConfiguration \u0026amp; Limit Management\u003c\/h3\u003e\n\u003cp\u003eManage and edit alarm limits, operational targets, or other configuration parameters stored in an AF Table.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 4. SCREENSHOTS SECTION --\u003e\n\u003csection class=\"screenshots-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eYour Data, Your Way, in PI Vision\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshots-grid\"\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg alt=\"A SQL table with data displayed directly within a PI Vision dashboard.\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/aveva-pi-vision-custom-symbol-manual-data-entry-input-table-enum-dropdown_600x600.png?v=1721020068\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eDisplay SQL \u0026amp; AF Tables\u003c\/h4\u003e\n\u003cp\u003eDisplay tables from databases like Microsoft SQL and MySQL directly in PI Vision.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg alt=\"An AF Table in PI Vision with multistate coloring applied to highlight values.\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/aveva-pi-vision-custom-symbol-af-sql-table-multistate_600x600.png?v=1721020453\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eMultistate Support\u003c\/h4\u003e\n\u003cp\u003eApply colors to numeric ranges, strings, and booleans for instant visual insights.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg alt=\"A PI Vision table with column-specific filters applied to the data.\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/aveva-pi-vision-custom-symbol-time-series-table-filter_600x600.png?v=1721020485\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003ePowerful Column Filtering\u003c\/h4\u003e\n\u003cp\u003eUse advanced, column-specific filters to show only the most relevant data.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg alt=\"Adding a new row of data to an AF Table directly from PI Vision.\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/aveva-pi-vision-custom-symbol-manual-data-entry-input-table-add-data_600x600.png?v=1721020392\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eAdd or Edit Data\u003c\/h4\u003e\n\u003cp\u003eModify table data directly within PI Vision for quick updates and manual entry.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg alt=\"Selecting and deleting multiple rows of data from an AF Table in PI Vision.\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/aveva-pi-vision-custom-symbol-manual-data-entry-input-table-delete-data_600x600.png?v=1721020380\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eBulk Delete Data\u003c\/h4\u003e\n\u003cp\u003eQuickly select and delete multiple rows of data to keep tables clean and organized.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg alt=\"The export dialog showing options for Excel, PDF, and CSV download.\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/aveva-pi-vision-custom-symbol-manual-data-entry-input-table-export-to-pdf_600x600.png?v=1721020361\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eOne-Click Data Export\u003c\/h4\u003e\n\u003cp\u003eExport tables in multiple formats like Excel, PDF, and CSV for reporting and analysis.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg alt=\"Pasting data from an Excel spreadsheet into the AF Table+ symbol.\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/aveva-pi-vision-custom-symbol-manual-data-entry-input-table-copy-paste-from-excel_600x600.png?v=1721020180\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eBulk Import from Excel\u003c\/h4\u003e\n\u003cp\u003eQuickly populate tables by uploading CSV files or simply copying and pasting data from Excel.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 5. DEMO VIDEO SECTION --\u003e\n\u003csection class=\"demo-video-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eSee AF Table+ in Action\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"video-card\"\u003e\n\u003cdiv class=\"video-wrapper\"\u003e\u003cvideo controls=\"controls\" preload=\"metadata\"\u003e\n        \u003csource type=\"video\/mp4\" src=\"https:\/\/cdn.shopify.com\/videos\/c\/o\/v\/2965cd9568fd49ccaf0a5188accfcb84.mp4\"\u003e\n        Your browser does not support the video tag.\n      \u003c\/source\u003e\u003c\/video\u003e\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003cstyle\u003e\n  \/* --- GENERAL SECTION STYLES --- *\/\n  .section-header {\n    display: flex; flex-direction: column; align-items: center; text-align: center;\n    max-width: 800px; margin: 0 auto 3.5rem auto;\n  }\n  .section-header h2 {\n    color: #111; margin-bottom: 1rem; font-size: 1.8rem;\n  }\n  .section-header p {\n    color: #333; line-height: 1.7; font-size: 1rem;\n  }\n  .feature-list {\n    list-style: none; padding: 0; margin: 0;\n  }\n  .feature-list li {\n    position: relative; padding-left: 30px; margin-bottom: 1.25rem;\n    line-height: 1.6; color: #333;\n  }\n  .feature-list li::before {\n    content: '✔'; position: absolute; left: 0; top: 2px;\n    color: #3F72E5; font-size: 1.2rem;\n  }\n  .feature-list li strong {\n    color: #111; font-weight: 600;\n  }\n\n  \/* --- 1. HERO SECTION --- *\/\n  .product-hero-section {\n    padding: 5rem 1rem; text-align: center;\n  }\n  .product-hero-container {\n      max-width: 700px; margin: 0 auto;\n  }\n  .product-hero-icon {\n      width: 80px; height: auto; margin-bottom: 2rem;\n  }\n  .product-subtitle-tag {\n    color: #3F72E5; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.5px;\n  }\n  h1 {\n    font-size: 2.5rem; margin-bottom: 1.5rem;\n  }\n  .product-description {\n    line-height: 1.7; font-size: 1.1rem; color: #333;\n  }\n\n  \/* --- 2. FEATURES SECTION --- *\/\n  .product-features-section {\n    padding: 4rem 1rem; background-color: #f9fafb;\n  }\n  .features-grid-three-col {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n    gap: 2.5rem;\n    max-width: 1200px; margin: 0 auto;\n  }\n  .features-column h3 {\n    font-size: 1.3rem; margin-bottom: 1.5rem; color: #111;\n  }\n \n  \/* --- 3. USE CASES SECTION --- *\/\n  .use-cases-section {\n    padding: 4rem 1rem;\n  }\n  .use-cases-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n    gap: 2rem;\n    max-width: 1200px; margin: 0 auto;\n  }\n  .use-case-card {\n    background: white; border-radius: 20px; padding: 2rem; text-align: center;\n    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);\n  }\n  .use-case-card .icon {\n    width: 40px; height: 40px; color: #3F72E5; margin-bottom: 1rem;\n  }\n  .use-case-card h3 {\n    font-size: 1.2rem; color: #111; margin-bottom: 0.5rem;\n  }\n  .use-case-card p {\n    color: #333; font-size: 0.9rem; line-height: 1.6;\n  }\n\n  \/* --- 4. SCREENSHOTS SECTION --- *\/\n  .screenshots-section {\n    padding: 4rem 1rem; background-color: #f9fafb;\n  }\n  .screenshots-grid {\n    display: grid;\n    grid-template-columns: 1fr; \/* Default to 1 column for mobile *\/\n    gap: 2rem;\n    max-width: 1200px; margin: 0 auto;\n  }\n  .screenshot-card {\n    background: white; border-radius: 20px;\n    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);\n    overflow: hidden;\n  }\n  .screenshot-card img {\n    width: 100%; height: auto; display: block; background-color: #f9fafb;\n  }\n  .screenshot-card-content {\n    padding: 1.5rem;\n  }\n  .screenshot-card-content h4 {\n    font-size: 1.2rem; margin: 0 0 0.5rem 0; color: #111;\n  }\n  .screenshot-card-content p {\n    font-size: 0.95rem; line-height: 1.6; color: #333; margin: 0;\n  }\n \n  \/* --- 5. DEMO VIDEO SECTION --- *\/\n  .demo-video-section {\n    padding: 4rem 1rem;\n  }\n  .video-card {\n    max-width: 1000px; margin: 0 auto; border-radius: 20px;\n    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);\n    overflow: hidden;\n  }\n  .video-wrapper {\n    position: relative; padding-bottom: 56.25%; height: 0;\n  }\n  .video-wrapper video {\n    position: absolute; top: 0; left: 0; width: 100%; height: 100%;\n  }\n\n  \/* --- RESPONSIVE STYLES --- *\/\n  @media (min-width: 750px) {\n    .screenshots-grid {\n      grid-template-columns: 1fr 1fr; \/* 2 columns for tablet and up *\/\n    }\n  }\n\u003c\/style\u003e\n\u003c!-- END: Redesigned Product Page --\u003e","brand":"Software Athlete","offers":[{"title":"Default Title","offer_id":46725505909062,"sku":"","price":1800.0,"currency_code":"EUR","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/aveva-pi-vision-custom-control-sql-table-thumbnail.png?v=1720761623"},{"product_id":"pi-vision-custom-symbol-navigation-menu","title":"Navigation Menu+","description":"\u003c!-- START: Redesigned Product Page for Navigation Menu+ --\u003e\n\u003cp\u003e \u003c\/p\u003e\n\u003c!-- 1. HERO SECTION --\u003e\n\u003csection class=\"product-hero-section\"\u003e\n\u003cdiv class=\"product-hero-container\"\u003e\n\u003cimg class=\"product-hero-icon\" alt=\"Navigation Menu+ Product Icon\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/navigationmenu_100x100.png?v=1685543939\"\u003e\n\u003cp class=\"product-subtitle-tag\"\u003ePI Vision Custom Symbol\u003c\/p\u003e\n\u003ch1\u003eCreate Consistent, Intuitive Navigation for PI Vision\u003c\/h1\u003e\n\u003cp class=\"product-description\"\u003eStop forcing users to rely on browser bookmarks. Navigation Menu+ allows you to build a professional, centralized, and easy-to-use navigation system directly within your PI Vision displays.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 2. FEATURES SECTION --\u003e\n\u003csection class=\"product-features-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eThe Foundation for a Better User Experience\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-grid-three-col\"\u003e\n\u003cdiv class=\"features-column\"\u003e\n\u003ch3\u003eFlexible Layouts \u0026amp; Control\u003c\/h3\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eSide or Top Menus:\u003c\/strong\u003e Place your navigation bar on the top or side of the screen to best suit your layout.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eExpandable or Fixed:\u003c\/strong\u003e Choose between a fixed, always-visible menu or an expandable one to save screen space.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eVertical \u0026amp; Horizontal:\u003c\/strong\u003e Align menu items vertically or horizontally for complete design control.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-column\"\u003e\n\u003ch3\u003eRich Customization\u003c\/h3\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eCorporate Branding:\u003c\/strong\u003e Add your company logo and customize colors and fonts to match your brand.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eDropdown Submenus:\u003c\/strong\u003e Create a clear hierarchy with multi-level dropdown menus for better organization.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eIcons \u0026amp; Separators:\u003c\/strong\u003e Add visual clarity to your menu with a library of icons and clean separators.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-column\"\u003e\n\u003ch3\u003eEnterprise-Ready Functionality\u003c\/h3\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eSynchronize Across Displays:\u003c\/strong\u003e Define a menu once and easily synchronize it across all your PI Vision displays for perfect consistency.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eUnlimited Links:\u003c\/strong\u003e Build a comprehensive navigation system with as many links and submenus as you need.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eSimple Configuration:\u003c\/strong\u003e All features are managed through an intuitive, user-friendly panel.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 3. USE CASES SECTION --\u003e\n\u003csection class=\"use-cases-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eBuild a Cohesive and Professional PI Vision Environment\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-cases-grid\"\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg fill=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"icon\"\u003e\u003cpath d=\"M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eCreate a Plant-Wide Portal\u003c\/h3\u003e\n\u003cp\u003eBuild a single, top-level \"home\" display with a navigation menu that links to all key areas, assets, and reports.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg fill=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"icon\"\u003e\u003cpath d=\"M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eStandardize Operator Experience\u003c\/h3\u003e\n\u003cp\u003eUse the sync feature to ensure every operator sees the same, consistent navigation menu on every display.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg fill=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"icon\"\u003e\u003cpath d=\"M21 3H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h5v2h8v-2h5c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 14H3V5h18v12z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eFocused Kiosk \u0026amp; Wall Displays\u003c\/h3\u003e\n\u003cp\u003eUse a fixed, top-menu layout to create clean, easy-to-navigate displays for control rooms and public areas.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg fill=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"icon\"\u003e\u003cpath d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93s3.05-7.44 7-7.93v15.86zm2-15.86c3.95.49 7 3.85 7 7.93s-3.05 7.44-7 7.93V4.07z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eIncorporate Corporate Branding\u003c\/h3\u003e\n\u003cp\u003eAdd your company logo and apply brand colors to create a professional and polished look and feel.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 4. SCREENSHOTS SECTION --\u003e\n\u003csection class=\"screenshots-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eTotal Control Over Your Navigation\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshots-grid\"\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg alt=\"An expandable side navigation menu in PI Vision.\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/aveva-pi-vision-custom-symbol-navigation-menu-8_600x600.png?v=1720768502\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eExpandable Side Menu\u003c\/h4\u003e\n\u003cp\u003eCreate a clean, space-saving side menu that expands on demand to reveal navigation links.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg alt=\"A horizontal navigation menu positioned at the top of a PI Vision display.\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/aveva-pi-vision-custom-symbol-navigation-menu-top.png?v=1721019937\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eFixed Top Menu\u003c\/h4\u003e\n\u003cp\u003eAdd a persistent navigation bar to the top of your display for a familiar, web-like experience.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg alt=\"A PI Vision navigation menu showing a multi-level dropdown submenu.\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-custom-symbol-navigation-menu-dropdown.png?v=1731578605\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eDropdown Submenus\u003c\/h4\u003e\n\u003cp\u003eOrganize complex navigation structures with clean, hierarchical dropdown menus.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg alt=\"A navigation menu in PI Vision with custom icons and separators.\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-custom-symbol-navigation-menu.png?v=1721986579\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eIcons \u0026amp; Separators\u003c\/h4\u003e\n\u003cp\u003eImprove clarity and usability by adding intuitive icons and visual separators to your menu items.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg alt=\"The configuration panel showing the 'Synchronize Across Displays' feature.\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/aveva-pi-vision-custom-symbol-navigation-menu-sync-across-displays_600x600.png?v=1720764564\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eSynchronize Configuration\u003c\/h4\u003e\n\u003cp\u003eDefine your menu once and apply the same settings across all displays with a single click.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg alt=\"A PI Vision navigation menu with a horizontal layout and custom branding.\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/aveva-pi-vision-custom-symbol-navigation-menu-7_600x600.png?v=1720764589\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eHorizontal Layout\u003c\/h4\u003e\n\u003cp\u003eAlign links horizontally to save vertical space and create different dashboard layouts.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 5. DEMO VIDEO SECTION --\u003e\n\u003csection class=\"demo-video-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eSee Navigation Menu+ in Action\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"video-card\"\u003e\n\u003cdiv class=\"video-wrapper\"\u003e\u003cvideo controls=\"controls\" preload=\"metadata\"\u003e\n        \u003csource type=\"video\/mp4\" src=\"https:\/\/cdn.shopify.com\/videos\/c\/o\/v\/3d1f1a89f59c433fac599e9dc3b6c41a.mp4\"\u003e\n        Your browser does not support the video tag.\n      \u003c\/source\u003e\u003c\/video\u003e\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003cstyle\u003e\n  \/* --- GENERAL SECTION STYLES --- *\/\n  .section-header {\n    display: flex; flex-direction: column; align-items: center; text-align: center;\n    max-width: 800px; margin: 0 auto 3.5rem auto;\n  }\n  .section-header h2 {\n    color: #111; margin-bottom: 1rem; font-size: 1.8rem;\n  }\n  .section-header p {\n    color: #333; line-height: 1.7; font-size: 1rem;\n  }\n  .feature-list {\n    list-style: none; padding: 0; margin: 0;\n  }\n  .feature-list li {\n    position: relative; padding-left: 30px; margin-bottom: 1.25rem;\n    line-height: 1.6; color: #333;\n  }\n  .feature-list li::before {\n    content: '✔'; position: absolute; left: 0; top: 2px;\n    color: #3F72E5; font-size: 1.2rem;\n  }\n  .feature-list li strong {\n    color: #111; font-weight: 600;\n  }\n\n  \/* --- 1. HERO SECTION --- *\/\n  .product-hero-section {\n    padding: 5rem 1rem; text-align: center;\n  }\n  .product-hero-container {\n      max-width: 700px; margin: 0 auto;\n  }\n  .product-hero-icon {\n      width: 80px; height: auto; margin-bottom: 2rem;\n  }\n  .product-subtitle-tag {\n    color: #3F72E5; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.5px;\n  }\n  h1 {\n    font-size: 2.5rem; margin-bottom: 1.5rem;\n  }\n  .product-description {\n    line-height: 1.7; font-size: 1.1rem; color: #333;\n  }\n\n  \/* --- 2. FEATURES SECTION --- *\/\n  .product-features-section {\n    padding: 4rem 1rem; background-color: #f9fafb;\n  }\n  .features-grid-three-col {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n    gap: 2.5rem;\n    max-width: 1200px; margin: 0 auto;\n  }\n  .features-column h3 {\n    font-size: 1.3rem; margin-bottom: 1.5rem; color: #111;\n  }\n \n  \/* --- 3. USE CASES SECTION --- *\/\n  .use-cases-section {\n    padding: 4rem 1rem;\n  }\n  .use-cases-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n    gap: 2rem;\n    max-width: 1200px; margin: 0 auto;\n  }\n  .use-case-card {\n    background: white; border-radius: 20px; padding: 2rem; text-align: center;\n    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);\n  }\n  .use-case-card .icon {\n    width: 40px; height: 40px; color: #3F72E5; margin-bottom: 1rem;\n  }\n  .use-case-card h3 {\n    font-size: 1.2rem; color: #111; margin-bottom: 0.5rem;\n  }\n  .use-case-card p {\n    color: #333; font-size: 0.9rem; line-height: 1.6;\n  }\n\n  \/* --- 4. SCREENSHOTS SECTION --- *\/\n  .screenshots-section {\n    padding: 4rem 1rem; background-color: #f9fafb;\n  }\n  .screenshots-grid {\n    display: grid;\n    grid-template-columns: 1fr; \/* Default to 1 column for mobile *\/\n    gap: 2rem;\n    max-width: 1200px; margin: 0 auto;\n  }\n  .screenshot-card {\n    background: white; border-radius: 20px;\n    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);\n    overflow: hidden;\n  }\n  .screenshot-card img {\n    width: 100%; height: auto; display: block; background-color: #f9fafb;\n  }\n  .screenshot-card-content {\n    padding: 1.5rem;\n  }\n  .screenshot-card-content h4 {\n    font-size: 1.2rem; margin: 0 0 0.5rem 0; color: #111;\n  }\n  .screenshot-card-content p {\n    font-size: 0.95rem; line-height: 1.6; color: #333; margin: 0;\n  }\n \n  \/* --- 5. DEMO VIDEO SECTION --- *\/\n  .demo-video-section {\n    padding: 4rem 1rem;\n  }\n  .video-card {\n    max-width: 1000px; margin: 0 auto; border-radius: 20px;\n    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);\n    overflow: hidden;\n  }\n  .video-wrapper {\n    position: relative; padding-bottom: 56.25%; height: 0;\n  }\n  .video-wrapper video {\n    position: absolute; top: 0; left: 0; width: 100%; height: 100%;\n  }\n\n  \/* --- RESPONSIVE STYLES --- *\/\n  @media (min-width: 750px) {\n    .screenshots-grid {\n      grid-template-columns: 1fr 1fr; \/* 2 columns for tablet and up *\/\n    }\n  }\n\u003c\/style\u003e\n\u003c!-- END: Redesigned Product Page --\u003e","brand":"Software Athlete","offers":[{"title":"Default Title","offer_id":46815757893958,"sku":"","price":1600.0,"currency_code":"EUR","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/aveva-pi-vision-custom-control-navigation-menu-thumbnail.png?v=1720761690"},{"product_id":"pi-vision-custom-symbol-heatmap","title":"Heatmap+","description":"\u003c!-- START: Redesigned Product Page for Heatmap+ --\u003e\n\u003cp\u003e \u003c\/p\u003e\n\u003c!-- 1. HERO SECTION --\u003e\n\u003csection class=\"product-hero-section\"\u003e\n\u003cdiv class=\"product-hero-container\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/icon2_da15fb28-bb26-43c6-a428-d21b50ea2a60_100x100.png?v=1689171735\" alt=\"Heatmap+ Product Icon\" class=\"product-hero-icon\"\u003e\n\u003cp class=\"product-subtitle-tag\"\u003ePI Vision Custom Symbol\u003c\/p\u003e\n\u003ch1\u003eVisualize Data Density and Uncover Hidden Patterns\u003c\/h1\u003e\n\u003cp class=\"product-description\"\u003eStop searching through trends and spreadsheets. Heatmap+ instantly reveals patterns, correlations, and anomalies in large datasets by transforming raw numbers into an intuitive color-coded matrix.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 2. FEATURES SECTION --\u003e\n\u003csection class=\"product-features-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eFrom Raw Numbers to Actionable Insights\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-grid-three-col\"\u003e\n\u003cdiv class=\"features-column\"\u003e\n\u003ch3\u003eIntuitive Visualization\u003c\/h3\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eCustom Color Gradients:\u003c\/strong\u003e Define custom color ranges, gradients, and limits to clearly represent your data's distribution.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eShow Data Labels:\u003c\/strong\u003e Optionally display the numerical values directly on each cell of the heatmap for added context.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eConfigurable Time Axis:\u003c\/strong\u003e Adapt the heatmap to specific time intervals for focused daily, weekly, or monthly analysis.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-column\"\u003e\n\u003ch3\u003ePowerful Data Processing\u003c\/h3\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eOn-the-Fly Aggregation:\u003c\/strong\u003e Aggregate raw data by calculating averages, totals, counts, and more directly in the symbol.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eSmart Interpolation:\u003c\/strong\u003e Interpolate data on an hourly or daily basis without needing pre-calculation in your AF.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eFlexible Data Retrieval:\u003c\/strong\u003e Supports various data retrieval methods like recorded, interpolated, or joined data.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-column\"\u003e\n\u003ch3\u003eFull Configurability\u003c\/h3\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eInteractive Tooltips:\u003c\/strong\u003e Hover over any cell to see detailed timestamp and value information.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eResponsive Design:\u003c\/strong\u003e The heatmap automatically adjusts to fit any display size while maintaining clarity.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eSimple Setup:\u003c\/strong\u003e All features are managed through a user-friendly configuration panel within PI Vision.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 3. USE CASES SECTION --\u003e\n\u003csection class=\"use-cases-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eUncover Patterns in Any Operational Data\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-cases-grid\"\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg class=\"icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" fill=\"currentColor\"\u003e\u003cpath d=\"M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm-1-13h2v2h-2zm0 4h2v6h-2z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eShift \u0026amp; Time-Based Analysis\u003c\/h3\u003e\n\u003cp\u003eVisualize performance over a 24-hour cycle to identify patterns or issues that consistently occur on specific shifts or at certain times.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg class=\"icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" fill=\"currentColor\"\u003e\u003cpath d=\"M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-1 14H5V8h6v7zm2 0v-7h6v7h-6z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eEquipment Health Monitoring\u003c\/h3\u003e\n\u003cp\u003eMap the temperature or vibration profile across a large piece of equipment (like a boiler or furnace) to spot hotspots.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg class=\"icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" fill=\"currentColor\"\u003e\u003cpath d=\"M4 10h3v7H4zM10.5 10h3v7h-3zM17 10h3v7h-3zM22 6H2V4h20v2z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eBatch Process Comparison\u003c\/h3\u003e\n\u003cp\u003eCompare key parameters (e.g., temperature, pressure) across multiple batches to ensure consistency and identify deviations.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg class=\"icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" fill=\"currentColor\"\u003e\u003cpath d=\"M16 6l2.29 2.29-4.88 4.88-4-4L2 16.59 3.41 18l6-6 4 4 6.3-6.29L22 12V6h-6z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003ePerformance vs. Targets\u003c\/h3\u003e\n\u003cp\u003eVisualize asset performance against targets over time, using color gradients to instantly show how far values deviate.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 4. SCREENSHOTS SECTION --\u003e\n\u003csection class=\"screenshots-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eTransform Your Data into an Intuitive Visual Matrix\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshots-grid\"\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/aveva-pivision-cutom-symbol-heatmap-4_600x600.png?v=1720763251\" alt=\"A PI Vision heatmap with custom color ranges and gradients.\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eCustom Color Ranges\u003c\/h4\u003e\n\u003cp\u003eDefine your own gradients, limits, and color ranges to create a clear and meaningful visualization.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/aveva-pivision-cutom-symbol-heatmap-5.png?v=1720763265\" alt=\"A PI Vision heatmap showing numerical data labels on each cell.\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eShow Data Labels\u003c\/h4\u003e\n\u003cp\u003eOptionally display numerical values directly on each cell of the heatmap for additional context and precision.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-custom-symbol-heatmap-5.png?v=1732196763\" alt=\"A heatmap in PI Vision configured to show aggregated data like averages.\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eOn-the-Fly Aggregation\u003c\/h4\u003e\n\u003cp\u003eCalculate totals, averages, counts, and more directly within the symbol without any AF-side configuration.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-custom-symbol-heatmap-4.png?v=1732196764\" alt=\"A PI Vision heatmap showing interpolated data for smooth analysis.\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eSmart Interpolation\u003c\/h4\u003e\n\u003cp\u003eSmoothly visualize data across time intervals without needing pre-calculated or evenly spaced data.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 5. DEMO VIDEO SECTION --\u003e\n\u003csection class=\"demo-video-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eSee Heatmap+ in Action\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"video-card\"\u003e\n\u003cdiv class=\"video-wrapper\"\u003e\u003cvideo preload=\"metadata\" controls=\"controls\"\u003e\n        \u003csource src=\"https:\/\/cdn.shopify.com\/videos\/c\/o\/v\/65a735cc78ec401683917983bcf992fa.mp4\" type=\"video\/mp4\"\u003e\n        Your browser does not support the video tag.\n      \u003c\/source\u003e\u003c\/video\u003e\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003cstyle\u003e\n  \/* --- GENERAL SECTION STYLES --- *\/\n  .section-header {\n    display: flex; flex-direction: column; align-items: center; text-align: center;\n    max-width: 800px; margin: 0 auto 3.5rem auto;\n  }\n  .section-header h2 {\n    color: #111; margin-bottom: 1rem; font-size: 1.8rem;\n  }\n  .section-header p {\n    color: #333; line-height: 1.7; font-size: 1rem;\n  }\n  .feature-list {\n    list-style: none; padding: 0; margin: 0;\n  }\n  .feature-list li {\n    position: relative; padding-left: 30px; margin-bottom: 1.25rem;\n    line-height: 1.6; color: #333;\n  }\n  .feature-list li::before {\n    content: '✔'; position: absolute; left: 0; top: 2px;\n    color: #3F72E5; font-size: 1.2rem;\n  }\n  .feature-list li strong {\n    color: #111; font-weight: 600;\n  }\n\n  \/* --- 1. HERO SECTION --- *\/\n  .product-hero-section {\n    padding: 5rem 1rem; text-align: center;\n  }\n  .product-hero-container {\n      max-width: 700px; margin: 0 auto;\n  }\n  .product-hero-icon {\n      width: 80px; height: auto; margin-bottom: 2rem;\n  }\n  .product-subtitle-tag {\n    color: #3F72E5; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.5px;\n  }\n  h1 {\n    font-size: 2.5rem; margin-bottom: 1.5rem;\n  }\n  .product-description {\n    line-height: 1.7; font-size: 1.1rem; color: #333;\n  }\n\n  \/* --- 2. FEATURES SECTION --- *\/\n  .product-features-section {\n    padding: 4rem 1rem; background-color: #f9fafb;\n  }\n  .features-grid-three-col {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n    gap: 2.5rem;\n    max-width: 1200px; margin: 0 auto;\n  }\n  .features-column h3 {\n    font-size: 1.3rem; margin-bottom: 1.5rem; color: #111;\n  }\n \n  \/* --- 3. USE CASES SECTION --- *\/\n  .use-cases-section {\n    padding: 4rem 1rem;\n  }\n  .use-cases-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n    gap: 2rem;\n    max-width: 1200px; margin: 0 auto;\n  }\n  .use-case-card {\n    background: white; border-radius: 20px; padding: 2rem; text-align: center;\n    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);\n  }\n  .use-case-card .icon {\n    width: 40px; height: 40px; color: #3F72E5; margin-bottom: 1rem;\n  }\n  .use-case-card h3 {\n    font-size: 1.2rem; color: #111; margin-bottom: 0.5rem;\n  }\n  .use-case-card p {\n    color: #333; font-size: 0.9rem; line-height: 1.6;\n  }\n\n  \/* --- 4. SCREENSHOTS SECTION (UPDATED) --- *\/\n  .screenshots-section {\n    padding: 4rem 1rem; background-color: #f9fafb;\n  }\n  .screenshots-grid {\n    display: grid;\n    grid-template-columns: 1fr; \/* Default to 1 column for mobile *\/\n    gap: 2rem;\n    max-width: 1200px; margin: 0 auto;\n  }\n  .screenshot-card {\n    background: white; border-radius: 20px;\n    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);\n    overflow: hidden;\n  }\n  .screenshot-card img {\n    width: 100%; height: auto; display: block; background-color: #f9fafb;\n  }\n  .screenshot-card-content {\n    padding: 1.5rem;\n  }\n  .screenshot-card-content h4 {\n    font-size: 1.2rem; margin: 0 0 0.5rem 0; color: #111;\n  }\n  .screenshot-card-content p {\n    font-size: 0.95rem; line-height: 1.6; color: #333; margin: 0;\n  }\n \n  \/* --- 5. DEMO VIDEO SECTION --- *\/\n  .demo-video-section {\n    padding: 4rem 1rem;\n  }\n  .video-card {\n    max-width: 1000px; margin: 0 auto; border-radius: 20px;\n    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);\n    overflow: hidden;\n  }\n  .video-wrapper {\n    position: relative; padding-bottom: 56.25%; height: 0;\n  }\n  .video-wrapper video {\n    position: absolute; top: 0; left: 0; width: 100%; height: 100%;\n  }\n\n  \/* --- RESPONSIVE STYLES --- *\/\n  @media (min-width: 750px) {\n    .screenshots-grid {\n      grid-template-columns: 1fr 1fr; \/* 2 columns for tablet and up *\/\n    }\n  }\n\u003c\/style\u003e\n\u003c!-- END: Redesigned Product Page --\u003e","brand":"Software Athlete","offers":[{"title":"Default Title","offer_id":46972783395142,"sku":"","price":1800.0,"currency_code":"EUR","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/aveva-pivision-cutom-symbol-heatmap-thumbnail.png?v=1720763211"},{"product_id":"pi-vision-custom-symbol-pie-chart","title":"Pie Chart+","description":"\u003c!-- START: Redesigned Product Page for Pie Chart+ --\u003e\n\u003cp\u003e \u003c\/p\u003e\n\u003c!-- 1. HERO SECTION --\u003e\n\u003csection class=\"product-hero-section\"\u003e\n\u003cdiv class=\"product-hero-container\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/piechart_160x160.png?v=1691675497\" alt=\"Pie Chart+ Product Icon\" class=\"product-hero-icon\"\u003e\n\u003cp class=\"product-subtitle-tag\"\u003ePI Vision Custom Symbol\u003c\/p\u003e\n\u003ch1\u003eVisualize Proportions with Interactive Pie \u0026amp; Donut Charts\u003c\/h1\u003e\n\u003cp class=\"product-description\"\u003eEasily represent the composition of your data. Pie Chart+ is a powerful and user-friendly tool for creating a wide range of professional, insightful, and visually appealing circular charts.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 2. FEATURES SECTION --\u003e\n\u003csection class=\"product-features-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eFrom Raw Numbers to Clear Insights\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-grid-three-col\"\u003e\n\u003cdiv class=\"features-column\"\u003e\n\u003ch3\u003eVersatile Charting Options\u003c\/h3\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eMultiple Chart Types:\u003c\/strong\u003e Create standard pie charts, modern donut charts, and space-saving half-donut charts.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003ePolar Chart Support:\u003c\/strong\u003e Visualize cyclical data or compare multiple categories with an intuitive polar area chart.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eResponsive by Design:\u003c\/strong\u003e All chart types automatically adapt to look great on any screen size or device.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-column\"\u003e\n\u003ch3\u003eInsightful Data Display\u003c\/h3\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eDynamic Center Label:\u003c\/strong\u003e Display the sum of all data points in the center for a quick, at-a-glance total.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eClear Data Labels:\u003c\/strong\u003e Show values, percentages, or category names on each slice for easy interpretation.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eInteractive Tooltips:\u003c\/strong\u003e Hover over any slice to reveal detailed information and exact values.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-column\"\u003e\n\u003ch3\u003eTotal Visual Control\u003c\/h3\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eHighly Customizable:\u003c\/strong\u003e Adjust colors, styles, fonts, and sizes to align with your brand or dashboard theme.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eLegend Configuration:\u003c\/strong\u003e Control the position and appearance of the chart legend for optimal layout.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eNo-Code Configuration:\u003c\/strong\u003e All settings are managed through a simple and intuitive panel within PI Vision.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 3. USE CASES SECTION --\u003e\n\u003csection class=\"use-cases-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eAnswer Key Business Questions Visually\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-cases-grid\"\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg class=\"icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" fill=\"currentColor\"\u003e\u003cpath d=\"M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm-1-13h2v2h-2zm0 4h2v6h-2z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eAsset \u0026amp; Downtime Analysis\u003c\/h3\u003e\n\u003cp\u003eVisualize the distribution of downtime reason codes to identify the most frequent causes of production loss.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg class=\"icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" fill=\"currentColor\"\u003e\u003cpath d=\"M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-1 14H5V8h6v7zm2 0v-7h6v7h-6z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eProduction \u0026amp; Quality Breakdown\u003c\/h3\u003e\n\u003cp\u003eDisplay the percentage of products in different grades (e.g., prime, off-spec) or the breakdown of quality issues.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg class=\"icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" fill=\"currentColor\"\u003e\u003cpath d=\"M13 2.05v3.03c4.39.54 7.5 4.53 6.95 8.92-.46 3.63-3.36 6.51-6.95 6.95v3.03c5.5-.55 9.5-5.43 8.95-10.93-.55-5.5-5.43-9.5-10.95-8.95zM3.05 13H.02c.55 5.5 5.43 9.5 10.93 8.95v-3.03c-3.6-.45-6.5-3.35-6.9-6.92z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eEnergy \u0026amp; Cost Allocation\u003c\/h3\u003e\n\u003cp\u003eShow the proportion of energy consumption by different areas of a plant or the allocation of costs by department.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg class=\"icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" fill=\"currentColor\"\u003e\u003cpath d=\"M16 6l2.29 2.29-4.88 4.88-4-4L2 16.59 3.41 18l6-6 4 4 6.3-6.29L22 12V6h-6z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eKPI Monitoring\u003c\/h3\u003e\n\u003cp\u003eIllustrate the composition of a key performance indicator, such as the contribution of different assets to total output.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 4. SCREENSHOTS SECTION --\u003e\n\u003csection class=\"screenshots-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eFrom Classic Pies to Modern Polar Charts\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshots-grid\"\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/aveva-pi-vision-custom-symbol-pie-Chart-4_600x600.png?v=1720768469\" alt=\"A gallery showing different chart types like pie, donut, and polar charts in PI Vision.\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eVersatile Chart Types\u003c\/h4\u003e\n\u003cp\u003eChoose from a variety of chart types, including round, donut, half-donut, and polar charts, to best fit your data.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/aveva-pi-vision-custom-symbol-pie-chart-5.png?v=1720764525\" alt=\"A PI Vision donut chart with a large total value displayed in the center.\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eDynamic Center Label\u003c\/h4\u003e\n\u003cp\u003eDisplay the sum of all data points in the center of your donut charts for a quick, at-a-glance summary.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/aveva-pi-vision-custom-symbol-pie-Chart-3_600x600.png?v=1720768458\" alt=\"A PI Vision pie chart showing highly customized colors and styles.\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eCustomizable Appearance\u003c\/h4\u003e\n\u003cp\u003eTake full control over colors, styles, fonts, and labels to align with your branding or presentation style.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/aveva-pi-vision-custom-symbol-pie-Chart-2_600x600.png?v=1720768448\" alt=\"A polished and professional-looking pie chart used in a PI Vision dashboard.\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eProfessional Presentation\u003c\/h4\u003e\n\u003cp\u003eCreate clean, modern, and impactful visualizations that make your data easy to understand.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-custom-symbol-pie-chart.png?v=1721988296\" alt=\"A PI Vision pie chart shown adapting to a smaller screen size.\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eResponsive Design\u003c\/h4\u003e\n\u003cp\u003eEnsure your charts look perfect and remain readable on any device, from large control room screens to tablets.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 5. DEMO VIDEO SECTION --\u003e\n\u003csection class=\"demo-video-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eSee Pie Chart+ in Action\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"coming-soon-card\"\u003e\n\u003cp\u003e\u003cstrong\u003eDemo Coming Soon\u003c\/strong\u003e\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003cstyle\u003e\n  \/* --- GENERAL SECTION STYLES --- *\/\n  .section-header {\n    display: flex; flex-direction: column; align-items: center; text-align: center;\n    max-width: 800px; margin: 0 auto 3.5rem auto;\n  }\n  .section-header h2 {\n    color: #111; margin-bottom: 1rem; font-size: 1.8rem;\n  }\n  .section-header p {\n    color: #333; line-height: 1.7; font-size: 1rem;\n  }\n  .feature-list {\n    list-style: none; padding: 0; margin: 0;\n  }\n  .feature-list li {\n    position: relative; padding-left: 30px; margin-bottom: 1.25rem;\n    line-height: 1.6; color: #333;\n  }\n  .feature-list li::before {\n    content: '✔'; position: absolute; left: 0; top: 2px;\n    color: #3F72E5; font-size: 1.2rem;\n  }\n  .feature-list li strong {\n    color: #111; font-weight: 600;\n  }\n\n  \/* --- 1. HERO SECTION --- *\/\n  .product-hero-section {\n    padding: 5rem 1rem; text-align: center;\n  }\n  .product-hero-container {\n      max-width: 700px; margin: 0 auto;\n  }\n  .product-hero-icon {\n      width: 80px; height: auto; margin-bottom: 2rem;\n  }\n  .product-subtitle-tag {\n    color: #3F72E5; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.5px;\n  }\n  h1 {\n    font-size: 2.5rem; margin-bottom: 1.5rem;\n  }\n  .product-description {\n    line-height: 1.7; font-size: 1.1rem; color: #333;\n  }\n\n  \/* --- 2. FEATURES SECTION --- *\/\n  .product-features-section {\n    padding: 4rem 1rem; background-color: #f9fafb;\n  }\n  .features-grid-three-col {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n    gap: 2.5rem;\n    max-width: 1200px; margin: 0 auto;\n  }\n  .features-column h3 {\n    font-size: 1.3rem; margin-bottom: 1.5rem; color: #111;\n  }\n \n  \/* --- 3. USE CASES SECTION --- *\/\n  .use-cases-section {\n    padding: 4rem 1rem;\n  }\n  .use-cases-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n    gap: 2rem;\n    max-width: 1200px; margin: 0 auto;\n  }\n  .use-case-card {\n    background: white; border-radius: 20px; padding: 2rem; text-align: center;\n    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);\n  }\n  .use-case-card .icon {\n    width: 40px; height: 40px; color: #3F72E5; margin-bottom: 1rem;\n  }\n  .use-case-card h3 {\n    font-size: 1.2rem; color: #111; margin-bottom: 0.5rem;\n  }\n  .use-case-card p {\n    color: #333; font-size: 0.9rem; line-height: 1.6;\n  }\n\n  \/* --- 4. SCREENSHOTS SECTION (UPDATED) --- *\/\n  .screenshots-section {\n    padding: 4rem 1rem; background-color: #f9fafb;\n  }\n  .screenshots-grid {\n    display: grid;\n    grid-template-columns: 1fr; \/* Default to 1 column for mobile *\/\n    gap: 2rem;\n    max-width: 1200px; margin: 0 auto;\n  }\n  .screenshot-card {\n    background: white; border-radius: 20px;\n    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);\n    overflow: hidden;\n  }\n  .screenshot-card img {\n    width: 100%; height: auto; display: block; background-color: #f9fafb;\n  }\n  .screenshot-card-content {\n    padding: 1.5rem;\n  }\n  .screenshot-card-content h4 {\n    font-size: 1.2rem; margin: 0 0 0.5rem 0; color: #111;\n  }\n  .screenshot-card-content p {\n    font-size: 0.95rem; line-height: 1.6; color: #333; margin: 0;\n  }\n \n  \/* --- 5. DEMO VIDEO SECTION --- *\/\n  .demo-video-section {\n    padding: 4rem 1rem;\n  }\n  .coming-soon-card {\n    max-width: 1000px;\n    margin: 0 auto;\n    border-radius: 20px;\n    background-color: #f0f2f5;\n    border: 2px dashed #d1d5db;\n    padding: 4rem 2rem;\n    text-align: center;\n    color: #6b7280;\n  }\n  .coming-soon-card p {\n    margin: 0;\n    font-size: 1.2rem;\n  }\n\n  \/* --- RESPONSIVE STYLES --- *\/\n  @media (min-width: 750px) {\n    .screenshots-grid {\n      grid-template-columns: 1fr 1fr; \/* 2 columns for tablet and up *\/\n    }\n  }\n\u003c\/style\u003e\n\u003c!-- END: Redesigned Product Page --\u003e","brand":"Software Athlete","offers":[{"title":"Default Title","offer_id":47099630649670,"sku":"","price":1800.0,"currency_code":"EUR","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/aveva-pi-vision-custom-control-pie-chart-thumbnail.png?v=1720761711"},{"product_id":"webview","title":"Web View+","description":"\u003c!-- START: Redesigned Product Page for Web View+ (Corrected) --\u003e\n\u003cp\u003e \u003c\/p\u003e\n\u003c!-- 1. HERO SECTION --\u003e\n\u003csection class=\"product-hero-section\"\u003e\n\u003cdiv class=\"product-hero-container\"\u003e\n\u003cimg class=\"product-hero-icon\" alt=\"Web View+ Product Icon\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/webview_160x160.png?v=1701876471\"\u003e\n\u003cp class=\"product-subtitle-tag\"\u003ePI Vision Custom Symbol\u003c\/p\u003e\n\u003ch1\u003eEmbed Any Web Content Directly into PI Vision\u003c\/h1\u003e\n\u003cp class=\"product-description\"\u003eBreak the boundaries of your dashboard. Web View+ allows you to embed external web pages, other PI Vision displays, and even create rotating slideshows, all within a single, powerful symbol.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 2. FEATURES SECTION --\u003e\n\u003csection class=\"product-features-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eBring Your Entire Digital World into One Display\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-grid-three-col\"\u003e\n\u003cdiv class=\"features-column\"\u003e\n\u003ch3\u003eVersatile Content Embedding\u003c\/h3\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eEmbed External Web Pages:\u003c\/strong\u003e Display live weather maps, corporate intranets, SOP documents, or any other web-based content.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eEmbed PI Vision Displays:\u003c\/strong\u003e Create master dashboards that embed other, more detailed PI Vision displays.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eDisplay Multiple Sources:\u003c\/strong\u003e Configure the symbol to show several different web pages or displays at once.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-column\"\u003e\n\u003ch3\u003eDynamic \u0026amp; Automated Display\u003c\/h3\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eCreate Slideshows:\u003c\/strong\u003e Define a list of URLs and a rotation interval to create automated display carousels.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eURL from AF Attribute:\u003c\/strong\u003e Dynamically load a specific URL based on the value of a PI Point or AF Attribute.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eAuto-Refresh Content:\u003c\/strong\u003e Set a timer to automatically refresh the embedded content to ensure data is always current.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-column\"\u003e\n\u003ch3\u003eFull Interactive Control\u003c\/h3\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eFully Interactive Mode:\u003c\/strong\u003e Allow users to click, scroll, and interact with the embedded content as if it were in a browser.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eRead-Only Mode:\u003c\/strong\u003e Lock the content to prevent interaction, perfect for kiosk or public displays.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eNo-Code Configuration:\u003c\/strong\u003e All features are managed through a simple and intuitive configuration panel.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 3. USE CASES SECTION --\u003e\n\u003csection class=\"use-cases-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eOne Symbol, Endless Possibilities\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-cases-grid\"\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg fill=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"icon\"\u003e\u003cpath d=\"M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eCentralized Master Dashboards\u003c\/h3\u003e\n\u003cp\u003eCreate a high-level overview display that embeds and links to more detailed, specific PI Vision displays.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg fill=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"icon\"\u003e\u003cpath d=\"M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 14h-8v-2h8v2zm0-4h-8v-2h8v2zm-3-5V3.5L18.5 9H13z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eContextual Documents \u0026amp; SOPs\u003c\/h3\u003e\n\u003cp\u003eEmbed Standard Operating Procedures, safety data sheets, or maintenance manuals directly alongside your process data.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg fill=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"icon\"\u003e\u003cpath d=\"M21 3H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h5v2h8v-2h5c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 14H3V5h18v12z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eDigital Signage \u0026amp; Kiosk Displays\u003c\/h3\u003e\n\u003cp\u003eUse the slideshow feature to create rotating displays for control rooms, hallways, or public information screens.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg fill=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"icon\"\u003e\u003cpath d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eExternal Data Integration\u003c\/h3\u003e\n\u003cp\u003eDisplay live weather forecasts, traffic maps, stock tickers, or other relevant external web data alongside your PI data.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 4. IMPORTANT NOTICE SECTION --\u003e\n\u003csection class=\"notice-section\"\u003e\n\u003cdiv class=\"notice-card\"\u003e\n\u003csvg fill=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"icon\"\u003e\u003cpath d=\"M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003cdiv class=\"notice-content\"\u003e\n\u003ch3\u003eImportant Configuration Note\u003c\/h3\u003e\n\u003cp\u003eTo use this symbol, your PI Vision `web.config` file must be modified to allow iFrames. This is a standard security setting. We provide a simple, step-by-step guide on how to do this. \u003ca rel=\"noopener\" href=\"https:\/\/www.software-athlete.com\/blogs\/resources\/how-to-embed-web-pages-into-pi-vision\" target=\"_blank\"\u003eLearn more here\u003c\/a\u003e.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 5. SCREENSHOTS SECTION (UPDATED) --\u003e\n\u003csection class=\"screenshots-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eFlexible for Any Content\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshots-grid\"\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg alt=\"An external webpage embedded directly into a PI Vision display.\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/aveva-pi-vision-custom-symbol-web-view-2_600x600.png?v=1720764240\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eEmbed External Web Pages\u003c\/h4\u003e\n\u003cp\u003eDisplay any external website, from weather services to internal SOPs, directly in your dashboard.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg alt=\"A PI Vision display embedded within another PI Vision display.\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/aveva-pi-vision-custom-symbol-web-view-edit_600x600.png?v=1720768566\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eEmbed Interactive PI Vision Displays\u003c\/h4\u003e\n\u003cp\u003eCreate powerful master dashboards by embedding other fully interactive PI Vision displays.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg alt=\"The configuration panel for creating a slideshow of multiple displays in PI Vision.\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/aveva-pi-vision-custom-symbol-web-view-slideshow_600x600.png?v=1720768591\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eCreate Automated Slideshows\u003c\/h4\u003e\n\u003cp\u003eDefine a list of URLs and a rotation interval to create self-running information displays.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 6. DEMO VIDEO SECTION --\u003e\n\u003csection class=\"demo-video-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eSee Web View+ in Action\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"video-card\"\u003e\n\u003cdiv class=\"video-wrapper\"\u003e\u003cvideo controls=\"controls\" preload=\"metadata\"\u003e\n        \u003csource type=\"video\/mp4\" src=\"https:\/\/cdn.shopify.com\/videos\/c\/o\/v\/17e5d1d753454cd6a2895f234d902f10.mp4\"\u003e\n        Your browser does not support the video tag.\n      \u003c\/source\u003e\u003c\/video\u003e\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003cstyle\u003e\n  \/* --- GENERAL SECTION STYLES --- *\/\n  .section-header {\n    display: flex; flex-direction: column; align-items: center; text-align: center;\n    max-width: 800px; margin: 0 auto 3.5rem auto;\n  }\n  .section-header h2 {\n    color: #111; margin-bottom: 1rem; font-size: 1.8rem;\n  }\n  .section-header p {\n    color: #333; line-height: 1.7; font-size: 1rem;\n  }\n  .feature-list {\n    list-style: none; padding: 0; margin: 0;\n  }\n  .feature-list li {\n    position: relative; padding-left: 30px; margin-bottom: 1.25rem;\n    line-height: 1.6; color: #333;\n  }\n  .feature-list li::before {\n    content: '✔'; position: absolute; left: 0; top: 2px;\n    color: #3F72E5; font-size: 1.2rem;\n  }\n  .feature-list li strong {\n    color: #111; font-weight: 600;\n  }\n\n  \/* --- 1. HERO SECTION --- *\/\n  .product-hero-section {\n    padding: 5rem 1rem; text-align: center;\n  }\n  .product-hero-container {\n      max-width: 700px; margin: 0 auto;\n  }\n  .product-hero-icon {\n      width: 80px; height: auto; margin-bottom: 2rem;\n  }\n  .product-subtitle-tag {\n    color: #3F72E5; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.5px;\n  }\n  h1 {\n    font-size: 2.5rem; margin-bottom: 1.5rem;\n  }\n  .product-description {\n    line-height: 1.7; font-size: 1.1rem; color: #333;\n  }\n\n  \/* --- 2. FEATURES SECTION --- *\/\n  .product-features-section {\n    padding: 4rem 1rem; background-color: #f9fafb;\n  }\n  .features-grid-three-col {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n    gap: 2.5rem;\n    max-width: 1200px; margin: 0 auto;\n  }\n  .features-column h3 {\n    font-size: 1.3rem; margin-bottom: 1.5rem; color: #111;\n  }\n \n  \/* --- 3. USE CASES SECTION --- *\/\n  .use-cases-section {\n    padding: 4rem 1rem;\n  }\n  .use-cases-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n    gap: 2rem;\n    max-width: 1200px; margin: 0 auto;\n  }\n  .use-case-card {\n    background: white; border-radius: 20px; padding: 2rem; text-align: center;\n    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);\n  }\n  .use-case-card .icon {\n    width: 40px; height: 40px; color: #3F72E5; margin-bottom: 1rem;\n  }\n  .use-case-card h3 {\n    font-size: 1.2rem; color: #111; margin-bottom: 0.5rem;\n  }\n  .use-case-card p {\n    color: #333; font-size: 0.9rem; line-height: 1.6;\n  }\n  \n  \/* --- 4. NOTICE SECTION --- *\/\n  .notice-section {\n    padding: 4rem 1rem; background-color: #f9fafb;\n  }\n  .notice-card {\n      max-width: 800px;\n      margin: 0 auto;\n      background-color: #eef2ff;\n      border: 1px solid #c7d2fe;\n      border-radius: 20px;\n      padding: 2rem;\n      display: flex;\n      align-items: flex-start;\n      gap: 1.5rem;\n  }\n  .notice-card .icon {\n      flex-shrink: 0;\n      width: 24px;\n      height: 24px;\n      color: #3F72E5;\n      margin-top: 5px;\n  }\n  .notice-content h3 {\n      margin: 0 0 0.5rem 0;\n      color: #1e3a8a;\n      font-size: 1.2rem;\n  }\n  .notice-content p {\n      margin: 0;\n      color: #374151;\n      line-height: 1.6;\n  }\n  .notice-content a {\n      color: #3F72E5;\n      font-weight: 600;\n      text-decoration: underline;\n  }\n\n  \/* --- 5. SCREENSHOTS SECTION (UPDATED) --- *\/\n  .screenshots-section {\n    padding: 4rem 1rem;\n  }\n  .screenshots-grid {\n    display: grid;\n    grid-template-columns: 1fr; \/* Default to 1 column for mobile *\/\n    gap: 2rem;\n    max-width: 1200px; margin: 0 auto;\n  }\n  .screenshot-card {\n    background: white; border-radius: 20px;\n    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);\n    overflow: hidden;\n  }\n  .screenshot-card img {\n    width: 100%; height: auto; display: block; background-color: #f9fafb;\n  }\n  .screenshot-card-content {\n    padding: 1.5rem;\n  }\n  .screenshot-card-content h4 {\n    font-size: 1.2rem; margin: 0 0 0.5rem 0; color: #111;\n  }\n  .screenshot-card-content p {\n    font-size: 0.95rem; line-height: 1.6; color: #333; margin: 0;\n  }\n \n  \/* --- 6. DEMO VIDEO SECTION --- *\/\n  .demo-video-section {\n    padding: 4rem 1rem; background-color: #f9fafb;\n  }\n  .video-card {\n    max-width: 1000px; margin: 0 auto; border-radius: 20px;\n    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);\n    overflow: hidden;\n  }\n  .video-wrapper {\n    position: relative; padding-bottom: 56.25%; height: 0;\n  }\n  .video-wrapper video {\n    position: absolute; top: 0; left: 0; width: 100%; height: 100%;\n  }\n\n  \/* --- RESPONSIVE STYLES --- *\/\n  @media (min-width: 750px) {\n    .screenshots-grid {\n      grid-template-columns: 1fr 1fr; \/* 2 columns for tablet and up *\/\n    }\n  }\n  @media (max-width: 600px) {\n    .notice-card {\n      flex-direction: column;\n      align-items: center;\n      text-align: center;\n    }\n    .notice-card .icon {\n      margin-top: 0;\n    }\n  }\n\u003c\/style\u003e\n\u003c!-- END: Redesigned Product Page --\u003e","brand":"Software Athlete","offers":[{"title":"Default Title","offer_id":48881391173958,"sku":null,"price":1600.0,"currency_code":"EUR","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/aveva-pi-vision-custom-control-webview-thumbnail.png?v=1720761635"},{"product_id":"pi-vision-custom-symbol-event-gantt-chart","title":"Gantt Chart+","description":"\u003c!-- START: Redesigned Product Page for Gantt Chart+ (Corrected) --\u003e\n\u003cp\u003e \u003c\/p\u003e\n\u003c!-- 1. HERO SECTION --\u003e\n\u003csection class=\"product-hero-section\"\u003e\n\u003cdiv class=\"product-hero-container\"\u003e\n\u003cimg class=\"product-hero-icon\" alt=\"Gantt Chart+ Product Icon\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/ganttchart_160x160.png?v=1703755677\"\u003e\n\u003cp class=\"product-subtitle-tag\"\u003ePI Vision Custom Symbol\u003c\/p\u003e\n\u003ch1\u003eVisualize Your Operational Timelines with Gantt Charts\u003c\/h1\u003e\n\u003cp class=\"product-description\"\u003eTransform your PI Vision Event Frames into an intuitive Gantt chart. Gantt Chart+ makes it easy to visualize, group, and analyze event durations, overlaps, and sequences at a glance.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 2. FEATURES SECTION --\u003e\n\u003csection class=\"product-features-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eTurn Event Data into a Clear Picture\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-grid-three-col\"\u003e\n\u003cdiv class=\"features-column\"\u003e\n\u003ch3\u003eAdvanced Visualization\u003c\/h3\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eEvent Frame Timelines:\u003c\/strong\u003e Display event frames as bars on a chronological timeline for clear visualization.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003ePowerful Grouping:\u003c\/strong\u003e Group events by asset, name, severity, or any custom attribute to see related activities.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eMultistate Coloring:\u003c\/strong\u003e Automatically color-code bars based on attributes to instantly identify event types or priorities.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-column\"\u003e\n\u003ch3\u003eInteractive Analysis\u003c\/h3\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eAdvanced Filtering:\u003c\/strong\u003e Use powerful search and filter options to focus on specific assets, time ranges, or event types.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eDetailed Tooltips:\u003c\/strong\u003e Hover over any event bar to see fully configurable details and key attribute values.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eClick for Details:\u003c\/strong\u003e Click on an event to open a detailed view with all its attributes and annotations.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-column\"\u003e\n\u003ch3\u003eDirect Event Management\u003c\/h3\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eInline Event Editing:\u003c\/strong\u003e Acknowledge, comment on, or edit event frame attributes directly within the chart.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eSeamless Integration:\u003c\/strong\u003e Works with any Event Frame template in your AF structure without extra configuration.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eIntuitive Controls:\u003c\/strong\u003e All features are managed through user-friendly panels within PI Vision.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 3. USE CASES SECTION --\u003e\n\u003csection class=\"use-cases-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eFrom Downtime Analysis to Production Planning\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-cases-grid\"\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg fill=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"icon\"\u003e\u003cpath d=\"M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm-1-13h2v2h-2zm0 4h2v6h-2z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eDowntime Root Cause Analysis\u003c\/h3\u003e\n\u003cp\u003eVisualize all downtime events on a single timeline, grouped by reason code, to identify recurring problems.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg fill=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"icon\"\u003e\u003cpath d=\"M4 10h3v7H4zM10.5 10h3v7h-3zM17 10h3v7h-3zM22 6H2V4h20v2z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eProduction Batch Tracking\u003c\/h3\u003e\n\u003cp\u003eMonitor the duration and status of different production batches as they move through various stages.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg fill=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"icon\"\u003e\u003cpath d=\"M19 3h-4.18C14.4 1.84 13.3 1 12 1s-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm-2 14l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eMaintenance Scheduling\u003c\/h3\u003e\n\u003cp\u003eOverlay maintenance work orders with equipment downtime events to optimize planning and scheduling.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg fill=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"icon\"\u003e\u003cpath d=\"M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eIncident \u0026amp; Alarm Analysis\u003c\/h3\u003e\n\u003cp\u003eVisualize the sequence and duration of related alarms and critical events during a process upset.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 4. SCREENSHOTS SECTION (UPDATED) --\u003e\n\u003csection class=\"screenshots-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003ePowerful Features at Your Fingertips\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshots-grid\"\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg alt=\"A PI Vision Gantt chart with extensive configuration options being shown.\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-gantt-chart-card-style.png?v=1774014198\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eExtensive Configuration\u003c\/h4\u003e\n\u003cp\u003eFilter, sort, and configure the chart to display the exact event frames you need for your analysis.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg alt=\"A Gantt chart in PI Vision showing events grouped by a specific attribute.\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-gantt-chart-grouping.png?v=1774014198\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eGroup Events by Attribute\u003c\/h4\u003e\n\u003cp\u003eGroup events by asset, name, severity, or any other attribute to quickly identify patterns.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg alt=\"A PI Vision Gantt chart with multistate coloring applied to the event bars.\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-gantt-chart-multistate-badges.png?v=1774014198\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eMultistate Visualization\u003c\/h4\u003e\n\u003cp\u003eApply custom colors to event bars based on severity or other metrics for instant visual insights.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg alt=\"A tooltip showing detailed information for an event frame on the Gantt chart.\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/aveva-pi-vision-custom-control-event-gantt-chart-9.png?v=1720763990\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eDetailed Tooltips\u003c\/h4\u003e\n\u003cp\u003eHover over any event to view fully configurable details without leaving the chart.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg alt=\"An event details pop-up window showing all attributes and annotations.\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-custom-symbol-gantt-chart-event-details-3_600x600.png?v=1721019488\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eClick for Event Details\u003c\/h4\u003e\n\u003cp\u003eClick any event to open a detailed view with all its attributes, annotations, and comments.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg alt=\"An editing dialog for an event frame launched from the Gantt chart.\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-events-table-edit-event.png?v=1734606825\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eEdit Event Frames Directly\u003c\/h4\u003e\n\u003cp\u003eAcknowledge, comment on, or edit event attributes directly from the chart to streamline your workflow.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 5. DEMO VIDEO SECTION --\u003e\n\u003csection class=\"demo-video-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eSee Gantt Chart+ in Action\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"video-card\"\u003e\n\u003cdiv class=\"video-wrapper\"\u003e\u003cvideo controls=\"controls\" preload=\"metadata\"\u003e\n        \u003csource type=\"video\/mp4\" src=\"https:\/\/cdn.shopify.com\/videos\/c\/o\/v\/3e66dd1a6b3b4eb3aee3c928955bc985.mp4\"\u003e\n        Your browser does not support the video tag.\n      \u003c\/source\u003e\u003c\/video\u003e\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003cstyle\u003e\n  \/* --- GENERAL SECTION STYLES --- *\/\n  .section-header {\n    display: flex; flex-direction: column; align-items: center; text-align: center;\n    max-width: 800px; margin: 0 auto 3.5rem auto;\n  }\n  .section-header h2 {\n    color: #111; margin-bottom: 1rem; font-size: 1.8rem;\n  }\n  .section-header p {\n    color: #333; line-height: 1.7; font-size: 1rem;\n  }\n  .feature-list {\n    list-style: none; padding: 0; margin: 0;\n  }\n  .feature-list li {\n    position: relative; padding-left: 30px; margin-bottom: 1.25rem;\n    line-height: 1.6; color: #333;\n  }\n  .feature-list li::before {\n    content: '✔'; position: absolute; left: 0; top: 2px;\n    color: #3F72E5; font-size: 1.2rem;\n  }\n  .feature-list li strong {\n    color: #111; font-weight: 600;\n  }\n\n  \/* --- 1. HERO SECTION --- *\/\n  .product-hero-section {\n    padding: 5rem 1rem; text-align: center;\n  }\n  .product-hero-container {\n      max-width: 700px; margin: 0 auto;\n  }\n  .product-hero-icon {\n      width: 80px; height: auto; margin-bottom: 2rem;\n  }\n  .product-subtitle-tag {\n    color: #3F72E5; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.5px;\n  }\n  h1 {\n    font-size: 2.5rem; margin-bottom: 1.5rem;\n  }\n  .product-description {\n    line-height: 1.7; font-size: 1.1rem; color: #333;\n  }\n\n  \/* --- 2. FEATURES SECTION --- *\/\n  .product-features-section {\n    padding: 4rem 1rem; background-color: #f9fafb;\n  }\n  .features-grid-three-col {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n    gap: 2.5rem;\n    max-width: 1200px; margin: 0 auto;\n  }\n  .features-column h3 {\n    font-size: 1.3rem; margin-bottom: 1.5rem; color: #111;\n  }\n \n  \/* --- 3. USE CASES SECTION --- *\/\n  .use-cases-section {\n    padding: 4rem 1rem;\n  }\n  .use-cases-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n    gap: 2rem;\n    max-width: 1200px; margin: 0 auto;\n  }\n  .use-case-card {\n    background: white; border-radius: 20px; padding: 2rem; text-align: center;\n    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);\n  }\n  .use-case-card .icon {\n    width: 40px; height: 40px; color: #3F72E5; margin-bottom: 1rem;\n  }\n  .use-case-card h3 {\n    font-size: 1.2rem; color: #111; margin-bottom: 0.5rem;\n  }\n  .use-case-card p {\n    color: #333; font-size: 0.9rem; line-height: 1.6;\n  }\n\n  \/* --- 4. SCREENSHOTS SECTION (UPDATED) --- *\/\n  .screenshots-section {\n    padding: 4rem 1rem; background-color: #f9fafb;\n  }\n  .screenshots-grid {\n    display: grid;\n    grid-template-columns: 1fr; \/* Default to 1 column for mobile *\/\n    gap: 2rem;\n    max-width: 1200px; margin: 0 auto;\n  }\n  .screenshot-card {\n    background: white; border-radius: 20px;\n    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);\n    overflow: hidden;\n  }\n  .screenshot-card img {\n    width: 100%; height: auto; display: block; background-color: #f9fafb;\n  }\n  .screenshot-card-content {\n    padding: 1.5rem;\n  }\n  .screenshot-card-content h4 {\n    font-size: 1.2rem; margin: 0 0 0.5rem 0; color: #111;\n  }\n  .screenshot-card-content p {\n    font-size: 0.95rem; line-height: 1.6; color: #333; margin: 0;\n  }\n \n  \/* --- 5. DEMO VIDEO SECTION --- *\/\n  .demo-video-section {\n    padding: 4rem 1rem;\n  }\n  .video-card {\n    max-width: 1000px; margin: 0 auto; border-radius: 20px;\n    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);\n    overflow: hidden;\n  }\n  .video-wrapper {\n    position: relative; padding-bottom: 56.25%; height: 0;\n  }\n  .video-wrapper video {\n    position: absolute; top: 0; left: 0; width: 100%; height: 100%;\n  }\n\n  \/* --- RESPONSIVE STYLES --- *\/\n  @media (min-width: 750px) {\n    .screenshots-grid {\n      grid-template-columns: 1fr 1fr; \/* 2 columns for tablet and up *\/\n    }\n  }\n\u003c\/style\u003e\n\u003c!-- END: Redesigned Product Page --\u003e","brand":"Software Athlete","offers":[{"title":"Default Title","offer_id":48948225507654,"sku":null,"price":2000.0,"currency_code":"EUR","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/aveva-pi-vision-custom-control-event-gantt-chart-7.png?v=1720763734"},{"product_id":"waterfall-chart","title":"Waterfall Chart+","description":"\u003c!-- START: Redesigned Product Page for Waterfall Chart+ --\u003e\n\u003cp\u003e \u003c\/p\u003e\n\u003c!-- 1. HERO SECTION --\u003e\n\u003csection class=\"product-hero-section\"\u003e\n\u003cdiv class=\"product-hero-container\"\u003e\n\u003csvg class=\"product-hero-icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" fill=\"currentColor\"\u003e\u003cpath d=\"M4 18h3V9H4v9zm5 0h3V6h-3v12zm5 0h3V3h-3v15zm5 0h3v-6h-3v6z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003cp class=\"product-subtitle-tag\"\u003ePI Vision Custom Symbol\u003c\/p\u003e\n\u003ch1\u003eVisualize the Story Behind Your Data\u003c\/h1\u003e\n\u003cp class=\"product-description\"\u003eUnderstand the cumulative impact of positive and negative changes at a glance. Waterfall Chart+ visualizes the step-by-step journey of your metrics, from start to finish.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 2. FEATURES SECTION --\u003e\n\u003csection class=\"product-features-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003ePinpoint Key Drivers of Change\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-grid-three-col\"\u003e\n\u003cdiv class=\"features-column\"\u003e\n\u003ch3\u003eStorytelling with Data\u003c\/h3\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eVisualize Cumulative Impact:\u003c\/strong\u003e Clearly see how a starting value is affected by a series of intermediate positive and negative contributions.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003ePositive \u0026amp; Negative Contributions:\u003c\/strong\u003e Automatically color-code increases and decreases to show gains and losses.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eClear Start \u0026amp; End Totals:\u003c\/strong\u003e Bookend your chart with total columns to provide a complete picture of the net change.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-column\"\u003e\n\u003ch3\u003ePowerful Analysis\u003c\/h3\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eRoot Cause Identification:\u003c\/strong\u003e Instantly spot the biggest drivers of change in your process or business metrics.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eTrack Key Metrics:\u003c\/strong\u003e Perfectly suited for visualizing OEE losses, inventory changes, or financial statements.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eTime-Based Analysis:\u003c\/strong\u003e Analyze changes over a specific period, from a single shift to a full fiscal year.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-column\"\u003e\n\u003ch3\u003eTotal Customization\u003c\/h3\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eCustom Colors \u0026amp; Labels:\u003c\/strong\u003e Define colors for up, down, and total bars, and customize data labels for clarity.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eConnector Line Styling:\u003c\/strong\u003e Adjust the style of the lines connecting the bars to match your dashboard's design.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eSeamless PI Vision Integration:\u003c\/strong\u003e Works directly with your AF Attributes and PI Points with no-code configuration.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 3. USE CASES SECTION --\u003e\n\u003csection class=\"use-cases-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eFrom Finance to the Factory Floor\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-cases-grid\"\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg class=\"icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" fill=\"currentColor\"\u003e\u003cpath d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 14H9V8h2v8zm4 0h-2V8h2v8z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eOEE \u0026amp; Performance Breakdown\u003c\/h3\u003e\n\u003cp\u003eVisualize the Six Big Losses (breakdowns, setup, etc.) to see exactly what is impacting your equipment effectiveness.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg class=\"icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" fill=\"currentColor\"\u003e\u003cpath d=\"M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.44C4.52 15.37 5.24 17 6.5 17h12v-2H6.5l1.1-2H18c.83 0 1.5-.67 1.5-1.5l3.58-6.49A.996.996 0 0021.5 4H5.21L4.27 2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eInventory \u0026amp; Material Balance\u003c\/h3\u003e\n\u003cp\u003eTrack a starting inventory, then visualize additions, shipments, and shrinkage to arrive at the final on-hand amount.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg class=\"icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" fill=\"currentColor\"\u003e\u003cpath d=\"M11.8 10.9c-2.27-.59-3-1.2-3-2.15 0-1.09 1.01-1.85 2.7-1.85 1.78 0 2.44.85 2.5 2.1h2.21c-.07-1.72-1.12-3.3-3.21-3.81V3h-3v2.16c-1.94.42-3.5 1.68-3.5 3.61 0 2.31 1.91 3.46 4.7 4.13 2.5.6 3 1.48 3 2.41 0 .69-.49 1.79-2.7 1.79-2.06 0-2.87-.92-2.98-2.1h-2.2c.12 2.19 1.76 3.42 3.68 3.83V21h3v-2.15c2.11-.47 3.5-1.73 3.5-3.55 0-2.84-2.43-3.81-4.7-4.4z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eFinancial Reconciliation\u003c\/h3\u003e\n\u003cp\u003eVisualize a P\u0026amp;L statement, showing how starting revenue is affected by costs to arrive at net profit.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg class=\"icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" fill=\"currentColor\"\u003e\u003cpath d=\"M13 2.05v3.03c4.39.54 7.5 4.53 6.95 8.92-.46 3.63-3.36 6.51-6.95 6.95v3.03c5.5-.55 9.5-5.43 8.95-10.93-.55-5.5-5.43-9.5-10.95-8.95zM3.05 13H.02c.55 5.5 5.43 9.5 10.93 8.95v-3.03c-3.6-.45-6.5-3.35-6.9-6.92z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eEnergy Balance\u003c\/h3\u003e\n\u003cp\u003eTrack energy from its source, showing consumption by different units and identifying major areas of energy loss.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 4. SCREENSHOTS SECTION --\u003e\n\u003csection class=\"screenshots-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eVisualize the Complete Story\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshots-grid\"\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/aveva-pi-vision-custom-symbol-waterfall-chart-oee-2_600x600.png?v=1720763635\" alt=\"A PI Vision Waterfall Chart showing an OEE breakdown with performance losses.\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eTrack Equipment Effectiveness (OEE)\u003c\/h4\u003e\n\u003cp\u003eVisualize how availability, performance, and quality losses impact your overall equipment effectiveness.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003c!-- IMPORTANT: This image appears to be from another source (vizlib.com). It is highly recommended to replace this with your own screenshot. --\u003e \u003cimg src=\"https:\/\/home.vizlib.com\/wp-content\/uploads\/2020\/09\/Waterfall-blog-image-1-big-1-1024x358.png\" alt=\"A waterfall chart showing changes in inventory over time with additions and subtractions.\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eAnalyze Inventory Changes\u003c\/h4\u003e\n\u003cp\u003eStart with an opening balance, then track inflows, outflows, and adjustments to see the final inventory level.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 5. DEMO VIDEO SECTION --\u003e\n\u003csection class=\"demo-video-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eSee Waterfall Chart+ in Action\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"video-card\"\u003e\n\u003cdiv class=\"video-wrapper\"\u003e\u003cvideo preload=\"metadata\" controls=\"controls\"\u003e\n        \u003csource src=\"https:\/\/cdn.shopify.com\/videos\/c\/o\/v\/71a747ba5a234c7996023b25dce1189a.mp4\" type=\"video\/mp4\"\u003e\n        Your browser does not support the video tag.\n      \u003c\/source\u003e\u003c\/video\u003e\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003cstyle\u003e\n  \/* --- GENERAL SECTION STYLES --- *\/\n  .section-header {\n    display: flex; flex-direction: column; align-items: center; text-align: center;\n    max-width: 800px; margin: 0 auto 3.5rem auto;\n  }\n  .section-header h2 {\n    color: #111; margin-bottom: 1rem; font-size: 1.8rem;\n  }\n  .section-header p {\n    color: #333; line-height: 1.7; font-size: 1rem;\n  }\n  .feature-list {\n    list-style: none; padding: 0; margin: 0;\n  }\n  .feature-list li {\n    position: relative; padding-left: 30px; margin-bottom: 1.25rem;\n    line-height: 1.6; color: #333;\n  }\n  .feature-list li::before {\n    content: '✔'; position: absolute; left: 0; top: 2px;\n    color: #3F72E5; font-size: 1.2rem;\n  }\n  .feature-list li strong {\n    color: #111; font-weight: 600;\n  }\n\n  \/* --- 1. HERO SECTION --- *\/\n  .product-hero-section {\n    padding: 5rem 1rem; text-align: center;\n  }\n  .product-hero-container {\n      max-width: 700px; margin: 0 auto;\n  }\n  .product-hero-icon {\n      width: 80px; height: auto; margin-bottom: 2rem; color: #3F72E5;\n  }\n  .product-subtitle-tag {\n    color: #3F72E5; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.5px;\n  }\n  h1 {\n    font-size: 2.5rem; margin-bottom: 1.5rem;\n  }\n  .product-description {\n    line-height: 1.7; font-size: 1.1rem; color: #333;\n  }\n\n  \/* --- 2. FEATURES SECTION --- *\/\n  .product-features-section {\n    padding: 4rem 1rem; background-color: #f9fafb;\n  }\n  .features-grid-three-col {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n    gap: 2.5rem;\n    max-width: 1200px; margin: 0 auto;\n  }\n  .features-column h3 {\n    font-size: 1.3rem; margin-bottom: 1.5rem; color: #111;\n  }\n \n  \/* --- 3. USE CASES SECTION --- *\/\n  .use-cases-section {\n    padding: 4rem 1rem;\n  }\n  .use-cases-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n    gap: 2rem;\n    max-width: 1200px; margin: 0 auto;\n  }\n  .use-case-card {\n    background: white; border-radius: 20px; padding: 2rem; text-align: center;\n    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);\n  }\n  .use-case-card .icon {\n    width: 40px; height: 40px; color: #3F72E5; margin-bottom: 1rem;\n  }\n  .use-case-card h3 {\n    font-size: 1.2rem; color: #111; margin-bottom: 0.5rem;\n  }\n  .use-case-card p {\n    color: #333; font-size: 0.9rem; line-height: 1.6;\n  }\n\n  \/* --- 4. SCREENSHOTS SECTION --- *\/\n  .screenshots-section {\n    padding: 4rem 1rem; background-color: #f9fafb;\n  }\n  .screenshots-grid {\n    display: grid;\n    grid-template-columns: 1fr;\n    gap: 2rem;\n    max-width: 1200px; margin: 0 auto;\n  }\n  .screenshot-card {\n    background: white; border-radius: 20px;\n    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);\n    overflow: hidden;\n  }\n  .screenshot-card img {\n    width: 100%; height: auto; display: block; background-color: #f9fafb;\n  }\n  .screenshot-card-content {\n    padding: 1.5rem;\n  }\n  .screenshot-card-content h4 {\n    font-size: 1.2rem; margin: 0 0 0.5rem 0; color: #111;\n  }\n  .screenshot-card-content p {\n    font-size: 0.95rem; color: #333; line-height: 1.6; margin: 0;\n  }\n \n  \/* --- 5. DEMO VIDEO SECTION --- *\/\n  .demo-video-section {\n    padding: 4rem 1rem;\n  }\n  .video-card {\n    max-width: 1000px; margin: 0 auto; border-radius: 20px;\n    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);\n    overflow: hidden;\n  }\n  .video-wrapper {\n    position: relative; padding-bottom: 56.25%; height: 0;\n  }\n  .video-wrapper video {\n    position: absolute; top: 0; left: 0; width: 100%; height: 100%;\n  }\n\n  \/* --- RESPONSIVE STYLES --- *\/\n  @media (min-width: 750px) {\n    .screenshots-grid {\n      grid-template-columns: 1fr 1fr;\n    }\n  }\n\u003c\/style\u003e\n\u003c!-- END: Redesigned Product Page --\u003e","brand":"Software Athlete","offers":[{"title":"Default Title","offer_id":49158788972870,"sku":null,"price":1600.0,"currency_code":"EUR","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/aveva-pi-vision-custom-symbol-waterfall-chart-oee-thumbnail.png?v=1720763648"},{"product_id":"quick-input","title":"Quick Input+","description":"\u003c!-- START: Redesigned Product Page for Quick Input+ (Final Fix) --\u003e\n\u003cp\u003e \u003c\/p\u003e\n\u003c!-- 1. HERO SECTION --\u003e\n\u003csection class=\"product-hero-section\"\u003e\n\u003cdiv class=\"product-hero-container\"\u003e\n\u003csvg class=\"product-hero-icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" fill=\"currentColor\"\u003e\u003cpath d=\"M14.25 2.25a.75.75 0 00-1.5 0v11.534a2.25 2.25 0 00-1.898 2.216c0 1.242 1.008 2.25 2.25 2.25s2.25-1.008 2.25-2.25a2.25 2.25 0 00-1.898-2.216V2.25zM9.75 2.25a.75.75 0 00-1.5 0v5.534a2.25 2.25 0 00-1.898 2.216c0 1.242 1.008 2.25 2.25 2.25s2.25-1.008 2.25-2.25A2.25 2.25 0 009 10.000V2.25zM18.75 2.25a.75.75 0 00-1.5 0v2.534a2.25 2.25 0 00-1.898 2.216c0 1.242 1.008 2.25 2.25 2.25s2.25-1.008 2.25-2.25a2.25 2.25 0 00-1.898-2.216V2.25z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003cp class=\"product-subtitle-tag\"\u003ePI Vision Custom Symbol\u003c\/p\u003e\n\u003ch1\u003eModern Data Input Controls for PI Vision\u003c\/h1\u003e\n\u003cp class=\"product-description\"\u003eReplace excel sheets with a suite of intuitive, modern controls. Quick Input+ makes data entry faster, easier, and more reliable for operators and engineers.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 2. FEATURES SECTION --\u003e\n\u003csection class=\"product-features-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eEmpower Your Operators\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-grid-three-col\"\u003e\n\u003cdiv class=\"features-column\"\u003e\n\u003ch3\u003eIntuitive Operator Experience\u003c\/h3\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eDiverse Input Controls:\u003c\/strong\u003e A full suite of controls including switches, buttons, sliders, and dropdowns.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eUser-Friendly Interface:\u003c\/strong\u003e Designed for immediate understanding, reducing errors and training time.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eMobile \u0026amp; Touch Ready:\u003c\/strong\u003e Large touch targets make controls easy to use on tablets and shop-floor HMIs.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-column\"\u003e\n\u003ch3\u003eFlexible Configuration\u003c\/h3\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eFully Configurable:\u003c\/strong\u003e Customize min\/max values, step sizes, and styles to match operational needs.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eWide Compatibility:\u003c\/strong\u003e Works with numeric, boolean, enumeration, and string data types.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eNo-Code Setup:\u003c\/strong\u003e All options are managed through a simple configuration panel within PI Vision.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-column\"\u003e\n\u003ch3\u003eSeamless PI Integration\u003c\/h3\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eReal-Time Updates:\u003c\/strong\u003e Instantly write back values to PI Points and AF Attributes with immediate feedback.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eWorks with Existing Tags:\u003c\/strong\u003e Connects directly to your existing PI System tags and AF structure.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eLightweight \u0026amp; Performant:\u003c\/strong\u003e Built for speed and reliability in demanding environments.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 3. SHOWCASE OF CONTROLS SECTION --\u003e\n\u003csection class=\"controls-gallery-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eA Control for Every Need\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"controls-grid\"\u003e\n\u003cdiv class=\"control-card\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/aveva-pi-vision-custom-control-quickinput-switch.png?v=1720762790\" alt=\"iOS-style toggle switch for PI Vision.\"\u003e\n\u003cdiv class=\"control-card-content\"\u003e\n\u003ch4\u003eSwitch\u003c\/h4\u003e\n\u003cp\u003eModern toggle for boolean values.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"control-card\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/aveva-pi-vision-custom-control-quickinput.png?v=1720761812\" alt=\"A single-click button for PI Vision data entry.\"\u003e\n\u003cdiv class=\"control-card-content\"\u003e\n\u003ch4\u003eButton\u003c\/h4\u003e\n\u003cp\u003eSingle-click toggle for boolean attributes.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"control-card\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/aveva-pi-vision-custom-control-quickinput-slider.png?v=1720762843\" alt=\"A slider control for numeric values in PI Vision.\"\u003e\n\u003cdiv class=\"control-card-content\"\u003e\n\u003ch4\u003eSlider\u003c\/h4\u003e\n\u003cp\u003eAdjust numeric values with a configurable range.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"control-card\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/aveva-pi-vision-custom-control-quickinput-step.png?v=1720762832\" alt=\"A step input with plus\/minus buttons for PI Vision.\"\u003e\n\u003cdiv class=\"control-card-content\"\u003e\n\u003ch4\u003eStep Input\u003c\/h4\u003e\n\u003cp\u003eIncrement or decrement numbers with precision.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"control-card\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/aveva-pi-vision-custom-control-quickinput-text.png?v=1720762821\" alt=\"A text input field for PI Vision.\"\u003e\n\u003cdiv class=\"control-card-content\"\u003e\n\u003ch4\u003eInput Field\u003c\/h4\u003e\n\u003cp\u003eDirectly enter numeric or string values.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"control-card\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/aveva-pi-vision-custom-control-quickinput-list_600x600.png?v=1720762811\" alt=\"A list selection control for PI Vision enumeration sets.\"\u003e\n\u003cdiv class=\"control-card-content\"\u003e\n\u003ch4\u003eList\u003c\/h4\u003e\n\u003cp\u003eSelect from a pre-configured list of options.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"control-card\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/aveva-pi-vision-custom-control-quickinput-dropdown.png?v=1720762801\" alt=\"A dropdown menu control for PI Vision digital states.\"\u003e\n\u003cdiv class=\"control-card-content\"\u003e\n\u003ch4\u003eDropdown\u003c\/h4\u003e\n\u003cp\u003eSelect from a dropdown for digital states or enums.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 4. USE CASES SECTION --\u003e\n\u003csection class=\"use-cases-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eStreamline Operator Actions\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-cases-grid\"\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg class=\"icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" fill=\"currentColor\"\u003e\u003cpath d=\"M19 8H5c-1.66 0-3 1.34-3 3s1.34 3 3 3h14c1.66 0 3-1.34 3-3s-1.34-3-3-3zm-9 4H6c-.55 0-1-.45-1-1s.45-1 1-1h4v2zm5-2c.55 0 1 .45 1 1s-.45 1-1 1h-4v-2h4z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eEquipment Control\u003c\/h3\u003e\n\u003cp\u003eUse switches and buttons to toggle pumps, valves, and other equipment on or off directly from the dashboard.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg class=\"icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" fill=\"currentColor\"\u003e\u003cpath d=\"M16 6l2.29 2.29-4.88 4.88-4-4L2 16.59 3.41 18l6-6 4 4 6.3-6.29L22 12V6h-6z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eOperator Setpoint Adjustments\u003c\/h3\u003e\n\u003cp\u003eAllow operators to easily adjust temperature, pressure, or flow setpoints using intuitive sliders and step inputs.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg class=\"icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" fill=\"currentColor\"\u003e\u003cpath d=\"M20 4H4c-1.11 0-1.99.89-1.99 2L2 18c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V6c0-1.11-.89-2-2-2zm-1 14H5c-.55 0-1-.45-1-1V8h16v9c0 .55-.45 1-1 1zm1-11H4V6h16v1z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eManual Data Entry \u0026amp; Logging\u003c\/h3\u003e\n\u003cp\u003eEnable manual entry of lab results, quality checks, or operator notes using text fields and lists.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg class=\"icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" fill=\"currentColor\"\u003e\u003cpath d=\"M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm-1-13h2v2h-2zm0 4h2v6h-2z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eReason Code Selection\u003c\/h3\u003e\n\u003cp\u003eUse dropdowns or lists to let operators quickly select downtime reasons or event classifications from a standard set.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 5. DEMO VIDEO SECTION --\u003e\n\u003csection class=\"demo-video-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eSee Quick Input+ in Action\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"video-card\"\u003e\n\u003cdiv class=\"video-wrapper\"\u003e\u003cvideo preload=\"metadata\" controls=\"controls\"\u003e\n        \u003csource src=\"https:\/\/cdn.shopify.com\/videos\/c\/o\/v\/8ab8f420228d41a7baf361fb74ea2f00.mp4\" type=\"video\/mp4\"\u003e\n        Your browser does not support the video tag.\n      \u003c\/source\u003e\u003c\/video\u003e\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003cstyle\u003e\n  \/* --- GENERAL SECTION STYLES --- *\/\n  .section-header {\n    display: flex; flex-direction: column; align-items: center; text-align: center;\n    max-width: 800px; margin: 0 auto 3.5rem auto;\n  }\n  .section-header h2 {\n    color: #111; margin-bottom: 1rem; font-size: 1.8rem;\n  }\n  .section-header p {\n    color: #333; line-height: 1.7; font-size: 1rem;\n  }\n  .feature-list {\n    list-style: none; padding: 0; margin: 0;\n  }\n  .feature-list li {\n    position: relative; padding-left: 30px; margin-bottom: 1.25rem;\n    line-height: 1.6; color: #333;\n  }\n  .feature-list li::before {\n    content: '✔'; position: absolute; left: 0; top: 2px;\n    color: #3F72E5; font-size: 1.2rem;\n  }\n  .feature-list li strong {\n    color: #111; font-weight: 600;\n  }\n\n  \/* --- 1. HERO SECTION --- *\/\n  .product-hero-section {\n    padding: 5rem 1rem; text-align: center;\n  }\n  .product-hero-container {\n      max-width: 700px; margin: 0 auto;\n  }\n  .product-hero-icon {\n      width: 80px; height: auto; margin-bottom: 2rem; color: #3F72E5;\n  }\n  .product-subtitle-tag {\n    color: #3F72E5; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.5px;\n  }\n  h1 {\n    font-size: 2.5rem; margin-bottom: 1.5rem;\n  }\n  .product-description {\n    line-height: 1.7; font-size: 1.1rem; color: #333;\n  }\n\n  \/* --- 2. FEATURES SECTION --- *\/\n  .product-features-section {\n    padding: 4rem 1rem; background-color: #f9fafb;\n  }\n  .features-grid-three-col {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n    gap: 2.5rem;\n    max-width: 1200px; margin: 0 auto;\n  }\n  .features-column h3 {\n    font-size: 1.3rem; margin-bottom: 1.5rem; color: #111;\n  }\n\n  \/* --- 3. CONTROLS GALLERY SECTION (UPDATED) --- *\/\n  .controls-gallery-section {\n    padding: 4rem 1rem;\n  }\n  .controls-grid {\n    display: grid;\n    grid-template-columns: 1fr; \/* 1 column by default for mobile *\/\n    gap: 2rem;\n    max-width: 1200px;\n    margin: 0 auto;\n  }\n  .control-card {\n    background: white; border-radius: 20px; text-align: center;\n    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);\n    padding: 2rem 1.5rem;\n  }\n  .control-card img {\n      width: 100%; \/* Fill available horizontal space *\/\n      max-width: 350px; \/* Prevent image from getting too large *\/\n      height: auto; \/* Maintain aspect ratio *\/\n      margin-left: auto;\n      margin-right: auto;\n      margin-bottom: 1.5rem;\n  }\n  .control-card-content h4 {\n      font-size: 1.2rem; color: #111; margin: 0 0 0.5rem 0;\n  }\n  .control-card-content p {\n      color: #333; font-size: 0.9rem; line-height: 1.6; margin: 0;\n  }\n \n  \/* --- 4. USE CASES SECTION --- *\/\n  .use-cases-section {\n    padding: 4rem 1rem; background-color: #f9fafb;\n  }\n  .use-cases-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n    gap: 2rem;\n    max-width: 1200px; margin: 0 auto;\n  }\n  .use-case-card {\n    background: white; border-radius: 20px; padding: 2rem; text-align: center;\n    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);\n  }\n  .use-case-card .icon {\n    width: 40px; height: 40px; color: #3F72E5; margin-bottom: 1rem;\n  }\n  .use-case-card h3 {\n    font-size: 1.2rem; color: #111; margin-bottom: 0.5rem;\n  }\n  .use-case-card p {\n    color: #333; font-size: 0.9rem; line-height: 1.6;\n  }\n \n  \/* --- 5. DEMO VIDEO SECTION --- *\/\n  .demo-video-section {\n    padding: 4rem 1rem;\n  }\n  .video-card {\n    max-width: 1000px; margin: 0 auto; border-radius: 20px;\n    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);\n    overflow: hidden;\n  }\n  .video-wrapper {\n    position: relative; padding-bottom: 56.25%; height: 0;\n  }\n  .video-wrapper video {\n    position: absolute; top: 0; left: 0; width: 100%; height: 100%;\n  }\n\n  \/* --- RESPONSIVE STYLES --- *\/\n  @media (min-width: 750px) {\n    .controls-grid {\n      grid-template-columns: 1fr 1fr; \/* 2 columns for tablet and up *\/\n    }\n  }\n\u003c\/style\u003e\n\u003c!-- END: Redesigned Product Page --\u003e","brand":"Software Athlete","offers":[{"title":"Default Title","offer_id":49265570349382,"sku":null,"price":1800.0,"currency_code":"EUR","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/aveva-pi-vision-custom-control-quickinput-thumbnail.png?v=1720762886"},{"product_id":"pi-vision-custom-symbol-events-table","title":"Events Table+","description":"\u003c!-- START: Redesigned Product Page for Events Table+ (Corrected) --\u003e\n\u003cp\u003e \u003c\/p\u003e\n\u003c!-- 1. HERO SECTION --\u003e\n\u003csection class=\"product-hero-section\"\u003e\n\u003cdiv class=\"product-hero-container\"\u003e\n\u003cimg class=\"product-hero-icon\" alt=\"Events Table+ Product Icon\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/icon_da863f66-a422-45d4-99ca-da5af639956b_100x100.png?v=1711556723\"\u003e\n\u003cp class=\"product-subtitle-tag\"\u003ePI Vision Custom Symbol\u003c\/p\u003e\n\u003ch1\u003eInteractive Event \u0026amp; Downtime Management in PI Vision\u003c\/h1\u003e\n\u003cp class=\"product-description\"\u003eTransform your PI Vision Event Frames into a powerful, interactive workspace. Events Table+ lets you view, filter, edit, and analyze your operational events to drive efficiency and reduce downtime.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 2. FEATURES SECTION --\u003e\n\u003csection class=\"product-features-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eThe Interactive Hub for Your Operational Events\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-grid-three-col\"\u003e\n\u003cdiv class=\"features-column\"\u003e\n\u003ch3\u003ePowerful Event Analysis\u003c\/h3\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eDynamic Filtering \u0026amp; Search:\u003c\/strong\u003e Instantly find the exact events you need with powerful search and filter criteria.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eLogical Grouping:\u003c\/strong\u003e Organize events by equipment, reason code, or any other attribute to uncover patterns.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eMultistate Coloring:\u003c\/strong\u003e Use dynamic colors to highlight critical events, priorities, or statuses at a glance.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eDrill-Down Hierarchy:\u003c\/strong\u003e Expand events to view child events and understand the complete context.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-column\"\u003e\n\u003ch3\u003eInteractive Event Management\u003c\/h3\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eInline Editing \u0026amp; Commenting:\u003c\/strong\u003e Add notes, assign reason codes, and update event attributes directly in the table.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eCreate New Events:\u003c\/strong\u003e Quickly generate new events using custom, pre-configured input forms.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eSplit \u0026amp; Merge Events:\u003c\/strong\u003e Easily break down or combine events for more accurate analysis.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eInstant Data Export:\u003c\/strong\u003e Download event data to Excel for simplified reporting and offline analysis.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-column\"\u003e\n\u003ch3\u003eSeamless Integration\u003c\/h3\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eCustom Input Forms:\u003c\/strong\u003e Design tailored event creation forms for your operators to ensure consistent data entry.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eWorks with Any Event Frame:\u003c\/strong\u003e Fully compatible with any Event Frame template in your AF structure.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eIntuitive Configuration:\u003c\/strong\u003e All features are managed through user-friendly panels within PI Vision.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 3. DOWNTIME \u0026 OEE SECTION --\u003e\n\u003csection class=\"downtime-focus-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eTransform Event Data into Downtime Intelligence\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"downtime-focus-container\"\u003e\n\u003cdiv class=\"downtime-focus-image\"\u003e\u003cimg alt=\"Editing downtime event attributes like Root Cause and Impact in Events Table+ for PI Vision.\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-events-table-edit-attributes_600x600.png?v=1734606825\"\u003e\u003c\/div\u003e\n\u003cdiv class=\"downtime-focus-content\"\u003e\n\u003cp\u003eStop tracking downtime in spreadsheets. Because you can edit \u003cstrong\u003eany\u003c\/strong\u003e event attribute, Events Table+ becomes your central hub for detailed downtime analysis and OEE improvement, right inside PI Vision.\u003c\/p\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eTrack Root Cause \u0026amp; Impact:\u003c\/strong\u003e Add custom fields for primary and secondary causes, impact levels, or any other classification you need.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eQuantify Downtime \u0026amp; Loss:\u003c\/strong\u003e Configure attributes to let operators input downtime duration, production loss in tons, or financial impact.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eCapture OEE Data:\u003c\/strong\u003e Collect the essential event data needed to analyze Availability, Performance, and Quality for accurate OEE calculations.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 4. SCREENSHOTS SECTION (UPDATED) --\u003e\n\u003csection class=\"screenshots-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eA Clear View of All Your Events\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshots-grid\"\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg alt=\"Filtering PI Vision event frames by different attributes.\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/shop1_d876c7f6-8929-44f1-9595-f360d25213b2_1024x1024.png?v=1711557795\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eFilter by Any Attribute\u003c\/h4\u003e\n\u003cp\u003eQuickly isolate critical events using powerful search and filter options to find exactly what you need.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg alt=\"Adding and viewing comments on an event frame in PI Vision.\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/shop2_bee59c29-bd6c-48c1-ab67-e8c9aaaa4671_1024x1024.png?v=1711557795\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eAdd \u0026amp; View Comments\u003c\/h4\u003e\n\u003cp\u003eCollaborate with your team by adding and viewing contextual comments directly on events.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg alt=\"Expanding an event to show child events in a hierarchy.\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-events-table-child-events_600x600.png?v=1734606830\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eDrill Down into Child Events\u003c\/h4\u003e\n\u003cp\u003eExpand parent events to view child event hierarchies and understand the full operational context.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg alt=\"Grouping PI Vision event frames by category for clear analysis.\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-custom-symbol-events-table-group_600x600.png?v=1721896475\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eGroup by Category\u003c\/h4\u003e\n\u003cp\u003eArrange events by equipment, reason code, or any other attribute for clear, organized views.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg alt=\"Editing multiple event attributes in a PI Vision table.\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-events-table-edit-attributes_600x600.png?v=1734606825\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eEdit Any Attribute\u003c\/h4\u003e\n\u003cp\u003eUpdate any custom attribute, from root cause to production loss, with intuitive input fields.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg alt=\"Editing an event frame attribute with a dropdown menu in PI Vision.\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-custom-symbol-events-table-update-attribute_d73fd53e-76b5-4d5f-bca2-307afcad20ba_600x600.png?v=1721896372\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eUpdate with Dropdowns\u003c\/h4\u003e\n\u003cp\u003eEnsure consistent data entry for reason codes and categories with pre-configured dropdown menus.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg alt=\"Changing the severity level of an event frame in PI Vision.\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-events-table-edit-severity_600x600.png?v=1721896295\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eCategorize Event Severity\u003c\/h4\u003e\n\u003cp\u003eSet priority or severity levels to visually highlight the most critical events for your team.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg alt=\"Splitting a single event frame into multiple smaller events.\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-events-table-split-event_c6d499a5-9b60-42d7-ae8d-73467aa810e3.png?v=1734606824\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eSplit Complex Events\u003c\/h4\u003e\n\u003cp\u003eBreak down long or complex events into smaller, more manageable parts for accurate analysis.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg alt=\"Comparing data from multiple event frames side-by-side.\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-custom-symbol-events-table-compare-event-data-2_600x600.png?v=1721895066\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eCompare Event Data\u003c\/h4\u003e\n\u003cp\u003eView attributes from multiple events side-by-side for clear and effective comparison.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 5. DEMO VIDEO SECTION --\u003e\n\u003csection class=\"demo-video-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eSee Events Table+ in Action\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"video-card\"\u003e\n\u003cdiv class=\"video-wrapper\"\u003e\u003cvideo controls=\"controls\" preload=\"metadata\"\u003e\n        \u003csource type=\"video\/mp4\" src=\"https:\/\/cdn.shopify.com\/videos\/c\/o\/v\/e9e0c35febb348ab8421ff3da3705ed1.mp4\"\u003e\n        Your browser does not support the video tag.\n      \u003c\/source\u003e\u003c\/video\u003e\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003cstyle\u003e\n  \/* --- GENERAL SECTION STYLES --- *\/\n  .section-header {\n    display: flex; flex-direction: column; align-items: center; text-align: center;\n    max-width: 800px; margin: 0 auto 3.5rem auto;\n  }\n  .section-header h2 {\n    color: #111; margin-bottom: 1rem; font-size: 1.8rem;\n  }\n  .section-header p {\n    color: #333; line-height: 1.7; font-size: 1rem;\n  }\n  .feature-list {\n    list-style: none; padding: 0; margin: 0;\n  }\n  .feature-list li {\n    position: relative; padding-left: 30px; margin-bottom: 1.25rem;\n    line-height: 1.6; color: #333;\n  }\n  .feature-list li::before {\n    content: '✔'; position: absolute; left: 0; top: 2px;\n    color: #3F72E5; font-size: 1.2rem;\n  }\n  .feature-list li strong {\n    color: #111; font-weight: 600;\n  }\n\n  \/* --- 1. HERO SECTION --- *\/\n  .product-hero-section {\n    padding: 5rem 1rem; text-align: center;\n  }\n  .product-hero-container {\n      max-width: 700px; margin: 0 auto;\n  }\n  .product-hero-icon {\n      width: 80px; height: auto; margin-bottom: 2rem;\n  }\n  .product-subtitle-tag {\n    color: #3F72E5; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.5px;\n  }\n  h1 {\n    font-size: 2.5rem; margin-bottom: 1.5rem;\n  }\n  .product-description {\n    line-height: 1.7; font-size: 1.1rem; color: #333;\n  }\n\n  \/* --- 2. FEATURES SECTION --- *\/\n  .product-features-section {\n    padding: 4rem 1rem; background-color: #f9fafb;\n  }\n  .features-grid-three-col {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n    gap: 2.5rem;\n    max-width: 1200px; margin: 0 auto;\n  }\n  .features-column h3 {\n    font-size: 1.3rem; margin-bottom: 1.5rem; color: #111;\n  }\n \n  \/* --- 3. DOWNTIME \u0026 OEE SECTION --- *\/\n  .downtime-focus-section {\n    padding: 4rem 1rem;\n  }\n  .downtime-focus-container {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 3rem;\n    max-width: 1100px;\n    margin: 0 auto;\n    align-items: center;\n  }\n  .downtime-focus-image img {\n    width: 100%;\n    height: auto;\n    border-radius: 20px;\n    box-shadow: 0 8px 24px rgba(0,0,0,0.1);\n  }\n  .downtime-focus-content p {\n    color: #333;\n    line-height: 1.7;\n    margin-bottom: 2rem;\n  }\n  \n  \/* --- 4. SCREENSHOTS SECTION (UPDATED) --- *\/\n  .screenshots-section {\n    padding: 4rem 1rem; background-color: #f9fafb;\n  }\n  .screenshots-grid {\n    display: grid;\n    grid-template-columns: 1fr; \/* Default to 1 column for mobile *\/\n    gap: 2rem;\n    max-width: 1200px; margin: 0 auto;\n  }\n  .screenshot-card {\n    background: white; border-radius: 20px;\n    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);\n    overflow: hidden;\n  }\n  .screenshot-card img {\n    width: 100%; height: auto; display: block; background-color: #f9fafb;\n  }\n  .screenshot-card-content {\n    padding: 1.5rem;\n  }\n  .screenshot-card-content h4 {\n    font-size: 1.2rem; margin: 0 0 0.5rem 0; color: #111;\n  }\n  .screenshot-card-content p {\n    font-size: 0.95rem; line-height: 1.6; color: #333; margin: 0;\n  }\n \n  \/* --- 5. DEMO VIDEO SECTION --- *\/\n  .demo-video-section {\n    padding: 4rem 1rem;\n  }\n  .video-card {\n    max-width: 1000px; margin: 0 auto; border-radius: 20px;\n    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);\n    overflow: hidden;\n  }\n  .video-wrapper {\n    position: relative; padding-bottom: 56.25%; height: 0;\n  }\n  .video-wrapper video {\n    position: absolute; top: 0; left: 0; width: 100%; height: 100%;\n  }\n\n  \/* --- RESPONSIVE STYLES --- *\/\n  @media (min-width: 750px) {\n    .screenshots-grid {\n      grid-template-columns: 1fr 1fr; \/* 2 columns for tablet and up *\/\n    }\n  }\n  @media (max-width: 900px) {\n    .downtime-focus-container {\n        grid-template-columns: 1fr;\n    }\n    .downtime-focus-image {\n        order: -1;\n    }\n  }\n\u003c\/style\u003e\n\u003c!-- END: Redesigned Product Page --\u003e","brand":"Software Athlete","offers":[{"title":"Default Title","offer_id":49358793670982,"sku":null,"price":2000.0,"currency_code":"EUR","in_stock":false}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/aveva-pi-vision-custom-control-events-table-thumbnail.png?v=1720761580"},{"product_id":"pi-vision-adhoc-trend-value-symbol","title":"Value+","description":"\u003c!-- START: Redesigned Product Page for Value+ (Corrected) --\u003e\n\u003cp\u003e \u003c\/p\u003e\n\u003c!-- 1. HERO SECTION --\u003e\n\u003csection class=\"product-hero-section\"\u003e\n\u003cdiv class=\"product-hero-container\" style=\"text-align: center;\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/icon3_182ccd2d-9e85-483a-9c08-5550e1c181dc_160x160.png?v=1762808293\" style=\"margin-bottom: 16px; float: none;\"\u003e\u003cbr\u003e\n\u003cp class=\"product-subtitle-tag\"\u003ePI Vision Custom Symbol\u003c\/p\u003e\n\u003ch1\u003eThe Supercharged Value Symbol for PI Vision\u003c\/h1\u003e\n\u003cp class=\"product-description\"\u003eGo beyond the default. Value+ adds critical features for on-demand analysis, deeper context, and a faster workflow directly to your value displays.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 2. FEATURES SECTION --\u003e\n\u003csection class=\"product-features-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eGo Beyond the Default\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-grid-two-col\"\u003e\n\u003cdiv class=\"features-column\"\u003e\n\u003ch3\u003eInstant Context \u0026amp; Clarity\u003c\/h3\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eReveal PI Point Names:\u003c\/strong\u003e Instantly see the underlying PI Point name in a tooltip, not just the attribute.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eCopy Tag Names:\u003c\/strong\u003e One-click to copy the full PI Point name to your clipboard for faster troubleshooting.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eDisplay Point Attributes:\u003c\/strong\u003e Show essential metadata like PointSource or InstrumentTag directly in the tooltip.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-column\"\u003e\n\u003ch3\u003eOn-Demand Analysis\u003c\/h3\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eDraggable Ad Hoc Chart:\u003c\/strong\u003e Pop up a quick trend chart without leaving your screen or opening a new display.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eCustom Calculations:\u003c\/strong\u003e Instantly calculate aggregates like Avg, Min, or Max over a fixed or dynamic time range.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eHistorical Data Points:\u003c\/strong\u003e Configure the symbol to display data from a specific historical timestamp.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 3. USE CASES SECTION --\u003e\n\u003csection class=\"use-cases-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eStreamline Your Workflow, Accelerate Insight\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-cases-grid\"\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg fill=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"icon\"\u003e\u003cpath d=\"M20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83zM3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eRapid Troubleshooting\u003c\/h3\u003e\n\u003cp\u003eQuickly copy tag names and launch ad hoc trends to investigate process upsets without switching screens.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg fill=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"icon\"\u003e\u003cpath d=\"M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5C21.27 7.61 17 4.5 12 4.5zm0 10c-2.48 0-4.5-2.02-4.5-4.5S9.52 5.5 12 5.5s4.5 2.02 4.5 4.5-2.02 4.5-4.5 4.5zm0-7C10.62 7.5 9.5 8.62 9.5 10s1.12 2.5 2.5 2.5 2.5-1.12 2.5-2.5-1.12-2.5-2.5-2.5z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eEnhanced Operator Insight\u003c\/h3\u003e\n\u003cp\u003eProvide operators with richer context by showing point attributes and the true PI tag name on hover.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg fill=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"icon\"\u003e\u003cpath d=\"M16 6l2.29 2.29-4.88 4.88-4-4L2 16.59 3.41 18l6-6 4 4 6.3-6.29L22 12V6h-6z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eQuick Performance Checks\u003c\/h3\u003e\n\u003cp\u003eInstantly run on-demand calculations like averages or totals directly on a value without extra configuration.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg fill=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"icon\"\u003e\u003cpath d=\"M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eBuilding Richer Dashboards\u003c\/h3\u003e\n\u003cp\u003eCreate more interactive and informative displays that empower users to explore data on their own.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 4. SCREENSHOTS SECTION --\u003e\n\u003csection class=\"screenshots-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eFeatures You've Always Wanted\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshots-grid\"\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg alt=\"The Value+ symbol showing a tooltip with the full PI point name.\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-custom-control-show-tag-name-on-hover.png?v=1720761039\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eTooltip with PI Point Name\u003c\/h4\u003e\n\u003cp\u003eSee the actual PI point name on hover, not just the AF attribute.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg alt=\"A small, draggable ad hoc chart window opened from the Value+ symbol.\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/aveva-pivision-custom-symbol-adhoc-chart_600x600.png?v=1720759007\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eDraggable Ad Hoc Chart\u003c\/h4\u003e\n\u003cp\u003eLaunch a quick trend in a movable window without leaving your display.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg alt=\"A context menu on the Value+ symbol with an option to copy the PI point name.\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-copy-tag-name.png?v=1749219309\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eInstantly Copy PI Point Name\u003c\/h4\u003e\n\u003cp\u003eA simple right-click and copy action speeds up any investigation.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg alt=\"The Value+ tooltip showing additional PI point attributes like PointSource.\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-custom-symbol-point-attributes.png?v=1749236233\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eShow Point Attributes\u003c\/h4\u003e\n\u003cp\u003eDisplay valuable metadata like PointSource, InstrumentTag, and more.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 5. DEMO VIDEO SECTION --\u003e\n\u003csection class=\"demo-video-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eSee Value+ in Action\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"coming-soon-card\"\u003e\n\u003cp\u003e\u003cstrong\u003eDemo Coming Soon\u003c\/strong\u003e\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003cstyle\u003e\n  \/* --- GENERAL SECTION STYLES --- *\/\n  .section-header {\n    display: flex; flex-direction: column; align-items: center; text-align: center;\n    max-width: 800px; margin: 0 auto 3.5rem auto;\n  }\n  .section-header h2 {\n    color: #111; margin-bottom: 1rem; font-size: 1.8rem;\n  }\n  .section-header p {\n    color: #333; line-height: 1.7; font-size: 1rem;\n  }\n  .feature-list {\n    list-style: none; padding: 0; margin: 0;\n  }\n  .feature-list li {\n    position: relative; padding-left: 30px; margin-bottom: 1.25rem;\n    line-height: 1.6; color: #333;\n  }\n  .feature-list li::before {\n    content: '✔'; position: absolute; left: 0; top: 2px;\n    color: #3F72E5; font-size: 1.2rem;\n  }\n  .feature-list li strong {\n    color: #111; font-weight: 600;\n  }\n\n  \/* --- 1. HERO SECTION --- *\/\n  .product-hero-section {\n    padding: 5rem 1rem; text-align: center;\n  }\n  .product-hero-container {\n      max-width: 700px; margin: 0 auto;\n  }\n  .product-hero-icon {\n      width: 80px; height: auto; margin-bottom: 2rem;\n  }\n  .product-subtitle-tag {\n    color: #3F72E5; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.5px;\n  }\n  h1 {\n    font-size: 2.5rem; margin-bottom: 1.5rem;\n  }\n  .product-description {\n    line-height: 1.7; font-size: 1.1rem; color: #333;\n  }\n\n  \/* --- 2. FEATURES SECTION --- *\/\n  .product-features-section {\n    padding: 4rem 1rem; background-color: #f9fafb;\n  }\n  .features-grid-two-col {\n    display: grid;\n    grid-template-columns: 1fr;\n    gap: 2.5rem;\n    max-width: 1100px; margin: 0 auto;\n  }\n  .features-column h3 {\n    font-size: 1.3rem; margin-bottom: 1.5rem; color: #111;\n  }\n \n  \/* --- 3. USE CASES SECTION --- *\/\n  .use-cases-section {\n    padding: 4rem 1rem;\n  }\n  .use-cases-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n    gap: 2rem;\n    max-width: 1200px; margin: 0 auto;\n  }\n  .use-case-card {\n    background: white; border-radius: 20px; padding: 2rem; text-align: center;\n    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);\n  }\n  .use-case-card .icon {\n    width: 40px; height: 40px; color: #3F72E5; margin-bottom: 1rem;\n  }\n  .use-case-card h3 {\n    font-size: 1.2rem; color: #111; margin-bottom: 0.5rem;\n  }\n  .use-case-card p {\n    color: #333; font-size: 0.9rem; line-height: 1.6;\n  }\n\n  \/* --- 4. SCREENSHOTS SECTION --- *\/\n  .screenshots-section {\n    padding: 4rem 1rem; background-color: #f9fafb;\n  }\n  .screenshots-grid {\n    display: grid;\n    grid-template-columns: 1fr;\n    gap: 2rem;\n    max-width: 1200px; margin: 0 auto;\n  }\n  .screenshot-card {\n    background: white; border-radius: 20px;\n    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);\n    overflow: hidden;\n  }\n  .screenshot-card img {\n    width: 100%; height: auto; display: block; background-color: #f9fafb;\n  }\n  .screenshot-card-content {\n    padding: 1.5rem;\n  }\n  .screenshot-card-content h4 {\n    font-size: 1.2rem; margin: 0 0 0.5rem 0; color: #111;\n  }\n  .screenshot-card-content p {\n    font-size: 0.95rem; color: #333; line-height: 1.6; margin: 0;\n  }\n \n  \/* --- 5. DEMO VIDEO SECTION --- *\/\n  .demo-video-section {\n    padding: 4rem 1rem;\n  }\n  .coming-soon-card {\n    max-width: 1000px;\n    margin: 0 auto;\n    border-radius: 20px;\n    background-color: #f0f2f5;\n    border: 2px dashed #d1d5db;\n    padding: 4rem 2rem;\n    text-align: center;\n    color: #6b7280;\n  }\n  .coming-soon-card p {\n    margin: 0;\n    font-size: 1.2rem;\n  }\n\n  \/* --- RESPONSIVE STYLES --- *\/\n  @media (min-width: 750px) {\n    .features-grid-two-col {\n        grid-template-columns: 1fr 1fr;\n    }\n    .screenshots-grid {\n        grid-template-columns: 1fr 1fr;\n    }\n  }\n\u003c\/style\u003e\n\u003c!-- END: Redesigned Product Page --\u003e","brand":"Software Athlete","offers":[{"title":"Default Title","offer_id":49584322511174,"sku":null,"price":1800.0,"currency_code":"EUR","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-custom-symbol-value-plus.png?v=1720760901"},{"product_id":"pi-vision-custom-control-alarm-sound","title":"Alarm Sound+","description":"\u003c!-- START: Redesigned Product Page for Alarm Sound+ --\u003e\n\u003cp\u003e \u003c\/p\u003e\n\u003c!-- 1. HERO SECTION --\u003e\n\u003csection class=\"product-hero-section\"\u003e\n\u003cdiv class=\"product-hero-container\"\u003e\n\u003csvg class=\"product-hero-icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" fill=\"currentColor\"\u003e\u003cpath d=\"M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6v-5c0-3.07-1.63-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.64 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2zm-2 1H8v-6c0-2.48 1.51-4.5 4-4.5s4 2.02 4 4.5v6z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003cp class=\"product-subtitle-tag\"\u003ePI Vision Custom Symbol\u003c\/p\u003e\n\u003ch1\u003eNever Miss a Critical Event Again\u003c\/h1\u003e\n\u003cp class=\"product-description\"\u003eAdd powerful, configurable audible alerts to your PI Vision dashboards. Alarm Sound+ ensures operators are immediately notified of critical events, even when they aren't looking directly at the screen.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 2. FEATURES SECTION --\u003e\n\u003csection class=\"product-features-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eFrom Silent Data to Actionable Alerts\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-grid-three-col\"\u003e\n\u003cdiv class=\"features-column\"\u003e\n\u003ch3\u003eInstant Event Awareness\u003c\/h3\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eAudible Alerts:\u003c\/strong\u003e Play a distinct sound when a value crosses a critical threshold.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eVisual Indicators:\u003c\/strong\u003e Use blinking effects and state changes to draw immediate visual attention.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eImproved Awareness:\u003c\/strong\u003e Ensure critical events are never missed, enhancing operator response time.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-column\"\u003e\n\u003ch3\u003eIntuitive Operator Control\u003c\/h3\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eOne-Click Acknowledge:\u003c\/strong\u003e Operators can instantly mute an active alarm with a single click on the symbol.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eClear State Indication:\u003c\/strong\u003e The symbol's appearance changes to show whether an alarm is active, silenced, or normal.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eFocus on Resolution:\u003c\/strong\u003e Muting the sound allows operators to focus on resolving the underlying issue without distraction.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-column\"\u003e\n\u003ch3\u003eFlexible Configuration\u003c\/h3\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eDynamic Thresholds:\u003c\/strong\u003e Use PI Vision calculations to set alarm limits that adapt to changing conditions.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eCustom Sounds:\u003c\/strong\u003e Choose from a library of built-in sounds or upload your own audio files.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eSimple Setup:\u003c\/strong\u003e Configure all options through an easy-to-use panel directly in PI Vision.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 3. USE CASES SECTION --\u003e\n\u003csection class=\"use-cases-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eEnhance Safety and Operational Efficiency\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-cases-grid\"\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg class=\"icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" fill=\"currentColor\"\u003e\u003cpath d=\"M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eEquipment Protection\u003c\/h3\u003e\n\u003cp\u003eTrigger an audible alarm when machinery exceeds critical temperature, pressure, or vibration limits to prevent damage.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg class=\"icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" fill=\"currentColor\"\u003e\u003cpath d=\"M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eProcess Upset Alerts\u003c\/h3\u003e\n\u003cp\u003eAlert operators to deviations in critical process parameters, such as flow rates or tank levels, to avoid quality issues.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg class=\"icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" fill=\"currentColor\"\u003e\u003cpath d=\"M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6v-5c0-3.07-1.63-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.64 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eSafety \u0026amp; Compliance\u003c\/h3\u003e\n\u003cp\u003eUse loud, distinct sounds to signal emergency conditions or compliance breaches, ensuring prompt action.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg class=\"icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" fill=\"currentColor\"\u003e\u003cpath d=\"M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5C21.27 7.61 17 4.5 12 4.5zm0 10c-2.48 0-4.5-2.02-4.5-4.5S9.52 5.5 12 5.5s4.5 2.02 4.5 4.5-2.02 4.5-4.5 4.5zm0-7C10.62 7.5 9.5 8.62 9.5 10s1.12 2.5 2.5 2.5 2.5-1.12 2.5-2.5-1.12-2.5-2.5-2.5z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eUnattended Monitoring\u003c\/h3\u003e\n\u003cp\u003eReliably monitor systems in control rooms or on dashboards that are not always in direct line of sight.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 4. SCREENSHOTS SECTION --\u003e\n\u003csection class=\"screenshots-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eSimple to Use, Impossible to Ignore\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshots-grid\"\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/aveva-pi-vision-custom-control-alarm-sound-2.png?v=1720760299\" alt=\"PI Vision alarm symbol showing different states like active, normal, and acknowledged.\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eClear Alarm States\u003c\/h4\u003e\n\u003cp\u003eVisual indicators clearly show if an alarm is active, silenced, or in a normal state.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/aveva-pi-vision-custom-control-alarm-sound-muted.png?v=1720760255\" alt=\"A muted alarm symbol in PI Vision, indicating an operator has acknowledged the alert.\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eOne-Click Mute\u003c\/h4\u003e\n\u003cp\u003eOperators can instantly acknowledge and mute alarms with a single, simple click.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/aveva-pi-vision-custom-control-alarm-sound.gif?v=1720760228\" alt=\"A GIF showing the blinking effect of an active alarm in PI Vision.\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eVisual Blink Effects\u003c\/h4\u003e\n\u003cp\u003eAttention-grabbing blinking effects ensure critical events are noticed immediately.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 5. DEMO VIDEO SECTION --\u003e\n\u003csection class=\"demo-video-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eSee Alarm Sound+ in Action\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"coming-soon-card\"\u003e\n\u003cp\u003e\u003cstrong\u003eDemo Coming Soon\u003c\/strong\u003e\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003cstyle\u003e\n  \/* --- GENERAL SECTION STYLES --- *\/\n  .section-header {\n    display: flex; flex-direction: column; align-items: center; text-align: center;\n    max-width: 800px; margin: 0 auto 3.5rem auto;\n  }\n  .section-header h2 {\n    color: #111; margin-bottom: 1rem; font-size: 1.8rem;\n  }\n  .section-header p {\n    color: #333; line-height: 1.7; font-size: 1rem;\n  }\n  .feature-list {\n    list-style: none; padding: 0; margin: 0;\n  }\n  .feature-list li {\n    position: relative; padding-left: 30px; margin-bottom: 1.25rem;\n    line-height: 1.6; color: #333;\n  }\n  .feature-list li::before {\n    content: '✔'; position: absolute; left: 0; top: 2px;\n    color: #3F72E5; font-size: 1.2rem;\n  }\n  .feature-list li strong {\n    color: #111; font-weight: 600;\n  }\n\n  \/* --- 1. HERO SECTION --- *\/\n  .product-hero-section {\n    padding: 5rem 1rem; text-align: center;\n  }\n  .product-hero-container {\n      max-width: 700px; margin: 0 auto;\n  }\n  .product-hero-icon {\n      width: 80px; height: auto; margin-bottom: 2rem; color: #3F72E5;\n  }\n  .product-subtitle-tag {\n    color: #3F72E5; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.5px;\n  }\n  h1 {\n    font-size: 2.5rem; margin-bottom: 1.5rem;\n  }\n  .product-description {\n    line-height: 1.7; font-size: 1.1rem; color: #333;\n  }\n\n  \/* --- 2. FEATURES SECTION --- *\/\n  .product-features-section {\n    padding: 4rem 1rem; background-color: #f9fafb;\n  }\n  .features-grid-three-col {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n    gap: 2.5rem;\n    max-width: 1200px; margin: 0 auto;\n  }\n  .features-column h3 {\n    font-size: 1.3rem; margin-bottom: 1.5rem; color: #111;\n  }\n \n  \/* --- 3. USE CASES SECTION --- *\/\n  .use-cases-section {\n    padding: 4rem 1rem;\n  }\n  .use-cases-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n    gap: 2rem;\n    max-width: 1200px; margin: 0 auto;\n  }\n  .use-case-card {\n    background: white; border-radius: 20px; padding: 2rem; text-align: center;\n    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);\n  }\n  .use-case-card .icon {\n    width: 40px; height: 40px; color: #3F72E5; margin-bottom: 1rem;\n  }\n  .use-case-card h3 {\n    font-size: 1.2rem; color: #111; margin-bottom: 0.5rem;\n  }\n  .use-case-card p {\n    color: #333; font-size: 0.9rem; line-height: 1.6;\n  }\n\n  \/* --- 4. SCREENSHOTS SECTION --- *\/\n  .screenshots-section {\n    padding: 4rem 1rem; background-color: #f9fafb;\n  }\n  .screenshots-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));\n    gap: 2rem;\n    max-width: 1200px; margin: 0 auto;\n  }\n  .screenshot-card {\n    background: white; border-radius: 20px;\n    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);\n    overflow: hidden;\n  }\n  .screenshot-card img {\n    width: 100%; height: auto; display: block; background-color: #f9fafb;\n  }\n  .screenshot-card-content {\n    padding: 1.5rem;\n  }\n  .screenshot-card-content h4 {\n    font-size: 1.2rem; margin: 0 0 0.5rem 0; color: #111;\n  }\n  .screenshot-card-content p {\n    font-size: 0.95rem; color: #333; line-height: 1.6; margin: 0;\n  }\n \n  \/* --- 5. DEMO VIDEO SECTION --- *\/\n  .demo-video-section {\n    padding: 4rem 1rem;\n  }\n  .coming-soon-card {\n    max-width: 1000px;\n    margin: 0 auto;\n    border-radius: 20px;\n    background-color: #f0f2f5;\n    border: 2px dashed #d1d5db;\n    padding: 4rem 2rem;\n    text-align: center;\n    color: #6b7280;\n  }\n  .coming-soon-card p {\n    margin: 0;\n    font-size: 1.2rem;\n  }\n\u003c\/style\u003e\n\u003c!-- END: Redesigned Product Page --\u003e","brand":"Software Athlete","offers":[{"title":"Default Title","offer_id":49778806882630,"sku":"","price":1800.0,"currency_code":"EUR","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/icon3_6e6545ca-ea54-43ac-8bda-ab743cc262b1.png?v=1782728534"},{"product_id":"pi-vision-custom-symbol-linear-gauge","title":"Linear Gauge+","description":"\u003c!-- START: Redesigned Product Page for Linear Gauge+ (Final Fix) --\u003e\n\u003cp\u003e \u003c\/p\u003e\n\u003c!-- 1. HERO SECTION --\u003e\n\u003csection class=\"product-hero-section\"\u003e\n\u003cdiv class=\"product-hero-container\"\u003e\n\u003c!-- Icon can be added here if you have one --\u003e\n\u003cp class=\"product-subtitle-tag\"\u003ePI Vision Custom Symbol\u003c\/p\u003e\n\u003ch1\u003eModern Linear Gauges for PI Vision\u003c\/h1\u003e\n\u003cp class=\"product-description\"\u003eRevolutionize your process monitoring. Linear Gauge+ offers a sleek, customizable, and highly readable way to visualize critical data, enhancing clarity and insight in any dashboard.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 2. FEATURES SECTION --\u003e\n\u003csection class=\"product-features-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eClarity in a Single Glance\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-grid-three-col\"\u003e\n\u003cdiv class=\"features-column\"\u003e\n\u003ch3\u003eAt-a-Glance Clarity\u003c\/h3\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eMultistate Color Ranges:\u003c\/strong\u003e Define custom color zones to instantly indicate normal, warning, and critical states.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eReal-Time Data Display:\u003c\/strong\u003e Visualize live process data with immediate, reliable updates.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eClear Tick Marks:\u003c\/strong\u003e Enhanced readability with clean, easy-to-read tick marks and labels.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-column\"\u003e\n\u003ch3\u003eFlexible \u0026amp; Versatile Design\u003c\/h3\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eHorizontal or Vertical:\u003c\/strong\u003e Align gauges vertically or horizontally to fit perfectly in any dashboard layout.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eMultiple Values:\u003c\/strong\u003e Display several pointers or markers on a single scale to compare related values.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eCustomizable Scale:\u003c\/strong\u003e Easily adapt the gauge to fit specific ranges, units, and precision needs.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-column\"\u003e\n\u003ch3\u003eTotal Customization\u003c\/h3\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eComplete Style Control:\u003c\/strong\u003e Customize styles, colors, and fonts to match your corporate design.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eSeamless Integration:\u003c\/strong\u003e Effortlessly integrates into your existing PI Vision environment.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eNo-Code Configuration:\u003c\/strong\u003e Build powerful visualizations with an intuitive configuration panel.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 3. USE CASES SECTION --\u003e\n\u003csection class=\"use-cases-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eVisualize Performance Instantly\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-cases-grid\"\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg fill=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"icon\"\u003e\u003cpath d=\"M4 18h16V6H4v12zm2-4h4v2H6v-2zm-2-2h16V8H4v4z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eTank Level Monitoring\u003c\/h3\u003e\n\u003cp\u003eClearly visualize fluid levels in tanks, reservoirs, and silos with color-coded safe operating zones.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg fill=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"icon\"\u003e\u003cpath d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 14H9V8h2v8zm4 0h-2V8h2v8z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eKPI Tracking\u003c\/h3\u003e\n\u003cp\u003eDisplay Key Performance Indicators against targets to monitor business metrics and efficiency.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg fill=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"icon\"\u003e\u003cpath d=\"M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eProcess Variables\u003c\/h3\u003e\n\u003cp\u003eMonitor critical process variables like temperature, pressure, and flow rates with intuitive multistate limits.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg fill=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"icon\"\u003e\u003cpath d=\"M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11v8.8z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eEquipment Health\u003c\/h3\u003e\n\u003cp\u003eTrack equipment performance metrics like load, vibration, or utilization against safe operating ranges.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 4. SCREENSHOTS SECTION (UPDATED) --\u003e\n\u003csection class=\"screenshots-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003ePowerful Customization, Simple Configuration\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshots-grid\"\u003e\n\u003c!-- Screenshot 1 --\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cdiv class=\"screenshot-image-container\"\u003e\u003cimg alt=\"A PI Vision linear gauge showing multistate color ranges for different thresholds.\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/aveva-pivision-linear-gauge-custom-symbol-3.png?v=1720759555\"\u003e\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eMultistate Color Ranges\u003c\/h4\u003e\n\u003cp\u003eDefine ranges with custom color indicators for enhanced clarity.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c!-- Screenshot 2 --\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cdiv class=\"screenshot-image-container\"\u003e\u003cimg alt=\"Linear gauges aligned both horizontally and vertically in a PI Vision display.\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/aveva-pivision-linear-gauge-control-2.png?v=1720759470\"\u003e\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eHorizontal or Vertical\u003c\/h4\u003e\n\u003cp\u003eFlexibly align gauges to suit your dashboard layout needs.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c!-- Screenshot 3 --\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cdiv class=\"screenshot-image-container\"\u003e\u003cimg alt=\"A highly customized linear gauge symbol in PI Vision.\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/aveva-pivision-linear-gauge-custom-symbol-2.png?v=1720759546\"\u003e\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eHighly Adaptable\u003c\/h4\u003e\n\u003cp\u003eAdapt and style the symbol to meet your specific requirements.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c!-- Screenshot 4 --\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cdiv class=\"screenshot-image-container\"\u003e\u003cimg alt=\"A single linear gauge displaying multiple values for easy comparison.\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/aveva-pivision-linear-gauge-control.png?v=1720759416\"\u003e\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eDisplay Multiple Values\u003c\/h4\u003e\n\u003cp\u003eShowcase multiple values with distinct markers on a single scale.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c!-- Screenshot 5 --\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cdiv class=\"screenshot-image-container\"\u003e\u003cimg alt=\"PI Vision linear gauge with custom styles, colors, and fonts.\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/aveva-pivision-linear-gauge-custom-symbol.png?v=1720759519\"\u003e\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eFull Style Control\u003c\/h4\u003e\n\u003cp\u003eCustomize styles, colors, and fonts to match your design.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c!-- Screenshot 6 --\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cdiv class=\"screenshot-image-container\"\u003e\u003cimg alt=\"A PI Vision linear gauge showing advanced custom styling options.\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-custom-symbol-linear-gauge-4.png?v=1730742529\"\u003e\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eAdvanced Styling\u003c\/h4\u003e\n\u003cp\u003eAchieve the exact look and functionality your display needs.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 5. DEMO VIDEO SECTION --\u003e\n\u003csection class=\"demo-video-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eSee Linear Gauge+ in Action\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"coming-soon-card\"\u003e\n\u003cp\u003e\u003cstrong\u003eDemo Coming Soon\u003c\/strong\u003e\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003cstyle\u003e\n  \/* --- GENERAL SECTION STYLES --- *\/\n  .section-header {\n    display: flex; flex-direction: column; align-items: center; text-align: center;\n    max-width: 800px; margin: 0 auto 3.5rem auto;\n  }\n  .section-header h2 {\n    color: #111; margin-bottom: 1rem; font-size: 1.8rem;\n  }\n  .section-header p {\n    color: #333; line-height: 1.7; font-size: 1rem;\n  }\n  .feature-list {\n    list-style: none; padding: 0; margin: 0;\n  }\n  .feature-list li {\n    position: relative; padding-left: 30px; margin-bottom: 1.25rem;\n    line-height: 1.6; color: #333;\n  }\n  .feature-list li::before {\n    content: '✔'; position: absolute; left: 0; top: 2px;\n    color: #3F72E5; font-size: 1.2rem;\n  }\n  .feature-list li strong {\n    color: #111; font-weight: 600;\n  }\n\n  \/* --- 1. HERO SECTION --- *\/\n  .product-hero-section {\n    padding: 5rem 1rem; text-align: center;\n  }\n  .product-hero-container {\n      max-width: 700px; margin: 0 auto;\n  }\n  .product-hero-icon {\n      width: 100px; height: auto; margin-bottom: 2rem;\n  }\n  .product-subtitle-tag {\n    color: #3F72E5; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.5px;\n  }\n  h1 {\n    font-size: 2.5rem; margin-bottom: 1.5rem;\n  }\n  .product-description {\n    line-height: 1.7; font-size: 1.1rem; color: #333;\n  }\n\n  \/* --- 2. FEATURES SECTION --- *\/\n  .product-features-section {\n    padding: 4rem 1rem; background-color: #f9fafb;\n  }\n  .features-grid-three-col {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n    gap: 2.5rem;\n    max-width: 1200px; margin: 0 auto;\n  }\n  .features-column h3 {\n    font-size: 1.3rem; margin-bottom: 1.5rem; color: #111;\n  }\n \n  \/* --- 3. USE CASES SECTION --- *\/\n  .use-cases-section {\n    padding: 4rem 1rem;\n  }\n  .use-cases-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n    gap: 2rem;\n    max-width: 1200px; margin: 0 auto;\n  }\n  .use-case-card {\n    background: white; border-radius: 20px; padding: 2rem; text-align: center;\n    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);\n  }\n  .use-case-card .icon {\n    width: 40px; height: 40px; color: #3F72E5; margin-bottom: 1rem;\n  }\n  .use-case-card h3 {\n    font-size: 1.2rem; color: #111; margin-bottom: 0.5rem;\n  }\n  .use-case-card p {\n    color: #333; font-size: 0.9rem; line-height: 1.6;\n  }\n\n  \/* --- 4. SCREENSHOTS SECTION (UPDATED) --- *\/\n  .screenshots-section {\n    padding: 4rem 1rem; background-color: #f9fafb;\n  }\n  .screenshots-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));\n    gap: 2rem;\n    max-width: 1200px; margin: 0 auto;\n  }\n  .screenshot-card {\n    background: white; border-radius: 20px;\n    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);\n    overflow: hidden;\n  }\n  .screenshot-image-container {\n      aspect-ratio: 16 \/ 10;\n      background-color: #f9fafb; \/* Subtle background for letterboxing *\/\n      overflow: hidden;\n      padding: 1rem; \/* Add some padding around the contained image *\/\n  }\n  .screenshot-card img {\n    width: 100%;\n    height: 100%;\n    display: block;\n    object-fit: contain; \/* THIS IS THE FIX: Ensures full image is visible *\/\n  }\n  .screenshot-card-content {\n    padding: 1.5rem;\n  }\n  .screenshot-card-content h4 {\n    font-size: 1.2rem; margin: 0 0 0.5rem 0; color: #111;\n  }\n  .screenshot-card-content p {\n    font-size: 0.95rem; color: #333; line-height: 1.6; margin: 0;\n  }\n \n  \/* --- 5. DEMO VIDEO SECTION --- *\/\n  .demo-video-section {\n    padding: 4rem 1rem;\n  }\n  .coming-soon-card {\n    max-width: 1000px;\n    margin: 0 auto;\n    border-radius: 20px;\n    background-color: #f0f2f5;\n    border: 2px dashed #d1d5db;\n    padding: 4rem 2rem;\n    text-align: center;\n    color: #6b7280;\n  }\n  .coming-soon-card p {\n    margin: 0;\n    font-size: 1.2rem;\n  }\n\n\u003c\/style\u003e\n\u003c!-- END: Redesigned Product Page --\u003e","brand":"Software Athlete","offers":[{"title":"Default Title","offer_id":49994846929222,"sku":null,"price":1600.0,"currency_code":"EUR","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/aveva-pivision-linear-gauge-thumbnail.png?v=1720759612"},{"product_id":"box-plot-plus-pivision-custom-symbol","title":"Box Plot+","description":"\u003c!-- START: Redesigned Product Page for Box Plot+ --\u003e\n\u003cp\u003e \u003c\/p\u003e\n\u003c!-- 1. HERO SECTION --\u003e\n\u003csection class=\"product-hero-section\"\u003e\n\u003cdiv class=\"product-hero-container\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/boxplot.png?v=1729765710\" alt=\"Box Plot+ Product Icon\" class=\"product-hero-icon\"\u003e\n\u003cp class=\"product-subtitle-tag\"\u003ePI Vision Custom Symbol\u003c\/p\u003e\n\u003ch1\u003eStatistical Analysis with Box Plots in PI Vision\u003c\/h1\u003e\n\u003cp class=\"product-description\"\u003eGo beyond averages. Box Plot+ is an advanced symbol that lets you analyze data distribution, identify outliers, and compare process variability directly within your PI Vision dashboards.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 2. FEATURES SECTION --\u003e\n\u003csection class=\"product-features-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eGo Beyond Averages, Understand the Full Story\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-grid-three-col\"\u003e\n\u003cdiv class=\"features-column\"\u003e\n\u003ch3\u003eAdvanced Statistical Analysis\u003c\/h3\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eData Distribution at a Glance:\u003c\/strong\u003e Instantly visualize the median, quartiles, and range of your process data.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eOutlier Detection:\u003c\/strong\u003e Easily identify anomalies that fall outside the standard whiskers of the plot.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eConfigurable Intervals:\u003c\/strong\u003e Adapt the calculation interval for your analysis or let the chart adjust automatically.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-column\"\u003e\n\u003ch3\u003eComprehensive Visualization\u003c\/h3\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eMultiple Data Sources:\u003c\/strong\u003e Display and compare several attributes or PI points in the same chart.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eCombine Trace Types:\u003c\/strong\u003e Overlay box plots with area, line, or scatter charts to show metrics like averages or setpoints.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eMultistate Support:\u003c\/strong\u003e Highlight critical limits with dashed lines and color-coded indicators for quick insights.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-column\"\u003e\n\u003ch3\u003eTotal Configurability\u003c\/h3\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eComplete Styling Options:\u003c\/strong\u003e Customize every part of the chart, including colors, fonts, and layout.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eIntuitive Configuration:\u003c\/strong\u003e All settings are managed through a user-friendly panel—no coding needed.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eSeamless Integration:\u003c\/strong\u003e Designed to work perfectly within the PI Vision environment you already use.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 3. USE CASES SECTION --\u003e\n\u003csection class=\"use-cases-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eMake Data-Driven Decisions with Confidence\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-cases-grid\"\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg class=\"icon\" xmlns=\"http:\/\/www.w.3.org\/2000\/svg\" viewbox=\"0 0 24 24\" fill=\"currentColor\"\u003e\u003cpath d=\"M4 10h3v7H4zM10.5 10h3v7h-3zM17 10h3v7h-3zM22 6H2V4h20v2z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eBatch \u0026amp; Lot Comparison\u003c\/h3\u003e\n\u003cp\u003eAnalyze variability between production batches to ensure consistent quality and identify process deviations.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg class=\"icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" fill=\"currentColor\"\u003e\u003cpath d=\"M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-1 14H5V8h6v7zm2 0v-7h6v7h-6z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eEquipment Performance\u003c\/h3\u003e\n\u003cp\u003eCompare the performance distribution of similar assets (pumps, turbines, etc.) to find outliers.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg class=\"icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" fill=\"currentColor\"\u003e\u003cpath d=\"M3.5 18.49l6-6.01 4 4L22 6.92l-1.41-1.41-7.09 7.97-4-4L2 16.99l1.5 1.5z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eQuality Control \u0026amp; SPC\u003c\/h3\u003e\n\u003cp\u003eMonitor key quality parameters against statistical limits to maintain high standards and reduce waste.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg class=\"icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" fill=\"currentColor\"\u003e\u003cpath d=\"M11 17h2v-6h-2v6zm1-15C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zM11 9h2V7h-2v2z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eProcess Troubleshooting\u003c\/h3\u003e\n\u003cp\u003eQuickly identify unusual data distributions or outliers that could indicate a process issue.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 4. SCREENSHOTS SECTION --\u003e\n\u003csection class=\"screenshots-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eVisualize Your Data with Unprecedented Clarity\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshots-grid\"\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-custom-symbol-boxplot-multiple.png?v=1729765711\" alt=\"A PI Vision Box Plot comparing multiple data sources on a single chart.\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eMultiple Data Sources\u003c\/h4\u003e\n\u003cp\u003eVisualize multiple attributes and PI points side-by-side.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-custom-symbol-boxplot-combine.png?v=1729765711\" alt=\"A Box Plot in PI Vision combined with a line chart showing an average.\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eCombine Trace Types\u003c\/h4\u003e\n\u003cp\u003eOverlay box plots with line, scatter, or area charts for deeper context.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-custom-symbol-boxplot-multistate.png?v=1729765711\" alt=\"A PI Vision box plot with multistate coloring and dashed limit lines.\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eMultistate Support\u003c\/h4\u003e\n\u003cp\u003eUse dashed lines and color-coded indicators to highlight critical limits.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-custom-symbol-boxplot-configure-interval.png?v=1729765712\" alt=\"The configuration panel for the Box Plot+ symbol showing interval settings.\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eConfigurable Interval\u003c\/h4\u003e\n\u003cp\u003eAdjust calculation intervals for precise, time-based analysis.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-custom-symbol-boxplot-style.png?v=1729766417\" alt=\"The styling options panel for the Box Plot+ custom symbol in PI Vision.\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eComplete Styling Options\u003c\/h4\u003e\n\u003cp\u003eCustomize every element of the chart to match your dashboard's design.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 5. DEMO VIDEO SECTION --\u003e\n\u003csection class=\"demo-video-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eSee Box Plot+ in Action\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"video-card\"\u003e\n\u003cdiv class=\"video-wrapper\"\u003e\u003cvideo preload=\"metadata\" controls=\"controls\"\u003e\n        \u003csource src=\"https:\/\/cdn.shopify.com\/videos\/c\/o\/v\/df19139cc0e74a55a4640c6bc94ae6da.mp4\" type=\"video\/mp4\"\u003e\n        Your browser does not support the video tag.\n      \u003c\/source\u003e\u003c\/video\u003e\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003cstyle\u003e\n  \/* --- GENERAL SECTION STYLES --- *\/\n  .section-header {\n    display: flex; flex-direction: column; align-items: center; text-align: center;\n    max-width: 800px; margin: 0 auto 3.5rem auto;\n  }\n  .section-header h2 {\n    color: #111; margin-bottom: 1rem; font-size: 1.8rem;\n  }\n  .section-header p {\n    color: #333; line-height: 1.7; font-size: 1rem;\n  }\n  .feature-list {\n    list-style: none; padding: 0; margin: 0;\n  }\n  .feature-list li {\n    position: relative; padding-left: 30px; margin-bottom: 1.25rem;\n    line-height: 1.6; color: #333;\n  }\n  .feature-list li::before {\n    content: '✔'; position: absolute; left: 0; top: 2px;\n    color: #3F72E5; font-size: 1.2rem;\n  }\n  .feature-list li strong {\n    color: #111; font-weight: 600;\n  }\n\n  \/* --- 1. HERO SECTION --- *\/\n  .product-hero-section {\n    padding: 5rem 1rem; text-align: center;\n  }\n  .product-hero-container {\n      max-width: 700px; margin: 0 auto;\n  }\n  .product-hero-icon {\n      width: 100px; height: auto; margin-bottom: 2rem;\n  }\n  .product-subtitle-tag {\n    color: #3F72E5; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.5px;\n  }\n  h1 {\n    font-size: 2.5rem; margin-bottom: 1.5rem;\n  }\n  .product-description {\n    line-height: 1.7; font-size: 1.1rem; color: #333;\n  }\n\n  \/* --- 2. FEATURES SECTION --- *\/\n  .product-features-section {\n    padding: 4rem 1rem; background-color: #f9fafb;\n  }\n  .features-grid-three-col {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    gap: 2.5rem;\n    max-width: 1200px; margin: 0 auto;\n  }\n  .features-column h3 {\n    font-size: 1.3rem; margin-bottom: 1.5rem; color: #111;\n  }\n \n  \/* --- 3. USE CASES SECTION --- *\/\n  .use-cases-section {\n    padding: 4rem 1rem;\n  }\n  .use-cases-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n    gap: 2rem;\n    max-width: 1200px; margin: 0 auto;\n  }\n  .use-case-card {\n    background: white; border-radius: 20px; padding: 2rem; text-align: center;\n    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);\n  }\n  .use-case-card .icon {\n    width: 40px; height: 40px; color: #3F72E5; margin-bottom: 1rem;\n  }\n  .use-case-card h3 {\n    font-size: 1.2rem; color: #111; margin-bottom: 0.5rem;\n  }\n  .use-case-card p {\n    color: #333; font-size: 0.9rem; line-height: 1.6;\n  }\n\n  \/* --- 4. SCREENSHOTS SECTION --- *\/\n  .screenshots-section {\n    padding: 4rem 1rem; background-color: #f9fafb;\n  }\n  .screenshots-grid {\n    display: grid;\n    grid-template-columns: 1fr; \/* Single column on mobile by default *\/\n    gap: 2rem;\n    max-width: 1200px; margin: 0 auto;\n  }\n  .screenshot-card {\n    background: white; border-radius: 20px;\n    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);\n    overflow: hidden;\n  }\n  .screenshot-card img {\n    width: 100%; height: auto; display: block;\n  }\n  .screenshot-card-content {\n    padding: 1.5rem;\n  }\n  .screenshot-card-content h4 {\n    font-size: 1.2rem; margin: 0 0 0.5rem 0; color: #111;\n  }\n  .screenshot-card-content p {\n    font-size: 0.95rem; color: #333; line-height: 1.6; margin: 0;\n  }\n \n  \/* --- 5. DEMO VIDEO SECTION --- *\/\n  .demo-video-section {\n    padding: 4rem 1rem;\n  }\n  .video-card {\n    max-width: 1000px; margin: 0 auto; border-radius: 20px;\n    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);\n    overflow: hidden;\n  }\n  .video-wrapper {\n    position: relative; padding-bottom: 56.25%; height: 0;\n  }\n  .video-wrapper video {\n    position: absolute; top: 0; left: 0; width: 100%; height: 100%;\n  }\n\n  \/* --- RESPONSIVE STYLES --- *\/\n  @media (min-width: 750px) {\n    .screenshots-grid {\n        grid-template-columns: 1fr 1fr; \/* Two columns for tablets and desktops *\/\n    }\n  }\n  @media (max-width: 990px) {\n    .features-grid-three-col {\n        grid-template-columns: 1fr;\n    }\n  }\n\u003c\/style\u003e\n\u003c!-- END: Redesigned Product Page --\u003e","brand":"Software Athlete","offers":[{"title":"Default Title","offer_id":50649124241734,"sku":null,"price":2000.0,"currency_code":"EUR","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-custom-symbol-boxplot-square.png?v=1729766671"},{"product_id":"asset-comparison-bar-chart","title":"Asset Comparison Bar Chart+","description":"\u003cp\u003e \u003c\/p\u003e\n\u003cstyle\u003e\n        body {\n            font-family: Arial, sans-serif;\n            line-height: 1.6;\n            color: #333;\n            margin: 0;\n            padding: 0;\n            background-color: #f9f9f9;\n        }\n        .container {\n            width: 90%;\n            max-width: 1200px;\n            margin: auto;\n            padding: 20px;\n            background-color: #fff;\n        }\n        .product-title {\n            text-align: center;\n            font-size: 3em;\n            font-weight: bold;\n            margin: 20px 0 50px;\n        }\n        .header-icon {\n            display: block;\n            margin: 0 auto 30px;\n            width: 90px;\n            height: auto;\n        }\n        .feature-list, .benefits-list, .use-cases-list {\n            list-style: disc;\n            padding-left: 20px;\n        }\n        .screenshots {\n            display: grid;\n            grid-template-columns: 1fr 1fr;\n            gap: 20px;\n        }\n        .screenshot-item {\n            background-color: #f1f1f1;\n            padding: 15px;\n            border-radius: 8px;\n        }\n        .screenshot-item img {\n            width: auto;\n            max-width: 100%;\n            height: auto;\n            max-height: 500px;\n            border-radius: 4px;\n        }\n        .screenshot-item h4 {\n            margin-top: 10px;\n            font-size: 1.1em;\n            color: #555;\n        }\n        .video-container {\n            position: relative;\n            padding-bottom: 56.25%;\n            height: 0;\n            overflow: hidden;\n            margin-top: 20px;\n        }\n        .video-container video {\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n        }\n        .section {\n            margin: 40px 0;\n            border-bottom: 2px solid #ddd;\n            padding-bottom: 20px;\n        }\n        .section h2 {\n            text-align: left;\n            font-size: 1.8em;\n            margin-bottom: 10px;\n        }\n        a {\n            color: #007BFF;\n            text-decoration: none;\n        }\n        a:hover {\n            text-decoration: underline;\n        }\n        @media (max-width: 600px) {\n            .screenshots {\n                grid-template-columns: 1fr;\n            }\n        }\n    \u003c\/style\u003e\n\u003cdiv style=\"text-align: center;\"\u003e\u003cimg style=\"margin-bottom: 16px; float: none;\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/icon2_b200a5f1-43bf-4283-a67b-e4db3d10d4e7_160x160.png?v=1736334467\"\u003e\u003c\/div\u003e\n\u003ch1 class=\"product-title\"\u003eAsset Comparison Bar Chart+\u003c\/h1\u003e\n\u003cdiv class=\"container\"\u003e\n\u003c!-- Product Description --\u003e\n\u003cdiv class=\"section\"\u003e\n\u003cp\u003e\u003cstrong\u003eAsset Comparison Bar Chart+\u003c\/strong\u003e is a custom symbol for PI Vision that allows you to visualize and compare data of different assets in a bar chart. This versatile symbol is part of the \u003ca href=\"https:\/\/www.software-athlete.com\/pages\/vision-library-plus-best-custom-symbols-aveva-pi-vision\"\u003eVision Library+\u003c\/a\u003e Symbol Package.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c!-- Features --\u003e\n\u003cdiv class=\"section\"\u003e\n\u003ch2\u003eFeatures\u003c\/h2\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eAsset Comparison:\u003c\/strong\u003e Compare data of different Assets to each other\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eDynamic Search Criteria:\u003c\/strong\u003e Dynamically filter assets by customizing the asset search criteria.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eStacking:\u003c\/strong\u003e Create normal and 100% stacked bar charts.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eMultistate Visualization:\u003c\/strong\u003e Use multistate features to highlight key thresholds or limits.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eTop Calculation:\u003c\/strong\u003e Show the Top N assets (for example, top ten best performing assets).\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eOrientation:\u003c\/strong\u003e Choose between horizontal and vertical orientation.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eAxes: \u003c\/strong\u003eConfigure Multiple X and Y Axes\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003c!-- Benefits Section --\u003e\n\u003cdiv class=\"section\"\u003e\n\u003ch2\u003eBenefits\u003c\/h2\u003e\n\u003cul class=\"benefits-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eImproved Visualization: \u003c\/strong\u003eCompared to the default Asset Comparison Table, this symbol is much easier to read and looks more modern\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003c!-- Example Use Cases --\u003e\n\u003cdiv class=\"section\"\u003e\n\u003ch2\u003eExample Use Cases\u003c\/h2\u003e\n\u003cul class=\"use-cases-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eProduction Monitoring:\u003c\/strong\u003e Compare actual vs. projected production values in real-time.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eResource Allocation:\u003c\/strong\u003e Visualize resource usage trends with combined metrics.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eQuality Assurance:\u003c\/strong\u003e Analyze performance metrics against established benchmarks.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003c!-- Screenshots Section --\u003e\n\u003cdiv class=\"section\"\u003e\n\u003ch2\u003eScreenshots\u003c\/h2\u003e\n\u003cdiv class=\"screenshots\"\u003e\n\u003cdiv class=\"screenshot-item\" style=\"text-align: start;\"\u003e\n\u003cimg\u003e\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-custom-symbol-asset-comparison-bar-chart-3.png?v=1736338380\" alt=\"PI Vision Bar Chart Widget\" style=\"margin-bottom: 16px; float: none;\"\u003e\u003cbr\u003e\n\u003ch4\u003eCompare Assets\u003c\/h4\u003e\n\u003cp\u003eCompare data of multiple assets in a single chart. \u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-item\" style=\"text-align: start;\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-custom-symbol-asset-comparison-bar-chart-2.png?v=1736334467\" alt=\"PI Vision Stacked Bar Chart Widget\" style=\"margin-bottom: 16px; float: none;\"\u003e\u003cbr\u003e\n\u003ch4\u003eMultiple Attributes\u003c\/h4\u003e\n\u003cp\u003eSupports comparing multiple attributes of different assets.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-item\" style=\"text-align: start;\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-custom-symbol-asset-comparison-bar-chart-vertical.png?v=1736334467\" alt=\"PI Vision Bar Chart Widget\" style=\"margin-bottom: 16px; float: none;\"\u003e\u003cbr\u003e\n\u003ch4\u003eStacked Bar Charts\u003c\/h4\u003e\n\u003cp\u003eCreate stacked bar charts by combining multiple attributes together.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-item\" style=\"text-align: start;\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-custom-symbol-asset-comparison-bar-chart-horizontal-2.png?v=1736334468\" alt=\"PI Vision Bar Chart Widget\" style=\"margin-bottom: 16px; float: none;\"\u003e\u003cbr\u003e\n\u003ch4\u003eHorizontal Alignment\u003c\/h4\u003e\n\u003cp\u003eAlign the chart horizontally or vertically.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-item\" style=\"text-align: start;\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-custom-symbol-asset-comparison-bar-chart-attribute-mode.png?v=1736334468\" alt=\"PI Vision Bar Chart Widget\" style=\"margin-bottom: 16px; float: none;\"\u003e\u003cbr\u003e\n\u003ch4\u003eSwitch Series\u003c\/h4\u003e\n\u003cp\u003eSwitch your categories to show either Assets or Attributes\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-item\" style=\"text-align: start;\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-custom-symbol-asset-comparison-bar-chart-oee.png?v=1736347635\" alt=\"PI Vision Bar Chart Custom Symbol\" style=\"margin-bottom: 16px; float: none;\"\u003e\u003cbr\u003e\n\u003ch4\u003eFully customizable\u003c\/h4\u003e\n\u003cp\u003eCustomize everything\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-item\" style=\"text-align: start;\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-custom-symbol-asset-comparison-bar-chart-top-n.png?v=1736334467\" alt=\"PI Vision Bar Chart Custom Widget\" style=\"margin-bottom: 16px; float: none;\"\u003e\u003cbr\u003e\n\u003ch4\u003eTop N Calculation\u003c\/h4\u003e\n\u003cp\u003eShow only the top 10 assets meeting a certain condition\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-item\" style=\"text-align: start;\"\u003e\n\u003cimg alt=\"PI Vision Bar Chart Custom Widget\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-custom-symbol-asset-comparison-bar-chart-100.png?v=1736338599\" style=\"margin-bottom: 16px; float: none;\"\u003e\u003cbr\u003e\n\u003ch4\u003e100% Stacked Bar\u003c\/h4\u003e\n\u003cp\u003eCreate a 100% stacked bar chart\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c!-- Demo Video Section --\u003e\n\u003cdiv class=\"section\"\u003e\n\u003ch2\u003eDemo\u003c\/h2\u003e\n\u003cdiv class=\"video-container\"\u003e\u003cvideo controls=\"controls\"\u003e\n                    \u003csource src=\"https:\/\/cdn.shopify.com\/videos\/c\/o\/v\/2b275f740cb74cd38441b1e9f3d5a7bd.mp4\" type=\"video\/mp4\"\u003e\n                    Your browser does not support the video tag.\n                \u003c\/source\u003e\u003c\/video\u003e\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e","brand":"Software Athlete","offers":[{"title":"Default Title","offer_id":53941762392390,"sku":null,"price":2000.0,"currency_code":"EUR","in_stock":false}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/aveva-pi-vision-custom-symbol-combo-chart-thumbnail.png?v=1720763374"},{"product_id":"map","title":"Map+","description":"\u003cp\u003e \u003c\/p\u003e\n\u003cstyle\u003e\n        body {\n            font-family: Arial, sans-serif;\n            line-height: 1.6;\n            color: #333;\n            margin: 0;\n            padding: 0;\n            background-color: #f9f9f9;\n        }\n        .container {\n            width: 90%;\n            max-width: 1200px;\n            margin: auto;\n            padding: 20px;\n            background-color: #fff;\n        }\n        .product-title {\n            text-align: center;\n            font-size: 3em;\n            font-weight: bold;\n            margin: 20px 0 50px;\n        }\n        .header-icon {\n            display: block;\n            margin: 0 auto 30px;\n            width: 90px;\n            height: auto;\n        }\n        .feature-list, .benefits-list, .use-cases-list {\n            list-style: disc;\n            padding-left: 20px;\n        }\n        .screenshots {\n            display: grid;\n            grid-template-columns: 1fr 1fr;\n            gap: 20px;\n        }\n        .screenshot-item {\n            background-color: #f1f1f1;\n            padding: 15px;\n            border-radius: 8px;\n        }\n        .screenshot-item img {\n            width: auto;\n            max-width: 100%;\n            height: auto;\n            max-height: 500px;\n            border-radius: 4px;\n        }\n        .screenshot-item h4 {\n            margin-top: 10px;\n            font-size: 1.1em;\n            color: #555;\n        }\n        .video-container {\n            position: relative;\n            padding-bottom: 56.25%;\n            height: 0;\n            overflow: hidden;\n            margin-top: 20px;\n        }\n        .video-container video {\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n        }\n        .section {\n            margin: 40px 0;\n            border-bottom: 2px solid #ddd;\n            padding-bottom: 20px;\n        }\n        .section h2 {\n            text-align: left;\n            font-size: 1.8em;\n            margin-bottom: 10px;\n        }\n        a {\n            color: #007BFF;\n            text-decoration: none;\n        }\n        a:hover {\n            text-decoration: underline;\n        }\n        @media (max-width: 600px) {\n            .screenshots {\n                grid-template-columns: 1fr;\n            }\n        }\n    \u003c\/style\u003e\n\u003cdiv style=\"text-align: center;\"\u003e\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/map-icon-pv.png?v=1740132251\" alt=\"\"\u003e\u003c\/div\u003e\n\u003ch1 class=\"product-title\"\u003eMap+\u003c\/h1\u003e\n\u003cdiv class=\"container\"\u003e\n\u003c!-- Product Description --\u003e\n\u003cdiv class=\"section\"\u003e\n\u003cp\u003e\u003cstrong\u003eMap+\u003c\/strong\u003e is a custom widget for PI Vision that display an interactive map using OpenStreetMaps map data, to display process data on top. The symbol is part of the \u003ca href=\"https:\/\/www.software-athlete.com\/pages\/vision-library-plus-best-custom-symbols-aveva-pi-vision\"\u003eVision Library+\u003c\/a\u003e Symbol Package.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c!-- Features --\u003e\n\u003cdiv class=\"section\"\u003e\n\u003ch2\u003eFeatures\u003c\/h2\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eDifferent Map Providers: \u003c\/strong\u003eChoose between a number of different online map providers, like OpenStreetMap or others.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eAsset Comparison:\u003c\/strong\u003e Compare data of different Assets to each other\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eDynamic Search Criteria:\u003c\/strong\u003e Dynamically filter assets by customizing the asset search criteria.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eClustering:\u003c\/strong\u003e Automatically cluster similar data points together.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eMultistate Visualization:\u003c\/strong\u003e Use multistate features to highlight key thresholds or limits.\u003c\/li\u003e\n\u003cli\u003e\n\u003cb\u003eDifferent Marker Types: \u003c\/b\u003eShow dots, pins, rectangles or more.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eLines:\u003c\/strong\u003e Draw lines between your assets to visualize power lines or pipelines.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eMap Files: \u003c\/strong\u003eUpload .kml or .gpx file to display static map data\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eTooltips:\u003c\/strong\u003e Show a tooltip when hovering over a value\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eSet Asset Context: \u003c\/strong\u003eChange asset context or open another display when clicking on a data point\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003c!-- Benefits Section --\u003e\n\u003cdiv class=\"section\"\u003e\n\u003ch2\u003eBenefits\u003c\/h2\u003e\n\u003cul class=\"benefits-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eInteractivity: \u003c\/strong\u003eThe map is fully interactive, users can scroll, zoom or drag the map to highlight specific areas of interest.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003c!-- Example Use Cases --\u003e\n\u003cdiv class=\"section\"\u003e\n\u003ch2\u003eExample Use Cases\u003c\/h2\u003e\n\u003cul class=\"use-cases-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eProduction Monitoring:\u003c\/strong\u003e Compare live data of different production sites to one another\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eVisualize Pipelines or Powerlines:\u003c\/strong\u003e Use the line feature to draw interactive lines for showing live flow or power data on a line.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003c!-- Screenshots Section --\u003e\n\u003cdiv class=\"section\"\u003e\n\u003ch2\u003eScreenshots\u003c\/h2\u003e\n\u003cdiv class=\"screenshots\"\u003e\n\u003cdiv class=\"screenshot-item\"\u003e\n\u003cimg\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-custom-symbol-map-2.png?v=1740408138\"\u003e\u003cbr\u003e\n\u003ch4\u003eShow Live data\u003c\/h4\u003e\n\u003cp\u003eShow your live process data on an interactive map\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-item\"\u003e\n\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-custom-symbol-map-drilldown-1.png?v=1740142587\"\u003e\u003cbr\u003e\n\u003ch4\u003ePie Charts\u003c\/h4\u003e\n\u003cp\u003eShow Pie Charts or dot plots\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-item\"\u003e\n\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-custom-symbol-map-flashing-2.png?v=1740142623\"\u003e\u003cbr\u003e\n\u003ch4\u003eMultistating\u003c\/h4\u003e\n\u003cp\u003eUse multistate colors or flashing animations to show critical data\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-item\"\u003e\n\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-custom-symbol-map-cluster-points.png?v=1740142664\"\u003e\u003cbr\u003e\n\u003ch4\u003eAuto Clustering\u003c\/h4\u003e\n\u003cp\u003eAutomatically cluster close dots and calculate statistics\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-item\"\u003e\n\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-custom-symbol-map-lines-2.png?v=1740142697\"\u003e\u003cbr\u003e\n\u003ch4\u003eLines\u003c\/h4\u003e\n\u003cp\u003eDraw lines like powerlines or pipelines with live data\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-item\"\u003e\n\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-custom-symbol-map-lines.png?v=1740142739\"\u003e\u003cbr\u003e\n\u003ch4\u003eDisplay custom map data\u003c\/h4\u003e\n\u003cp\u003eUpload your .gpx or .kml files to display your static data on the map\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-item\"\u003e\n\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-custom-symbol-map-satellite.png?v=1740142793\"\u003e\u003cbr\u003e\n\u003ch4\u003eDifferent Map Providers\u003c\/h4\u003e\n\u003cp\u003eChoose between a range of different map data providers, like OpenStreetMap and many more.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-item\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-custom-symbol-map-tooltip.png?v=1740144875\" alt=\"\"\u003e\u003cbr\u003e\n\u003ch4\u003eTooltips\u003c\/h4\u003e\n\u003cp\u003eShow tooltips when hovering over a value\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c!-- Demo Video Section --\u003e\n\u003cdiv class=\"section\"\u003e\n\u003ch2\u003eDemo\u003c\/h2\u003e\n\u003ciframe width=\"1120\" height=\"600\" src=\"https:\/\/www.youtube.com\/embed\/cUSuXgk4piw?si=68NTkM1ploLhDPCY\" title=\"YouTube video player\"\u003e\u003c\/iframe\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e","brand":"Software Athlete","offers":[{"title":"Default Title","offer_id":54155764302150,"sku":null,"price":0.0,"currency_code":"EUR","in_stock":false}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/map-thumbnail.png?v=1740132455"},{"product_id":"pi-vision-custom-symbol-asset-select","title":"Asset Select","description":"\u003c!-- START: Redesigned Product Page for Asset Select+ --\u003e\n\u003cp\u003e \u003c\/p\u003e\n\u003c!-- 1. HERO SECTION --\u003e\n\u003csection class=\"product-hero-section\"\u003e\n\u003cdiv class=\"product-hero-container\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/assetselect2.png?v=1749898649\" alt=\"Asset Select+ Product Icon\" class=\"product-hero-icon\"\u003e\n\u003cp class=\"product-subtitle-tag\"\u003ePI Vision Custom Symbol\u003c\/p\u003e\n\u003ch1\u003eUnlock Dynamic Asset Navigation in PI Vision\u003c\/h1\u003e\n\u003cp class=\"product-description\"\u003eGo beyond the static asset list. Asset Select+ transforms how you navigate your AF hierarchy, providing dynamic search, tree views, and real-time data in one powerful control.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 2. FEATURES SECTION --\u003e\n\u003csection class=\"product-features-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eThe Asset Selector PI Vision Should Have Had\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-grid-three-col\"\u003e\n\u003cdiv class=\"features-column\"\u003e\n\u003ch3\u003ePowerful Asset Discovery\u003c\/h3\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eDynamic Search:\u003c\/strong\u003e Populate the list using search filters like AF database, asset type, and categories.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eTree \u0026amp; List Views:\u003c\/strong\u003e Display assets in a familiar hierarchical tree with expandable nodes or a simple flat list.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eLive Search \u0026amp; Filtering:\u003c\/strong\u003e Instantly filter the list as you type, with support for wildcards (*).\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eConfigurable Sorting:\u003c\/strong\u003e Sort assets by name or any real-time attribute value, ascending or descending.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-column\"\u003e\n\u003ch3\u003eRich Contextual Data\u003c\/h3\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eDisplay Real-Time Data:\u003c\/strong\u003e Show key attribute values directly next to each asset in the list for at-a-glance context.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eApply Multistate Coloring:\u003c\/strong\u003e Instantly identify asset status by applying color rules to values or the entire asset row.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eCustomizable Headers:\u003c\/strong\u003e Configure the header to show a static title or dynamically display the currently selected asset.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-column\"\u003e\n\u003ch3\u003eFlexible \u0026amp; Customizable UI\u003c\/h3\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eCollapsible or Static:\u003c\/strong\u003e Choose between an expandable side-panel or an always-visible, static list.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eUser-Friendly Interface:\u003c\/strong\u003e Designed for intuitive operation, allowing any user to easily find the asset they need.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eSimple Configuration:\u003c\/strong\u003e All features are managed through an easy-to-use panel directly within PI Vision.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 3. USE CASES SECTION --\u003e\n\u003csection class=\"use-cases-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eBuild Smarter, More Flexible Dashboards\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-cases-grid\"\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg class=\"icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" fill=\"currentColor\"\u003e\u003cpath d=\"M21 3H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h5v2h8v-2h5c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 14H3V5h18v12z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eDynamic Equipment Displays\u003c\/h3\u003e\n\u003cp\u003eCreate a single, powerful display where operators can instantly switch the context between different pumps, motors, or production lines.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg class=\"icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" fill=\"currentColor\"\u003e\u003cpath d=\"M4 10h3v7H4zM10.5 10h3v7h-3zM17 10h3v7h-3zM22 6H2V4h20v2z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eFleet-Wide Benchmarking\u003c\/h3\u003e\n\u003cp\u003eUse dynamic search to populate a list of all assets of a certain type, then sort by a KPI to identify top and bottom performers.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg class=\"icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" fill=\"currentColor\"\u003e\u003cpath d=\"M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eHierarchical Navigation\u003c\/h3\u003e\n\u003cp\u003eAllow users to easily navigate large and complex AF hierarchies using the intuitive, expandable tree view.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg class=\"icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" fill=\"currentColor\"\u003e\u003cpath d=\"M17 7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h10c2.76 0 5-2.24 5-5s-2.24-5-5-5zm-5 8c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eCreating Reusable Templates\u003c\/h3\u003e\n\u003cp\u003eBuild a single template display and use dynamic search to automatically populate it with the correct assets based on URL parameters.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 4. SCREENSHOTS SECTION --\u003e\n\u003csection class=\"screenshots-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eFind and Visualize Your Assets with Ease\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshots-grid\"\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-asset-select_83587d67-82ab-4f81-808e-8862751a9156.png?v=1749899216\" alt=\"An expandable asset tree view in PI Vision with real-time data and multistate logic.\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eHierarchical Tree View\u003c\/h4\u003e\n\u003cp\u003eDisplay your assets in a familiar, collapsible tree view with real-time attribute values and multistate coloring.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-asset-select-multistate-asset-sort.png?v=1749899236\" alt=\"A static list of assets in PI Vision with sorting and search enabled.\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eStatic List View\u003c\/h4\u003e\n\u003cp\u003eUse a static, always-visible list of assets and empower users with powerful sorting and live search capabilities.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-asset-select-dynamic-search.png?v=1749899429\" alt=\"The configuration panel for Asset Select+ showing dynamic search criteria.\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eDynamic Asset Search\u003c\/h4\u003e\n\u003cp\u003eAutomatically populate your asset list based on powerful criteria like AF database, asset type, template, or category.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-asset-select-description.png?v=1749899450\" alt=\"An asset list showing multistate colors applied to both the asset name and its value.\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eRich Multistate Display\u003c\/h4\u003e\n\u003cp\u003eApply conditional color rules to asset names or their attribute values for quick visual alerts and status checks.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 5. DEMO VIDEO SECTION --\u003e\n\u003csection class=\"demo-video-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eSee Asset Select+ in Action\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"video-card\"\u003e\n\u003cdiv class=\"video-wrapper\"\u003e\u003cvideo preload=\"metadata\" controls=\"controls\"\u003e\n        \u003csource src=\"https:\/\/cdn.shopify.com\/videos\/c\/o\/v\/1338cda9d58a452ab0dfd926c5324031.mp4\" type=\"video\/mp4\"\u003e\n        Your browser does not support the video tag.\n      \u003c\/source\u003e\u003c\/video\u003e\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003cstyle\u003e\n  \/* --- GENERAL SECTION STYLES --- *\/\n  .section-header {\n    display: flex; flex-direction: column; align-items: center; text-align: center;\n    max-width: 800px; margin: 0 auto 3.5rem auto;\n  }\n  .section-header h2 {\n    color: #111; margin-bottom: 1rem; font-size: 1.8rem;\n  }\n  .section-header p {\n    color: #333; line-height: 1.7; font-size: 1rem;\n  }\n  .feature-list {\n    list-style: none; padding: 0; margin: 0;\n  }\n  .feature-list li {\n    position: relative; padding-left: 30px; margin-bottom: 1.25rem;\n    line-height: 1.6; color: #333;\n  }\n  .feature-list li::before {\n    content: '✔'; position: absolute; left: 0; top: 2px;\n    color: #3F72E5; font-size: 1.2rem;\n  }\n  .feature-list li strong {\n    color: #111; font-weight: 600;\n  }\n\n  \/* --- 1. HERO SECTION --- *\/\n  .product-hero-section {\n    padding: 5rem 1rem; text-align: center;\n  }\n  .product-hero-container {\n      max-width: 700px; margin: 0 auto;\n  }\n  .product-hero-icon {\n      width: 80px; height: auto; margin-bottom: 2rem;\n  }\n  .product-subtitle-tag {\n    color: #3F72E5; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.5px;\n  }\n  h1 {\n    font-size: 2.5rem; margin-bottom: 1.5rem;\n  }\n  .product-description {\n    line-height: 1.7; font-size: 1.1rem; color: #333;\n  }\n\n  \/* --- 2. FEATURES SECTION --- *\/\n  .product-features-section {\n    padding: 4rem 1rem; background-color: #f9fafb;\n  }\n  .features-grid-three-col {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n    gap: 2.5rem;\n    max-width: 1200px; margin: 0 auto;\n  }\n  .features-column h3 {\n    font-size: 1.3rem; margin-bottom: 1.5rem; color: #111;\n  }\n \n  \/* --- 3. USE CASES SECTION --- *\/\n  .use-cases-section {\n    padding: 4rem 1rem;\n  }\n  .use-cases-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n    gap: 2rem;\n    max-width: 1200px; margin: 0 auto;\n  }\n  .use-case-card {\n    background: white; border-radius: 20px; padding: 2rem; text-align: center;\n    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);\n  }\n  .use-case-card .icon {\n    width: 40px; height: 40px; color: #3F72E5; margin-bottom: 1rem;\n  }\n  .use-case-card h3 {\n    font-size: 1.2rem; color: #111; margin-bottom: 0.5rem;\n  }\n  .use-case-card p {\n    color: #333; font-size: 0.9rem; line-height: 1.6;\n  }\n\n  \/* --- 4. SCREENSHOTS SECTION --- *\/\n  .screenshots-section {\n    padding: 4rem 1rem; background-color: #f9fafb;\n  }\n  .screenshots-grid {\n    display: grid;\n    grid-template-columns: 1fr; \/* Default to 1 column for mobile *\/\n    gap: 2rem;\n    max-width: 1200px; margin: 0 auto;\n  }\n  .screenshot-card {\n    background: white; border-radius: 20px;\n    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);\n    overflow: hidden;\n  }\n  .screenshot-card img {\n    width: 100%; height: auto; display: block; background-color: #f9fafb;\n  }\n  .screenshot-card-content {\n    padding: 1.5rem;\n  }\n  .screenshot-card-content h4 {\n    font-size: 1.2rem; margin: 0 0 0.5rem 0; color: #111;\n  }\n  .screenshot-card-content p {\n    font-size: 0.95rem; line-height: 1.6; color: #333; margin: 0;\n  }\n \n  \/* --- 5. DEMO VIDEO SECTION --- *\/\n  .demo-video-section {\n    padding: 4rem 1rem;\n  }\n  .video-card {\n    max-width: 1000px; margin: 0 auto; border-radius: 20px;\n    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);\n    overflow: hidden;\n  }\n  .video-wrapper {\n    position: relative; padding-bottom: 56.25%; height: 0;\n  }\n  .video-wrapper video {\n    position: absolute; top: 0; left: 0; width: 100%; height: 100%;\n  }\n\n  \/* --- RESPONSIVE STYLES --- *\/\n  @media (min-width: 750px) {\n    .screenshots-grid {\n      grid-template-columns: 1fr 1fr; \/* 2 columns for tablet and up *\/\n    }\n  }\n\u003c\/style\u003e\n\u003c!-- END: Redesigned Product Page --\u003e","brand":"Software Athlete","offers":[{"title":"Default Title","offer_id":54651909898566,"sku":null,"price":0.0,"currency_code":"EUR","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/thumbnail_asset-select_yt_485ac2f8-74f9-4084-a1d2-2b2a850ab078.png?v=1749899470"},{"product_id":"asset-comparison-table","title":"Asset Comparison Table+","description":"\u003c!-- START: Redesigned Product Page for Asset Comparison Table+ --\u003e\n\u003cp\u003e \u003c\/p\u003e\n\u003c!-- 1. HERO SECTION --\u003e\n\u003csection class=\"product-hero-section\"\u003e\n\u003cdiv class=\"product-hero-container\"\u003e\n\u003cimg class=\"product-hero-icon\" alt=\"Asset Comparison Table+ Product Icon\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/icon_1d58bdd6-09aa-4336-b2e2-06abf1d003f1.png?v=1755523269\"\u003e\n\u003cp class=\"product-subtitle-tag\"\u003ePI Vision Custom Symbol\u003c\/p\u003e\n\u003ch1\u003eThe Ultimate Asset Comparison Table for PI Vision\u003c\/h1\u003e\n\u003cp class=\"product-description\"\u003eGo beyond standard tables. Pivot, group, drill down, and compare AF Assets side-by-side with our powerful, interactive symbol that brings enterprise-level analysis directly into your dashboards.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 2. FEATURES SECTION --\u003e\n\u003csection class=\"product-features-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eAnalysis, Interaction, and Customization in One Table\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-grid-three-col\"\u003e\n\u003cdiv class=\"features-column\"\u003e\n\u003ch3\u003ePowerful Analysis\u003c\/h3\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003ePivot-Like Comparison:\u003c\/strong\u003e Arrange assets as rows or columns to benchmark performance across units, lines, or sites.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eHierarchy \u0026amp; Drilldown:\u003c\/strong\u003e Expand tree views to navigate from enterprise to unit level with collapsible groups.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eDynamic Grouping \u0026amp; Filtering:\u003c\/strong\u003e Group by any attribute and apply quick filters, search, and sorting to focus on what matters.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eConditional Formatting:\u003c\/strong\u003e Use multistate rules to highlight limits, statuses, and anomalies at a glance.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-column\"\u003e\n\u003ch3\u003eSeamless Interaction\u003c\/h3\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eInline Data Entry:\u003c\/strong\u003e Edit setpoints, targets, and comments directly in the table with optional validation.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eInstant Data Export:\u003c\/strong\u003e Download the current view or full dataset to Excel, CSV, or PDF with a single click.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eClient-Side Performance:\u003c\/strong\u003e All interactions, including exports, are handled in-browser for maximum speed.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-column\"\u003e\n\u003ch3\u003eBuilt for Scale\u003c\/h3\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eHigh-Performance Engine:\u003c\/strong\u003e Built with virtualized scrolling and paging to handle thousands of assets smoothly.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eCustom Themes:\u003c\/strong\u003e Match your dashboard with built-in light, dark, and custom accent color themes.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eCalculations \u0026amp; Rollups:\u003c\/strong\u003e Display column totals, subtotals, and calculated values for deeper insights.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 3. USE CASES SECTION --\u003e\n\u003csection class=\"use-cases-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eUnlock Deeper Insights Across Your Enterprise\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-cases-grid\"\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg fill=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"icon\"\u003e\u003cpath d=\"M16 6l2.29 2.29-4.88 4.88-4-4L2 16.59 3.41 18l6-6 4 4 6.3-6.29L22 12V6h-6z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003ePerformance Benchmarking\u003c\/h3\u003e\n\u003cp\u003eCompare production lines, units, or sites side-by-side to identify top performers and areas for improvement.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg fill=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"icon\"\u003e\u003cpath d=\"M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-1 14H5V8h6v7zm2 0v-7h6v7h-6z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eFleet-Wide Monitoring\u003c\/h3\u003e\n\u003cp\u003eGet a complete overview of your entire asset fleet in one table, with multistate coloring to highlight status.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg fill=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"icon\"\u003e\u003cpath d=\"M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 14h-8v-2h8v2zm0-4h-8v-2h8v2zm-3-5V3.5L18.5 9H13z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eOperational Reporting\u003c\/h3\u003e\n\u003cp\u003eBuild and export daily, weekly, or event-based reports for shifts, production summaries, and compliance.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg fill=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"icon\"\u003e\u003cpath d=\"M15.5 14h-.79l-.28-.27A6.471 6.471 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eRoot Cause Analysis\u003c\/h3\u003e\n\u003cp\u003eQuickly filter, sort, and drill down through asset hierarchies to pinpoint underperforming equipment.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 4. SCREENSHOTS SECTION --\u003e\n\u003csection class=\"screenshots-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eSee the Power and Flexibility\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshots-stack\"\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg alt=\"Asset Comparison Table+ showing transposed horizontal layout in PI Vision.\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-custom-symbol-asset-comparison-table-horizontal.png?v=1755522956\"\u003e\n\u003ch4\u003eTranspose Rows \u0026amp; Columns\u003c\/h4\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg alt=\"A PI Vision table with multistate and conditional formatting applied.\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-custom-symbol-asset-comparison-table-children.png?v=1755522956\"\u003e\n\u003ch4\u003eMultistate \u0026amp; Formatting\u003c\/h4\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg alt=\"Export to Excel, CSV, and PDF dialog in PI Vision.\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-custom-symbol-asset-comparison-table-export-pdf.png?v=1755522956\"\u003e\n\u003ch4\u003eExport to Excel, CSV, PDF\u003c\/h4\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg alt=\"An asset hierarchy with expandable child assets in PI Vision.\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-custom-symbol-asset-comparison-table-children-2.png?v=1755522956\"\u003e\n\u003ch4\u003eHierarchy \u0026amp; Child Assets\u003c\/h4\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg alt=\"A cell being edited in the Asset Comparison Table+ for data entry.\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-custom-symbol-asset-comparison-table-dataentry.png?v=1755522956\"\u003e\n\u003ch4\u003eInline Data Entry\u003c\/h4\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg alt=\"PI Vision custom symbol showing light and dark theme options.\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/aveva-pi-vision-custom-symbol-time-series-table_600x600.png?v=1721019714\"\u003e\n\u003ch4\u003eLight \u0026amp; Dark Themes\u003c\/h4\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg alt=\"Asset Comparison Table+ displaying grand totals and subtotals.\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-custom-symbol-asset-comparison-table-grand-totals.png?v=1755522956\"\u003e\n\u003ch4\u003eTotals \u0026amp; Rollups\u003c\/h4\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 5. DEMO VIDEO SECTION --\u003e\n\u003csection class=\"demo-video-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eWatch the 2-Minute Demo\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"video-card\"\u003e\n\u003cdiv class=\"video-wrapper\"\u003e\u003cvideo controls=\"controls\" preload=\"metadata\"\u003e\n        \u003csource type=\"video\/mp4\" src=\"https:\/\/cdn.shopify.com\/videos\/c\/o\/v\/fa2dea17b97e4b3f9c3ee37939a2b615.mp4\"\u003e\n        Your browser does not support the video tag.\n      \u003c\/source\u003e\u003c\/video\u003e\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003cstyle\u003e\n  \/* --- GENERAL SECTION STYLES --- *\/\n  .section-header {\n    display: flex; flex-direction: column; align-items: center; text-align: center;\n    max-width: 800px; margin: 0 auto 3.5rem auto;\n  }\n  .section-header h2 {\n    color: #111; margin-bottom: 1rem; font-size: 1.8rem;\n  }\n  .section-header p {\n    color: #333; line-height: 1.7; font-size: 1rem;\n  }\n  .feature-list {\n    list-style: none; padding: 0; margin: 0;\n  }\n  .feature-list li {\n    position: relative; padding-left: 30px; margin-bottom: 1.25rem;\n    line-height: 1.6; color: #333;\n  }\n  .feature-list li::before {\n    content: '✔'; position: absolute; left: 0; top: 2px;\n    color: #3F72E5; font-size: 1.2rem;\n  }\n  .feature-list li strong {\n    color: #111; font-weight: 600;\n  }\n\n  \/* --- 1. HERO SECTION --- *\/\n  .product-hero-section {\n    padding: 5rem 1rem; text-align: center;\n  }\n  .product-hero-container {\n      max-width: 700px; margin: 0 auto;\n  }\n  .product-hero-icon {\n      width: 100px; height: auto; margin-bottom: 2rem;\n  }\n  .product-subtitle-tag {\n    color: #3F72E5; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.5px;\n  }\n  h1 {\n    font-size: 2.5rem; margin-bottom: 1.5rem;\n  }\n  .product-description {\n    line-height: 1.7; font-size: 1.1rem; color: #333;\n  }\n\n  \/* --- 2. FEATURES SECTION --- *\/\n  .product-features-section {\n    padding: 4rem 1rem; background-color: #f9fafb;\n  }\n  .features-grid-three-col {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    gap: 2.5rem;\n    max-width: 1200px; margin: 0 auto;\n  }\n  .features-column h3 {\n    font-size: 1.3rem; margin-bottom: 1.5rem; color: #111;\n  }\n \n  \/* --- 3. USE CASES SECTION --- *\/\n  .use-cases-section {\n    padding: 4rem 1rem;\n  }\n  .use-cases-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n    gap: 2rem;\n    max-width: 1200px; margin: 0 auto;\n  }\n  .use-case-card {\n    background: white; border-radius: 20px; padding: 2rem; text-align: center;\n    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);\n  }\n  .use-case-card .icon {\n    width: 40px; height: 40px; color: #3F72E5; margin-bottom: 1rem;\n  }\n  .use-case-card h3 {\n    font-size: 1.2rem; color: #111; margin-bottom: 0.5rem;\n  }\n  .use-case-card p {\n    color: #333; font-size: 0.9rem; line-height: 1.6;\n  }\n\n  \/* --- 4. SCREENSHOTS SECTION --- *\/\n  .screenshots-section {\n    padding: 4rem 1rem; background-color: #f9fafb;\n  }\n  \/* Updated layout for vertical stacking *\/\n  .screenshots-stack {\n    display: flex;\n    flex-direction: column;\n    gap: 3.5rem;\n    max-width: 1000px;\n    margin: 0 auto;\n  }\n  .screenshot-card {\n    background: white; border-radius: 20px;\n    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);\n    overflow: hidden;\n  }\n  .screenshot-card img {\n    width: 100%; height: auto; display: block;\n  }\n  \/* Updated padding and font-size for larger layout *\/\n  .screenshot-card h4 {\n    padding: 2rem;\n    font-size: 1.4rem; \n    margin: 0; \n    color: #111;\n  }\n \n  \/* --- 5. DEMO VIDEO SECTION --- *\/\n  .demo-video-section {\n    padding: 4rem 1rem;\n  }\n  .video-card {\n    max-width: 1000px; margin: 0 auto; border-radius: 20px;\n    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);\n    overflow: hidden;\n  }\n  .video-wrapper {\n    position: relative; padding-bottom: 56.25%; height: 0;\n  }\n  .video-wrapper video {\n    position: absolute; top: 0; left: 0; width: 100%; height: 100%;\n  }\n\n  \/* --- RESPONSIVE STYLES --- *\/\n  @media (max-width: 990px) {\n    .features-grid-three-col {\n        grid-template-columns: 1fr;\n    }\n  }\n\u003c\/style\u003e\n\u003c!-- END: Redesigned Product Page --\u003e","brand":"Software Athlete","offers":[{"title":"Default Title","offer_id":54953023144262,"sku":"1","price":0.0,"currency_code":"EUR","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/icon_4d47ffa4-ade5-4a61-a5a0-2696a0271fd9.png?v=1782730647"},{"product_id":"radial-gauge-pi-vision-custom-symbol","title":"Radial Gauge+","description":"\u003c!-- START: Redesigned Product Page (Final) --\u003e\n\u003cp\u003e \u003c\/p\u003e\n\u003c!-- 1. HERO SECTION --\u003e\n\u003csection class=\"product-hero-section\"\u003e\n\u003cdiv class=\"product-hero-container\"\u003e\n\u003cimg class=\"product-hero-icon\" alt=\"Radial Gauge+ product icon\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/radialgauge.png?v=1759394778\"\u003e\n\u003cp class=\"product-subtitle-tag\"\u003ePI Vision Custom Symbol\u003c\/p\u003e\n\u003ch1\u003eRadial Gauge+\u003c\/h1\u003e\n\u003cp class=\"product-description\"\u003eTransform your process data with dynamic radial displays. Radial Gauge+ combines intuitive readability with powerful customization, helping you monitor critical values with precision and elegance.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 2. FEATURES SECTION --\u003e\n\u003csection class=\"product-features-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003ePowerful Features, Seamless Integration\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-container\"\u003e\n\u003cdiv class=\"features-list-column\"\u003e\n\u003ch3\u003eCore Functionality\u003c\/h3\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eCustomizable Scale:\u003c\/strong\u003e Adapt the gauge to fit specific ranges and units.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eReal-Time Data Display:\u003c\/strong\u003e Visualize live process data with immediate updates.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eMultiple Indicators:\u003c\/strong\u003e Display values with precision using needles, markers, and bars.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eAdjustable Gauge Angle:\u003c\/strong\u003e Create full circles, semi-circles, or custom arc ranges.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eEnhanced Readability:\u003c\/strong\u003e Clear tick marks and custom styles for improved visibility.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-description-column\"\u003e\n\u003ch3\u003eIntelligent Multistate Coloring\u003c\/h3\u003e\n\u003cp\u003eProvide instant visual feedback about your process. Define multiple color zones across the gauge to clearly indicate normal operating ranges, warning thresholds, and critical limits. This transforms raw numbers into actionable insights, helping operators spot issues at a glance.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 3. USE CASES SECTION --\u003e\n\u003csection class=\"use-cases-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eVersatile for Any Industry\u003c\/h2\u003e\n\u003cp\u003eIdeal for a wide range of process data visualization and dashboarding applications.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-cases-grid\"\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg fill=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"icon\"\u003e\u003cpath d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 14H9V8h2v8zm4 0h-2V8h2v8z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eKPI Dashboards\u003c\/h3\u003e\n\u003cp\u003eDisplay key performance indicators with clear visual thresholds for performance targets.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg fill=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"icon\"\u003e\u003cpath d=\"M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eProcess Monitoring\u003c\/h3\u003e\n\u003cp\u003eTrack critical variables like temperature, pressure, and flow rates with intuitive displays.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg fill=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"icon\"\u003e\u003cpath d=\"M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11v8.8z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eEquipment Health\u003c\/h3\u003e\n\u003cp\u003eMonitor metrics like vibration, temperatures, and utilization with color-coded health states.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg fill=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"icon\"\u003e\u003cpath d=\"M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5C21.27 7.61 17 4.5 12 4.5zm0 10c-2.48 0-4.5-2.02-4.5-4.5S9.52 5.5 12 5.5s4.5 2.02 4.5 4.5-2.02 4.5-4.5 4.5zm0-7C10.62 7.5 9.5 8.62 9.5 10s1.12 2.5 2.5 2.5 2.5-1.12 2.5-2.5-1.12-2.5-2.5-2.5z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eQuality Control\u003c\/h3\u003e\n\u003cp\u003eTrack quality metrics against specification limits with clear multistate ranges.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 4. SCREENSHOTS SECTION --\u003e\n\u003csection class=\"screenshots-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eCustomize Your View\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshots-grid\"\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg alt=\"Radial gauge with multistate color ranges\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-radial-gauge-ticks-multistate.png?v=1759395097\"\u003e\n\u003ch4\u003eMultistate Color Ranges\u003c\/h4\u003e\n\u003cp\u003eDefine ranges with color indicators for enhanced clarity.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg alt=\"Radial gauge with a custom arc angle\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-radial-gauge-bar-multistate.png?v=1759395097\"\u003e\n\u003ch4\u003eConfigurable Gauge Angles\u003c\/h4\u003e\n\u003cp\u003eAdjust the sweep angle to create the perfect arc for your display.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg alt=\"Radial gauge showing different value types\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-radial-gauge-bars-2.png?v=1759395097\"\u003e\n\u003ch4\u003eVersatile Value Types\u003c\/h4\u003e\n\u003cp\u003eShow bars, needles, or markers—or combine them together.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg alt=\"Radial gauge with multiple data source needles\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-radial-gauge-multiple-pointers.png?v=1759395097\"\u003e\n\u003ch4\u003eMultiple Data Sources\u003c\/h4\u003e\n\u003cp\u003eDisplay multiple values with distinct indicators on a single gauge.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg alt=\"Radial gauge showing custom styling\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-radial-gauge-bars_480x480.png?v=1759395097\"\u003e\n\u003ch4\u003eStyle It Your Way\u003c\/h4\u003e\n\u003cp\u003eCustomize styles, colors, and fonts to match your design.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg alt=\"Radial gauge with a full circle design\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-radial-gauge-circle-multistate.png?v=1759398123\"\u003e\n\u003ch4\u003eCustom Styling\u003c\/h4\u003e\n\u003cp\u003eAchieve the look and functionality that best suits your needs.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 5. DEMO VIDEO SECTION --\u003e\n\u003csection class=\"demo-video-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eSee It in Action\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"video-card\"\u003e\n\u003cdiv class=\"video-wrapper\"\u003e\u003cvideo controls=\"controls\" preload=\"metadata\"\u003e\n        \u003csource type=\"video\/mp4\" src=\"https:\/\/cdn.shopify.com\/videos\/c\/o\/v\/14a42a3f6d3640bbbe48fd3f016c8eeb.mp4\"\u003e\n        Your browser does not support the video tag.\n      \u003c\/source\u003e\u003c\/video\u003e\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003cstyle\u003e\n  \/* --- GENERAL SECTION STYLES (UPDATED) --- *\/\n  .section-header {\n    \/* THIS IS THE FIX: Using Flexbox for robust centering and stacking *\/\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    text-align: center; \n    \n    max-width: 800px;\n    margin: 0 auto 3.5rem auto;\n  }\n  .section-header h2 {\n    color: #111;\n    margin-bottom: 1rem;\n    font-size: 1.8rem;\n  }\n  .section-header p {\n    color: #333;\n    line-height: 1.7;\n    font-size: 1rem;\n  }\n  .feature-list {\n    list-style: none;\n    padding: 0;\n    margin: 0;\n  }\n  .feature-list li {\n    position: relative;\n    padding-left: 30px;\n    margin-bottom: 1.25rem;\n    line-height: 1.6;\n    color: #333;\n  }\n  .feature-list li::before {\n    content: '✔';\n    position: absolute;\n    left: 0;\n    top: 2px;\n    color: #3F72E5;\n    font-size: 1.2rem;\n  }\n  .feature-list li strong {\n    color: #111;\n    font-weight: 600;\n  }\n\n  \/* --- 1. HERO SECTION --- *\/\n  .product-hero-section {\n    padding: 5rem 1rem;\n    text-align: center;\n  }\n  .product-hero-container {\n      max-width: 700px;\n      margin: 0 auto;\n  }\n  .product-hero-icon {\n      width: 100px;\n      height: auto;\n      margin-bottom: 2rem;\n  }\n  .product-subtitle-tag {\n    color: #3F72E5; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.5px;\n  }\n  h1 {\n    font-size: 2.5rem; margin-bottom: 1.5rem;\n  }\n  .product-description {\n    line-height: 1.7;\n    font-size: 1.1rem;\n    color: #333;\n  }\n\n  \/* --- 2. FEATURES SECTION --- *\/\n  .product-features-section {\n    padding: 4rem 1rem;\n    background-color: #f9fafb;\n  }\n  .features-container {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 3rem;\n    max-width: 1100px;\n    margin: 0 auto;\n    align-items: start;\n  }\n  .features-list-column h3, .features-description-column h3 {\n    font-size: 1.3rem; margin-bottom: 1.5rem; color: #111;\n  }\n  .features-description-column p {\n    line-height: 1.7; color: #333;\n  }\n\n  \/* --- 3. USE CASES SECTION --- *\/\n  .use-cases-section {\n    padding: 4rem 1rem;\n  }\n  .use-cases-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n    gap: 2rem;\n    max-width: 1200px;\n    margin: 0 auto;\n  }\n  .use-case-card {\n    background: white;\n    border-radius: 20px;\n    padding: 2rem;\n    text-align: center;\n    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);\n  }\n  .use-case-card .icon {\n    width: 40px; height: 40px; color: #3F72E5; margin-bottom: 1rem;\n  }\n  .use-case-card h3 {\n    font-size: 1.2rem; color: #111; margin-bottom: 0.5rem;\n  }\n  .use-case-card p {\n    color: #333; font-size: 0.9rem; line-height: 1.6;\n  }\n\n  \/* --- 4. SCREENSHOTS SECTION --- *\/\n  .screenshots-section {\n    padding: 4rem 1rem;\n    background-color: #f9fafb;\n  }\n  .screenshots-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n    gap: 2rem;\n    max-width: 1200px;\n    margin: 0 auto;\n  }\n  .screenshot-card {\n    background: white;\n    border-radius: 20px;\n    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);\n    overflow: hidden;\n  }\n  .screenshot-card img {\n    width: 100%; height: auto; display: block;\n  }\n  .screenshot-card h4, .screenshot-card p {\n    padding: 0 1.5rem;\n  }\n  .screenshot-card h4 {\n    font-size: 1.1rem; margin: 0; padding-top: 1.25rem;\n  }\n   .screenshot-card p {\n    font-size: 0.9rem; color: #555; padding-bottom: 1.5rem;\n  }\n\n  \/* --- 5. DEMO VIDEO SECTION --- *\/\n  .demo-video-section {\n    padding: 4rem 1rem;\n  }\n  .video-card {\n    max-width: 1000px;\n    margin: 0 auto;\n    border-radius: 20px;\n    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);\n    overflow: hidden;\n  }\n  .video-wrapper {\n    position: relative;\n    padding-bottom: 56.25%; \/* 16:9 Aspect Ratio *\/\n    height: 0;\n  }\n  .video-wrapper video {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n  }\n\n  \/* --- RESPONSIVE STYLES --- *\/\n  @media (max-width: 900px) {\n    .features-container {\n      grid-template-columns: 1fr;\n    }\n  }\n\u003c\/style\u003e\n\u003c!-- END: Redesigned Product Page --\u003e","brand":"Software Athlete","offers":[{"title":"Default Title","offer_id":55189357723974,"sku":null,"price":0.0,"currency_code":"EUR","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/radialgauge.png?v=1759394778"},{"product_id":"pi-vision-event-analytics-chart","title":"Event Analyics Chart+","description":"\u003c!-- START: Redesigned Product Page for Event Analytics Chart+ --\u003e\n\u003cp\u003e \u003c\/p\u003e\n\u003c!-- 1. HERO SECTION --\u003e\n\u003csection class=\"product-hero-section\"\u003e\n\u003cdiv class=\"product-hero-container\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/eventschart2.png?v=1763107288\" alt=\"Event Analytics Chart+ Product Icon\" class=\"product-hero-icon\"\u003e\n\u003cp class=\"product-subtitle-tag\"\u003ePI Vision Custom Symbol\u003c\/p\u003e\n\u003ch1\u003eTransform Your Event Frames into Powerful Analytics Charts\u003c\/h1\u003e\n\u003cp class=\"product-description\"\u003eStop exporting, start analyzing. Event Analytics Chart+ aggregates, calculates, and visualizes your event frame data, turning raw events into actionable insights on downtime, losses, and performance.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 2. FEATURES SECTION --\u003e\n\u003csection class=\"product-features-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eStop Exporting, Start Analyzing\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-grid-three-col\"\u003e\n\u003cdiv class=\"features-column\"\u003e\n\u003ch3\u003ePowerful Aggregation Engine\u003c\/h3\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eCount Events:\u003c\/strong\u003e Count the occurrences of events based on type, reason code, or any other attribute.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eSum Durations \u0026amp; Attributes:\u003c\/strong\u003e Sum the total duration of downtime events or calculate the total production loss.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eCalculate Averages:\u003c\/strong\u003e Determine the average value of any numeric attribute across a set of events.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-column\"\u003e\n\u003ch3\u003eFlexible Charting Options\u003c\/h3\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eMultiple Chart Types:\u003c\/strong\u003e Visualize your aggregated data as a bar, line, or area chart to best suit your needs.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eStack Series:\u003c\/strong\u003e Stack bars to show the composition of your data, such as downtime by reason code per asset.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eMultistate \u0026amp; Limit Lines:\u003c\/strong\u003e Apply conditional coloring and display limit lines to highlight KPIs and targets.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-column\"\u003e\n\u003ch3\u003eInteractive Data Exploration\u003c\/h3\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eTop N Analysis:\u003c\/strong\u003e Automatically identify and display the \"Top N\" contributors to a problem, like your worst-performing assets.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003ePareto Analysis:\u003c\/strong\u003e Automatically overlay a cumulative percentage line on your bar chart to apply the 80\/20 rule and pinpoint the vital few causes driving the majority of your losses.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eInteractive Drilldown:\u003c\/strong\u003e Click on any bar or point in the chart to see the underlying event frames that make up the calculation.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eSeamless PI Vision Integration:\u003c\/strong\u003e Works with any Event Frame template and is configured with an intuitive panel.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 3. USE CASES SECTION --\u003e\n\u003csection class=\"use-cases-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eFrom Raw Events to Business Intelligence\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-cases-grid\"\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg class=\"icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" fill=\"currentColor\"\u003e\u003cpath d=\"M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm-1-13h2v2h-2zm0 4h2v6h-2z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eDowntime \u0026amp; Root Cause Analysis\u003c\/h3\u003e\n\u003cp\u003eCreate a Pareto chart of downtime events by reason code or count to instantly identify your biggest problems.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg class=\"icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" fill=\"currentColor\"\u003e\u003cpath d=\"M4 10h3v7H4zM10.5 10h3v7h-3zM17 10h3v7h-3zM22 6H2V4h20v2z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eOEE \u0026amp; Production Loss Analysis\u003c\/h3\u003e\n\u003cp\u003eSum the \"Tonnage Lost\" or \"Duration\" attributes from your events to create charts that quantify the impact on production.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg class=\"icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" fill=\"currentColor\"\u003e\u003cpath d=\"M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-1 14H5V8h6v7zm2 0v-7h6v7h-6z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eAsset Performance Benchmarking\u003c\/h3\u003e\n\u003cp\u003eGroup event counts or durations by asset to create a bar chart comparing the performance of similar equipment.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg class=\"icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" fill=\"currentColor\"\u003e\u003cpath d=\"M7 18h2V6H7v12zm4 4h2V2h-2v20zm-8-8h2v-4H3v4zm12 4h2V6h-2v12zm4-8v4h2v-4h-2z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003ePareto \u0026amp; 80\/20 Analysis\u003c\/h3\u003e\n\u003cp\u003eEnable the built-in Pareto overlay to automatically rank causes and plot the cumulative percentage line, instantly revealing which few factors drive the majority of your losses.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg class=\"icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" fill=\"currentColor\"\u003e\u003cpath d=\"M16 6l2.29 2.29-4.88 4.88-4-4L2 16.59 3.41 18l6-6 4 4 6.3-6.29L22 12V6h-6z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eEvent Frequency \u0026amp; Trend Analysis\u003c\/h3\u003e\n\u003cp\u003eUse a line chart to trend the number of critical events per day or week to track improvement over time.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 4. SCREENSHOTS SECTION --\u003e\n\u003csection class=\"screenshots-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003ePowerful Event Aggregation, Made Visual\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshots-grid\"\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-event-downtime-chart-1.png?v=1763107288\" alt=\"A bar chart in PI Vision counting the number of downtime events by reason code.\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eCount Events by Category\u003c\/h4\u003e\n\u003cp\u003eAggregate and count your event frames based on any attribute, such as a downtime reason code or product grade.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-event-downtime-chart-3.png?v=1763107288\" alt=\"A stacked bar chart showing the composition of events in PI Vision.\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eStack Series for Deeper Insight\u003c\/h4\u003e\n\u003cp\u003eStack your data series to visualize the composition of your totals, like breaking down downtime hours by asset.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-event-downtime-chart-5.png?v=1763107288\" alt=\"A 'Top N' analysis chart in PI Vision showing the worst-performing assets.\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eFocus on \"Top N\" Bad Actors\u003c\/h4\u003e\n\u003cp\u003eAutomatically calculate and display the top contributors to a problem, such as the 5 assets with the most downtime.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-event-pareto-chart.png?v=1774089109\" alt=\"A Pareto chart in PI Vision showing ranked downtime causes with a cumulative percentage line.\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003ePareto Analysis \u0026amp; 80\/20 Rule\u003c\/h4\u003e\n\u003cp\u003eEnable the Pareto overlay to automatically rank your causes and plot a cumulative percentage line, so you can instantly focus on the vital few factors driving the majority of your losses.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-event-downtime-chart-8.png?v=1763107288\" alt=\"An event analytics chart in PI Vision with multistate coloring and a target limit line.\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eApply Multistate \u0026amp; Limit Lines\u003c\/h4\u003e\n\u003cp\u003eUse conditional coloring to highlight underperforming assets and add target lines to visualize your KPIs.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-event-downtime-chart-10-drilldown.png?v=1763107289\" alt=\"A drilldown view showing the raw event frames that make up a bar in the chart.\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eInteractive Drilldown to Raw Events\u003c\/h4\u003e\n\u003cp\u003eClick any bar or point on the chart to instantly open a table showing the underlying event frames for root cause analysis.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 5. DEMO VIDEO SECTION --\u003e\n\u003csection class=\"demo-video-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eSee It in Action\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"video-card\"\u003e\n\u003cdiv class=\"video-wrapper\"\u003e\u003cvideo controls=\"controls\" preload=\"metadata\"\u003e\n        \u003csource type=\"video\/mp4\" src=\"https:\/\/cdn.shopify.com\/videos\/c\/o\/v\/72b288fbfb4c48fca97c7662e9d12414.mp4\"\u003e\n        Your browser does not support the video tag.\n      \u003c\/source\u003e\u003c\/video\u003e\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003cstyle\u003e\n  \/* --- GENERAL SECTION STYLES --- *\/\n  .section-header {\n    display: flex; flex-direction: column; align-items: center; text-align: center;\n    max-width: 800px; margin: 0 auto 3.5rem auto;\n  }\n  .section-header h2 {\n    color: #111; margin-bottom: 1rem; font-size: 1.8rem;\n  }\n  .section-header p {\n    color: #333; line-height: 1.7; font-size: 1rem;\n  }\n  .feature-list {\n    list-style: none; padding: 0; margin: 0;\n  }\n  .feature-list li {\n    position: relative; padding-left: 30px; margin-bottom: 1.25rem;\n    line-height: 1.6; color: #333;\n  }\n  .feature-list li::before {\n    content: '✔'; position: absolute; left: 0; top: 2px;\n    color: #3F72E5; font-size: 1.2rem;\n  }\n  .feature-list li strong {\n    color: #111; font-weight: 600;\n  }\n\n  \/* --- 1. HERO SECTION --- *\/\n  .product-hero-section {\n    padding: 5rem 1rem; text-align: center;\n  }\n  .product-hero-container {\n      max-width: 700px; margin: 0 auto;\n  }\n  .product-hero-icon {\n      width: 80px; height: auto; margin-bottom: 2rem;\n  }\n  .product-subtitle-tag {\n    color: #3F72E5; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.5px;\n  }\n  h1 {\n    font-size: 2.5rem; margin-bottom: 1.5rem;\n  }\n  .product-description {\n    line-height: 1.7; font-size: 1.1rem; color: #333;\n  }\n\n  \/* --- 2. FEATURES SECTION --- *\/\n  .product-features-section {\n    padding: 4rem 1rem; background-color: #f9fafb;\n  }\n  .features-grid-three-col {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n    gap: 2.5rem;\n    max-width: 1200px; margin: 0 auto;\n  }\n  .features-column h3 {\n    font-size: 1.3rem; margin-bottom: 1.5rem; color: #111;\n  }\n \n  \/* --- 3. USE CASES SECTION --- *\/\n  .use-cases-section {\n    padding: 4rem 1rem;\n  }\n  .use-cases-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n    gap: 2rem;\n    max-width: 1200px; margin: 0 auto;\n  }\n  .use-case-card {\n    background: white; border-radius: 20px; padding: 2rem; text-align: center;\n    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);\n  }\n  .use-case-card .icon {\n    width: 40px; height: 40px; color: #3F72E5; margin-bottom: 1rem;\n  }\n  .use-case-card h3 {\n    font-size: 1.2rem; color: #111; margin-bottom: 0.5rem;\n  }\n  .use-case-card p {\n    color: #333; font-size: 0.9rem; line-height: 1.6;\n  }\n\n  \/* --- 4. SCREENSHOTS SECTION --- *\/\n  .screenshots-section {\n    padding: 4rem 1rem; background-color: #f9fafb;\n  }\n  .screenshots-grid {\n    display: grid;\n    grid-template-columns: 1fr; \/* Default to 1 column for mobile *\/\n    gap: 2rem;\n    max-width: 1200px; margin: 0 auto;\n  }\n  .screenshot-card {\n    background: white; border-radius: 20px;\n    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);\n    overflow: hidden;\n  }\n  .screenshot-card img {\n    width: 100%; height: auto; display: block; background-color: #f9fafb;\n  }\n  .screenshot-card-content {\n    padding: 1.5rem;\n  }\n  .screenshot-card-content h4 {\n    font-size: 1.2rem; margin: 0 0 0.5rem 0; color: #111;\n  }\n  .screenshot-card-content p {\n    font-size: 0.95rem; line-height: 1.6; color: #333; margin: 0;\n  }\n \n \/* --- 5. DEMO VIDEO SECTION --- *\/\n  .demo-video-section {\n    padding: 4rem 1rem;\n  }\n  .video-card {\n    max-width: 1000px;\n    margin: 0 auto;\n    border-radius: 20px;\n    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);\n    overflow: hidden;\n  }\n  .video-wrapper {\n    position: relative;\n    padding-bottom: 56.25%; \/* 16:9 Aspect Ratio *\/\n    height: 0;\n  }\n  .video-wrapper video {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n  }\n\n  \/* --- RESPONSIVE STYLES --- *\/\n  @media (max-width: 900px) {\n    .features-container {\n      grid-template-columns: 1fr;\n    }\n  }\n\u003c\/style\u003e\n\u003c!-- END: Redesigned Product Page --\u003e","brand":"Software Athlete","offers":[{"title":"Default Title","offer_id":55443372769606,"sku":null,"price":0.0,"currency_code":"EUR","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/eventschart2.png?v=1763107288"},{"product_id":"pi-vision-event-calculation-pie-chart","title":"Event Analyics Pie+","description":"\u003c!-- START: Redesigned Product Page for Event Analytics Pie+ --\u003e\n\u003cp\u003e \u003c\/p\u003e\n\u003c!-- 1. HERO SECTION --\u003e\n\u003csection class=\"product-hero-section\"\u003e\n\u003cdiv class=\"product-hero-container\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/eventanalyticspie.png?v=1763107759\" alt=\"Event Analytics Pie+ Product Icon\" class=\"product-hero-icon\"\u003e\n\u003cp class=\"product-subtitle-tag\"\u003ePI Vision Custom Symbol\u003c\/p\u003e\n\u003ch1\u003eInstantly Visualize the Breakdown of Your Downtime \u0026amp; Production Losses\u003c\/h1\u003e\n\u003cp class=\"product-description\"\u003eStop exporting event data to Excel. Event Analytics Pie+ automatically aggregates your event frames into intuitive pie and doughnut charts, revealing the biggest contributors to your operational challenges.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 2. FEATURES SECTION --\u003e\n\u003csection class=\"product-features-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eFrom Long Lists to Clear Insights\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-grid-three-col\"\u003e\n\u003cdiv class=\"features-column\"\u003e\n\u003ch3\u003ePowerful Aggregation Engine\u003c\/h3\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eCount Events by Category:\u003c\/strong\u003e Automatically count event frame occurrences based on any attribute, like a downtime reason code.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eSum Durations \u0026amp; Attributes:\u003c\/strong\u003e Sum the total duration or any numeric attribute (e.g., \"Tonnage Lost\") to quantify the true impact.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eCalculate Averages:\u003c\/strong\u003e Determine the average value of key attributes for each category in your breakdown.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-column\"\u003e\n\u003ch3\u003eFlexible Visualization Options\u003c\/h3\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003ePie \u0026amp; Doughnut Charts:\u003c\/strong\u003e Choose between classic pie charts or modern doughnut charts for your visualization.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eDynamic Center Label:\u003c\/strong\u003e Display the total sum or count of all categories in the center of your doughnut chart.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eAutomatic Multi-Pie Generation:\u003c\/strong\u003e Create a separate pie chart for each asset or category in your data for easy side-by-side comparison.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-column\"\u003e\n\u003ch3\u003eIntuitive \u0026amp; Customizable\u003c\/h3\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eInteractive Tooltips:\u003c\/strong\u003e Hover over any slice to see the precise value, percentage, and category name.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eFull Style Control:\u003c\/strong\u003e Customize colors, data labels, titles, and legends to match your dashboard's design.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eSimple No-Code Setup:\u003c\/strong\u003e All aggregation and visualization options are managed through a user-friendly panel.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 3. USE CASES SECTION --\u003e\n\u003csection class=\"use-cases-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eIdentify Your Biggest Opportunities for Improvement\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-cases-grid\"\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg class=\"icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" fill=\"currentColor\"\u003e\u003cpath d=\"M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm-1-13h2v2h-2zm0 4h2v6h-2z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eDowntime Root Cause Analysis\u003c\/h3\u003e\n\u003cp\u003eInstantly visualize the percentage of total downtime caused by each reason code to create a powerful Pareto-style analysis.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg class=\"icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" fill=\"currentColor\"\u003e\u003cpath d=\"M4 10h3v7H4zM10.5 10h3v7h-3zM17 10h3v7h-3zM22 6H2V4h20v2z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eOEE \u0026amp; Production Loss Breakdown\u003c\/h3\u003e\n\u003cp\u003eSum the \"Tonnage Lost\" attribute for each loss category to clearly see which issues are having the biggest impact on production.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg class=\"icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" fill=\"currentColor\"\u003e\u003cpath d=\"M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-1 14H5V8h6v7zm2 0v-7h6v7h-6z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eAsset Performance Comparison\u003c\/h3\u003e\n\u003cp\u003eUse the multi-pie feature to automatically generate a separate downtime breakdown for each asset, enabling easy side-by-side benchmarking.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg class=\"icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" fill=\"currentColor\"\u003e\u003cpath d=\"M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eQuality \u0026amp; Excursion Events\u003c\/h3\u003e\n\u003cp\u003eAnalyze the frequency of different quality deviations or safety incidents to focus your continuous improvement efforts.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 4. SCREENSHOTS SECTION --\u003e\n\u003csection class=\"screenshots-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eVisualize Proportions with Power and Simplicity\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshots-grid\"\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-event-analytics-pie-chart-1.png?v=1763107760\" alt=\"A pie chart in PI Vision classifying events by a specific attribute.\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eClassify and Count Events\u003c\/h4\u003e\n\u003cp\u003eAutomatically group and count your event frames based on any attribute, such as a downtime reason code, to see a clear proportional breakdown.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-event-analytics-pie-chart-2.png?v=1763107760\" alt=\"A PI Vision doughnut chart summing production loss values by type.\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eSum Durations \u0026amp; Production Loss\u003c\/h4\u003e\n\u003cp\u003eGo beyond just counting. Aggregate the duration or any numeric attribute (like \"Tonnage Lost\") to quantify the true impact of each category.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-event-analytics-pie-chart-4.png?v=1763107760\" alt=\"A customized pie chart in PI Vision showing different colors and data labels.\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eCustomize Your Visualization\u003c\/h4\u003e\n\u003cp\u003eChoose between pie or doughnut charts, and take full control over colors, data labels, titles, and the center total to match your needs.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-event-analytics-pie-chart-3.png?v=1763107760\" alt=\"A PI Vision display showing multiple pie charts generated automatically for different categories.\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eGenerate Multiple Pies Automatically\u003c\/h4\u003e\n\u003cp\u003eCreate a separate pie chart for each asset, production line, or category in your data for powerful side-by-side comparison.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 5. DEMO VIDEO SECTION --\u003e\n\u003csection class=\"demo-video-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eSee It in Action\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"video-card\"\u003e\n\u003cdiv class=\"video-wrapper\"\u003e\u003cvideo controls=\"controls\" preload=\"metadata\"\u003e\n        \u003csource type=\"video\/mp4\" src=\"https:\/\/cdn.shopify.com\/videos\/c\/o\/v\/72b288fbfb4c48fca97c7662e9d12414.mp4\"\u003e\n        Your browser does not support the video tag.\n      \u003c\/source\u003e\u003c\/video\u003e\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003cstyle\u003e\n  \/* --- GENERAL SECTION STYLES --- *\/\n  .section-header {\n    display: flex; flex-direction: column; align-items: center; text-align: center;\n    max-width: 800px; margin: 0 auto 3.5rem auto;\n  }\n  .section-header h2 {\n    color: #111; margin-bottom: 1rem; font-size: 1.8rem;\n  }\n  .section-header p {\n    color: #333; line-height: 1.7; font-size: 1rem;\n  }\n  .feature-list {\n    list-style: none; padding: 0; margin: 0;\n  }\n  .feature-list li {\n    position: relative; padding-left: 30px; margin-bottom: 1.25rem;\n    line-height: 1.6; color: #333;\n  }\n  .feature-list li::before {\n    content: '✔'; position: absolute; left: 0; top: 2px;\n    color: #3F72E5; font-size: 1.2rem;\n  }\n  .feature-list li strong {\n    color: #111; font-weight: 600;\n  }\n\n  \/* --- 1. HERO SECTION --- *\/\n  .product-hero-section {\n    padding: 5rem 1rem; text-align: center;\n  }\n  .product-hero-container {\n      max-width: 700px; margin: 0 auto;\n  }\n  .product-hero-icon {\n      width: 80px; height: auto; margin-bottom: 2rem;\n  }\n  .product-subtitle-tag {\n    color: #3F72E5; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.5px;\n  }\n  h1 {\n    font-size: 2.5rem; margin-bottom: 1.5rem;\n  }\n  .product-description {\n    line-height: 1.7; font-size: 1.1rem; color: #333;\n  }\n\n  \/* --- 2. FEATURES SECTION --- *\/\n  .product-features-section {\n    padding: 4rem 1rem; background-color: #f9fafb;\n  }\n  .features-grid-three-col {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n    gap: 2.5rem;\n    max-width: 1200px; margin: 0 auto;\n  }\n  .features-column h3 {\n    font-size: 1.3rem; margin-bottom: 1.5rem; color: #111;\n  }\n \n  \/* --- 3. USE CASES SECTION --- *\/\n  .use-cases-section {\n    padding: 4rem 1rem;\n  }\n  .use-cases-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n    gap: 2rem;\n    max-width: 1200px; margin: 0 auto;\n  }\n  .use-case-card {\n    background: white; border-radius: 20px; padding: 2rem; text-align: center;\n    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);\n  }\n  .use-case-card .icon {\n    width: 40px; height: 40px; color: #3F72E5; margin-bottom: 1rem;\n  }\n  .use-case-card h3 {\n    font-size: 1.2rem; color: #111; margin-bottom: 0.5rem;\n  }\n  .use-case-card p {\n    color: #333; font-size: 0.9rem; line-height: 1.6;\n  }\n\n  \/* --- 4. SCREENSHOTS SECTION --- *\/\n  .screenshots-section {\n    padding: 4rem 1rem; background-color: #f9fafb;\n  }\n  .screenshots-grid {\n    display: grid;\n    grid-template-columns: 1fr; \/* Default to 1 column for mobile *\/\n    gap: 2rem;\n    max-width: 1200px; margin: 0 auto;\n  }\n  .screenshot-card {\n    background: white; border-radius: 20px;\n    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);\n    overflow: hidden;\n  }\n  .screenshot-card img {\n    width: 100%; height: auto; display: block; background-color: #f9fafb;\n  }\n  .screenshot-card-content {\n    padding: 1.5rem;\n  }\n  .screenshot-card-content h4 {\n    font-size: 1.2rem; margin: 0 0 0.5rem 0; color: #111;\n  }\n  .screenshot-card-content p {\n    font-size: 0.95rem; line-height: 1.6; color: #333; margin: 0;\n  }\n \n  \/* --- 5. DEMO VIDEO SECTION --- *\/\n  .demo-video-section {\n    padding: 4rem 1rem;\n  }\n  .video-card {\n    max-width: 1000px;\n    margin: 0 auto;\n    border-radius: 20px;\n    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);\n    overflow: hidden;\n  }\n  .video-wrapper {\n    position: relative;\n    padding-bottom: 56.25%; \/* 16:9 Aspect Ratio *\/\n    height: 0;\n  }\n  .video-wrapper video {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n  }\n\n\n  \/* --- RESPONSIVE STYLES --- *\/\n  @media (min-width: 750px) {\n    .screenshots-grid {\n      grid-template-columns: 1fr 1fr; \/* 2 columns for tablet and up *\/\n    }\n  }\n\u003c\/style\u003e\n\u003c!-- END: Redesigned Product Page --\u003e","brand":"Software Athlete","offers":[{"title":"Default Title","offer_id":55443426967878,"sku":null,"price":0.0,"currency_code":"EUR","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/eventanalyticspie.png?v=1763107759"},{"product_id":"pi-vision-display-event-filter","title":"Event Filter+","description":"\u003c!-- START: Redesigned Product Page for Event Filter+ --\u003e\n\u003cp\u003e \u003c\/p\u003e\n\u003c!-- 1. HERO SECTION --\u003e\n\u003csection class=\"product-hero-section\"\u003e\n\u003cdiv class=\"product-hero-container\"\u003e\n\u003cimg class=\"product-hero-icon\" alt=\"Event Filter+ Product Icon\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/eventfilter.png?v=1763108764\"\u003e\n\u003cp class=\"product-subtitle-tag\"\u003ePI Vision Custom Symbol\u003c\/p\u003e\n\u003ch1\u003eCreate Truly Interactive Event Dashboards in PI Vision\u003c\/h1\u003e\n\u003cp class=\"product-description\"\u003eStop configuring individual filters for every symbol. Event Filter+ provides a single, powerful control to filter all event-based symbols on your display at once, creating a seamless and dynamic user experience.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 2. FEATURES SECTION --\u003e\n\u003csection class=\"product-features-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eOne Filter to Rule Them All\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-grid-three-col\"\u003e\n\u003cdiv class=\"features-column\"\u003e\n\u003ch3\u003eCentralized Dashboard Control\u003c\/h3\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eUnified Filtering:\u003c\/strong\u003e A single selection in the Event Filter+ instantly updates all other event symbols on the same display.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eCross-Symbol Communication:\u003c\/strong\u003e Works seamlessly with Events Table+, Event Analytics Chart+, Gantt Chart+, and more.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eSynchronized Context:\u003c\/strong\u003e Ensures all your charts, tables, and graphs are always showing data for the same filtered context.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-column\"\u003e\n\u003ch3\u003ePowerful Filtering Options\u003c\/h3\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eFilter by Any Attribute:\u003c\/strong\u003e Create filters based on any event frame attribute, such as equipment, reason code, product grade, or batch ID.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eSingle \u0026amp; Multi-Select:\u003c\/strong\u003e Configure the filter to allow users to select a single item for focused analysis or multiple items for broader comparison.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eCombine Multiple Filters:\u003c\/strong\u003e Place several filter symbols on one display to create powerful, layered filtering logic.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-column\"\u003e\n\u003ch3\u003eIntuitive User Interface\u003c\/h3\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eMultiple Display Modes:\u003c\/strong\u003e Present your filter options as a clean list, a compact dropdown menu, or a series of buttons.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eClear Selection Indicator:\u003c\/strong\u003e The interface clearly shows which filter items are currently active.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eSimple No-Code Setup:\u003c\/strong\u003e Easily configure your filter's source and appearance through a user-friendly panel.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 3. USE CASES SECTION --\u003e\n\u003csection class=\"use-cases-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eBuild Dynamic, User-Driven Dashboards\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-cases-grid\"\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg fill=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"icon\"\u003e\u003cpath d=\"M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm-1-13h2v2h-2zm0 4h2v6h-2z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eDynamic Downtime Dashboard\u003c\/h3\u003e\n\u003cp\u003eCreate filters for \"Reason Code,\" \"Asset,\" and \"Shift\" that update your downtime charts and tables in real-time.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg fill=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"icon\"\u003e\u003cpath d=\"M4 10h3v7H4zM10.5 10h3v7h-3zM17 10h3v7h-3zM22 6H2V4h20v2z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eInteractive OEE\/Production Reports\u003c\/h3\u003e\n\u003cp\u003eAllow managers to filter an entire OEE dashboard by \"Production Line\" or \"Product Grade\" with a single click.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg fill=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"icon\"\u003e\u003cpath d=\"M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-1 14H5V8h6v7zm2 0v-7h6v7h-6z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eFleet-Wide Comparison View\u003c\/h3\u003e\n\u003cp\u003eUse a multi-select filter to choose a specific group of assets and instantly compare their event analytics side-by-side.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg fill=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"icon\"\u003e\u003cpath d=\"M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eOperator-Specific Logbooks\u003c\/h3\u003e\n\u003cp\u003eCreate a filter based on \"Operator Name\" to allow users to quickly see all events they were associated with.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 4. SCREENSHOTS SECTION --\u003e\n\u003csection class=\"screenshots-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eSimple to Configure, Powerful to Use\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshots-grid\"\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg alt=\"An event filter in PI Vision showing a list of selectable items.\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-event-frame-filter-1.png?v=1763108764\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eIntuitive List Filtering\u003c\/h4\u003e\n\u003cp\u003ePresent users with a clean, simple list of items. Selecting an item instantly filters all connected symbols on the display.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg alt=\"An event filter in PI Vision configured for multi-select mode.\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-event-frame-filter-6.png?v=1763108765\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eSingle \u0026amp; Multi-Select Modes\u003c\/h4\u003e\n\u003cp\u003eConfigure the filter to allow users to select a single item for focused analysis or multiple items for broader comparison.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg alt=\"A PI Vision dashboard where an event filter is controlling an analytics chart and a table simultaneously.\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-event-frame-filter-5.png?v=1763108813\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eFilter All Event Symbols at Once\u003c\/h4\u003e\n\u003cp\u003eOne filter controls everything. Your selection automatically updates Events Table+, Gantt Chart+, and Analytics Charts on the same display.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg alt=\"A PI Vision display showing two event filters being used together for combined filtering.\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-event-frame-filter-2.png?v=1763108764\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eCombine Multiple Filters\u003c\/h4\u003e\n\u003cp\u003ePlace multiple filters on a single display to create powerful, layered filtering logic (e.g., filter by 'Asset' AND 'Reason Code').\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 5. DEMO VIDEO SECTION --\u003e\n\u003csection class=\"demo-video-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eSee It in Action\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"video-card\"\u003e\n\u003cdiv class=\"video-wrapper\"\u003e\u003cvideo controls=\"controls\" preload=\"metadata\"\u003e\n        \u003csource type=\"video\/mp4\" src=\"https:\/\/cdn.shopify.com\/videos\/c\/o\/v\/72b288fbfb4c48fca97c7662e9d12414.mp4\"\u003e\n        Your browser does not support the video tag.\n      \u003c\/source\u003e\u003c\/video\u003e\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003cstyle\u003e\n  \/* --- GENERAL SECTION STYLES --- *\/\n  .section-header {\n    display: flex; flex-direction: column; align-items: center; text-align: center;\n    max-width: 800px; margin: 0 auto 3.5rem auto;\n  }\n  .section-header h2 {\n    color: #111; margin-bottom: 1rem; font-size: 1.8rem;\n  }\n  .section-header p {\n    color: #333; line-height: 1.7; font-size: 1rem;\n  }\n  .feature-list {\n    list-style: none; padding: 0; margin: 0;\n  }\n  .feature-list li {\n    position: relative; padding-left: 30px; margin-bottom: 1.25rem;\n    line-height: 1.6; color: #333;\n  }\n  .feature-list li::before {\n    content: '✔'; position: absolute; left: 0; top: 2px;\n    color: #3F72E5; font-size: 1.2rem;\n  }\n  .feature-list li strong {\n    color: #111; font-weight: 600;\n  }\n\n  \/* --- 1. HERO SECTION --- *\/\n  .product-hero-section {\n    padding: 5rem 1rem; text-align: center;\n  }\n  .product-hero-container {\n      max-width: 700px; margin: 0 auto;\n  }\n  .product-hero-icon {\n      width: 80px; height: auto; margin-bottom: 2rem;\n  }\n  .product-subtitle-tag {\n    color: #3F72E5; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.5px;\n  }\n  h1 {\n    font-size: 2.5rem; margin-bottom: 1.5rem;\n  }\n  .product-description {\n    line-height: 1.7; font-size: 1.1rem; color: #333;\n  }\n\n  \/* --- 2. FEATURES SECTION --- *\/\n  .product-features-section {\n    padding: 4rem 1rem; background-color: #f9fafb;\n  }\n  .features-grid-three-col {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n    gap: 2.5rem;\n    max-width: 1200px; margin: 0 auto;\n  }\n  .features-column h3 {\n    font-size: 1.3rem; margin-bottom: 1.5rem; color: #111;\n  }\n \n  \/* --- 3. USE CASES SECTION --- *\/\n  .use-cases-section {\n    padding: 4rem 1rem;\n  }\n  .use-cases-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n    gap: 2rem;\n    max-width: 1200px; margin: 0 auto;\n  }\n  .use-case-card {\n    background: white; border-radius: 20px; padding: 2rem; text-align: center;\n    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);\n  }\n  .use-case-card .icon {\n    width: 40px; height: 40px; color: #3F72E5; margin-bottom: 1rem;\n  }\n  .use-case-card h3 {\n    font-size: 1.2rem; color: #111; margin-bottom: 0.5rem;\n  }\n  .use-case-card p {\n    color: #333; font-size: 0.9rem; line-height: 1.6;\n  }\n\n  \/* --- 4. SCREENSHOTS SECTION --- *\/\n  .screenshots-section {\n    padding: 4rem 1rem; background-color: #f9fafb;\n  }\n  .screenshots-grid {\n    display: grid;\n    grid-template-columns: 1fr; \/* Default to 1 column for mobile *\/\n    gap: 2rem;\n    max-width: 1200px; margin: 0 auto;\n  }\n  .screenshot-card {\n    background: white; border-radius: 20px;\n    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);\n    overflow: hidden;\n  }\n  .screenshot-card img {\n    width: 100%; height: auto; display: block; background-color: #f9fafb;\n  }\n  .screenshot-card-content {\n    padding: 1.5rem;\n  }\n  .screenshot-card-content h4 {\n    font-size: 1.2rem; margin: 0 0 0.5rem 0; color: #111;\n  }\n  .screenshot-card-content p {\n    font-size: 0.95rem; line-height: 1.6; color: #333; margin: 0;\n  }\n \n\/* --- 5. DEMO VIDEO SECTION --- *\/\n  .demo-video-section {\n    padding: 4rem 1rem;\n  }\n  .video-card {\n    max-width: 1000px;\n    margin: 0 auto;\n    border-radius: 20px;\n    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);\n    overflow: hidden;\n  }\n  .video-wrapper {\n    position: relative;\n    padding-bottom: 56.25%; \/* 16:9 Aspect Ratio *\/\n    height: 0;\n  }\n  .video-wrapper video {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n  }\n\n\n  \/* --- RESPONSIVE STYLES --- *\/\n  @media (min-width: 750px) {\n    .screenshots-grid {\n      grid-template-columns: 1fr 1fr; \/* 2 columns for tablet and up *\/\n    }\n  }\n\u003c\/style\u003e\n\u003c!-- END: Redesigned Product Page --\u003e","brand":"Software Athlete","offers":[{"title":"Default Title","offer_id":55443470811462,"sku":null,"price":0.0,"currency_code":"EUR","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/eventfilter_e9828ca3-8ffb-4475-a622-bdcb5124c3c8.png?v=1763109047"},{"product_id":"pi-vision-asset-treemap-plus","title":"Asset Treemap+","description":"\u003c!-- START: Product Page for Asset Treemap Plus --\u003e\n\u003cp\u003e \u003c\/p\u003e\n\u003c!-- 1. HERO SECTION --\u003e\n\u003csection class=\"product-hero-section\"\u003e\n\u003cdiv class=\"product-hero-container\" style=\"text-align: center;\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/asset-treemap_160x160.png?v=1765105722\" style=\"margin-bottom: 16px; float: none;\"\u003e\u003cbr\u003e\n\u003cp class=\"product-subtitle-tag\"\u003ePI Vision Custom Symbol\u003c\/p\u003e\n\u003ch1\u003eVisualize Your Asset Hierarchy at a Glance\u003c\/h1\u003e\n\u003cp class=\"product-description\"\u003eTurn flat asset lists into intuitive heatmaps. Asset Treemap Plus visualizes magnitude and status simultaneously, helping you spot outliers, monitor hierarchies, and drill down into root causes instantly.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 2. FEATURES SECTION --\u003e\n\u003csection class=\"product-features-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eSee the Big Picture\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-grid-three-col\"\u003e\n\u003cdiv class=\"features-column\"\u003e\n\u003ch3\u003eFlexible Grouping Logic\u003c\/h3\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eHierarchy \u0026amp; Path Mode:\u003c\/strong\u003e Automatically parses your PI AF Element paths to create nested visual groups.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eAttribute Clustering:\u003c\/strong\u003e Group assets dynamically based on metadata, such as \"Manufacturer\", \"Location\", or \"Asset Type\".\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eSmart Aggregation:\u003c\/strong\u003e Visualizes parent groups based on the aggregated data of their children.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-column\"\u003e\n\u003ch3\u003eAdvanced Coloring Engine\u003c\/h3\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eValue-Based Heatmaps:\u003c\/strong\u003e Apply gradient color scales (Green-Yellow-Red) based on live values like temperature or efficiency.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eNative Multistate:\u003c\/strong\u003e Seamlessly integrates with PI Vision Multistate configurations for alarm visualization.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eCustom Mapping:\u003c\/strong\u003e Manually map specific attribute values (e.g., \"Running\", \"Stopped\") to specific colors.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-column\"\u003e\n\u003ch3\u003eInteractive Navigation\u003c\/h3\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eVisual Drilldown:\u003c\/strong\u003e Click on any group header to zoom in and focus on specific plant areas or production lines.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eBreadcrumb Navigation:\u003c\/strong\u003e Easily navigate back up the hierarchy with an integrated breadcrumb bar.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eDynamic Data Labels:\u003c\/strong\u003e Show exactly what matters with rich-text labels supporting multiple attributes and custom font sizing.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 3. USE CASES SECTION --\u003e\n\u003csection class=\"use-cases-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eFrom Data Points to Situational Awareness\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-cases-grid\"\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg fill=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"icon\"\u003e\u003cpath d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eAlarm \u0026amp; Exception Management\u003c\/h3\u003e\n\u003cp\u003eUse Multistate coloring to instantly turn the treemap red when assets go into alarm, allowing operators to spot issues in hundreds of assets immediately.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg fill=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"icon\"\u003e\u003cpath d=\"M13 2.05v3.03c3.39.49 6 3.39 6 6.92 0 .9-.18 1.75-.5 2.54l2.63 1.53c.56-1.24.87-2.6.87-4.07 0-5.17-3.95-9.42-9-9.95zM12 19c-3.87 0-7-3.13-7-7 0-3.53 2.61-6.43 6-6.92V2.05c-5.06.5-9 4.76-9 9.95 0 5.52 4.47 10 9.99 10 3.31 0 6.24-1.61 8.06-4.09l-2.6-1.53C16.17 17.98 14.21 19 12 19z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eEnergy \u0026amp; Utility Monitoring\u003c\/h3\u003e\n\u003cp\u003eMap the size of the boxes to \"Power Consumption\". Quickly identify which assets are your biggest energy consumers relative to others.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg fill=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"icon\"\u003e\u003cpath d=\"M3 13h2v-2H3v2zm0 4h2v-2H3v2zm0-8h2V7H3v2zm4 4h14v-2H7v2zm0 4h14v-2H7v2zM7 7v2h14V7H7z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eFleet Performance Comparison\u003c\/h3\u003e\n\u003cp\u003eVisualize OEE or Efficiency across multiple sites. Group by \"Region\" and then \"Site\" to compare performance benchmarks at scale.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg fill=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"icon\"\u003e\u003cpath d=\"M10 20h4V4h-4v16zm-6 0h4v-8H4v8zM16 9v11h4V9h-4z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eMaintenance Planning\u003c\/h3\u003e\n\u003cp\u003eGroup assets by \"Maintenance Status\" to visualize the ratio of active vs. stopped equipment and prioritize work orders.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 4. SCREENSHOTS SECTION --\u003e\n\u003csection class=\"screenshots-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003ePowerful Visualization, Made Simple\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshots-grid\"\u003e\n\u003c!-- Card 1: Grouping --\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg alt=\"PI Vision Treemap showing attribute grouping\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-asset-treemap-grouping.png?v=1765105821\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eSmart Grouping \u0026amp; Hierarchy\u003c\/h4\u003e\n\u003cp\u003eAutomatically group assets by their PI AF hierarchy path or by custom attributes like \"Line\", \"Type\", or \"Status\" to organize your data.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c!-- Card 2: Heatmap --\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg alt=\"PI Vision Treemap with gradient coloring\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-asset-treemap-heatmap-gradient.png?v=1765105820\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eValue-Based Heatmaps\u003c\/h4\u003e\n\u003cp\u003eApply dynamic gradients to visualize performance ranges. The integrated legend automatically scales to your data's min\/max values.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c!-- Card 3: Multistate --\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cimg alt=\"PI Vision Treemap with multistate configuration\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-asset-treemap-multistate.png?v=1765105820\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eNative Multistate Integration\u003c\/h4\u003e\n\u003cp\u003eConnect directly to PI AF Multistate configurations. If an asset enters a warning state, the treemap box changes color instantly.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c!-- Card 4: Drilldown --\u003e\n\u003cdiv class=\"screenshot-card\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-asset-treemap-drilldown-2.png?v=1765188100\" alt=\"\"\u003eInteractive Drilldown\u003c\/h4\u003e\n\u003cp\u003eNavigate deep hierarchies with ease. Click a group to zoom in, and use the breadcrumb bar to return to the plant overview.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 5. DEMO VIDEO SECTION (Placeholder - Using same video structure as example) --\u003e\n\u003csection class=\"demo-video-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eSee It in Action\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"video-card\"\u003e\n\u003cdiv class=\"video-wrapper\"\u003e\n\u003c!-- Note: Replace src with actual Treemap demo video when available --\u003e \u003cvideo preload=\"metadata\" controls=\"controls\"\u003e\n        \u003csource src=\"https:\/\/cdn.shopify.com\/videos\/c\/o\/v\/08025e3b6dd04a578c54cb1b6caf04b4.mp4\" type=\"video\/mp4\"\u003e\n        Your browser does not support the video tag.\n      \u003c\/source\u003e\u003c\/video\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003cstyle\u003e\n  \/* --- GENERAL SECTION STYLES --- *\/\n  .section-header {\n    display: flex; flex-direction: column; align-items: center; text-align: center;\n    max-width: 800px; margin: 0 auto 3.5rem auto;\n  }\n  .section-header h2 {\n    color: #111; margin-bottom: 1rem; font-size: 1.8rem;\n  }\n  .section-header p {\n    color: #333; line-height: 1.7; font-size: 1rem;\n  }\n  .feature-list {\n    list-style: none; padding: 0; margin: 0;\n  }\n  .feature-list li {\n    position: relative; padding-left: 30px; margin-bottom: 1.25rem;\n    line-height: 1.6; color: #333;\n  }\n  .feature-list li::before {\n    content: '✔'; position: absolute; left: 0; top: 2px;\n    color: #3F72E5; font-size: 1.2rem;\n  }\n  .feature-list li strong {\n    color: #111; font-weight: 600;\n  }\n\n  \/* --- 1. HERO SECTION --- *\/\n  .product-hero-section {\n    padding: 5rem 1rem; text-align: center;\n  }\n  .product-hero-container {\n      max-width: 700px; margin: 0 auto;\n  }\n  .product-hero-icon {\n      width: 80px; height: auto; margin-bottom: 2rem;\n  }\n  .product-subtitle-tag {\n    color: #3F72E5; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.5px;\n  }\n  h1 {\n    font-size: 2.5rem; margin-bottom: 1.5rem;\n  }\n  .product-description {\n    line-height: 1.7; font-size: 1.1rem; color: #333;\n  }\n\n  \/* --- 2. FEATURES SECTION --- *\/\n  .product-features-section {\n    padding: 4rem 1rem; background-color: #f9fafb;\n  }\n  .features-grid-three-col {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n    gap: 2.5rem;\n    max-width: 1200px; margin: 0 auto;\n  }\n  .features-column h3 {\n    font-size: 1.3rem; margin-bottom: 1.5rem; color: #111;\n  }\n \n  \/* --- 3. USE CASES SECTION --- *\/\n  .use-cases-section {\n    padding: 4rem 1rem;\n  }\n  .use-cases-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n    gap: 2rem;\n    max-width: 1200px; margin: 0 auto;\n  }\n  .use-case-card {\n    background: white; border-radius: 20px; padding: 2rem; text-align: center;\n    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);\n  }\n  .use-case-card .icon {\n    width: 40px; height: 40px; color: #3F72E5; margin-bottom: 1rem;\n  }\n  .use-case-card h3 {\n    font-size: 1.2rem; color: #111; margin-bottom: 0.5rem;\n  }\n  .use-case-card p {\n    color: #333; font-size: 0.9rem; line-height: 1.6;\n  }\n\n  \/* --- 4. SCREENSHOTS SECTION --- *\/\n  .screenshots-section {\n    padding: 4rem 1rem; background-color: #f9fafb;\n  }\n  .screenshots-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr)); \/* Adjusted for 2-column layout *\/\n    gap: 2rem;\n    max-width: 1200px; margin: 0 auto;\n  }\n  .screenshot-card {\n    background: white; border-radius: 20px;\n    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);\n    overflow: hidden;\n  }\n  .screenshot-card img {\n    width: 100%; height: auto; display: block; background-color: #f9fafb;\n  }\n  .screenshot-card-content {\n    padding: 1.5rem;\n  }\n  .screenshot-card-content h4 {\n    font-size: 1.2rem; margin: 0 0 0.5rem 0; color: #111;\n  }\n  .screenshot-card-content p {\n    font-size: 0.95rem; line-height: 1.6; color: #333; margin: 0;\n  }\n \n \/* --- 5. DEMO VIDEO SECTION --- *\/\n  .demo-video-section {\n    padding: 4rem 1rem;\n  }\n  .video-card {\n    max-width: 1000px;\n    margin: 0 auto;\n    border-radius: 20px;\n    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);\n    overflow: hidden;\n  }\n  .video-wrapper {\n    position: relative;\n    padding-bottom: 56.25%; \/* 16:9 Aspect Ratio *\/\n    height: 0;\n  }\n  .video-wrapper video {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n  }\n\n  \/* --- RESPONSIVE STYLES --- *\/\n  @media (max-width: 900px) {\n    .features-grid-three-col, .screenshots-grid {\n      grid-template-columns: 1fr;\n    }\n  }\n\u003c\/style\u003e\n\u003c!-- END: Product Page --\u003e","brand":"Software Athlete","offers":[{"title":"Default Title","offer_id":55591865450822,"sku":null,"price":0.0,"currency_code":"EUR","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/asset-treemap.png?v=1765105722"},{"product_id":"navigation-button","title":"Navigation Button+","description":"\u003c!-- START: Product Page for Navigation Button+ --\u003e\n\u003cp\u003e \u003c\/p\u003e\n\u003c!-- 1. HERO SECTION --\u003e\n\u003csection class=\"product-hero-section\"\u003e\n\u003cdiv style=\"text-align: center;\" class=\"product-hero-container\"\u003e\n\u003c!-- PLACEHOLDER: Replace src with your product icon --\u003e \u003cimg style=\"margin-bottom: 32px; float: none;\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/navigationbutton.png?v=1769085146\" alt=\"Navigation Button+ Product Icon\" class=\"product-hero-icon\"\u003e\n\u003cp class=\"product-subtitle-tag\"\u003ePI Vision Custom Symbol\u003c\/p\u003e\n\u003ch1\u003eActionable Insights with Intelligent Navigation\u003c\/h1\u003e\n\u003cp class=\"product-description\"\u003eGo beyond simple links. Navigation Button+ empowers you to create smart, context-aware buttons that carry time ranges and asset context to target displays, or dynamically change destinations based on process data.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 2. FEATURES SECTION --\u003e\n\u003csection class=\"product-features-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eAdvanced Linking Logic \u0026amp; Design\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-grid-three-col\"\u003e\n\u003cdiv class=\"features-column\"\u003e\n\u003ch3\u003eDeep Context Awareness\u003c\/h3\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eAsset Context Pass-Through:\u003c\/strong\u003e Automatically pass the current asset or set a specific asset as the \"Root\" element on the target display for seamless drill-downs.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eTime Range Control:\u003c\/strong\u003e Pass your current display's time range or enforce a custom, hardcoded time window (e.g., \"*-8h to *\") on the destination.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eTarget Flexibility:\u003c\/strong\u003e Choose to open links in the current window to maintain flow or a new tab for multi-screen analysis.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-column\"\u003e\n\u003ch3\u003eDynamic \u0026amp; Static Sources\u003c\/h3\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eData-Driven Navigation:\u003c\/strong\u003e Link the URL to a PI Tag or Attribute. If the tag value changes, the button's destination updates automatically.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eIntegrated Search:\u003c\/strong\u003e Easily search your PI Vision server for existing displays to populate static links without copying and pasting URLs.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eSmart Validation:\u003c\/strong\u003e Built-in checks ensure your dynamic datasources provide valid URL formats before execution.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-column\"\u003e\n\u003ch3\u003eTotal Visual Customization\u003c\/h3\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eIcon Library:\u003c\/strong\u003e distinct visual cues using the integrated BoxIcons library. Position icons to the left or top of your text.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eStyling Freedom:\u003c\/strong\u003e Control background transparency, border radius (rounded corners), shadow depth, and border width.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eResponsive sizing:\u003c\/strong\u003e Adjust text size and icon size (10px - 100px) independently to fit any dashboard layout.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 3. USE CASES SECTION --\u003e\n\u003csection class=\"use-cases-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eSolve Complex Navigation Workflows\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-cases-grid\"\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg class=\"icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" fill=\"currentColor\"\u003e\u003cpath d=\"M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eAsset Drill-Downs\u003c\/h3\u003e\n\u003cp\u003eCreate a \"Details\" button on a summary screen. When clicked, it opens a detailed display passing the specific Pump or Turbine as the root context.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg class=\"icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" fill=\"currentColor\"\u003e\u003cpath d=\"M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eShift Handover Analysis\u003c\/h3\u003e\n\u003cp\u003eConfigure a \"Last Shift\" button that opens a report display with a hardcoded time context of \u003ccode\u003et-8h\u003c\/code\u003e to \u003ccode\u003et\u003c\/code\u003e, regardless of the current display time.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg class=\"icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" fill=\"currentColor\"\u003e\u003cpath d=\"M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eExternal Documentation\u003c\/h3\u003e\n\u003cp\u003eLink directly to SharePoint manuals, SOP PDFs, or maintenance tickets. Use the \"New Tab\" feature to keep the PI Vision display open.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg class=\"icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" fill=\"currentColor\"\u003e\u003cpath d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eDynamic Workflow\u003c\/h3\u003e\n\u003cp\u003eUse a dataset to drive the link. If a customized attribute reads \"Critical,\" the button dynamically routes the user to the Emergency Procedure display.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 4. SCREENSHOTS SECTION --\u003e\n\u003csection class=\"screenshots-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eConfiguration \u0026amp; Examples\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshots-grid\"\u003e\n\u003cdiv class=\"screenshot-card\" style=\"text-align: start;\"\u003e\n\u003c!-- PLACEHOLDER: Image showing the \"Link Source\" tab (Datasource vs Static) --\u003e \u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-navigation-buttondatasource-link.png?v=1769085731\" alt=\"Configuration panel showing Link Source options.\" style=\"margin-bottom: 16px; float: none;\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eDynamic Data Binding\u003c\/h4\u003e\n\u003cp\u003eSwitch between Static URLs or Datasource mode to read links directly from AF Attributes.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\" style=\"text-align: start;\"\u003e\n\u003c!-- PLACEHOLDER: Image showing the \"Link Parameters\" tab (Time\/Asset Context) --\u003e \u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-navigation-button-asset-context.png?v=1769085730\" alt=\"Configuration panel showing Asset and Time Context settings.\" style=\"margin-bottom: 16px; float: none;\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eSmart Context Passing\u003c\/h4\u003e\n\u003cp\u003eControl exactly what data is sent to the target: Current Assets, Root Paths, and Custom Time Ranges.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\" style=\"text-align: start;\"\u003e\n\u003c!-- PLACEHOLDER: Image showing the \"Style\" tab (Icons, Colors, Borders) --\u003e \u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-navigation-button-styles-1.png?v=1769085730\" alt=\"Style configuration tab showing colors and icon selection.\" style=\"margin-bottom: 16px; float: none;\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eVisual Customization\u003c\/h4\u003e\n\u003cp\u003eEasily adjust colors, borders, shadows, and select from a searchable library of icons.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\" style=\"text-align: start;\"\u003e\n\u003c!-- PLACEHOLDER: Image showing the final button on a dashboard --\u003e \u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-navigation-button-styles-2.png?v=1769085730\" alt=\"Final Navigation Button+ on a PI Vision display.\" style=\"margin-bottom: 16px; float: none;\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003ePolished UI Elements\u003c\/h4\u003e\n\u003cp\u003eCreate buttons that match your corporate branding with drop shadows and rounded corners.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003cstyle\u003e\n  \/* --- GENERAL SECTION STYLES (Unchanged from your request) --- *\/\n  .section-header {\n    display: flex; flex-direction: column; align-items: center; text-align: center;\n    max-width: 800px; margin: 0 auto 3.5rem auto;\n  }\n  .section-header h2 {\n    color: #111; margin-bottom: 1rem; font-size: 1.8rem;\n  }\n  .section-header p {\n    color: #333; line-height: 1.7; font-size: 1rem;\n  }\n  .feature-list {\n    list-style: none; padding: 0; margin: 0;\n  }\n  .feature-list li {\n    position: relative; padding-left: 30px; margin-bottom: 1.25rem;\n    line-height: 1.6; color: #333;\n  }\n  .feature-list li::before {\n    content: '✔'; position: absolute; left: 0; top: 2px;\n    color: #3F72E5; font-size: 1.2rem;\n  }\n  .feature-list li strong {\n    color: #111; font-weight: 600;\n  }\n\n  \/* --- 1. HERO SECTION --- *\/\n  .product-hero-section {\n    padding: 5rem 1rem; text-align: center;\n  }\n  .product-hero-container {\n      max-width: 700px; margin: 0 auto;\n  }\n  .product-hero-icon {\n      width: 80px; height: auto; margin-bottom: 2rem;\n  }\n  .product-subtitle-tag {\n    color: #3F72E5; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.5px;\n  }\n  h1 {\n    font-size: 2.5rem; margin-bottom: 1.5rem;\n  }\n  .product-description {\n    line-height: 1.7; font-size: 1.1rem; color: #333;\n  }\n\n  \/* --- 2. FEATURES SECTION --- *\/\n  .product-features-section {\n    padding: 4rem 1rem; background-color: #f9fafb;\n  }\n  .features-grid-three-col {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n    gap: 2.5rem;\n    max-width: 1200px; margin: 0 auto;\n  }\n  .features-column h3 {\n    font-size: 1.3rem; margin-bottom: 1.5rem; color: #111;\n  }\n \n  \/* --- 3. USE CASES SECTION --- *\/\n  .use-cases-section {\n    padding: 4rem 1rem;\n  }\n  .use-cases-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n    gap: 2rem;\n    max-width: 1200px; margin: 0 auto;\n  }\n  .use-case-card {\n    background: white; border-radius: 20px; padding: 2rem; text-align: center;\n    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);\n  }\n  .use-case-card .icon {\n    width: 40px; height: 40px; color: #3F72E5; margin-bottom: 1rem;\n  }\n  .use-case-card h3 {\n    font-size: 1.2rem; color: #111; margin-bottom: 0.5rem;\n  }\n  .use-case-card p {\n    color: #333; font-size: 0.9rem; line-height: 1.6;\n  }\n\n  \/* --- 4. SCREENSHOTS SECTION --- *\/\n  .screenshots-section {\n    padding: 4rem 1rem; background-color: #f9fafb;\n  }\n  .screenshots-grid {\n    display: grid;\n    grid-template-columns: 1fr; \/* Default to 1 column for mobile *\/\n    gap: 2rem;\n    max-width: 1200px; margin: 0 auto;\n  }\n  .screenshot-card {\n    background: white; border-radius: 20px;\n    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);\n    overflow: hidden;\n  }\n  .screenshot-card img {\n    width: 100%; height: auto; display: block; background-color: #f9fafb;\n  }\n  .screenshot-card-content {\n    padding: 1.5rem;\n  }\n  .screenshot-card-content h4 {\n    font-size: 1.2rem; margin: 0 0 0.5rem 0; color: #111;\n  }\n  .screenshot-card-content p {\n    font-size: 0.95rem; line-height: 1.6; color: #333; margin: 0;\n  }\n \n  \/* --- 5. DEMO VIDEO SECTION --- *\/\n  .demo-video-section {\n    padding: 4rem 1rem;\n  }\n  .video-card {\n    max-width: 1000px; margin: 0 auto; border-radius: 20px;\n    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);\n    overflow: hidden;\n  }\n  .video-wrapper {\n    position: relative; padding-bottom: 56.25%; height: 0;\n  }\n  .video-wrapper video {\n    position: absolute; top: 0; left: 0; width: 100%; height: 100%;\n  }\n\n  \/* --- RESPONSIVE STYLES --- *\/\n  @media (min-width: 750px) {\n    .screenshots-grid {\n      grid-template-columns: 1fr 1fr; \/* 2 columns for tablet and up *\/\n    }\n  }\n\u003c\/style\u003e\n\u003c!-- END: Product Page --\u003e","brand":"Software Athlete","offers":[{"title":"Default Title","offer_id":55855239102790,"sku":null,"price":0.0,"currency_code":"EUR","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/navigationbutton.png?v=1769085146"},{"product_id":"playback-tool","title":"Playback Tool","description":"\u003c!-- START: Product Page for Playback Tool --\u003e\n\u003cp\u003e \u003c\/p\u003e\n\u003c!-- 1. HERO SECTION --\u003e\n\u003csection class=\"product-hero-section\"\u003e\n\u003cdiv class=\"product-hero-container\" style=\"text-align: center;\"\u003e\n\u003c!-- FIX 1: Added explicit centering style to this image --\u003e \u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/playback.png?v=1769086034\" style=\"display: block; margin: 0 auto 20px auto; max-width: 100px;\"\u003e\n\u003cp class=\"product-subtitle-tag\"\u003ePI Vision Custom Tool\u003c\/p\u003e\n\u003ch1\u003eVisualize History with Precision Playback\u003c\/h1\u003e\n\u003cp class=\"product-description\"\u003eTransform static trends into dynamic replays. The Playback Tool allows engineers and operators to scrub through historical data, define precise time windows, and loop critical events for deep Root Cause Analysis.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 2. FEATURES SECTION --\u003e\n\u003csection class=\"product-features-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eEngineered for Root Cause Analysis\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-grid-three-col\"\u003e\n\u003cdiv class=\"features-column\"\u003e\n\u003ch3\u003ePrecision Time Control\u003c\/h3\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eDecoupled Span \u0026amp; Step:\u003c\/strong\u003e Unlike standard playback, define a \"Display Span\" (e.g., 1 hour) independent of the \"Step Size\" (e.g., 5 minutes) to create overlapping views that ensure no data is missed.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eVariable Speed:\u003c\/strong\u003e Control the playback speed with a custom interval timer, allowing for slow-motion review of fast process upsets.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eLoop Mode:\u003c\/strong\u003e Automatically repeat a specific time range to analyze complex event sequences without manual resetting.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-column\"\u003e\n\u003ch3\u003eSmart Synchronization\u003c\/h3\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eContext Awareness:\u003c\/strong\u003e The tool detects when you manually zoom or pan the PI Vision display and automatically pauses playback to prevent interference.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eAuto-Sync:\u003c\/strong\u003e Clicking \"Reset to Display Time\" instantly captures your current display range and calculates smart defaults for Span and Step size.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eNon-Intrusive:\u003c\/strong\u003e The toolbar integrates seamlessly into the workspace without obscuring your critical trends or assets.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-column\"\u003e\n\u003ch3\u003eSeamless User Experience\u003c\/h3\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eKeyboard Shortcuts:\u003c\/strong\u003e Navigate your data without using the mouse. Use Left\/Right arrows to step through time and Spacebar to Play\/Pause.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eVisual Feedback:\u003c\/strong\u003e A live progress slider allows for intuitive \"scrubbing\" through the timeline, with distinct badges indicating active playback status.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eSafe Defaults:\u003c\/strong\u003e \"Smart Initialization\" ensures the tool opens with settings relevant to your current view, preventing accidental jumps to irrelevant dates.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 3. USE CASES SECTION --\u003e\n\u003csection class=\"use-cases-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eSolve Complex Analysis Workflows\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-cases-grid\"\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg fill=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"icon\"\u003e\n                \u003cpath d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z\"\u003e\u003c\/path\u003e\n            \u003c\/svg\u003e\n\u003ch3\u003eRoot Cause Analysis\u003c\/h3\u003e\n\u003cp\u003eIsolate a production failure. Set a loop around the 10-minute window of the event and replay it repeatedly to spot the exact moment a sensor deviated.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg fill=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"icon\"\u003e\n                \u003cpath d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 14H9V8h2v8zm4 0h-2V8h2v8z\"\u003e\u003c\/path\u003e\n            \u003c\/svg\u003e\n\u003ch3\u003eOperator Training\u003c\/h3\u003e\n\u003cp\u003eReplay historical startup or shutdown sequences in real-time speed to train new operators on what \"normal\" looks like on the dashboard.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg fill=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"icon\"\u003e\n                \u003cpath d=\"M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm2 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z\"\u003e\u003c\/path\u003e\n            \u003c\/svg\u003e\n\u003ch3\u003eShift Reviews\u003c\/h3\u003e\n\u003cp\u003eRapidly review the previous 8-hour shift in just a few minutes by setting a large step size, allowing supervisors to catch anomalies quickly.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg fill=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"icon\"\u003e\n                \u003cpath d=\"M16 6l2.29 2.29-4.88 4.88-4-4L2 16.59 3.41 18l6-6 4 4 6.3-6.29L22 12V6z\"\u003e\u003c\/path\u003e\n            \u003c\/svg\u003e\n\u003ch3\u003eProcess Optimization\u003c\/h3\u003e\n\u003cp\u003eVisualize the correlation between upstream changes and downstream effects by replaying data across multiple assets simultaneously.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 4. INTERFACE SHOWCASE SECTION --\u003e\n\u003csection class=\"screenshots-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eIntuitive Interface\u003c\/h2\u003e\n\u003cp\u003eEverything you need to manipulate time, contained in a single, clean toolbar.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c!-- MAIN LARGE IMAGE PLACEHOLDER --\u003e\n\u003cdiv class=\"main-screenshot-container\" style=\"max-width: 900px; margin: 0 auto 3rem auto; box-shadow: 0 10px 30px rgba(0,0,0,0.15); border-radius: 12px; overflow: hidden;\"\u003e\n\u003c!-- FIX 2: Added width: 100% and display: block to fill container --\u003e \u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-playback-tool.png?v=1769086392\" style=\"width: 100%; height: auto; display: block;\"\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshots-grid\"\u003e\n\u003c!-- Text Only Card 1 --\u003e\n\u003cdiv style=\"text-align: start;\" class=\"screenshot-card\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eTimeline Scrubbing\u003c\/h4\u003e\n\u003cp\u003eThe interactive slider provides immediate feedback on your position in time. Drag it to instantly jump to any point in the range, with a clear timestamp readout above.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c!-- Text Only Card 2 --\u003e\n\u003cdiv style=\"text-align: start;\" class=\"screenshot-card\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eFlexible Configuration\u003c\/h4\u003e\n\u003cp\u003eDefine custom \"Display Spans\" (window size) and \"Step Sizes\" (jump distance) independently. Choose units ranging from Seconds to Years to fit any process speed.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c!-- Text Only Card 3 --\u003e\n\u003cdiv style=\"text-align: start;\" class=\"screenshot-card\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eLoop \u0026amp; Replay\u003c\/h4\u003e\n\u003cp\u003eActivate \"Loop Mode\" via the toolbar button to continuously replay a specific event window, allowing for hands-free analysis of complex data patterns.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c!-- Text Only Card 4 --\u003e\n\u003cdiv style=\"text-align: start;\" class=\"screenshot-card\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eSmart Sync\u003c\/h4\u003e\n\u003cp\u003eThe \"Reset to Display Time\" button instantly reads your current chart view and calculates intelligent defaults, keeping your workflow smooth and error-free.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003cstyle\u003e\n    \/* --- GENERAL SECTION STYLES --- *\/\n    .section-header {\n        display: flex; flex-direction: column; align-items: center; text-align: center;\n        max-width: 800px; margin: 0 auto 3.5rem auto;\n    }\n    .section-header h2 {\n        color: #111; margin-bottom: 1rem; font-size: 1.8rem;\n    }\n    .section-header p {\n        color: #333; line-height: 1.7; font-size: 1rem;\n    }\n    .feature-list {\n        list-style: none; padding: 0; margin: 0;\n    }\n    .feature-list li {\n        position: relative; padding-left: 30px; margin-bottom: 1.25rem;\n        line-height: 1.6; color: #333;\n    }\n    .feature-list li::before {\n        content: '✔'; position: absolute; left: 0; top: 2px;\n        color: #3F72E5; font-size: 1.2rem;\n    }\n    .feature-list li strong {\n        color: #111; font-weight: 600;\n    }\n\n    \/* --- 1. HERO SECTION --- *\/\n    .product-hero-section {\n        padding: 5rem 1rem; text-align: center;\n    }\n    .product-hero-container {\n        max-width: 700px; margin: 0 auto;\n    }\n    \/* Removed unused CSS for hero icon class since we use inline style now *\/\n    .product-subtitle-tag {\n        color: #3F72E5; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.5px;\n    }\n    h1 {\n        font-size: 2.5rem; margin-bottom: 1.5rem;\n    }\n    .product-description {\n        line-height: 1.7; font-size: 1.1rem; color: #333;\n    }\n\n    \/* --- 2. FEATURES SECTION --- *\/\n    .product-features-section {\n        padding: 4rem 1rem; background-color: #f9fafb;\n    }\n    .features-grid-three-col {\n        display: grid;\n        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n        gap: 2.5rem;\n        max-width: 1200px; margin: 0 auto;\n    }\n    .features-column h3 {\n        font-size: 1.3rem; margin-bottom: 1.5rem; color: #111;\n    }\n\n    \/* --- 3. USE CASES SECTION --- *\/\n    .use-cases-section {\n        padding: 4rem 1rem;\n    }\n    .use-cases-grid {\n        display: grid;\n        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n        gap: 2rem;\n        max-width: 1200px; margin: 0 auto;\n    }\n    .use-case-card {\n        background: white; border-radius: 20px; padding: 2rem; text-align: center;\n        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);\n    }\n    .use-case-card .icon {\n        width: 40px; height: 40px; color: #3F72E5; margin-bottom: 1rem;\n    }\n    .use-case-card h3 {\n        font-size: 1.2rem; color: #111; margin-bottom: 0.5rem;\n    }\n    .use-case-card p {\n        color: #333; font-size: 0.9rem; line-height: 1.6;\n    }\n\n    \/* --- 4. SCREENSHOTS SECTION --- *\/\n    .screenshots-section {\n        padding: 4rem 1rem; background-color: #f9fafb;\n    }\n    .screenshots-grid {\n        display: grid;\n        grid-template-columns: 1fr;\n        gap: 2rem;\n        max-width: 1200px; margin: 0 auto;\n    }\n    .screenshot-card {\n        background: white; border-radius: 20px;\n        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);\n        border: 1px solid #eee;\n        overflow: hidden;\n        height: 100%;\n    }\n    .screenshot-card-content {\n        padding: 2rem;\n    }\n    .screenshot-card-content h4 {\n        font-size: 1.2rem; margin: 0 0 0.8rem 0; color: #111;\n        border-top: 3px solid #3F72E5;\n        padding-top: 1rem;\n        display: inline-block;\n    }\n    .screenshot-card-content p {\n        font-size: 0.95rem; line-height: 1.6; color: #555; margin: 0;\n    }\n\n    \/* --- RESPONSIVE STYLES --- *\/\n    @media (min-width: 750px) {\n        .screenshots-grid {\n            grid-template-columns: 1fr 1fr;\n        }\n    }\n\u003c\/style\u003e\n\u003c!-- END: Product Page --\u003e","brand":"Software Athlete","offers":[{"title":"Default Title","offer_id":55855291040070,"sku":null,"price":0.0,"currency_code":"EUR","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/playback.png?v=1769086034"},{"product_id":"pi-vision-duval-triangle-dga","title":"Duval Triangle+","description":"\u003c!-- START: Product Page for Duval Triangle --\u003e\n\u003cp\u003e \u003c\/p\u003e\n\u003c!-- 1. HERO SECTION --\u003e\n\u003csection class=\"product-hero-section\"\u003e\n\u003cdiv class=\"product-hero-container\" style=\"text-align: center;\"\u003e\n\u003c!-- PLACEHOLDER: Replace src with your product icon --\u003e \u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/duvaltriangleplus.png?v=1772361442\" alt=\"Duval Triangle Product Icon\" class=\"product-hero-icon\" style=\"margin-bottom: 32px; float: none;\"\u003e\n\u003cp class=\"product-subtitle-tag\"\u003ePI Vision Custom Symbol\u003c\/p\u003e\n\u003ch1\u003eProactive Transformer Health Diagnostics\u003c\/h1\u003e\n\u003cp class=\"product-description\"\u003eTransform raw Dissolved Gas Analysis (DGA) data into visual, actionable insights. The Duval Triangle symbol empowers reliability engineers to instantly detect early-stage transformer faults, track degradation history, and prevent catastrophic failures natively within AVEVA PI Vision.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 2. FEATURES SECTION --\u003e\n\u003csection class=\"product-features-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eAdvanced DGA Analysis \u0026amp; Visualization\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-grid-three-col\"\u003e\n\u003cdiv class=\"features-column\"\u003e\n\u003ch3\u003eComprehensive Diagnostics\u003c\/h3\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eMultiple Triangle Types:\u003c\/strong\u003e Fully supports Duval Triangles 1, 2, 4, and 5 for accurate diagnosis across different transformer types and fault temperatures.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eAutomatic Classification:\u003c\/strong\u003e Instantly plots data into standard fault zones (PD, T1-T3, D1-D2, DT) using precise IEC\/IEEE coordinate boundaries.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eBad Data Handling:\u003c\/strong\u003e Automatically filters out invalid or missing PI data, ensuring your diagnostic charts remain accurate and crash-free.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-column\"\u003e\n\u003ch3\u003eHistorical Trajectory Tracking\u003c\/h3\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eVisual History Trail:\u003c\/strong\u003e Automatically plot past readings based on your display's time range to see exactly how a fault is evolving over time.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eIntelligent Fading:\u003c\/strong\u003e Older data points smoothly decrease in size and opacity, creating a highly intuitive visual timeline of transformer degradation.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eInteractive Tooltips:\u003c\/strong\u003e Hover over any point—current or historical—to view the exact timestamps and gas percentages.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-column\"\u003e\n\u003ch3\u003eTotal Visual Customization\u003c\/h3\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eCorporate Branding:\u003c\/strong\u003e Customize the fill colors, borders, and labels of every individual fault zone to match your operational dashboards.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eAttention Mechanics:\u003c\/strong\u003e Enable the \"Pulse\" animation to make the current transformer state actively ripple, ensuring it stands out on crowded screens.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eGrid \u0026amp; Axis Control:\u003c\/strong\u003e Toggle tick marks (inside or outside), major axes, inner grid lines, and override chemical labels to suit your exact needs.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 3. USE CASES SECTION --\u003e\n\u003csection class=\"use-cases-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eSolve Complex Reliability Workflows\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-cases-grid\"\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003c!-- Power\/Lightning Icon --\u003e \u003csvg class=\"icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" fill=\"currentColor\"\u003e\u003cpath d=\"M13 2.05v3.03c3.39.49 6 3.39 6 6.92 0 .9-.22 1.75-.61 2.5l2.6 1.5c.65-1.15 1.01-2.53 1.01-4 0-4.42-3.58-8-8-8zm-2 0v3.03C7.61 5.57 5 8.47 5 12c0 .9.22 1.75.61 2.5l-2.6 1.5C2.35 14.85 2 13.47 2 12c0-4.42 3.58-8 8-8zm1 5l-5 7h4v6l5-7h-4v-6z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eStandard Transformer Fleets\u003c\/h3\u003e\n\u003cp\u003eMonitor your primary mineral oil transformers. Distinguish between low-energy sparking, high-energy arcing, and severe thermal faults to prioritize maintenance.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003c!-- Switch\/Settings Icon --\u003e \u003csvg class=\"icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" fill=\"currentColor\"\u003e\u003cpath d=\"M19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98s.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.23.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eLoad Tap Changers (LTCs)\u003c\/h3\u003e\n\u003cp\u003eLTCs naturally generate gas during normal switching. Use specialized boundaries to filter out normal operational arcing from severe abnormal faults.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003c!-- Warning\/Alert Icon --\u003e \u003csvg class=\"icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" fill=\"currentColor\"\u003e\u003cpath d=\"M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eStray Gassing Detection\u003c\/h3\u003e\n\u003cp\u003eIdentify low-temperature degradation and \"stray gassing\" in aging transformers before they evolve into critical thermal or electrical issues.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003c!-- History\/Timeline Icon --\u003e \u003csvg class=\"icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" fill=\"currentColor\"\u003e\u003cpath d=\"M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eFault Trajectory Tracking\u003c\/h3\u003e\n\u003cp\u003eWatch a fault evolve in real-time. See if a transformer is moving from a low-energy T1 fault directly into a critical T3 fault over the last 30 days.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 4. SCREENSHOTS SECTION (The 4 Triangle Types) --\u003e\n\u003csection class=\"screenshots-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eSupported Duval Triangle Types\u003c\/h2\u003e\n\u003cp\u003eSeamlessly switch between diagnostic models directly from the PI Vision formatting pane.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshots-grid\"\u003e\n\u003cdiv class=\"screenshot-card\" style=\"text-align: start;\"\u003e\n\u003c!-- PLACEHOLDER: Image showing Triangle 1 --\u003e \u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-duval-triangle-1.png?v=1772361895\" alt=\"Duval Triangle 1 - Mineral Oil Transformers\" style=\"margin-bottom: 16px; float: none;\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eTriangle 1: Standard Mineral Oil\u003c\/h4\u003e\n\u003cp\u003eThe industry standard for general fault classification. Maps Methane (CH₄), Ethylene (C₂H₄), and Acetylene (C₂H₂) to diagnose PD, Thermal, and Arcing faults.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\" style=\"text-align: start;\"\u003e\n\u003c!-- PLACEHOLDER: Image showing Triangle 2 --\u003e \u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-duval-triangle-2.png?v=1772361895\" alt=\"Duval Triangle 2 - Load Tap Changers\" style=\"margin-bottom: 16px; float: none;\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eTriangle 2: Load Tap Changers\u003c\/h4\u003e\n\u003cp\u003eSpecifically designed for oil-filled LTCs. Shifts the fault boundaries to account for expected switching arcs, accurately isolating true abnormal faults.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\" style=\"text-align: start;\"\u003e\n\u003c!-- PLACEHOLDER: Image showing Triangle 4 --\u003e \u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-duval-triangle-4.png?v=1772361894\" alt=\"Duval Triangle 4 - Low Temperature Faults\" style=\"margin-bottom: 16px; float: none;\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eTriangle 4: Low-Temperature Faults\u003c\/h4\u003e\n\u003cp\u003eUtilizes Hydrogen (H₂), Methane (CH₄), and Ethane (C₂H₆) to diagnose low-energy faults, paper carbonization, and stray gassing.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\" style=\"text-align: start;\"\u003e\n\u003c!-- PLACEHOLDER: Image showing Triangle 5 --\u003e \u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-duval-triangle-5.png?v=1772361895\" alt=\"Duval Triangle 5 - High Temperature Faults\" style=\"margin-bottom: 16px; float: none;\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eTriangle 5: High-Temp \u0026amp; Non-Mineral Oils\u003c\/h4\u003e\n\u003cp\u003eCombines Methane, Ethylene, and Ethane to analyze high-temperature thermal degradation. Excellent for complementing Triangle 1 findings.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003cstyle\u003e\n  \/* --- GENERAL SECTION STYLES --- *\/\n  .section-header {\n    display: flex; flex-direction: column; align-items: center; text-align: center;\n    max-width: 800px; margin: 0 auto 3.5rem auto;\n  }\n  .section-header h2 {\n    color: #111; margin-bottom: 1rem; font-size: 1.8rem;\n  }\n  .section-header p {\n    color: #333; line-height: 1.7; font-size: 1rem;\n  }\n  .feature-list {\n    list-style: none; padding: 0; margin: 0;\n  }\n  .feature-list li {\n    position: relative; padding-left: 30px; margin-bottom: 1.25rem;\n    line-height: 1.6; color: #333;\n  }\n  .feature-list li::before {\n    content: '✔'; position: absolute; left: 0; top: 2px;\n    color: #3F72E5; font-size: 1.2rem;\n  }\n  .feature-list li strong {\n    color: #111; font-weight: 600;\n  }\n\n  \/* --- 1. HERO SECTION --- *\/\n  .product-hero-section {\n    padding: 5rem 1rem; text-align: center;\n  }\n  .product-hero-container {\n      max-width: 700px; margin: 0 auto;\n  }\n  .product-hero-icon {\n      width: 80px; height: auto; margin-bottom: 2rem;\n  }\n  .product-subtitle-tag {\n    color: #3F72E5; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.5px;\n  }\n  h1 {\n    font-size: 2.5rem; margin-bottom: 1.5rem;\n  }\n  .product-description {\n    line-height: 1.7; font-size: 1.1rem; color: #333;\n  }\n\n  \/* --- 2. FEATURES SECTION --- *\/\n  .product-features-section {\n    padding: 4rem 1rem; background-color: #f9fafb;\n  }\n  .features-grid-three-col {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n    gap: 2.5rem;\n    max-width: 1200px; margin: 0 auto;\n  }\n  .features-column h3 {\n    font-size: 1.3rem; margin-bottom: 1.5rem; color: #111;\n  }\n \n  \/* --- 3. USE CASES SECTION --- *\/\n  .use-cases-section {\n    padding: 4rem 1rem;\n  }\n  .use-cases-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n    gap: 2rem;\n    max-width: 1200px; margin: 0 auto;\n  }\n  .use-case-card {\n    background: white; border-radius: 20px; padding: 2rem; text-align: center;\n    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);\n  }\n  .use-case-card .icon {\n    width: 40px; height: 40px; color: #3F72E5; margin-bottom: 1rem;\n  }\n  .use-case-card h3 {\n    font-size: 1.2rem; color: #111; margin-bottom: 0.5rem;\n  }\n  .use-case-card p {\n    color: #333; font-size: 0.9rem; line-height: 1.6;\n  }\n\n  \/* --- 4. SCREENSHOTS SECTION --- *\/\n  .screenshots-section {\n    padding: 4rem 1rem; background-color: #f9fafb;\n  }\n  .screenshots-grid {\n    display: grid;\n    grid-template-columns: 1fr; \/* Default to 1 column for mobile *\/\n    gap: 2rem;\n    max-width: 1200px; margin: 0 auto;\n  }\n  .screenshot-card {\n    background: white; border-radius: 20px;\n    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);\n    overflow: hidden;\n  }\n  .screenshot-card img {\n    width: 100%; height: auto; display: block; background-color: #f9fafb;\n  }\n  .screenshot-card-content {\n    padding: 1.5rem;\n  }\n  .screenshot-card-content h4 {\n    font-size: 1.2rem; margin: 0 0 0.5rem 0; color: #111;\n  }\n  .screenshot-card-content p {\n    font-size: 0.95rem; line-height: 1.6; color: #333; margin: 0;\n  }\n \n  \/* --- RESPONSIVE STYLES --- *\/\n  @media (min-width: 750px) {\n    .screenshots-grid {\n      grid-template-columns: 1fr 1fr; \/* 2 columns for tablet and up *\/\n    }\n  }\n\u003c\/style\u003e\n\u003c!-- END: Product Page --\u003e","brand":"Software Athlete","offers":[{"title":"Default Title","offer_id":56076767166790,"sku":null,"price":0.0,"currency_code":"EUR","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/duvaltriangleplus_4d8c34e6-2bff-4e4a-8581-f343def0691f.png?v=1772361515"},{"product_id":"pi-vision-event-analytics-kpi","title":"Event Analytics KPI+","description":"\u003c!-- START: Product Page for Event Analytics KPI+ --\u003e\n\u003cp\u003e \u003c\/p\u003e\n\u003c!-- 1. HERO SECTION --\u003e\n\u003csection class=\"product-hero-section\"\u003e\n\u003cdiv class=\"product-hero-container\" style=\"text-align: center;\"\u003e\n\u003cimg class=\"product-hero-icon\" alt=\"Event Analytics KPI+ Product Icon\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/eventanalyticskpi.png?v=1772362207\" style=\"margin-bottom: 32px; float: none;\"\u003e\n\u003cp class=\"product-subtitle-tag\"\u003ePI Vision Custom Symbol • Vision Library+\u003c\/p\u003e\n\u003ch1\u003eHigh-Level Visibility with Event Analytics KPI+\u003c\/h1\u003e\n\u003cp class=\"product-description\"\u003eStop digging through individual event rows. The Event Analytics KPI+ symbol is a powerful BI component that instantly calculates and displays aggregated metrics in a responsive grid of cards. Spot critical trends at a glance before diving into the details.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 2. FEATURES SECTION --\u003e\n\u003csection class=\"product-features-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eAggregated Insights, Dynamically Generated\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-grid-three-col\"\u003e\n\u003cdiv class=\"features-column\"\u003e\n\u003ch3\u003eDynamic Calculation Engine\u003c\/h3\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eValues \u0026amp; Series:\u003c\/strong\u003e Combine Values (the math) and Series (the grouping) to automatically generate multiple KPI cards from your event frames.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eSummary Types:\u003c\/strong\u003e Apply powerful calculations to your numerical data, including Count, Sum, Average, Minimum, and Maximum.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eSmart Formatting:\u003c\/strong\u003e Time-based properties like Event Duration are automatically formatted into easily readable timespans.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-column\"\u003e\n\u003ch3\u003eInteractive Dashboards\u003c\/h3\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eMaster Filter:\u003c\/strong\u003e Use the KPI grid as a dashboard controller. Click a card to instantly filter all other Event Analytics charts and tables on the display.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eHierarchical Drilldown:\u003c\/strong\u003e Navigate deeper. Click a parent category (e.g., Asset) to animate the cards and reveal sub-categories (e.g., Root Cause).\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eTop\/Bottom N Analysis:\u003c\/strong\u003e Display only your top bad actors. Group remaining categories into a single \"Others\" card to preserve your grand total.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-column\"\u003e\n\u003ch3\u003eFlexible Layout \u0026amp; Styling\u003c\/h3\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eAuto-Responsive Grids:\u003c\/strong\u003e Choose \"Auto\" mode to let the symbol dynamically calculate the perfect row and column count to fit your screen.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eMultistate Formatting:\u003c\/strong\u003e Change card colors based on calculated values. Apply alerts to the text, the full background fill, or an accent border.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eCustom Typography:\u003c\/strong\u003e Completely customize font families, sizes, and alignments independently for the massive KPI numbers and their titles.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 3. USE CASES SECTION --\u003e\n\u003csection class=\"use-cases-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eThe Perfect Entry Point for Your Dashboards\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-cases-grid\"\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg fill=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"icon\"\u003e\u003cpath d=\"M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm-1-13h2v2h-2zm0 4h2v6h-2z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eDowntime Summaries\u003c\/h3\u003e\n\u003cp\u003eDisplay the Total Duration of all downtime events this week as a single, massive KPI card to keep teams aligned.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg fill=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"icon\"\u003e\u003cpath d=\"M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-1 14H5V8h6v7zm2 0v-7h6v7h-6z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eSafety \u0026amp; Excursion Counts\u003c\/h3\u003e\n\u003cp\u003eShow the exact Count of high-severity safety incidents or environmental limit violations for immediate awareness.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg fill=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"icon\"\u003e\u003cpath d=\"M4 10h3v7H4zM10.5 10h3v7h-3zM17 10h3v7h-3zM22 6H2V4h20v2z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eSide-by-Side Comparisons\u003c\/h3\u003e\n\u003cp\u003eMatrix your data. Compare the Average Duration of events grouped by different Assets or Root Causes right next to each other.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg fill=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"icon\"\u003e\u003cpath d=\"M3 3h18v2H3zm0 4h12v2H3zm0 4h18v2H3zm0 4h12v2H3z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eDashboard Controller\u003c\/h3\u003e\n\u003cp\u003eAct as the interactive header for your BI displays, letting users click a KPI to seamlessly filter the charts beneath it.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 4. SCREENSHOTS SECTION --\u003e\n\u003csection class=\"screenshots-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eEvent Aggregation, Summarized Instantly\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshots-grid\"\u003e\n\u003cdiv class=\"screenshot-card\" style=\"text-align: start;\"\u003e\n\u003cimg alt=\"A grid of KPI cards in PI Vision showing aggregated event values.\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-events-kpi-1.png?v=1772362316\" style=\"margin-bottom: 16px; float: none;\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eDynamic Card Generation\u003c\/h4\u003e\n\u003cp\u003eConfigure a Value (like Count) and a Series (like Asset) to automatically generate a distinct card for each unique category, perfectly arranged in an auto-responsive layout.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\" style=\"text-align: start;\"\u003e\n\u003cimg alt=\"A selected KPI card glowing, acting as a master filter for the dashboard.\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-events-kpi-filter.png?v=1772362317\" style=\"margin-bottom: 16px; float: none;\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eMaster Filter Dashboard Control\u003c\/h4\u003e\n\u003cp\u003eClick any card to make it glow as the active filter. It instantly broadcasts the selected category to update all other Event Analytics Charts, Pies, and Gantts on the screen.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\" style=\"text-align: start;\"\u003e\n\u003cimg alt=\"A drilldown view moving from a parent series to a child series.\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-events-kpi-drilldown.png?v=1772362316\" style=\"margin-bottom: 16px; float: none;\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eInteractive Drilldown\u003c\/h4\u003e\n\u003cp\u003eStart with a high-level view (like Assets). Click a card to animate deeper into a second Series (like Root Causes for that specific Asset), complete with a \"Drill Up\" button to navigate back.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\" style=\"text-align: start;\"\u003e\n\u003cimg alt=\"KPI cards displaying conditional formatting on the text, fill, and borders.\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-events-kpi-2.png?v=1772362316\" style=\"margin-bottom: 16px; float: none;\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eConditional Multistate Formatting\u003c\/h4\u003e\n\u003cp\u003eApply thresholds to your values. Change the number color, fill the entire card background (with auto-contrasting text), or add a sleek colored accent border to the left side.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv style=\"text-align: start;\" class=\"screenshot-card\"\u003e\n\u003cimg style=\"margin-bottom: 16px; float: none;\" alt=\"KPI cards showing top 3 bad actors and an 'Others' summary card.\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-events-kpi-top-n.png?v=1772362448\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eTop N \u0026amp; \"Show Others\"\u003c\/h4\u003e\n\u003cp\u003eRestrict massive lists to just the \"Top 5\" assets ranked by downtime. Group all remaining event data into an \"Others\" card so you never lose the grand total perspective.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003cstyle\u003e\n  \/* --- GENERAL SECTION STYLES --- *\/\n  .section-header {\n    display: flex; flex-direction: column; align-items: center; text-align: center;\n    max-width: 800px; margin: 0 auto 3.5rem auto;\n  }\n  .section-header h2 {\n    color: #111; margin-bottom: 1rem; font-size: 1.8rem;\n  }\n  .section-header p {\n    color: #333; line-height: 1.7; font-size: 1rem;\n  }\n  .feature-list {\n    list-style: none; padding: 0; margin: 0;\n  }\n  .feature-list li {\n    position: relative; padding-left: 30px; margin-bottom: 1.25rem;\n    line-height: 1.6; color: #333;\n  }\n  .feature-list li::before {\n    content: '✔'; position: absolute; left: 0; top: 2px;\n    color: #3F72E5; font-size: 1.2rem;\n  }\n  .feature-list li strong {\n    color: #111; font-weight: 600;\n  }\n\n  \/* --- 1. HERO SECTION --- *\/\n  .product-hero-section {\n    padding: 5rem 1rem; text-align: center;\n  }\n  .product-hero-container {\n      max-width: 700px; margin: 0 auto;\n  }\n  .product-hero-icon {\n      width: 80px; height: auto; margin-bottom: 2rem;\n  }\n  .product-subtitle-tag {\n    color: #3F72E5; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.5px;\n  }\n  h1 {\n    font-size: 2.5rem; margin-bottom: 1.5rem;\n  }\n  .product-description {\n    line-height: 1.7; font-size: 1.1rem; color: #333;\n  }\n\n  \/* --- 2. FEATURES SECTION --- *\/\n  .product-features-section {\n    padding: 4rem 1rem; background-color: #f9fafb;\n  }\n  .features-grid-three-col {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n    gap: 2.5rem;\n    max-width: 1200px; margin: 0 auto;\n  }\n  .features-column h3 {\n    font-size: 1.3rem; margin-bottom: 1.5rem; color: #111;\n  }\n \n  \/* --- 3. USE CASES SECTION --- *\/\n  .use-cases-section {\n    padding: 4rem 1rem;\n  }\n  .use-cases-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n    gap: 2rem;\n    max-width: 1200px; margin: 0 auto;\n  }\n  .use-case-card {\n    background: white; border-radius: 20px; padding: 2rem; text-align: center;\n    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);\n  }\n  .use-case-card .icon {\n    width: 40px; height: 40px; color: #3F72E5; margin-bottom: 1rem;\n  }\n  .use-case-card h3 {\n    font-size: 1.2rem; color: #111; margin-bottom: 0.5rem;\n  }\n  .use-case-card p {\n    color: #333; font-size: 0.9rem; line-height: 1.6;\n  }\n\n  \/* --- 4. SCREENSHOTS SECTION --- *\/\n  .screenshots-section {\n    padding: 4rem 1rem; background-color: #f9fafb;\n  }\n  .screenshots-grid {\n    display: grid;\n    grid-template-columns: repeat(2, 1fr); \/* Changed to 2 columns *\/\n    gap: 2rem;\n    max-width: 1200px; margin: 0 auto;\n  }\n  .screenshot-card {\n    background: white; border-radius: 20px;\n    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);\n    overflow: hidden;\n  }\n  .screenshot-card img {\n    width: 100%; height: auto; display: block; background-color: #f9fafb;\n  }\n  .screenshot-card-content {\n    padding: 1.5rem;\n  }\n  .screenshot-card-content h4 {\n    font-size: 1.2rem; margin: 0 0 0.5rem 0; color: #111;\n  }\n  .screenshot-card-content p {\n    font-size: 0.95rem; line-height: 1.6; color: #333; margin: 0;\n  }\n \n \/* --- 5. DEMO VIDEO SECTION --- *\/\n  .demo-video-section {\n    padding: 4rem 1rem;\n  }\n  .video-card {\n    max-width: 1000px;\n    margin: 0 auto;\n    border-radius: 20px;\n    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);\n    overflow: hidden;\n  }\n  .video-wrapper {\n    position: relative;\n    padding-bottom: 56.25%; \/* 16:9 Aspect Ratio *\/\n    height: 0;\n  }\n  .video-wrapper video {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n  }\n\n  \/* --- RESPONSIVE STYLES --- *\/\n  @media (max-width: 900px) {\n    .features-container {\n      grid-template-columns: 1fr;\n    }\n    .screenshots-grid {\n      grid-template-columns: 1fr; \/* Reverts back to 1 column on smaller mobile screens *\/\n    }\n  }\n\u003c\/style\u003e\n\u003c!-- END: Product Page --\u003e","brand":"Software Athlete","offers":[{"title":"Default Title","offer_id":56076785189190,"sku":null,"price":0.0,"currency_code":"EUR","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/eventanalyticskpi.png?v=1772362207"},{"product_id":"pivision-profile-view-plus","title":"ProfileView+","description":"\u003c!-- START: Product Page for ProfileView+ --\u003e\n\u003cp\u003e \u003c\/p\u003e\n\u003c!-- 1. HERO SECTION --\u003e\n\u003csection class=\"product-hero-section\"\u003e\n\u003cdiv class=\"product-hero-container\" style=\"text-align: center;\"\u003e\n\u003cp class=\"product-subtitle-tag\"\u003e\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/profile-view-2_160x160.png?v=1774346279\" style=\"float: none;\"\u003e\u003c\/p\u003e\n\u003cp class=\"product-subtitle-tag\"\u003ePI Vision Custom Symbol • Vision Library+\u003c\/p\u003e\n\u003ch1\u003eThe Legend Returns: High-Performance Heatmaps with ProfileView+\u003c\/h1\u003e\n\u003cp class=\"product-description\"\u003eThe spiritual successor to the retired OSIsoft ProfileView is here. Rebuilt from the ground up for modern PI Vision, ProfileView+ delivers a blazing-fast, highly configurable heatmap designed specifically to visualize cross-directional scanner data, track variations, and monitor web quality in the Pulp \u0026amp; Paper industry.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 2. FEATURES SECTION --\u003e\n\u003csection class=\"product-features-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eAdvanced Profiling, Engineered for Performance\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-grid-three-col\"\u003e\n\u003cdiv class=\"features-column\"\u003e\n\u003ch3\u003eHigh-Volume Data Retrieval\u003c\/h3\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eMassive Datasets:\u003c\/strong\u003e Handles high-density scanner data with ease, supporting up to 100,000 interpolated data points per fetch.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eSmart Calculation:\u003c\/strong\u003e Utilizes time-weighted calculation bases and auto-calculated intervals to ensure your heatmap loads instantly without crashing the browser.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eCustom Time Ranges:\u003c\/strong\u003e Break free from the display time. Apply custom time ranges, offsets, and durations specific to the profile you are analyzing.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-column\"\u003e\n\u003ch3\u003eAbsolute \u0026amp; Deviation Modes\u003c\/h3\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eDeviation Display Mode:\u003c\/strong\u003e Instantly switch from absolute values to deviation mode. Set a \u003cstrong\u003eTarget Value\u003c\/strong\u003e to clearly see positive and negative variations from your ideal spec.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eCurrent Value Line:\u003c\/strong\u003e Highlight the current, real-time profile over the historical heatmap with a customizable current value line.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eDynamic Scaling:\u003c\/strong\u003e Auto-sort properties, customize tick intervals, and dynamically label axes (numeric or names) to match your physical machine zones.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-column\"\u003e\n\u003ch3\u003eIntegrated Statistics \u0026amp; Histograms\u003c\/h3\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eEmbedded Histograms:\u003c\/strong\u003e Turn on Time-scale and Value-scale histograms to visualize the distribution of your profile data instantly.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eData Table Columns:\u003c\/strong\u003e Append a data table directly alongside the heatmap to display Average, Minimum, Maximum, StdDev, Range, and population StdDev.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eTotal Customization:\u003c\/strong\u003e Fully customize the UI, from background and foreground colors to font sizes and time scale formatting.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-column\"\u003e\n\u003ch3\u003eEvent \u0026amp; Reel Tracking\u003c\/h3\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eContinuous Mode Overlay:\u003c\/strong\u003e Automatically overlay event markers (such as the start and end times of paper reels) directly on top of the continuous profile heatmap.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eSelection Mode:\u003c\/strong\u003e Select a specific reel or event, and ProfileView+ will instantly isolate and display the scanner profile strictly for that selected timeframe.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eProduction Context:\u003c\/strong\u003e Essential for the Pulp \u0026amp; Paper industry, allowing operators to directly tie precise web quality metrics to individual physical reels.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 3. USE CASES SECTION --\u003e\n\u003csection class=\"use-cases-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eBuilt for Pulp, Paper, and Continuous Web Manufacturing\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-cases-grid\"\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg class=\"icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" fill=\"currentColor\"\u003e\u003cpath d=\"M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 9h-2V7h-2v5H6v2h2v5h2v-5h2v-2z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eBasis Weight \u0026amp; Moisture Profiles\u003c\/h3\u003e\n\u003cp\u003eVisualize Cross-Direction (CD) and Machine-Direction (MD) scanner data. Quickly spot wet streaks or heavy edges across the paper web in a 2D color contour map.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg class=\"icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" fill=\"currentColor\"\u003e\u003cpath d=\"M12 2L2 22h20L12 2zm0 3.83L19.17 20H4.83L12 5.83zM11 16h2v2h-2v-2zm0-7h2v5h-2V9z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eTarget Deviation Analysis\u003c\/h3\u003e\n\u003cp\u003eUse the 'Deviation' display mode to subtract the ideal target from your scanner readings. See exactly where your caliper or opacity is drifting out of specification.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg class=\"icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" fill=\"currentColor\"\u003e\u003cpath d=\"M3 3h18v2H3zm0 4h12v2H3zm0 4h18v2H3zm0 4h12v2H3z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eStatistical Process Control\u003c\/h3\u003e\n\u003cp\u003eEnable the built-in tabular columns (StdDev, Range, Min\/Max) alongside the heatmap to give operators exact numerical context without opening another tool.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg class=\"icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" fill=\"currentColor\"\u003e\u003cpath d=\"M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14zM7 10h2v7H7zm4-3h2v10h-2zm4 6h2v4h-2z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eDistribution Histograms\u003c\/h3\u003e\n\u003cp\u003eToggle X\/Y axis histograms to instantly see the frequency distribution of your variations over time, identifying systematic machine issues quickly.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 4. SCREENSHOTS SECTION --\u003e\n\u003csection class=\"screenshots-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eThe Heatmap Re-Imagined for Modern Browsers\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshots-grid\"\u003e\n\u003cdiv class=\"screenshot-card\" style=\"text-align: start;\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-profile-view.png?v=1774346384\" alt=\"A high-performance PI Vision heatmap visualizing scanner data across a paper web.\" style=\"margin-bottom: 16px; float: none;\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eCross-Direction Heatmaps\u003c\/h4\u003e\n\u003cp\u003eRender high-density scanner profiles smoothly. ProfileView+ maps thousands of data points into a continuous color gradient, allowing you to track quality across the entire width of the machine.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\" style=\"text-align: start;\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-profile-view-3.png?v=1774346385\" alt=\"ProfileView+ in Deviation Mode showing variances from a target value.\" style=\"margin-bottom: 16px; float: none;\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eTarget Value \u0026amp; Deviation Mode\u003c\/h4\u003e\n\u003cp\u003eDon't just look at raw values. Set a Target Value (e.g., Target Moisture = 50%) and switch the Display Mode to 'Deviation' to visualize only the positive and negative variances from your ideal state.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\" style=\"text-align: start;\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-profile-view-digital-states.png?v=1774346382\" alt=\"ProfileView+ displaying time and value histograms on the axes.\" style=\"margin-bottom: 16px; float: none;\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eSupport for Digital States\u003c\/h4\u003e\n\u003cp\u003eProfileView+ not only supports numbers, but also digital states and enumeration values.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\" style=\"text-align: start;\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-profile-view-gradient-off.png?v=1774590739\" alt=\"The data table alongside the heatmap showing Average, StdDev, and Range.\" style=\"margin-bottom: 16px; float: none;\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eDifferent Gradient Modes\u003c\/h4\u003e\n\u003cp\u003eTurn off gradients entirely, or use any of our outer gradient color modes for your needs.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c!-- NEW EVENT SCREENSHOT 1: CONTINUOUS MODE --\u003e\n\u003cdiv class=\"screenshot-card\" style=\"text-align: start;\"\u003e\n\u003c!-- Replace the src URL below with your actual screenshot URL --\u003e \u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-profile-view-paper-reel-2png.png?v=1781422643\" alt=\"ProfileView+ showing continuous event overlays for paper reels.\" style=\"margin-bottom: 16px; float: none;\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eEvent Overlay: Continuous Mode\u003c\/h4\u003e\n\u003cp\u003eVisualize production runs in real-time. In Continuous Mode, ProfileView+ overlays event markers—like the exact start and end times of paper reels—directly on top of your heatmap.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c!-- NEW EVENT SCREENSHOT 2: SELECTION MODE --\u003e\n\u003cdiv class=\"screenshot-card\" style=\"text-align: start;\"\u003e\n\u003c!-- Replace the src URL below with your actual screenshot URL --\u003e \u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-profile-view-paper-reel-select.png?v=1781422642\" alt=\"ProfileView+ displaying data isolated by a selected paper reel event.\" style=\"margin-bottom: 16px; float: none;\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eEvent Overlay: Selection Mode\u003c\/h4\u003e\n\u003cp\u003eDrill down into specific reels. Click an event to enter Selection Mode, and the profile view will dynamically adjust to show the scanner profile exclusively for that chosen reel's timeframe.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 5. DEMO VIDEO SECTION --\u003e\n\u003csection class=\"demo-video-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eSee ProfileView+ in Action\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"video-card\"\u003e\n\u003cdiv class=\"video-wrapper\"\u003e\u003cvideo preload=\"metadata\" controls=\"controls\"\u003e\n        \u003c!-- Placeholder Video URL --\u003e\n        \u003csource src=\"https:\/\/cdn.shopify.com\/videos\/c\/o\/v\/f7a62930c5014ea0900581635a1a395a.mp4\" type=\"video\/mp4\"\u003e\n        Your browser does not support the video tag.\n      \u003c\/source\u003e\u003c\/video\u003e\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003cstyle\u003e\n  \/* --- GENERAL SECTION STYLES --- *\/\n  .section-header {\n    display: flex; flex-direction: column; align-items: center; text-align: center;\n    max-width: 800px; margin: 0 auto 3.5rem auto;\n  }\n  .section-header h2 {\n    color: #111; margin-bottom: 1rem; font-size: 1.8rem;\n  }\n  .section-header p {\n    color: #333; line-height: 1.7; font-size: 1rem;\n  }\n  .feature-list {\n    list-style: none; padding: 0; margin: 0;\n  }\n  .feature-list li {\n    position: relative; padding-left: 30px; margin-bottom: 1.25rem;\n    line-height: 1.6; color: #333;\n  }\n  .feature-list li::before {\n    content: '✔'; position: absolute; left: 0; top: 2px;\n    color: #3F72E5; font-size: 1.2rem;\n  }\n  .feature-list li strong {\n    color: #111; font-weight: 600;\n  }\n\n  \/* --- 1. HERO SECTION --- *\/\n  .product-hero-section {\n    padding: 5rem 1rem; text-align: center;\n  }\n  .product-hero-container {\n      max-width: 700px; margin: 0 auto;\n  }\n  .product-hero-icon {\n      width: 80px; height: auto; margin-bottom: 2rem;\n  }\n  .product-subtitle-tag {\n    color: #3F72E5; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.5px;\n  }\n  h1 {\n    font-size: 2.5rem; margin-bottom: 1.5rem;\n  }\n  .product-description {\n    line-height: 1.7; font-size: 1.1rem; color: #333;\n  }\n\n  \/* --- 2. FEATURES SECTION --- *\/\n  .product-features-section {\n    padding: 4rem 1rem; background-color: #f9fafb;\n  }\n  .features-grid-three-col {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n    gap: 2.5rem;\n    max-width: 1200px; margin: 0 auto;\n  }\n  .features-column h3 {\n    font-size: 1.3rem; margin-bottom: 1.5rem; color: #111;\n  }\n \n  \/* --- 3. USE CASES SECTION --- *\/\n  .use-cases-section {\n    padding: 4rem 1rem;\n  }\n  .use-cases-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n    gap: 2rem;\n    max-width: 1200px; margin: 0 auto;\n  }\n  .use-case-card {\n    background: white; border-radius: 20px; padding: 2rem; text-align: center;\n    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);\n  }\n  .use-case-card .icon {\n    width: 40px; height: 40px; color: #3F72E5; margin-bottom: 1rem;\n  }\n  .use-case-card h3 {\n    font-size: 1.2rem; color: #111; margin-bottom: 0.5rem;\n  }\n  .use-case-card p {\n    color: #333; font-size: 0.9rem; line-height: 1.6;\n  }\n\n  \/* --- 4. SCREENSHOTS SECTION --- *\/\n  .screenshots-section {\n    padding: 4rem 1rem; background-color: #f9fafb;\n  }\n  .screenshots-grid {\n    display: grid;\n    grid-template-columns: 1fr; \/* Updated to 1 column layout *\/\n    gap: 3rem; \/* Increased vertical spacing between screenshots *\/\n    max-width: 900px; \/* Reduced max-width slightly for optimal viewing *\/\n    margin: 0 auto;\n  }\n  .screenshot-card {\n    background: white; border-radius: 20px;\n    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);\n    overflow: hidden;\n  }\n  .screenshot-card img {\n    width: 100%; height: auto; display: block; background-color: #f9fafb;\n  }\n  .screenshot-card-content {\n    padding: 1.5rem;\n  }\n  .screenshot-card-content h4 {\n    font-size: 1.2rem; margin: 0 0 0.5rem 0; color: #111;\n  }\n  .screenshot-card-content p {\n    font-size: 0.95rem; line-height: 1.6; color: #333; margin: 0;\n  }\n \n \/* --- 5. DEMO VIDEO SECTION --- *\/\n  .demo-video-section {\n    padding: 4rem 1rem;\n  }\n  .video-card {\n    max-width: 1000px;\n    margin: 0 auto;\n    border-radius: 20px;\n    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);\n    overflow: hidden;\n  }\n  .video-wrapper {\n    position: relative;\n    padding-bottom: 56.25%; \/* 16:9 Aspect Ratio *\/\n    height: 0;\n  }\n  .video-wrapper video {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n  }\n\n  \/* --- RESPONSIVE STYLES --- *\/\n  @media (max-width: 900px) {\n    .features-grid-three-col {\n      grid-template-columns: 1fr;\n    }\n    \/* Removed the screenshots-grid media query since it's already 1 column by default *\/\n  }\n\u003c\/style\u003e\n\u003c!-- END: Product Page --\u003e","brand":"Software Athlete","offers":[{"title":"Default Title","offer_id":56238696923462,"sku":null,"price":0.0,"currency_code":"EUR","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/profile-view-2.png?v=1774346279"},{"product_id":"pi-vision-manual-data-entry-form","title":"Manual Input Form+","description":"\u003c!-- START: Product Page for Manual Input Form+ --\u003e\n\u003cp\u003e \u003c\/p\u003e\n\u003c!-- 1. HERO SECTION --\u003e\n\u003csection class=\"product-hero-section\"\u003e\n\u003cdiv class=\"product-hero-container\" style=\"text-align: center;\"\u003e\n\u003cbr\u003e\n\u003cp class=\"product-subtitle-tag\"\u003e\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/manualinputform_160x160.png?v=1774361608\" style=\"float: none;\"\u003e\u003c\/p\u003e\n\u003cp class=\"product-subtitle-tag\"\u003ePI Vision Custom Symbol • Vision Library+\u003c\/p\u003e\n\u003ch1\u003eEmpower Operators with Manual Input Form+\u003c\/h1\u003e\n\u003cp class=\"product-description\"\u003eSay goodbye to paper clipboards and disconnected spreadsheets. Manual Input Form+ is a powerful data entry extension that lets you build intuitive, mobile-friendly input forms directly inside AVEVA PI Vision. Capture lab results, operator rounds, and setpoints securely with custom controls and robust validation.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 2. FEATURES SECTION --\u003e\n\u003csection class=\"product-features-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eFlexible Data Entry, Built for the Plant Floor\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-grid-three-col\"\u003e\n\u003cdiv class=\"features-column\"\u003e\n\u003ch3\u003eCustom Control Builder\u003c\/h3\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eRich UI Elements:\u003c\/strong\u003e Ditch the standard text boxes. Build forms using touch-friendly sliders, toggle switches, push buttons, dropdown lists, and numeric inputs.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eAuto-Grouping:\u003c\/strong\u003e Intelligently group related input fields together to keep complex forms organized and easy to read.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eCustom Styling:\u003c\/strong\u003e Fully tailor the colors, fonts, and layout of your form to match your corporate dashboard standards.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-column\"\u003e\n\u003ch3\u003eSafety \u0026amp; Validation\u003c\/h3\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eStrict Input Validation:\u003c\/strong\u003e Prevent operator typos. Define minimum and maximum limits to block users from entering out-of-bounds data or unsafe setpoints.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eConfirmation Dialogs:\u003c\/strong\u003e Require a second confirmation click before writing critical data back to the PI System to ensure accuracy.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eMultistate Limits:\u003c\/strong\u003e Give operators visual feedback. Change the color of the input controls dynamically based on the current value.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-column\"\u003e\n\u003ch3\u003eAudit Ready \u0026amp; Mobile First\u003c\/h3\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eUser Logging:\u003c\/strong\u003e Keep a strict audit trail. The symbol automatically logs which user entered the data and when, ensuring full accountability.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eResponsive Design:\u003c\/strong\u003e Built from the ground up to look and function perfectly on mobile devices, tablets, and rugged plant-floor screens.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eSeamless Integration:\u003c\/strong\u003e Writes data securely and directly back to your PI Tags or AF Attributes without needing external middle-ware.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 3. USE CASES SECTION --\u003e\n\u003csection class=\"use-cases-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eDigitize Your Manual Workflows\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-cases-grid\"\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg class=\"icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" fill=\"currentColor\"\u003e\u003cpath d=\"M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eOperator Rounds \u0026amp; Inspections\u003c\/h3\u003e\n\u003cp\u003eEquip field operators with tablets to log visual inspections, gauge readings, and equipment statuses directly into PI Vision using easy-to-tap toggle switches and dropdowns.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg class=\"icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" fill=\"currentColor\"\u003e\u003cpath d=\"M9 3L5 6.99h3V14h2V6.99h3L9 3zm7 14.01V10h-2v7.01h-3L15 21l4-3.99h-3z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eTarget \u0026amp; Setpoint Adjustments\u003c\/h3\u003e\n\u003cp\u003eAllow shift supervisors to securely adjust production targets or machine setpoints using validated numeric inputs and confirmation dialogs to prevent dangerous typos.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg class=\"icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" fill=\"currentColor\"\u003e\u003cpath d=\"M20 6h-4V4c0-1.1-.9-2-2-2h-4c-1.1 0-2 .9-2 2v2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zM10 4h4v2h-4V4zm10 16H4V8h16v12z\"\u003e\u003c\/path\u003e\u003cpath d=\"M13 10h-2v3H8v2h3v3h2v-3h3v-2h-3z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eLab Data Entry\u003c\/h3\u003e\n\u003cp\u003eReplace disconnected Excel sheets. Let lab technicians manually enter sample test results into a custom form that instantly updates the PI System for everyone to see.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg class=\"icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" fill=\"currentColor\"\u003e\u003cpath d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 15h-2v-2h2v2zm0-4h-2V7h2v6z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eDowntime Reason Coding\u003c\/h3\u003e\n\u003cp\u003eWhen a machine stops, operators can quickly select a downtime reason code from a pre-defined dropdown list, keeping your OEE and Event Frame data accurate.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 4. SCREENSHOTS SECTION --\u003e\n\u003csection class=\"screenshots-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eA Modern Form Builder for PI Vision\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshots-grid\"\u003e\n\u003cdiv class=\"screenshot-card\" style=\"text-align: start;\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-manual-input-form-1.png?v=1774361608\" alt=\"A clean, auto-grouped manual input form in PI Vision.\" style=\"margin-bottom: 16px; float: none;\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eIntuitive Custom Forms\u003c\/h4\u003e\n\u003cp\u003eBuild clean, auto-grouped forms that are easy for operators to read and use. Tailor the background, typography, and layout to fit seamlessly into your existing dashboard.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\" style=\"text-align: start;\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-manual-input-form-input-controls.png?v=1774361608\" alt=\"A variety of touch-friendly UI controls like sliders, switches, and dropdowns.\" style=\"margin-bottom: 16px; float: none;\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eRich Input Controls\u003c\/h4\u003e\n\u003cp\u003eMove beyond plain text boxes. Use sliders for percentage adjustments, toggle switches for On\/Off states, and pre-defined dropdown lists to standardize operator data entry.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\" style=\"text-align: start;\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-manual-input-form-validation.png?v=1774361608\" alt=\"An input validation alert preventing a user from entering an out-of-bounds number.\" style=\"margin-bottom: 16px; float: none;\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eStrict Input Validation\u003c\/h4\u003e\n\u003cp\u003eProtect your process. Define strict minimum and maximum boundaries for numeric inputs. If an operator tries to enter a value outside the safe limits, the form will block the submission.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\" style=\"text-align: start;\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-manual-input-form-confirmation.png?v=1774361608\" alt=\"A confirmation dialog asking the user to confirm their data submission.\" style=\"margin-bottom: 16px; float: none;\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eSecure Confirmation \u0026amp; Logging\u003c\/h4\u003e\n\u003cp\u003eEnable confirmation dialogs for critical tags to prevent accidental clicks. Every successful submission automatically logs the user's ID, ensuring a complete audit trail of manual changes.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 5. DEMO VIDEO SECTION --\u003e\n\u003csection class=\"demo-video-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eSee Manual Input Form+ in Action\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"video-card\"\u003e\n\u003cdiv class=\"video-wrapper\"\u003e\u003cvideo preload=\"metadata\" controls=\"controls\"\u003e\n        \u003c!-- Placeholder Video URL --\u003e\n        \u003csource src=\"https:\/\/cdn.shopify.com\/videos\/c\/o\/v\/b30921e703b7465898fe78df2d982f3c.mp4\" type=\"video\/mp4\"\u003e\n        Your browser does not support the video tag.\n      \u003c\/source\u003e\u003c\/video\u003e\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003cstyle\u003e\n  \/* --- GENERAL SECTION STYLES --- *\/\n  .section-header {\n    display: flex; flex-direction: column; align-items: center; text-align: center;\n    max-width: 800px; margin: 0 auto 3.5rem auto;\n  }\n  .section-header h2 {\n    color: #111; margin-bottom: 1rem; font-size: 1.8rem;\n  }\n  .section-header p {\n    color: #333; line-height: 1.7; font-size: 1rem;\n  }\n  .feature-list {\n    list-style: none; padding: 0; margin: 0;\n  }\n  .feature-list li {\n    position: relative; padding-left: 30px; margin-bottom: 1.25rem;\n    line-height: 1.6; color: #333;\n  }\n  .feature-list li::before {\n    content: '✔'; position: absolute; left: 0; top: 2px;\n    color: #3F72E5; font-size: 1.2rem;\n  }\n  .feature-list li strong {\n    color: #111; font-weight: 600;\n  }\n\n  \/* --- 1. HERO SECTION --- *\/\n  .product-hero-section {\n    padding: 5rem 1rem; text-align: center;\n  }\n  .product-hero-container {\n      max-width: 700px; margin: 0 auto;\n  }\n  .product-hero-icon {\n      width: 80px; height: auto; margin-bottom: 2rem;\n  }\n  .product-subtitle-tag {\n    color: #3F72E5; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.5px;\n  }\n  h1 {\n    font-size: 2.5rem; margin-bottom: 1.5rem;\n  }\n  .product-description {\n    line-height: 1.7; font-size: 1.1rem; color: #333;\n  }\n\n  \/* --- 2. FEATURES SECTION --- *\/\n  .product-features-section {\n    padding: 4rem 1rem; background-color: #f9fafb;\n  }\n  .features-grid-three-col {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n    gap: 2.5rem;\n    max-width: 1200px; margin: 0 auto;\n  }\n  .features-column h3 {\n    font-size: 1.3rem; margin-bottom: 1.5rem; color: #111;\n  }\n \n  \/* --- 3. USE CASES SECTION --- *\/\n  .use-cases-section {\n    padding: 4rem 1rem;\n  }\n  .use-cases-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n    gap: 2rem;\n    max-width: 1200px; margin: 0 auto;\n  }\n  .use-case-card {\n    background: white; border-radius: 20px; padding: 2rem; text-align: center;\n    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);\n  }\n  .use-case-card .icon {\n    width: 40px; height: 40px; color: #3F72E5; margin-bottom: 1rem;\n  }\n  .use-case-card h3 {\n    font-size: 1.2rem; color: #111; margin-bottom: 0.5rem;\n  }\n  .use-case-card p {\n    color: #333; font-size: 0.9rem; line-height: 1.6;\n  }\n\n  \/* --- 4. SCREENSHOTS SECTION --- *\/\n  .screenshots-section {\n    padding: 4rem 1rem; background-color: #f9fafb;\n  }\n  .screenshots-grid {\n    display: grid;\n    grid-template-columns: repeat(2, 1fr); \/* 2 column layout *\/\n    gap: 2rem;\n    max-width: 1200px; margin: 0 auto;\n  }\n  .screenshot-card {\n    background: white; border-radius: 20px;\n    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);\n    overflow: hidden;\n  }\n  .screenshot-card img {\n    width: 100%; height: auto; display: block; background-color: #f9fafb;\n  }\n  .screenshot-card-content {\n    padding: 1.5rem;\n  }\n  .screenshot-card-content h4 {\n    font-size: 1.2rem; margin: 0 0 0.5rem 0; color: #111;\n  }\n  .screenshot-card-content p {\n    font-size: 0.95rem; line-height: 1.6; color: #333; margin: 0;\n  }\n \n \/* --- 5. DEMO VIDEO SECTION --- *\/\n  .demo-video-section {\n    padding: 4rem 1rem;\n  }\n  .video-card {\n    max-width: 1000px;\n    margin: 0 auto;\n    border-radius: 20px;\n    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);\n    overflow: hidden;\n  }\n  .video-wrapper {\n    position: relative;\n    padding-bottom: 56.25%; \/* 16:9 Aspect Ratio *\/\n    height: 0;\n  }\n  .video-wrapper video {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n  }\n\n  \/* --- RESPONSIVE STYLES --- *\/\n  @media (max-width: 900px) {\n    .features-container {\n      grid-template-columns: 1fr;\n    }\n    .screenshots-grid {\n      grid-template-columns: 1fr; \/* Reverts back to 1 column on smaller mobile screens *\/\n    }\n  }\n\u003c\/style\u003e\n\u003c!-- END: Product Page --\u003e","brand":"Software Athlete","offers":[{"title":"Default Title","offer_id":56241159143750,"sku":null,"price":0.0,"currency_code":"EUR","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/manualinputform.png?v=1774361608"},{"product_id":"pi-vision-event-analytics-pivot-table","title":"Event Analytics Pivot+","description":"\u003c!-- START: Product Page for Event Analytics Pivot+ --\u003e\n\u003cp\u003e \u003c\/p\u003e\n\u003c!-- 1. HERO SECTION --\u003e\n\u003csection class=\"product-hero-section\"\u003e\n\u003cdiv class=\"product-hero-container\" style=\"text-align: center;\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/eventanalyticspivot_160x160.png?v=1774362083\" style=\"margin-bottom: 16px; float: none;\"\u003e\u003cbr\u003e\n\u003cp class=\"product-subtitle-tag\"\u003ePI Vision Custom Symbol • Vision Library+\u003c\/p\u003e\n\u003ch1\u003eMulti-Dimensional Insights with Event Analytics Pivot+\u003c\/h1\u003e\n\u003cp class=\"product-description\"\u003eStop exporting your Event Frames to Excel just to create a pivot table. Event Analytics Pivot+ is a powerful data grid that lets you cross-reference, aggregate, and summarize your batch and downtime data natively inside AVEVA PI Vision. Slice and dice your operational metrics in seconds.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 2. FEATURES SECTION --\u003e\n\u003csection class=\"product-features-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eSlice, Dice, and Summarize Your Event Data\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-grid-three-col\"\u003e\n\u003cdiv class=\"features-column\"\u003e\n\u003ch3\u003ePowerful Aggregation\u003c\/h3\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eDynamic Calculations:\u003c\/strong\u003e Apply math to your event attributes on the fly. Calculate the Sum, Average, Count, Minimum, and Maximum for any numeric column.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eTime-Aware Metrics:\u003c\/strong\u003e Automatically format time-based calculations, turning raw event durations into readable timespans (e.g., hours, minutes).\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eGrand Totals:\u003c\/strong\u003e Automatically generate row and column grand totals to get the absolute big picture of your production losses or batch yields.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-column\"\u003e\n\u003ch3\u003eInteractive Data Navigation\u003c\/h3\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eMulti-Level Grouping:\u003c\/strong\u003e Group your data by multiple event attributes (Series) to create complex, multi-dimensional tables.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eExpand \u0026amp; Collapse:\u003c\/strong\u003e Keep your dashboards clean. Start with a high-level summary and let users click to expand parent rows to see the nested sub-categories.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eMaster Filter Controller:\u003c\/strong\u003e Just like our KPI+ symbol, clicking a row in the Pivot table instantly cross-filters the other Event Analytics charts on your display.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-column\"\u003e\n\u003ch3\u003eAdvanced Filtering \u0026amp; Styling\u003c\/h3\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eTop \/ Bottom N:\u003c\/strong\u003e Filter out the noise. Automatically rank and display only your top bad actors, grouping all remaining data into an \"Others\" row.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eMultistate Formatting:\u003c\/strong\u003e Apply conditional coloring to specific cells. Highlight high-duration downtime in red or above-average batch yields in green.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eTotal Customization:\u003c\/strong\u003e Adjust column widths, typography, background colors, and border styles to match your corporate reporting standards.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 3. USE CASES SECTION --\u003e\n\u003csection class=\"use-cases-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eFrom Raw Events to Executive Reports\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-cases-grid\"\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg class=\"icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" fill=\"currentColor\"\u003e\u003cpath d=\"M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 9h-2V7h-2v5H6v2h2v5h2v-5h2v-2z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eDowntime Root Cause Analysis\u003c\/h3\u003e\n\u003cp\u003eMatrix your event data by crossing 'Asset' rows with 'Reason Code' columns. Instantly see the Total Duration of every failure type across your entire plant floor.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg class=\"icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" fill=\"currentColor\"\u003e\u003cpath d=\"M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eBatch \u0026amp; Production Reporting\u003c\/h3\u003e\n\u003cp\u003eSummarize complex batch processes. Create a pivot table showing the Average Cycle Time and Total Material Consumed, grouped by Product Grade and Recipe.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg class=\"icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" fill=\"currentColor\"\u003e\u003cpath d=\"M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm-1-13h2v2h-2zm0 4h2v6h-2z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eShift Handover Summaries\u003c\/h3\u003e\n\u003cp\u003eGroup production events by Shift and Crew to compare performance side-by-side. Calculate total yields and incident counts to see which team is hitting their targets.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg class=\"icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" fill=\"currentColor\"\u003e\u003cpath d=\"M3 3h18v2H3zm0 4h12v2H3zm0 4h18v2H3zm0 4h12v2H3z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eOEE \u0026amp; Loss Deployment\u003c\/h3\u003e\n\u003cp\u003eBreak down your Overall Equipment Effectiveness losses. Expand rows to see exactly how much tonnage was lost due to planned maintenance vs. unplanned breakdowns.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 4. SCREENSHOTS SECTION --\u003e\n\u003csection class=\"screenshots-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eInteractive Data Grids in PI Vision\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshots-grid\"\u003e\n\u003cdiv class=\"screenshot-card\" style=\"text-align: start;\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-event-analytics-pivot-root-cause.png?v=1774362083\" alt=\"A pivot table in PI Vision showing downtime root cause analysis.\" style=\"margin-bottom: 16px; float: none;\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003ePivot Table Root Cause Analysis\u003c\/h4\u003e\n\u003cp\u003eCross-reference your equipment with downtime reason codes. In seconds, you can calculate the Sum or Average duration of failures to instantly spot your biggest operational bottlenecks.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\" style=\"text-align: start;\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-event-analytics-pivot-root-cause-expand.png?v=1774362083\" alt=\"A user clicking an arrow to expand nested rows in a pivot table.\" style=\"margin-bottom: 16px; float: none;\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eInteractive Expand \u0026amp; Collapse\u003c\/h4\u003e\n\u003cp\u003eNavigate complex event hierarchies effortlessly. Start with a high-level summary (e.g., Production Line) and expand the nodes to reveal the specific batch or root cause details nested beneath it.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\" style=\"text-align: start;\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-event-analytics-pivot-top-n.png?v=1774362083\" alt=\"A pivot table filtered to show only the Top 5 downtime reasons.\" style=\"margin-bottom: 16px; float: none;\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eFocus on Top N Bad Actors\u003c\/h4\u003e\n\u003cp\u003eDon't get overwhelmed by massive datasets. Use the built-in Top N feature to display only your top 5 worst-performing assets or most frequent events, intelligently grouping the rest into an 'Others' row.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\" style=\"text-align: start;\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-event-analytics-pivot-table-1.png?v=1774362083\" alt=\"A beautifully customized pivot table with dark mode and conditional formatting.\" style=\"margin-bottom: 16px; float: none;\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eHighly Customizable Styling\u003c\/h4\u003e\n\u003cp\u003eTailor the pivot table to fit your dashboard perfectly. Customize column widths, typography, cell background colors, and apply Multistate alerts so out-of-spec data jumps off the screen.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003cstyle\u003e\n  \/* --- GENERAL SECTION STYLES --- *\/\n  .section-header {\n    display: flex; flex-direction: column; align-items: center; text-align: center;\n    max-width: 800px; margin: 0 auto 3.5rem auto;\n  }\n  .section-header h2 {\n    color: #111; margin-bottom: 1rem; font-size: 1.8rem;\n  }\n  .section-header p {\n    color: #333; line-height: 1.7; font-size: 1rem;\n  }\n  .feature-list {\n    list-style: none; padding: 0; margin: 0;\n  }\n  .feature-list li {\n    position: relative; padding-left: 30px; margin-bottom: 1.25rem;\n    line-height: 1.6; color: #333;\n  }\n  .feature-list li::before {\n    content: '✔'; position: absolute; left: 0; top: 2px;\n    color: #3F72E5; font-size: 1.2rem;\n  }\n  .feature-list li strong {\n    color: #111; font-weight: 600;\n  }\n\n  \/* --- 1. HERO SECTION --- *\/\n  .product-hero-section {\n    padding: 5rem 1rem; text-align: center;\n  }\n  .product-hero-container {\n      max-width: 700px; margin: 0 auto;\n  }\n  .product-hero-icon {\n      width: 80px; height: auto; margin-bottom: 2rem;\n  }\n  .product-subtitle-tag {\n    color: #3F72E5; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.5px;\n  }\n  h1 {\n    font-size: 2.5rem; margin-bottom: 1.5rem;\n  }\n  .product-description {\n    line-height: 1.7; font-size: 1.1rem; color: #333;\n  }\n\n  \/* --- 2. FEATURES SECTION --- *\/\n  .product-features-section {\n    padding: 4rem 1rem; background-color: #f9fafb;\n  }\n  .features-grid-three-col {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n    gap: 2.5rem;\n    max-width: 1200px; margin: 0 auto;\n  }\n  .features-column h3 {\n    font-size: 1.3rem; margin-bottom: 1.5rem; color: #111;\n  }\n \n  \/* --- 3. USE CASES SECTION --- *\/\n  .use-cases-section {\n    padding: 4rem 1rem;\n  }\n  .use-cases-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n    gap: 2rem;\n    max-width: 1200px; margin: 0 auto;\n  }\n  .use-case-card {\n    background: white; border-radius: 20px; padding: 2rem; text-align: center;\n    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);\n  }\n  .use-case-card .icon {\n    width: 40px; height: 40px; color: #3F72E5; margin-bottom: 1rem;\n  }\n  .use-case-card h3 {\n    font-size: 1.2rem; color: #111; margin-bottom: 0.5rem;\n  }\n  .use-case-card p {\n    color: #333; font-size: 0.9rem; line-height: 1.6;\n  }\n\n  \/* --- 4. SCREENSHOTS SECTION --- *\/\n  .screenshots-section {\n    padding: 4rem 1rem; background-color: #f9fafb;\n  }\n  .screenshots-grid {\n    display: grid;\n    grid-template-columns: repeat(2, 1fr); \/* 2 column layout *\/\n    gap: 2rem;\n    max-width: 1200px; margin: 0 auto;\n  }\n  .screenshot-card {\n    background: white; border-radius: 20px;\n    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);\n    overflow: hidden;\n  }\n  .screenshot-card img {\n    width: 100%; height: auto; display: block; background-color: #f9fafb;\n  }\n  .screenshot-card-content {\n    padding: 1.5rem;\n  }\n  .screenshot-card-content h4 {\n    font-size: 1.2rem; margin: 0 0 0.5rem 0; color: #111;\n  }\n  .screenshot-card-content p {\n    font-size: 0.95rem; line-height: 1.6; color: #333; margin: 0;\n  }\n \n \/* --- 5. DEMO VIDEO SECTION --- *\/\n  .demo-video-section {\n    padding: 4rem 1rem;\n  }\n  .video-card {\n    max-width: 1000px;\n    margin: 0 auto;\n    border-radius: 20px;\n    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);\n    overflow: hidden;\n  }\n  .video-wrapper {\n    position: relative;\n    padding-bottom: 56.25%; \/* 16:9 Aspect Ratio *\/\n    height: 0;\n  }\n  .video-wrapper video {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n  }\n\n  \/* --- RESPONSIVE STYLES --- *\/\n  @media (max-width: 900px) {\n    .features-container {\n      grid-template-columns: 1fr;\n    }\n    .screenshots-grid {\n      grid-template-columns: 1fr; \/* Reverts back to 1 column on smaller mobile screens *\/\n    }\n  }\n\u003c\/style\u003e\n\u003c!-- END: Product Page --\u003e","brand":"Software Athlete","offers":[{"title":"Default Title","offer_id":56241213178182,"sku":null,"price":0.0,"currency_code":"EUR","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/eventanalyticspivot_4836f2df-2478-4546-9b9d-876a67ddb124.png?v=1774378097"},{"product_id":"pi-vision-fft-chart","title":"FFT+","description":"\u003c!-- START: Product Page for FFT Chart --\u003e\n\u003cp\u003e \u003c\/p\u003e\n\u003c!-- 1. HERO SECTION --\u003e\n\u003csection class=\"product-hero-section\"\u003e\n\u003cdiv class=\"product-hero-container\" style=\"text-align: center;\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/fftplus_4dc32093-868e-40ab-a0e5-76df523e9e47_160x160.png?v=1779604961\" style=\"margin-bottom: 16px; float: none;\"\u003e\u003cbr\u003e\n\u003cp class=\"product-subtitle-tag\"\u003ePI Vision Custom Symbol • Vision Library+\u003c\/p\u003e\n\u003ch1\u003eUncover Hidden Machine Faults with the FFT Chart\u003c\/h1\u003e\n\u003cp class=\"product-description\"\u003eBring powerful spectrum analysis natively into AVEVA PI Vision. Transform high-frequency time-series data into the frequency domain to monitor rotating machinery, detect early-stage wear, and prevent catastrophic failures—all without leaving your dashboard.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 2. FEATURES SECTION --\u003e\n\u003csection class=\"product-features-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eAdvanced Signal Processing Meets Intuitive Design\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-grid-three-col\"\u003e\n\u003cdiv class=\"features-column\"\u003e\n\u003ch3\u003ePowerful Signal Processing\u003c\/h3\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eDynamic FFT Engine:\u003c\/strong\u003e Calculate your data on the fly. Choose between Peak, RMS, Peak-to-Peak, and PSD spectrum outputs based on your monitoring standards.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eNoise Reduction:\u003c\/strong\u003e Utilize Welch's averaging method with custom overlaps and segment lengths to filter out random background noise and reveal true mechanical frequencies.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003ePrecision Adjustments:\u003c\/strong\u003e Apply linear detrending, mean removal (DC offset), and specialized windowing (Hann, Flat Top, Blackman-Harris) for crystal-clear signals.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-column\"\u003e\n\u003ch3\u003eInteractive Diagnostics\u003c\/h3\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eKnown Fault Overlays:\u003c\/strong\u003e Add custom vertical reference markers for known machine fault frequencies (e.g., BPFO, Gear Mesh) to instantly diagnose issues when peaks align.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eAuto Peak Detection:\u003c\/strong\u003e Stop hunting for values with your mouse. Automatically highlight and label the top amplitude peaks directly on the chart.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eQuick Settings Menu:\u003c\/strong\u003e Rapidly toggle between Linear\/Log scales, Hz\/Duration formats, or apply different calculation types on the fly without opening the configuration pane.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-column\"\u003e\n\u003ch3\u003eAdvanced Visualizations\u003c\/h3\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eMulti-Trace Layouts:\u003c\/strong\u003e Compare multiple sensors seamlessly. Choose between a single shared axis, multiple overlapping scales, or cleanly separated stacked lanes.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eLogarithmic \u0026amp; dB Scaling:\u003c\/strong\u003e Uncover hidden micro-vibrations (like early bearing wear) alongside massive dominant frequencies using Log spacing and Decibel (dB) scales.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eTotal Customization:\u003c\/strong\u003e Adjust trace colors, line styles (smooth vs. stepped), background transparency, and layout formatting to match your operational dashboards perfectly.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 3. USE CASES SECTION --\u003e\n\u003csection class=\"use-cases-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eFrom Raw Vibration to Actionable Intelligence\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-cases-grid\"\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg fill=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"icon\"\u003e\u003cpath d=\"M19.43 12.98c.04-.32.07-.64.07-.98 0-.34-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49-.12-.64l2.11 1.65c-.04.32-.07.65-.07.98 0 .33.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.23.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eRotating Equipment Monitoring\u003c\/h3\u003e\n\u003cp\u003eDetect imbalance, misalignment, and mechanical looseness in pumps, motors, and fans long before they trigger high-overall vibration alarms or cause unplanned downtime.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg fill=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"icon\"\u003e\u003cpath d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm0 10c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eEarly Bearing Defect Detection\u003c\/h3\u003e\n\u003cp\u003eSpot early-stage roller bearing wear by overlaying custom Fault Frequencies (like BPFO or BPFI) against your live data using Decibel (dB) scaling to highlight tiny harmonics.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg fill=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"icon\"\u003e\u003cpath d=\"M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eElectrical Motor Faults\u003c\/h3\u003e\n\u003cp\u003eDifferentiate between mechanical problems and electrical issues. Pinpoint rotor bar faults and slip frequencies in motor current signatures with high-resolution sampling.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg fill=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"icon\"\u003e\u003cpath d=\"M21 3H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM5 17l3.5-4.5 2.5 3.01L14.5 11l4.5 6H5z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eStructural Resonance Analysis\u003c\/h3\u003e\n\u003cp\u003eToggle the X-axis from Hz to 'Duration' to analyze slow-moving processes. Identify long-wave resonant frequencies in structures, piping, and large-scale industrial frames.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 4. SCREENSHOTS SECTION --\u003e\n\u003csection class=\"screenshots-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eCondition Monitoring Built for the Web\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshots-grid\"\u003e\n\u003cdiv class=\"screenshot-card\" style=\"text-align: start;\"\u003e\n\u003cimg alt=\"FFT Chart showing fault frequency overlays on peaks.\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-custom-symbol-fft-trend-limits.png?v=1779604782\" style=\"margin-bottom: 16px; float: none;\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eInstant Fault Identification\u003c\/h4\u003e\n\u003cp\u003eConfigure custom fault overlays for known frequencies like gear mesh or blade pass. When a live peak perfectly intersects your overlay line, you instantly know the root cause of the vibration.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\" style=\"text-align: start;\"\u003e\n\u003cimg alt=\"Multiple sensors displayed in stacked separate scales.\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-custom-symbol-fft-trend-multiple-sensors.png?v=1779604782\" style=\"margin-bottom: 16px; float: none;\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eCompare Multiple Sensors\u003c\/h4\u003e\n\u003cp\u003eBring in data from inboard, outboard, radial, and axial sensors all at once. Use the 'Separate Scales' layout to neatly stack traces so smaller signals are never dwarfed by larger ones.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\" style=\"text-align: start;\"\u003e\n\u003cimg alt=\"The Quick Settings menu toggling Log scales.\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-custom-symbol-fft-trend-mark-quick-menu.png?v=1779604782\" style=\"margin-bottom: 16px; float: none;\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eOn-the-Fly Quick Settings\u003c\/h4\u003e\n\u003cp\u003eDon't lose your flow state. Click the gear icon on the chart to instantly switch between linear\/logarithmic scales, change axis formats, or toggle peak markers without opening the config pane.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\" style=\"text-align: start;\"\u003e\n\u003cimg alt=\"Chart displaying auto peak detection and Welch averaging.\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-custom-symbol-fft-trend-mark-peaks.png?v=1779604782\" style=\"margin-bottom: 16px; float: none;\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eCut Through the Noise\u003c\/h4\u003e\n\u003cp\u003eEnable Welch's Averaging to suppress random operational noise and clearly expose true mechanical spikes. Use Auto Peak Detection to tag the exact frequencies causing the disturbance.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 5. DEMO VIDEO SECTION --\u003e\n\u003csection class=\"demo-video-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eSee the FFT Chart in Action\u003c\/h2\u003e\n\u003cp\u003eWatch a quick demo showing how easy it is to perform native vibration analysis and setup fault diagnostics directly inside AVEVA PI Vision.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"video-card\"\u003e\n\u003cdiv class=\"video-wrapper\"\u003e\u003cvideo poster=\"https:\/\/via.placeholder.com\/1000x562.png?text=Play+Demo+Video\" preload=\"metadata\" controls=\"controls\"\u003e\n\u003csource type=\"video\/mp4\" src=\"https:\/\/cdn.shopify.com\/videos\/c\/o\/v\/6ebfb93ed09a4a8ea67ee634c0e08727.mp4\"\u003e\nYour browser does not support the video tag.\n\u003c\/source\u003e\u003c\/video\u003e\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003cstyle\u003e\n  \/* --- GENERAL SECTION STYLES --- *\/\n  .section-header {\n    display: flex; flex-direction: column; align-items: center; text-align: center;\n    max-width: 800px; margin: 0 auto 3.5rem auto;\n  }\n  .section-header h2 {\n    color: #111; margin-bottom: 1rem; font-size: 1.8rem;\n  }\n  .section-header p {\n    color: #333; line-height: 1.7; font-size: 1rem;\n  }\n  .feature-list {\n    list-style: none; padding: 0; margin: 0;\n  }\n  .feature-list li {\n    position: relative; padding-left: 30px; margin-bottom: 1.25rem;\n    line-height: 1.6; color: #333;\n  }\n  .feature-list li::before {\n    content: '✔'; position: absolute; left: 0; top: 2px;\n    color: #3F72E5; font-size: 1.2rem;\n  }\n  .feature-list li strong {\n    color: #111; font-weight: 600;\n  }\n\n  \/* --- 1. HERO SECTION --- *\/\n  .product-hero-section {\n    padding: 5rem 1rem; text-align: center;\n  }\n  .product-hero-container {\n      max-width: 700px; margin: 0 auto;\n  }\n  .product-hero-icon {\n      width: 80px; height: auto; margin-bottom: 2rem;\n  }\n  .product-subtitle-tag {\n    color: #3F72E5; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.5px;\n  }\n  h1 {\n    font-size: 2.5rem; margin-bottom: 1.5rem;\n  }\n  .product-description {\n    line-height: 1.7; font-size: 1.1rem; color: #333;\n  }\n\n  \/* --- 2. FEATURES SECTION --- *\/\n  .product-features-section {\n    padding: 4rem 1rem; background-color: #f9fafb;\n  }\n  .features-grid-three-col {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n    gap: 2.5rem;\n    max-width: 1200px; margin: 0 auto;\n  }\n  .features-column h3 {\n    font-size: 1.3rem; margin-bottom: 1.5rem; color: #111;\n  }\n \n  \/* --- 3. USE CASES SECTION --- *\/\n  .use-cases-section {\n    padding: 4rem 1rem;\n  }\n  .use-cases-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n    gap: 2rem;\n    max-width: 1200px; margin: 0 auto;\n  }\n  .use-case-card {\n    background: white; border-radius: 20px; padding: 2rem; text-align: center;\n    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);\n  }\n  .use-case-card .icon {\n    width: 40px; height: 40px; color: #3F72E5; margin-bottom: 1rem;\n  }\n  .use-case-card h3 {\n    font-size: 1.2rem; color: #111; margin-bottom: 0.5rem;\n  }\n  .use-case-card p {\n    color: #333; font-size: 0.9rem; line-height: 1.6;\n  }\n\n  \/* --- 4. SCREENSHOTS SECTION --- *\/\n  .screenshots-section {\n    padding: 4rem 1rem; background-color: #f9fafb;\n  }\n  .screenshots-grid {\n    display: grid;\n    grid-template-columns: repeat(2, 1fr); \/* 2 column layout *\/\n    gap: 2rem;\n    max-width: 1200px; margin: 0 auto;\n  }\n  .screenshot-card {\n    background: white; border-radius: 20px;\n    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);\n    overflow: hidden;\n  }\n  .screenshot-card img {\n    width: 100%; height: auto; display: block; background-color: #f9fafb;\n  }\n  .screenshot-card-content {\n    padding: 1.5rem;\n  }\n  .screenshot-card-content h4 {\n    font-size: 1.2rem; margin: 0 0 0.5rem 0; color: #111;\n  }\n  .screenshot-card-content p {\n    font-size: 0.95rem; line-height: 1.6; color: #333; margin: 0;\n  }\n \n \/* --- 5. DEMO VIDEO SECTION --- *\/\n  .demo-video-section {\n    padding: 4rem 1rem;\n  }\n  .video-card {\n    max-width: 1000px;\n    margin: 0 auto;\n    border-radius: 20px;\n    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);\n    overflow: hidden;\n    background-color: #000; \/* Adds black background behind video *\/\n  }\n  .video-wrapper {\n    position: relative;\n    padding-bottom: 56.25%; \/* 16:9 Aspect Ratio *\/\n    height: 0;\n  }\n  .video-wrapper video {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    border-radius: 20px; \/* Matches the card rounding *\/\n  }\n\n  \/* --- RESPONSIVE STYLES --- *\/\n  @media (max-width: 900px) {\n    .features-grid-three-col {\n      grid-template-columns: 1fr;\n    }\n    .screenshots-grid {\n      grid-template-columns: 1fr; \/* Reverts back to 1 column on smaller mobile screens *\/\n    }\n  }\n\u003c\/style\u003e\n\u003c!-- END: Product Page --\u003e","brand":"Software Athlete","offers":[{"title":"Default Title","offer_id":56640392659270,"sku":null,"price":0.0,"currency_code":"EUR","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/fftplus_4dc32093-868e-40ab-a0e5-76df523e9e47.png?v=1779604961"},{"product_id":"pi-vision-event-comparison-chart","title":"Event Comparison Chart+","description":"\u003c!-- START: Product Page for Event Comparison Chart+ --\u003e\n\u003cp\u003e \u003c\/p\u003e\n\u003c!-- 1. HERO SECTION --\u003e\n\u003csection class=\"product-hero-section\"\u003e\n\u003cdiv class=\"product-hero-container\" style=\"text-align: center;\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/eventcomparisonchart_160x160.png?v=1779612879\" style=\"margin-bottom: 16px; float: none;\"\u003e\u003cbr\u003e\n\u003cp class=\"product-subtitle-tag\"\u003ePI Vision Custom Symbol • Vision Library+\u003c\/p\u003e\n\u003ch1\u003eCompare Operational Events Like Never Before\u003c\/h1\u003e\n\u003cp class=\"product-description\"\u003eStop guessing with standard calendar-time trends. Event Comparison Chart+ aligns your PI Event Frames on a relative time axis, empowering you to analyze batches, startups, trips, and golden benchmarks seamlessly inside AVEVA PI Vision.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 2. FEATURES SECTION --\u003e\n\u003csection class=\"product-features-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eAdvanced Event Alignment Meets Intuitive Interactivity\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-grid-three-col\"\u003e\n\u003cdiv class=\"features-column\"\u003e\n\u003ch3\u003ePowerful Alignment \u0026amp; Scaling\u003c\/h3\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eRelative Time Axes:\u003c\/strong\u003e Align events by Matched Start, Matched End, or completely Normalize them (0–100%) to compare shapes perfectly regardless of duration differences.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eVersatile Layouts:\u003c\/strong\u003e Compare traces using a Single Scale, Multiple Scales, Stacked Lanes, or a powerful Trellis Grid to facet your comparison by asset or severity.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eChild Event Overlays:\u003c\/strong\u003e Reveal internal structure by overlaying child event frames as contextual bands within the parent event.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-column\"\u003e\n\u003ch3\u003eGolden Benchmarks \u0026amp; Context\u003c\/h3\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eGolden \u0026amp; Tolerance Bands:\u003c\/strong\u003e Turn historical \"best practices\" into reference profiles. Overlay a golden average trace and generate custom upper\/lower tolerance envelopes.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003ePinned References:\u003c\/strong\u003e Keep known \"good\" or \"bad\" historical events permanently visible for comparison, even as your current search results update.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eRich Categorization:\u003c\/strong\u003e Use event attributes to group, color, and organize your events dynamically based on context like operating mode or product grade.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-column\"\u003e\n\u003ch3\u003eInteractive Diagnostics\u003c\/h3\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eIntegrated Action Table:\u003c\/strong\u003e Drive analysis directly from the chart. Hide\/show events, pin references, view min\/max plot stats, and open PI Event details in one click.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eDropped Markers:\u003c\/strong\u003e Click anywhere on the plot to drop vertical comparison markers—instantly answering \"what do all events look like exactly 5 minutes in?\"\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eRuntime Event Shifting:\u003c\/strong\u003e Test alignment hypotheses on the fly by shifting events left or right using standard PI duration strings (e.g., 5m, 30s) without editing data.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 3. USE CASES SECTION --\u003e\n\u003csection class=\"use-cases-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eFrom Raw Event Frames to Actionable Insights\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-cases-grid\"\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg class=\"icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" fill=\"currentColor\"\u003e\u003cpath d=\"M11.99 18.54l-7.37-5.73L3 14.07l9 7 9-7-1.63-1.27-7.38 5.74zM12 16l7.36-5.73L21 9l-9-7-9 7 1.63 1.27L12 16z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eBatch \u0026amp; Process Optimization\u003c\/h3\u003e\n\u003cp\u003eCompare repeated manufacturing batches, cleaning cycles (CIP), or product grades to identify the optimal run shape, reduce variability, and minimize cycle durations.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg class=\"icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" fill=\"currentColor\"\u003e\u003cpath d=\"M16.56 5.44l-1.45 1.45A5.969 5.969 0 0118 12c0 3.31-2.69 6-6 6s-6-2.69-6-6c0-2.17 1.16-4.06 2.88-5.12L7.44 5.44A7.961 7.961 0 004 12c0 4.42 3.58 8 8 8s8-3.58 8-8c0-2.72-1.36-5.12-3.44-6.56zM11 3h2v10h-2z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eStartup \u0026amp; Shutdown Analysis\u003c\/h3\u003e\n\u003cp\u003eEnsure critical procedures are followed safely and consistently by aligning equipment ramps and shutdowns using the 'Matched Start' or 'Matched End' alignment modes.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg class=\"icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" fill=\"currentColor\"\u003e\u003cpath d=\"M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eTrip \u0026amp; Failure Investigation\u003c\/h3\u003e\n\u003cp\u003eApply 'Pre-Event Offsets' to load critical leading indicators before an event boundary. Anchor failures using 'Matched End' to find the exact moment a process derailed.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg class=\"icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" fill=\"currentColor\"\u003e\u003cpath d=\"M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eLive Fleet Monitoring\u003c\/h3\u003e\n\u003cp\u003eHighlight active, in-progress events in real-time. Visually separate live runs from completed history, instantly identifying if current operations are drifting outside of expected limits.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 4. SCREENSHOTS SECTION --\u003e\n\u003csection class=\"screenshots-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eEvent Analysis Built for Analysts and Operators\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshots-grid\"\u003e\n\u003cdiv style=\"text-align: start;\" class=\"screenshot-card\"\u003e\n\u003cimg style=\"margin-bottom: 16px; float: none;\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-event-comparison-startup.png?v=1779614203\" alt=\"Chart showing Matched Start, Matched End, and Normalized alignment options.\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eMeaningful X-Axis Alignment\u003c\/h4\u003e\n\u003cp\u003eA standard trend tells you what happened at 10:32 AM. This symbol tells you what happens exactly 15 minutes into an event. Use Matched Start, Matched End, or Normalized modes to effortlessly compare events with completely different durations.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv style=\"text-align: start;\" class=\"screenshot-card\"\u003e\n\u003cimg style=\"margin-bottom: 16px; float: none;\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-event-comparison-trellis-grid-tooltip.png?v=1779614203\" alt=\"Chart showing Trellis Grid layout splitting data by asset.\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eTrellis Grid \u0026amp; Layout Options\u003c\/h4\u003e\n\u003cp\u003eToo many traces create an unreadable mess. Utilize Single Scale, Split Scales, or the Trellis Grid mode to automatically facet your comparison into smaller, organized panels grouped by asset, severity, or batch grade.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv style=\"text-align: start;\" class=\"screenshot-card\"\u003e\n\u003cimg style=\"margin-bottom: 16px; float: none;\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-event-comparison-chart-golden-batch-band-3.png?v=1779614203\" alt=\"Chart displaying a Golden Reference profile and tolerance envelope.\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eGolden Profiles \u0026amp; Tolerance Bands\u003c\/h4\u003e\n\u003cp\u003eSelect your best historical runs and hit 'Golden'. The chart automatically builds an average reference profile and wraps it in a custom tolerance band, allowing operators to instantly see when live operations underperform.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv style=\"text-align: start;\" class=\"screenshot-card\"\u003e\n\u003cimg style=\"margin-bottom: 16px; float: none;\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-event-comparison-chart-action-table.png?v=1779614315\" alt=\"The integrated action table with plot stats, shift controls, and context.\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eIntegrated Action Table\u003c\/h4\u003e\n\u003cp\u003eStop hunting for trace colors in a passive legend. The built-in table acts as a workspace: pin references, extract min\/max plot statistics, or shift events incrementally (e.g., \"30s\" left or right) to align signals perfectly.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 5. DEMO VIDEO SECTION --\u003e\n\u003csection class=\"demo-video-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eSee Event Comparison Chart+ in Action\u003c\/h2\u003e\n\u003cp\u003eWatch a quick demo to see how easy it is to define event populations, align traces on a relative time axis, and build golden reference profiles inside AVEVA PI Vision.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"video-card\"\u003e\n\u003cdiv class=\"video-wrapper\"\u003e\u003cvideo controls=\"controls\" preload=\"metadata\" poster=\"https:\/\/via.placeholder.com\/1000x562.png?text=Play+ECC%2B+Demo+Video\"\u003e\n\u003csource src=\"https:\/\/cdn.shopify.com\/videos\/c\/o\/v\/1213c81fae09498a89de785fdf6eb0d3.mp4\" type=\"video\/mp4\"\u003e\nYour browser does not support the video tag.\n\u003c\/source\u003e\u003c\/video\u003e\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003cstyle\u003e\n  \/* --- GENERAL SECTION STYLES --- *\/\n  .section-header {\n    display: flex; flex-direction: column; align-items: center; text-align: center;\n    max-width: 800px; margin: 0 auto 3.5rem auto;\n  }\n  .section-header h2 {\n    color: #111; margin-bottom: 1rem; font-size: 1.8rem;\n  }\n  .section-header p {\n    color: #333; line-height: 1.7; font-size: 1rem;\n  }\n  .feature-list {\n    list-style: none; padding: 0; margin: 0;\n  }\n  .feature-list li {\n    position: relative; padding-left: 30px; margin-bottom: 1.25rem;\n    line-height: 1.6; color: #333;\n  }\n  .feature-list li::before {\n    content: '✔'; position: absolute; left: 0; top: 2px;\n    color: #3F72E5; font-size: 1.2rem;\n  }\n  .feature-list li strong {\n    color: #111; font-weight: 600;\n  }\n\n  \/* --- 1. HERO SECTION --- *\/\n  .product-hero-section {\n    padding: 5rem 1rem; text-align: center;\n  }\n  .product-hero-container {\n      max-width: 700px; margin: 0 auto;\n  }\n  .product-hero-icon {\n      width: 80px; height: auto; margin-bottom: 2rem;\n  }\n  .product-subtitle-tag {\n    color: #3F72E5; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.5px;\n  }\n  h1 {\n    font-size: 2.5rem; margin-bottom: 1.5rem;\n  }\n  .product-description {\n    line-height: 1.7; font-size: 1.1rem; color: #333;\n  }\n\n  \/* --- 2. FEATURES SECTION --- *\/\n  .product-features-section {\n    padding: 4rem 1rem; background-color: #f9fafb;\n  }\n  .features-grid-three-col {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n    gap: 2.5rem;\n    max-width: 1200px; margin: 0 auto;\n  }\n  .features-column h3 {\n    font-size: 1.3rem; margin-bottom: 1.5rem; color: #111;\n  }\n \n  \/* --- 3. USE CASES SECTION --- *\/\n  .use-cases-section {\n    padding: 4rem 1rem;\n  }\n  .use-cases-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n    gap: 2rem;\n    max-width: 1200px; margin: 0 auto;\n  }\n  .use-case-card {\n    background: white; border-radius: 20px; padding: 2rem; text-align: center;\n    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);\n  }\n  .use-case-card .icon {\n    width: 40px; height: 40px; color: #3F72E5; margin-bottom: 1rem;\n  }\n  .use-case-card h3 {\n    font-size: 1.2rem; color: #111; margin-bottom: 0.5rem;\n  }\n  .use-case-card p {\n    color: #333; font-size: 0.9rem; line-height: 1.6;\n  }\n\n  \/* --- 4. SCREENSHOTS SECTION --- *\/\n  .screenshots-section {\n    padding: 4rem 1rem; background-color: #f9fafb;\n  }\n  .screenshots-grid {\n    display: grid;\n    grid-template-columns: 1fr; \/* Changed to 1 column layout *\/\n    gap: 3rem; \/* Increased gap slightly for single column layout *\/\n    max-width: 900px; \/* Reduced to 900px to keep images proportionally sized on desktop *\/\n    margin: 0 auto;\n  }\n  .screenshot-card {\n    background: white; border-radius: 20px;\n    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);\n    overflow: hidden;\n  }\n  .screenshot-card img {\n    width: 100%; height: auto; display: block; background-color: #f9fafb;\n  }\n  .screenshot-card-content {\n    padding: 2rem; \/* Increased padding slightly for the larger card *\/\n  }\n  .screenshot-card-content h4 {\n    font-size: 1.3rem; margin: 0 0 0.5rem 0; color: #111;\n  }\n  .screenshot-card-content p {\n    font-size: 1.05rem; line-height: 1.6; color: #333; margin: 0;\n  }\n \n \/* --- 5. DEMO VIDEO SECTION --- *\/\n  .demo-video-section {\n    padding: 4rem 1rem;\n  }\n  .video-card {\n    max-width: 1000px;\n    margin: 0 auto;\n    border-radius: 20px;\n    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);\n    overflow: hidden;\n    background-color: #000; \/* Adds black background behind video *\/\n  }\n  .video-wrapper {\n    position: relative;\n    padding-bottom: 56.25%; \/* 16:9 Aspect Ratio *\/\n    height: 0;\n  }\n  .video-wrapper video {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    border-radius: 20px; \/* Matches the card rounding *\/\n  }\n\n  \/* --- RESPONSIVE STYLES --- *\/\n  @media (max-width: 900px) {\n    .features-grid-three-col {\n      grid-template-columns: 1fr;\n    }\n  }\n\u003c\/style\u003e\n\u003c!-- END: Product Page --\u003e","brand":"Software Athlete","offers":[{"title":"Default Title","offer_id":56641587282246,"sku":null,"price":0.0,"currency_code":"EUR","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/eventcomparisonchart_c841f589-3d2b-47f9-83f1-62f01f036ce7.png?v=1779614338"}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/collections\/network-connections-technology-background2.png?v=1684785028","url":"https:\/\/www.software-athlete.com\/collections\/custom-symbols\/misc-symbol.oembed?page=2","provider":"Software Athlete","version":"1.0","type":"link"}