[tuto] Design - menu slide - corps scroll

[GGR72700]

Super la mauvaise photo qui passe.... comment on fait pour supprimer ? Je débute


Envoyé de mon iPhone en utilisant Tapatalk

[winhex]

ah oui les grands moyens. ça rigole pas
(edit ton sujet)

les images on pour source les thermostat nest
viewtopic.php?f=29&t=41964&p=685214&hil ... on#p685160
le slider brut

Code : Tout sélectionner

<div class="cmd" style="width:130px;"data-type="action" data-subtype="slider" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" >
	<center>
	<table WIDTH="83%" style="background-color: transparent!important;">
		<tr>
			<td ROWSPAN=2 WIDTH="20%">
			<h2 class="nest__icon#id#"></h2>
			</td>
            
			<td ROWSPAN=2 WIDTH="55%">
			<input style="opacity:1!important;color:white!important;vertical-align:middle;font-size: 1.3em; font-weight: 500;background-color: transparent!important;border-color:transparent!important;" type="text" class="value form-control" value="#state# #unite#" disabled style=""/>
           			<span style="font-size: 8px;margin-left: 8px;#hideCmdName#">#name_display#</span>

              </td>

			<td VALIGN=bottom >
			<a style="cursor: pointer;" class="btn-sm bt_plus" data-toggle="button" aria-pressed="false" autocomplete="off" ><i class="fa fa-2x fas fa-angle-up"></i></a>
			</td>
            
		</tr>         
		<tr>
	
 
			<td>
			<a style="cursor: pointer;" class="btn-sm bt_minus" ><i class="fa fa-2x fas fa-angle-down"></i></a>
			</td>
            
		</tr>
	</table>
	</center>
            
<style>
  .nest__icon#id# {
  width:20px;
  height: 20px;
  background: url(plugins/widget/core/template/dashboard/cmd.action.slider.winhex_consigne_tel/nest-leaf.png) no-repeat center center;
  background-size: cover;
}
.bt_minus,.bt_plus  {
  padding:0px;

}
</style>

<script>
    // mis en forme tableau
    // http://hypermedia.univ-paris8.fr/jean/internet/ex_table.html
                                     
$('.cmd[data-cmd_uid=#uid#] .bt_plus').on('click', function () {
	$('.cmd[data-cmd_id=#id#] .bt_plus').css("color", "red");
	jeedom.cmd.update['#id#']({display_value:parseFloat($('.cmd[data-cmd_uid=#uid#] .value').val()) + 0.5});
	$('.cmd[data-cmd_uid=#uid#] .value').trigger('change');
});

$('.cmd[data-cmd_uid=#uid#] .bt_minus').on('click', function () {  
	$('.cmd[data-cmd_id=#id#] .bt_minus').css("color", "red");
	jeedom.cmd.update['#id#']({display_value:parseFloat($('.cmd[data-cmd_uid=#uid#] .value').val()) - 0.5});
	$('.cmd[data-cmd_uid=#uid#] .value').trigger('change');
});

$('.cmd[data-cmd_uid=#uid#] .value').on('change', function () {
	if (typeof timerHandle !== 'undefined') {
		clearTimeout(timerHandle);
		timerHandle = setTimeout(function() {
			jeedom.cmd.execute({id:'#id#', value: {slider: $('.cmd[data-cmd_uid=#uid#] .value').val().replace("#unite#", "").replace(" ", "")}});
			$('.cmd[data-cmd_id=#id#] .bt_plus').css("color", "");
			$('.cmd[data-cmd_id=#id#] .bt_minus').css("color", "");  
		}, 1000)
	} else {
		timerHandle = setTimeout(function() {
			jeedom.cmd.execute({id:'#id#', value: {slider: $('.cmd[data-cmd_uid=#uid#] .value').val().replace("#unite#", "").replace(" ", "")}});
			$('.cmd[data-cmd_id=#id#] .bt_plus').css("color", "");
			$('.cmd[data-cmd_id=#id#] .bt_minus').css("color", "");  
		}, 1000)
	}    
});

jeedom.cmd.update['#id#'] = function(_options){
//	jeedom.cmd.byId({ // Récupération de l'id
//		id: #id#,
//		success:  function(resulat) {    
//			valeur#id#=(resulat.configuration.value); 
//			valeur#id#=valeur#id#.replace(/#/g,''); // retré de #
//			jeedom.cmd.execute({ // Récupération de la valeur  
//				id: valeur#id#,
//				success:  function(valeur_courante) {   
//					$('.cmd[data-cmd_uid=#uid#] .valeur').val(valeur_courante.toFixed(1)+' #unite#');
//				}
//			});   
//		}
//	});  
	if (_options.display_value == '0') {
		$(".nest__icon#id#").css('background-image', 'url(plugins/widget/core/template/dashboard/cmd.action.slider.winhex_consigne_tel/off.png');
	} else if (_options.display_value >= '1' && _options.display_value <= '18') {
		$(".nest__icon#id#").css('background-image', 'url(plugins/widget/core/template/dashboard/cmd.action.slider.winhex_consigne_tel/nest-leaf.png)');
	} else if (_options.display_value >= '18.5' && _options.display_value <= '19.5') {
		$(".nest__icon#id#").css('background-image', 'url(plugins/widget/core/template/dashboard/cmd.action.slider.winhex_consigne_tel/moon.png)');
	} else if (_options.display_value >= '20' && _options.display_value <= '21') {
		$(".nest__icon#id#").css('background-image', 'url(plugins/widget/core/template/dashboard/cmd.action.slider.winhex_consigne_tel/sun-7568.png)');
	} else if (_options.display_value >= '21.5') {
		$(".nest__icon#id#").css('background-image', 'url(plugins/widget/core/template/dashboard/cmd.action.slider.winhex_consigne_tel/duck.png)');
	}  
	var valeur = parseFloat(_options.display_value).toFixed(1);   
	$('.cmd[data-cmd_id=#id#] .value').val(valeur+'#unite#');
}

jeedom.cmd.update['#id#']({display_value:'#state#'});

</script>
  </div>

si je te fait voir mes design c'est pareil (gros boxon rien de fini)

maintenant je rassemble pour remplir
afin d'avoir du fonctionnel

je bloque sur un truc (ex faire une section 1 de 640px et une autre de 1600 et ...)
j'abandonne pour l'instant sinon j'en finirai jamais.

tu as plein de méthode pour le menu2
tu as caché, déplace du champ, afin d'en faire apparaître un autre, avoir le même qui swipe ,...
mais j'ai pris le partie du plus simple en attendant ya déjà tellement à faire.

[GGR72700]

Oui c est pareil pour tous, il y a tellement a faire !
Jeedom c est vraiment trop bien car il n y a pour seule limite que ton imagination. Le problème c est que j en ai beaucoup et quand je commence à discuter sur les forums et que je vois ce que font les autres c est encore pire...

J ai l impression de passer mon temps à ajouter de nouvelle fonctions sans jamais finir celle d avant .

Pourquoi veut tu avoir deux tailles de section différentes ? Tu affiches quelle résolution au final ?
Je n ai pas bien compris le but

À plus


Envoyé de mon iPhone en utilisant Tapatalk

[winhex]

en ayant différentes longueurs pas section (de hauteur variable)
dans un design tu simulerais plusieurs pages
(ou plusieurs design sans chargement entre chacun)

[GGR72700]

Bah c est déjà ce que je fais mais d une autre façon;

J ai 20 sections de tailles identiques et mes menus ne me dirige que vers 10 sections
Et ensuite je mets une petite flèche qui me fait scroller aux section suivante:

Example si tu cliques sur le bouton home du menu:
Tu vas en section 1
Si tu cliques sur piscine, tu vas en section 2
Si tu cliques sur lumières tu va en section 5

Et du coup dans la section 2( la piscine) j ai un petit bouton en bas de la page qui te scroll vers section 3 et sur la section 3 un scroll vers section 4 etc...

Après si tu es en section 4 par exemple tu peux en ressortir directement en cliquant sur un autre lien du menu général.

Du coup on peu imagine un design avec un grands nombres de section et même, pas forcément dans l ordre ! Il suffit de faire pointer vers les sections qui t intéressent.

Après, je suis peu être à côté de la plaque et n ai pas compris ce que tu voulais faire


Envoyé de mon iPhone en utilisant Tapatalk

[guims78]

Hello,
j'essaie d'appliquer le widget de changement de background, mais je n'y arrive pas.

viewtopic.php?p=772806#p772778

J'ai essayé de passer le background du "Corps" en transparent, mais sans effet.
QQun aurait une idée ??

Sachant que si j'applique le widget sur le Design Corps, le changement d'image focntionne, mais elle est déformé, tenant compte de la hauteur maxi de mes sections.

[winhex]

retravaille tes images si tu peux les personnalisés
tu prend un logiciel de touche
(ex paint do net)
redimensionnement de l'image

[GGR72700]

Et surtout que veux tu dire par sans effet ?
Tu ne vois pas de changements ou bien tu vois une image déformée comme quand tu le fais dans le Corps ?

[GGR72700]

Et ça peut être normal de ne rien voir si tu mets en transparent: le fond du corps devient bien transparent et du coups tu vois le fond d écran du design menu à la place qui peut être est le même... bref, c est pas clair

[guims78]

Ok, je vais essayer de décrire ce que j'essaie de faire, ça va me permettre de mettre de l'ordre dans mes idées
J'utilise le tuto Design Menu Slide pour gérer une partie de mes équipement sur un écran de contrôle.
J'ai donc créé un Design Menu et un Design Corps : jusqu'ici tout va bien et ça fonctionne très bien;
J'ai fait la même chose pour un Design sur Mobile.

j'ai découvert l'existance du plugin Design Background Image, qui change de façon dynamique l'image de fond d'une Design en fonction de la météo et du lever / coucher de soleil.

Je me suis dis : super, ça doit être sympa sur mon écran de gestion.
J'ai donc installé le plugin et j'essaie de faire fonctionner mon Design Corps et mon Design Menu avec.
Ce que j'arrive à faire c'est d'avoir le changement d'image dynamique sur le Design Corps, mais l'image est allongé car mon Corps comporte 4 sections et donc l'image de fond est étirée de 4 fois la hauteur de mon Design Menu.

Je voudrais réussir à avoir l'image de fond uniquement que le Design Menu et rien sur le Design Corps à part les équipements que j'aurais ajouter.
Et là, ça ne marche pas.
Le Design Corps s'affiche par dessus, mais avec un fond que je n'arrive pas à supprimer, même en configurant la transparence.

Voici le code de mon Menu :

Code : Tout sélectionner

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
::-webkit-scrollbar {
    display: none; 
}

div.scrollmenu {
     height: 48px;
    background-color: #232A31;
      white-space: nowrap;
  overflow: auto;

}
  div.scrollmenu a {
    color: white;
    text-align: center;
    padding: 18px;
 border-bottom: none;
        text-decoration: none;
  opacity: 1;
      padding-top: 15px;
}
div.scrollmenu a:hover {
 border-bottom: none;
        text-decoration: none;
  opacity: 1;
}
  la {
      width: 20%;
    display: inline-block;
  list-style: none;
  opacity: 0.33;
  font-size: 15px;
  color: #FFFFFF;
        }
la>a {
  display: block;
  margin-right: 0px;  
    color: #FFFFFF;
    }
    la.active,
la.active:hover {
  height: calc(100% - 1px); 
  border-bottom: 2px solid #F87620;
 opacity: 1;
}
la:hover {
  border-bottom: 2px solid #F5F5F5;
 height: calc(100% - 1px);
  cursor: pointer;
}
iframe {
width: 1px;
min-width: 100%;
overflow:hidden!important;
              }
</style>
</head>

<div>
  <!-- enlever navbar-fixed-top pour redemissionage -->
 <div class="scrollmenu navbar-fixed-top">

<la><a onClick="planHeader_id=34; displayPlan();"><span class="fa jeedomapp-reload-manuel fa-lg"></span></a></la>

<la class="active"><a onclick="document.getElementById('iframe_a').src ='/index.php?v=d&p=plan&plan_id=35&fullscreen=1#section1'"><span class="fa techno-heating3 fa-lg"></span> 1/2</a></la>
<la><a onclick="document.getElementById('iframe_a').src ='/index.php?v=d&p=plan&plan_id=35&fullscreen=1#section2'"><span class="fa techno-heating3 fa-lg"></span> 2/2</a></la>
<la><a onclick="document.getElementById('iframe_a').src ='/index.php?v=d&p=plan&plan_id=35&fullscreen=1#section3'"><span class="fa jeedom-lumiere-on fa-lg"></span></a></la>
<la><a onclick="document.getElementById('iframe_a').src ='/index.php?v=d&p=plan&plan_id=35&fullscreen=1#section4'"><span class="fa transport-car95"></span></a></la>  
   
                </div> 
      <div id="menu-div" style="height: 475px; min-width: 100%; background-color: transparant;">
			<div style="height: 100%; width: 0px; min-width: 100%; background-color: transparant;">
			  <iframe id="iframe_a" height="100%" width="105%" frameBorder="0" scrolling="no" src="index.php?v=d&p=plan&plan_id=35&fullscreen=1">
			  </iframe>
				  <script type="text/javascript">
				  if (/iPad|iPhone|iPod/.test(window.navigator.userAgent)) { document.getElementById('iframe_a').setAttribute('scrolling', 'yes') }
				  if (/iPad|iPhone|iPod/.test(window.navigator.userAgent)) { document.getElementById('menu-div').style.height = "100%" }
  $('.scrollmenu la').on('click', function() {
  $(this).addClass('active').siblings().removeClass('active'); 

});
              </script>
          </div>
		</div>
	</div>

Et de mon Corps :

Code : Tout sélectionner

<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <style>
/* 1E88E5 */
  #section1 {padding-top:40px;height:475px;color: #fff;}
  #section2 {padding-top:40px;height:475px;color: #fff;}
  #section3 {padding-top:40px;height:475px;color: #fff;}
  #section4 {padding-top:40px;height:475px;color: #fff;}
  </style>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="40">
<!-- navbar-fixed-top -->
<div id="section1" class="container-fluid">
  <h3>Chauffage 1/2</h3>
</div>
<div id="section2" class="container-fluid">
  <h3>Chauffage 2/2</h3>
</div>
<div id="section3" class="container-fluid">
  <h3>Lumieres</h3>
</div>
<div id="section4" class="container-fluid">
  <h3>ZOE</h3>
</div>
</body>

Le pire, c'est que je vois que l'image est chargée sur mon Design Menu car elle apparaît brièvement juste avant le chargement du Design Corps.

Mais je ne maîtrise pas du tout les lignes de code, j'y vais vraiment à tâtons et là je ne sais plus trop ou chercher.

[GGR72700]

Ce que tu décris est tout à fait normal. Car en fait tu affiche une iframe par dessus le background de ton design menu.

La seule solution que je vois facilement c est modifier les images qui sont appelées pour qu elles rendent bien dans le COrps en fonction de la taille de tes sections et donc de les appliquer seulement au corps menu.


Envoyé de mon iPhone en utilisant Tapatalk

[winhex]

hors plug vu qu'on est dans le diy

tu vois le menu
viewtopic.php?f=25&t=35100&start=120#p768015
il est fixe = (apparent ou que tu soit dans le scroll)
il y a à droite une opacité (par dessus) des éléments. que j'ai réussis par le z-iindex (position dessus dessous)
toi c'est dessous
donc une image fixe sans plug pour un bidouilleur est aussi faisable
dans le design menu en css met

/* couleur fond blanc*/
.div_displayObject {
background-color: #efefef;
}
design corps transparent
si ça marche tu pourras le changé en image
et ensuite d'un simple widget (hors champ) en faire un actualisé

il y a aussi moyen maintenant de ne plus utilisé iframe pour utilisé 1 seul design mais je n'aurai pas le temps
je reste sur mon besoin

@GGR72700 ton design ça avance ?
si tu veux jai trouvé le moyen de forcé un mode tel pour tab (pas cherché le contraire) largeur 360px

[GGR72700]

Oui oui ça avance mais trop doucement à mon goût, j ai trop de boulot en ce moment malheureusement... mais à partir de demain je suis en déplacement pour une semaine sans enfants donc ça devrait avancer un peu mieux

À plus !

[GGR72700]

Et forcer le mode à 360px ça m intéressé car je me casse un peu les dents la dessus. Je n ai jamais trouvé un système qui fonctionne à 100%...

Je m étais fait à l idée de faire le design en 360px de large et scaler le Viewport sur ma tablette avec fully kiosk mais c est hyper **** de bosser sur un design aussi petit...

Bref, en un mot: preneur !

[winhex]

c'est exactement ca
sauf que tu met un id au viewport
et dans un script selon la taille
un zoom via set sur le content

>= 920 etant un pc ou tablette horizontal pas de zoom
bien evidemment raffraichir selon le mode de visionnage tablette

apres si tu veux
j'ai un reste de test
orientation en verticale si tu mets en horizontale
t'obligeant a utiliser la tab/tel en verticale

hier comme un con je l'ai redecouvert
mais sur un pc

[GGR72700]

Ouah trop bien ! J avais essayer de faire fonctionner avec un ID car j avais aussi trouvé ce bout de code dans le forum mais j avais du faire une erreur quelque part dans le code car ça ne fonctionnait pas.

Je vais tester ça cette semaine. Encore merci pour ton aide et tes idées !

A plus


Envoyé de mon iPhone en utilisant Tapatalk

[guims78]

hors plug vu qu'on est dans le diy

tu vois le menu
viewtopic.php?f=25&t=35100&start=120#p768015
il est fixe = (apparent ou que tu soit dans le scroll)
il y a à droite une opacité (par dessus) des éléments. que j'ai réussis par le z-iindex (position dessus dessous)
toi c'est dessous
donc une image fixe sans plug pour un bidouilleur est aussi faisable
dans le design menu en css met

/* couleur fond blanc*/
.div_displayObject {
background-color: #efefef;
}
design corps transparent
si ça marche tu pourras le changé en image
et ensuite d'un simple widget (hors champ) en faire un actualisé
...

Hello, merci des infos.
Mais n'étant pas à l'aise avec le CSS, je ne sais pas à quel endroit coller ce bout de code.

Code : Tout sélectionner

    /* couleur fond blanc*/
    .div_displayObject {
      background-color: #efefef;
    }  
    

dans mon design Menu

[guims78]

Ce que tu décris est tout à fait normal. Car en fait tu affiche une iframe par dessus le background de ton design menu.

La seule solution que je vois facilement c est modifier les images qui sont appelées pour qu elles rendent bien dans le COrps en fonction de la taille de tes sections et donc de les appliquer seulement au corps menu.


Envoyé de mon iPhone en utilisant Tapatalk

Salut, j'avoue que les iframes c'est du chinois pour moi.
J'aimerais trouver une autre solution que de modifier les images "sources" car cela m'empêcherait d'utiliser le widget sur un autre Design.

Y a-t-il moyen d'avoir une iframe transparente ?

[GGR72700]

Je comprends ton problème si tu veux réutiliser le widget.

Ce que tu peux aussi faire c est appliquer l image sur chaque section dans le menu Corps comme ça tu garderas la même résolution partout (si la hauteur de tes sections corresponds bien entendu).
Pour cela il te faut modifier le HTML du corps menu et au lieu de donner une couleur au background tu appelles une image.

Mais également comme disais winhex, la solution avec design menu + Corp menu a évoluer depuis pour se passer de l iframe.

Un seul design qui gère à la fois le menu et les sections. Regarde les codes que j avais balancés il y a quelques jour, il y a ce qu il faut normalement.

Par contre, je suis en train de me dire que ça ne fonctionnera pas car ton plugin agit directement sur le background général....

Winhex aura sûrement une idée.

À plus


Envoyé de mon iPhone en utilisant Tapatalk

[guims78]

Merci du retour GRR72700, je vais essayer le truc avec l'image.

EDIT :
J'ai inséré ce code :

Code : Tout sélectionner

  <style>
/* 1E88E5 */
  #section1 {padding-top:40px;height:475px;color: #fff;background-image: url(./montheme/images/backgroundV3.jpg);}
  #section2 {padding-top:40px;height:475px;color: #fff;background-image: url(./montheme/images/backgroundV3.jpg);}
  #section3 {padding-top:40px;height:475px;color: #fff;background-image: url(./montheme/images/backgroundV3.jpg);}
  #section4 {padding-top:40px;height:475px;color: #fff;background-image: url(./montheme/images/backgroundV3.jpg);}
  </style>

Mais cela ne fonctionne pas dans le design Corps