Skip to content

Commit e7ad30a

Browse files
authored
Merge pull request #3345 from jeedom/docs/widgets-and-scenario
docs: refactor Core widgets and document scenario block execution time limits
2 parents b934b5f + d805f7e commit e7ad30a

2 files changed

Lines changed: 172 additions & 101 deletions

File tree

docs/fr_FR/scenario.md

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -116,9 +116,10 @@ Voici les différents types de blocs disponibles :
116116

117117
- **Si/Alors/Sinon** : Permet de réaliser des actions sous condition (si ceci, alors cela).
118118
- **Action** : Permet de lancer des actions simples sans aucune condition.
119-
- **Boucle** : Permet de réaliser des actions de manière répétitive de 1 jusqu’à un nombre défini (ou même la valeur d’un capteur, ou un nombre aléatoire…​).
119+
- **Boucle** : Permet de réaliser des actions de manière répétitive de 1 jusqu’à un nombre défini, un nombre aléatoire, la valeur d’un capteur, etc. *(durée maximale: 1 heure)*
120120
- **Dans** : Permet de lancer une action dans X minute(s) (0 est une valeur possible). La particularité est que les actions sont lancées en arrière-plan, elles ne bloquent donc pas la suite du scénario. C’est donc un bloc non bloquant.
121121
- **A** : Permet de dire à Jeedom de lancer les actions du bloc à une heure donnée (sous la forme hhmm). Ce bloc est non bloquant. Ex : 0030 pour 00h30, ou 0146 pour 1h46 et 1050 pour 10h50.
122+
- **Tant que** : Permet de réaliser des actions tant qu’une condition est vraie. *(durée maximale: 1 heure)*
122123
- **Code** : Permet d’écrire directement en code PHP (demande certaines connaissances et peut être risqué mais permet de n’avoir aucune contrainte).
123124
- **Commentaire** : Permet d’ajouter des commentaires à son scénario.
124125

@@ -476,7 +477,7 @@ Et les exemples pratiques :
476477

477478
En plus des commandes domotiques, vous avez accès aux actions suivantes :
478479

479-
- **Pause** (sleep) : Pause de x seconde(s).
480+
- **Pause** (sleep) : Pause de x seconde(s). *(durée maximale: 1 heure)*
480481
- **variable** (variable) : Création/modification d’une variable ou de la valeur d’une variable.
481482
- **Supprimer variable** (delete_variable) : Permet de supprimer une variable.
482483
- **genericType(GENERIC, #[Object]#)** : Modification d'une commande info (event) ou action (execCmd) par Type Générique, dans un objet. Par exemple, éteindre toutes les lumières dans le Salon.
@@ -488,7 +489,7 @@ En plus des commandes domotiques, vous avez accès aux actions suivantes :
488489
- Désactiver : Désactive le scénario. Il ne se lance plus quelque soit les déclencheurs.
489490
- Remise à zéro des SI : Permet de remettre à zéro le statut des **SI**. Ce statut est utilisé pour la non répétition des actions d’un **SI**, si l’évaluation de la condition donne le même résultat que la précédente évaluation.
490491
- **Stop** (stop) : Arrête le scénario.
491-
- **Attendre** (wait) : Attend jusqu’à ce que la condition soit valide (maximum 2h), le timeout est en seconde(s).
492+
- **Attendre** (wait) : Attend jusqu’à ce que la condition soit valide, le timeout est en seconde(s). *(durée maximale: 1 heure)*
492493
- **Aller au design** (gotodesign) : Change le design affiché sur tous les navigateurs par le design demandé.
493494
- **Ajouter un log** (log) : Permet de rajouter un message dans les logs.
494495
- **Créer un message** (message) : Permet d’ajouter un message dans le centre de messages.

docs/fr_FR/widgets.md

Lines changed: 168 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -1,104 +1,118 @@
11
# Widgets
22

3-
Un widget est la représentation graphique d'une commande. Chaque widget est spécifique au type et au sous-type de la commande sur laquelle il doit être appliqué ainsi qu'à la version à partir de laquelle on accède à Jeedom *(desktop ou mobile)*.
3+
Un widget est la représentation graphique d'une commande sur le dashboard ou en version mobile. Le Core Jeedom attribue automatiquement un widget selon le type *(Info ou Action)* et le sous-type *(Binaire, Numérique, Autre, Curseur, etc.)* de la commande. Il est possible d'en sélectionner un autre parmi ceux disponibles via la configuration avancée de la commande, onglet "Affichage" → "**Widget**".
44

55
## Widgets par défaut
66

7-
Avant de nous intéresser à la personnalisation des widgets, découvrons les possibilités offertes par certains widgets présents par défaut dans le Core Jeedom.
7+
Voici les widgets intégrés au Core Jeedom, leurs usages et leurs paramètres de personnalisation.
8+
9+
### Commandes
10+
11+
La plupart des widgets exposent des **paramètres optionnels** permettant d'ajuster leur rendu sans créer de widget personnalisé : couleur, échelle, comportement, etc. Ils se configurent dans la configuration avancée de la commande, onglet "Affichage" → section "**Paramètres optionnels widget**", sous forme de paires nom/valeur. Les paramètres disponibles varient selon le widget sélectionné et sont listés ci-dessous.
12+
13+
Le paramètre **`time`** (`duration` | `date`) est commun à tous les widgets *(sauf HygroThermographe)* et affiche respectivement la durée écoulée ou la date du dernier changement de valeur.
14+
15+
#### Info / Binaire
16+
17+
| Widget | Description | Paramètres optionnels |
18+
|--------|-------------|----------------------|
19+
| Shutter | Représentation visuelle d'un volet avec position en % | `color` |
20+
| Alert | Coche verte (ON) / alerte rouge (OFF) | |
21+
| Door | Porte fermée verte (ON) / porte ouverte rouge (OFF) | |
22+
| Flood | Goutte d'eau barrée verte (ON) / goutte d'eau bleue (OFF) | |
23+
| Heat | Flamme rouge (ON) / croix (OFF) | |
24+
| Icon | Coche verte (ON) / croix rouge (OFF) | |
25+
| Light | Ampoule allumée jaune (ON) / ampoule éteinte (OFF) | |
26+
| Line | Coche verte (ON) / croix rouge (OFF), affichage inline avec le nom | |
27+
| Lock | Cadenas fermé (ON) / cadenas ouvert rouge (OFF) | |
28+
| Presence | Coche verte (ON) / icône mouvement rouge (OFF) | |
29+
| Prise | Icône prise (ON) / croix (OFF) | |
30+
| Window | Fenêtre fermée verte (ON) / fenêtre ouverte rouge (OFF) | |
31+
32+
#### Info / Numérique
33+
34+
| Widget | Description | Paramètres optionnels |
35+
|--------|-------------|----------------------|
36+
| Badge | Valeur affichée dans un badge coloré | `color`, `fontcolor` |
37+
| Compass | Boussole indiquant une direction en degrés | `needle_color`, `ns_color`, `oe_color`, `scale` |
38+
| Gauge | Jauge en arc de cercle | `color` |
39+
| Horizontal | Barre de progression horizontale | `color` |
40+
| HygroThermographe | Affichage combiné température et humidité *(widget multi-commandes, sans `time`)* | `scale` |
41+
| Light | Icône d'ampoule (allumée/éteinte selon la valeur) avec valeur et unité | |
42+
| Line | Nom, valeur et unité affichés sur une seule ligne (format compact) | |
43+
| Rain | Niveau d'eau ou de précipitations | `color`, `scale`, `showRange`, `animate` |
44+
| Shutter | Volet avec curseur de position en % | `color`, `invert` |
45+
| Tile | Nom affiché en titre au-dessus de la valeur et de l'unité | |
46+
| Vertical | Barre de progression verticale | `color` |
47+
| HeatPiloteWire | Fil pilote 4 états : confort, hors-gel, éco, arrêt | |
48+
| HeatPiloteWireQubino | Fil pilote Qubino : 6 paliers de confort/éco/hors-gel/arrêt | |
49+
50+
#### Info / Autre
51+
52+
| Widget | Description | Paramètres optionnels |
53+
|--------|-------------|----------------------|
54+
| Badge | Valeur texte dans un badge coloré | `color`, `fontcolor` |
55+
| ButtonImage | Bouton ouvrant en modal l'image dont l'URL est la valeur de la commande | |
56+
| Color | Affiche la couleur correspondant à un code hexadécimal | `showValue` |
57+
| Line | Nom et valeur texte affichés sur une seule ligne (format compact) | |
58+
| Multiline | Valeur texte sur plusieurs lignes avec défilement | `maxHeight`, `minHeight`, `backgroundColor` |
59+
| Tile | Nom affiché en titre au-dessus de la valeur texte | |
60+
61+
#### Action / Couleur
62+
63+
| Widget | Description | Paramètres optionnels |
64+
|--------|-------------|----------------------|
65+
| Default | Sélecteur de couleur complet (roue chromatique + valeur hex) | |
66+
| Picker | Sélecteur de couleur simplifié | |
67+
68+
#### Action / Défaut
69+
70+
| Widget | Description | Paramètres optionnels |
71+
|--------|-------------|----------------------|
72+
| Alert | Icône clochette reflétant l'état de la commande liée (rouge = actif, verte barrée = inactif) | |
73+
| BinaryDefault | Icône reflétant l'état de la commande liée (coche verte = actif, croix rouge = inactif) | |
74+
| BinarySwitch | Interrupteur à bascule ON/OFF | `color`, `color_switch` |
75+
| BtnAlert | Bouton avec icône clochette reflétant l'état de la commande liée | |
76+
| Button | Bouton simple d'exécution | |
77+
| Circle | Cercle plein (ON) / cercle vide (OFF) | |
78+
| Fan | Ventilateur (ON) / croix (OFF) | |
79+
| Garage | Garage fermé vert (ON) / garage ouvert rouge (OFF) | |
80+
| Light | Ampoule allumée jaune (ON) / ampoule éteinte (OFF) | |
81+
| Lock | Cadenas fermé (ON) / cadenas ouvert orange (OFF) | |
82+
| Prise | Icône prise (ON) / croix (OFF) | |
83+
| Sprinkle | Arrosage bleu (ON) / croix (OFF) | |
84+
| Toggle | Interrupteur activé jaune (ON) / désactivé (OFF) | |
85+
| ToggleLine | Interrupteur activé jaune (ON) / désactivé (OFF), affichage inline | |
86+
87+
#### Action / Curseur
88+
89+
| Widget | Description | Paramètres optionnels |
90+
|--------|-------------|----------------------|
91+
| Button | Curseur avec boutons + et − pour ajustement précis | `step`, `width` |
92+
| Shutter | Curseur spécialisé pour la position d'un volet | `color`, `step`, `invert` |
93+
| Slider | Curseur horizontal | `color`, `step` |
94+
| SliderVertical | Curseur vertical | `color`, `step` |
95+
| Value | Champ de saisie numérique direct | `color`, `step`, `noslider`, `width` |
96+
| Light | Ampoule allumée jaune (ON) / ampoule éteinte (OFF) | |
97+
98+
#### Action / Liste
99+
100+
| Widget | Description | Paramètres optionnels |
101+
|--------|-------------|----------------------|
102+
| Select | Liste déroulante de valeurs prédéfinies | |
103+
104+
#### Action / Message
105+
106+
| Widget | Description | Paramètres optionnels |
107+
|--------|-------------|----------------------|
108+
| Input | Formulaire d'envoi d'un message avec titre et corps | `title`, `title_placeholder`, `title_possibility_list`, `title_disable`, `message_placeholder`, `message`, `message_disable` |
8109

9110
### Équipements
10111

11-
Les équipements (ou tuiles) possèdent certains paramètres de configuration accessibles via la configuration avancée de l'équipement, onglet "Affichage" → "**Paramètres optionnels sur la tuile**".
12-
13-
##### Paramètre(s) optionnel(s)
112+
Les équipements (ou tuiles) possèdent certains paramètres de configuration accessibles via la configuration avancée de l'équipement, onglet "Affichage" → "**Paramètres optionnels sur la tuile**":
14113

15114
- **dashboard_class/mobile_class** : permet d'ajouter une class à l'équipement. Par exemple `col2` pour les équipements en version mobile va permettre de doubler la largeur du widget.
16115

17-
### HygroThermographe
18-
19-
Ce widget est un peu particulier car c'est un widget multi-commandes, c'est à dire qu'il assemble la valeur de plusieurs commandes. Ici il prend les commandes de type température et humidité. Pour le configurer il faut affecter le widget aux commandes température et humidité de votre équipement.
20-
21-
![Widget HygroThermographe](./images/widgets3.png)
22-
23-
##### Paramètre(s) optionnel(s)
24-
25-
- **scale** *(échelle)* : Permet de changer la taille du widget, en renseignant le paramètre **scale** à `0.5`, le widget sera 2 fois plus petit.
26-
27-
>**IMPORTANT**
28-
>Il faut ABSOLUMENT que les types génériques soient renseignés; `Température` sur la commande de température et `Humidité` sur la commande humidité (cela se configure dans la configuration avancée de la commande, onglet configuration).
29-
30-
>**NOTE**
31-
> Attention sur un design il ne faut surtout pas mettre une commande seule avec ce widget cela ne marchera pas vu que c'est un widget utilisant la valeur de plusieurs commandes, il faut absolument mettre le widget complet
32-
33-
### Multiline
34-
35-
Ce widget permet d'afficher le contenu d'une commande info/autre sur plusieurs lignes.
36-
37-
##### Paramètre(s) optionnel(s)
38-
39-
- **maxHeight** *(hauteur maxi)* : Permet de définir la hauteur maximale du widget (un ascenseur *(scrollbar)* apparaitra sur le coté si le texte dépasse).
40-
41-
### Slider Button
42-
43-
Widget pour commande action/curseur dôté d'un bouton "**+**" et d'un bouton "**-**" permettant d'agir avec précision sur une valeur.
44-
45-
##### Paramètre(s) optionnel(s)
46-
47-
- **step** *(pas)* : Permet de régler le pas de changement de valeur *(0.5 par défaut)*.
48-
49-
### Rain
50-
51-
Widget permettant l'affichage de niveaux d'eau.
52-
53-
![Widget Rain](./images/widgets4.png)
54-
55-
##### Paramètre(s) optionnel(s)
56-
57-
- **scale** *(échelle)* : Permet de changer la taille du widget, en renseignant le paramètre **scale** à `0.5`, le widget sera 2 fois plus petit.
58-
- **showRange** : Mettre à `1` pour afficher les valeurs mini et maxi de la commande.
59-
- **animate** : Désactive l'animation du widget en ayant `0` pour valeur.
60-
61-
### Toggle d'icône ON/OFF
62-
63-
Concernant les widgets pour interrupteurs *(on/off, allumer/éteindre, ouvrir/fermer, etc...)*, il peut-être considéré comme plus agréable visuellement de n'afficher qu'une icône reflétant l'état de l'appareil à contrôler.
64-
65-
Cette possibilité est utilisable aussi bien avec les widgets par défaut qu'avec les widgets personnalisés.
66-
67-
Pour se faire, il est nécessaire de prendre en compte 2 pré-requis :
68-
69-
- Les **2 commandes action/défaut** doivent être liées à une commande **info/binaire** qui se chargera de mémoriser l'état actuel de l'appareil.
70-
71-
>**Exemple**
72-
>![Widget ToggleLink](./images/widgets5.png)
73-
74-
>**Conseil**
75-
>Décocher la case *"Afficher"* de la commande info/binaire qui n'aura pas besoin d'être affichée.
76-
77-
- Afin que le Core Jeedom soit en mesure d'identifier quelle commande correspond à quelle action, il est indispensable de respecter le nommage suivant pour les **2 commandes action/défaut** :
78-
```
79-
'on':'on',
80-
'off':'off',
81-
'monter':'on',
82-
'descendre':'off',
83-
'ouvrir':'on',
84-
'ouvrirStop':'on',
85-
'ouvert':'on',
86-
'fermer':'off',
87-
'activer':'on',
88-
'desactiver':'off',
89-
'désactiver':'off',
90-
'lock':'on',
91-
'unlock':'off',
92-
'marche':'on',
93-
'arret':'off',
94-
'arrêt':'off',
95-
'stop':'off',
96-
'go':'on'
97-
```
98-
99-
>**Astuce**
100-
>Tant que le nom normalisé reste lisible il est possible d'adapter le nommage, par exemple *ouvrir_volet* ou *volet_fermer*, *marche_2* et *arret_2*, etc.
101-
102116
## Widgets personnalisés
103117

104118
La page Widgets, accessible par le menu **Outils → Widgets**, vous permet d'ajouter des widgets personnalisés en complément de ceux disponibles par défaut dans Jeedom.
@@ -124,7 +138,7 @@ Dans cette partie vous retrouverez l'ensemble des widgets que vous avez créés
124138

125139
![Mes Widgets](./images/widgets1.png)
126140

127-
> **Astuce**
141+
> **Astuce**
128142
> Vous pouvez ouvrir un widget en faisant :
129143
> - `Clic` sur l'un d'entre eux.
130144
> - `Ctrl+Clic` ou `Clic+Centre` pour l'ouvrir dans un nouvel onglet du navigateur.
@@ -166,20 +180,35 @@ Il existe deux types de template :
166180

167181
#### Remplacement
168182

169-
C'est ce que l'on appelle un template simple, ici vous avez juste à dire que le "**ON**" correspond à telle icône/image *(à l'aide du bouton choisir)*, le "**OFF**" à telle autre icône/image, etc...
183+
C'est ce que l'on appelle un template simple, ici vous avez juste à dire que le "**ON**" correspond à telle icône/image *(à l'aide du bouton choisir)*, le "**OFF**" à telle autre icône/image, etc...
184+
185+
Les widgets Core de type remplacement disponibles sont :
186+
187+
| Widget | Types/Sous-types |
188+
|--------|-----------------|
189+
| Template Icon | Info/Binaire, Action/Défaut, Action/Curseur |
190+
| Template Iconline | Info/Binaire, Action/Défaut |
191+
| Template Img | Info/Binaire, Action/Défaut, Action/Curseur |
170192

171-
La case **Time widget**, si disponible, permet d'afficher la durée depuis le dernier changement d'état sous le widget.
193+
La case **Time widget**, si disponible, est équivalente au paramètre `time: duration` (voir [Commandes](#commandes)).
172194

173195
Pour les template utilisant des images, il vous est proposé de paramétrer la largeur du widget en pixel en fonction du support (**Largeur desktop** & **Largeur mobile**). Des images différentes peuvent également être sélectionnées selon le thème actif de Jeedom *(light ou dark)*.
174196

175-
>**Astuce**
176-
>Pour les utilisateurs avancés il est possible de mettre des tags dans les valeurs de remplacement et de spécifier leur valeur dans la configuration avancée de la commande.
197+
>**Astuce**
198+
>Pour les utilisateurs avancés il est possible de mettre des tags dans les valeurs de remplacement et de spécifier leur valeur dans la configuration avancée de la commande.
177199
>Si, par exemple, dans **Largeur desktop** vous mettez comme valeur `#largeur_desktop#` (**attention à bien mettre les** `#` **autour**) puis dans la configuration avancée d'une commande, onglet affichage → "**Paramètres optionnels widget**" vous ajoutez le paramètre `largeur_desktop` (**sans les** `#`) et lui donnez la valeur "**90**", ce widget personnalisé sur cette commande aura une largeur de 90 pixels. Cela permet d'adapter la taille du widget à chaque commande sans avoir à faire un widget spécifique à chaque fois.
178200
179201
#### Test
180202

181203
C'est ce que l'on appelle les templates multistates *(plusieurs états)*. Au lieu de mettre une image pour le "**ON** et/ou pour le "**OFF** comme dans le cas précèdent, vous allez affecter une icône en fonction de la validation d'une condition *(test)*. Si celle-ci est vraie alors le widget affichera l'icône/l'image en question.
182204

205+
Les widgets Core de type multistate disponibles sont :
206+
207+
| Widget | Types/Sous-types |
208+
|--------|-----------------|
209+
| Template Multistate | Info/Numérique, Info/Autre |
210+
| Template Multistateline | Info/Autre |
211+
183212
Comme précédemment, différentes images peuvent être sélectionnées en fonction du thème actif sur Jeedom et la case **Time widget** permet d'afficher la durée depuis le dernier changement d'état.
184213

185214
Les tests sont sous la forme : `#value# == 1`, `#value#` sera automatiquement remplacé par la valeur actuelle de la commande. Vous pouvez aussi faire par exemple :
@@ -188,13 +217,13 @@ Les tests sont sous la forme : `#value# == 1`, `#value#` sera automatiquement re
188217
- `#value# >= 1 && #value# <= 5`
189218
- `#value# == 'toto'`
190219

191-
>**Note**
220+
>**Note**
192221
>Il est indispensable de faire apparaitre les apostrophes (**'**) autour du texte à comparer si la valeur est un texte *(info/autre)*.
193222
194-
>**Note**
223+
>**Note**
195224
>Pour les utilisateurs avancés, il est possible d'utiliser aussi des fonctions javascript telle que `#value#.match("^plop")`, ici on teste si le texte commence par `plop`.
196225
197-
>**Note**
226+
>**Note**
198227
>Il est possible d'afficher la valeur de la commande dans le widget en précisant `#value#` dans le code HTML du test. Pour afficher l'unité ajoutez `#unite#`.
199228
200229
## Widget code
@@ -264,3 +293,44 @@ jeedom.cmd.refreshValue([{ cmd_id: '#id#', value: '#value#', display_value: '#st
264293
### Exemples
265294

266295
Vous trouverez [ici](https://github.com/Jeedom/core/tree/master/core/template) des exemples de widgets (dans les dossiers dashboard et mobile)
296+
297+
## Toggle d'icône ON/OFF
298+
299+
Concernant les widgets pour interrupteurs *(on/off, allumer/éteindre, ouvrir/fermer, etc...)*, il peut-être considéré comme plus agréable visuellement de n'afficher qu'une icône reflétant l'état de l'appareil à contrôler.
300+
301+
Cette possibilité est utilisable aussi bien avec les widgets par défaut qu'avec les widgets personnalisés.
302+
303+
Pour se faire, il est nécessaire de prendre en compte 2 pré-requis :
304+
305+
- Les **2 commandes action/défaut** doivent être liées à une commande **info/binaire** qui se chargera de mémoriser l'état actuel de l'appareil.
306+
307+
>**Exemple**
308+
>![Widget ToggleLink](./images/widgets5.png)
309+
310+
>**Conseil**
311+
>Décocher la case *"Afficher"* de la commande info/binaire qui n'aura pas besoin d'être affichée.
312+
313+
- Afin que le Core Jeedom soit en mesure d'identifier quelle commande correspond à quelle action, il est indispensable de respecter le nommage suivant pour les **2 commandes action/défaut** :
314+
```
315+
'on':'on',
316+
'off':'off',
317+
'monter':'on',
318+
'descendre':'off',
319+
'ouvrir':'on',
320+
'ouvrirStop':'on',
321+
'ouvert':'on',
322+
'fermer':'off',
323+
'activer':'on',
324+
'desactiver':'off',
325+
'désactiver':'off',
326+
'lock':'on',
327+
'unlock':'off',
328+
'marche':'on',
329+
'arret':'off',
330+
'arrêt':'off',
331+
'stop':'off',
332+
'go':'on'
333+
```
334+
335+
>**Astuce**
336+
>Tant que le nom normalisé reste lisible il est possible d'adapter le nommage, par exemple *ouvrir_volet* ou *volet_fermer*, *marche_2* et *arret_2*, etc.

0 commit comments

Comments
 (0)