Tablettes dédiées domotique

[IPaaadPro]

Avec plaisir Pascal.
Dès que ça touche le html, je déconnecte lol.

Par exple, je rentre le code que tu as mis pour afficher l'heure en bas à droite et chez moi, ça ne fonctionne pas. Je ne sais même pas comment débug, je suis paumé :'(


J'ai réussi à faire les 12 pages à base de copier / coller mais comment on fait pour éditer le code une fois sauvegardé? j'ai les boutons pour changer de vue mais je n'arrive pas retourner dans les propriétés de l'élément HTML... comment faire svp?

[pascal]

Bonjour IPaaadPro,

Pour l'heure, il faut que tu me donnes un peu plus de détail, je n'ai pas compris ce qui t'arrive. Tu ne vois rien du tout? quel est la taille de ton design en pixel?

Pour les 12 pages, en mode edition, il faut faire un click droit sur les icones et choisir "Paramètre d'affichage"

Capture.JPG (21.92 Kio) Consulté 1650 fois

Et voici le code pour aller directement sur une page en donnant la page dans l'url, exemple:
http://192.168.1.50/index.php?v=d&p=pla ... d=2&page=4


Le code (j'ai tout remis)

Code : Tout sélectionner

<meta  id="jeedomViewport" name="viewport" content="user-scalable=0;" /> 
<script>  
    if (screen.width >= 1280) {
      	// la tablette
        var mvp = document.getElementById('jeedomViewport');
        mvp.setAttribute('content','width=1280; height=800; initial-scale=1.0; user-scalable=0;');
    } 
   else {    	
    var scaleX = screen.width / 1280;
    var scaleY = screen.height / 800;
    var scale = scaleX < scaleY ? scaleX : scaleY; 
    var mvp = document.getElementById('jeedomViewport'); 
    mvp.setAttribute('content','initial-scale='+scale+';');
  /*   document.body.style.transform: scale(scale);
     document.body.style['-o-transform'] = scale;
     document.body.style['-webkit-transform'] = scale;
     document.body.style['-moz-transform'] = scale;*/
  }  
    
</script>
<!-- pour la tablette permet de ne pas avoir de scroll 
<meta name="viewport" content=" width=device-width; initial-scale=1.0; user-scalable=0;" />  -->
<style>

/*
  le plan total fait 15360x800
  pour un ecran de 1280x800
*/  
.div_backgroundPlan {
  background: url("plugins/widget/core/images/Background 1280x800.jpg") repeat-x;
}
div.menu_top{
	height:70px;
	background-color:rgba(0,0,0,0.6);
	border-bottom:2px solid rgba(0,0,0,1);
}

ul.monmenu ul.monmenu_sep{
	list-style-type:none;
	color:rgba(255,255,255,0.8);
	font-family:Roboto;
	font-size: 16px;
	font-weight: normal;
}

li.monmenu{
	display:inline-block;
	width: 100px;
	margin-left: -5px;
	text-align: center;
	height: 70px;
	padding-top: 10px;
	border-left: 1px solid rgba(255,255,255,0.3);
	border-right: 1px solid rgba(255,255,255,0.3);
	background-color: rgba(0,0,0,0.2);
}

div.imagette{
	text-align: center;
	margin-bottom: 5px;
	opacity: 0.8;
}

li.monmenu:hover{
	background-color: rgba(255,255,255,0.2);
}

li.selected{
	display:inline-block;
	width: 100px;
	margin-left: -5px;
	text-align: center;
	height: 70px;
	padding-top: 10px;
	border-left: 1px solid rgba(255,255,255,0.3);
	border-right: 1px solid rgba(255,255,255,0.3);
	background-color: rgba(255,255,255,0.2);
}

li.monmenu_sep{
	display:inline-block;
	width: 100px;
	margin-left: -5px;
	text-align: center;
	height: 70px;
	padding-top: 10px;
	border-right: 1px solid rgba(0,0,0,0.3);
}

div.bouton{
	opacity: 1;
}

div.bouton:hover{
	opacity: 0.5;
}  
</style>


<div id="allTopMenus">
  <!-- ici on va copier le div id=menuPage plusieur fois -->
<div id="menuPage" class="menu_top">
<ul class="monmenu">

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

	<a onClick="scrollToPage(2);"><li class="monmenu"><div class="imagette"><img src="montheme/images/menu_volets_50x50.png" height=50px width=50px></div></br></li></a>

	<a onClick="scrollToPage(3);"><li class="monmenu"><div class="imagette"><img src="montheme/images/menu_camera_50x50.png" height=50px width=50px></div></br></li></a>

	<a onClick="scrollToPage(4);"><li class="monmenu"><div class="imagette"><img src="montheme/images/menu_chauffage_50x50.png" height=50px width=50px></div></br></li></a>

	<a onClick="scrollToPage(5);"><li class="monmenu" ><div class="imagette"><img src="montheme/images/menu_lumiere_50x50.png" height=50px width=50px></div></br></li></a>

    <a onClick="scrollToPage(6);"><li class="monmenu" ><div class="imagette"><img src="montheme/images/menu_tv_50x50.png" height=50px width=50px></div></br></li></a>

    <a onClick="scrollToPage(7);"><li class="monmenu" ><div class="imagette"><img src="montheme/images/menu_piscine_50x50.png" height=50px width=50px></div></br></li></a>

	<a onClick="scrollToPage(8);"><li class="monmenu"><div class="imagette"><img src="montheme/images/menu_jardin_50x50.png" height=50px width=50px></div></br></li></a>

	<a onClick="scrollToPage(9);"><li class="monmenu" ><div class="imagette"><img src="montheme/images/menu_meteo_50x50.png" height=50px width=50px></div></br></li></a>

	<a onClick="scrollToPage(10);"><li class="monmenu"><div class="imagette"><img src="montheme/images/menu_energie_50x50.png" height=50px width=50px></div></br></li></a>

	<a onClick="scrollToPage(11);"><li class="monmenu"><div class="imagette"><img src="montheme/images/menu_ecole_50x50.png" height=50px width=50px></div></br></li></a>

	<a onClick="scrollToPage(12);"><li class="monmenu"><div class="imagette"><img src="montheme/images/menu_settings_50x50.png" height=50px width=50px></div></br></li></a>
</ul>
</div>
</div>



<script>
var nbOfPage=12;
var pageSizeX=1280;
var pageSizeY=800;
 
$('#allTopMenus').parent("div").css({ 
      "position":"absolute",
      "left":"0px",
      "top":"0px",
	  "width":(nbOfPage*pageSizeX)+"px"
    });

$(".div_backgroundPlan").eq(0).css({ "width": nbOfPage*pageSizeX, "height": pageSizeY });
  
var cptPage;
for (cptPage = 0; cptPage < nbOfPage; cptPage++) {
  var newid = "menuPage";
  if (cptPage!=0){
    var menuPage = document.getElementById('menuPage');
    var clone = menuPage.cloneNode(true); // true means clone all childNodes and all event handlers
    newid = "menuPage"+cptPage; 
    clone.id = newid;
    var allTopMenus=document.getElementById('allTopMenus');
    allTopMenus.appendChild(clone);
    $("#"+newid+" li").eq(cptPage).addClass("selected");
  }
  $("#"+newid).eq(0).css({ 
 		"position":"absolute",
      	"left":(cptPage*pageSizeX)+"px",
      	"top":"0px",
	  	"width":pageSizeX+"px"                                        
   });
}
// la pager 0 je l'a fait en dernier sinon sa selection est cloné sur toute les autres
$("#menuPage li").eq(0).addClass("selected");

var currentPage=0;
function scrollToPage(page){
  currentPage=page;
  window.scrollTo((page-1)*pageSizeX,0);     
}
  
// pour cacher la scroll bar
$("body").css("overflow", "hidden");
/*$(document).ready(function() {

  	$(document).bind("touchmove",function(event){       
        event.preventDefault();
      	scrollToPage(currentPage);
    });

});*/

 
function GetURLParameter(sParam) {
    var sPageURL = window.location.search.substring(1);
    var sURLVariables = sPageURL.split('&');
    for (var i = 0; i < sURLVariables.length; i++)  {
        var sParameterName = sURLVariables[i].split('=');
        if (sParameterName[0] == sParam) {
            return sParameterName[1];
        }
    }
  return null;
}
  
var page = GetURLParameter('page'); 
if (page != null){
  scrollToPage(page);
}
</script>

[IPaaadPro]

Merci Pascal.
En fait, j'ai posé un élément html et j'ai mis un code pour afficher un itinéraire google maps. ça fonctionne très bien sauf que je ne peux plus éditer le-dit code... impossible de faire click droit car sinon ça fait click droit sur la carte google... je suis coincé

edit : J'ai réussi à trouver une zone right-clickable !

Merci pour l'appel des pages, ça fonctionne nickel !

[pascal]

J'ai deja eu ce probleme de right-click surtout quand on insere des widgets externe, et là c'est compliqué
c'est pour ca qu'il faut des sauvegardes

Super, pour le changement de page, tu as vu, tout est très réactif du coup, je ne passe plus que par ça moi

[IPaaadPro]

à part quand tu appelles une page. ça recharge toutes les pages en fait.
Tu ne peux pas juste scroller sur la bonne page de manière automatique si tu vois ce que je veux dire

[pascal]

Salut @IPaaadPro,

Y a qu'a demander

Tu crée d'abord un Widget que tu appelles: DesignSetPage
sur la version: Dashboard
de type: Info
et de sous type: Numérique

avec le code suivant:

Code : Tout sélectionner

<div class="cmd tooltips cmd-widget" data-type="info" data-subtype="numeric" data-cmd_id="#id#" >
  	<center>
    	<span style="font-size: 1.5em;">Page: #state#</span> 
 	</center>        

  <script>
    	 scrollToPage(#state#);
	</script>
</div>

Il faut ensuite que tu crées un virtuel que j'ai appelé "Design Page Home" comme ci dessous:

Virtuel.JPG (46.74 Kio) Consulté 1540 fois

Puis tu rajoutes le virtuel dans le design.
Et c'est fini.

Ensuite pour changer de page tu appelles l'url:
http://xxx.xxx.xxx.xxx/core/api/jeeApi. ... 3&slider=3

où 1353 est l'id de la commande: setPage
et le 3 est le numero de la page

Voila, Bon test,
Pascal

[Tarl]

Bonjour à tous,

Le projet Diskio Pi revient bientôt sur Kickstarter dans une nouvelle mouture plus économique si j'ai bien compris. A suivre

https://www.diskiopi.com/

[Dapolux]

Merci Pascal pour ton partage, c'est top!
Je viens de le mettre en place sur ma version mobile (Iphone) et ça marche bien, c'est très réactif du coup.
J'ai juste un souci de scroll, car j'arrive tout de même à scroller sur les côtés malgré la balise meta du début, une idée?

[diabolyk]

Bonjour,
J'avais le meme problème que vous, j'avais fait un design puis selon des click depuis un menu, je chargeais un autre design, mais c'etait long. 3 secondes, c'est court mais c'est long quand on attend. je voulais de la réactivité instantané. Du coup après avoir lu l'idée de @fwehrle j'ai fait ce qu'il préconisait, soit un seul design très panoramique dédié a ma tablette.
Mais je voulais pouvoir ne faire qu'une seule fois mon menu, et qu'il soit répété sur toutes les pages.
Quelques javascript plus tard, j'ai réussis a le multiplier sur toutes mes pages, et là c'est instantané, même pas une millisecondes entre 2 changement de vue. Je suis trop content

je vous partage mon javascript et je vous montre mon menu et mon design, si ça peut servir a d'autres.
D'abord voici le résultat, je n'ai pas encore fini toutes mes vue, mais ça avance bien:

1ere vue:
DesignVue1.JPG
2eme vue:
DesignVue2.JPG

Pour avoir le menu sur toutes mes pages, ma tablette a une resolution de 1280x800
j'ai 12 vue a créer, donc j'ai creer un design de 1280*12 =15360 sur 800
ensuite j'ai creer une element texte/html et voici le code, il vous reste a modifier les chemins des images.
J'ai aussi désactiver la scrollbar ainsi que le scroll, en gros on ne peut presque pas se déplacer a part en passant par les bouttons.

Code : Tout sélectionner

<!-- pour la tablette permet de ne pas avoir de scroll -->
<meta name="viewport" content=" width=device-width; initial-scale=1.0; user-scalable=0;" /> 


<style>
/*
  le plan total fait 15360x800
  pour un ecran de 1280x800
*/  
.div_backgroundPlan {
  background: url("plugins/widget/core/images/Background 1280x800.jpg") repeat-x;
}
div.menu_top{
	height:70px;
	background-color:rgba(0,0,0,0.6);
	border-bottom:2px solid rgba(0,0,0,1);
}

ul.monmenu ul.monmenu_sep{
	list-style-type:none;
	color:rgba(255,255,255,0.8);
	font-family:Roboto;
	font-size: 16px;
	font-weight: normal;
}

li.monmenu{
	display:inline-block;
	width: 100px;
	margin-left: -5px;
	text-align: center;
	height: 70px;
	padding-top: 10px;
	border-left: 1px solid rgba(255,255,255,0.3);
	border-right: 1px solid rgba(255,255,255,0.3);
	background-color: rgba(0,0,0,0.2);
}

div.imagette{
	text-align: center;
	margin-bottom: 5px;
	opacity: 0.8;
}

li.monmenu:hover{
	background-color: rgba(255,255,255,0.2);
}

li.selected{
	display:inline-block;
	width: 100px;
	margin-left: -5px;
	text-align: center;
	height: 70px;
	padding-top: 10px;
	border-left: 1px solid rgba(255,255,255,0.3);
	border-right: 1px solid rgba(255,255,255,0.3);
	background-color: rgba(255,255,255,0.2);
}

li.monmenu_sep{
	display:inline-block;
	width: 100px;
	margin-left: -5px;
	text-align: center;
	height: 70px;
	padding-top: 10px;
	border-right: 1px solid rgba(0,0,0,0.3);
}

div.bouton{
	opacity: 1;
}

div.bouton:hover{
	opacity: 0.5;
}  
</style>


<div id="allTopMenus">
  <!-- ici on va copier le div id=menuPage plusieur fois -->
<div id="menuPage" class="menu_top">
<ul class="monmenu">

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

	<a onClick="scrollToPage(2);"><li class="monmenu"><div class="imagette"><img src="montheme/images/menu_volets_50x50.png" height=50px width=50px></div></br></li></a>

	<a onClick="scrollToPage(3);"><li class="monmenu"><div class="imagette"><img src="montheme/images/menu_camera_50x50.png" height=50px width=50px></div></br></li></a>

	<a onClick="scrollToPage(4);"><li class="monmenu"><div class="imagette"><img src="montheme/images/menu_chauffage_50x50.png" height=50px width=50px></div></br></li></a>

	<a onClick="scrollToPage(5);"><li class="monmenu" ><div class="imagette"><img src="montheme/images/menu_lumiere_50x50.png" height=50px width=50px></div></br></li></a>

    <a onClick="scrollToPage(6);"><li class="monmenu" ><div class="imagette"><img src="montheme/images/menu_tv_50x50.png" height=50px width=50px></div></br></li></a>

    <a onClick="scrollToPage(7);"><li class="monmenu" ><div class="imagette"><img src="montheme/images/menu_piscine_50x50.png" height=50px width=50px></div></br></li></a>

	<a onClick="scrollToPage(8);"><li class="monmenu"><div class="imagette"><img src="montheme/images/menu_jardin_50x50.png" height=50px width=50px></div></br></li></a>

	<a onClick="scrollToPage(9);"><li class="monmenu" ><div class="imagette"><img src="montheme/images/menu_meteo_50x50.png" height=50px width=50px></div></br></li></a>

	<a onClick="scrollToPage(10);"><li class="monmenu"><div class="imagette"><img src="montheme/images/menu_energie_50x50.png" height=50px width=50px></div></br></li></a>

	<a onClick="scrollToPage(11);"><li class="monmenu"><div class="imagette"><img src="montheme/images/menu_ecole_50x50.png" height=50px width=50px></div></br></li></a>

	<a onClick="scrollToPage(12);"><li class="monmenu"><div class="imagette"><img src="montheme/images/menu_settings_50x50.png" height=50px width=50px></div></br></li></a>
</ul>
</div>
</div>



<script>
var nbOfPage=12;
var pageSizeX=1280;
var pageSizeY=800;

//screen.orientation.lock('landscape');  // force le mode paysage sur mobile

$('#allTopMenus').parent("div").css({ 
      "position":"absolute",
      "left":"0px",
      "top":"0px",
	  "width":(nbOfPage*pageSizeX)+"px"
    });

$(".div_backgroundPlan").eq(0).css({ "width": nbOfPage*pageSizeX, "height": pageSizeY });
  
var cptPage;
for (cptPage = 0; cptPage < nbOfPage; cptPage++) {
  var newid = "menuPage";
  if (cptPage!=0){
    var menuPage = document.getElementById('menuPage');
    var clone = menuPage.cloneNode(true); // true means clone all childNodes and all event handlers
    newid = "menuPage"+cptPage; 
    clone.id = newid;
    var allTopMenus=document.getElementById('allTopMenus');
    allTopMenus.appendChild(clone);
    $("#"+newid+" li").eq(cptPage).addClass("selected");
  }
  $("#"+newid).eq(0).css({ 
 		"position":"absolute",
      	"left":(cptPage*pageSizeX)+"px",
      	"top":"0px",
	  	"width":pageSizeX+"px"                                        
   });
}
// la page 0 je le fait en dernier sinon sa selection est cloné sur toutes les autres
$("#menuPage li").eq(0).addClass("selected");

var currentPage=0;
function scrollToPage(page){
  currentPage=page;
  window.scrollTo((page-1)*pageSizeX,0);     
}
  
// pour cacher la scroll bar
$("body").css("overflow", "hidden");
 

</script>

Salut,

je suis en train de faire mon design comme le tiens, par contre ton script tu le mets ou exactement ?

merci

[Dapolux]

Bonjour Diabolyk,

Tu peux tout mettre directement dans ton bloc html (clic droit sur le design, ajouter texte/html, puis tu peux directement mettre la partie css, la partie html et la partie script dedans).

Il est aussi possible de tout séparer en passant par la personnalisation avancée si tu le souhaites)

[pascal]

Dapolux,

Pour le Scroll droite gauche, j'ai le même problème.
Si j'ai un peu de temps je regarderais


Envoyé de mon Redmi Note 5 en utilisant Tapatalk

[Dapolux]

Après un peu de recherches, j'ai une solution qui semble fonctionner:

J'ai passé le body en fixed:
body {
position:fixed;
}

Puis j'ai adapté la fonction scrollToPage:

function scrollToPage(page){
currentPage=page;
$("body").css("left", (page-1)*pageSizeX*(-1) + "px");
}

[pascal]

Super Dapolux,
Ça marche très bien, ça commence a devenir vraiment top maintenant

[diabolyk]

Après un peu de recherches, j'ai une solution qui semble fonctionner:

J'ai passé le body en fixed:
body {
position:fixed;
}

Puis j'ai adapté la fonction scrollToPage:

function scrollToPage(page){
currentPage=page;
$("body").css("left", (page-1)*pageSizeX*(-1) + "px");
}

tu applique cette modif toujours dans le texte html de la page ?

[Dapolux]

Oui, toujours dedans.
La partie body, à l'interieur de la balise de Style, et pour la fonction, la ou elle est déjà définie, dans la balise Script.

[diabolyk]

ok donc tu rajoute avant </style> :
body {
position:fixed;
}

et tu remplace :
function scrollToPage(page){
currentPage=page;
window.scrollTo((page-1)*pageSizeX,0);

par :
function scrollToPage(page){
currentPage=page;
$("body").css("left", (page-1)*pageSizeX*(-1) + "px");

c'est bien ça ?

[pascal]

Oui c'est ça

Envoyé de mon Redmi Note 5 en utilisant Tapatalk

[diabolyk]

merci à toi

je commence mon design avec ta méthode, on verra ce que ça donne

du coup j'ai ajouté un design à la suite des autres où il y a celui là plutôt que "X" designs histoire de voir ce que ça donne sans tout crasher...

[pascal]

oui c'est mieux de faire comme ca, moi maintenant je n'ai plus que 2 designs, un pour ma tablette, et un pour mon tel.
chacun avec plusieurs pages

[diabolyk]

oui je viens de faire un essai c'est vraiment topissime !!!!!

quand j'aurais fini celui de la tablette je ferais celui du téléphone et voilà

merci encore t'es un as