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

Le groupe des Helpers est present pour vous aidez, n'hésitez pas à poser des questions ;)

Toute la communauté vous remercie

Tablettes dédiées domotique

Cette partie est réservée à l'utilisation de l'interface web pour smartphone et tablettes
Avatar de l’utilisateur
Theduck38
Helper
Messages : 2616
Inscription : 22 févr. 2015, 17:32
Localisation : Près de Grenoble
Contact :

Re: Tablettes dédiées domotique

Message par Theduck38 » 15 déc. 2018, 13:21

Pas mal... bon c'est encore pas le même budget mais y'a des possibilités... J'adore la table sur le site de tabler.tv.
-- TD38 --
Helper Officiel Jeedom
Zimeteo sur Jeedom : http://www.meteo.lecoin.info
Jeedom Stable sur serveur custom
Le risque électrique - Afficheur leds RGB - Tablette Murale - Thermostat connecté

Avatar de l’utilisateur
Salvialf
Helper
Messages : 1227
Inscription : 24 févr. 2018, 09:37
Contact :

Re: Tablettes dédiées domotique

Message par Salvialf » 15 déc. 2018, 13:34

@Theduck38: tu me rassures je pensais bien qu'il était possible de gérer l'écran par commandes SSH. Du coup ton idée d'utiliser un écran tactile 15" m'intéresse énormément, tu l'utiliserais sur un raspi à part obligatoirement ou c'est jouable sur celui qui héberge jeedom?
VM Jeedom 3.2.16 sous Proxmox 5.4 sur NUC5i5RYH (Debian 9.9)
Helper Officiel Jeedom
Widgets développés
Téléchargement d'icônes domotique (Topic Forum)

Avatar de l’utilisateur
Chrisax
Timide
Messages : 104
Inscription : 09 oct. 2017, 15:05

Re: Tablettes dédiées domotique

Message par Chrisax » 15 déc. 2018, 16:50

Attention, la commande "vcgencmd display_power 0" indiquée dans l'autre topic coupe la sortie écran mais ne passe pas l'écran en veille pour autant. Si le rétroéclairage reste actif, l'écran consomme du courant pour rien et illumine quand même la pièce la nuit.
On doit pouvoir agir sur la luminosité et autres avec les commandes ddcutil mais encore faut-il que l'écran soit compatible.
Jeedom sur nuc/proxmox + dongle Aeotec GEN5 et RfxCom
Ecran de contrôle sur Rpi 3B+ et Google Voice Kit

Avatar de l’utilisateur
maxredphenix
Actif
Messages : 532
Inscription : 18 sept. 2015, 21:36
Localisation : Bourgogne

Re: Tablettes dédiées domotique

Message par maxredphenix » 15 déc. 2018, 17:30

Theduck38 a écrit :
15 déc. 2018, 11:59
Je ne critique en aucun cas ta solution (c'est la tranquillité), mais je pense que pour le même budget il y beaucoup d'alternatives.
Pas de soucis ;)
Après pour la tablette j'ai un ami pour qui elle a carrément commencée à fumer donc madame à dit stop : tablette sans batterie lol.

J'ai tenté avec un RPI3 et un écran 10 tactile qu'on m'a prêté mais je trouve que c'était trop lent. Je ne sais pas pourquoi l'affichage via le navigateur sur raspian était pas top pour les design
DIY Intel NUC i5 7Gen(via Proxmox) - Jeedom 3.2.

IPX800 v4 + 2 modules X-4FP
Détecteur fuite d'eau + fumée fibaro
Divers modules Zwave

Avatar de l’utilisateur
Tibo
Helper
Messages : 17
Inscription : 28 juil. 2016, 21:32
Localisation : 67000

Re: Tablettes dédiées domotique

Message par Tibo » 29 déc. 2018, 19:57

Je viens de tester la solution de @Pascal, design en mode panoramique.
Avantage: Rapidité fulgurante !
Inconvénient: Lorsque je clic sur un capteur, par exemple température, l'historique s'affiche sur la première page, alors que mon capteur se trouve sur la 5ème.
Il y aurait moyen de fixer l'historique sur la page que l'on consulte ?
Jeedom: RPI2, puis RPI3 et enfin serveur maison i5, 10Go DDR3, 1To. Z-Waves, Xiaomi, ESP, CAM, de la bombe :D

Avatar de l’utilisateur
HollyFredD
Timide
Messages : 89
Inscription : 14 janv. 2018, 12:54

Re: Tablettes dédiées domotique

Message par HollyFredD » 02 janv. 2019, 23:52

n_no78 a écrit :Bonjour,
J'ai parcouru le forum et vue le rendu de vos installations, j'ai décidé de sauter le pas.
Black Friday oblige, je profite des promotions en cours pour essayé de trouver une tablette milieu de gamme qui pourrai servir à piloter ma domotique.
J'ai un faible pour la tablette : HUAWEI MediaPad M5 Lite 10 Wi-Fi 10.1 pouce (32Go, 3Go de RAM)
Elle est sous Android 8.0.
Ce qui m’inquiète c'est la surcouche constructeur (ici EMUI). Est-ce qu'elle peux générer des problèmes à la mise en place des script/applications pour géré la caméra ou autres fonctions de la tablette?
Merci pour votre aide.
Cordialement.
Je réponds avec pas mal de retard.

L'avantage des mediapro M5 (et lite sûrement) c'est qu'elles sont compatible treble. Apparemment on peut y installer une rom stock Android (sans surcouche)

En ce moment j'essaye de trouver une M5 LTE d'occasion pour m'en servir avec jpi également et faire passerelle SMS en plus.



Envoyé de mon OnePlus 6 en utilisant mes petits doigts


Avatar de l’utilisateur
Theduck38
Helper
Messages : 2616
Inscription : 22 févr. 2015, 17:32
Localisation : Près de Grenoble
Contact :

Re: Tablettes dédiées domotique

Message par Theduck38 » 03 janv. 2019, 14:48

Salvialf a écrit :
15 déc. 2018, 13:34
@Theduck38: tu me rassures je pensais bien qu'il était possible de gérer l'écran par commandes SSH. Du coup ton idée d'utiliser un écran tactile 15" m'intéresse énormément, tu l'utiliserais sur un raspi à part obligatoirement ou c'est jouable sur celui qui héberge jeedom?
J'avais pas vu la question... mais n'ayant pas fait de tests, je n'en ai aucune idée...
Perso je milite plus pour un serveur dédié sur un micro PC monté soi-même pour pas cher. Donc j'aurais tendance à conseiller un RPi dédié.
-- TD38 --
Helper Officiel Jeedom
Zimeteo sur Jeedom : http://www.meteo.lecoin.info
Jeedom Stable sur serveur custom
Le risque électrique - Afficheur leds RGB - Tablette Murale - Thermostat connecté

mib68
Timide
Messages : 37
Inscription : 01 févr. 2018, 17:36

Re: Tablettes dédiées domotique

Message par mib68 » 03 janv. 2019, 18:21

pascal a écrit :
05 oct. 2018, 21:12
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>
Petite question pascal comment tu gère si tu souhaite ajouter le même objet plusieurs fois sur des pages différente étant donné que tu ne peu que mettre une version d'un équipement par design ?

Y t'il une techique pour pouvoir le faire car chez moi dès que je souhaite rajouter un équipement il me remplace le similaire qu'il y à déja sur le design.

Avatar de l’utilisateur
HollyFredD
Timide
Messages : 89
Inscription : 14 janv. 2018, 12:54

Re: Tablettes dédiées domotique

Message par HollyFredD » 03 janv. 2019, 18:48

mib68 a écrit :
pascal a écrit :
05 oct. 2018, 21:12
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>
Petite question pascal comment tu gère si tu souhaite ajouter le même objet plusieurs fois sur des pages différente étant donné que tu ne peu que mettre une version d'un équipement par design ?

Y t'il une techique pour pouvoir le faire car chez moi dès que je souhaite rajouter un équipement il me remplace le similaire qu'il y à déja sur le design.
Question deja posée :-)

Il faut faire des virtuels (regarde plus haut dans le thread)

Envoyé de mon OnePlus 6 en utilisant mes petits doigts


tsim79
Actif
Messages : 533
Inscription : 23 avr. 2015, 11:54

Re: Tablettes dédiées domotique

Message par tsim79 » 04 janv. 2019, 14:58

Bonjour,

Je suis ce sujet avec intérêt avec l'intention de passé à l'achat, mais j'hésite énormément par rapport au rapport prix/performance, encombrement/affichage,
Que conseilleriez-vous entre ces 2 références (désolé pour les liens vers Amazon):
- tablette CHUWI HI9 Plus 10,8'', 4G, 64Go
https://www.amazon.fr/CHUWI-Hi9-tablett ... B07J9VJ4J2

- tablette HUAWEI mediapad T5 10,1'', 3G, 32Go
https://www.amazon.fr/HUAWEI-MediaPad-T ... B07G71P91G

destiné a être le centre de contrôle de mon Jeedom, mais servira comme tablette de consultation internet dans la cuisine aussi.
Je pensais m'orienter vers des tablettes à moins de 100euros mais j'ai peur de regretter pour la fluidité et la réactivité.

Merci pour vos avis.

Pandalex
Timide
Messages : 60
Inscription : 16 avr. 2018, 15:22

Re: Tablettes dédiées domotique

Message par Pandalex » 06 janv. 2019, 20:09

Salut,
Dites moi, j'ai une tablette Huawei m3 lite. La résolution dans les paramètres est de 1920x1200.
L'appli Rescheck indique aussi 1920x1200.
J'ai commencé à mettre en place le design de F$B33.
J'ai choisis une taille de design en 1920x1200, logique.

Mais lorsque j'ouvre le design avec Fully kiosk browser ça ne correspond pas, le design ne rentre pas. Sauf si je double tap l'écran, dans ce cas il se recentre mais si je change de plan via les boutons du design, rebelote je me retrouve avec une vue 'de près'.

Une idée du problème ?

Swatmorpheus
Actif
Messages : 874
Inscription : 23 avr. 2015, 14:38
Localisation : Haute Gironde

Re: Tablettes dédiées domotique

Message par Swatmorpheus » 11 janv. 2019, 13:44

pascal a écrit :
05 oct. 2018, 21:12
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 voulais tester ton design , je n'ai pas bien saisi comment ça fonctionne quand je crée le design et que je colle le code dans le html je n'ai rien , quand je lis le code je vois scroll page(x) , ou est ce que l'on rentre les id du design
Je vois aussi que tu parles de page 0
Prod: jeedom V3.2.12 DIY RPI3 + Zwave (fibaro) + Zigbee (xiaomi) + IPXV4 + X4VR
AppleTV4k
PI3 : Max2play
PiZéro: PiCoreplayer
Mini+: OpenElec 7.0.1 Kodi 16.1 Jarvis
En préinstall pour migration: Nuc hystou ,ESXi6.7,jeedom V3.2.12, LMS ,Owncloud

Avatar de l’utilisateur
pascal
Actif
Messages : 714
Inscription : 19 août 2014, 20:57
Contact :

Re: Tablettes dédiées domotique

Message par pascal » 12 janv. 2019, 14:37

Bonjour @Swatmorpheus, as tu remplacer les imagettes par les tiennes, ce sont les images ....50x50.png?

Swatmorpheus
Actif
Messages : 874
Inscription : 23 avr. 2015, 14:38
Localisation : Haute Gironde

Re: Tablettes dédiées domotique

Message par Swatmorpheus » 15 janv. 2019, 01:11

Gwladys a écrit :
11 nov. 2018, 20:30
Oups, je cherche plus grand ....j'avais vu que certains utilisaient des pc écran tactiles supérieurs à 16 pouces.
Merci
Salut gwladys, j'ai un iiyama T2452MTS ( 24" pouce tactile ) couplé à un odroid XU4 sur Emmc avec lineageos , je dois dire que ça marche très bien , le seul bémol que je dirais finalement c'est que le tactile n'est pas comme sur une tablette car c'est 2 capteurs infrarouges dans les angles qui mesure ta position donc pas aussi réactif qu'un écran capacitif même si c'est suffisant pour une interface domotique
La chose la plus chiante et j'avoue faut y penser mais tant que tu n'as pas fait l'essaie tu peut pas le savoir,c'est très con , quand une mouche se pose sur l’écran ( je sais pas pourquoi les mouches aiment les écrans :lol: ) bah elle peut faire comme si c'est toi qui appuyait donc je pense changer d'utilisation pour cette écran et basculer l'odroid pour autre chose.
en grand format tu as: - Chez Hanns de G (ht123 par ex) ( il me semble que quelqu'un du forum en a un ).
- La galaxy View 18,4" mais elle est hors de prix entre 700 d'occas à + de 1000€ neuf :D
- Lux Media Digital qui fond de la tablette pro de 14" à 32" avec un android 4 et capacitif avec option support vesa mais pas de camera , je n'ai pas les prix
- Tu as aussi chez Elotouch des écran capacitif projeté ( 20 pouce 500€ la bête quand même )

Sinon bah une tablette simple beaucoup moins chère et max 15/16 pouces mais c'est suffisant

Te voila de quoi faire les soldes :lol:
Prod: jeedom V3.2.12 DIY RPI3 + Zwave (fibaro) + Zigbee (xiaomi) + IPXV4 + X4VR
AppleTV4k
PI3 : Max2play
PiZéro: PiCoreplayer
Mini+: OpenElec 7.0.1 Kodi 16.1 Jarvis
En préinstall pour migration: Nuc hystou ,ESXi6.7,jeedom V3.2.12, LMS ,Owncloud

Gwladys
Timide
Messages : 250
Inscription : 27 avr. 2018, 18:22

Re: Tablettes dédiées domotique

Message par Gwladys » 21 janv. 2019, 18:09

Coucou,

Merci, À moi maintenant de faire les soldes.

Sympa ton retour et tes info.

Bonne soiree

frederic27
Timide
Messages : 17
Inscription : 27 janv. 2019, 17:36

Re: Tablettes dédiées domotique

Message par frederic27 » 02 févr. 2019, 08:10

tom62490 a écrit :
04 nov. 2018, 20:36
Ok merci j avoue que la 156 oxygen me tente bien. Si je me lance je ferais un retour sur le forum.
Bonjour, tu as acheté la tablette archos 156 Oxygen ?

Ricardo
Timide
Messages : 226
Inscription : 14 mars 2015, 15:26

Re: Tablettes dédiées domotique

Message par Ricardo » 02 févr. 2019, 10:26

Bonjour à tous,

Comme tablette domotique je suis sur une Samsung Galaxy view 18.4" + Fully kiosk + un relais fgs222 Fibaro pour la recharger en automatique et franchement c'est le top.

Bonne journée à tous
HP T610 - Jeedom
56 modules Zwave - 32 modules Enocean - 3 modules Edisio - 7 modules Rfxcom - 40 modules Zigbee
Cam : 2 Dafang - 3 Foscam - 3 Wanscam
3 Broadlink - 7 Nuts
5 Amazon Echo - 4 Amazon Echo Dot
5 SqueezeBox - 4 Xiaomi Speaker

Avatar de l’utilisateur
Theduck38
Helper
Messages : 2616
Inscription : 22 févr. 2015, 17:32
Localisation : Près de Grenoble
Contact :

Re: Tablettes dédiées domotique

Message par Theduck38 » 02 févr. 2019, 12:53

Hello,

Je me suis dit un instant "woaw, une tablette 18.4", ça a l'air bien ; je ne savais pas que ça existait"... et puis j'ai été la voir sur Amazon.
J'espère qu'elle est top... parce que côté prix elle fait (vraiment) très mal ! On est plus dans le même budget que les tablettes précédentes.
Après, peut-être qu'elle va durer 15ans et qu'au final ça sera rentable. D'ici là j'aurai probablement changé ma Teclast à 40€ un certain nombre de fois.
-- TD38 --
Helper Officiel Jeedom
Zimeteo sur Jeedom : http://www.meteo.lecoin.info
Jeedom Stable sur serveur custom
Le risque électrique - Afficheur leds RGB - Tablette Murale - Thermostat connecté

Ricardo
Timide
Messages : 226
Inscription : 14 mars 2015, 15:26

Re: Tablettes dédiées domotique

Message par Ricardo » 02 févr. 2019, 13:23

Hello,

C'est sur que coté tarif c'est pas glop !!! je suis d'accord, mais j'ai profité d'une très bonne offre il y a 2 ans sur Amazon en reconditionné à 470 euros. La tablette était neuve !!!
Sinon je ne l'aurais probablement pas acheté au tarif actuellement pratiqué sur Amazon.
Mais je ne regrette pas mes 470 euros, elle vaut vraiment le coup.
HP T610 - Jeedom
56 modules Zwave - 32 modules Enocean - 3 modules Edisio - 7 modules Rfxcom - 40 modules Zigbee
Cam : 2 Dafang - 3 Foscam - 3 Wanscam
3 Broadlink - 7 Nuts
5 Amazon Echo - 4 Amazon Echo Dot
5 SqueezeBox - 4 Xiaomi Speaker

Ricardo
Timide
Messages : 226
Inscription : 14 mars 2015, 15:26

Re: Tablettes dédiées domotique

Message par Ricardo » 02 févr. 2019, 13:24

Erreur..........:o
Dernière édition par Ricardo le 02 févr. 2019, 17:03, édité 1 fois.
HP T610 - Jeedom
56 modules Zwave - 32 modules Enocean - 3 modules Edisio - 7 modules Rfxcom - 40 modules Zigbee
Cam : 2 Dafang - 3 Foscam - 3 Wanscam
3 Broadlink - 7 Nuts
5 Amazon Echo - 4 Amazon Echo Dot
5 SqueezeBox - 4 Xiaomi Speaker

Répondre

Revenir vers « Portail web smartphone & tablettes »

Qui est en ligne ?

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