Nouvelle grille dashboard

Xav-74 · Mars 15, 2023, 1:30

Je profite de la réécriture de mon plugin Verisure pour tester mes widgets en v4.4 alpha (uptodate).
Après discussion avec @nebz, j’ai bien pris en compte la nécessité de rajouter les balises min-height, max-height, min-width et max-width et pas height ou width en mode forcé.
Mon souci est que la hauteur de mon widget dépend d’options cochées ou pas par l’utilisateur. Elle est donc dynamique et défini en js.
Sauf que là ca ne fonctionne plus.
Dans mon cas, je définis le min-height à 280 et max-height à 370 qui sont 2 hauteurs possibles du widget (la 3ème étant 340).
Mais dans tous les cas, le widget prend une hauteur de 302.
C’est lié aux pas de la nouvelle grille ? Tu peux m’en dire plus ?

En image, la version v4.3 versus v4.4 pour se rendre compte des écarts :

Merci d’avance pour ton aide,

Xav

Salvialf · Mars 15, 2023, 1:43

Salut,

La demande ne m’est pas adressée mais tant pis je réponds quand même.

C’est du aux nouveaux pas par défaut qui sont de 110px mini en largeur et 100px en hauteur :

github.com

jeedom/core/blob/alpha/desktop/common/js/utils.js#L24

      
        
            * along with Jeedom. If not, see <http://www.gnu.org/licenses/>.
            */
            
            
"use strict"
            
            
var jeedomUtils = {
              __description: 'Loaded once for every desktop/mobile page. Global UI functions and variables.',
              backgroundIMG: null,
              _elBackground: null
            }
            jeedomUtils.tileWidthStep = parseInt(jeedom.theme['widget::step::width']) > 110 ? parseInt(jeedom.theme['widget::step::width']) : 110
            jeedomUtils.tileHeightStep = parseInt(jeedom.theme['widget::step::height']) > 100 ? parseInt(jeedom.theme['widget::step::height']) : 100
            jeedomUtils.tileHeightSteps = Array.apply(null, { length: 10 }).map(function(value, index) { return (index + 1) * jeedomUtils.tileHeightStep })
            
            

            
/*Hijack jQuery ready function, still used in plugins
            */
            if (typeof jQuery === 'function') {
              jeedomUtils.$readyFn = jQuery.fn.ready
              jQuery.fn.ready = function() {
                if (domUtils._DOMloading <= 0) {

La tuile se cale sur ces pas, il faut que les valeurs que tu définis correspondent à des multiples des pas.

Xav-74 · Mars 15, 2023, 1:52

Merci @Salvialf
L’habitude de lire kiboost sur les posts tagué 4.4 ! Raccourci un peu trop rapide du coup

OK je comprends mieux. Je vais voir comment adapter les widgets avec ces pas
Thx

Xav

PS : je laisse ouvert le temps de faire qq tests. On ne sais jamais si j’ai d’autres questions

Salvialf · Mars 15, 2023, 1:59

Oui tu as raison surtout qu’à regarder ta capture dans le détail je suis allé jeter un œil à ton repo et à mon avis tu vas pouvoir simplifier un peu tes templates de widget avec le passage des tuiles en flex.

La balise <center> de la barre de titre n’a plus lieu d’être notamment. La classe CSS .content peut aussi permettre de passer le contenu en flex :

github.com

jeedom/core/blob/alpha/desktop/css/coreWidgets.css#L88

      
        
            div.cmd-widget .value>.label {
              padding: 1px 3px;
            }
            
            
div.cmd-widget .content-xs {
              color: var(--txt-color);
              line-height: 16px;
              min-width: 100px;
            }
            
            
div.cmd-widget .content,
            div.cmd-widget .content-sm,
            div.cmd-widget .content-lg {
              display: flex;
              justify-content: center;
              align-items: center;
              flex-direction: column;
              min-width: 100%;
              min-height: 40px;
            }

Xav-74 · Mars 15, 2023, 2:04

Super, je vais regarder ca en détail. Ca devrait aller vite sur Verisure, un peu moins sur myBMW, qui est un peu plus complexe mais qui correspond parfaitement au contenu flex pour le coup

Piug · Juin 16, 2023, 10:10

Bonjour,

Je me permet de rebondir sur ce sujet qui est toujours ouvert, et qui concerne ce que je cherche.

Jeedom en bêta 4.4.0, mise à jour faite le 2023-05-22 15:47:29

Je suis en train de mettre à jour le template du plugin, et constate que le pas en largeur n’est pas de 110px, mais d’environ 250px. Et que je le pas en hauteur n’est pas de 100px, mais d’environ 150px. J’ai relevé les valeurs suivantes (de la plus petite que le dashboard m’autorise à mettre, vers plus grand) :

Largeur :

251.5px
504px
756.5px
1009px
1261.5px

Hauteur :

150px
301px
452px
603px
754px

Quelle pourrait-être la raison de ces pas ?

Loic · Juin 16, 2023, 10:17

Bonjour,
Je ne comprends pas la question, tu demandes pourquoi le pas minimum est de 150 en hauteur ou tu cherches a comprendre le calcul ?

Piug · Juin 16, 2023, 12:17

Plus haut, Salviag a écrit :

Mais je me retrouve avec des pas bien plus grand.
Comment puis-je faire pour avoir des pas plus petits que 250/150 ? (soit 110/100, soit entre les 2, je ne sais pas encore comment ça va tomber selon mon besoin)

Salvialf · Juin 16, 2023, 12:39

Salut,

Tu les as configuré au moins ces pas dans la config générale Jeedom, onglet interface ?

Piug · Juin 16, 2023, 12:46

Je n’ai jamais touché à ces paramètres. Mais effectivement en modifiant on retombe sur des pas plus plus petits.
D’autant plus que c’est une install from scratch sur une VM pour tester la v4.4

Loic · Juin 16, 2023, 12:56

Bonjour,
On a modifié les pas par défaut donc oui c’est plus les mêmes qu’avant. Mais tu peux toujours retomber sur ceux d’avant en les reconfigurant.