Aller au contenu
HMI5 Guide HMI5

Guide de démarrage BACnet HMI HMI5 - Manuel utilisateur

Créez des interfaces HTML5, CSS3 et JavaScript pour visualiser et contrôler des systèmes BACnet sur iPhone, iPad et Android avec HMI5.

Aperçu

HMI5 permet d’utiliser des technologies Web standard comme HTML5, CSS3 et JavaScript pour développer votre propre interface BACnet sur iPhone, iPad et Android, sans la complexité du développement natif propre à chaque plateforme.

L’application utilise un fichier de configuration simple nommé config.json. Ce fichier contient les informations de l’application et les paramètres qui déterminent son fonctionnement, notamment la configuration du réseau BACnet.

Votre application est une page Web qui peut utiliser les feuilles de style, scripts, images, médias et autres ressources nécessaires au projet. HMI5 fournit des API JavaScript pour accéder aux appareils d’un réseau BACnet.

Organigramme de l'application HMI5

iPhone et iPad

Pour iPhone et iPad, incluez le fichier hmi5ios.js dans votre projet et référencez-le depuis l’application Web.

Android

Les applications Android utilisent la même approche basée sur une application Web. HMI5 expose les interfaces BACnet et plateforme à la page JavaScript.

Fichier de configuration

Le fichier de configuration doit être nommé config.json.

iPhone et iPad

Placez le fichier dans le dossier BACMOVEVIEW accessible par le partage de fichiers HMI5. Apple fournit des instructions pour accéder au partage de fichiers avec Windows ou macOS Mojave et versions antérieures et macOS Catalina et versions ultérieures.

Android

Placez le fichier dans le dossier BACMOVEVIEW du répertoire de l’application HMI5. Un chemin typique est :

Android/data/com.bacmove.hmi5/files/BACMOVEVIEW/config.json

L’exemple suivant présente la structure principale de configuration. Les propriétés foreignDevice, requestCPULock et requestWiFiLock sont facultatives; les autres champs devraient être présents.

{
  "config": {
    "BACnet": {
      "deviceID": 4000001,
      "deviceName": "HMI5",
      "port": 47808,
      "foreignDevice": {
        "BBMDIP": "8.8.8.8",
        "BBMDPort": 47808,
        "BBMDEnable": false
      }
    },
    "title": "Local 101",
    "description": "",
    "shortcutEnable": false,
    "shortcutIcon": "",
    "externalURL": "",
    "fullscreen": true,
    "screenAlwaysOn": false,
    "autoStart": false,
    "requestCPULock": true,
    "requestWiFiLock": true,
    "screenOrientation": "",
    "immersiveFullScreenSticky": false
  }
}

Configuration BACnet

  • deviceID : numéro d’instance de l’appareil BACnet. Valeur par défaut : 4000001.
  • deviceName : nom de l’appareil BACnet. Valeur par défaut : HMI5.
  • port : port UDP BACnet. Valeur par défaut : 47808.
  • foreignDevice : configuration facultative de périphérique étranger BACnet / BBMD.
  • BBMDIP : adresse IP du BBMD.
  • BBMDPort : port du BBMD.
  • BBMDEnable : active le fonctionnement Périphérique étranger / BBMD.

Configuration de l’application

  • title : titre de l’application.
  • description : description de l’application.
  • shortcutEnable : création automatique d’un raccourci sur Android.
  • shortcutIcon : chemin de l’icône Android relatif à BACMOVEVIEW.
  • externalURL : URL d’une page distante. Lorsqu’elle est vide, les pages sont chargées depuis BACMOVEVIEW/HTML/.
  • fullscreen : conserve l’application en plein écran.
  • screenAlwaysOn : garde l’écran actif sur Android.
  • autoStart : démarre l’application après le démarrage de l’appareil.
  • requestCPULock : demande Android pour maintenir le service BACnet actif.
  • requestWiFiLock : demande Android pour maintenir le Wi-Fi actif.
  • screenOrientation : force éventuellement l’orientation portrait ou landscape.
  • immersiveFullScreenSticky : comportement plein écran immersif sur Android.

Interface Web

Les applications HMI5 sont des pages Web placées dans BACMOVEVIEW/HTML/, sauf si externalURL désigne une application distante. La page peut utiliser des ressources HTML, CSS et JavaScript normales.

Interfaces responsives et pixel parfait

Le design responsive adapte l’interface aux dimensions de l’appareil. Préférez des mises en page flexibles, une typographie évolutive et des contrôles utilisables sur les téléphones et les tablettes. Consultez le guide Pixel-perfect WebView de Chrome pour plus de contexte.

Différentes densités d’écran

La densité d’écran influence l’apparence des éléments définis en pixels. Utilisez des dimensions responsives et des ressources adaptées à la densité afin de conserver des contrôles cohérents sur les appareils Android.

Gestion des cookies

L’application HMI5 possède son propre cache et son propre stockage de cookies. Elle ne partage pas les données de l’application de navigation; l’état dépendant des cookies doit donc être géré dans l’application Web HMI5.

Exemples

Lorsque externalURL est vide, placez les pages Web statiques dans BACMOVEVIEW/HTML/.

jQuery Mobile

L’exemple débutant utilise jQuery Mobile pour créer des pages Web optimisées pour le tactile. Téléchargez les pages Web d’exemple.

Ionic et AngularJS

L’exemple avancé utilise Ionic et est disponible dans le dépôt HMI5 Demonstration. Ionic fournit des composants, gestes et modèles d’interface optimisés pour le mobile.

Débogage

iPhone et iPad

Utilisez Safari Web Inspector pour déboguer l’application Web HMI5 depuis un Mac. Consultez Safari Web Inspector.

Android

Pour Android 4.4 et versions ultérieures, utilisez le débogage à distance de Chrome. Android Device Monitor peut également être utilisé dans les environnements plus anciens.

API JavaScript BACnet

L’API JavaScript BACnet est exposée par JSInterface.

whoIs

Détecte les appareils BACnet du réseau.

JSInterface.whoIs();
JSInterface.whoIs(123, 123);

readDeviceObjectProperty

Lit la propriété d’un objet BACnet. Utilisez -1 comme index lorsqu’aucun index de tableau n’est nécessaire.

JSInterface.readDeviceObjectProperty(123, 0, 1, 85, -1);

Les paramètres sont l’identifiant de l’appareil, le type d’objet, l’instance de l’objet, l’identifiant de propriété et l’index de tableau.

writeDeviceObjectProperty

Écrit une propriété d’objet BACnet. La priorité 8 correspond normalement à l’opérateur manuel.

JSInterface.writeDeviceObjectProperty(123, 0, 1, 85, -1, 8, 10, false);

Les paramètres sont l’identifiant de l’appareil, le type d’objet, l’instance, l’identifiant de propriété, l’index, la priorité, la valeur et l’indicateur de valeur nulle.

Callbacks JavaScript BACnet

Définissez ces callbacks dans l’application Web pour recevoir les événements BACnet.

updateDevice

Appelé lorsqu’un appareil est découvert.

JSInterface.updateDevice = function(deviceID, deviceName, segmentation, vendorID, modelName) {
  console.log(deviceID, deviceName, modelName);
};

readDeviceObjectPropertyAck

Appelé lorsqu’une lecture réussit.

JSInterface.readDeviceObjectPropertyAck = function(deviceID, objectType, objectInstance, propertyIdentifier, arrayIndex, value) {
  console.log(value);
};

writeDeviceObjectPropertyAck

Appelé lorsqu’une écriture réussit.

JSInterface.writeDeviceObjectPropertyAck = function(deviceID, objectType, objectInstance, propertyIdentifier, arrayIndex) {
  console.log('Écriture terminée');
};

writeDeviceObjectPropertyError

Appelé lorsqu’une écriture échoue. Le callback reçoit la classe d’erreur BACnet, le texte de l’erreur, le code et le texte du code en plus des identifiants de la requête.

API JavaScript de la plateforme

L’API de plateforme fournit des retours mobiles natifs depuis l’application Web.

Notifications

JSInterface.platformToast('Écriture terminée');
JSInterface.platformToast('Réseau indisponible', true);
JSInterface.platformNotificationVibrate(250);
JSInterface.platformNotificationBeep();
JSInterface.platformNotificationAlert('État', 'Écriture terminée', 'OK', true, 'info');
JSInterface.platformNotificationConfirm('Confirmer', 'Écrire la valeur ?', 'Oui', 'Non', true, 'info');

Contrôle de l’application

JSInterface.platformCloseApplication();

Cycle de vie de la plateforme

Utilisez les callbacks du cycle de vie pour suspendre les requêtes réseau lorsque l’application est masquée et les reprendre lorsqu’elle redevient visible.

JSInterface.platformIsWiFiConnected();

JSInterface.platformOnStop = function() {
  // Suspendre les requêtes BACnet périodiques.
};

JSInterface.platformOnRestart = function() {
  JSInterface.whoIs();
};

JSInterface.platformOnBACnetServiceStarted = function() {
  JSInterface.whoIs();
};

JSInterface.platformOnWiFiConnected = function() {
  JSInterface.whoIs();
};

JSInterface.platformOnWiFiDisconnected = function() {
  // Mettre à jour l'état de l'application.
};

Licences et attributions

Certaines parties du guide HMI5 original sont adaptées de travaux créés et partagés par Android Open Source Project, Google et Apache Software Foundation. Conservez les avis d’attribution originaux et les liens vers la licence Creative Commons 2.5 Attribution, CC-BY 3.0 et la licence Apache.