Interfaces pour le laboratoire du LIARA utilisant les différents capteurs.
Frameworks utilisés pour les interfaces:
- Boostrap
- AnimeJS
- font-awesome
- jquery
- alertify.js
- popper.js
git clone https://github.com/LIARALab/Lab-GUI.git
docker build --rm -f "Dockerfile" -t lab-gui:1.0 .
docker run --restart=always -d -p 80:80/tcp lab-gui:1.0
Il est nécessaire d'avoir un serveur web sans quoi les animations ne fonctionneront pas. Par exemplde, l'extension Live Server compatible avec Visual Studio Code.
Avant de pouvoir utiliser l'interface correctement il faut :
-
Se connecter au reseau caché du laboratoire :
- SSID : Liara
- Password : liara_lab
-
Démarrer un serveur local
L'application démarre lorsque le nagivateur est ouvert. Elle va chercher à se connecter au websockets dont les informations de connexion se trouvent dans le fichier config.json
.
Si la connexion aux websockets est un succès, les messages suivant apparaitront dans le coin inférieur droit :
Sinon ces messages apparaitront :
Pour changer d'interface, simplement glisser la souris vers la cuisine et clicker (dans l'interface du dessus) :
et vers la gauche dans l'interface de la cuisine et clicker :
Config.json
:
{
"id_laboratory": "Porte du refrigerateur",
"className": "animPorteFrigoBas", ***
"skewYStart": 0,
"skewYFinal": 10,
"scaleXStart": 1,
"scaleXFinal": 0.8,
"translateXStart": 0,
"translateXFinal": 215,
"translateYStart": 0,
"translateYFinal": -190,
"easing": "linear",
"duration" : 750
}
interface_cuisine_face.html
(ou autre), à l'intérieur de la balise<svg></svg>
. Il est bien important d'utiliser leclassName
du fichiercongig.json
<!-- Anim -->
<rect id="porte_inferieur" //identifiant de l'objet
class="animPorteFrigoBas *** //className de config.json
texture_metal_vbrush" //situé dans texture.css
x="1072" y="338.5" //emplacement
width="259.5" height="384" //dimension
/>
-
Transformations possibles (Final est la position final de l'animation lorsque le senseur est "ouvert") :
- "translateXStart" <=> "translateXFinal"
- "translateYStart" <=> "translateYFinal"
- "translateZStart" <=> "translateZFinal"
- "rotateStart" <=> "rotateFinal" //3D
- "rotateXStart" <=> "rotateXFinal"
- "rotateYStart" <=> "rotateYFinal"
- "rotateZStart" <=> "rotateZFinal"
- "scaleStart" <=> "scaleFinal" //3D
- "scaleXStart" <=> "scaleXFinal"
- "scaleYStart" <=> "scaleYFinal"
- "scaleZStart" <=> "scaleZFinal"
- "skewXStart" <=> "skewXFinal"
- "skewYStart" <=> "skewYFinal"
- "perspectiveStart" <=> "perspectiveFinal"
config.json
:
Comme chaque interface utilise des animations différentes, il faut tout d'abord créer un hierarchie pour chaque interface dans la section "sensor" :
"sensor": [
{
"interface_salle_dessus": [
{
*****Liste de senseurs
}
]
},
"interface_cuisine_face": [
{
****Liste de senseurs
}
]
},
...
Ensuite, il faut ajouter un sensor dans la section liste de sensors. La majorité des capteurs sont déjà identifiés, mais s'il en manque, tester dans WebsocketsFunctions avec
console.log(item_websocket['SensorName']);
pour afficher les capteurs présents dans le laboratoire dans la console du navigateur.
{
"id_laboratory": "Capteur magn\u00E9tique porte salle de conf\u00E9rence",
"className": "animPorteSalleConference",
"rotateStart": 0,
"rotateFinal": -90,
"easing": "linear",
"duration" : 750
},
initialisation.js
Assurez vous d'initialiser le tableau de sensors pour votre interface.
- Initialiser le tableau
- Assigner les données au tableau
let iPrincipaleSensor = [];
let iCuisineSensor = [];
iPrincipaleSensor = data['sensor'][0];
iCuisineSensor = data['sensor'][1];
WebsocketFunctions.js
Dans la section function Objects(event)
ajouter une boucle for
:.
for (let j = 0; j < iCuisineSensor['interface_cuisine_face'].length; j++) {
// *** À changer pour votre interface
let item_sensor = iCuisineSensor['interface_cuisine_face'][j];
//Animation des objets
if (item_websocket['SensorName'] === item_sensor["id_laboratory"]) {
console.log(item_websocket['SensorName']);
let obj = {
targets: '.' + item_sensor['className'],
easing: item_sensor['easing'],
duration: item_sensor['duration']
};
// Initialiser les transformations pour l'objet
checkItemSensorState(obj, item_websocket, item_sensor);
// Animer l'object
anime(obj);
}
}