Sartog - De retour (un peu) et un nouveau design en cours

Hello,

Cela serait bien compliqué à faire puisque le design contient des tas d’informations présentes chez l’auteur du design et que les autres n’ont pas (les modules ne sont pas les mêmes, les numéros de commandes d’un même module ne seront pas non plus les mêmes…).

Oui. Je me doute bien et je comprends bien la logique
@Tonybot77 comment est tu arrivé à ce résultat pour la partie température ?
Je trouve ca top. Widget personnalisé ? Possibilité de le partager ?

salut !!

page chauffage ou en haut a droite de la page acceuil ??

1 « J'aime »

J’ai envie de dire les deux. Je suis vraiment impressionné par la qualité de ton design

Bonsoir à tous,

Je suis devenu très fan de ce design aussi.

J’ai un peu galéré aussi pour les icônes et css.

Pour ma part, j’ai respecté cette arborescence

Pour les extensions de fichiers, jeexplore fini par corriger tout seul.

pour la page thermostats j’utilise le plugin thermostats avec le le plugin thermostat alternatview comme widget

et pour les valeurs de température de la page accueil j’utilise le widget température_circle

2 « J'aime »

Merci beaucoup !

1 « J'aime »

Merci pour ton retour bibikid :wink:
J’ai un peu la meme arborescence que toi, je n ai juste pas le repertoire « font », tu as quoi dans celui la toi?
A part ca, et certains fichiers css qui sont toujours interprétés comme des documents textes (j’ai l’impression que c est les css les plus lourds qui sont comme ca…), j’ai beau relire mes fichiers et refaire les chemins, je ne comprends pas ce qui cloche… :upside_down_face:

Au pire demain, je vais tout supprimer et tout recommencer, des fois que… :grinning_face_with_smiling_eyes:

1 « J'aime »

Hello! Bon j’ai tout repris a zéro, j’ai tout refait… et ca marche parfaitement! :sweat_smile:


Je t’ai piqué ton fond Xav-74 car je le trouvais top! :slight_smile:
J’en ai profité pour faire qques modifs mineurs…
Je sais pas si vous avez remarqué d’ailleurs, mais les temp mini et maxi remontées du plugin weather ne sont pas vraiment les mini maxi de la journée, je sais pas a quoi ca correspond vraiment… Du coup je prends ces infos du plugin MeteoFrance…
Maintenant je continue le reste du plugin :grinning_face_with_smiling_eyes:

5 « J'aime »

Super, désolé de n’avoir répondu mais j’étais en déplacement.

Suivant la source d’information, tu n’as pas forcement la même météo / même température.
Cela est lié, si j’ai bien compris, aux stations météos utilisés par ces sites.

Par exemple, la météo la plus fiable pour chez moi est sur le site américain de darksky alors que meteoFrance sont à l’Ouest.

Bonjour SARTOG,
C’est un magnifique travail que j’aimerai adapté à mon utilisation.
J’ai beau lire, relire, chercher, tester, c’est un échec pour moi.
J’ai un design simple que j’utilise déjà mais pour le tiens je n’arrive à rien.
J’ai bien intégré dans la partie css du menu présentation avancée les lignes de code que tu as mise en ligne sur le forum mais rien.
Je suis sur un rasperrypi4 en debian buster avec jeedom en 4.1.28
Je tourne en rond et je m’enfonce. Si tu as 5mn en fait je pense qu’il en faut plus, peux tu m’aider à partir du bon pied. La base du CSS de présentation avancée et du code de départ dés que j’attaque le design.
C’est une bouée à la mer.
Cordialement
Gérard

Salut ZIGJACK, j’en suis au même point que toi et je craque mais je ne lâche pas l’affaire.
Si cela change je te contacterai.

Bonjour Gerard.

Je vais essayer de t’aider autant que possible (je vais rentrer très dans les détails, désolé si c’est trop).

Pour commencer et faire simple, nous allons commencer avec un cadre simple.
Pour cela, il te faut accéder au Personnalisation avancée :
Sans titre

Une fois dans les Personnalisation avancée, il te faut t’assurer que tu es sur l’onglet Desktop (les onglets sont à gauche) et que tu as bien la case Activer de cochés (à droite) :

Ensuite, dans le bloc css tu va y mettre ce code :

[data-page="plan"] .div_displayObject {
  background: #E7EEF7 !important;
  font-family: system-ui !important;
}

[data-page="plan"] .mia-cadre{
  width: 100%;
  height: 100%;
  background: transparent;
  border-radius: 32px; 
  box-shadow: 5px 5px 10px 5px rgba(136, 165, 191, 0.5),
    -5px -5px 10px 5px rgba(255,255,255, 0.8);
}

Ensuite tu va sur ton design (existant ou une nouvelle page).
Normalement le background de ta page devrait être un blanc cassé :
Capture1
Si ce n’est pas le cas, c’est qu’il y a un problème de prise en compte du css.
Essais d’actualiser la page en purgeant le cache (ctrl F5 sous la plupart des navigateurs web).

Sur ton design, tu fais un clique droit Edition.
Tu fais de nouveau un clique droit et tu choisis Ajouter texte/html
Tu fais encore clique droit sur le composant qui vient de s’afficher et Paramètres d’affichage
Capture2

Ce qui est important c’est de bien cocher Transparent et de mettre dans la zone texte :

<div class="mia-cadre"></div>

Si tout fonctionne tu devrais avoir cela :
Capture4

Si ce n’est pas le cas, n’hésite pas à poster les captures d’écran du résultat.
Tu peux aussi regarder avec l’inspecteur ce que la page web contient.
Par exemple, pour le test que l’on vient de faire voici ce que j’ai avec l’inspecteur web de Chrome (le code à gauche et le css à droite)

2 « J'aime »

Un grand merci à toi SARTOG, c’est bon j’ai le résultat que tu me dis.
Je suis trop content

De rien, n’hésite pas :wink:

Merci pour ta patience. Maintenant je teste tout ce que tu as mis en ligne.
Et cela fonctionne pour les différents type de cadres et l’horloge qui s’affichent bien.

Salut @zigjack .
Tu as utilisé quoi pour obtenir les « petits personnages » pour l’indication de présence sur ton design ?
Merci d’avance pour ton retour.

Bonjour,
Je suis parti aussi sur le style Neumorphism et merci à tous pour les conseils.
J’ai plusieurs équipements KNX que je veux customiser pour faire un design Neumorphism.
J’ai déjà intégrer les cadres dans la programmation avancée (merci Sartog) et le menu (merci Noodom).

Pour les équipement KNX, je ne vois pas où intégrer par exemple pour une lampe ci dessous l’utilisation du mia-bouton-on ou Mia-bouton-off selon la commande et l’état de la lampe.
Ou même question pour une température, …
D’avance merci.

image

Voici mon premier test pour me roder. Pas trop compliqué car j’ai adapté mon design actuel pour exercice. Je vais essayer d’aller plus loin maintenant. Un grand merci à toi.

2 « J'aime »

Bonsoir SARTOG,
Peux tu m’aider pour la partie météo?
J’ai suivi ton tuto mais à l’affichage je n’ai qu’une ligne contenant toutes les valeurs pour la météo. J’ai réalisé les mêmes actions que zigjack dans son poste 76 et j’ai le même résultat. Il y a juste les icones de weather-underground que je n’ai pas récupérées car je ne sais pas comment faire
Cordialement