Aangepaste widget

Inleiding

Je werkt aan een project voor een hotel en de klant vraagt om de status van veel kamers weer te geven: dat kan, maar het resultaat zou een grafische chaos zijn. Met het Custom Widget-component kun je grafische elementen maken die de status van meerdere parameters weergeven; zo kun je bijvoorbeeld een grafisch element maken dat alle informatie van elke afzonderlijke kamer voorstelt. Op die manier kan de klant de status van honderden kamers op hetzelfde scherm volgen. Dit grafische element kan worden gemaakt met een bestandseditor zoals Adobe Illustrator.

Elk Custom widget stelt een kamer voor en verandert van status wanneer een parameter wijzigt. Elke widget heeft namelijk een script waarmee de grafische weergave kan worden aangepast op basis van de parameters van de echte apparaten.

Toepassingen

• De gebruiker kan een ‘reactieve’ kaart van een kamer opbouwen, waarop de status van parameters zoals de temperatuur van een setpoint of de status van een lamp in een specifieke kamer kan worden bewaakt.

• De eigenaar van een B&B kan dit onderdeel gebruiken voor volledig realtime overzicht van elke afzonderlijke kamer en om te zien of die bezet is of niet.

Ter herinnering voordat je verdergaat:

• Download en installeer de Ilevia Logic plugin om plugins in te schakelen (link);

• Nadat je het Ilevia-project op de server hebt geladen, wacht je een paar minuten tot de logica's zijn opgestart.

Eigenschappen van het component

Breedte: in dit tekstveld kun je de breedte instellen die wordt toegepast op de afbeelding in de gebruikersinterface.

Hoogte: in dit tekstveld kun je de hoogte instellen die de afbeelding in de gebruikersinterface zal aannemen.

Map template te activeren na de klik: met dit keuzemenu kun je een Map template kiezen uit de bestaande sjablonen, die wordt geopend wanneer de gebruiker op dit Custom widget in de gebruikersinterface klikt.

Klik van de gebruiker: in dit veld kun je een component instellen die, zodra erop wordt geklikt, een kaart opent via het component Map template, waar alle ingestelde apparaten binnen die kamer kunnen worden bekeken.

Json-parameters: in dit tekstveld kun je een JSON-tekenreeks schrijven; je kunt bijvoorbeeld een dynamisch veld in het SVG-bestand maken dat automatisch wordt bijgewerkt wanneer het component aan de gebruikersinterface wordt toegevoegd, zoals het kamernummer van het hotel.

JavaScript ophalen van: met deze keuzelijst kun je een JavaScript-codebron selecteren uit andere Custom widget-componenten in hetzelfde project, handig als je meerdere Custom widgets in het project hebt.

javascript: met dit tekstveld kun je de JavaScript importeren die met het SVG-bestand samenwerkt wanneer de waarden in de gebruikersinterface veranderen.

SVG ophalen van: met deze keuzelijst kun je de SVG-code koppelen van een ander bestaand Custom widget-component in het project.

SVG-bestand laden: met deze knop kun je een SVG-element rechtstreeks vanuit een lokaal bestand laden.

Hoe het SVG-bestand in het Custom widget-component te importeren

Stap 1:

Met dit component kun je een SVG-bestand rechtstreeks uit lokale bestanden selecteren. Klik op de knop SVG-bestand laden in de eigenschappen van het Custom widget-component, selecteer vervolgens het bestand en klik op Openen.

JavaScript-configuratie

Stap 2:

Het Custom widget-component heeft een script nodig om de componenten van het Ilevia Manager-project te koppelen, zoals Info, Setpoint, Keuzelijsten, Schakelaars, enz., en om de weergave van de actuele en veranderende waarden in het SVG-bestand van de gebruikersinterface mogelijk te maken.

Om het SVG-bestand aan het component in het project te koppelen, moet een specifiek JavaScript-script worden gemaakt. Dit script moet worden aangepast aan het SVG-bestand, het doel en de structuur ervan. Op een andere pagina wordt in detail beschreven hoe je het opbouwt en structureert: klik hier om de configuratie van het script te bekijken.

Hoe je een Custom SVG-component instelt met hetzelfde JavaScript maar met verschillende JSON

Het is noodzakelijk specifieke parameters te maken die op de Custom widget-componenten in de gebruikersinterface worden toegepast. Aan de hand van het onderstaande voorbeeld kun je ze correct instellen: de procedure bestaat uit het toevoegen van een JSON-tekenreeks waaruit het component de gegevens haalt.

Stap 3:

Om de JSON in het Custom widget-component in te stellen, moet je de variabelen definiëren die de waarde halen uit de gegevens die in de JSON van het component zijn ingesteld.

Variabele instellen: var Naam_variabele=getEMParam("Naam_json_parameter");

Stap 4:

Nadat je de variabelen in de JavaScript-code hebt ingesteld, moet je ze in het Ilevia-project opgeven. Ga naar de eigenschappen van het Custom widget-component: zoals je in de onderstaande afbeelding kunt zien, hebben we in het venster voor het instellen van JSON het kamernummer, het component Setpoint en het component dat de bezetting van de kamer bepaalt opgegeven.

Stap 5:

Als er meer dan één Custom widget-component in hetzelfde project aanwezig is, kun je JavaScript-script en SVG-bestanden koppelen van andere Custom widget-componenten die al in het huidige Ilevia Manager-project aanwezig zijn.

Stap 6:

In de onderstaande weergave zie je het visuele resultaat dat is gemaakt met de ingestelde configuraties in het project; het is slechts één van de vele mogelijkheden die met het Custom widget-component kunnen worden gerealiseerd.

Hoe het Map template-component met de Custom widget te koppelen

Het Custom Widget-component maakt het mogelijk om in de configuraties een Map template-component te koppelen: door op de Custom widget in de gebruikersinterface te klikken, wordt zo een kaart geopend.

Selecteer in de eigenschappen van het Custom widget-component het Map template dat je wilt weergeven wanneer op de Custom widget wordt geklikt in de gebruikersinterface van de Ilevia Control-app.

Hoe een Map template openen door op een Custom widget te klikken

Om het Map template-component te openen is een triggercomponent vereist die, zodra deze in de gebruikersinterface wordt ingedrukt, het Map template opent dat in het vervolgkeuzemenu van het Custom widget-component is geselecteerd.

Voeg daarom een Knop-component toe aan het project en selecteer deze in de eigenschappen van het Custom widget-component.

Ontwikkeling van JavaScript-functies met de Custom widget

Inleiding

Omdat het Custom widget-component een eigen JavaScript-ontwikkelveld heeft, kun je je eigen code maken die meerdere keren herbruikbaar is zonder de andere componenten in het Ilevia Manager-project te beïnvloeden. Voer in het tekstveld “JSON-parameters” de namen en ID's van de componenten in, in het onderstaande formaat.

Voeg de variabelen toe in het tekstveld JSON-parameters, zoals hieronder weergegeven:

{"Naam-variabele1": IDComponent1, "Naam-variabele2": IDComponent2, "Naam-variabele3": IDComponent3, enz.}

Je kunt zoveel Custom Widgets toevoegen als je nodig hebt: ze kunnen allemaal dezelfde code en dezelfde variabelenamen bevatten.

Hieronder vind je praktijkvoorbeelden die stap voor stap uitleggen hoe je JavaScript-functies configureert met het Custom Widget-component:

• Bewegingssensor met count down