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" }}
+ {# 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. #}
+
+
+ {% 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" %}
+
{{ 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/index.njk b/src/index.njk
index b7f03ee6c6..82cb031474 100644
--- a/src/index.njk
+++ b/src/index.njk
@@ -78,6 +78,7 @@ operationalSystem:
- title: "SYSTEM EXTENSIONS"
items:
- name: "Quality Validation"
+ url: "/use-cases/quality-validation/"
description: "Inline inspection and QA checks outside the core system."
- name: "Track & Trace"
description: "Part, component, and batch traceability across the plant."
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/quality-validation.njk b/src/use-cases/quality-validation.njk
new file mode 100644
index 0000000000..6819ec5ad9
--- /dev/null
+++ b/src/use-cases/quality-validation.njk
@@ -0,0 +1,139 @@
+---
+title: "Quality Validation"
+meta:
+ title: "Quality Validation | Use Cases | FlowFuse"
+ description: "In-line quality checks that catch deviations at the source: sensor thresholds, process interlocks and camera-based inspection, built on Node-RED, managed with FlowFuse."
+problem: "Defects are found at final inspection, after a full batch carries the same flaw."
+industries: ["life-sciences", "food-beverage", "automotive", "semiconductors", "electronics-appliances"]
+values: ["quality-compliance"]
+
+howItWorks:
+ heading: "How FlowFuse builds inline quality validation."
+ intro: "A quality gate is a measurement, a limit and a decision, taken at the machine while the part is still in front of the operator. This is how it breaks down and which FlowFuse pattern carries it across lines."
+ designPattern:
+ kind: "Hardware pattern"
+ name: "Pipeline plus external configuration"
+ detail: "The gate logic is built once and distributed by pipeline to every line. Limits and specifications are read at runtime from a central source, so a recipe change or a new tolerance never requires a redeploy to the floor."
+ docsUrl: "/docs/user/devops-pipelines/"
+ diagram:
+ placeholder: true
+ src: "https://placehold.co/1200x630/eef2ff/4338ca?text=Quality+Validation+Architecture"
+ alt: "End-to-end architecture for inline quality validation: measurements captured at the machine, checked against centrally held specifications, with an operator prompt, a recorded result and a downstream flag."
+ caption: "Measurements taken at the machine, checked against centrally held specifications, with the operator prompted in the moment and every result recorded."
+ pieces:
+ - icon: "device-agent"
+ title: "Capture the measurement at the machine"
+ detail: "An edge instance reads gauges, vision results and PLC values directly, so the check happens where the part is."
+ docsUrl: "/docs/device-agent/introduction/"
+ - icon: "book-open"
+ title: "Hold specifications centrally"
+ detail: "Limits and tolerances per product and recipe live outside the flows, so quality owns them and changing one does not mean touching the line."
+ docsUrl: "/docs/user/envvar/"
+ - icon: "check"
+ title: "Decide pass, fail or hold"
+ detail: "The gate evaluates against the spec that applies to what is actually running, and records why it decided."
+ - icon: "chat"
+ title: "Prompt the operator in the moment"
+ detail: "A fail is useful only if the person who can act sees it before the next part. Dashboard puts the prompt on the line."
+ - icon: "circle-stack"
+ title: "Record every result, not just failures"
+ detail: "Passes are the baseline that makes drift visible. The full record lands in your database."
+ - icon: "rectangle-stack"
+ title: "Roll out to every line"
+ detail: "Snapshot the working gate and let the pipeline push it out, with each line supplying its own equipment and spec references."
+ docsUrl: "/docs/user/snapshots/"
+ architecture: "it-ot-middleware"
+ docsCta:
+ label: "Read the pipeline docs"
+ url: "/docs/user/devops-pipelines/"
+
+customerPain:
+ heading: "Quality happens too far from the process."
+ intro:
+ - "Checks live at the end of the line or in the lab, minutes to hours after the value was produced. By the time a deviation is confirmed, everything made since carries the same risk."
+ - "Operators record checks on paper, quality data lives apart from process data, and every audit is a reconstruction exercise."
+ cards:
+ - icon: "eye"
+ title: "Inspection at the end, not in line"
+ detail: "Final inspection finds what in-line checks would have prevented: entire batches at risk from one uncaught drift."
+ - icon: "clip-list"
+ title: "Paper checks, disconnected results"
+ detail: "Manual quality records disconnected from machine conditions make root cause a guessing game."
+ - icon: "bug"
+ title: "Escapes reach customers"
+ detail: "What slips past sampling-based inspection becomes returns, claims and audits."
+ - icon: "camera"
+ title: "Visual checks depend on tired eyes"
+ detail: "Human visual inspection degrades over a shift; consistency varies by person and hour."
+ #placeholder: template copy for review, refine per Showcase
+
+outcomeFirst:
+ heading: "Validate at the source, every cycle."
+ intro: "FlowFuse puts quality logic where the process runs: sensor thresholds and process interlocks in-line, camera-based checks where eyes were the only option, and every result recorded with its process context."
+ dimensions:
+ - label: "Quality"
+ title: "Deviations caught in-cycle"
+ detail: "Threshold and rule checks run against live process values and stop bad production at the first unit, not the thousandth."
+ - label: "Compliance"
+ title: "Every check recorded with context"
+ detail: "Results land in your database with machine state, timestamps and parameters attached, audit-ready by default."
+ - label: "Operational"
+ title: "Vision where it was manual"
+ detail: "Camera feeds plus inspection models automate visual checks at line speed for presence, position and defect classes."
+
+whyItMatters:
+ heading: "The cost of a defect grows with every station it passes."
+ intro: "Catching a flaw at the source costs a scrapped part; catching it at the customer costs the relationship."
+ points:
+ - title: "Batch risk is binary"
+ detail: "In regulated production, one uncaught deviation can quarantine an entire batch. In-line validation converts batch risk to unit risk."
+ - title: "Quality data belongs with process data"
+ detail: "A failed check is only actionable when you can see the machine conditions that produced it, in the same record."
+ - title: "Audits reward evidence, not effort"
+ detail: "Automatic, contextualized quality records turn audit preparation from a project into a query."
+
+competition:
+ heading: "Why the usual approaches stall."
+ intro: "Quality systems tend to be either too heavy to reach the line or too light to survive an audit."
+ traps:
+ - label: "Enterprise QMS"
+ title: "Manages documents, not processes"
+ detail: "Quality-management suites track procedures and CAPAs but never touch a live sensor value."
+ - label: "Turnkey vision systems"
+ title: "Per-station price tags, closed logic"
+ detail: "Packaged inspection cells cost like robots and cannot be adapted when the product changes."
+ - label: "Spreadsheet quality"
+ title: "Manual records, no interlocks"
+ detail: "Paper and Excel record what happened but can never stop it from happening."
+
+comparison:
+ without:
+ - title: "Defects found downstream"
+ detail: "Final inspection and customer returns are the detection mechanism."
+ - title: "Quality and process data live apart"
+ detail: "Root cause requires manually joining lab results to machine logs."
+ - title: "Visual checks are manual or unaffordable"
+ detail: "Either tired eyes or six-figure turnkey cells."
+ with:
+ - title: "Checks run in-line, every cycle"
+ detail: "Thresholds, rules and interlocks act on live values at the source."
+ - title: "One record: result plus context"
+ detail: "Every check stored with machine state, ready for root cause and audits."
+ - title: "Camera-based checks you can adapt"
+ detail: "RTSP feeds plus ONNX inspection models inside flows your team controls."
+
+aiBuildLayer:
+ intro: "The FlowFuse Expert works on this use case with you, and vision is where the AI nodes plug directly into the quality loop."
+ steps:
+ - title: "Describe it, get a starting flow"
+ detail: "Tell the Expert which checks to run and what should happen on failure; it assembles a working starting flow. Currently in open beta on FlowFuse Cloud."
+ - title: "Add camera-based inspection"
+ detail: "Bring camera streams in with the RTSP nodes and run object-detection or classification models in-flow with the FlowFuse AI nodes, models from the zoo or your own ONNX."
+ - title: "Own and adapt what you built"
+ detail: "In-editor assistance and the flow explainer keep inspection logic understandable, so product changes mean flow edits, not vendor projects."
+ 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: "Catch it at the source"
+ description: "Talk to an expert about in-line quality validation, or start wiring your first check today."
+---
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."
+