Jeedom integré à un site web

Interfaces Portail web smartphone & tablettes
17

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.

18

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>
19

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:

20

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
image1318×833 58.6 KB

image
image1298×388 57.1 KB

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

21

houa au top !

22

Tu as toutes les réponses pour afficher les messages dans ce post :

Je te remets le lien car tu n’as pas lu le sujet à priori :

1 « J'aime »
23

Si si j’ai lu, mais j’ai pas eu le temps de m’y pencher.

24

Bonjour!!

Un grand merci à vous, j’ai réussi à integrer les notif comme je le voulais.

Effectivement on peut faire plein de choses avec Jeedom et après pas mal de boulot j’arrive à quelque chose que je trouve cool.

Il y a encore beaucoup à faire:

  • Changer la couleur des consos en fonction de la valeur (bleu rouge et vert)
  • Faire quelque chose de mieux intégré pour la vision du thermostat
  • Finir les deux icônes pour les volets roulant
  • Faire le theme en mode DARK
  • Mettre en place un indicateur sur le menu de gauche pour savoir où on se trouve

Mais voilà ce que ça donne:

Capture d’écran 2020-08-09 à 20.32.32
Capture d’écran 2020-08-09 à 20.32.321514×938 231 KB

4 « J'aime »
25

Hello à tous, pour mon widget lumière, je souhaite faire un dégrader de couleur du fond (passer du blanc uni comme actuellement à un dégradé) comme cela:

image

Je pense qu’il y a moyen de le faire en attaquant l’identifiant du composant mais je ne sais pas comment faire pour appliquer ce nouveau CSS à cette tuile.

Benjamin

26

Après moultes recherches je ne trouve rien de particulier. Quelqu’un a une idée?

1 « J'aime »
27

via paramètre avancé css
ou

28

Salut merci pour ta réponse.

Les paramètres avancés css: ok mais lesquels; ceux de la tuiles du design ou ceux de l’équipement ?
La tuile du design n’a rien à voir avec l’équipement je ne sais pas comment tester un équipement via du code ni même comment intégrer cela à une tuile en html/css.

Je vais voir sur le lien que tu m’a donné ce qu’il en est, merci à toi.

29

via paramètre général
modif des style css jeedom (tu peux spécifier pour design)
il existe un tuto

via paramètre équipement (aucune spécificité donc se sera dash et design)
le lien

tu peux aussi créé un html sur ton design reprenant les class/id ou --variable css

30

link953, franchement beau boulot ! J’avais commencé à travailler sur un design de ce type il y a un an, mais faute de compétences et de temps, j’ai mis ça de côté. J’ai fait un peu de web lors d’expériences pro précédentes, et je voulais absolument me faire une interface épurée, design et super fonctionnelle. Comment as-tu fait pour mettre des boutons « toggle » pour piloter par exemple tes lumières ? J’avais fait comme toi, un menu à la verticale sur le côté gauche. Tu m’as donné envie de m’y remettre. Par contre je suis encore sur la V3. J’ai peur de passer sur la V4… vas falloir franchir le pas je pense si je ne veux pas avoir à refaire tout mon design une fois la migration sur la V4. Je vais donc commencer par le commencement. Super boulot en tout cas !

31

@link953, tu partagerais le code de ton menu, des toggles et de ton thermostat ?

32

Salut. Merci a toi

Je sais pas si entre la v3 et v4 tu auras des soucis de migration mais perso j’en ai pas eu.

Oui je peux te filer le code des que j’ai un moment je m’en occupe.

33

Bonjour Link953,

Très beau travail :). Je suis également intéressé par le code si tu veux bien le partager. J’éssaye de faire quelques choses d’assez similaires en mode Dark.

Merci.

34

Salut !

J’ai zappé le topic, mais je vous transmet le code samedi :slight_smile:

35

Merci beaucoup :slight_smile:

36

link953, tu penses à nous :slight_smile: ?