[Résolu] Monitor - acces direct aux pages

[deennoo]

Bonjour a tous,

Afin de gagner en WAF, j'ai une requête pour la Saint Valentin.

Madame commence doucement a utiliser la monitor page, elle me demande quelque chose :

le Swip a droite ou a gauche sa la gonfle, elle veut des boutons pour acceder directement aux bonnes pages.

Autant sur les pages "classiques" ou il y a deja des icones pas de soucis, il suffit de mettre l'adresse html de la page voulue et c'est regler, autant sur celle avec des iframes (dans mon cas : map, la vu plan de domoticz, controle d'hyperion, sudouest) je ne vois pas vraiment comment faire.

Alors oui il y a bien la fonction télécommande via mqtt je lai mis en place avec un dash boutton : pas assez rapide, avec une telecommande 433 : non, avec un bouton xiaomi : mais non elle n'en veut pas, elle veut avoir la liste des pages tout en bas...et pouvoir cliquer dessus pour aller directement sur la bonne page.

[vil1driver]

Salut,

tu t'y prends tard

la méthode reste la même

Code : Tout sélectionner

['','Html','cell13','<button class="pink" onclick="mySwipe.slide(2)" type="button" >Page 3</button>'],

il te faut créer des div sur tes pages perso en leur donnant un id propre et un bout de css pour la mise en forme (position, taille, etc..)

en gros modifier tes pages pour avoir une grosse div qui recevra ton iframe et en dessous une ligne avec 5 ou 6 petites div pour les boutons..
après ça se joue dans le setting

tu saisi l'idée ?

exemple pour la page trafic.html

ajouter sous

Code : Tout sélectionner

<div id='map' class="avoid-clicks"></div>

ceci

Code : Tout sélectionner

<div class="frame">
	<div id="ls_map1"></div><div id="map1">--</div><div id="desc_map1">map1</div>
</div>
<div class="frame">
	<div id="ls_map2"></div><div id="map2">--</div><div id="desc_map2">map2</div>
</div>
<div class="frame">
	<div id="ls_map3"></div><div id="map3">--</div><div id="desc_map3">map3</div>
</div>
<div class="frame">
	<div id="ls_map4"></div><div id="map4">--</div><div id="desc_map4">map4</div>
</div>
<div class="frame">
	<div id="ls_map5"></div><div id="map5">--</div><div id="desc_map5">map5</div>
</div>

supprimer ceci du fichier trafic.css pour empêcher la carte d'occuper tout l'espace
cela avait été ajouté pour optimiser l'espace offert par une tablette 4/3

Code : Tout sélectionner

@media screen and (min-height: 610px) {
    #map 
	{
		height: 590px;
	}
}

si tu es en 16/9, il te faudra réduire la hauteur (height) de la carte (valeurs à tester ex: height: 425px;)

Code : Tout sélectionner

#map {
	width: 935px;
	height: 505px;
}

et ajouter la mise en forme pour nos nouvelles div

Code : Tout sélectionner

#ls_map1, #ls_map2, #ls_map3, #ls_map4, #ls_map5  
 {
	font-family: arimo;
	font-weight: normal;
	color: #999;
	font-size: 12px;
	margin-top: -20px;
	height: 20px;
	line-height: 65px;
	text-shadow: 1px 1px 5px black;
	
}


#desc_map1, #desc_map2, #desc_map3, #desc_map4, #desc_map5
{
	font-family: arimo;
	font-weight: normal;
/*	color: #999; */
	color: #F2DDB3;
	font-size: 17px;
	margin-top: -20px;
	height: 25px;
	line-height: 15px;
	text-shadow: 1px 1px 4px black;
	
}



#map1, #map2, #map3, #map4, #map5
{
	font-family: arimo;
	font-weight: bold;
	width: 162px;
	padding: 10px;
/*	border: 1px solid #1E1E1F; */
	border: 1px solid transparent;
	border-radius: 0px;
	height: 58px;
	line-height: 55px; 		
	color: #999;
	font-size:40px;
	text-shadow: 1px 1px 4px black;
	
}

#map3
{ 
	width: 184px; 
}

pas testé mais ça devrait fonctionner

ça va te demander du boulot tout ça

[deennoo]

Je vais essayer merci, je n'avais pas vu la réponse, je supprime l'autre post.

Elle a pas donner d'année non plus...

[vil1driver]

bon, je me suis lancé dans l'ajout d'un menu latéral gauche, avec jusqu'à 10 icônes verticalement, dédiés au changement de page.
Ça devrait être suffisant ?

le menu sera fixe et indépendant des pages.
Du coup ça implique de modifier toutes les pages, de les rétrécir en largeur..
pour l'instant j'ai les pages 1, 5 et météo d'adaptées.

dès que tout est fini je partage.

[papoo]

l'option de défilement des pages sera supprimée? ou le menu viendra en plus, pour allez directement à une page souhaitée tout en conservant le défilement?

[zaraki673]

hummm deennoo, je m inquiète j ai eu la meme demande

pour faire simple j ai dupliquer la page index pour que chacune d'elles pointes sur une page differentes en conservant le slide (juste modifier l'ordres des slides) et ensuites mis des liens vers ces nouvelles pages dans les pages de conf des slides (je sais pas si je suis tres clair )

[vil1driver]

l'option de défilement des pages sera supprimée? ou le menu viendra en plus, pour allez directement à une page souhaitée tout en conservant le défilement?

En plus

[vil1driver]

petit aperçu du rendu actuel avec mes 3 pages (donc que 3 icônes dans mon menu) ça n'empiète pas trop

[Ghislain]

Classe Faut que je me penche la dessus et l'install sur une tablette en rabe

[vil1driver]

voila, j'espère ne rien avoir oublié

mise à jour de monitor avec

- menu latéral à gauche
- gestion des pages non plus dans l'index mais dans le setting

Code : Tout sélectionner

$.PagesList = [
// ['html page name (location must be in 'monitor/pages/' folder)','menu icon name (location must be in 'monitor/icons/menu/' folder],
				['clock.html','clock.png'],
				['meteo.html','meteo.png'],
				['pluie.html','pluie.png'],
				['page1.html','light1.png'],
				['page2.html','light2.png'],
				['page3.html','light3.png'],
				['page4.html','light4.png'],
				['page5.html','chauffage.png'],
				['trafic.html','map.png'],
				['logs.html','log.png'],
[]];

ça vous semble clair ?

@deennoo,

Pour adapter tes pages iframe au nouveau menu, réduit en la largeur d'environ 60 pixels