From 546ddc68cec7c9355fb297251b3089f9cb5aa943 Mon Sep 17 00:00:00 2001 From: Dimitrie Hoekstra Date: Tue, 4 Aug 2026 21:52:49 +0200 Subject: [PATCH 1/2] Use case pages: add a How It Works section Use case pages carried only what and why. This adds a howItWorks block to the layout covering the component breakdown, the design pattern chosen, an end-to-end architecture diagram and the hand-off into the product docs. Filled in for production monitoring and shop floor communication, with placehold.co stand-ins until the real diagrams are drawn. Two supporting fixes: section eyebrow numbers now derive from the nav array instead of being hardcoded, so they no longer drift when a page omits a block; and the architecture front-matter key on shop floor communication, which the layout never read, now renders as a link to the architecture page the use case sits on. --- src/_includes/layouts/use-case.njk | 143 +++++++++++++++++++-- src/use-cases/production-monitoring.njk | 38 ++++++ src/use-cases/shop-floor-communication.njk | 39 +++++- 3 files changed, 207 insertions(+), 13 deletions(-) diff --git a/src/_includes/layouts/use-case.njk b/src/_includes/layouts/use-case.njk index d3a0372a73..edcb7c0171 100644 --- a/src/_includes/layouts/use-case.njk +++ b/src/_includes/layouts/use-case.njk @@ -9,10 +9,33 @@ sitemapPriority: 0.7 problem hero sub-headline (the pain in one line) customerPain { heading, intro[], cards[ {icon,title,detail} ] } outcomeFirst { heading, intro, dimensions[ {label,title,detail} ] } + howItWorks { heading, intro, designPattern{}, diagram{}, pieces[], architecture, docsCta{} } whyItMatters { heading, intro, points[ {title,detail} ] } competition { heading, intro, traps[ {label,title,detail} ] } comparison { without[ {title,detail} ], with[ {title,detail} ] } + howItWorks answers "how does FlowFuse build this", which the pain, outcome + and comparison blocks deliberately do not. It is the bridge from the + marketing narrative into the product docs, so keep it high level here and + push every detail into a docs link. + + designPattern { kind, name, detail, docsUrl } + kind is the pattern family, e.g. "Hardware pattern" or + "Software pattern". name is the specific pattern chosen + for this use case. + diagram { src, alt, caption, width, height, placeholder } + End-to-end architecture drawing. src may be a placeholder + while the real diagram is commissioned; set + diagram.placeholder to true to render the placeholder + treatment and keep it visibly unfinished. width/height + default to 1200x630 and only exist to reserve the box, so + override them when the real asset is a different shape. + pieces [ {icon, title, detail, docsUrl} ] + The problem broken into the individual components that get + built. Order them the way you would build them. + architecture slug of a /use-cases/ architecture page this sits on + docsCta { label, url } + Legacy fall-back front-matter (simple skeleton, still supported): gap[], workflow[], outcomes[] @@ -23,11 +46,17 @@ sitemapPriority: 0.7 {% set nav = [] %} {% if customerPain %}{% set nav = nav.concat([{ id: "customer-pain", label: "Customer Pain" }]) %}{% endif %} {% if outcomeFirst %}{% set nav = nav.concat([{ id: "outcome-first", label: "Outcome First" }]) %}{% endif %} +{% if howItWorks %}{% set nav = nav.concat([{ id: "how-it-works", label: "How It Works" }]) %}{% endif %} {% if whyItMatters %}{% set nav = nav.concat([{ id: "why-it-matters", label: "Why It Matters" }]) %}{% endif %} {% if competition %}{% set nav = nav.concat([{ id: "competition", label: "Why Off-the-Shelf Fails" }]) %}{% endif %} {% if comparison %}{% set nav = nav.concat([{ id: "with-without", label: "With / Without FlowFuse" }]) %}{% endif %} {% if aiBuildLayer %}{% set nav = nav.concat([{ id: "ai-build-layer", label: "Build It With AI" }]) %}{% endif %} +{# --- section eyebrow numbers, derived from nav so they cannot drift --- + Pages omit blocks freely, so a hardcoded "03" desyncs from the nav as soon + as an earlier block is missing. Look the number up instead. #} +{% macro secNum(id) %}{%- for item in nav -%}{%- if item.id == id -%}{%- if loop.index < 10 -%}0{%- endif -%}{{ loop.index }}{%- endif -%}{%- endfor -%}{% endmacro %} +
-

01 · Customer pain

+

{{ secNum("customer-pain") }} · Customer pain

{{ customerPain.heading }}

{% for paragraph in customerPain.intro %} @@ -94,11 +123,11 @@ sitemapPriority: 0.7 {% if outcomeFirst %}
-

02 · Outcome first

+

{{ secNum("outcome-first") }} · Outcome first

{{ outcomeFirst.heading }}

{{ outcomeFirst.intro }}

@@ -114,13 +143,103 @@ sitemapPriority: 0.7
{% endif %} + {% if howItWorks %} + +
+
+

{{ secNum("how-it-works") }} · How it works

+

{{ howItWorks.heading or "How FlowFuse builds this" }}

+ {% if howItWorks.intro %} +

{{ howItWorks.intro }}

+ {% endif %} + + {% if howItWorks.designPattern %} +
+
+ {% include "components/icons/squares-2x2.svg" %} +
+
+ {{ howItWorks.designPattern.kind }} +

{{ howItWorks.designPattern.name }}

+

{{ howItWorks.designPattern.detail }}

+ {% if howItWorks.designPattern.docsUrl %} + + Read the pattern in the docs + {% include "components/icons/arrow-right.svg" %} + + {% endif %} +
+
+ {% endif %} + + {% if howItWorks.diagram %} +
+
+ {# width/height are here to reserve the box before the image + arrives; without them "h-auto" collapses the figure to + zero and the whole section below it jumps on load. #} + {{ howItWorks.diagram.alt }} +
+ {% if howItWorks.diagram.caption or howItWorks.diagram.placeholder %} +
{% if howItWorks.diagram.placeholder %}Placeholder diagram, pending art request. {% endif %}{{ howItWorks.diagram.caption }}
+ {% endif %} +
+ {% endif %} + + {% if howItWorks.pieces %} +

{{ howItWorks.piecesHeading or "The individual pieces" }}

+
+ {% for piece in howItWorks.pieces %} +
+
+
+ {% include "components/icons/" + piece.icon + ".svg" %} +
+ {% if loop.index < 10 %}0{% endif %}{{ loop.index }} +
+

{{ piece.title }}

+

{{ piece.detail }}

+ {% if piece.docsUrl %} + + Docs + {% include "components/icons/arrow-right.svg" %} + + {% endif %} +
+ {% endfor %} +
+ {% endif %} + + {% if howItWorks.docsCta or howItWorks.architecture %} +
+ {% if howItWorks.docsCta %} + {{ howItWorks.docsCta.label or "Read the docs" }} + {% endif %} + {% if howItWorks.architecture %} + + See the architecture this sits on + {% include "components/icons/arrow-right.svg" %} + + {% endif %} +
+ {% endif %} +
+
+ {% endif %} + {% if whyItMatters %}
-

03 · Why this is important

+

{{ secNum("why-it-matters") }} · Why this is important

{{ whyItMatters.heading }}

{{ whyItMatters.intro }}

@@ -140,11 +259,11 @@ sitemapPriority: 0.7 {% if competition %}
-

04 · Why off-the-shelf doesn't work

+

{{ secNum("competition") }} · Why off-the-shelf doesn't work

{{ competition.heading }}

{{ competition.intro }}

@@ -165,11 +284,11 @@ sitemapPriority: 0.7 {% if comparison %}
-

05 · With / without FlowFuse

+

{{ secNum("with-without") }} · With / without FlowFuse

Without FlowFuse

@@ -206,11 +325,11 @@ sitemapPriority: 0.7 {% if aiBuildLayer %}
-

06 · Build it with AI

+

{{ secNum("ai-build-layer") }} · Build it with AI

{{ aiBuildLayer.heading or "From described to deployed, with the FlowFuse Expert" }}

{{ aiBuildLayer.intro }}

diff --git a/src/use-cases/production-monitoring.njk b/src/use-cases/production-monitoring.njk index 5086a4a875..8dfbc56b0e 100644 --- a/src/use-cases/production-monitoring.njk +++ b/src/use-cases/production-monitoring.njk @@ -7,6 +7,44 @@ problem: "Your operation is running. You just can't see it clearly enough, until industries: ["automotive", "food-beverage", "life-sciences", "aviation-aerospace", "aerospace-components", "renewables", "semiconductors", "electronics-appliances"] values: ["production-performance"] +howItWorks: + heading: "How FlowFuse builds production monitoring." + intro: "Production monitoring is not one app you install. It is a handful of pieces you define once and then replicate. This is how the problem breaks down, and which FlowFuse pattern carries it across every line and site." + designPattern: + kind: "Hardware pattern" + name: "Pipeline plus environment variables" + detail: "The monitoring application is built once and distributed to every line by a DevOps pipeline. Everything site-specific, tag addresses, line names, shift boundaries, lives in environment variables instead of inside the flows, so the same snapshot runs everywhere without an edit." + docsUrl: "/docs/user/devops-pipelines/" + diagram: + placeholder: true + src: "https://placehold.co/1200x630/eef2ff/4338ca?text=Production+Monitoring+Architecture" + alt: "End-to-end architecture for production monitoring: PLCs and machines feeding edge instances, publishing to a broker and historian, with role-specific dashboards on top and a pipeline distributing the application across sites." + caption: "Machines and PLCs into edge instances, out over MQTT into your historian, role-specific dashboards on top, and one pipeline distributing the whole application across every line." + pieces: + - icon: "queue-list" + title: "Define the data model" + detail: "Name the equipment hierarchy and tag structure first: site, line, cell, signal. Every later piece depends on it, and this is exactly the part an off-the-shelf tool decides for you." + - icon: "chart" + title: "Derive the metrics" + detail: "Counts, cycle times, downtime reasons and OEE are calculated from the model rather than read off a machine. The logic sits in Node-RED flows your own team can read and change." + - icon: "device-agent" + title: "Collect at the edge" + detail: "The Device Agent runs an instance on existing edge hardware and speaks OPC-UA, Modbus, S7 or MQTT to whatever is already on the floor." + docsUrl: "/docs/device-agent/introduction/" + - icon: "arrows-right-left" + title: "Publish and store" + detail: "Contextualized data leaves the edge on a stable topic structure and lands in your historian or database. The schema and the storage stay yours." + - icon: "dashboard" + title: "Visualize per role" + detail: "A line view for the supervisor, trend detail for the maintenance engineer, a roll-up for the plant manager. FlowFuse Dashboard builds all three from the same data." + - icon: "rectangle-stack" + title: "Replicate across sites" + detail: "Snapshot the working application and let the pipeline push it to every other line, with each site's specifics supplied by environment variables." + docsUrl: "/docs/user/envvar/" + docsCta: + label: "Read the pipeline docs" + url: "/docs/user/devops-pipelines/" + aiBuildLayer: intro: "The FlowFuse Expert works on this use case with you: describe the monitoring you need and get a working starting flow, then query what it captures in plain language." steps: diff --git a/src/use-cases/shop-floor-communication.njk b/src/use-cases/shop-floor-communication.njk index 070eede175..a1a8645826 100644 --- a/src/use-cases/shop-floor-communication.njk +++ b/src/use-cases/shop-floor-communication.njk @@ -6,7 +6,44 @@ meta: problem: "The line stopped four minutes ago. The person who can fix it will find out when someone walks over." industries: ["automotive", "food-beverage", "aviation-aerospace", "electronics-appliances"] values: ["labor-operational-efficiency"] -architecture: "edge-connectivity" +howItWorks: + heading: "How FlowFuse builds connected andon." + intro: "Getting an event to the right person is a small number of pieces, not a product. The routing logic is identical at every site; only the people, channels and shift patterns differ, and that is what decides the pattern." + designPattern: + kind: "Hardware pattern" + name: "Pipeline plus external configuration" + detail: "The routing and escalation flows are built once and distributed by pipeline. Who responds, on which channel, during which shift is read at runtime from a central configuration source, so a rota change or a new contact never requires a redeploy." + docsUrl: "/docs/user/devops-pipelines/" + diagram: + placeholder: true + src: "https://placehold.co/1200x630/eef2ff/4338ca?text=Shop+Floor+Communication+Architecture" + alt: "End-to-end architecture for connected andon: machine signals and operator call buttons into edge instances, routed against a central directory of roles and shifts, delivered to displays, team channels and phones, with acknowledgment timing recorded." + caption: "Machine signals and call buttons into edge instances, routed against a central directory of roles and shifts, out to displays, team channels and phones, with every acknowledgment timed." + pieces: + - icon: "bell-alert" + title: "Capture the event" + detail: "Machine signals, alarm bits and operator call buttons all become the same kind of event, collected by an edge instance next to the equipment." + docsUrl: "/docs/device-agent/introduction/" + - icon: "queue-list" + title: "Model the event" + detail: "Each event carries type, area, severity and the role that should respond. Routing decisions are made against that shape, not against a machine address." + - icon: "users" + title: "Keep the directory outside the flow" + detail: "Roles, contacts, channels and the shift calendar live in configuration rather than inside the flows, so the floor can change who responds without touching the application." + docsUrl: "/docs/user/envvar/" + - icon: "share" + title: "Deliver where people look" + detail: "The same event fans out to andon displays, team channels and phones, each with the context the recipient needs to act on it." + - icon: "clock" + title: "Acknowledge and escalate" + detail: "An unacknowledged event climbs the chain on a timer. Nothing waits on someone happening to be free." + - icon: "circle-stack" + title: "Record the timing" + detail: "Event, notification and acknowledgment timestamps land in your database, which is what turns response time into a metric you can manage." + architecture: "edge-connectivity" + docsCta: + label: "Read the pipeline docs" + url: "/docs/user/devops-pipelines/" customerPain: heading: "Events travel at walking speed." From 32392d91c4e720f0628e653b97991546c536d680 Mon Sep 17 00:00:00 2001 From: Dimitrie Hoekstra Date: Tue, 4 Aug 2026 23:25:53 +0200 Subject: [PATCH 2/2] Use Cases: add Equipment Monitoring Restores the Equipment Monitoring page written in the earlier three-lens IA work and dropped when that work was cut back. Copy is recovered as written and still carries its template-copy marker for a Showcase pass. Adapted to the current layout: the architecture key moves inside a new howItWorks block covering condition monitoring from controller signals out to the fleet, and expertDock is dropped since nothing renders it. Diagram is a placehold.co stand-in. Links it from the homepage Operational Application System entry and the footer use case list. --- src/_includes/layouts/base.njk | 1 + src/index.njk | 1 + src/use-cases/equipment-monitoring.njk | 139 +++++++++++++++++++++++++ 3 files changed, 141 insertions(+) create mode 100644 src/use-cases/equipment-monitoring.njk diff --git a/src/_includes/layouts/base.njk b/src/_includes/layouts/base.njk index ceb8057f15..c0e04673d5 100644 --- a/src/_includes/layouts/base.njk +++ b/src/_includes/layouts/base.njk @@ -414,6 +414,7 @@ eleventyComputed:
diff --git a/src/index.njk b/src/index.njk index b7f03ee6c6..cda58f19fd 100644 --- a/src/index.njk +++ b/src/index.njk @@ -84,6 +84,7 @@ operationalSystem: - title: "OPERATIONAL INFRASTRUCTURE" items: - name: "Equipment Monitoring" + url: "/use-cases/equipment-monitoring/" description: "PLC and device health monitoring across controller types." - name: "Operational Data Pipelines" description: "Structured controller data flows, diagnostics, and routing." diff --git a/src/use-cases/equipment-monitoring.njk b/src/use-cases/equipment-monitoring.njk new file mode 100644 index 0000000000..3c8d26a2fd --- /dev/null +++ b/src/use-cases/equipment-monitoring.njk @@ -0,0 +1,139 @@ +--- +title: "Equipment Monitoring" +meta: + title: "Equipment Monitoring | Use Cases | FlowFuse" + description: "Condition monitoring for distributed equipment: connect assets over any protocol, watch health signals at the edge, and catch failures before they happen. Built on Node-RED, managed with FlowFuse." +problem: "Your equipment tells you it is failing, long before it fails. Nobody is set up to listen." +industries: ["automotive", "food-beverage", "renewables"] +values: ["production-performance", "asset-reliability"] + +howItWorks: + heading: "How FlowFuse builds equipment monitoring." + intro: "Condition monitoring is a small set of health signals, read from the controller and judged against what normal looks like for that machine. This is how it breaks down and which FlowFuse pattern takes it to a fleet." + designPattern: + kind: "Hardware pattern" + name: "Pipeline plus environment variables" + detail: "One monitoring application, distributed by pipeline to every machine. Tag addresses, machine names and thresholds live in environment variables rather than in the flows, so the same snapshot runs on a hundred assets without an edit." + docsUrl: "/docs/user/devops-pipelines/" + diagram: + placeholder: true + src: "https://placehold.co/1200x630/eef2ff/4338ca?text=Equipment+Monitoring+Architecture" + alt: "End-to-end architecture for equipment monitoring: edge instances reading controller health signals, deriving condition against thresholds, alerting maintenance, storing trends, and one pipeline distributing the application across the fleet." + caption: "Edge instances reading controller health signals, condition derived against per-machine thresholds, alerts to maintenance, trends stored, and one pipeline covering the fleet." + pieces: + - icon: "device-agent" + title: "Read the controller directly" + detail: "An edge instance speaks to whatever is already on the machine, across controller types and vendors, without a gateway per brand." + docsUrl: "/docs/device-agent/introduction/" + - icon: "pulse" + title: "Choose the health signals" + detail: "Cycle time drift, current draw, temperature, fault counts and retries. A handful of signals that actually precede failure, not everything the PLC exposes." + - icon: "cog-6-tooth" + title: "Judge against per-machine normal" + detail: "Thresholds and baselines differ by asset and are supplied as configuration, so one application does not force one definition of healthy." + docsUrl: "/docs/user/envvar/" + - icon: "bell-alert" + title: "Reach maintenance before the stop" + detail: "Degradation routed to the people who can schedule around it, with the signal that triggered it attached." + - icon: "circle-stack" + title: "Keep the trend" + detail: "History is what turns a reading into evidence of degradation, and what makes the next threshold better than a guess." + - icon: "squares-2x2" + title: "Deploy to the fleet, not the machine" + detail: "Device groups make the deployment target a set of assets, so adding a machine is registering it rather than building for it." + docsUrl: "/docs/user/device-groups/" + architecture: "edge-connectivity" + docsCta: + label: "Read the pipeline docs" + url: "/docs/user/devops-pipelines/" + +customerPain: + heading: "Distributed assets, invisible condition." + intro: + - "Compressors, pumps, ovens, robots, remote installations: the equipment your output depends on emits temperature, vibration, current and cycle data all day. Most of it is never captured, let alone acted on." + - "Maintenance runs on calendars and breakdowns instead of condition, and every unplanned stop is paid for at the premium rate." + cards: + - icon: "bell-alert" + title: "Failures announce themselves too late" + detail: "The first signal anyone sees is the machine stopping. The drift that preceded it was measurable for weeks." + - icon: "map" + title: "Assets scattered across sites" + detail: "Equipment in remote plants, rooftops and field installations with no common way to bring health data home." + - icon: "calendar" + title: "Maintenance by calendar, not condition" + detail: "Fixed service intervals over-maintain healthy machines and still miss the one that was about to fail." + - icon: "clip-list" + title: "Manual rounds, paper readings" + detail: "Technicians walk routes writing down gauge values that are stale before they reach a spreadsheet." + #placeholder: template copy for review, refine per Showcase + +outcomeFirst: + heading: "Every asset reporting, every drift visible." + intro: "FlowFuse connects equipment over whatever protocol it speaks, runs monitoring logic at the edge next to the machine, and rolls the same monitoring flow out across the whole fleet." + dimensions: + - label: "Operational" + title: "Live condition for every connected asset" + detail: "Health dashboards from real signals: temperature, vibration, current, cycle counts, at line and fleet level." + - label: "Financial" + title: "Unplanned downtime becomes planned work" + detail: "Catching degradation early converts emergency repairs into scheduled maintenance windows." + - label: "Scale" + title: "One monitoring pattern, entire fleet" + detail: "Build the flow once, deploy it to every edge instance with DevOps pipelines and snapshots." + +whyItMatters: + heading: "Reliability is the cheapest capacity you can buy." + intro: "Recovering output by preventing failures costs a fraction of adding shifts or equipment, but only if condition data actually flows." + points: + - title: "Emergency repair is the most expensive kind" + detail: "Unplanned stops cost parts expediting, overtime and lost output; the same fix scheduled a week earlier costs a work order." + - title: "Edge matters for monitoring" + detail: "Millisecond signals cannot round-trip to a cloud. Monitoring logic has to live next to the machine and keep working offline." + - title: "Fleet visibility compounds" + detail: "One monitored machine helps a technician; a monitored fleet changes how maintenance, spares and capital planning work." + +competition: + heading: "Why the usual approaches stall." + intro: "Condition monitoring fails more often on integration and rollout than on sensing." + traps: + - label: "Vendor silos" + title: "Each OEM monitors only its own machines" + detail: "Built-in monitoring portals per equipment vendor leave you with five dashboards and no fleet view." + - label: "Heavy CMMS add-ons" + title: "Condition modules priced for refineries" + detail: "Enterprise asset-management suites make brownfield connection an integration project per asset class." + - label: "Pilot purgatory" + title: "One instrumented machine, no path to fleet" + detail: "Sensor pilots prove the concept then stall, because there is no managed way to deploy the pattern everywhere." + +comparison: + without: + - title: "Condition data stays on the machine" + detail: "Signals exist but never leave the PLC or the vendor portal." + - title: "Every site monitors differently" + detail: "No shared pattern, no comparability, no fleet learning." + - title: "Maintenance reacts" + detail: "Breakdown first, diagnosis second, prevention never." + with: + - title: "Signals flow from every asset" + detail: "Any protocol, any vendor, one governed collection layer at the edge." + - title: "One pattern deployed fleet-wide" + detail: "The monitoring flow is versioned and rolled out like software, because it is software." + - title: "Maintenance schedules itself around evidence" + detail: "Thresholds and trends raise work before failures stop the line." + +aiBuildLayer: + intro: "The FlowFuse Expert works on this use case with you, and monitoring is where edge AI earns its keep." + steps: + - title: "Describe it, get a starting flow" + detail: "Tell the Expert which signals to watch and where alerts should go; it assembles a working monitoring starting flow. Currently in open beta on FlowFuse Cloud." + - title: "Add anomaly models at the edge" + detail: "Run ONNX models inside the flow with the FlowFuse AI nodes for anomaly detection on vibration, current or temperature patterns, locally, next to the machine." + - title: "Own and adapt what you built" + detail: "The flow explainer documents the monitoring logic so your team can extend thresholds, models and escalations without vendor dependency." + note: "AI capabilities noted as beta are in open beta on FlowFuse Cloud at time of writing. Placeholder template copy for internal review." + +closingCta: + heading: "Hear what your equipment is telling you" + description: "Talk to an expert about fleet-scale condition monitoring, or connect your first machine today." +---