Design pour tablette

Salut !

Ma femme étant un peu geek et ayant accepté la domotique, elle voudrait une tablette avec des design !
Je suis vraiment naze en design et programmation lol

Elle a un peu fouillé et trouvé ceci
image

Ma question, dans un design Jeedom comment faire ces cadres blancs a bord arrondi ?
Idem les boutons ou infos c’est un cadre avec un autre objet dessus ?

Merci de votre aide

1 « J'aime »

Hello,

lorsque tu as créé un design aux dimensions de la tablette, tu peux, lorsque tu es en mode édition, faire un « ajouter text/html »

un exemple de code qui s’adapte quand tu agrandi le cadre, que j’ai fait à linstant:

<div class="white-rounded">
</div>
<style>
  .white-rounded {
    background-color: white;
    border: 1px solid black;
    border-radius: 15px;
    width: 100%;
    height: 100%;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  }
</style>

tu as plusieurs tutos sur le forum si tu t’y connais pas trop, dont domotech qui explique en vidéo
Design 2/2 - création des cadres - YouTube :wink:

2 « J'aime »

super !! merci je vais regarder cela

Lo,

Un ptit peu hors sujet pour répondre au sujet initial, mais je pense que tu trouveras ton bonheur pour mettre en place un design tip top,
@noodom a le mérite de faire de l’excellent travail, je te conseil de faire un tour sur son Github,
Attention tout de même c’est le roi du traquenard, lol

Au plaisir, bonne soirée,

3 « J'aime »

Salut!

Bon j’ai passé ma nuit de garde à faire des tests !!

1/ J’ai commencé à faire le design ci-dessous dans Jeedom, en utilisant ce que vous m’avez donné ci-dessus et en jouant sur les niveau.

Le hic c’est la difficulté de tout aligner et le temps que cela prends !

2/ Du coup, j’ai capturé cela en image.png et j’ai utilisé Paint !!
Ca va mieux mais c’est pas ca encore

Ma question connaissez vous un soft qui permettrait d’aligner facilement de couper coller aligner ce genre de dessin ?

Est-ce mieux de faire ce genre d’image de fond en *.png (50KO) et y coller les commandes comme dans l’exemple ci-dessous ? Moins gourmand pour Jeedom ?

Merci de votre aide…

Salut!

Dans un design avec menu et une caméra, quand on clique sur la caméra, la fenetre s’ouvre, mais la croix pour la fermer est sous le menu, sur une tablette impossible a fermer.

Auriez vous une solution ?

merci

image

2 « J'aime »

:sweat_smile: :sweat_smile: :sweat_smile: :sweat_smile:

me manque l’imper et le cigarre !!

1 « J'aime »

@kiboost or @Salvialf

Le menu est le menu via le plugin plimp
Auriez vous une idée quant à la modale trop grande et impossible à fermer ?

Merci de votre aide !

Zomm dans le navigateur …

je ne peux pas sur la tablette

bonjour
1 4 carrés c’est pas un temps de fou
surtout que dans la configuration tu as les axes X,Y hauteur,largeur que tu peux (copier/coller)

je te laisse cherché ppur la profondeur (ne sachant pas quel méthode tu as utilisé pour tes menu « camera ») ça répondra peut être à ta question

Ma femme étant un peu geek

laisse la faire son design :slight_smile:

Le menu est au niveau 3 par défaut. C’est mieux en le baissant au niveau 2 ?

J’essaye de regarder rapidement même si je n’ai pas le plugin caméra

Ah c’est le menu niveau 3 ?
Ben oui je pense niveau plus bas ca suffit, pas 0 si on met un fond :wink:

Car ensuite on met rien sur le menu sauf un modal qui s’ouvre trop grande lol

Pas compris :frowning:

C’est pour ça que c’est en beta :wink:

J’essayes de faire la correction ce soir. Rappelles le moi si jamais j’oublies surtout

1 « J'aime »

Bonjour,

comment faire pour avoir, la barre de menu comme sur la vidéo ? Et ouvrir le portail comme il le fait en cliquant sur la caméra ? Merci d’avance

Si te suffit de demander a @Domotech

Bonjour, je me permets de déterrer ce post pour une précision svp sur le code des cadres.
En parfait novice html, je voudrais avoir le code pour intégrer le texte et l’icône comme dans cet exemple :
Capture d'écran 2025-04-13 165930

Je me débrouillerai pour l’adapter à mon cas.

Merci!