Design F$B333 avec centralisation

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.

IMG_0851

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>
4 J'aimes

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.

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

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

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

2 J'aimes

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

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.

la joie des forums :slight_smile:

l’essentiel est que tout fonctionne maintenant

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…image
J’ai toujours la barre jeedom avec accueil et analyse…

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

Salut,

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

Merveilleux !!!
MERCI BEAUCOUP
:nerd_face:

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

1 J'aime

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

design%20v4

1 J'aime

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.

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:

  1. Vous avez fait comment pour afficher l’heure dans la barre de taches?
  2. Mes cadres n’ont pas de croix en haut à droite?
  3. A quoi sert le bouton en haut a droite du menu?
  4. 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

design

Up! Personne ?

Bonsoir,

  1. Pour l’heure il y a le widget de @Salvialf : https://forum.jeedom.com/viewtopic.php?f=29&t=44726&sid=0039ad1d8f5991d85e19b6c8837d415f ou pour avoir celle de F$B33 il donne le code HTML sur le 2ème message de cette page : https://forum.jeedom.com/viewtopic.php?f=50&t=14863&start=80#wrap
  2. Pourquoi faire une croix, fermer les fenêtres? :grinning: 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…
  3. Quel bouton? Tu parles peux être de la séparation inclue dans le code du menu d’origine?
  4. “non configurer” est assez explicite, il faut au minimum configurer le lien avec le résumé voulu dans la config. avancée…

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?

design2
resume%20domotique
[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?

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 :
Annotation%202020-01-06%20131704
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” :
Sans%20titre
Chez moi ça marche en tout cas :
Annotation%202020-01-06%20132113

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

Merci
Bod