Changelog
This page tracks every meaningful change to the HMI Library catalog, the Symbol Builder, the community, vendor export packs, and the website. New official symbols are validated against ISA-5.1 and ASME Y32.11 P&ID conventions before they reach the catalog.
Roughly one short email a month. Big releases only.
Planned for the next 60 days
- Citect, AVEVA, GE Cimplicity import guides — extending the integration hub beyond the big 4.
- UDT / AOI templates — drop-in PLC code for Logix 5000, Siemens TIA Portal, and CODESYS that exposes the canonical 0-8 state encoding.
- Animated states in the catalog — preview "starting" as a true blink, not a still frame.
- Dashboard widgets — KPI cards, gauges, trend mini-charts in ISA-101 calm palette (currently in design).
- Symbol search by image — upload a screenshot of a P&ID, find the closest matching catalog kind.
- Offline pack (Studio plan) — the entire catalog + editor as a single self-contained HTML file for plants without internet access.
- Community, phase 2 — full remix history, collections, threaded discussions, and 9-state matrices for community symbols.
Have a request? Email hello@hmilibrary.com — features that get user requests jump the queue. For a custom symbol (Enterprise plan), email me and we agree a delivery date.
Lower prices: Starter 5 €, Studio 19.99 €
Most people who reach HMI Library are technicians paying out of their own pocket, often outside the euro zone. The old prices were set for companies. From today the plans cost a quarter of what they did; nothing else changes.
- Starter is 5 €/month (was 19 €) or 48 €/year (4 €/month). Same 50 downloads a month, same official icon library and editable SVG.
- Studio is 19.99 €/month (was 49 €) or 192 €/year (16 €/month). Unlimited downloads, vendor packs, 20 drafts. The 3-day free trial with card stays as it was.
- Existing subscribers keep their current price and can switch to the new one from the billing portal whenever they want.
- The community promo codes (
PLC_ES,HMI) now bring Studio down to 10 €/month for life, applied on the checkout page.
Drafts, thumbnails, and a toolbar that fits in one row
Work in progress now has a place to live, and the builder’s toolbar stopped spilling over three rows. Nothing was removed from it — the settings you touch once moved to where you touch them once.
- Drafts. The builder could already save to the cloud, but with no limit and with drafts and published symbols in the same list. There is now a Drafts section with a counter beside it: the free plan keeps 2, Starter 8, Studio and Enterprise 20. Publishing frees the slot, so the limit never gets in the way of finishing something. The cap is enforced in the database, not just in the browser.
- Thumbnails in every list. Each row in Drafts, in the published list and in the local templates now draws the symbol itself, rendered by the same engine as the canvas — so a draft looks the same before and after you publish it. Your account’s symbol table shows the published preview.
- The builder toolbar went from 26 controls in three rows to 11 in one. Canvas size, background, grid, snap, guides and grid colour moved to a collapsible Canvas section in the right-hand panel, above Layers — they are set once per symbol, not once a minute. Exporting is now a single Export menu (background, SVG, PNG, the 9-state ZIP), importing an SVG, Share and Copy SVG live under “···”, and the four zoom buttons became one dropdown that shows the percentage. Every keyboard shortcut is unchanged, including Ctrl +/−/0/9.
- Publish is the only primary button. It used to compete with two black download buttons; downloads now live inside the Export menu and the plan pill dropped to an outline.
- My symbols in your account lists what is actually published, with a line telling you how many drafts are waiting in the builder and a link straight to them.
- Unpublishing a symbol from the dashboard could fail with a generic “something went wrong” when your drafts were full — unpublishing turns a symbol back into a draft. It now says so, with the count.
- The section that lists your symbols described them as “symbols you created”, and its empty state said you had created none, even when you had drafts. Both now talk about publishing.
Symbol Builder — zoom, marquee selection and real layers
Five things that stood between you and a comfortable canvas. You can now get close to a detail, drag a box around a group of elements, and organise a symbol into layers you can actually hide.
- Zoom. The canvas was a fixed size that only ever shrank to fit, so a 128 px symbol was a postage stamp and a detail was unreachable. There is now a zoom group in the toolbar (−, the percentage, +, Fit), Ctrl+wheel zooming on the point under the cursor, and Ctrl +/−/0/9. The canvas fits the window on open. Selection handles and the grid compensate for the zoom, so they stay the same size on screen at any scale.
- Marquee selection. Drag a box over empty canvas to select everything it touches; hold Shift to add to the selection.
Ctrl+Aselects all. With several elements chosen there is now a second row of alignment buttons that moves the whole block to the centre or an edge of the canvas without disturbing the relative positions — which is exactly what you want right after a marquee. - Real layers. What used to be in the right-hand panel was a list of elements, not layers. You can now create layers, rename them (double-click), reorder them, hide a whole layer at once, and move the selection to another layer. Layer order drives the drawing order, and the exports (SVG, PNG, the 9 states) and the ISA-101 check all follow the same order.
- Collapsible panels. Shapes, ISA elements, catalog symbols and every block of the properties panel fold away, and what you close stays closed next time.
- Fourteen new community symbols covering the categories the gallery had nothing in: electric heater and heat exchanger, emergency stop, PSV and guard interlock, MAN / LOCAL / INTLK badges, cyclone, bag filter, screw conveyor, agitated vessel, and knife gates open and closed. All built from the builder’s own primitives, so each part stays editable.
- New social preview card for shared links, in Inter and JetBrains Mono, with real ISA geometry and no stale symbol count.
- The catalog symbol list in the builder scrolled sideways as well as down, for no reason. It now only scrolls vertically.
- The changelog page announced an SVG social image, which LinkedIn, X and Facebook do not render — so this page shared without a preview at all.
- Symbols without a preview showed a cropped slice of the marketing card as their placeholder in the gallery and on profiles.
Symbol Builder — 9-state export, SVG import, equipment templates
The builder now produces the thing the docs always described: a complete multi-state set, in one click. Plus ten editable equipment templates so you never start from a blank canvas, and two new long-form guides on alarm management and screen hierarchy.
- Export the 9 standard states as a ZIP. Tick “fill follows the state” on the body of your equipment and get PNG + SVG for all nine states, numbered
01–09and ready to map onto a Weintek Multi-state Lamp, a WinCC status display or an Ignition symbol. Colours come from your sidebar configuration, so a house style is respected. - Ten editable equipment templates — motor, reversible motor, pump, blower, on/off valve, control valve, belt conveyor, knife gate, tank and filter. Built from the builder’s own primitives, so every part stays editable, and each one arrives ready for the 9-state export.
- Import an SVG as an editable element — bring a legacy library in instead of redrawing it. Files are sanitised on the way in: no scripts, no embedded rasters, no external references.
- Smart guides. Dragging now snaps to the edges and centres of the other elements and of the canvas, with reference lines. The grid alone never aligned anything to other parts.
- Canvas background switch: white, HMI gray
#C8C8C8or dark. You can finally judge contrast on the background the symbol will actually live on. - Autosave of the working canvas, with a “recover draft” button when you come back.
- Two new guides: alarm management (ISA-18.2) and HMI screen hierarchy, both in four languages.
- The landing loads a lot faster. The JSX is now precompiled: 691 KB of JavaScript (Babel included) became 31 KB, and nothing is transpiled in your browser any more.
- Localised home pages at /es/, /pt/ and /fr/, each with its own metadata and structured data, linked by four-way hreflang.
- Learn hub: a recommended reading order, a live filter over the guides, a reading-progress bar and previous/next navigation through the path.
- Forum seeded with questions in Portuguese and French — it was English and Spanish only.
- Portuguese and French pages linked back to the English ones. 328 internal links across 42 pages now stay in the language you are reading.
- The language switcher and the navigation links sent PT and FR readers to English guides.
- Opening the builder on an empty canvas could discard the previous session’s autosaved draft.
- Guide navigation could not locate the current page in production, because
.htmlURLs redirect to their extensionless form. - Alarm priority names were inconsistent between guides (P3/P4). Unified across all four languages.
Community launch — create, publish and explore ISA symbols
HMI Library is now a community of symbol creators. Build a symbol, publish it under CC BY 4.0, and anyone can explore, download, like, comment on and remix it. The official catalog becomes a generic HMI icon library (arrows, alarms, indicators, navigation); equipment symbols now come from the community. Read the Community Guidelines before your first publish.
- Cloud save in the Symbol Builder — sign in and your symbols are saved to your account ("My symbols"), not just to the browser. Private by default.
- Publish — title, description, category, tags, preview; one click releases the symbol under CC BY 4.0. An automatic ISA-101 check (ISA-101 palette only, official stroke widths, not empty / at most 120 elements) runs on publish and awards the "ISA-101 compliant" badge when every rule passes.
- Explore gallery — browse community symbols by category, recent, most downloaded, most liked, or ISA-compliant only, with search and clean icon-first cards.
- Symbol pages at
/s/<slug>— preview, author, ISA badge, licence, download SVG/PNG, like, comment, "Open in builder" (remix with automatic credit to the original), and Report. Server-rendered for search engines and link previews. - Creator profiles at
/u/<username>— username, avatar, bio, website and every symbol you have published. - Likes & comments on every symbol, with a Report button on both symbols and comments.
- Community Guidelines — what to publish, what not to, how CC BY attribution works, what the badge means, moderation, and a safety note on reviewing symbols before they reach a real HMI.
- Pricing is now by download quota: Free 5 / month, Starter 50 / month, Studio unlimited (+ Pro features). The quota covers clean downloads of official and community symbols alike; previews are free and watermarked. Downloading your own published symbols never counts.
- Official catalog: the lifetime demo limit is replaced by the monthly quota, and the builder's clean export follows the same rule.
- Dashboard: "My symbols" and a quota meter (downloads used this month) with a direct upgrade path.
- Terms and Privacy Policy updated for user-generated content: CC BY 4.0 grant, prohibited content, notice-and-takedown (10 business days), public profiles and comments, download logs used for quotas.
- One-time symbol packs are no longer sold. Existing pack purchases stay valid and keep a 50 downloads / month allowance.
Symbol Builder — 4-language UI, more shapes, dedicated free page
- Dedicated Symbol Builder page — an indexable landing for the free online editor, with FAQ and a direct deep-link into the tool.
- 5 new shapes + a flow arrow: star, parallelogram, trapezoid, cross and double-arrow, plus an ISA flow-direction arrow.
- Category filter for catalog stamps inside the builder (motor, valve, pump…), and starter examples to skip the blank canvas.
- Export background option (transparent / HMI gray / white), Copy SVG, and flip H/V.
- The whole catalog + builder UI now follows your language (EN / ES / PT / FR): topbar, palette, properties, templates, toasts, toolbar, demo banner and detail modal.
- The builder is usable with no account — free with a watermark, with a clear path to clean, watermark-free exports.
- Promoted the builder across the site (nav, hero, footer) and added SEO metadata +
WebApplication/FAQPagestructured data.
- Symbol-count consistency across pages (the catalog is now a focused set of generic HMI icons; equipment symbols come from the community library).
- A builder modal overlay that could intercept clicks, and a templates/empty-state visual collision.
Symbol Builder — compose your own symbols from shapes + catalog parts
- Symbol Builder (beta): a vanilla, offline composer inside the catalog. Open it from the toolbar ("Build your own") or land straight in it via
/catalogo/?builder=1. - Building blocks: 11 ISA shape primitives (rectangle, rounded, circle, ellipse, triangle, diamond, hexagon, N-gon, line, arrow, text), instrument bubbles (field / DCS / PLC / shared), connection lines (process / electrical / signal), plus any catalog symbol dropped in as a "stamp".
- Editing: move, resize (8 handles), rotate, flip, snap-to-grid, recolor with the ISA-101 palette, stroke / opacity / corner radius, layers, group, duplicate, align, z-order, undo/redo, and arrow-key nudge.
- Save & reuse: named templates in your browser, shareable build links, and export to PNG / SVG — clean on paid plans, watermarked on Demo.
- Starter examples to skip the blank canvas: instrument loop, tagged motor, labeled valve.
- Hardened backend trigger functions per the Supabase security advisor — removed needless RPC executability of the signup helper and pinned a mutable
search_path. No user-facing change.
Sweep release — bugs squashed, cross-linking, perf, a11y
- TOC component never appeared on any long-form page (TDZ
ReferenceError: Cannot access 'TOC_CSS' before initialization). Restored across all 18 pages. - Featured showcase strip on the catalog rendered as a single 256 px-wide grid cell (1 column) instead of spanning the full main area. Now correctly mounted outside the catalog grid as a sibling.
- Catalog hotkey conflict: typing into the search bar accidentally toggled "P&ID canonical only" or jumped category. Hotkeys now bail on editable focus; Esc still works inside the search input.
- Catalog deep-link
?filter=canonicaltargeted the wrong checkbox ID and silently failed. Fixed. - FactoryTalk integration guide had a stray
</p>closing tag and the sizing table referenced "WinCC pack" / "Weintek pack" instead of "FactoryTalk pack". - Weintek integration guide referenced a fictional
cmt-graphics-svgpath; replaced with the real.flbUser Library mechanism. - 8 broken catalog deep-links from industry pages — kinds like
centrifugal_blower,brew_kettle,fermenter,filter-cartridgedidn't exist in the catalog. Re-mapped to closest canonical kinds. - Privacy page mentioned an EU region inconsistent with security.html and an outdated Privacy Shield reference. Both removed.
- React production build served instead of
react.developmenton the landing — major perceived-perf bump. - Hardcoded Spanish strings in the React app + dashboard removed. Site is now fully English on every public surface.
- FAQ now has equal coverage in
es / pt / fr(10 questions matching the EN version) — non-EN visitors no longer hit a half-empty FAQ. - Aria-labels and roles added to icon buttons, dropdown menus, and modals across the React app.
- Glossary +3 terms: BPCS, HART, Alarm flood (with cross-references).
DefinedTermSetJSON-LD expanded. - Article TOC component is more robust: IntersectionObserver feature-check, slug collision avoidance, MediaQueryList legacy listener fallback (Safari < 14), graceful empty-state when no anchors visible.
- Long-form articles cross-link to
/integrations/and/industries/in their "Keep reading" sections — better internal-link graph for SEO. - Catalog: empty state message in English with a "Clear all filters" button.
Stitch batch 7-final — 21 new canonical symbols
- Equipment with full 9-state matrix: DC motor canonical (M with horizontal bar), servo motor with rear-mounted encoder, definitive centrifugal pump (motor + coupling + volute + impeller cue + suction/discharge flanges), rectangular slide gate.
- 6 alarm badges with explicit geometric shapes: P1 triangle, P2 diamond, P3 hexagon, P4 circle, acknowledged (green checkmark), suppressed (bell with diagonal slash).
- 5 ISA-5.1 instrument bubbles (empty shells for tag overlay): field-mounted, DCS-shared, PLC, shared display, logic diamond.
- 6 ISA-5.1 connection line styles: process pipe with flanges, electrical zigzag, pneumatic forward slashes, hydraulic back slashes, capillary X marks, data link long-short dash pattern.
- Featured showcase:
pump_centrif_finalreplaces older end-suction representative; servo motor and slide gate added as canonical examples. - All 21 symbols visually audited before integration — every
<g id="body|accessories|connections">follows the standard structure for CFG-aware re-coloring.
Glossary, Learn hub, dedicated About / Security pages
- 30-term HMI / SCADA / P&ID glossary with cross-references and JSON-LD
DefinedTermSetstructured data. - Newsletter signup component in the footer (writes to
leadswith sourcenewsletter_footer). - /changelog.html — this page (was previously linking to GitHub releases).
- Learn hub landing page collecting standards refs and practitioner guides.
- About page — who we are, what we believe, where we ship from.
- Security & compliance page — GDPR, subprocessors, data residency, vulnerability disclosure.
- Footer newsletter signup (one short email a month, no spam).
- Pricing toggle: bigger hit target, "Save 2 months" annotation arrow, dark active state for clearer affordance.
- Catalog: real
<nav>breadcrumb (Home / Catalog) plusBreadcrumbListJSON-LD. - Open Graph and Twitter Card meta tags on every long-form page (standards, learn, about, security, changelog).
- Mobile responsive sweep at 480px and 360px: catalog single column, modals fit in viewport, comparison table scrolls.
Commercial polish — vendor logos, "How it works", FAQ overhaul
- Vendor compatibility strip on the home page (Weintek, Siemens, Rockwell, Inductive, Schneider, AVEVA).
- "How it works" 3-step section with realistic timing (browse → configure → export to PLC).
- 10-question FAQ (commercial focus) with
FAQPageJSON-LD for rich results. - Comparison table: ISA-101 calm palette · live editor · 9-state matrix rows added.
- Signup form simplified: 4 → 3 fields. Company info collected later from the dashboard.
- Dashboard onboarding card for first-time users.
- Footer reorganized into Product / Resources / Company columns with rich anchor text.
Catalog UX — lazy load, detail modal, hotkeys, featured showcase
- Detail modal (click any card): preview at scale, copy SVG / PNG to clipboard, see all 9 states.
- Keyboard shortcuts:
1-9jump to category,0show all,Ftoggle "P&ID canonical only",/focus search,Escclose modal. - "Only P&ID canonical" filter — surfaces the standards-conforming symbols above stylized variants.
- Featured showcase row: hand-picked canonical symbols at the top of the grid.
- Lazy-load with
IntersectionObserver: 949 cards render smoothly on low-end devices. - Sidebar v3: Style preset dropdown (7 vendor palettes), tag-prefix override, layout density, save/load JSON config.
- Canonical P&ID symbols (motor, pump, valve, fan, compressor) appear first in each category.
- CFG-aware coloring helper applied uniformly across all generated SVG templates.
- Stylized motor-servo and motor-DC variants removed — they did not match canonical P&ID and confused the catalog.
Standards reference articles + ISA-101 cheat sheet
- ISA-101 HMI design standard — long-form reference (~3,500 words).
- ISA-5.1 instrumentation symbols — letter codes, mounting bubbles, tag conventions.
- The 9 motor states every HMI should show.
- Why the calm HMI color palette wins.
- Printable ISA-101 cheat sheet (lead magnet).
HMI Library v1 — 949 symbols, live editor, four pricing tiers
- Catalog with 949 symbols across motors, valves, pumps, fans, compressors, tanks, conveyors, instrumentation, sensors, heating.
- Live editor: edit colors / size / typography / tags and see every symbol redraw instantly.
- Vendor export packs for Weintek (PNG 256×128 transparent), Siemens WinCC (SVG), Rockwell FactoryTalk (SVG), Inductive Automation Ignition Perspective (SVG by category).
- Four tiers — Demo (free), Starter (€19/mo), Studio (€49/mo, most popular), Enterprise (custom).
- 4 languages on the marketing site: ES / EN / PT / FR.
- 14-day refund policy. No credit card required for the demo.
Create and share your own ISA symbols
Free account, 5 downloads a month, no credit card. Build in the Symbol Builder, publish under CC BY 4.0, or browse the official HMI icon library.
Open the Symbol Builder → Browse the catalog