[Présentation] F$B33

[guims78]

Allez, je poste mon écran d'accueil, en cours de réalisation... rien de nouveau dans ce fil, mais j'en suis très content.
J'ai récupéré des morceaux à droite et à gauche, les contributeurs se reconnaîtront. Merci à tous !!!

Design.jpg

Très bien ton Design.
Pourrais-tu donner le paramètre CSS que tu as passé dans ton virtuel "Ambiance" ?
J'imagine que tu utilises le format tableau.
Je galère un peu pour trouver les bons paramètres pour bien aligner les infos dans mon tableau.

[Theduck38]

Voilà ma config (très simple en fait) :
- Style générale des cases : padding: 1px 3px 1px 3px;
- En-tête de colonnes : rien
- Lignes avec valeurs : float: left;line-height:30px; (pour la première case avec le libellé texte) // rien // rien
- Sauts de lignes : height: 10px; // height: 10px; // height: 10px;

Si ce n'est pas assez clair, dis-moi... je ferai une copie d'écran.

Toute ma problématique est venue du texte des lignes qui s'affichait un peu plus haut que les valeurs sur la même ligne... j'ai mis un coup d'inspecteur et bloqué la hauteur à 30px pour forcer le centrage. Il y a peut-être plus élégant, mais je ne maîtrise pas assez le css.

Chaque commande ayant une valeur temp/hum/etc.. est affichée avec le widget "line(core)".

[seb49]

J'ai du caca dans les yeux ou quoi, je n'ai pas vu l'image de fond dans le zip ?

[Bosquetia]

Hello theduck,

Moi je serai intéressé de voir comment tu as fait ce résumé batterie avec les petites led

[Theduck38]

Hé hé hé... ce n'est pas de moi :
viewtopic.php?f=50&t=14863&p=512956&hilit=led#p512956
Faut remercier Djal94 + l'auteur du plugin (damanujan) !

Après, c'est juste un tableau de 13 lignes par 2 colonnes. J'ai intercalé des lignes vides pour séparer.

[Theduck38]

J'ai du caca dans les yeux ou quoi, je n'ai pas vu l'image de fond dans le zip ?

Non, elle est donné ailleurs dans le fil... la revoilà :

wall2.jpg (529.79 Kio) Consulté 1531 fois

Attention à la taille par rapport au design !

[Theduck38]

La suite... les températures.

Temperatures.jpg (221.2 Kio) Consulté 1527 fois

[Bosquetia]

Merci Theduck38 pour le lien...

Sympa ton fork de design
Je commence à m'y pencher mais je rame un peu

[seb49]

Merci bcp

[ouquoi]

La suite... les températures.

Temperatures.jpg

Top merci pour le partage ça donne des idées et des bonnes idées

Envoyé avec tapatalk

[Djal94]

Salut tout le monde,

Voici l'évolution du mien :

Jeedom.jpeg (739.1 Kio) Consulté 1463 fois

Bonne soirée

[Bosquetia]

Y a pas à dire, y a des mecs doués pour le design et trouver de bonnes idées !

Les rubans rouge, bleu sur les fenêtres de zones c'est une bonne idée, ainsi que la petite icone en plus du titre...
C'est sûr chacun organise et adapte à ses besoins, mais je suis admiratif de vos créations...

Moi cela reste super basic, fonctionnel mais moche et pour la tablette murale de Madame je vais devoir m'y mettre mais j'ai pas votre talent... scénario, réseau, OS, sécurité OK mais dessin, graphisme et autres je suis aux abonnées absents.

Bravo en tout cas !

[Djal94]

Merci Bosquetia,

Mais la plupart des éléments sont des reprises de ce que d'autres ont fait, et j'ai un peu touché le code derrière (notamment les fenetres).
Et la vérité c'est que je suis pas un créatif pour ma part...

[Bosquetia]

Ben c'est réussi pour un non créatif
Et puis les reprises il faut quand même les assembler avec harmonie, pas évident pour moi...

[guims78]

Voilà ma config (très simple en fait) :
- Style générale des cases : padding: 1px 3px 1px 3px;
- En-tête de colonnes : rien
- Lignes avec valeurs : float: left;line-height:30px; (pour la première case avec le libellé texte) // rien // rien
- Sauts de lignes : height: 10px; // height: 10px; // height: 10px;

Si ce n'est pas assez clair, dis-moi... je ferai une copie d'écran.

Toute ma problématique est venue du texte des lignes qui s'affichait un peu plus haut que les valeurs sur la même ligne... j'ai mis un coup d'inspecteur et bloqué la hauteur à 30px pour forcer le centrage. Il y a peut-être plus élégant, mais je ne maîtrise pas assez le css.

Chaque commande ayant une valeur temp/hum/etc.. est affichée avec le widget "line(core)".

J'étais un peu dans le même cas.
Merci pour les infos.

[Theduck38]

Allez, la suite... la page multiroom ; probablement pas finie car j'ai implémenté peu de fonctions.
J'ai honteusement copié les sélecteurs de @Thyer ; c'est vrai que la méthode est top !

J'ai aussi passé la soirée à découvrir comment on écrivait un Widget... même si j'ai pas tout compris, j'ai tout de même réussi à faire ceux qu'on voit en bas pour faire du On/Off ou une commande simple (et paramétrable par couleur, taille et type d'icône, avec des valeurs par défaut).

Multiroom.JPG (205.17 Kio) Consulté 1362 fois

Mais j'ai encore un problème avec les équipements SqueezePlayer qui ont la sale habitude de revenir à la couleur d'origine de leur tuile... même si on customise la couleur dans l'affichage avancé !!!

[Thyer]

Salut,
Le fameux bleu qui reviens toujours
J'ai un peux grugé le truc, j'ai fait une tuile avec un dégrader Bleu / transparent et je remonte le Widget tout en haut comme sur le screen en dessous

SB.PNG (122.4 Kio) Consulté 1339 fois

Code degrader

Code : Tout sélectionner

background: -moz-linear-gradient(top, rgba(52,73,94,1) 63%, rgba(72,103,131,1) 73%, rgba(125,185,232,0) 100%);
background: -webkit-linear-gradient(top, rgba(52,73,94,1) 63%,rgba(72,103,131,1) 73%,rgba(125,185,232,0) 100%);
background: linear-gradient(to bottom, rgba(52,73,94,1) 63%,rgba(72,103,131,1) 73%,rgba(125,185,232,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#34495e', endColorstr='#007db9e8',GradientType=0 );

[Theduck38]

Heu, je ne maîtrise pas assez pour avoir compris où mettre ton code... la tuile d'origine de l'équipement Squeezeplayer n'a pas de personnalisation avancée... du coup tu le mets où ?

J'ai partagé les boutons montrés en bas de mon design 'Multiroom' : widget PowerOnOff dans la catégorie 'Audio/vidéo" :

PowerOnOff.png (25.02 Kio) Consulté 1335 fois

[Thyer]

Oui ben justement comme elle a pas de personnalisation, je la réduit au maximum en hauteur et sur la partie tuile du dessous (text/HTML) j'ajoute mon dégrade.

J'avais déjà posté le code des mes cadres HTML sur ce post avec un dégradé de couleur en font.

Code : Tout sélectionner

<!-- PRINCIPALE -->
	<div style="
    position : relative;
    box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.5);
    min-height: 100%;
    background: -moz-linear-gradient(top, rgba(52,73,94,1) 63%, rgba(72,103,131,1) 73%, rgba(125,185,232,0) 100%);
    background: -webkit-linear-gradient(top, rgba(52,73,94,1) 63%,rgba(72,103,131,1) 73%,rgba(125,185,232,0) 100%);
    background: linear-gradient(to bottom, rgba(52,73,94,1) 63%,rgba(72,103,131,1) 73%,rgba(125,185,232,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#34495e', endColorstr='#007db9e8',GradientType=0 );
    border-radius: 10px 0px 10px 0px;
    ">
        
    <div style="
    position : relative;
    min-height: 100%;
    margin: 0 auto;
    padding-bottom: 0;
    width: 100%;
    ">
    
	<div style="
	height:30px;
	width:30px;
	position:absolute;
	margin-top:6px;
	margin-left:5px;
	max-width:100%;
	height:auto;
    ">
	<img src="THYER/design/ipad/V2/images/HP_MINI.png" height=30px width=30px></div>
       
    <div style="
    padding-top: 10px;
    padding-right:20px;
    font-size:16px;
    height:40px;
    font-family:Arial;
    font-weight:normal;
    text-align:right;
    color: #FFF;
	background: rgb(69,72,77);
	background: -moz-linear-gradient(top, rgba(69,72,77,1) 0%, rgba(0,0,0,1) 100%);
	background: -webkit-linear-gradient(top, rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%);
	background: linear-gradient(to bottom, rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 );
    border-radius: 10px 0px 0px 0px;
    border-bottom: 1px solid #111111;">			
   NOM DE LA TUILE
    </div>

    
    </div>
</div>

[Theduck38]

OK, j'avais pas compris en fait... c'est une tuile en dessous de celle appartenant à l'équipement. !

Merci !