Pourquoi ?

Ce guide vous permettra de visualiser les horaires de vos transports en commun via une unique interface et seront actualisés automatiquement. Aussi, vous pourrez les visualiser à coté de votre plan 2D de chez vous.

Comment ?

Création du Virtuel

Nativement, la commande donnant l’heure du prochain passage pour le mode de transport que vous utilisez apparaîtra sous une forme numérique (1200 pour 12h00 par exemple). Nous allons donc créer un virtuel qui affichera cette commande sous un format horaire.

Accédez au plugin Virtuel et créez-en un en lui donnant le nom de votre choix (« Bus L4 : Molière – Horaires » par exemple).

Activez-le et rendez-le visible.

Accédez ensuite à l’onglet « Commandes » et ajoutez une info virtuelle. Ajoutez lui un nom, un sous-type « Autre », décochez l’historisation si vous n’en avez pas besoin et dans la colonne « Valeur« , reproduisez le calcul sous cette forme :

formatTime(votrecommandededépart1heure)

Vous obtiendrez alors ceci :

puis sauvegardez.

Créez ensuite un second virtuel, identique au premier, sauf pour le nom du virtuel (une forme du type « Bus L4 : Molière – Horaires 2 » suffira) mais surtout pour le calcul qui deviendra :

formatTime(votrecommandededépart2heure)

Reproduisez la même procédure si vous souhaitez créez 2 autres virtuels pour le trajet du retour.

En l’état, vos virtuels sont prêts, mais il reste encore à les personnaliser avec un widget.

Création du widget

Accédez au plugin Widget puis cliquez sur « Ajouter un widget » puis remplissez les champs de cette façon :

• Nom du widget : Horloge (ou autre, comme vous voulez).
• Version : Dashboard.
• Type : Info.
• Sous-type : Autre.

puis cliquez sur « ajouter« .

Dans l’espace prévu en bas pour y jouter du code, faites un copier/coller de ceci :

<div style="min-width:90px;min-height:60px;text-align:center;" class="cmd #history# tooltips cmd-widget" data-type="info" data-subtype="string" data-cmd_id="#id#" title="Valeur du #valueDate#, collectée le #collectDate#">
    <div class='cmdName' style="font-weight: bold;font-size : 12px;"></div>
    <div style="position:relative;">
      <div style="position:absolute;
                  left: 5%;
                  opacity:0.2;
                  width:44%;
                  height:50%;
                  background: linear-gradient(to top, grey, #eee 18%, #eee);
                  border-top-left-radius: 4px;
          border-top-right-radius: 4px;
                  border-top: #ccc 1px solid;
                  "></div>
      <div style="position:absolute;
                  right: 5%;
                  opacity:0.2;
                  width:44%;
                  height:50%;
                  background: linear-gradient(to top, grey, #eee 18%, #eee);
                  border-top-left-radius: 4px;
          border-top-right-radius: 4px;
                  border-top: #ccc 1px solid;
                  "></div>
      <div style="position:absolute;
                  bottom: 0;
                  left: 5%;
                  opacity:0.2;
                  width:44%;
                  height:50%;
                  background: linear-gradient(to top, #ccc, #eee 25%, white);
                  border-bottom-left-radius: 4px;
          border-bottom-right-radius: 4px;
                  border-top: #fff 1px solid;
                  "></div>
      <div style="position:absolute;
                  right: 5%;
                  bottom: 0;
                  opacity:0.2;
                  width:44%;
                  height:50%;
                  background: linear-gradient(to top, #ccc, #eee 25%, white);
                  border-bottom-left-radius: 4px;
          border-bottom-right-radius: 4px;
                  border-top: #fff 1px solid;
                  "></div>
        <div style="font-size: 2em;
                  font-weight: bold;
                  color: #999999;">#state#</div>
    </div>
</div>

Puis sauvegardez.

Le widget est prêt. Il ne reste qu’à tout importer dans le design.

Les commandes dans votre design

Accédez à votre design.

et créez-en un si c’est votre premier design.

Passez ensuite en mode édition via un clic droit.

et ajoutez votre premier virtuel via l’ajout d’une commande.

Toujours en mode édition, accédez à la configuration avancée de votre virtuel puis dans l’onglet « Affichage », changez votre widget au profit de votre horloge, puis sauvegardez.

Votre horloge est maintenant importée dans votre design ! Vous pouvez aussi, toujours en mode édition, importer une nouvelle commande : celle de la direction de votre mode de transport (choisissez le « Départ 1 direction » pour commencer).

Faites ensuite un clic droit sur la commande puis « Configuration avancée« . Dans l’onglet « Affichage« , décochez l’affichage du nom dans la colonne « Design » pour n’avoir que la direction et plus le « Départ 1 direction », puis sauvegardez.

Pour aller plus loin

Ajouter des icônes

Si vous souhaitez ajouter des icônes comme dans l’image en tête d’articles, vous pouvez le faire via le mode édition de votre design, puis en choisissant d’ajouter une image/caméra.

Toujours en mode édition, faites un clic droit sur l’image puis « Paramètres d’affichage« .

Sélectionnez ensuite votre image et sauvegardez.

Enfin, redimensionnez-la et placez-la où vous le souhaitez.

D’autres designs

Ce design étant terminé, découvrez-en d’autres directement depuis cette adresse.

L’article Créer un design Jeedom avec vos transports en commun est apparu en premier sur Jeedomiser.fr.

Si vous rêvez de piloter vos équipements via une seule interface, en temps réel : ce tuto est fait pour vous ! Un design permet de concevoir votre interface dans Jeedom comme bon vous semble. Vous pourrez également l’utiliser sur une tablette et l’accrocher contre un mur pour tout observer, en un coup d’œil.

Comment ?

Il est nécessaire de passer par quelques étapes pour en arriver à ce résultat. Prévoyez donc pas mal de temps devant vous. Aussi, le tuto aborde quelques manipulations à faire hors de Jeedom pour créer ce design (via Photoshop par exemple). Evidemment, vous pouvez utiliser un autre éditeur d’images si vous préférez

Création du design

Accédez dans un premier temps à la partie « Design » de votre Jeedom et créez votre premier design en lui donnant le nom de votre choix.

Faites ensuite un clic droit pour passer en mode édition et accédez à la configuration du nouveau design de votre Jeedom.

Je vous suggère d’y définir une taille égale à celle de l’écran que vous utiliserez (écran de PC, tablette, etc…), d’y uploader une image qui servira de fond pour votre design (attention de ce fait à la dimension de l’image), puis sauvegardez. Je vous conseil d’ailleurs de choisir une image sobre pour ne pas déranger la lecture des informations de vos équipements.

Me concernant, le design est en 1920 x 1030 (il se peut que vous ayez à mettre un peu moins pour ne pas avoir les barres de déplacement en bas et à droite)

En l’état, votre design est créé mais est vide. Nous allons donc commencer à le remplir

Création et import du plan de chez soi

Pour respecter au mieux les proportions de vos pièces, je vous suggère simplement de scanner le plan de votre maison / appartement. Ensuite, ouvrez le plan avec Photoshop et créez un nouveau calque.

L’intérêt sera de créer sur ce calque de simples rectangles par dessus le plan que vous aurez scanné. Créez aussi un second calque sur lequel mettre un fond blanc et déplacez le en bas de la liste de vos calques pour éviter qu’il ne se mette devant votre plan.

Ne dessinez cependant pas les objets que vous prévoyez de rendre amovibles (portes, fenêtres, etc…) ! Si vous vous sentez d’humeur créative, vous pouvez aussi dessiner certains objets de chez vous (table, chaise, etc…). Je vous conseil cependant de créer un nouveau calque pour chacun d’entre eux.

Voici comment vous pouvez organiser vos calques par exemple :

Enfin, n’hésitez pas à appliquer des effets visuels sur vos calques pour leur donner un style via un clic droit sur votre calque puis « Options de fusion« . Pour ma part, j’utilise l’effet « Incrustation de motif » sur les murs du plan.

Au final, vous devriez avoir quelque chose ressemblant à ceci (attention à bien désactiver l’affichage du calque de votre fond avant d’exporter votre image pour qu’il soit transparent dans votre Jeedom).

Retournez ensuite dans votre design Jeedom, passez en mode édition et ajoutez une image/caméra.

Faites ensuite un clic droit sur la nouvelle image et accédez aux paramètres d’affichage.

Cliquez ensuite sur « Envoyez » et choisissez l’image que vous avez créé via Photoshop puis sauvegardez.

Redimensionnez ensuite votre image de sorte à respecter les proportions et sauvegardez votre design.

Création et import des widgets pour équipements amovibles

Avant toute chose, sachez que cette partie nécessite que vous connaissiez le principe de Widget / Virtuel. Si ce n’est donc pas déjà fait, je vous invite à consulter le tuto dédié aux Widgets mais également celui dédié aux Virtuels.

Depuis Photoshop, l’idée sera de créer une image pour chaque état de vos équipements. Pour l’exemple je prendrai un capteur d’ouverture / fermeture de porte. La porte aura donc forcément deux états : ouverte ou fermée.

Dans Photoshop, créez simplement une image avec un rectangle horizontal vert pour représenter une porte fermée et une seconde image avec un rectangle vertical rouge pour représenter une porte ouverte (ou inversement selon la position de votre porte).

Chose importante, vos deux images doivent impérativement avoir les même dimensions. Dans le cas contraire, vous aurez un message d’erreur à la création du widget dans Jeedom.

Voici à quoi ressemble ma porte d’entrée par exemple :

Fermée :

Ouverte :

Depuis Jeedom, accédez ensuite au plugin widget.

Passez en mode de création facile de sorte à choisir un widget « Simple état« .

et choisissez les images que vous venez de créer avec Photoshop.

Donnez enfin un nom à votre widget et sauvegardez.

Les widgets étant créés, nous allons maintenant les associer aux commandes d’ouverture. Aussi, nous allons masquer les éléments que nous n’avons pas besoin de voir dans le design. Dans cet exemple, je vais prendre les capteurs d’ouverture / fermeture Xiaomi (mais vous pouvez adapter la méthode qui va suivre si vous utilisez d’autres capteurs).

Retournez donc dans votre design, faites un clic droit pour passer en mode édition et choisissez d’ajouter une commande

Recherchez ensuite votre commande d’ouverture et validez.

Toujours en mode édition, faites un clic droit sur votre commande et cliquez sur « Configuration avancée« .

Accédez ensuite à l’onglet « Affichage« , choisissez votre widget, masquez le « Nom » et « Nom + icône » pour ne gardez que la commande, puis sauvegardez.

Vous voila maintenant avec votre commande personnalisée !

Il ne vous reste plus qu’à la déplacer dans les ouvertures que vous avez laissé dans votre plan créé précédemment via le mode édition. Pensez bien à sauvegardez votre design après avoir terminé vos modifications !

Vous pouvez ensuite appliquer cette même méthode si vous utilisez par exemple un détecteur de mouvement : créer deux images pour les deux états (mouvement détecté ou non), importer la commande de détection de mouvement et en changer le widget.

Import des widgets de température et humidité

Dans cet exemple je continuerai avec les capteurs Xiaomi, mais vous pourrez toujours adapter cette partie selon vos capteurs. Dans votre design, passez en mode édition et ajoutez une commande en choisissant cette fois la commande de température par exemple.

Accédez à la configuration avancée de votre commande, onglet « affichage« , puis choisissez le widget « line (core)« . Masquez ensuite le « nom + icône » et sauvegardez vos modifications.

Il se peut que vous ayez également à choisir une icône. Pour ce faire, accédez à l’onglet « Informations« , cliquez sur le bouton « Icône » puis choisissez celle de votre choix avant de sauvegarder.

Vous aurez alors un rendu comme celui-ci, à déplacer également dans la pièce où se trouve physiquement votre capteur.

Pour aller plus loin

Vous pouvez en effet ajouter d’autres éléments à votre design : une liste de courses, la météo, les horaires de vos transports en commun, etc… Voici quelques astuces pour approfondir le sujet (cette partie sera mise à jour régulièrement au fur et à mesure des nouveaux tutos).

Liste de courses

Affichez directement votre liste de courses dans votre design et pilotez-la depuis celui-ci, ou même directement via votre téléphone via les interactions. Un tuto dédié à ce sujet à été créé. Vous le trouverez directement à cette adresse.

D’autres designs

D’autres designs sont disponibles, n’hésitez pas à les consulter directement à cette adresse.

L’article Créez une vue 2D de chez soi avec un design de Jeedom est apparu en premier sur Jeedomiser.fr.

Vous pourrez aussi intégrer votre liste de courses à coté d’un plan design 2D de chez vous !

Pourquoi ?

Vous souhaitez mettre un terme au crayon / papier accroché au frigo pour gérer votre liste de courses ? Alors suivez le tuto

Comment ?

Accédez d’abord au menu Design.

Passez ensuite en mode édition via un clic droit :

et créez votre nouveau design :

Donnez lui un nom, et validez.

Configurez votre design de sorte à en réduire sa taille : l’idée sera de faire en sorte que votre liste soit suffisamment étroite horizontalement pour que la liste s’intègre parfaitement dans l’écran du téléphone, sans avoir à scroller de gauche à droite.

Sur la hauteur, inutile de trop la réduire pour que vous puissiez scroller de haut en bas si nécessaire

Pour ma part, j’ai défini une taille de 350 x 500 (L x H)

Utilisez ensuite le mode édition via un clic droit pour ajouter un équipement.

Parcourez ensuite vos objets de sorte à trouver votre liste de courses.

Enfin, depuis votre téléphone, accédez à l’URL de votre nouveau design, puis créez un raccourci sur l’accueil de votre téléphone. Ainsi, votre liste de courses sera accessible via un simple appuie, au même titre qu’une application classique, vous permettant ainsi de piloter votre liste de courses facilement avec Jeedom !

Pour aller plus loin

Les interactions

Vous pouvez aussi ajouter des items ou vider votre liste de courses directement via des interactions. Ainsi, vous pourrez par exemple passer par Messenger pour effectuer ces actions. Cette partie à déjà été abordée sur le guide du plugin et est disponible à cette adresse.

D’autres designs

Découvrez également les autres design disponibles pour personnaliser votre Jeedom et piloter vos équipements.

L’article Piloter sa liste de courses depuis son mobile avec Jeedom est apparu en premier sur Jeedomiser.fr.