Aide création dashboard dans design personnalisé (bonnes pratiques)

Avec une notion du bientôt relative :smiley:

Bon, de l’eau à coulé sous les ponts depuis !
Mais j’ai avancé :smiling_face:

x2 éléments imprimés en 3D maintiennent la tablette à droite et à gauche, ils sont au préalable vissés sur le tasseau de bois horizontal, lui même vissé avec 2 équerres dans la niche du meubles (sur les flancs latéraux avec des vis à bois « courtes » de 16mm pour ne pas traverser les panneaux…)

L’envers du décor en immersion :

Les petits trous en périphérie doivent accueillir des micros-aimants, qui maintiendront un cadre en plexi 3mm noir mat. J’attends de le faire découper au laser pour le fixer, ça fera la finition uniforme :wink:

J’avais envie de donner l’impression que la tablette « flotte » dans le volume, ça marche assez bien, le câble coudé en bas à gauche est assez discret et ne se verra plus une fois le cadre de finition posé…

Si cela peut vous intéresser, je vous partage le fichier 3D du support. Pour mémoire, il est adapté à une Teclast T40 Pro, il fit parfaitement au mm près. Je pense que cela peut marcher pour une M40 (elle à l’air d’avoir la même coque), voir d’autres de chez Teclast, mais à vérifier sans garantie de fonctionnement !

Ci-après :

Différents trous oblongs pour aider au réglages, losanges pour alignement facile sur trait de niveau à visible au travers l’arrière, etc.
/!\ Attention, les deux parties « coulissent » de part et d’autre de la tablette.

« Mais comment faire pour rentrer la tablette dans la niche une fois que le support est vissé sur le tasseau ?! »

= en « jouant » un peu sur la déformation du plastique, et en desserrant très légèrement la partie de droite (au gauche) sur les trous oblongs horizontaux, de façon à la remettre en place en la faisant glisser en forçant… Un peu rude mais ça a marché dans mon cas :slight_smile:

On peut mieux faire en glissant la tablette par le haut, en supprimant le bourrelet sur tout le linéaire supérieur. On perdra un peu en maintien, mais pas rédhibitoire…

1 « J'aime »

Salut @tous,

Quelques captures d’écran pour vous montrer mon avancement.
Beaucoup beaucoup de choses à faire encore, mais c’est en service et remplit ses fonctions de base donc pour l’instant très content.

Il faut considérer « 3 couches » d’interactions :
1. Ecran de veille : avec un minimum d’info au quotidien (avec extinction totale si nuit ou absence)
2. Dashboard de tuiles « thématiques » lorsqu’on clique sur l’écran de veille
3. Les pages détaillées : qui souvrent lors d’un appui sur une tuile.

Principe :
1 clic sur ecran de veille → Dashboard, puis re-clic sur tuile → Page détaillée
1 clic sur retour (en bas à droite systématiquement) pour revenir au Dashboard
→ Efficace pour toute la famille, et pas trop surchargé (pour linstant !)… :wink:

Je vous poste en « quick and dirty » (valable aussi pour le code ahah :sweat_smile:) ci-dessous un florilège de screenshots. N’hésitez-pas si vous avez des questions et si je peux aider à mon tour.
Bon weekend !

  1. Veille :

  2. Dashboard :

  3. Page détaillée


Reste à faire :

  • nourrir et détailler chaque page qui se cache derrière une tuile.
    Pour l’instant, les pages se contentent des équipements de base sur fond neutre, avec le lien « retour » en bas à droite (exemple carburant et thermostat plus haut…).
  • améliorer le design du dashboard : quelques touches manquent, comme par exemple ajouter des visuels de nuages / soleil / pluie selon météo, etc.
  • nettoyer le code : pour le coup pas du tout la priorité, le dashboard est une seule page html avec de nombreuses requêtes API en java avec les ID de commandes infos, pas forcément optimisé mais ça marche et se met à jour en temps réel.
3 « J'aime »

Et le principe du cadre de finition du supprt imprimé en 3D : une façade constituée d’un bandeau en Plexiglas noir mat épaisseur 3mm, coupée au laser et sertie d’aimants neodimes :wink: (des défonces de 0.5mm ont été ménagées au laser en gravure, un point de colle araldite / super glue à suffit pour les aimants…)


Bonjour,
Belle intégration de ta tablette !*
Une petite question : comment as-tu fait pour intégrer le prix des carburants sur une carte ?
J’ai le plugin-prixcarburants
David

Merci :wink:
Alors pour ceci ce n’est pas très compliqué « dans l’idée »:

  • la carte est une image de fond jpeg statique (préparée grâce à ce site : https://snazzymaps.com/ )
  • les point rouges sont sur le jpeg en dur (ajout Photoshop…)
  • les rectangles rouges avec les prix sont les valeurs du plugin-prixcarburants que j’appelle, positionnées + formatées / stylisés avec le css (bord arrondis, couleur, taille police, justification, etc).
  • la tuile a droite avec le meilleur tarif dispo est un appel d’après une commande info d’un virtuel, basée elle même sur une variable que je créé quotidiennement (voir ce sujet du forum).

Si tu veux que j’explique davantage le code dis-moi :slight_smile:

Ah oui bien joué, je comprends mieux maintenant !
Ca doit être dans mes cordes…si j’ai un soucis je te le dis !
Merci,
David

ça donne vraiment envie de se mettre au design

Merci pour le compliment :wink:

1 « J'aime »

Sympa, ça permet de se remettre en question :). J’aime bien. A méditer quand j’aurai du temps pour redévelopper un design.

Oh merci ! Venant de toi c’est un compliment :smiling_face:

1 « J'aime »

Mince, j’ai du texte qui se chevauche ! :grimacing:
Vais devoir jouer un peu avec le css…

Il faut dire aussi que je n’avais pas prévu le coup du

légère pluie éparse avec tonnerre par endroit

:rofl: :sweat_smile:

1 « J'aime »

Trop beau, sacré boulot :muscle:!
Perso j’aurais fait un cadre en bois pour encastrer complètement la tablette et ne pas voir la traverse horizontale, mais je pinaille :smiling_face:

Merci :pray:

Yes le bout de tasseau c’est temporaire en solution “quick and dirty”,
à terme j’aimerai habiller les flancs + fond de la niche en laiton ou alu par exemple, ou autre, bref un truc sympa pour masquer les pré-trous du caisson pour les réglages tablettes, etc, et se remettre au nu des façades du placard.

Et faire en sorte de faire “flotter” la tablette au milieu, avec un système de mât je pense qui serait perpendiculaire à la tablette et au fond de la niche, avec un petit double fond pour encastrer le câble de charge…

un peu ambitieu mais pas impossible !

:wink:

1 « J'aime »

Salut,
Oui il est important de toujours y croire ! Si c’est juste pour faire en sorte que la tablette flotte, ceci devrait faire l’affaire et pas trop cher sur leboncoin :blush:

image

3 « J'aime »

Ah ouais moi j’aurais masqué toute la niche avec une façade pleine autour de l’ecran. Chacun ses gouts :smiling_face:

Yes, de mon coté plutôt partisan d’un beau join creux tout autour :sweat_smile:

1 « J'aime »

Salut ! Merci pour ton retex !

J’utilise Jeedom sur une vieille tablette sous cyanogen. Le problème est que l’interface se deconnecte régulierement et que je suis obligé de re rentrer mes credentials. J’aimerai que ce soi permanent… As tu ce problème également ?

Non jamais eu le soucis.
Est-ce que tu coches bien « se souvenir de moi » ?
(La case est parfois peu visible selon la config du navigateur…)

Utilises-tu aussi Fullykiosk comme navigateur ?

Salut,

J’aime bien :). Joli !
Je pense reprendre mes designs d’ici quelques temps pour quelque chose de plus épuré aussi.
Tu peux détailler comment as tu fait les tuiles ?

J’aime beaucoup celui de météo et les infos conso, présence.

Je pense aussi que l’idée d’avoir un design par zone peut aider pour les thermostats par exemple, même si pointera vers le tableau final de gestion de la maison.

Allez explique nous tout !

Salut la team,

A la demande de @benj29 et d’@anthopocket, plus bas quelques infos sur la structure de mon code.

D’avance désolé si c’est un peu « quick and dirty », votre expertise sera sans doute bienvenue pour débuguer le truc ou l’optimiser, sentez-vous libre de détourner et de l’adapter selon vos besoins. Je ne suis pas codeur, loin de là, juste enthousiaste qui bidouille du html + css… désolé d’avance si des choses sont bâties maladroitement :wink:

J’avais fait vite à l’époque pour avoir un truc fonctionnel, mais c’est un travail encore WIP où toutes les tuiles en sont pas encore actives, etc. Bref, je vous laisse juger :slight_smile:

Je manque de temps pour aboutir le truc correctement, mais à plusieurs on devrait pouvoir en faire un truc sympa ! :grinning:

Donc, la structure assez simple est la suivante, de « l’extérieur vers l’intérieur » :

1. Ecran de veille
qui amène sur
2. Dashboard avec les « tuiles »
qui amène sur
3. Page spécifique à la tuile choisie

Ces pages sont en fait à chaque fois des design, accessibles depuis le menu dédié dans Jeedom, exemple pour l’écran de veille, qui s’appelle C4-VEILLE chez moi (oubliez le préfixe « C4- », il ne sert absolument à rien, juste un vestige d’une numérotation que j’ai abandonné, bref :innocent:, vous pouvez l’appeler comme vous voulez…) :

→ le design est construit avec une zone de texte html paramétrée pour recouvrir toute la surface utile de la page du design

Pour y parvenir, il faut créer un nouveau design vierge, puis on entre dans le mode Edition en faisant un clic droit dans la page (j’ai pris l’habitude de dézoomer dans mon navigateur, et de cliquer dans la zone grise périphérique pour pouvoir accéder à cette fonction : lorsque le composant html recouvre toute la page, il est difficile ensuite de l’« attraper »…) :

et de nouveau un clic droit avec Ajouter du texte / html

Pour éditer la page ainsi construite, une fois qu’on est sur le design, on fait clic droit n’importe où sur la page dans la zone grise :

puis on passe en mode Edition,
par exemple :

Ensuite, clic droit sur l’élément à éditer

On entre ensuite dans la Configuration du composant, boite de dialogue dans laquelle je regle 2-3 détails (dimensions en pixels de la vue largeur x hauteur - dépend de votre tablette - avec couleur de fond, etc) et surtout où je colle mon html dans la partie inférieure droite (et c’est là que les puristes vont sans doute me lâcher :sweat_smile: :rofl:),
cf. ci-après :

Quand j’ai fini ce que je voulais faire, je clique sur Sauvegarder en haut à droite de la fenêtre

Et ça sauvegarde la page :white_check_mark: :smiling_face:

→ C’est ce principe que je répète à chaque fois que je veux éditer une page.
Pas le plus simple, ni le plus fluide et safe (on peut planter un design avec une erreur de code), mais cela me convenait faute d’avoir trouvé mieux…


Ci-dessous le détail du code de chaque page :

Je gère le css via un fichier que j’invite en preambule de chaque page html
<LINK href="menu2/menu.css" rel="stylesheet" type="text/css">

(Bon, parfois le css est en dur dans le html, pour des raisons de tests, ou de je ne sais plus trop :innocent: Ce sera à nettoyer à l’occasion…)

Dépliez la petite flêche ci-dessous pour voir le contenu du fichier menu.css (je ferai pareil plus bas pour les autres)

:point_down:

menu.css
.grid-container {
  display: grid;
  gap: 6px;
  background-color: black;
  padding: 10px;
  border-radius: 20px;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-template-rows: auto;
  width: 2000px;
  height: 1200px;
}

.grid-veille {
  position: relative;
  display: block;
}

.grid-item {
  border-radius: 20px;
  background-color: #242424;
  text-align: center;
  padding: 10px;
  font-size: 16px;
  line-height: 1.5;
  position: relative;
  display: block;
  color: white;
  margin: 5px 5px 5px 5px;
}

.grid-item-back {
  border-radius: 20px;
  background-color: #242424;
  text-align: center;
  padding: 10px;
  font-size: 16px;
  line-height: 1.5;
  position: relative;
  display: block;
  color: white;
  margin: 5px 5px 5px 5px;
  height: 221px;
  width: 267px;
  right: -1700px;
  bottom: -945px;
}

.grid-item-diesel-map {
  border-radius: 20px;
  background-color: #242424;
  text-align: center;
  padding: 10px;
  font-size: 16px;
  line-height: 1.5;
  position: relative;
  display: block;
  color: white;
  margin: 5px 5px 5px 5px;
  height: 221px;
  width: 267px;
  right: -1416px;
  bottom: -710px;
}


.data-top-left {
  display: inline-block;
  line-height: 1.5;
  font-size: 20px;
  text-align: left;
  position: absolute;
  top: 8px;
  left: 12px;
  color: #434343;

}

.data-top-center {
  display: inline-block;
  line-height: 1.5;
  font-size: 20px;
  text-align: center;
  position: absolute;
  width: 170px;
  top: 8px;
  left: 50%;
  margin: 0 0 0 -85px;
  color: white;
  
}

.data-top-center-2 {
  display: inline-block;
  line-height: 1.5;
  font-size: 20px;
  text-align: center;
  position: absolute;
  width: 300px;
  top: 8px;
  left: 50%;
  margin: 0 0 0 -150px;
  color: white;
  
}

.data-top-center-3 {
  display: inline-block;
  line-height: 1.5;
  font-size: 20px;
  text-align: center;
  position: absolute;
  width: 600px;
  top: 8px;
  left: 50%;
  margin: 0 0 0 -300px;
  color: white;
  
}


.data-top-right {
  display: inline-block;
  line-height: 1.5;
  font-size: 20px;
  text-align: right;
  position: absolute;
  top: 8px;
  right: 12px;
  color: #434343;
 
}



.data-middle-2-btn-left {
  display: inline-block;
  width: 80px;
  height: 100px;
  position: absolute;
  text-align: center;
  top: 50%;
  left: 0px;
  margin: -60px 0 0 35px;
}

.data-middle-2-btn-right {
  display: inline-block;
  width: 80px;
  height: 100px;
  position: absolute;
  text-align: center;
  top: 50%;
  right: 35px;
  margin: -60px 0 0 0;
}



.data-middle {
  display: inline-block;
  width: 200px;
  height: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -50px 0 0 -100px;
  background-color: none;
}


.elec-logo {
  display: inline-block;
  width: 80px;
  height: 100px;
  position: absolute;
  top: 50%;
  left: 0px;
  margin: -50px 0 0 34px;
  background-color: none;
}




.elec-hc {
  display: inline-block;
  width: 150px;
  height: 50px;
  position: absolute;
  line-height: 1.05em;
  top: 50%;
  right: 18px;
  margin: -55px 0 0 -20px;
  background-color: none;
  font-size: 30px;
  font-weight: ;
  text-align: justify;
}

.elec-hp {
  display: inline-block;
  width: 150px;
  height: 50px;
  position: absolute;
  line-height: 1.05em;
  top: 50%;
  right: 18px;
  margin: -20px 0 0 -20px;
  background-color: none;
  font-size: 30px;
  font-weight: ;
  text-align: justify;
}

.elec-line {
  display: inline-block;
  width: 125px;
  height: 3px;
  border-top: 3px solid #ffffff;
  position: absolute;
  top: 50%;
  right: 43px;
  margin: 16px 0 0 -20px;
  font-size: 30px;
  font-weight: ;
  text-align: justify;
}

.elec-total {
  display: inline-block;
  width: 150px;
  height: 50px;
  position: absolute;
  line-height: 1.05em;
  top: 50%;
  right: 18px;
  margin: 22px 0 0 -15px;
  background-color: none;
  font-size: 30px;
  font-weight: none;
  text-align: justify;
  color : white;
}






.water-ef {
  display: inline-block;
  width: 105px;
  height: 50px;
  position: absolute;
  line-height: 1.05em;
  top: 50%;
  right: 36px;
  margin: -55px 0 0 -20px;
  background-color: none;
  font-size: 30px;
  font-weight: ;
  text-align: justify;
}

.water-ec {
  display: inline-block;
  width: 105px;
  height: 50px;
  position: absolute;
  line-height: 1.05em;
  top: 50%;
  right: 36px;
  margin: -20px 0 0 -20px;
  background-color: none;
  font-size: 30px;
  font-weight: ;
  text-align: justify;
}

.water-line {
  display: inline-block;
  width: 100px;
  height: 3px;
  border-top: 3px solid white;
  position: absolute;
  top: 50%;
  right: 35px;
  margin: 16px 0 0 -20px;
  font-size: 30px;
  font-weight: ;
  text-align: justify;
}

.water-total {
  display: inline-block;
  width: 111px;
  height: 50px;
  position: absolute;
  line-height: 1.05em;
  top: 50%;
  right: 36px;
  margin: 22px 0 0 -15px;
  background-color: none;
  font-size: 30px;
  font-weight: none;
  text-align: justify;
  color : white;
}








.water-logo {
  display: inline-block;
  width: 80px;
  height: 100px;
  position: absolute;
  top: 50%;
  left: 0px;
  margin: -50px 0 0 34px;
  background-color: none;
}

.data-middle-2 {
  display: inline-block;
  width: 300px;
  height: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -50px 0 0 -150px;
  background-color: none;
}

.th-logo {
  display: inline-block;
  width: 60px;
  height: 100px;
  position: absolute;
  top: 50%;
  left: 32%;
  margin: -33px 0 0 -35px;
  background-color: none;
}

.th-temp {
  display: inline-block;
  justify-content: center;
  width: 210px;
  height: 100px;
  position: absolute;
  line-height: 1.05em;
  top: 50%;
  right: 145px;
  margin: -50px 0 0 -20px;
  background-color: none;
  font-size: 90px;
  font-weight: bold;
  text-align: center;
  
}

.cond-logo {
  display: inline-block;
  width: 100px;
  height: 100px;
  position: absolute;
  top: 50%;
  left: 0px;
  margin: -66px 0 0 32px;
  background-color: none;
}

.cond-temp {
  display: inline-block;
  justify-content: center;
  width: 270px;
  height: 100px;
  position: absolute;
  line-height: 1.05em;
  top: 50%;
  right: 140px;
  margin: -70px 0 0 -20px;
  background-color: none;
  font-size: 90px;
  font-weight: bold;
  text-align: center;
}

.cond-descr {
  display: inline-block;
  justify-content: center;
  width: 270px;
  height: 100px;
  position: absolute;
  line-height: 1.05em;
  top: 50%;
  right: 140px;
  margin: 20px 0 0 -20px;
  background-color: none;
  font-size: 40px;
  font-weight: bold;
  text-align: center;
}

.cond-temp-max {
  display: inline-block;
  justify-content: center;
  width: 80px;
  height: 50px;
  position: absolute;
  line-height: 1.05em;
  top: 50%;
  right: 48px;
  margin: -60px 0 0 -20px;
  background-color: none;
  font-size: 35px;
  font-weight: bold;
  text-align: center;
  color: #c28689;
}

.cond-temp-min {
  display: inline-block;
  justify-content: center;
  width: 80px;
  height: 50px;
  position: absolute;
  line-height: 1.05em;
  top: 50%;
  right: 48px;
  margin: 25px 0 0 -20px;
  background-color: none;
  font-size: 35px;
  font-weight: bold;
  text-align: center;
   color: #5a8689;
}

.cond-temp-evol {
  display: inline-block;
  width: 80px;
  height: 90px;
  position: absolute;
  text-align: center;
  top: 50%;
  right: 35px;
  margin: -40px 0 0 0;
  background: -webkit-linear-gradient(#c28689, #c28689, #5a8689, #5a8689);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

}


.data-bottom-left {
  display: inline-block;
  line-height: 1.5;
  font-size: 20px;
  text-align: left;
  position: absolute;
  bottom: 8px;
  left: 12px;
  color: #434343;

}


.data-bottom-left-cam {
  display: inline-block;
  line-height: 1.5;
  font-size: 20px;
  text-align: left;
  position: absolute;
  bottom: 8px;
  left: 12px;
  color: red;
  font-weight: bold;

}

.dot {
  height: 14px;
  width: 14px;
  background-color: red;
  border-radius: 50%;
  display: inline-block;
}

.data-bottom-center {
  display: inline-block;
  line-height: 1.5;
  font-size: 20px;
  text-align: center;
  position: absolute;
  width: 150px;
  bottom: 8px;
  left: 50%;
  margin: 0 0 0 -75px;
  color: #434343;
  
}


.data-bottom-right {
  display: inline-block;
  line-height: 1.5;
  font-size: 20px;
  text-align: right;
  position: absolute;
  bottom: 8px;
  right: 12px;
  color: #434343;
 
}

.data-bottom-pb {
  display: inline-block;
  line-height: 1.5;
  font-size: 25px;
  text-align: center;
  position: absolute;
  width: 278px;
  bottom: 8px;
  left: 50%;
  margin: 0 0 0 -138px;
  color: white;
  font-weight: bold;
}

.data-dieselplace {
  display: inline-block;
  line-height: 1.5;
  font-size: 18px;
  text-align: center;
  position: absolute;
  width: 220px;
  max-width: 220px;
  bottom: 10px;
  margin: 0 0 0 -110px;
  color: white;
  font-weight: bold;
}

.data-dieselprice {
  display: inline-block;
  line-height: 1.5;
  font-size: 35px;
  text-align: center;
  position: absolute;
  width: 268px;
  bottom: 60px;
  margin: 0 0 0 -134px;
  color: white;
  font-weight: bold;
}

.data-dieselprice-sticker {
  display: inline-block;
  line-height: 1.5;
  font-size: 30px;
  text-align: center;
  position: absolute;
  width: 420px;
  bottom: 4px;
  margin: 0 0 0 -134px;
  color: white;
  font-weight: bold;
}

.data-middle-diesel {
  display: inline-block;
  width: 100px;
  height: 100px;
  position: absolute;
  top: 50px;
  margin: 0 0 0 -50px;
  background-color: none;
  font-size: 10px;
}



.fas .fab .far {
   display: inline-block;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
}




.child2 {
  width: 200px;
  height: 100px;
  position: relative;
  top: 50%;
  left: 50%;
  margin: -50px 0 0 -100px;
}

.child3 {
  width: 200px;
  height: 150px;
  position: relative;
  top: 50%;
  left: 50%;
  margin: -60px 0 0 -60px;
  line-height: 2;
  text-align: left;
  line-height: 1.5;
  font-size: 15px;

}

.child3bottom {
  line-height: 1.5;
  font-size: 15px;
}



  
  

.fas {
    padding: 0px;
  

}

.item1 {
  grid-column: 1 / span 2;
  grid-row: 1;


}

.item7 {
  background-color: red;
}

.item15 {
  background-color: red;
}

.item21yellow {
  background-color: #ffc63e;
}

.item21grey {
  background-color: #242424;
}

.item21brown {
  background-color: #974957;
}

.item8 {
  grid-column: 1 / span 2;
  grid-row: 2;
}


.item4 {
  grid-column: 4 / span 3;
  grid-row: 1;
}

.item16 {
  grid-column: 4 / span 3;
  grid-row: 4 / span 2;
}


.item30 {
  grid-column: 4 / span 4;
  grid-row: 2 / span 2;
}




.pres-logo-1 {
  display: inline-block;
  width: 90px;
  height: 60px;
  position: absolute;
  line-height: 1.05em;
  top: 0;
  left: 45px;
  margin: 68px 0 0 0;
  background-color: none;
  font-size: 22px;
  font-weight: ;
  text-align: left;
}

.pres-logo-2 {
  display: inline-block;
  width: 90px;
  height: 60px;
  position: absolute;
  line-height: 1.05em;
  top: 0;
  right: 45px;
  margin: 68px 0 0 0;
  background-color: none;
  font-size: 22px;
  font-weight: ;
  text-align: right;
}





.pres-prenom-1 {
  display: inline-block;
  width: 90px;
  height: 30px;
  position: absolute;
  line-height: 1.05em;
  top: 0;
  left: 48px;
  margin: 138px 0 0 0;
  background-color: none;
  font-size: 25px;
  font-weight: ;
  text-align: left;
}

.pres-prenom-2 {
  display: inline-block;
  width: 90px;
  height: 30px;
  position: absolute;
  line-height: 1.05em;
  top: 0;
  right: 32px;
  margin: 138px 0 0 0;
  background-color: none;
  font-size: 25px;
  font-weight: ;
  text-align: left;
}



.hygro-top-center {
  display: inline-block;
  justify-content: center;
  width: 550px;
  height: 85px;
  position: absolute;
  line-height: 1.05em;
  top: 80px;
  margin: 0 0 0 -275px;
  background-color: none;
  font-size: 70px;
  font-weight: bold;
  text-align: center;
}


.date-top-center-2 {
  display: inline-block;
  justify-content: center;
  width: 840px;
  height: 85px;
  position: absolute;
  line-height: 1.05em;
  top: 80px;
  margin: 0 0 0 -420px;
  background-color: none;
  font-size: 70px;
  font-weight: bold;
  text-align: center;
}

.date-veille {
  display: inline-block;
  justify-content: center;
  width: 2000px;
  height: 120px;
  position: absolute;
  line-height: 1.05em;
  top: 730px;
  margin: 0 0 0 0;
  background-color: none;
  font-size: 130px;
  font-weight: bold;
  text-align: center;
  color: #82e58a;
}

.cond1-center {
  display: inline-block;
  justify-content: center;
  width: 840px;
  height: 85px;
  position: absolute;
  line-height: 1.05em;
  top: 80px;
  margin: 0 0 0 -562px;
  background-color: none;
  font-size: 70px;
  font-weight: bold;
  text-align: center;
}

.cond1veille {
  display: inline-block;
  justify-content: center;
  width: 1850px;
  height: 100px;
  position: absolute;
  line-height: 1.05em;
  top: 50px;
  margin: 0 0 0 -562px;
  background-color: none;
  font-size: 100px;
  font-weight: bold;
  text-align: right;
  right: 50px;
}

.tempo-ecran-veille-dujour {
  display: inline-block;
  justify-content: center;
  width: 1850px;
  height: 100px;
  position: absolute;
  line-height: 1.05em;
  bottom: 150px;
  margin: 0 0 0 -562px;
  background-color: none;
  font-size: 60px;
  font-weight: normal;
  text-align: right;
  right: 50px;
}

.TEMPO_BLANC {
  background-color: #bbb;
  color: #bbb;
}

.TEMPO_ROUGE {
  background-color: #e84b3c;
  color: #e84b3c;
}

.TEMPO_BLEU {
  background-color: #3997d3;
  color: #3997d3;
}

.NON_DEFINI {
  background-color: #222222;
  color: #222222;
}

.TEMPO-CIRCLE {
  height: 70px;
  width: 70px;
  border-radius: 50%;
  display: inline-block
}


.tempo-ecran-veille-demain {
  display: inline-block;
  justify-content: center;
  width: 1850px;
  height: 100px;
  position: absolute;
  line-height: 1.05em;
  bottom: 50px;
  margin: 0 0 0 -562px;
  background-color: none;
  font-size: 60px;
  font-weight: normal;
  text-align: right;
  right: 50px;
}


.tempext1-center {
  display: inline-block;
  justify-content: center;
  width: 320px;
  height: 85px;
  position: absolute;
  line-height: 1.05em;
  top: 80px;
  margin: 0 0 0 200px;
  background-color: none;
  font-size: 70px;
  font-weight: bold;
  text-align: right;
}


.tempveille {
  display: inline-block;
  justify-content: center;
  width: 320px;
  height: 100px;
  position: absolute;
  line-height: 1.05em;
  top: 150px;
  margin: 0 0 0 200px;
  background-color: none;
  font-size: 100px;
  font-weight: bold;
  text-align: right;
  right: 50px;
}


.tempextmax-center {
  display: inline-block;
  justify-content: center;
  width: 320px;
  height: 85px;
  position: absolute;
  line-height: 1.05em;
  top: 280px;
  margin: 0 0 0 200px;
  background-color: none;
  font-size: 70px;
  /* font-weight: bold; */
  text-align: right;
  color: #c28689;
}

.tempextmin-center {
  display: inline-block;
  justify-content: center;
  width: 320px;
  height: 85px;
  position: absolute;
  line-height: 1.05em;
  top: 354px;
  margin: 0 0 0 200px;
  background-color: none;
  font-size: 70px;
  /* font-weight: bold; */
  text-align: right;
  color: #598689;
}

.leversun {
  display: inline-block;
  justify-content: center;
  width: 220px;
  height: 60px;
  position: absolute;
  line-height: 1.05em;
  top: 294px;
  margin: 0 0 0 -520px;
  background-color: none;
  font-size: 30px;
  text-align: left;
  color: #ffff7c;
}

.couchersun {
  display: inline-block;
  justify-content: center;
  width: 220px;
  height: 60px;
  position: absolute;
  line-height: 1.05em;
  top: 344px;
  margin: 0 0 0 -520px;
  background-color: none;
  font-size: 30px;
  text-align: left;
  color: #85b4ff;
}

.ecartjour {
  display: inline-block;
  justify-content: center;
  width: 220px;
  height: 60px;
  position: absolute;
  line-height: 1.05em;
  top: 394px;
  margin: 0 0 0 -520px;
  background-color: none;
  font-size: 30px;
  text-align: left;
  color: red;
}


@font-face{
 font-family:"digital-clock";
 src: url("font/Digital_Play.ttf");
}

.heure-top-center-2 {
  display: inline-block;
  justify-content: center;
  width: 270px;
  height: 85px;
  line-height: 1.05em;
  position: absolute;
  top: 80px;
  background-color: none;
  font-size: 70px;
  font-weight: bold;
  text-align: center;
  margin: 0 0 0 -135px;
  color: #82e58a;
}

.heure-veille {
  display: inline-block;
  justify-content: center;
  width: 2000px;
  height: 470px;
  line-height: 1.05em;
  position: absolute;
  background-color: none;
  font-size: 400px;
  font-weight: bold;
  text-align: center;
  margin: 280px 0 0 0;
  color: #82e58a;
}



.marquee {
  height: 0px;
}


.separator {
  animation: blinker 1s linear infinite;
  animation-timing-function: steps(1);
}

@keyframes blinker {  
  50% { opacity: 0; }
}

.frame-container {
  width: calc(300px * 1.70);
  height: calc(600px * 1.70);
  position: absolute;
  margin: 0 0 0 0;
  left: 740px;
  top: 90px;
}

.frame-content {
  width: 300px;
  height: 600px;
  transform: scale(1.70);
  transform-origin: 0 0;
  position: absolute;
  left: 0;
  top: 0;
}


.carbu-map-1 {
  width: 150px;
  height: 50px;
  border-radius: 10px;
  background-color: red;
  position: absolute;
  left: 630px;
  top: 82px;
}

.carbu-map-2 {
  width: 150px;
  height: 50px;
  border-radius: 10px;
  background-color: red;
  position: absolute;
  left: 810px;
  top: 460px;
}

.carbu-map-3 {
  width: 150px;
  height: 50px;
  border-radius: 10px;
  background-color: red;
  position: absolute;
  left: 1080px;
  top: 645px;
}

.carbu-map-4 {
  width: 150px;
  height: 50px;
  border-radius: 10px;
  background-color: red;
  position: absolute;
  left: 1370px;
  top: 1087px;
}

1. Ecran de veille :
C’est la page affichée en permanence lorsque la gestion de présence détecte quelqu’un dans la maison. La tablette étant à un carrefour de circulation c’est pratique d’y voir l’heure et 2-3 trucs (météo sommaire, couleur tempo EDF du jour et de demain…).

veille.html

<LINK href="menu2/menu.css" rel="stylesheet" type="text/css">
  
  
  <div class="grid-veille">
    		<!-- <div class="data-top-left"><t>Data1</t></div>	-->
     <!-- 		<div class="data-top-center"><t>Heure</t></div> -->
     	 <!-- 	<div class="data-top-right"><t>Data2</t></div> -->
     		<!-- 	<div class="data-middle"><i class="fas fa-compact-disc fa-6x"></i></div>-->
            	<div class="heure-veille"><t id="hours"></t><t class="separator">:</t><t id="minutes"></t></div> 
				<div class="date-veille"><t id="d1"></t></div>
      	<!--	<div class="data-bottom-left"><t>Data3</t></div> -->
      		<!-- <div class="data-bottom-center"><t>Data4</t></div> -->
      		<!-- <div class="data-bottom-right"><t>Data5</t></div> -->
    </div>  
 
<script>
    var oldTime;

function setTime() {
  var time = new Date().toLocaleTimeString('fr-FR', 
     { hour12: false, hour: 'numeric', minute: 'numeric' });
  if (oldTime === time) {
    return;
  }
  oldTime = time;
  time = time.split(':');
  document.querySelector('#hours').innerText = time[0];
  document.querySelector('#minutes').innerText = time[1];
}

setInterval( setTime, 1000);
setTime();
    </script>

          <script>
let date1 = new Date();
let dateLocale = date1.toLocaleString('fr-FR',{
    weekday: 'long',
//    year: 'numeric',
    month: 'long',
    day: 'numeric',
 //   hour: 'numeric',
 //   minute: 'numeric',
//    second: 'numeric'
});
document.getElementById('d1').innerHTML = dateLocale;
    </script>


  <div class="tempveille"><t class="tempext1"></t>°C</div> 
   <script>
		jeedom.cmd.update['805'] = function(_options){
			jeedom.cmd.execute({ // Récupération de la valeur  
				id: 805,
				success:  function(valeur_courante) {
                 // alert(valeur_courante);
					$('.tempext1').text(valeur_courante);
				}
			})   
		};
       		jeedom.cmd.update['805']();
      </script>

        		<div class="cond1veille"><t class="cond1"></t></div> 
   <script>
		jeedom.cmd.update['289'] = function(_options){
			jeedom.cmd.execute({ // Récupération de la valeur  
				id: 289,
				success:  function(valeur_courante) {
                 // alert(valeur_courante);
					$('.cond1').text(valeur_courante);
				}
			})   
		};
       		jeedom.cmd.update['289']();
      </script>


     <script>
		jeedom.cmd.update['3094'] = function(_options){
			jeedom.cmd.execute({ // Récupération de la valeur  
				id: 3094,
				success:  function(valeur_courante) {
                 // alert(valeur_courante);
					$('#tempo-aujd').addClass(valeur_courante);
                    $('#tempo-aujd-txt').addClass(valeur_courante);
				}
			})   
		};
       		jeedom.cmd.update['3094']();
      </script>
  
  <div class="tempo-ecran-veille-dujour">
    <div id="tempo-aujd" class=" TEMPO-CIRCLE"></div>
    <div id="tempo-aujd-txt" class="" style="background: none; margin-right: 100px;margin-top: -75px;">Aujourd'hui</div>

  </div>
  
  
     <script>
		jeedom.cmd.update['3095'] = function(_options){
			jeedom.cmd.execute({ // Récupération de la valeur  
				id: 3095,
				success:  function(valeur_courante) {
                 // alert(valeur_courante);
					$('#tempo-demain').addClass(valeur_courante);
                  $('#tempo-demain-txt').addClass(valeur_courante);

				}
			})   
		};
       		jeedom.cmd.update['3095']();
      </script>
  
    <div class="tempo-ecran-veille-demain">
    <div id="tempo-demain" class="TEMPO-CIRCLE"></div>
    <div id="tempo-demain-txt" class="" style="background: none; margin-right: 100px;margin-top: -75px;">Demain</div>
      
  </div>