Design F$B333 avec centralisation

Nemeraud · Novembre 3, 2019, 12:26

Bonjour à tous

Je reprends ici un post sur j’avais fait sur l’ancien forum pour un usage centralisé du design de @F$B333 merci a lui pour son travail.

Source : https://www.jeedom.com/forum/viewtopic.php?f=50&t=14863&start=60#p274114

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

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

<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

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>";

C’est un peu chiant car tout est sur une même ligne mais vous pouvez le garder dans un bloc-note afin de le modifier plus facilement, sinon ca ne fonctionne pas.

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é)

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 ses DESIGN et qui ne bougera plus

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

Steph13 · Novembre 5, 2019, 2:02

Bonjour, j’ai suivi le tuto de F$B333 pour changer le wallpaper du mode design mais pour une raison inconnu plus rien a fonctionné.
J’ai effacé les dossiers et les images du dossier Meteo.
Mais je me retrouve avec une erreur dans le log Script :

[2019-11-05 14:48:01][DEBUG] : Result : <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN"> <html><head> <title>404 Not Found</title> </head><body> <h1>Not Found</h1> <p>The requested URL was not found on this server.</p> </body></html>

Je pense que cela vient du script :

<script>
  $("body").css("background-image", "url(../../core/img/plan/xxxxxxxx.jpg)"); //remplacer par votre image
</script>

Le problème c’est qu’il n’existe plus mais qu’il doit être appelé quand même mais je ne sais pas qui…
Est ce possible de revenir en arrière ?

Merci d’avance.

Nemeraud · Novembre 5, 2019, 2:06

Difficile de répondre, ce bout de script vous l’avez mis dans des design ?

Salvialf · Novembre 5, 2019, 2:07

Salut,

Tu n’avais pas mis un scénario ou un script de changement de wallpaper qui serait toujours actif?

Sinon suite à une mise à jour v3.3.x il faut faire quelques modifications pour que ça fonctionne à nouveau. Voir le fil de l’ancien forum

Nemeraud · Novembre 5, 2019, 2:10

et pour le changement de wallpaper, il y a un super plugin maintenant

Salvialf · Novembre 5, 2019, 2:38

Effectivement je n’y ait même pas pensé

Kevin_Jns · Novembre 10, 2019, 5:02

Oui, mais en même temps quand tu fais des recherches tu tombe en priorité sur l’ancienne méthode avec le script, puis celle avec le scenario et enfin le magnifique plugin. J’ai perdu plusieurs heure aujourd’hui a galérer alors que le plugin m’a tout réglé en 5 min. J’ai l’impression que Jeedom a changé le dossier de stockage des wallpaper des designs, c’est pour ça que ça ne fonctionne plus.

Nemeraud · Novembre 10, 2019, 5:10

la joie des forums

l’essentiel est que tout fonctionne maintenant

Nicolala · Novembre 24, 2019, 12:51

Hello et merci @F$B333

Je j’ai un écran de 7’’ déporté sur un raspberry
J’arrive à lancer ma page web en plein écran avec chromium au démarrage, mais je n’arrive pas à la mettre en plein écran « jeedom » directement…

J’ai toujours la barre jeedom avec accueil et analyse…

je trouve pas comment faire pour faire cette commande en automatique au démarrage

Merci

Salvialf · Novembre 24, 2019, 12:55

Salut,

Si tu ajoutes &fullscreen=1 à l’adresse Jeedom il démarre en plein écran

Nicolala · Novembre 24, 2019, 1:01

Merveilleux !!!
MERCI BEAUCOUP

romain13120 · Novembre 26, 2019, 9:48

Pour info, le Plugin sur Jeedom est Design Background Image ça évitera des heures de recherches

Domotech · Décembre 8, 2019, 3:12

Design en cours d’amélioration pour ma part également

crunchy · Janvier 3, 2020, 12:05

Bonjour, j’utilise aussi ce design mais impossible de rendre transparent waze in time j’ai toujours ce fond vert malgré que j’ai bien mis le fond transparent dans la rubrique design.

Auriez-vous une idée?
Merci d’avance,
C.

rootard · Janvier 4, 2020, 10:26

Hello
Je viens de me lancer dans le design avec le thème de @F$B333, c’est très puissant!
Quelques questions auxquelles je n’ai pas trouvé de réponse:

Vous avez fait comment pour afficher l’heure dans la barre de taches?
Mes cadres n’ont pas de croix en haut à droite?
A quoi sert le bouton en haut a droite du menu?
Comment avez-vous fait pour afficher le résumé domotique? chez moi il affiche « non configuré », pourtant il est bien affiché en mode dashboard ou vue

rootard · Janvier 5, 2020, 10:09

Up! Personne ?

Spine · Janvier 5, 2020, 10:30

Bonsoir,

Pour l’heure il y a le widget de @Salvialf : [WIDGET] Digital_Clock_Vue - Forum Communauté Jeedom ou pour avoir celle de F$B33 il donne le code HTML sur le 2ème message de cette page : [Présentation] F$B33 - Page 5 - Forum Communauté Jeedom
Pourquoi faire une croix, fermer les fenêtres? Je ne sais pas à quoi elles servent dans le design de F$B33 mais ça ressemble juste à une icône ajoutée dans le code du cadre pour l’esthétique peut-être…
Quel bouton? Tu parles peux être de la séparation inclue dans le code du menu d’origine?
« non configurer » est assez explicite, il faut au minimum configurer le lien avec le résumé voulu dans la config. avancée…

rootard · Janvier 6, 2020, 8:32

merci pour tes réponses @Spine

Pour le point 3. je faisais référence au bouton blanc en haut a droite dans le bandeau, cf le screenshot de @Nemeraud en haut de cette page

Point le point 4. résumé domotique c’est bien ce que je pensais, il doit y avoir un pb dans ma DB car le menu configuration avancée est grisé cf cette copie d’écran?

[EDIT] une vérification de la DB donne tout OK mais je n’ai que température et luminosité sur le résumé domotique du dashboard. Je ne comprends pas ou peut être le problème?

Spine · Janvier 6, 2020, 12:28

Ok pour le bouton blanc je ne sais pas, c’est une commande action ou info perso. qu’il a ajouté. Peut-être un retour vers le menu précédent ou le dashboard, ou simplement une icone reflétant un état, seul lui le sait, après tu fais ce veux…
Pour que tous les résumés remontent dans le résumé global il faut bien cocher ces cases dans la config. de chaque objet :

Puis « ajouter un résumé » et « paramètre d’affichage » (pas config. avancée désolé) et tu sélectionnes le lien « Général » :

Chez moi ça marche en tout cas :
Annotation%202020-01-06%20132113

Bod · Janvier 6, 2020, 12:42

Super design ! J’adore !
Comment gère tu ton stock de Pellet ? Et le prix de revient ?

Merci
Bod