{"product_id":"kpi-card","title":"KPI Card+","description":"\u003c!-- START: Product Page for KPI Card+ --\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=\"KPI Card+ Product Icon\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/kpicard-icon.png?v=1789641240\" style=\"margin-bottom: 32px; float: none;\"\u003e\n\u003cp class=\"product-subtitle-tag\"\u003ePI Vision Custom Symbol • Vision Library+\u003c\/p\u003e\n\u003ch1\u003eMake Every Number Count with KPI Card+\u003c\/h1\u003e\n\u003cp class=\"product-description\"\u003eA single value rarely tells the whole story. KPI Card+ turns any PI Point or AF attribute into a modern dashboard card, with calculated summaries, target comparisons, sparkline trends and multistate styling built in. Your operators see what the number is, whether it is good, and where it is heading, all without a full chart.\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\u003eEverything a KPI Needs, in One Compact Card\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-grid-three-col\"\u003e\n\u003cdiv class=\"features-column\"\u003e\n\u003ch3\u003eCurrent or Calculated Values\u003c\/h3\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eLive or Summarized:\u003c\/strong\u003e Show the current value, or let PI Web API calculate a Total, Average, Minimum, Maximum, Range, Standard Deviation, Count, or Percent Good.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eTime or Event Weighted:\u003c\/strong\u003e Choose the calculation basis that fits your data, including time-weighted totals with a conversion factor and unit.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eFlexible Time Ranges:\u003c\/strong\u003e Calculate over the display time range, a custom PI time range, or a rolling duration with offset. Calculations follow playback and historical display times.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-column\"\u003e\n\u003ch3\u003eContext at a Glance\u003c\/h3\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eTarget Comparison:\u003c\/strong\u003e Compare against a fixed value, the AF Target trait, a past value (e.g. \u003cem\u003ea day ago\u003c\/em\u003e), or a historical average. Show the difference as a value or percent, with an optional tolerance band.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eSparkline Trends:\u003c\/strong\u003e Add a line or bar sparkline as a background overlay or in a dedicated bottom area. Use the target as the baseline to see at once when the value was above or below it.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eData Quality Built In:\u003c\/strong\u003e Bad, questionable, substituted and stale values get compact indicators, so users can tell a real KPI from a data problem.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-column\"\u003e\n\u003ch3\u003eDashboard-Ready Styling\u003c\/h3\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eThemes \u0026amp; Presets:\u003c\/strong\u003e Start with a polished theme, surface and container preset, or go fully custom with text, background, border, accent, font and alignment settings.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003e11 Multistate Treatments:\u003c\/strong\u003e Accent + Tint, Text, Border, Soft Fill, Status Dot, Value Badge, Solid Fill, Progress, Progress and Value, Fill Level, and Radial Progress, selected directly from the native PI Vision multistate settings.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eClean, Focused Content:\u003c\/strong\u003e Show or hide the value, units, label and timestamp independently. Hidden elements leave no empty gaps, and the card keeps PI Vision's native display link navigation.\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 the Numbers That Matter Most\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 12V6z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eProduction vs. Target\u003c\/h3\u003e\n\u003cp\u003eDisplay today's production total next to its AF target. A green or red badge instantly shows whether the plant is ahead of plan or falling behind.\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=\"M7 2v11h3v9l7-12h-4l4-8z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eEnergy \u0026amp; Utility Consumption\u003c\/h3\u003e\n\u003cp\u003eTurn a flow or power signal into a time-weighted daily total, compare it with yesterday, and add a bar sparkline to reveal consumption peaks.\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.38 8.57l-1.23 1.85a8 8 0 0 1-.22 7.58H5.07A8 8 0 0 1 15.58 6.85l1.85-1.23A10 10 0 0 0 3.35 19a2 2 0 0 0 1.72 1h13.85a2 2 0 0 0 1.74-1 10 10 0 0 0-.27-10.44zm-9.79 6.84a2 2 0 0 0 2.83 0l5.66-8.49-8.49 5.66a2 2 0 0 0 0 2.83z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eTank Levels \u0026amp; Capacity\u003c\/h3\u003e\n\u003cp\u003eVisualize tank levels, utilization or batch progress with Fill Level, Progress bar or Radial Progress styles driven by your 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=\"M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eControl Room Overviews\u003c\/h3\u003e\n\u003cp\u003eBuild clean KPI walls for operations and management displays, mixing numeric values with equipment states like \"Unit Down\" or operating modes.\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\u003eCompact Cards, Complete Context\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 Card+ symbols in PI Vision showing target badges, sparklines, progress bars and multistate styles.\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-kpi-card-examples.png?v=1789641175\" style=\"margin-bottom: 16px; float: none;\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eOne Symbol, Many Looks\u003c\/h4\u003e\n\u003cp\u003eFrom a minimal value tile to accent borders, solid fills, progress bars and status dots: every card here is KPI Card+. Numeric values, digital states and text all display cleanly, and multistate colors highlight what needs attention.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\" style=\"text-align: start;\"\u003e\n\u003cimg alt=\"Two KPI cards with line and bar sparklines and target comparison badges.\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-kpi-card-sparkline-trends.png?v=1789641173\" style=\"margin-bottom: 16px; float: none;\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eSparkline Trends \u0026amp; Target Badges\u003c\/h4\u003e\n\u003cp\u003eCompare the KPI with its 1-hour average or its value a day ago. With the target as the sparkline baseline, bars turn green or red to show exactly when performance was above or below the benchmark.\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  \/* --- 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":57398372303174,"sku":null,"price":0.0,"currency_code":"USD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/kpicard-icon.png?v=1789641240","url":"https:\/\/www.software-athlete.com\/products\/kpi-card","provider":"Software Athlete","version":"1.0","type":"link"}