Page 1 sur 12

Discution pour un widget fenêtre et volet

Publié : 09 mars 2017, 16:25
par virux
D'abord un merci a @sarakha63 et @Masterfion pour la réalisation du widget et des images (voir article http://sarakha63-domotique.fr/combiner- ... et-jeedom/)

Cela fait un moment que je voulais faire ce genre de widget mais pas très doué en graphics et pas beaucoup de temps....
J'ai donc fait quelques modification pour facilité "l'équation" de l'info du virtuel et faire un affichage plus dynamique du volet comme suggéré dans les commentaire du blog par @cyrilphoenix. (on peu faire plus propre en renommant les images et optimiser le code, c'est plus un proof of concept)

il faut donc remplacer le code par :

Code : Tout sélectionner

<div style="width:98px;min-height:80px;" class="cmd #history# tooltips cmd-widget" data-type="info" data-subtype="numeric" data-cmd_id="#id#" title="#collectDate#">
	<center>
	<span style="font-size: 3.5em;position:relative" id="iconCmd#id#"></span>
	</center>
	<script>
		var $wrp = $('#iconCmd#id#');
		var infos = "#state#".split(";");
		var fenetre="9";
		var volet=null;
		if("#state#" == "" || (infos.length < 2) || isNaN(infos[0]) || isNaN(infos[1])){
			fenetre ="9";
		} else {
			fenetre = infos[0]==0?'2':'1';
			volet = 100-infos[1];
		}
		$wrp.empty();
		$wrp.append('<img style="position:relative;width:85px;height:85px;" src="plugins/widget/core/template/dashboard/cmd.info.string.Store_and_Window/StoreWindow-'+fenetre+'99.png"/>');
		if(volet)
			$wrp.append('<span style="position:absolute;width:85px;height:'+Math.round(85*volet/100)+'px;background-size:cover;top:-4px;left:0;background-image:url(plugins/widget/core/template/dashboard/cmd.info.string.Store_and_Window/StoreWindow-'+fenetre+'00.png)"></span>');
		jeedom.cmd.update['#id#'] = function(_options){
			$('.cmd[data-cmd_id=#id#]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate)
			$('.cmd[data-cmd_id=#id#] .state').empty().append(_options.display_value);
		}
		jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
	</script>
</div>
et pour l'info virtuel simplement mettre un type "autre" et mettre l’état de la fenêtre, puis du volet séparer par un ;
Screenshot_20170309_161614.png
Info virtuel
Screenshot_20170309_161614.png (102.78 Kio) Consulté 5417 fois
@++

Re: dashboard.info.numeric.Store_and_Window

Publié : 09 mars 2017, 16:43
par cyrilphoenix
Oui excellent sujet de notre vidéaste favoris @sarakha63 :) avec une excellente idée de @Masterfion :)
J'avais de mon coté reprise le boulot de @slobberbone car je voulais un widget tout propre au petit oignons et j'avais quelques idées en plus.
J'ai présentée ma version fenetre ici : viewtopic.php?f=29&t=25082

Je compte du coup le mettre à jour avec cette idée de volet et une amelioration de la gestion de l'affichage de la batterie et du mouvement.
Ton idée de séparée par des point virgule est excellente, je vais m'en servir :)

Si ces messieurs sont open à une mise en commun, pas de souci :)

Re: dashboard.info.numeric.Store_and_Window

Publié : 09 mars 2017, 16:45
par PHDB
Merci pour ce widget qui a l'air super prometteur.
Une question/requete (forcement): est-il prevu de faire une version pour les baies vitrees coulissantes (et pas uniquement porte-fenetre/fenetre)?

Merci encore!

Re: dashboard.info.numeric.Store_and_Window

Publié : 09 mars 2017, 17:04
par Masterfion
Salut tout le monde :)

Après quelques réactions qui nous ont fait comprendre que les opérateurs ternaires et la masse d'états possibles rendraient l'approche un peu barbare, j'ai refait mon widget (et virtuels) grace à la suggestion de @Cyrilphoenix71 en commentaire de l'article de @Sarakha63.

@Cyrilphoenix71 conseillait tout simplement de ne pas utiliser ce long calcul mais la formule toute simple [Etat Fenêtre]*100+[Etat Volet].
Effectivement, le résultat sera différent selon les états et le widget suffit presque à lui-même maintenant.

Il est fort probable que le code du widget peut être simplifié (@virus, tu vas probablement t'y coller). J'ai actualisé le widget sur le market mais attention, j'ai aussi dû renommer les images :mrgreen:

Re: dashboard.info.numeric.Store_and_Window

Publié : 09 mars 2017, 17:16
par slobberbone
Moi je suis à fond pour tout mettre en commun sur ce widget dont l'ensemble des images d'ouvertureIMG (qu'on pourra supprimer ensuite) !!!!
Sélection_012.png
Sélection_012.png (258.34 Kio) Consulté 5392 fois
Sélection_011.png
Sélection_011.png (28.96 Kio) Consulté 5392 fois

Re: dashboard.info.numeric.Store_and_Window

Publié : 09 mars 2017, 17:18
par slobberbone
Et celles-là aussi (je dispose des fichiers sources bien entendu)
Sélection_118.png
Sélection_118.png (362.67 Kio) Consulté 5385 fois

Re: dashboard.info.numeric.Store_and_Window

Publié : 09 mars 2017, 17:19
par slobberbone
donc avec les sources des volets roulants derrières, je peux faire celles-ci puis tout pousser à Masterfion pour qu'il l'intègre !

Re: dashboard.info.numeric.Store_and_Window

Publié : 09 mars 2017, 17:20
par slobberbone
Il reste la porte d'entrée en noire (la mienne sera noire :) )

Re: dashboard.info.numeric.Store_and_Window

Publié : 09 mars 2017, 17:36
par cyrilphoenix
Petit apercu de ce que j'ai en tete de mon coté :
temp.png
temp.png (32.63 Kio) Consulté 5381 fois
L'image est composé de 4 images avec du fond vers le devant :
- 1 fond (paysage, fond noir, bleu etc...)
- le volet
- puis la fenetre que j'ai retravaillée pour rendre vitres transparente.

Mon idée évoqué plus haut est de rajouter une 4eme et une 5eme image :
- batterie (du capteur etat fenetre)
- motion (d'un capteur X)

On pourrait alors mettre ce widget en type autre ou string et dans etats comme l'a suggeré @virux:
EtatFenetre;EtatVolet;EtatBatterie;EtatMotion

Je sais pas ce qui est mieux @masterfion : formule etat * 100 + etat ou le point virgule ?
Pour les debutant je plancherais plus pour point virgule non ?

Soyons fou en rajoutant un EtatMeteo qui viendrait indexé l'image fond :)

Enfin je vous laisse essayer mon widget qui a un truc en plus quand on passe la souris devant :), quelques option d'affichage personnalisable via des parametres optionnel et une gestion propre du positionnement et des marges.

J'essai de faire un truc de mettre à jour mon widget avec ca et je vous redit mais un peu en manque de temps la de suite :)

@slobberbone j'ai aussi pas mal de source, quelle est la taille de tes images en pxl ?

Re: dashboard.info.numeric.Store_and_Window

Publié : 09 mars 2017, 17:45
par slobberbone
en général pa plus de 200x200 px ...
Je veux bien tes paramètres de mise en transparence des fenêtres ?! (tu utilises gimp ?)

Re: dashboard.info.numeric.Store_and_Window

Publié : 09 mars 2017, 17:49
par cyrilphoenix
Ok pareil les tailles
J'utilise paint.net plus simple mais très puissant ;-)
Fenêtre = décourage + retouche + vitre dans nouveau calque transparent à 200

Avec mon pouce depuis mon Mi4c

Re: dashboard.info.numeric.Store_and_Window

Publié : 09 mars 2017, 18:18
par virux
Je pense aussi que l'on peux peut être mixer tout ça.

Il faut en fait 4 images :
- fenêtre fermée, volet ouvert ( ou sans volet) (Store_and_Window-0-ferme.png)
- fenêtre fermée, volet fermé (Store_and_Window-0-ouvertpng)
- fenêtre ouverte, volet ouvert ( ou sans volet) (Store_and_Window-1-ferme.png)
- fenêtre ouverte, volet fermé (Store_and_Window-1-ouvert.png)

ou on pourrai peut etre le faire aussi avec mais la 1ere solution dois etre plus sumple a implemanté
- fenêtre fermée, sans volet mais transparente
- fenêtre ouverte, sans volet mais transparente
- juste le volet en entier

Re: dashboard.info.numeric.Store_and_Window

Publié : 09 mars 2017, 20:10
par cyrilphoenix
Moi je dirait 5 images
-BackXStateY.png
X=type de fond géré en paramètre optionnel avec gestion si absent =0
Y= optionnel pour météo ou horaire par ex avec gestion si absent=0

-StoreXStateY.png
X=type de store géré en paramètre optionnel avec gestion si absent=0 =store blanc
Y=0 ouvert 1 fermé ou 10 20 % etc avec gestion des intervalles

-WindowXStateY.png
X=type fenêtre géré en paramètre optionnel avec gestion si absent=0 =pvc blanche
Y=0 ouvert 1 fermé

-BatXStateY
X=type batterie géré en paramètre optionnel avec gestion si absent=0
Y=valeur batterie avec gestion du niveau d'alerte en paramètre optionnel avec si absent=5

-MotionXStateY
X=type capteur géré en paramètre optionnel avec gestion si absent=0
Y=état capteur 0=rien 1=motion

On peut aussi gérer en interne la conversion des Y de string genre ouvert à 0

Avec mon pouce depuis mon Mi4c

Re: dashboard.info.numeric.Store_and_Window

Publié : 09 mars 2017, 21:39
par beber53
Il faudrait que le soleil ce lève dans l'image derrière en fonction du plugin héliotropes. Et donc en fonction d'où est la fenêtre dans la maison.

Bon ok je sors

Très beau travail à vous tous.

Re: dashboard.info.numeric.Store_and_Window

Publié : 09 mars 2017, 21:42
par virux
@tocks avec un css (transform: scaleX(-1)) pour faire un flip de l'image on le met a droite ou a gauche :)
D’ailleurs ça peu servir aussi pour afficher les fenêtres ou baie vitrée dans le bon sens ( droite ou gauche) plutôt que dupliqué l'image.

Re: dashboard.info.numeric.Store_and_Window

Publié : 09 mars 2017, 21:48
par Masterfion
N'imaginez pas que j'ai le monopole du "widget ouverture" parce que @sarakha63 a parlé de moi dans son article. Vous semblez bien plus investis que moi, perso je me suis simplement contenté de bosser sur MON besoin :D

Je ne suis pas en train de dire que je ne veux pas participer mais vos widgets, @slobberbone et @cyrilphoenix (sans oublier @tocks et @virux) sont bien plus évolués que le miens.
Je m'en remets donc totalement à vous pour la suite et je serai toujours présent pour tester vos réalisations (c'est aussi mon rôle de Beta-Testeur).

Re: dashboard.info.numeric.Store_and_Window

Publié : 09 mars 2017, 21:55
par cyrilphoenix
virux a écrit :@tocks avec un css (transform: scaleX(-1)) pour faire un flip de l'image on le met a droite ou a gauche :)
D’ailleurs ça peu servir aussi pour afficher les fenêtres ou baie vitrée dans le bon sens ( droite ou gauche) plutôt que dupliqué l'image.
Oui j'utilise déjà dans ma version en ligne ;-)

Avec mon pouce depuis mon Mi4c

Re: dashboard.info.numeric.Store_and_Window

Publié : 09 mars 2017, 21:56
par cyrilphoenix
Masterfion a écrit :N'imaginez pas que j'ai le monopole du "widget ouverture" parce que @sarakha63 a parlé de moi dans son article. Vous semblez bien plus investis que moi, perso je me suis simplement contenté de bosser sur MON besoin :D

Je ne suis pas en train de dire que je ne veux pas participer mais vos widgets, @slobberbone et @cyrilphoenix (sans oublier @tocks et @virux) sont bien plus évolués que le miens.
Je m'en remets donc totalement à vous pour la suite et je serai toujours présent pour tester vos réalisations (c'est aussi mon rôle de Beta-Testeur).
J'essai de faire une version ce week-end pour tester tout ça ;-)

Avec mon pouce depuis mon Mi4c

Re: dashboard.info.numeric.Store_and_Window

Publié : 09 mars 2017, 21:56
par cyrilphoenix
tocks a écrit :Il faudrait que le soleil ce lève dans l'image derrière en fonction du plugin héliotropes. Et donc en fonction d'où est la fenêtre dans la maison.

Bon ok je sors

Très beau travail à vous tous.
La version 6.4 l'intégrera c'est prévu lol

Avec mon pouce depuis mon Mi4c

Re: dashboard.info.numeric.Store_and_Window

Publié : 10 mars 2017, 08:44
par virux
@cyrilphoenix j'avais zapper ton message avec les 5 images (faut pas lire le forum au boulot ! :)), c'est une bonne idée et ça permettra d’intégrer facilement pas mal de model de fenêtre avec tout ce qu'a fait @slobberbone.

J'utilise aussi le widget dashboard.action.slider.SlidVertical que je trouve sympa sur desktop, je sais pas si on pourrait intégré aussi la fonctionnalité (optionnel) ?