Mode design

[benj29]

Bonjour,

Je ne suis pas un pro du HTML/CSS... mais j'aimerai voir ce que je peux arriver à faire.

En fait, j'utilise le theme Darksobre avec des polices blanches/claires en fait au quotidien sur la gestion de Jeedom (dashboard, etc) et sur mes designs de téléphone (plus lisible sur les écrans LED).

Par contre à la maison sur les tablettes domotiques, je suis parti sur des designs clairs (fond blanc plutôt que noirs) ce qui m'impose de revoir toutes les couleurs des polices.

Le problème c'est que soit je dois doubler tous les virtuels/widgets avec un pour le tél, un pour les designs tablettes (bonjour le bordel à gérer) soit j'utilise le même et je me dis que c'est possible de détecter que je suis sur certains designs et j'y applique un theme différent. Si j'ai bien compris c'est tout l'intérêt du CSS ?

La question, c'est comme je fais ça ? .

Par exemple, j'ai ce virtuel via dashboard ou sur design téléphone :


Qui forcément donne ça :


Je ne comprends pas pourquoi, d'ailleurs, c'est gris et pas blanc . Et du coup j'aurai voulu travailler la couleur à l'élément que j'affiche .

EDIT : j'ai bien tenté à l'instant de doubler ce virtuel en appliquant dans les commandes avancées une couleur noire au texte, mais rien à faire, il reste blanc sur le dashboard et gris clair sur mon design...
Mes connaissances ont des limites .

Un autre exemple, j'ai bien tenté par exemple ici d'uniformiser mon texte ... mais les autres widgets, je n'y arrive pas...
En utilisant les éléments de base (ici plugin groupe), j'ai modifié la couleur du texte en noir mais comment harmoniser avec le même style que les titres à gauche (cf balise plus bas).



De même, je souhaiter forcer la police Montserrat sur mes designs.
Comment je peux le faire ?
Cela doit tourner autour de cette ligne, mais je la mets où ?

Là pour l'instant, à chaque texte que je veux mettre, je fais ce code...

Code : Tout sélectionner

<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<div align=center style="color:rgba(0,0,0,1); font-size:16px; height:30px; padding-top:5px; font-family:Montserrat, Arial;; font-weight:normal;">
<strong>texte que je veux rentrer</strong>
</div>

Mais il doit bien y avoir moyen d'appliquer la police d'une manière globale ?

Pour l'instant, j'ai mis cette ligne dans configuration avancée/JS :

Code : Tout sélectionner

<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>

Et du coup, comment on peut travailler la couleur de la police en fonction d'un élément de texte dans un widget ? d'un virtuel ? d'une action ? d'une information .

Merci pour votre aide !!!!

[fcna]

Bonjour à tous,

Je cherche à faire un widget qui regroupe plusieurs infos.

Pour la valeur, je fais un truc du genre :

// recuperation de la lumiére
jeedom.cmd.execute({
id: pluglumi#id#,
success: function(result) {
$('#Consommation#id#').html(result+" lux")
}
});

ou pluglumi#id# est l'ide de ma commande. Ca marche bien.


Mais, j'aimerais avoir la même chose mais pour le nom, et comme je suis null, je ne comprends pas la doc deveoppeur ////

j'ai essayé avec getname ... mais ca marche pas

[Seki]

Bonjour, est-il possible dans le mode design a partir d'un objet "zone" (ou d'un menu comme ceux qu'on utilise pour appeler une autre page de design) de se déplacer sur le design actuel... J'ai un design pour phone qui fait plusieurs pages en vertical et j'aimerais pouvoir en cliquant me rendre x pages plus sans devoir scroller.
Merci d'avance.

A voir si c'est adaptable à Jeedom.

https://codepen.io/prvnbist/pen/GQMPZq

[frankie666]

Merci TaG avec ton idée je tiens le bon bout.

1. Créer un objet "texte/html" avec "<div id = "NomDuTag"></div>" que je positionne en fonction de ce que je veux voir à l'écran.
2. Créer un autre objet "texte/html" avec "<a href="http://xxx.xxx.x.xx/index.php?v=d&p=pla ... DuTag"></a>" sur l'écran principal sur lequel on click, ce qui nous redirige vers le Tag.

Problème : En cas de connexion hors domicile, ben ca va pas marcher... Comment résoudre ce problème?

Question : Comment modifier le fichier menu de F$33, j'ai essayé comme ci-dessous mais ca marche pas....

<LINK href="montheme/perso.css" rel="stylesheet" type="text/css">

<div class="menu_top">

<ul class="monmenu" style="margin-left: -36px;">

<a onClick="planHeader_id=1; displayPlan();"><li class="monmenu"><div class="imagette"><img src="montheme/images/icon_home.png" height=50px width=50px></div></br></li></a>

<a onClick="planHeader_id=13; displayPlan();"><li class="monmenu"><div class="imagette"><img src="montheme/images/icon_light.png" height=50px width=50px></div></br></li></a>

<a onClick="planHeader_id=14; displayPlan();"><li class="monmenu"><div class="imagette"><img src="montheme/images/icon_chauffage.png" height=50px width=50px></div></br></li></a>

<a onClick="planHeader_id=18; displayPlan();"><li class="monmenu"><div class="imagette"><img src="montheme/images/icon_cam.png" height=50px width=50px></div></br></li></a>

<a href="http://xxx.xxx.x.xx/index.php?v=d&p=pla ... 1#NomDuTag; displayPlan();"><li class="monmenu"><div class="imagette"><img src="montheme/images/icon_reseau.png" height=50px width=50px></div></br></li></a>

<!-- SEPARATION -->
<li class="monmenu_sep" ><div class="imagette"><img src="montheme/images/icon_blank.png" height=50px width=50px></div></br></li>

</ul>

</div>

Bonjour, est-il possible dans le mode design a partir d'un objet "zone" (ou d'un menu comme ceux qu'on utilise pour appeler une autre page de design) de se déplacer sur le design actuel... J'ai un design pour phone qui fait plusieurs pages en vertical et j'aimerais pouvoir en cliquant me rendre x pages plus sans devoir scroller.
Merci d'avance.

Concernant ce point, je pense que tu peux tenter de voir avec les ancres html. Cherches anchors HTML sur Google. Tu peux peut-être en créer et ensuite les mettres en arrière plans de ton design pour que ça soit transparent à l'usage.
Tu met une flèche base et haute dans ton design pour aller la où tu veux.

[TaG]

Frankie,

Concernant les ancres, regarde ici :
https://openclassrooms.com/courses/appr ... -des-liens

Tu verras un plus bas sur la page dans un me u déroulant la façon d'appeler directement l'ancre sans mettre d'URL et donc complètement transparent que tu sois en interne ou en externe.

Concernant ton menu, que veux tu faire ?

[frankie666]

Merci TaG, Openclassrooms est top. J'ai réussi à faire mes ancre interne/externe. Trop simple une fois que tu comprends le principe... Thx.

Maintenant j'aimerais pouvoir appeler mon "ancre" depuis le menu proposé par F$33 et plus par un objet "html/texte"

Donc j'aimerais qu'en clickant sur l'icone ci-dessous (tour jaune) cela me redirige vers mon ancre, donc comment mettre le code "<a href="#Meteo2">Météo</a>" dans le code du menu ?

Capture d’écran 2018-02-24 à 20.09.15.png (203.03 Kio) Consulté 2899 fois

Le code du menu depuis lequel j'aimerais pouvoir appeler mon ancre...

Code : Tout sélectionner

<LINK href="montheme/perso.css" rel="stylesheet" type="text/css">

<div class="menu_top">

<ul class="monmenu" style="margin-left: -36px;">

<a onClick="planHeader_id=1; displayPlan();"><li class="monmenu"><div class="imagette"><img src="montheme/images/icon_home.png" height=50px width=50px></div></br></li></a>

<a onClick="planHeader_id=13; displayPlan();"><li class="monmenu"><div class="imagette"><img src="montheme/images/icon_light.png" height=50px width=50px></div></br></li></a>

<a onClick="planHeader_id=14; displayPlan();"><li class="monmenu"><div class="imagette"><img src="montheme/images/icon_chauffage.png" height=50px width=50px></div></br></li></a>

<a onClick="planHeader_id=18; displayPlan();"><li class="monmenu"><div class="imagette"><img src="montheme/images/icon_cam.png" height=50px width=50px></div></br></li></a>

<!-- SEPARATION -->
<li class="monmenu_sep" ><div class="imagette"><img src="montheme/images/icon_blank.png" height=50px width=50px></div></br></li>

</ul>

</div>

Merci d'avance.

[TaG]

Impec pour les ancres

Concernant le menu, ton code c'est ton menu actuel ? Car l'icône réseau n'est pas dans ton code donné au dessus non ?


Sinon, je remplacerai une ligne de ce style :

<a onClick="planHeader_id=18; displayPlan();"><li class="monmenu"><div class="imagette"><img src="montheme/images/icon_cam.png" height=50px width=50px></div></br></li></a>

Par une ligne de ce style :

<a href="#Meteo2"><li class="monmenu"><div class="imagette"><img src="montheme/images/icon_network.png" height=50px width=50px></div></br></li></a>

Attention au nom de l'icône !!!! Adapte le à ton besoin

Je suis sur téléphone, je peux avoir loupé un caractère du style " ou > sur un copié collé.

Dis nous si ça marche car c'est une bonne idée le menu avec les ancres sur les pages ou tu as besoin de descendre plus bas.

[frankie666]

Un grand merci TaG, c'est bien cela. Je cherchais beaucoup trop compliqué. Pas de problème pour le nom des icônes, c'est tout bon.
Encore merci de ton aide précieuse.

[TaG]

De rien .

Oui on cherche souvent des trucs de fou .

L'important c'est que ça serve !

[Adu]

Bonjour la communauté !

Petite question sur le mode design ... A-t-on la possibilité de faire tout un site en html/bootstrap ? Car j'aimerai pouvoir coder tout un site sur ce Framework, et je ne sais/vois pas comment importer tout ce site pour qu'il soit afficher par Jeedom ?
Ou alors, puis héberger sur le rasp un site web qui interroge Jeedom ?
Pour expliquer un peu plus : sur Domoticz, je peux via une commande récupérer au format JSON l'intégralité de mes périphériques, leur état, etc ....
Et donc c'est "facile" à intégrer dans un site pour qu'il affiche ce que je veux comme je le veux. La même chose est-elle faisable sous Jeedom ?
Merci d'avance pour vos éclaircissements

[loic]

Bonjour,
Oui tu peux le faire avec jeedom regarder la documentation api json.

[Adu]

Bonjour,
Oui tu peux le faire avec jeedom regarder la documentation api json.

Merci, je peux donc me retrousser les manches pour faire mon dashboard

[Fabske]

Hello tout le monde,

Désolé si c'est une question de noob (que je suis), mais j'ai pas trouvé sur le forum. J'ai bien trouvé sur ce thread ce post mais c'était y a un an.
Une photo vaut mieux que 1000 mots, et une videos vaut mieux que 1000 photos . Donc voilà la video: https://streamable.com/txaxc

Quand je crée une zone (également testé avec une photo) je ne peux la placer que dans une zone très limitée. Est-ce normal ? On peut voir les limites de la zone dans la video quand je drag l'élément il s'arrête sur les bords de la zone.

Le seul moyen pour moi de le placer correctement c'est d'aller dans les propriétés et de mettre un X négatif. Après faut surtout plus que je le drag sinon le X revien à minimum 0.

Une idée ?

Merci pour l'aide
Fab

[GéraldB]

Il faut aller dans configurer le design..

[Fabske]

wohou pas caché celui là
Par défaut il pourrait quand même prendre la taille actuelle ...

Bref, merci pour ton aide

[bartounet]

Je relance ce post, car je pensais qu'en 3.3, cela s'arangerait.
Mais je n'arrive toujours pas à configurer un design correctement, pour ne pas avoir à jouer avec les X et les Y

Pourquoi ne peut on pas définir une zone de travail , différente de l'image ??
a chaque fois soit l'image du design est trop grande, soit les zones sont limités

[winhex]

a chaque fois soit l'image du design est trop grande, soit les zones sont limités

déjà faut configurer la taille du design
er y mettre une image de même taille
sinon tu tronques ou tu alourdis l'accès

entre le stylet et le changement de taille via le param d'affichage (qui engendre un x et y different pour le positionnement)

et dans un html empêché le scroll/swipe débordant de la page

on y arrive