Ce Forum passera en lecture seule en janvier 2020
Image
Merci de vous rendre sur https://community.jeedom.com maintenant pour vos prochains postes ;)

[Présentation] F$B33

JEEDOM et vous! Venez vous présenter et préseter votre installation domotique JEEDOM
Avatar de l’utilisateur
Poumi
Actif
Messages : 660
Inscription : 21 mars 2019, 22:41

Re: [Présentation] F$B33

Message par Poumi » 01 juin 2019, 19:35

Antoinekl1 a écrit :
19 avr. 2019, 09:20
Bonjour à tous

Je me suis permis ces quelques modifications pour mon usage perso, alors je partage si ca peut intéresser qqun

Un CSS pour les fenêtres, vous pouvez ajouter d'autre div.icon_XXX et le copier à la racine de montheme

Attention, j'ai un peu modifié les styles pour mon usage, par rapport aux styles d'origines, il suffit de remettre les styles du html d'origine

fenetre.css

Code : Tout sélectionner

	div.bandeau {
		width: 100%;
		box-shadow: 0px 0px 3px 3px rgba(255,255,255,0.5);
	}
	
	div.imagette {
		height: 30px;
		width: 30px;
		position: absolute;
		margin-top: 6px;
		margin-left: 5px;
		opacity: 0.8;
		max-width: 100%;
		height: auto;
	}


	div.titre {
      	text-align: center;
		color: rgba(0,0,0,1);
      	background-color: rgba(255,255,255,0.5);
		font-size: 16px;
		height: 20px;
		padding-top: 0px;
		font-family: "Arial";
		font-weight: normal;
	}
	
	div.contenu {
		background-color: rgba(0,0,0,0.5);
	}


	div.icon_home {
      background-image: url("images/icon_home.png");
      background-size: 30px 30px;
  	  width: 30px;
	  height: 30px;
    }

	div.icon_camera {
      background-image: url("images/icon_camera.png");
      background-size: 30px 30px;
  	  width: 30px;
	  height: 30px;
    }

	div.icon_chauffage {
      background-image: url("images/icon_chauffage.png");
      background-size: 30px 30px;
  	  width: 30px;
	  height: 30px;
    }

	div.icon_temp {
      background-image: url("images/icon_temp.png");
      background-size: 30px 30px;
  	  width: 30px;
	  height: 30px;
    }

	div.icon_detection {
      background-image: url("images/icon_detection.png");
      background-size: 30px 30px;
  	  width: 30px;
	  height: 30px;
    }

	div.icon_volets {
      background-image: url("images/icon_volets.png");
      background-size: 30px 30px;
  	  width: 30px;
	  height: 30px;
    }

	div.icon_light {
      background-image: url("images/icon_light.png");
      background-size: 30px 30px;
  	  width: 30px;
	  height: 30px;
    }

et le code HTML à mettre dans le design

Code : Tout sélectionner

<LINK href="montheme/fenetre.css" rel="stylesheet" type="text/css">
  
<div class="bandeau">
	<!-- Imagette  -->
	<div class="imagette">
      	<div class="icon_camera"></div> <!-- nom de l'icone -->
    </div>
	<!-- TITRE -->
	<div class="titre">Caméra Devant</div> <!-- Titre du CADRE -->
	<!-- CONTENU -->
	<div class="contenu" style="height: 250px;"> <!-- Modifiez height pour régler la hauteur du cadre -->
	</div>
</div>
plus light et il y a juste le nom de l'icone que vous souhaitez, le titre et la hauteur à modifier
tous le reste se fait dans le CSS, donc si un jour, vous voulez changer d'icone, de couleur, ... une modif dans le CSS est c'est bon partout


pour le menu, j'ai aussi centralisé le code dans un JS

menu_dashH.js

Code : Tout sélectionner

document.getElementById('menu').innerHTML = "<ul class='monmenu'><a onClick='planHeader_id=ID_DESIGN; displayPlan();'><li class='monmenu'><div class='imagette1'></div></li></a><a onClick='planHeader_id=ID_DESIGN; displayPlan();'><li class='monmenu'><div class='imagette2'></div></li></a><a onClick='planHeader_id=ID_DESIGN; displayPlan();'><li class='monmenu'><div class='imagette3'></div></li></a><a onClick='planHeader_id=ID_DESIGN; displayPlan();'><li class='monmenu'><div class='imagette4'></div></li></a><a onClick='planHeader_id=ID_DESIGN; displayPlan();'><li class='monmenu'><div class='imagette5'></div></li></a><li class='monmenu_sep' ><div class='imagette0'></div></br></li></ul>";
un peu chiant car tout dans une même ligne mais vous pouvez le garder dans un bloc-note afin de le modifier plus facilement

Code : Tout sélectionner

document.getElementById('menu').innerHTML = "<ul class='monmenu'>
<a onClick='planHeader_id=ID_DESIGN; displayPlan();'><li class='monmenu'><div class='imagette1'></div></li></a>
<a onClick='planHeader_id=ID_DESIGN displayPlan();'><li class='monmenu'><div class='imagette2'></div></li></a>
<a onClick='planHeader_id=ID_DESIGN; displayPlan();'><li class='monmenu'><div class='imagette3'></div></li></a>
<a onClick='planHeader_id=ID_DESIGN; displayPlan();'><li class='monmenu'><div class='imagette4'></div></li></a>
<a onClick='planHeader_id=ID_DESIGN; displayPlan();'><li class='monmenu'><div class='imagette5'></div></li></a>
<li class='monmenu_sep' ><div class='imagette0'></div></br></li></ul>";
le CCS menu_dashH.ccs (attention légèrement personnalisé)

Code : Tout sélectionner


div.menu_top {
	width:800px;
	height:70px;
	background-color:rgba(0,0,0,0.6);
	border-bottom:2px solid rgba(0,0,0,1);

}

div.imagette0 {
    background-image: url("images/icon_blank.png");
    background-size: 50px 50px;
	margin-bottom: 5px;
	opacity: 0.8;
  	width: 50px;
  	height: 50px;
}

div.imagette1 {
    background-image: url("images/icon_home.png");
    background-size: 50px 50px;
	margin-bottom: 0px;
	margin-left: 20px;  
	opacity: 0.8;
  	width: 50px;
  	height: 50px;  
}

div.imagette2 {
    background-image: url("images/icon_detection.png");
    background-size: 50px 50px;
	margin-bottom: 0px;
	margin-left: 20px;  
	opacity: 0.8;
  	width: 50px;
  	height: 50px;  
}

div.imagette3 {
    background-image: url("images/icon_reseau.png");
    background-size: 50px 50px;
	margin-bottom: 0px;
	margin-left: 20px;  
	opacity: 0.8;
  	width: 50px;
  	height: 50px;  
}

div.imagette4 {
    background-image: url("images/icon_cam.png");
    background-size: 50px 50px;
	margin-bottom: 0px;
	margin-left: 20px;  
	opacity: 0.8;
  	width: 50px;
  	height: 50px;  
}

div.imagette5 {
    background-image: url("images/icon_plan.png");
    background-size: 50px 50px;
	margin-bottom: 0px;
	margin-left: 20px;  
	opacity: 0.8;
  	width: 50px;
  	height: 50px;  
}

ul.monmenu ul.monmenu_sep {
	list-style-type:none;
	color:rgba(255,255,255,0.8);
	font-family: "Roboto";
	font-size: 16px;
	font-weight: normal;
  	text-align: center;
}

li.monmenu {
	display:inline-block;
	width: 90px;
	margin-left: 0px;
	text-align: center;
	height: 70px;
	padding-top: 5px;
	border-left: 1px solid rgba(255,255,255,0.3);
	border-right: 1px solid rgba(255,255,255,0.3);
	background-color: rgba(0,0,0,0.2);
}

li.monmenu:hover {
	background-color: rgba(255,255,255,0.2);
}

li.selected {
	display:inline-block;
	width: 100px;
	margin-left: -5px;
	text-align: center;
	height: 70px;
	padding-top: 10px;
	border-left: 1px solid rgba(255,255,255,0.3);
	border-right: 1px solid rgba(255,255,255,0.3);
	background-color: rgba(255,255,255,0.2);
}

li.monmenu_sep {
	display:inline-block;
	width: 100px;
	margin-left: -5px;
	text-align: center;
	height: 70px;
	padding-top: 10px;
	border-right: 1px solid rgba(0,0,0,0.3);

}

div.bouton {
	opacity: 1;
}
et le code HTML du menu, que l'on met dans ces DESIGN et qui ne bougera plus

Code : Tout sélectionner

<LINK href="montheme/menu_dashH.css" rel="stylesheet" type="text/css">
<script src="montheme/menu_dashH.js"></script>
<div class="menu_top" id="menu">
</div>
je suis content, ca marche nickel
Bonjour,
Je suis parti sur ta méthode du coup, c’est mieux le menu centralisé :)

J’ai juste un soucis: la page en cours ne passe pas en selected sur le menu.
Je cherche mais je ne trouve pas où c’est fait...Si tu pouvais m’aiguiller Un peu ce serait cool 😎

Avatar de l’utilisateur
db2p
Timide
Messages : 185
Inscription : 08 nov. 2017, 13:25
Contact :

Re: [Présentation] F$B33

Message par db2p » 01 juin 2019, 22:37

Salvialf a écrit :
01 juin 2019, 00:18
Oui j'avais fait ces modifs aussi à l'époque :)
ok merci salviaff
merci les gars
jai modifie de mon cote et fonctonne top
moi javais fait d'aapres le 1er code donc garde le cron

mathatak
Timide
Messages : 112
Inscription : 05 juin 2018, 12:37

Re: [Présentation] F$B33

Message par mathatak » 11 juin 2019, 11:19

Bonjour, je tente aujourd'hui de créer mon propre design grâce à ce super Tuto, mais comment faire pour accéder à la racine de Jeedom car le widget "Outil de développement" est introuvable sur la boutique. Merci de votre aide

Avatar de l’utilisateur
noodom
Actif
Messages : 980
Inscription : 13 juil. 2014, 17:25
Contact :

Re: [Présentation] F$B33

Message par noodom » 11 juin 2019, 12:24

Salut,

Tu peux utiliser le plugin équivalent jeeXplorer pour aller dans ton arborescence jeedom.

Avatar de l’utilisateur
Antoinekl1
Actif
Messages : 3924
Inscription : 23 mai 2015, 08:14

Re: [Présentation] F$B33

Message par Antoinekl1 » 11 juin 2019, 15:28

Poumi a écrit :
01 juin 2019, 19:35

Bonjour,
Je suis parti sur ta méthode du coup, c’est mieux le menu centralisé :)

J’ai juste un soucis: la page en cours ne passe pas en selected sur le menu.
Je cherche mais je ne trouve pas où c’est fait...Si tu pouvais m’aiguiller Un peu ce serait cool 😎

Bonjour

Oui en effet, j'avais pas fait attention à ca, faut que je regarde, ça fonctionne sur le thème d'origine ?
JEEDOM Smart Ultimate + 40 modules zwave
A vendre ; pack POWER jeedom - Jeedom Mini+ - Console Clazio sous Android 6

Avatar de l’utilisateur
Poumi
Actif
Messages : 660
Inscription : 21 mars 2019, 22:41

Re: [Présentation] F$B33

Message par Poumi » 11 juin 2019, 20:21

Vu le tuto oui, il changeait le selected dans le menu en fonction de la vue.

mathatak
Timide
Messages : 112
Inscription : 05 juin 2018, 12:37

Re: [Présentation] F$B33

Message par mathatak » 12 juin 2019, 00:44

Quelqu'un peut il m'expliquer s'il est possible et comment faire pour prendre une info précise dans un plugin, par exemple dans le plugin DOMOGEEK, l'information SAINT DU JOUR et l'afficher dans mon design, style : "le saint du jour est = ....." sans avoir toutes les autres infos du plusgin.

Merci de votre aide

Avatar de l’utilisateur
Antoinekl1
Actif
Messages : 3924
Inscription : 23 mai 2015, 08:14

Re: [Présentation] F$B33

Message par Antoinekl1 » 12 juin 2019, 10:39

Antoinekl1 a écrit :
11 juin 2019, 15:28
Poumi a écrit :
01 juin 2019, 19:35

Bonjour,
Je suis parti sur ta méthode du coup, c’est mieux le menu centralisé :)

J’ai juste un soucis: la page en cours ne passe pas en selected sur le menu.
Je cherche mais je ne trouve pas où c’est fait...Si tu pouvais m’aiguiller Un peu ce serait cool 😎

Bonjour

Oui en effet, j'avais pas fait attention à ca, faut que je regarde, ça fonctionne sur le thème d'origine ?

C'est plus compliqué, car comme le code du menu est centralisé et n'est plus différent sur chaque design, il n'est pas possible de positionner la class "Selected" sur le bon menu, comme dans le script d'origine

je pensais pouvoir faire le test dans le JS centralisé, avec pas exemple la récupération de la page web en cours, mais dans le design la page ne change pas, donc pas possible de récupérer l'ID

il faudrait alors dans le code du menu du design, pouvoir ajouter une variable qui indiquerait l'ID du design afin de la JS centralisé puisse positionner le selected sur le bon menu

mais j'ai pas trop le temps et perso ce ne me dérange pas de ne pas avoir le menu qui indique la page active, je vois la page en dessous.

si qqun veux s'y coller :-)
JEEDOM Smart Ultimate + 40 modules zwave
A vendre ; pack POWER jeedom - Jeedom Mini+ - Console Clazio sous Android 6

Avatar de l’utilisateur
Antoinekl1
Actif
Messages : 3924
Inscription : 23 mai 2015, 08:14

Re: [Présentation] F$B33

Message par Antoinekl1 » 12 juin 2019, 10:41

mathatak a écrit :
12 juin 2019, 00:44
Quelqu'un peut il m'expliquer s'il est possible et comment faire pour prendre une info précise dans un plugin, par exemple dans le plugin DOMOGEEK, l'information SAINT DU JOUR et l'afficher dans mon design, style : "le saint du jour est = ....." sans avoir toutes les autres infos du plusgin.

Merci de votre aide
tu peux ajouter une commande dans les designs et ne sélectionner que celle ci

sinon tu passes par un virtuel intermédiaire, qui n'a que les quelques commandes que tu veux afficher et c'est lui que tu mets dans le design
JEEDOM Smart Ultimate + 40 modules zwave
A vendre ; pack POWER jeedom - Jeedom Mini+ - Console Clazio sous Android 6

level47
Timide
Messages : 3
Inscription : 15 févr. 2018, 09:52

Re: [Présentation] F$B33

Message par level47 » 03 juil. 2019, 13:32

Bonjour,

Je suis avec attention ce sujet depuis sa création. Toutes les interventions sont vraiment une mine d'or pour avancer ou donner des idées dans la réalisation de design ou autre. Cela m'a donné l'envie de "refaire" le design du plugin Météo, que je trouve, à mon goût, manquant de style. Celui que j'ai créé correspond plus au futurs design que je vais développer prochainement, grace aux idées présentes ici. Pour expliquer un peu cette modification du plugin, je l'ai faite directement dans les fichier contenu dans le dossier core du plugin. J'y ai rajouté l'heure, la date et modifié l'agencement qui correspond au futur design que j'ai en tête. L'étape suivante est de créer un widget indépendant de toutes mises à jour futures.
Voici à quoi ressemble mon plugin meteo. Qu'en pensez-vous ?

Level47
Pièces jointes
dvianceweather.png
dvianceweather.png (64.81 Kio) Consulté 981 fois

Avatar de l’utilisateur
oufman
Actif
Messages : 567
Inscription : 07 sept. 2014, 00:44
Localisation : Suisse - VD

Re: [Présentation] F$B33

Message par oufman » 03 juil. 2019, 13:43

Hello,

J'aime bien ton design, très beau job sur le plugin météo.

Si jamais tu te décide à partager, je prends volontiers.

Belle suite de journée.

level47
Timide
Messages : 3
Inscription : 15 févr. 2018, 09:52

Re: [Présentation] F$B33

Message par level47 » 03 juil. 2019, 13:58

Avec plaisir.
Il suffit juste d'aller dans le plugin weather grace à Jeexplorer, et dans remplacer le dossier dashboard contenu dans Weather/Core/Template/.

Les fichiers modifiés sont uniquement currentIMG.html et forcastIMG.html. J'ai également rajouté le dossier CSS.
Dans la configuration de la météo locale, il faut que le Nom de l'équipement météo soit la ville que l'on veut affiché (C'est ce nom qui est utilisé).
Ensuite cocher le mode image.

Voilà, il suffit juste d'attendre le rafraichissement des caches pour voir apparaitre les modifications.
Pièces jointes
WeatherDashboardByLevel47.zip
(5.56 Kio) Téléchargé 70 fois

mathatak
Timide
Messages : 112
Inscription : 05 juin 2018, 12:37

Re: [Présentation] F$B33

Message par mathatak » 03 juil. 2019, 15:50

Trés jolie !!!!!

romanais
Actif
Messages : 1990
Inscription : 21 août 2014, 21:36
Localisation : Drôme

Re: [Présentation] F$B33

Message par romanais » 03 juil. 2019, 17:12

Beau partage :-)
Merci à toute l'équipe pour le taf

Mon matériel

forplatina
Timide
Messages : 156
Inscription : 09 avr. 2018, 23:14

Re: [Présentation] F$B33

Message par forplatina » 09 juil. 2019, 10:59

Merci level47 pour ta modif de plugin Weather. C est bien mieux ainsi.

Par contre je n'arrive pas à le redimensionner. Normal ?

level47
Timide
Messages : 3
Inscription : 15 févr. 2018, 09:52

Re: [Présentation] F$B33

Message par level47 » 11 juil. 2019, 20:26

Oui c’est normal, les dimensions sont fixes.

Je travaille sur une version encore mieux où tout sera redimensionnable à souhait. Mais pour l’instant j’ai énormément de travail ce qui fait que le développement est totalement au point mort. Mais ca va venir car j’en ai besoin personnellement pour mon design. Ce qui est sûr c’est que ce sera fait. Peut-être pour la version 4 car je l’adapte Aussi pour jeedom 4.

jerome6994
Timide
Messages : 357
Inscription : 04 juin 2019, 12:36
Localisation : Lyon

Re: [Présentation] F$B33

Message par jerome6994 » 11 juil. 2019, 22:01

J’adore ce plugin météo
Qu’est ce que j’aimerais savoir faire ça !
Il est facilement redimensionnable ?


Envoyé de mon iPhone en utilisant Tapatalk
RPI 3 B+ : Jeedom 3.3.32 - Z-Wave + : Z-Stick GEN5 - Aeon Labs - RFXCom - ZiGate USB-TTL ZigBee®
IOT : Station Météo, Thermostat, Vannes Netatmo, Volets Profalux, Prises DI-O, Somfy Home Alarm, Hue, Fibaro

Avatar de l’utilisateur
Woualy
Timide
Messages : 144
Inscription : 09 déc. 2018, 15:24
Localisation : Le Havre
Contact :

Re: [Présentation] F$B33

Message par Woualy » 09 août 2019, 16:08

Salut je suis en train de faire mes designs pour ma tablette, mais je n'arrive pas à le mettre plein écran :( , soit je passe par Chrome sur android et j'affiche directement le design, mais j'ai toujours les onglets et la barre de navigation ou je passe par l'appli Jeedom et j'ai aussi cette barre de navigation :/ je dois rater un truc
Jeedom Smart + 6 FGR-223 + 7 capteurs ouvertures Xiaomi + 1 capteur Sensor Xiaomi + Clé Zigate

Avatar de l’utilisateur
Salvialf
Helper
Messages : 1321
Inscription : 24 févr. 2018, 09:37
Contact :

Re: [Présentation] F$B33

Message par Salvialf » 09 août 2019, 16:23

Woualy a écrit :
09 août 2019, 16:08
Salut je suis en train de faire mes designs pour ma tablette, mais je n'arrive pas à le mettre plein écran :( , soit je passe par Chrome sur android et j'affiche directement le design, mais j'ai toujours les onglets et la barre de navigation ou je passe par l'appli Jeedom et j'ai aussi cette barre de navigation :/ je dois rater un truc
Salut @Woualy,

quand tu es sur la page Jeedom sur le navigateur Google Chrome, il faut cliquer sur les 3 petits points en haut à gauche puis "Ajouter à l'écran d'accueil". Cela va ajouter une icône d'accès direct à Jeedom sur l'écran d'accueil de la tablette qui ouvrira alors la page en plein écran.
VM Jeedom 3.2.16 sous Proxmox 5.4 sur NUC5i5RYH (Debian 9.9)
Helper Officiel Jeedom
Widgets développés
Téléchargement d'icônes domotique (Topic Forum)

Avatar de l’utilisateur
Woualy
Timide
Messages : 144
Inscription : 09 déc. 2018, 15:24
Localisation : Le Havre
Contact :

Re: [Présentation] F$B33

Message par Woualy » 12 août 2019, 08:25

Salvialf a écrit :
09 août 2019, 16:23
Salut @Woualy,
quand tu es sur la page Jeedom sur le navigateur Google Chrome, il faut cliquer sur les 3 petits points en haut à gauche puis "Ajouter à l'écran d'accueil". Cela va ajouter une icône d'accès direct à Jeedom sur l'écran d'accueil de la tablette qui ouvrira alors la page en plein écran.
C'est bien ce qu'il me semble avoir fait, car je l'ai fait sur mon smartphone et celui de ma femme, c'est ok, je vais revérifier ce soir pour la tablette ;)
Jeedom Smart + 6 FGR-223 + 7 capteurs ouvertures Xiaomi + 1 capteur Sensor Xiaomi + Clé Zigate

Répondre

Revenir vers « Présentation et Vitrine d'installations »

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 2 invités