Avant toute chose merci de (re)prendre connaissance de la charte et de la respecter.
Pour résumer :
- Avant de poser une question, je cherche si la réponse existe
- Je suis poli, courtois et je respecte tout un chacun sur le forum
- Si un post m'agace : je m'en éloigne plutôt que de répondre d'une façon qui pourrait être mal interprétée


Il n'est jamais du luxe que de rappeler des choses simples :
Courtoisie, amabilité, politesse et bonne humeur sont les maîtres mots pour un forum sympathique, bienveillant et accueillant :)

Toute la communauté vous remercie

Mode design

Cette partie est réservée à l'utilisation de l'interface web de configuration de JEEDOM
benj29
Actif
Messages : 1527
Inscription : 26 mars 2017, 09:57

Re: Mode design

Message par benj29 » 21 févr. 2018, 09:46

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 :
Image

Qui forcément donne ça :
Image

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).

Image

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
Actif
Messages : 789
Inscription : 15 mars 2015, 16:14
Localisation : Toulouse

Re: Mode design

Message par fcna » 21 févr. 2018, 17:27

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
Mini +
Fibaro FGMS-001
Qubino Fil Pilote 6 / Module Vlts roulants
Aeon Labs mono G2 60A
Fibaro Wall Plug / Smoke Sensor

ImperiHome Standard System /Pushing Box/Energie/ Philips Hue / Agenda / Clock / Géolocalisation / Themes / ...

Avatar de l’utilisateur
Seki
Actif
Messages : 518
Inscription : 06 sept. 2017, 21:50

Re: Mode design

Message par Seki » 21 févr. 2018, 18:40

frankie666 a écrit :
19 févr. 2018, 12:14
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
Timide
Messages : 194
Inscription : 12 janv. 2016, 12:15
Localisation : Suisse

Re: Mode design

Message par frankie666 » 22 févr. 2018, 19:37

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>
TaG a écrit :
20 févr. 2018, 08:08
frankie666 a écrit :
19 févr. 2018, 12:14
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.
Jeedom 3.1.7 sous Raspbian / Linux Jeedom 4.9.59-v7+ #1047 SMP Sun Oct 29 12:19:23 GMT 2017 armv7l GNU/Linux [9.1]

TaG
Actif
Messages : 1011
Inscription : 26 oct. 2016, 11:02

Re: Mode design

Message par TaG » 24 févr. 2018, 07:35

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
Timide
Messages : 194
Inscription : 12 janv. 2016, 12:15
Localisation : Suisse

Re: Mode design

Message par frankie666 » 24 févr. 2018, 20:47

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
Capture d’écran 2018-02-24 à 20.09.15.png (203.03 Kio) Consulté 263 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.
Jeedom 3.1.7 sous Raspbian / Linux Jeedom 4.9.59-v7+ #1047 SMP Sun Oct 29 12:19:23 GMT 2017 armv7l GNU/Linux [9.1]

TaG
Actif
Messages : 1011
Inscription : 26 oct. 2016, 11:02

Re: Mode design

Message par TaG » 24 févr. 2018, 21:04

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
Timide
Messages : 194
Inscription : 12 janv. 2016, 12:15
Localisation : Suisse

Re: Mode design

Message par frankie666 » 25 févr. 2018, 13:50

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.
Jeedom 3.1.7 sous Raspbian / Linux Jeedom 4.9.59-v7+ #1047 SMP Sun Oct 29 12:19:23 GMT 2017 armv7l GNU/Linux [9.1]

TaG
Actif
Messages : 1011
Inscription : 26 oct. 2016, 11:02

Re: Mode design

Message par TaG » 25 févr. 2018, 17:08

De rien ;).

Oui on cherche souvent des trucs de fou :).

L'important c'est que ça serve ;)!

Adu
Timide
Messages : 9
Inscription : 04 déc. 2017, 16:52

Re: Mode design

Message par Adu » 19 mars 2018, 16:37

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

Avatar de l’utilisateur
loic
Administrateur
Messages : 11343
Inscription : 01 févr. 2014, 16:21

Re: Mode design

Message par loic » 19 mars 2018, 17:04

Bonjour,
Oui tu peux le faire avec jeedom regarder la documentation api json.
Aide nous à t'aider : mets des logs, détaille ton soucis... Vous n'aurez aucune réponse de ma part si votre demande n'est pas détaillée (log, capture d'écran lisible...) ou si vous ne postez pas dans la bonne section

Adu
Timide
Messages : 9
Inscription : 04 déc. 2017, 16:52

Re: Mode design

Message par Adu » 19 mars 2018, 17:38

loic a écrit :
19 mars 2018, 17:04
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 ;)

Répondre

Revenir vers « Portail web classique (Desktop) »

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 1 invité