My Building - Contrôle des lampes

• Tutorial

Ce chapitre décrit la supervision et le contrôle des lampes dans un bâtiment. Il présente la personnalisation de leur représentation visuelle dans le jumeau numérique ainsi que la mise en place de commandes permettant d’allumer ou d’éteindre les lampes directement depuis l’interface.

Dans la majorité des installations, la supervision des lampes est présente et constitue le principal vecteur de commandes envoyées depuis le logiciel vers les équipements afin de contrôler leur allumage et leur extinction.

Dans ce tutoriel, nous allons voir comment personnaliser la représentation des lampes dans l’application en fonction de leur état, ainsi que mettre en place des boutons permettant d’envoyer des commandes aux lampes.

Objectifs fonctionnels

1. Coloration de la bulle d’équipement en fonction de l’état d’allumage d’une lampe
2. Ajout d’un bouton Quick Action pour envoyer une commande d’allumage ou d’extinction d’une lampe

Prérequis

• Création d’un script de comportement associé à la famille Light
• Association de la Light à une bulle d’équipement dans le jumeau numérique

Coloration de la bulle d’équipement en fonction de l’état d’allumage d’une lampe

Afin d’atteindre l’objectif que nous nous sommes fixés, il suffit d’implémenter la fonction Customize, déjà vue précédemment.

La première étape consiste à récupérer l’état de la variable Light afin de déterminer si la lampe est allumée ou éteinte.

La propriété icon des widgets permet de modifier l’icône affichée par l’équipement. Le nom de l’icône doit correspondre à une ressource image précédemment ajoutée à notre organisation.

La propriété iconBackgroundColor permet de modifier la couleur de fond de l’icône. Il est possible de passer un nom de couleur ou directement une couleur au format hexadécimal.

function Customize(equipment, w2d, w3d) 
{
  let isOn = equipment.GetVariable("LIGHT").AsInt > 0;

  // Modification de l'icône et de la couleur de fond en fonction de l'état de la lumière
  w3d.icon = isOn ? "Icon Lamp_On" : "Icon Lamp_Off";
  w3d.iconBackgroundColor = isOn ? "yellow" : "";
}

Ajout d’un bouton Quick action pour envoyer une commande d’allumage/extinction d’une lampe

Afin d’ajouter un bouton permettant l’envoi de commandes, nous devons ajouter du code à la fonction Customize.

La propriété quickAction des widgets permet d’ajouter des boutons d’interaction rapide, dont le libellé correspond au texte associé à la Quick Action.

Dans notre cas, le texte de l’action dépend de l’état de la lampe :

• Éteindre
• Allumer

Nous ajoutons ensuite la fonction ExecuteQuickAction, qui sera appelée lorsque l’utilisateur clique sur le bouton.

Notre implémentation appelle l’endpoint /api/Scene de notre serveur en envoyant le body correspondant aux paramètres nécessaires pour allumer ou éteindre la lumière.

Les deux promesses then et catch nous permettent d’afficher des messages lorsque l’endpoint renvoie une réponse, afin d’informer l’utilisateur de la bonne ou de la mauvaise exécution de la commande.

Script JS :

function Customize(equipment, w2d, w3d) 
{
  let isOn = equipment.GetVariable("LIGHT").AsInt > 0;

  // Affichage du bouton QuickAction avec le bon label
  w2d.quickAction = w3d.quickAction = isOn ? "Eteindre" : "Allumer";

  // Modification de l'icône et de la couleur de fond en fonction de l'état de la lumière
  w3d.icon = isOn ? "Icon Lamp_On" : "Icon Lamp_Off";
  w3d.iconBackgroundColor = isOn ? "yellow" : "";
}

// Implémentation de la QuickAction pour l'allumage/exctinction des lumières
function ExecuteQuickAction(equipment) 
{
    let isOn = equipment.GetVariable("LIGHT").AsInt > 0;

    let serverUrl = "https://localhost:7003";

    // Construction du body à envoyer au endpoint
    let body = {
        sceneName : "Corridor Light",
        action : isOn ? "off ": "on"
    };

    // Envoi de la requète au endpoint server/api/Scene
    WebRequestProvider.Post(serverUrl + `/api/Scene`, JSON.stringify(body))
    .Then(response => 
    {
        // Affichage d'un toast de succès et récupération des données
        Immersive.Toaster.ToastSuccess("Commande éclairage Ok");
        Immersive.Hub.ObserveSingleUpdate();
    })
    .Catch(error => 
    {
        // Affichage d'une erreur en cas de problème
        Immersive.App.ShowPopup("Commande éclairage", "La commande n'a pas pu être effectuée");
    });
}