Gå videre til hovedindholdet

Fra kabel-kaos til kontrol: Hvordan (og hvorfor) jeg byggede WireMD

Hvordan (og hvorfor) jeg byggede WireMD

Som underviser på Roskilde Tekniske Skole og KNX++ Tutor, støder jeg tit på et klassisk problem: Når elever skal lære om bygningsautomatik, brandtekniske installationer (ABA) og CTS, bliver de ofte sat til at tegne diagrammer i tunge, professionelle CAD-programmer.

Resultatet? De bruger 80 % af tiden på at slås med menuer, lag og "snap to grid"-funktioner, og 20 % af tiden på rent faktisk at forstå, hvorfor DALI-bussen ikke skal have 230V. Når de endelig får trukket virtuelle ledninger, ligner det et edderkoppespind, der har fået et angstanfald.

Og lad os være ærlige: Hvis de roder rundt med ledningerne på skærmen, gør de det nok også i virkeligheden. I simulatoren koster det kun lidt stolthed – i virkeligheden træder den naturlige selektion i kraft, når de kortslutter en 40A gruppe. For at redde både udstyr og liv (eller i hvert fald min egen tålmodighed), besluttede jeg mig for at bygge mit eget værktøj fra bunden: WireMD.



Hvad er WireMD?

WireMD er et skræddersyet, ultra-letvægts tegneprogram til elektriske kredsløb, KNX-topologier og relæ-logik. Det kører 100 % i browseren, kræver ingen installation, og er strippet for alt unødvendigt "CAD-støj".

Eleverne trækker komponenter (som strømforsyninger, KNX-aktuatorer eller røgdetektorer) ind på lærredet, og trækker ledninger fra klemme til klemme. That's it.



Teknologien bag maskinrummet (Tech Stack)

Målet var at holde det simpelt, lynhurtigt og vedligeholdelsesfrit. Hele applikationen er faktisk pakket ned i én enkelt HTML-fil. Ingen bygge-pipelines (som Webpack eller Vite) – bare ren kode, der kan kastes direkte op på Netlify og køre med det samme.

Her er de frameworks, WireMD er bygget på:

1. JointJS (Kernen i det hele) Den absolutte motor i WireMD er JointJS. Det er et stærkt open-source JavaScript-bibliotek til at skabe interaktive diagrammer og grafer (baseret på SVG). Det er JointJS, der håndterer fysikken på lærredet, snap-funktionaliteten til klemmerne og den "Manhattan"-routing algoritme, der sørger for, at ledningerne automatisk slår pæne 90-graders knæk uden om komponenterne.

2. Backbone.js, Lodash & jQuery JointJS er et ældre, men utroligt stabilt framework, og det bygger på skuldrene af giganter. For at håndtere data-modellerne og DOM-manipulationen bruger programmet Backbone.js, Lodash og jQuery under motorhjelmen.

3. Material Design Icons (Pictogrammers) For at give programmet et professionelt look, uden at skulle tegne alting selv, bruger jeg Pictogrammers' Material Design Icons. Det giver mig adgang til tusindvis af vektorikoner (som mdi-chip til KNX-moduler eller mdi-smoke-detector til ABA), der lader eleverne visuelt afkode komponenterne med det samme.

4. CDN (Content Delivery Network) I stedet for at downloade alle disse biblioteker og hoste dem selv, hentes de via CDN'er (Cloudflare og jsDelivr). Det betyder, at når mine elever åbner WireMD, serveres filerne lynhurtigt fra en server tæt på dem (ofte direkte fra browserens cache), i stedet for at belaste én central server.



Pædagogiske features i koden

Da det er et undervisningsværktøj, har jeg kodet nogle specifikke "livskvalitets"-funktioner ind:

  • JSON Gem/Indlæs: Eleverne kan eksportere hele deres lærred som en .json fil og uploade den som en lektie, hvorefter jeg kan indlæse den præcis, hvor de slap.

  • SVG Eksport: Med et enkelt klik genererer browseren en tabsfri SVG-fil af diagrammet (renset for gitter-baggrunden), som de kan klistre direkte ind i deres Word- eller PDF-afleveringer, så det står knivskarpt.

  • Skræddersyet database: Komponent-databasen er hardcodet med præcis de enheder, vi bruger i faget – ikke 10.000 generiske industri-symboler. Farvekoderne på kasserne (f.eks. KNX-moduler i lysegrøn med 20 % opacity) hjælper med at adskille protokollagene rent visuelt.



Prøv det selv https://marcdahl.dk/wiremd.html

WireMD er live lige nu, og du kan teste det direkte i din browser. Det er et bevis på, at man ikke behøver et millionbudget for at lave specialiseret software – nogle gange kræver det bare lidt JavaScript, en weekend, og en dyb frustration over krøllede ledninger.

Tak fordi I læste med!








Etiketter:
Sted: Søborg, Danmark

Kommentarer

Send en kommentar

Populære opslag fra denne blog

Bound in Ash and Bone: Unearthing 'The Ghouls Almanac'

I am thrilled to finally unveil my latest passion project: The Ghouls Almanac: A Grim Chronicle of the Wasteland . Created with the help of my loving wife and son  —with dark, intricate illustrations conjured alongside Google Gemini —this isn't just an art book. It is a forbidden scripture of the atomic age, written in the style of a post-apocalyptic Necronomicon . If you are a fan of the Fallout universe, you know the stories. But you have never seen them told like this. The Ghouls Almanac is a visceral, mythic retelling of the events of Fallout 1 , Fallout 2 , and Fallout 3 , chronicled by the one soul who lived to see it all: Harold . Before he became the Oasis—a living cathedral of timber and vine —he was the ancient wanderer who witnessed the fall of the Master and the flight of the Enclave . Through Harold's rotting, immortal eyes, the history of the wasteland is documented not as a sci-fi adventure, but as a dark, twisted gospel of flesh, steel, and survival: The Iron ...
Send en kommentar
Læs mere

Udgivelse: Time Traveler's Dilemmas – Kan du redde tidslinjen (eller vil du smadre den fuldstændig)?

Har du nogensinde tænkt over, hvad der ville ske, hvis du gav Julius Cæsar en skudsikker vest? Eller hvis du "kom til" at overbevise Leonardo da Vinci om at bygge et masseødelæggelsesvåben i renæssancen? Jeg har netop lagt sidste hånd på mit nyeste projekt: Time Traveler's Dilemmas – et tekstbaseret sci-fi eventyr bygget fra bunden i HTML, CSS og JavaScript, hvor dine valg giver genlyd gennem 13 historiske epoker. Spillet kaster dig ind i rollen som den sidste Temporale Agent. Tidslinjen er ved at kollapse, og det er din opgave at rejse fra de første brutale stammekonflikter i Stenalderen og hele vejen frem til dommedagsprofetierne under Y2K-krisen for at holde trådene samlet. Sommerfugleeffekten er ægte Kernen i spillet er det dynamiske "Temporal Ekko"-system. De valg, du træffer i Bronzealderen eller under Romerrigets storhedstid, sætter usynlige flag, der fundamentalt kan ændre (eller låse op for) dine muligheder i skyttegravene under 1. Verdenskrig. Hvert ...
Send en kommentar
Læs mere

A Peek Behind the Scenes of the Wasteland: Download the Unique Fallout Story 'The Stranger Is Not Real'

Have you ever wondered who the man in the trench coat really is? Every time you're in a pinch in Fallout, he appears out of the blue, fires his .44 Magnum, and vanishes into thin air. But where does he go? And what does he actually think about the bizarre things you do in the wasteland? Now you have the chance to find out. In the recently released, fan-made book "The Stranger Is Not Real," we have created a completely unique and entertaining take on the Fallout universe. And the best part? You can download it right now. A Noir Diary from the Edge of Reality "The Stranger Is Not Real" is a brilliant deconstruction of video game logic, told as a hardboiled and cynical noir detective story. We follow the game's most iconic guardian angel—The Mysterious Stranger—through his personal, worn-out logbook entries. Through a series of "cases," our tired narrator slowly begins to realize that he is stuck in an absurd, digital loop. He is forced by a humming i...
Send en kommentar
Læs mere