Jeedom integré à un site web

Hello,

Je suis actuellement en train de monter une interface tactile pour Jeedom.

Je suis parti sur une tablette Lenovo M10 Plus au mur et un design jeedom.

Mais je me pose la question suivante: est ce que l’on peut construire un site web (hébergé sur mon NAS par exemple) et y intégrer jeedom.

De cette façon je peux avoir une icone pour mes notifications et un menu déroulant en cliquant dessus par exemple.
Ou un fond d’une tuile dynamique en fonction de la météo…

Et pourquoi pas avoir quelque chose comme cela:

Qu’en dites vous?

Benjamin

Salut,

Oui dans l’absolu tu peux intégrer Jeedom dans un site web perso. La seule contrainte sera de récupérer toutes les infos de ton Jeedom par des appels API.

A première vue tout ce que tu veux faire là peut être réalisé directement dans un design Jeedom.

iframe de jeedom dans une page web …

Ou de reconstruire jeedom par un accès direct à sa base de données

Un pluging dans ce sens serait vraiment intéressant :grin:

Eu non la on quitte le domaine du plugin c’est un dev perso
Après tu peux aussi t’en sortir avec des page de design et des iframe

Salut a tous et merci pour vos réponses.

Je pense que ça va demander un travail énorme et j’avoue ne pas être sur d’y arriver.

Pour le plugin je pense aussi que c’est mort. C’est dommage que nous n’ayons pas rien d’intégré dans jeedom pour avoir une interface rapidement. Jeedom est déjà très complet mais je trouve que qu’un petit quelque chose pour avoir un joli design pour tablette rapidement serait cool.

Perso je fais du dev web mais c’est plus un hobby qu’autre chose…

Je vois pas trop comment faire dans un design. Exemple: lors de la réception d’une notification, on pourrait mettre une pastille rouge contenant le nombre de message par dessus une icône. Et lors du clic afficher un petit menu avec les notifications en question.

C’est possible via un design ?

Pour les notifs et les mises à jour tu peux t’inspirer de ce sujet par exemple qui propose de les inclure dans un élément text/html, htmlDisplay ou un widget :

Je compte inclure le même principe dans le plugin Pimp my jeedom via la création d’un équipement dédié

Je vais regarder ça attentivement.

Le but étant d’avoir un dashboard sur la tablette qui me permette de me passer du site que je trouve pas très beau.

Je veux pas dénigrer le boulot de l’équipe jeedom. J’adore cette solution qui le rend bien des services. Mais si je veux afficher une interface sur la tablette. Elle faut qu’elle soit efficace, facile d’accès, complète et jolie ( bon ça c’est relatif) …

Salut,

Penses tu qu’il soit possible de changer le fond d’une tuile d’un design en fonction de la méteo? (pluie, neigne soleil…)

Y’a un code de @F$B33 qui traîne pour changer le fond d’écran d’un design en fonction de la météo, il doit suffire de l’adapter pour changer le fond d’une tuile.

Pour le challenge j’essayerai de regarder quand je trouverai 5 minutes …faut surtout que j’y pense en fait

Je vais m’y pencher ce week-end aussi.

C’est dommage qu’il n’existe rien de déjà fait, comme un front-end par exemple

@Salvialf
Il y a carrément un plugin fait par @Mips, je ne l’utilise pas mais c’est vachement plus simple que de chercher et adapter un script qui traine
image

Oui je sais mais dans l’idée ça me paraissait plus simple d’adapter un script qu’un plugin :wink:

Il cherche à changer le fond d’une tuile en fonction de la météo alors que le plugin change l’image de fond du design… A part si ça donne des idée à @Mips pour ajouter cette possibilité dans le plugin :yum: ?!

Je ne connais pas ce plugin. A voir si j’arrive à faire ce que je veux avec du coup.

Y a que moi qui ai pris ça pour du l’humour l’idée du plugin? (que j’ai bien aimé d’ailleurs)
Un plugin pour remplacer jeedom… donc il faut avoir jeedom pour le faire tourner? :upside_down_face:

Il y a plein d’éléments intégrés à jeedom, ca fait 3 messages que tu répètes qu’il n’y a rien…

Tout est possible via design, puisque tu as contrôle complet sur l’html/js
Tu parles de la réception de notification, mais ou? jeedom ne reçoit pas de notification, il les émet à la limite
Si c’est pour afficher le nombre de messages dans le centre de messages sur un design comme sur le dashboard, c’est possible et cela a été fait, il y a un sujet la-dessus.

Non pas un plugin pour remplacer Jeedom :rofl:, mais plutôt un plugin permettant de faire des design avec la possibilité d’agencer divers événement en « drag and drop » pré-codé et de construire un design sans aucune ligne de code :smiley:

Il y effectivement plein de choses dans jeedom. Mais sur mon design j’aimerais avoir un icone cliquable qui ferais apparaître un menu avec les notifications présentes dans le centre des notifs Jeedom.

Je me doute bien que tout soit possible via design mais je ne maîtrise pas assez le code pour ça. Je n’ai clairement pas les moyens de mes ambitions… :innocent:
Afficher le nombre de message me semble simple. J’ai un virtuel qui me permet de faire cela, j’ai même la notif en elle même.

Mais je ne sais pas coder le menu en lui même affichant la notif lors d’un clique sur l’icone.

tu ne te rends pas compte
si déjà tu n’y arrives pas avec jeedom qui t’offre des facilités tu y arriveras encore moin.

fait selon tes capacités
et demande
rapidement brut de brut

<style type="text/css" media="screen">
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro);
*{
  margin:0px;
  padding:0px;
}
html{
  background: #497dd0;
}
.wrapper {
  margin: 0px 0;
}
.toggle_radio{
  position: relative;
  background: rgba(255,255,255,.1);
  margin: 4px auto;
  overflow: hidden;
  padding: 0 !important;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px;
  position: relative;
  height: 26px;
  width: 212px;
}
.toggle_radio > * {
  float: left;
}
.toggle_radio input[type=radio]{
  display: none;
  /*position: fixed;*/
}
.toggle_radio label{
  font: 90%/1.618 "Source Sans Pro";
  color: rgba(255,255,255,.9);
  z-index: 0;
  display: block;
  width: 100px;
  height: 20px;
  margin: 3px 3px;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px;
  cursor: pointer;
  z-index: 1;
  /*background: rgba(0,0,0,.1);*/
  text-align: center;
  /*margin: 0 2px;*/
  /*background: blue;*/ /*make it blue*/
}
.toggle_option_slider{
  /*display: none;*/
  /*background: red;*/
  width: 100px;
  height: 20px;
  position: absolute;
  top: 3px;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px;
  -webkit-transition: all .4s ease;
  -moz-transition: all .4s ease;
  -o-transition: all .4s ease;
  -ms-transition: all .4s ease;
  transition: all .4s ease;
}

#first_toggle:checked ~ .toggle_option_slider{
  background: rgba(255,255,255,.3);
  left: 3px;
}
#second_toggle:checked ~ .toggle_option_slider{
  background: rgba(255,255,255,.3);
  left: 109px;
}
#firstB_toggle:checked ~ .toggle_option_slider{
  background: rgba(255,255,255,.3);
  left: 3px;
}
#secondB_toggle:checked ~ .toggle_option_slider{
  background: rgba(255,255,255,.3);
  left: 109px;
}
#firstC_toggle:checked ~ .toggle_option_slider{
  background: rgba(255,255,255,.3);
  left: 3px;
}
#secondC_toggle:checked ~ .toggle_option_slider{
  background: rgba(255,255,255,.3);
  left: 109px;
}
#firstD_toggle:checked ~ .toggle_option_slider{
  background: rgba(255,255,255,.3);
  left: 3px;
}
#secondD_toggle:checked ~ .toggle_option_slider{
  background: rgba(255,255,255,.3);
  left: 109px;
}
#firstE_toggle:checked ~ .toggle_option_slider{
  background: rgba(255,255,255,.3);
  left: 3px;
}
#secondE_toggle:checked ~ .toggle_option_slider{
  background: rgba(255,255,255,.3);
  left: 109px;
}

</style>

     <div class="wrapper">
  <div class="toggle_radio">
    <input type="radio" class="toggle_option" id="firstC_toggle" name="toggleC_option">
    <input type="radio" checked class="toggle_option" id="secondC_toggle" name="toggleC_option" onClick="jeedom.cmd.execute({id: '1104'});">
    <label for="firstC_toggle"><p>messages</p></label>
    <label for="secondC_toggle"><p>Programmé</p></label>
    <div class="toggle_option_slider">
    </div>
    <script>
      $('#firstC_toggle').on('click',function(){
    $('#md_modal').dialog({title: "Centre de Messages"});
    $('#md_modal').load('index.php?v=d&p=message&ajax=1').dialog('open');
  });
    </script>
  </div>
                                     
                                     

Hello,

Si justement je me rends bien compte que je n’arriverais pas a coder ce que j’ai en tête alors je ferais avec Jeedom.

Du coup le code c’est quoi :smiley:

tes message

j’analyse j’ai l’id « bt_messageModal »
je fouine dans les sources/core/php
mode recherche « ctrl+f » je colle l’id
image
image

et je reproduit avec ma propre id en personnalisant
si je clic sur message (html message,programme) j’ouvre le modale des messages