Graphics zijn SVG-tekeningen gekoppeld aan de installatie: een plattegrond waarvan de lampen oplichten, een verwarmingsschema waarvan de pompen draaien, een energiestroom waarvan de pijlen meebewegen met het vermogen, een beveiligingsplan waarvan de deurcontacten rood kleuren. U bereidt ze voor op de pagina Graphics van het beheerpaneel; bewoners plaatsen ze op hun weergaven (zie "Graphics op uw weergaven"). De pagina Graphics is een eigen onderdeel van de groep GEBOUW in de zijbalk, naast Logica.
Een graphic bestaat uit vier onderdelen:
| Onderdeel | Wat het is |
|---|---|
| De tekening | Een SVG-document: iets wat u zelf heeft getekend of geëxporteerd, een achtergrondafbeelding of een leeg canvas dat u vult met symbolen |
| Symbolen | Kant-en-klare vormen uit de bibliotheek (een lamp, een rolluik, een pomp, een waardeblokje…) geplaatst op de tekening, met vooraf gekoppelde bindingen en acties |
| Bindingen | Regels die een vorm wijzigen wanneer een waarde verandert: een kleur, een tekst, een klasse, een positie, een animatie |
| Acties | Wat een tik, een dubbeltik of een lange druk op een vorm doet: een apparaat schakelen, een scenario uitvoeren, een ruimte openen, naar een weergave gaan |
De pagina Graphics. De tabel toont elke graphic met het aantal bindingen en acties en waar deze is Geplaatst ("2 weergave(n)" of "niet geplaatst"). Elke rij biedt Bewerken, Dupliceren, Exporteren en Verwijderen. Boven de tabel: Nieuwe graphic en Bundel importeren.
⚠️ Waarschuwing: Het verwijderen van een graphic die op weergaven is geplaatst, verwijdert ook die plaatsingen — het dialoogvenster geeft aan op hoeveel weergaven.
Een graphic maken
Klik op Nieuwe graphic. Het eerste scherm vraagt hoe de tekening start:
| Start | Wat er gebeurt | Afmeting van de graphic |
|---|---|---|
| Vanuit een SVG-bestand | Uw tekening is de graphic. Symbolen worden erbovenop geplaatst en u kunt de vormen die het al bevat koppelen. | De eigen afmeting van het bestand |
| Vanuit een achtergrondafbeelding | Een foto, een gescande plattegrond of een gegenereerde scène wordt de achtergrond. De graphic wordt direct aangemaakt en opgeslagen, waarbij de afbeelding op de server wordt bewaard. Symbolen komen erbovenop. | De afmeting van de afbeelding |
| Lege compositie | Een leeg canvas — uitsluitend symbolen, bijvoorbeeld voor een logo. Kies Breed 16:10, Klassiek 4:3, Vierkant of een Aangepaste breedte en hoogte. | De door u gekozen afmeting |
| Voorbeelden | Twee complete graphics die standaard met de server worden meegeleverd: Energiestroom en Pompstation. Ze worden geïmporteerd als bewerkbare kopieën; apparaatreferenties worden op naam gekoppeld. | De afmeting van het voorbeeld |
De afmeting van een graphic is het coördinatenstelsel, weergegeven in het tabblad Bron als Afmetingen graphic. U kunt dit later wijzigen; de hele tekening schaalt mee. Een achtergrondafbeelding stelt dit altijd in op de eigen afmeting van de afbeelding.
💡 Tip: Een lichte afbeelding (wit papier) vereist donkere lijnen, ongeacht het app-thema. Wanneer u start vanaf een lichte achtergrondafbeelding, wordt de instelling Kleuren automatisch omgeschakeld naar Lichte tekening (zie hieronder bij Testen, instellingen, export).
De editor
De editor bestaat uit twee kolommen. Aan de linkerkant toont de Preview de graphic exact zoals de apps dat doen, inclusief werkbalk:
| Knop | Wat het doet |
|---|---|
| Symbool invoegen | Opent de symboolbibliotheek (zie hieronder bij Symbolen) |
| Verplaatsen | Samenstelmodus: sleep een symbool om het te verplaatsen, trek aan de oranje hoekpunt om het te schalen, klik erop om de bindingen te bewerken, druk op Delete om het te verwijderen, Escape om de selectie op te heffen |
| Aanwijzen | Klik op een willekeurige vorm van de tekening om deze te selecteren en de bindingen ervan te bewerken — voor handgetekende vormen in plaats van symbolen |
| Pannen, Uitzoomen, Inzoomen | Navigeer door en zoom in op de preview; het muiswiel zoomt ook; klik op het percentage om terug te keren naar 100 %. De zoomfunctie beïnvloedt alleen uw weergave van de tekening en verandert niets aan de graphic |
Aan de rechterkant bevinden zich vier tabbladen:
-
Bron — de naam, SVG uploaden, de Afmetingen graphic en de SVG-tekst zelf, die u direct kunt bewerken. Daaronder het oordeel van de sanitizer: "De tekening passeert de sanitizer ongewijzigd", of de lijst met verwijderde elementen.
-
Symbolen (n) — elk symbool dat op de tekening is geplaatst, plus Overige elementen voor de eigen vormen van de tekening (zie hieronder bij Symbolen).
-
Testwaarden | voer waarden in voor de preview (zie hieronder bij Testen, instellingen, export).
-
Instellingen — beschrijving, kleuren, weergavepassing (fit), achtergrond, extra CSS en afbeeldingsbronnen (zie hieronder bij Testen, instellingen, export).
Wat de sanitizer doet. De server schoont elke tekening op wanneer deze wordt opgeslagen: scripts, event-handlers, links en externe afbeeldingen worden verwijderd, animaties worden beperkt tot veilige attributen. Een tekening mag maximaal 2 MB groot zijn. Wijzigingen door de sanitizer worden onder de bron vermeld, zodat er niets geruisloos verdwijnt.
Opslaan. Er wordt niets naar de apps verzonden totdat u op Opslaan klikt. Als een binding of actie onvolledig is — bijvoorbeeld een symbool zonder gekoppeld apparaat of een selector zonder overeenkomst — wordt het opslaan geweigerd en opent de editor de betreffende rij met de reden.
Symbolen
Symbolen zijn de snelste manier om een graphic op te bouwen: elk symbool bevat standaard de benodigde bindingen en acties, zodat het plaatsen van een lamp en het selecteren van het verlichtingspunt volstaat om deze functioneel te maken.
De bibliotheek. Klik op Symbool invoegen. Het dialoogvenster is ingedeeld per categorie en voorzien van een zoekveld.
| Categorie | Symbool | Wat het toont en doet |
|---|---|---|
| Verlichting | Lamp | De lamp licht op en gloeit wanneer de verlichting is ingeschakeld; aantikken schakelt de lamp |
| Klimaat | Radiator | Een radiator met de bijbehorende temperatuur; aantikken opent de ruimte |
| Klimaat | Ventilator | Draait tijdens werking; aantikken schakelt de ventilator |
| Openingen | Rolluik | Een raam waarvan de lamellen de positie van het rolluik volgen |
| Technische ruimte | Pomp | Groen en draaiend tijdens bedrijf; aantikken schakelt de pomp na bevestiging |
| Technische ruimte | Klep | Een tweewegklep waarvan de open zijde oplicht; aantikken schakelt de klep |
| Technische ruimte | Opslagvat | Een vat waarvan de vulling en waarde een percentage volgen |
| Energie | Zonnepaneel | Een PV-installatie met de opbrengstwaarde |
| Energie | Batterij | Een batterij waarvan het niveau de laadtoestand volgt |
| Energie | Net | De netaansluiting, groen bij teruglevering, inclusief actueel vermogen |
| Energie | Laadpaal | Een auto die oplicht tijdens het laden, inclusief laadvermogen |
| Labels en lijnen | Stroomlijn | Een stippellijn-pijl waarvan de streepjes lopen bij vermogensstroom, sneller bij hoger vermogen, omgekeerd bij gewijzigde stroomrichting |
| Labels en lijnen | Analoge waarde | Een blokje met meetwaarde en eenheid; aantikken opent het apparaat |
| Labels en lijnen | Tekst | Een vrij tekstlabel; te schalen en roteren zoals elk symbool |
| Labels en lijnen | Statusindicator | Een gekleurde stip met statusweergave voor een digitale ingang — open / gesloten, aan / uit |
| Navigatie | Hotspot, Hotspot (breed) | Een onzichtbaar aantikbaar vlak over een ruimte van een plattegrond; aantikken navigeert naar een ruimte, categorie, weergave of apparaat. Alleen in de editor blauw gemarkeerd, nooit in de apps |
| Mijn symbolen | eigen symbolen | Iconen die u zelf heeft geüpload (zie hieronder) |
Hotspots. Een Hotspot is een symbool zonder eigen grafische weergave: een onzichtbare rechthoek waarvan het volledige oppervlak reageert op aanraking. Plaats er een over elke ruimte van een plattegrond, pas de afmetingen aan met het hoekpunt en kies de bestemming in de bijbehorende actie (Ga naar een ruimte is standaard voorgeselecteerd). Tijdens het bewerken wordt het vlak blauw weergegeven zodat u het kunt terugvinden; bewoners zien dit niet.
Plaatsen en verplaatsen. Het selecteren van een symbool plaatst het in het midden van de tekening, schakelt de preview naar de modus Verplaatsen en opent het symboolpaneel. Sleep het naar de gewenste positie, verschaal het via het oranje hoekpunt of vul de Plaatsing handmatig in: X, Y, Schaal en Rotatie. Aanpassen aan canvas schaalt en centreert het symbool over de gehele tekening — ideaal voor graphics die enkel uit een logo bestaan. Een stippellijn geeft tijdens het verplaatsen de rand van het canvas aan: elementen daarbuiten worden in de apps afgesneden.
Het symboolpaneel. Bovenaan koppelt Apparaat in één handeling alle bindingen en acties van het symbool aan één apparaat — bij de meeste symbolen is dit de enige instelling die nodig is. Onder de plaatsing tonen drie subtabbladen de eigen Bindingen, Acties en Animaties van het symbool, elk bewerkbaar zoals hieronder beschreven. Symbool verwijderen wist het symbool inclusief alle bijbehorende regels.
Tekst. Het symbool Tekst toont de woorden die u invoert in het veld Tekst. Schaal het om de grootte aan te passen; koppel de kleur of zichtbaarheid net als bij elk ander onderdeel.
Overige elementen. De eigen vormen van de tekening staan vermeld onder Overige elementen, op basis van id — een vorm zonder id kan niet worden gekoppeld. Ken id's toe aan vormen in het tabblad Bron, of selecteer ze met Aanwijzen; voeg vervolgens op dezelfde manier bindingen en acties toe. Regels waarvan de selector een class of pad is in plaats van een id, worden gegroepeerd onder Regels op overige selectors.
Mijn symbolen. Onder de categorie Mijn symbolen voegt Symbool uploaden een eigen SVG-icoon toe — een camera, een logo of apparatuur die in de standaardbibliotheek ontbreekt:
| Veld | Betekenis |
|---|---|
| SVG-bestand | Het icoon, maximaal 256 KB. Dit doorloopt dezelfde sanitizer als een tekening |
| Naam | Hoe het in de bibliotheek wordt weergegeven |
| Kleuren | Eén kleur tekent het icoon in de tekstkleur van de tekening, zodat een binding het groen of rood kan kleuren. Kleuren behouden behoudt het originele ontwerp en staat alleen tonen / verbergen toe |
| Trefwoorden | Woorden waarop de zoekfunctie het symbool vindt |
Een aangepast symbool bevat geen vooraf geconfigureerde regels: voeg na plaatsing zelf de gewenste bindingen en acties toe. Elke graphic waarin het symbool wordt gebruikt, bewaart een eigen kopie; het hernoemen of verwijderen van het symbool in de bibliotheek tast bestaande graphics dus nooit aan.
Bindingen
Een binding wijzigt een vorm zodra een waarde verandert. Open een symbool (of een element onder Overige elementen) en ga naar het subtabblad Bindingen. Elke rij bevat vier onderdelen:
Selector — welke vorm door de binding wordt aangestuurd. Voor de eigen rijen van een symbool is dit vooraf ingevuld (#lamp_1 .body); voor een handgetekende vorm is dit het id van de vorm.
Bron — waar de waarde vandaan komt:
| Bron | Velden |
|---|---|
| Apparaat | Een apparaat en een van de bijbehorende objecten — de schakelstatus van de verlichting, het vermogen van de meter, de meting van de sensor |
| Functie | Een functie van de Logic engine en een van de uitgangen (zie "Functie-instelling & uitgangen") |
| Statisch | Een vaste ingevoerde waarde — handig om een regel te testen of een status te forceren |
Wat wijzigt — wat de waarde met de vorm doet:
| Type | Effect | Extra velden |
|---|---|---|
| Attribuut | Stelt een SVG-attribuut in (fill, stroke, opacity, width…) | de attribuutnaam |
| Stijl | Stelt een CSS-eigenschap in | de eigenschapnaam |
| Tekst | Vervangt de tekst van de vorm door de waarde | decimalen, eenheid en een template zoals {value} {unit} |
| Klasse | Voegt een class toe zolang de waarde aan is, verwijdert deze anders | de class-naam — combineer dit met Extra CSS |
| Zichtbaarheid | Toont de vorm wanneer de waarde aan is, verbergt deze anders | — |
| Transformatie | Roteert, verplaatst of schaalt de vorm op basis van de waarde | de bewerking |
| Animatie | Stuurt een animatierij aan (zie hieronder bij Animaties): uitvoeren bij aan, snelheid (dur) of richting op basis van teken | de animatie en de modus |
| Symbool (href) | Wisselt de vorm om voor een ander #symbol van de tekening | — |
Toewijzing — hoe de waarde wordt omgezet naar wat de vorm nodig heeft:
| Toewijzing | Wat het doet | Voorbeeld |
|---|---|---|
| Direct | De waarde wordt ongewijzigd overgenomen | een temperatuur in een Tekst |
| Aan / uit | Eén resultaat bij aan, een ander bij uit | #facc15 bij aan, #64748b bij uit, voor de vulling van een lamp |
| Bereik | Koppelt een waardebereik aan een uitgangsbereik; Begrenzen op bereik stopt bij de uitersten, Absolute waarde gebruiken negeert het minteken | 0–100 % naar een lamellenpositie verschoven van −28 naar 0 |
| Drempelwaarden | Stappen: tot een waarde levert een resultaat op, daarna de volgende, en anders | tot 15 rood, tot 30 oranje, anders groen, voor een opslagvat |
| Lookup-tabel | Een tabel met exacte waarden, met anders voor alle overige gevallen | 1 → Open, 0 → Gesloten, voor een statustekst |
💡 Tip: De rijen uit de bibliotheek zijn de beste voorbeelden: plaats een Statusindicator en bekijk de drie bindingen — de vulling van de stip (Aan / uit), de vulling van de halo (Aan / uit) en de statustekst (Lookup-tabel). Pas de twee woorden in de Lookup-tabel aan naar "Open" en "Gesloten", of "Ingeschakeld" en "Uitgeschakeld".
Acties
Een actie voert een commando uit wanneer een vorm wordt aangeraakt. Open het subtabblad Acties van een symbool of voeg een actie toe aan een handgetekende vorm.
| Veld | Keuzes |
|---|---|
| Selector | De vorm die de aanraking ontvangt — doorgaans het complete symbool |
| Gebaar | Tik, Dubbeltik, Lange druk |
| Actie | Apparaatwaarde instellen (met de Te verzenden waarde) · Apparaat schakelen · Apparaatwaarde stapsgewijs aanpassen · Ruimte van het apparaat openen · Detailpagina van het apparaat openen (de pagina die de tegel opent; een apparaat zonder detailpagina opent de ruimte) · Scenario uitvoeren · Automatisering uitvoeren · Globaal commando (verlichting of rolluiken, voor het hele gebouw, een ruimte of categorie) · Ga naar een weergave · Ga naar een ruimte · Ga naar een categorie |
| Bevestiging vragen | Een vraag die wordt getoond voordat de actie wordt uitgevoerd, zoals Pomp starten?. Laat leeg om direct uit te voeren |
Eenzelfde vorm kan meerdere acties bevatten met verschillende bedieningsgebaren: in het voorbeeld Pompstation schakelt een pomp bij een tik (na bevestiging) en opent het apparaat bij een lange druk.
📘 Opmerking: Apparaatcommando's, scenario's en automatiseringen draaien op de server, ongeacht welke app ze heeft verstuurd. Ruimte van het apparaat openen, Detailpagina van het apparaat openen, Globaal commando, Ga naar een weergave, Ga naar een ruimte en Ga naar een categorie vinden plaats binnen de app waarin is getikt, waardoor de preview in het beheerpaneel deze niet kan uitvoeren.
📘 Opmerking: Gebruikers kunnen uitsluitend acties uitvoeren waarvoor hun account bevoegd is. Een symbool dat is gekoppeld aan een apparaat buiten de ruimtes en categorieën van een gebruiker functioneert voor die gebruiker als een statische tekening; een globaal commando voor het gehele gebouw is voorbehouden aan beheerders.
Animaties
Een animatierij voegt een continue beweging toe aan een vorm — een draaiende rotor, lopende streepjes over een lijn, een knipperende lamp — die door bindingen kan worden gestart, gestopt, versneld of omgekeerd.
| Veld | Betekenis |
|---|---|
| Doel | De vorm die beweegt (#pump_1 .rotor) |
| Attribuut | Wat wordt geanimeerd: transform voor een beweging, of een attribuut zoals stroke-dashoffset of opacity |
| Transformatie | Voor transform: rotate, scale, translate, skewX, skewY — een rotatie draait om het middelpunt van het symbool |
| Van, Naar | De begin- en eindwaarden |
| Duur | Eén cyclus, bijvoorbeeld 1s |
| Herhalen | Een aantal, of indefinite (oneindig) |
| Start | indefinite wanneer een binding deze start, load om direct te starten zodra de graphic opent, of een SMIL-reeks zoals pump1.click; spin.end+1s |
| Einde, Fill | De standaard SMIL-eindvoorwaarde en wat er gebeurt wanneer de animatie stopt |
Om een animatie te laten reageren op de installatie, voegt u een binding toe met Wat wijzigt ingesteld op Animatie: uitvoeren bij aan start en stopt de animatie op basis van een status, snelheid (dur) bepaalt de cyclusduur vanuit een meetwaarde (een Bereik-toewijzing van watt naar seconden), richting op basis van teken draait de animatie om bij negatieve waarden — de Stroomlijn gebruikt ze alle drie.
Testen, instellingen, export
Testwaarden. Dit tabblad bevat een invoerveld per gekoppelde waarde, zodat u handmatig een meetwaarde kunt invoeren en direct ziet hoe de preview reageert. Schakel Live waarden in om de preview te voeden met de werkelijke waarden van de installatie. Testacties (waarvoor Live waarden vereist is) zorgt ervoor dat klikken in de preview hun acties daadwerkelijk op de server uitvoeren — apparaten schakelen, scenario's en automatiseringen starten — zodat u een graphic volledig kunt controleren voordat bewoners deze gebruiken. Acties die binnen de app plaatsvinden (ruimte openen, globale commando's, naar een weergave navigeren) worden gemeld maar niet uitgevoerd.
Instellingen.
| Instelling | Betekenis |
|---|---|
| Beschrijving | Een toelichting die in het overzicht wordt getoond |
| Kleuren | App-thema volgen — symbolen en labels nemen de tekstkleur van de app over; Lichte tekening — donkere lijnen ongeacht het thema, voor een witte achtergrondafbeelding; Donkere tekening — lichte lijnen ongeacht het thema |
| Weergavepassing (fit) | Hoe de tekening de kaart vult: contain toont de tekening volledig, cover vult de kaart en snijdt randen af |
| Achtergrond | Een kleur achter de tekening, of transparent |
| Min. hoogte (px) | De kaart wordt nooit kleiner weergegeven dan deze hoogte |
| Extra CSS | Een stylesheet die wordt toegepast op de tekening — classes voor Klasse-bindingen, keyframes, overgangen |
| Afbeeldingsbronnen | De afbeeldingen waarnaar de tekening kan verwijzen (PNG, JPEG, WebP). Afbeelding uploaden voegt een bestand toe; Als achtergrond gebruiken stelt de afbeelding in als achtergrond en schaalt de graphic hiernaar. Een afbeelding die nog in gebruik is, wordt gemarkeerd als in gebruik en kan niet worden verwijderd; bij vervanging van de achtergrond biedt de editor aan om het vorige bestand te verwijderen |
Exporteren en importeren. Exporteren downloadt een graphic als bundelbestand: de tekening, regels, instellingen en afbeeldingen samengevoegd in één bestand. Bundel importeren op de pagina Graphics maakt een graphic aan op basis van zo'n bestand. Apparaat-, functie-, scenario- en weergave-referenties worden gekoppeld op naam; een referentie zonder overeenkomst vervalt en het importoverzicht meldt het aantal ontbrekende koppelingen. Dit is ook hoe de twee standaardvoorbeelden worden geleverd en hoe een graphic eenvoudig van de ene naar de andere installatie kan worden overgezet.
Back-ups. Graphics en uw aangepaste symbolen worden bewaard in de serverdatabase en maken daardoor deel uit van de serverback-up (zie "Back-up & herstel"). Afbeeldingen waarnaar een graphic verwijst, worden als losse bestanden opgeslagen en zitten niet in de back-up: exporteer de graphic als bundel om alle afbeeldingen samen te bewaren.