[Présentation] Benj29 et blog Jeedom-Facile

Bon je n’avance pas aussi vite que je veux car j’ai pris le temps :

  • faire simple, le plus simple possible,
  • utiliser que des choses intégrées (merci le plugin icones),
  • utiliser des virtuels uniquement (sauf pour la météo que j’ai intégré par le plugin HTML),
  • simplifier le code couleur.

J’utilise cet excellent article (merci @kiboost qui avait donné la solution sur le forum) :
https://youdom.net/2020/06/18/creer-et-centrer-des-informations-dans-un-tableau-de-mise-en-forme-sous-jeedom/
Un seul design pour la gestion du quotidien.
Je vise à faire à utiliser la fenêtre modale (un peu à la clink).
J’étais tombé sur ce sujet, mais j’aurai voulu m’appuyer sur une page de design ouverte plutôt pour simplifier notamment le glisser déposer sur des images (comme le plan de la maison).

https://youdom.net/2020/08/31/jeedom-des-widgets-sous-forme-de-pop-up/

A ce stade je n’en suis que là… mais déjà bien plus simple à maintenir. Faut juste prendre le temps.
Viendra ensuite un gros nettoyage de virtuels…

3 « J'aime »

Salut @benj29

Ca commence à prendre forme ! C’est sobre et efficace, je suis parti aussi dans cette idée pour commencer mon plan. Mais je vais partir sur du multi fenetres avec un bandeau sur le côté pour naviguer entre les menus.
Par contre, je n’arrive pas à faire fonctionner le centrage dans les fenêtres, malgré le tuto sur youdom…j’ai un doute sur ce qu’il faut mettre dans la feêtre de personnalisation avancée de Javascript. Tu as ça toi? :

$(window).on('load', function() {
 // code here
  var test = addColspan($("TD")) ;
});

$(function() { $(‘body’).on(‘jeedom_page_load’, function (event) { setTimeout(function() { addColspan($(“TD”)) }, 500) }) })


function addColspan(Tabobjets) {

		Tabobjets.each(function(objet) {

			if ($(this).css(“column-span”) != undefined)
			{

				if ($(this).css(“column-span”) === ‘all’)
				{

					console.log(‘test’);
					var nbtd = $(this).siblings().length + 1;
					$($(this).siblings()).remove();
					$(this).attr(‘colspan’,nbtd);

				}

			}

		});

};				

Non j’utilise ça. Par contre, j’ai un souci de délai clairement sur mes tablettes, souvent la « fusion » ne se fait pas…

function addColspan(_tabObjects) {
	if (!_tabObjects) return
	var nbtd
	_tabObjects.each(function() {
		if ($(this).css("column-span") != undefined)
		{
			if ($(this).css("column-span") === 'all')
			{
				nbtd = $(this).siblings().length + 1
				$($(this).siblings()).remove()
				$(this).attr('colspan', nbtd)
			}
		}
	})
}

$(function() {
  $('body').on('jeedom_page_load', function (event) {
   setTimeout(function() {
		addColspan($("TD"))
	}, 4000)
  })
})				

Ca ne marche pas mieux :frowning: il y a un truc que je n’ai pas capté…
Tu mets ton code dans Réglages/Systèmes/Personnalisation avancée, dans le cadre « java script », puis tu l’actives en haut à droite
Et ensuite , tu mets ce texte « text-align: center;column-span:all; » dans ta case que tu veux centrer :

Pour le délai, TomMary a ajouté une latence en millisecondes, ça ne corrigerait pas ton souci?

J’utilise déjà le délai, regarde la valeur… On dirait que jpi est fainéant ou trop rapide. Je verrai ça plus tard.

Il te faut activer la case personnalisation dans configuration aussi. Après oui c’est comme ça.

Édit tu as fait comment tes boutons ?

Au bout d’un moment, le bouton s’est centré, donc je dois avoir les mêmes soucis de latence :frowning:
Pour le bouton, c’est le code de @nak qui Ipapy a reparté ici :

1 « J'aime »

Petit à petit…
Long car je prends le temps, mais ça ressemble doucement à ce que je souhaite.
La mise en forme est loin d’être finie (couleur en fonction de l’état etc).

2 « J'aime »

C’est déjà très beau :smiling_face_with_three_hearts:.
Je vais encore être obligé de te copier lol :joy::rofl::rofl::joy::sweat_smile::sweat_smile::sweat_smile:

Ca commence à prendre forme, c’est top.
Pour mettre en forme, par exemple tes icones dans le cadre Supervision, comment fais tu ? Moi j’ai créé un virtuel que je mets en forme tableau dans le dashboard et ensuite j’insère l’équipement dans mon design. Mais ça m’oblige à faire un virtuel dédié au design :frowning:

J’ai effectivement un virtuel dédié au design.
Et je joue sur les CSS et les tableaux :

Par contre, je supprime peu à peu les virtuels qui n’ont plus d’intérêt.
Je prévois aussi de pouvoir ouvrir des popups pour accéder aux équipements plus facilement plutôt que d’empiler les designs à tord et à travers :smiley:

Cool, j’avais trouvé la méthode des virtuels et cadres tout seul, je progresse lol
Pour les pop-up, trop complexe encore pour moi, je verrais plus tard.
Tiens nous au courant pour la suite :slight_smile:

Bonjour,
est il possible de partager ton virtuel tableau special pour le design ma petite madame est en admiration de ton Tableau :face_with_head_bandage:
merci par avance

Il est loin d’être finalisé…
J’ai mis en place des boutons pour les futurs menus à la volée. Il manque encore la coloration…

1 « J'aime »

Bonjour
dans tous le cas Pense a moi, car ton boulot est vraiment cool

2 « J'aime »

l’idée d’une page de supervision me plait pas mal .je suis plus parti sur un menu avec des thémes ( fenetres, alarme,piscine …
comme ça :

la télécommande et son tv sur la principale , c’est pour le contrôle tv ( extinction, son pour les enfants plafonné… :).Tiens ça me fait penser qu’il faut que je remplisse l’agenda 2021 pour les poubelles :slight_smile:
A la base , c’était pour contrôler les volets de la tablette que j’étais parti comme ça


ça me permet de voir les fenêtres ouvertes quand je m’en vais, ou ouvrir ,fermer et mettre à moitié mes battants motorisés
image
les lumières :

le chauffage :

mais je vais quand même mettre l’idée d’une supervision dans le coin de ma tete. Seul hic, pas trop à l’aise avec html, css …meme si j’en comprends les principes

Hello et voilà, après quelques jours de réflexion, le tableau de suivi « intérieur » est fini.

Règle de base tout en gris, sauf alerte ou warning.
Si la VMC tourne, flèche tournante en orange à défaut gris.
Pour les températures, j’ai un widget qui en fonction du mode (clim,chauffage, arrêt) vérifie « intelligemment » la température. Exemple, en chauffage, je vérifie si la température est inférieure à 1° de la consigne ou 2°. L’été ce sera l’inverse, c’est à dire supérieur. Et en fonction je colorise.
De même si les splits chauffent, température en +. S’ils refroidissent ce sera le même en bleu avec -. Pour l’humidité, simple gamme de valeur pour colorer.

Les entêtes des colonnes sont cliquables pour ouvrir de futurs popups.

4 « J'aime »

Salut
tu pense toujours a moi? :herb:

Mais je ne comprends pas du tout ce que tu veux…
Ce n’est qu’un tableau avec une mise en forme adaptée et le code pour merger les colonnes données plus haut.
Dis moi exactement ce que tu as besoin car sincèrement je ne vois pas.

Salut
Précisément les etape avec les quelles tu a fait ce maguifique tablau, tu sais je suis un déboutant en jeedom et quand je vois un travail innovant je demande les détail pour élargir mes horizons jeedomien, pardon de prendre trop de ton temps.
très cordialement

Bonsoir,

Je n’avance pas forcément à la vitesse que je souhaite car je nettoie toujours.
Mais peu à peu…
Il me reste à solutionner le problème de l’icone action qui change avec l’aide de @noodom.
Faire tous les popups mais peu à peu… ça prend forme !

Je partage au cas où les icones que j’ai faites avec Photofiltre.
Le reste c’est par l’excellent plugin icones et les librairies proposées mdi, mti.

Icones Jeedom V4.txt (133,1 Ko)

A renommer en .zip (.txt).

1 « J'aime »