How I Built an Interactive Water Hardness & Appliance Calibration Tool with Next.js
Why Dishwashers Fail in the UK: Solving the Water Hardness Dial Disconnect Every year across the UK, thousands of dishwashers suffer premature heating element failure or leave cloudy calcium films on glassware. The cul
Why Dishwashers Fail in the UK: Solving the Water Hardness Dial Disconnect
Every year across the UK, thousands of dishwashers suffer premature heating element failure or leave cloudy calcium films on glassware. The culprit usually isnβt bad detergentβitβs an incorrectly configured ion-exchange water softener chamber.
UK water hardness varies drastically across postal outcodes, ranging from ultra-soft mountain runoffs in Manchester (~45 PPM) to limestone-saturated groundwater in London (>270 PPM) and the South East.
To solve this friction point, I built an interactive micro-tool that bridges raw chemical water metrics with real-world appliance dial settings: UK Dishwasher Salt Setting Calculator.
Here is a breakdown of how it works under the hood and how I tackled the data mapping challenge.
1. The Core Problem: Units of Measurement Disconnect
Appliance manufacturers do not use standardized units. Depending on whether an appliance is engineered in Germany, the UK, or Asia, the internal electronic menu expects different metrics:
-
Bosch / Siemens / Neff: Digital register scales (e.g.,
H:00toH:07) - Miele: German hardness degrees ($^\circ\text{dH}$) or Clark scale ($^\circ\text{Clark}$)
- Beko / Indesit: Mechanical or digital level selectors (Level 1 β 5)
-
Samsung: Discrete steps (
H1toH6)
Meanwhile, UK water testing data from the Drinking Water Inspectorate (DWI) and local utility companies provide hardness in parts per million (PPM or $\text{mg/L CaCO}_3$).
The Conversion Matrix
To keep the UI responsive without server latency, the conversion runs entirely on the client side:
$$1\text{ PPM} = 0.07016\ ^\circ\text{Clark} = 0.0560\ ^\circ\text{dH}$$
export interface HardnessUnitValues {
ppm: number;
clark: number;
dh: number;
}
export function convertFromPpm(ppm: number): HardnessUnitValues {
return {
ppm,
clark: Number((ppm * 0.07016).toFixed(1)),
dh: Number((ppm * 0.056).toFixed(1)),
};
}
2. Appliance Lookup & Dial Mapping Logic
The appliance engine maps the calculated PPM against calibrated threshold intervals for each manufacturer.
For instance, a Bosch machine in a hard water zone (e.g., $275\text{ PPM} \approx 19.3\ ^\circ\text{Clark}$) triggers regeneration at H:05, requiring approximately $1.3\text{ β }1.6\text{ kg}$ of coarse granular sodium chloride per month:
type BoschSetting = 'H:00' | 'H:01' | 'H:02' | 'H:03' | 'H:04' | 'H:05' | 'H:06' | 'H:07';
function getBoschSetting(ppm: number): BoschSetting {
if (ppm <= 100) return 'H:00';
if (ppm <= 150) return 'H:01';
if (ppm <= 200) return 'H:02';
if (ppm <= 250) return 'H:03';
if (ppm <= 320) return 'H:05';
if (ppm <= 400) return 'H:06';
return 'H:07';
}
3. Architecture & Performance Decisions
- Zero-Latency UI: Built with client-side reactive sliders so users can either input an outcode (fetching the DWI benchmark) or fine-tune PPM manually with real-time dial adjustment feedback.
- Actionable Appliance Guides: Instead of showing raw numbers, the tool outputs actual hardware button combinations (e.g., holding Setup 3s or Programme A + Start) to help non-technical users calibrate their specific model immediately.
- SEO & Structured Micro-Tools: Designed as a standalone utility module integrated into the broader database at WaterHardness.uk.
Try It Out
You can test the calculator directly here:
π Live Dishwasher Salt Setting Tool
Seeking Feedback On:
- Adding more brand dial mappings (e.g., AEG, Zanussi, Hotpoint variations).
- UX improvements for mobile users checking under their kitchen sink.
Originally published by Dev.to WebDev. Aggregated on AIWithGhost for educational purposes β full credit and traffic to the original publisher.