Tablettes dédiées domotique

[benj29]

Impec. Je vais regarder côté Asus 10 iconia alors. Merci benj

Envoyé de mon Redmi 5 Plus en utilisant Tapatalk

Pour moi, les avantages :
- full HD,
- hauts parleurs en avant pour le son TTS ou télévision (et non contre le mur étouffé),
- design sobre,
- batterie quand HS à 20 balles sur internet et facile à changer (juste un médiator) et deux vis.
- mois de 100€ sur leboncoin en bon état...

Inconvénients :
- le rétroéclairage de la dalle fait cheap...

[dcjona]

J'ai trouvé une iconia one 10 a moins de 100€ je vais tester. Merci benj

Envoyé de mon Redmi 5 Plus en utilisant Tapatalk

[MachineHead]

Bonjour à tous
je ne suis pas encore utilisateur Jeedom mais je compte le devenir pour un futur projet domotique. J'en suis pour le moment qu'à la documentation. Ma seule certitude est de baser mon projet sur une ipx v4 et toutes les extensions qui l'entoure. Je vais passer beaucoup de cables mais je ne suis pas adepte des technologies sans fil.
Bref je suis là aujourd'hui pour une petite question de newbee...
Evidemment, les ipx c'est bien, c'est stable mais ca manque un peu de fun visuellement donc je souhaiterais mettre un ou deux points de controle Jeedom dans la maison. Donc je vois que vous partez tous sur des solutions avec des tablettes, personnellement je partais plutôt sur une solution raspberry + ecran etc.
Pourquoi ce choix?
De ce que je peux voir: les points positifs des tablettes sont les appli en natif (donc moins de bidouilles), la solution est moins couteuse que l'autre citée, par contre en négatif, c'est que la connexion est Wifi, qu'il faut gérer la batterie.
pouvez vous me donne run peu vore avis pour ces deux solutions?
Merci et bonne soirée

[Theduck38]

Bonjour, et bienvenue à toi

Chaque solution a ses avantages et inconvénients... en revanche un écran tactile est réellement est plus par rapport à un affichage simple.

Si on part sur du tactile :
- La tablette est bon marché jusqu'à 10 pouces ; l'écran tactile + mini PC (ou RPi, Odroid etc...) est plus cher avant 10 pouces, mais compétitif au-delà (ça commence environ à 200€ écran plus RPi).
- Côté intégration, c'est plus simple sur une tablette, elle prend moins de place. Le challenge est en général à ce niveau : caser la charge/alim de la tablette derrière elle, le tout dans un cadre, ou le RPi derrière l'écran ; cela si tu ne veux pas faire un trou énorme dans ton mur, ou déporter des éléments ailleurs.
- Côté soft, peut-être un peu plus simple côté tablette pour avoir du tactile et un navigateur plein écran. il faut aussi se poser la question de l'affichage... écran allumé en permanence, ou quand quelqu'un est devant. Selon les cas, ça peu être plus facile sur la tablette car déjà intégré dans des applications existantes.

Je pense que l'écran est la meilleure solution si tu veux de la grosse surface d'affichage et un peu de puissance derrière (genre un appareil qui puissance aussi assumer d'autre fonctions de domotique) ; mais il faudra plus bidouiller. Il y a un exemple d'intégration dans ce fil un peu plus haut.

Pour la tablette, c'est probablement plus simple et moins onéreux ; il y a pas mal d'exemples dans ce fil, et JPI (soft spécifique domotique) ou Fully Kiosk Browser (soft Android payant) te permettent de gérer pas mal de paramètres de la tablette sans trop se prendre la tête.
Mon cas personnel d'intégration, sous forme de mini tuto :viewtopic.php?f=25&t=5879&start=260#p587503

Si l'interface est ton point de départ, je te conseille de lire l'intégralité de ce fil, il y a beaucoup de bonnes idées et d'exemples.

[diabolyk]

oui plus facile avec une tablette même en étant débutant

voilà ce que j'ai pu faire (avec fabrication du cadre sur mesure bien sûr)

IMG_20180928_191856.jpg (318.7 Kio) Consulté 1988 fois

[MachineHead]

Merci pour vos contributions,
ca me rassure, vous confirmez mes pensées.
Bien entendu j'envisage de toute façon du tactile.
Mais étant donné que mon point de départ, c'est de privilégier dès que j'ai le choix, le filaire (plus fiable) Je pense que je vais partir sur des Raspberry et des écrans.

[pascal]

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 (146.25 Kio) Consulté 1936 fois

2eme vue:

DesignVue2.JPG (167.88 Kio) Consulté 1936 fois

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>

[pascal]

Un dernier point, pour avoir l'heure toujours affiché en bas a droite quelque soit la page, voici le code:

Code : Tout sélectionner

<p id="designHorloge"></p>
 
<script type="text/javascript">
function rafraichir(){
var date = new Date(); /* On crée une date.  */
 
var texte = ''; /* On crée le texte qui va être affiché */
//var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
var options = { year: 'numeric', month: 'short', day: 'numeric' };
texte += date.getHours()+':'+date.getMinutes()+':'+date.getSeconds()+'<br/>';
texte += date.toLocaleDateString('fr-FR', options);
var obj=document.getElementById('designHorloge');   
if (obj != null) obj.innerHTML = texte;
}  
   
setInterval('rafraichir()',100); /* Toutes les 0,1 secondes, on réaffiche la date */
  
$("#designHorloge").css({   
  "box-shadow": "0px 0px 3px 3px rgba(255,255,255,0.5)",
  "background-color": "rgba(0,0,0,0.5)",
   "font-size": "30px",
   "color": "white",
   "text-align": "center",
   "vertical-align": "middle",
   "font-weight": "normal",
   "font-family": "Ubuntu, Arial, sans-serif"
});
$("#designHorloge").parents('div').eq(0).css({        
      "position":"fixed",
      "left":"1015px",
      "top":"710px",
  	  "width":"250px"
    });
</script>

[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>

Merci pour ton idée ça a l'air vraiment pas mal je vais tester je crois dès que j'aurais 5 minutes (car refaire tous mes designs en un seul...)

par contre une question, tu utilise quoi pour le thermomètre de la piscine connecté à jeedom ?

merci

[pascal]

Pour la piscine c'est un FGBS-001 sur une sonde dans le local piscine

[diabolyk]

ah ok tu as une sonde de température, je n'ai pas ça moi... dommage

[Theduck38]

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
(...)

C'est une très bonne idée et une très bonne application de l'idée !

J'ai essayé en 5 minutes, ça marche très bien. En revanche, d'un point de vue pratique, les nouveaux équipements apparaissent toujours au début sur la page 1... du coup je suppose qu'il faut tout construire en partant de la fin et en finissant par la première page ?

Je viens de constater aussi que si tu veux afficher un équipement (genre résumé) sur toutes les pages, c'est problématique car on ne peut l'ajouter qu'une seule fois par design.

[pascal]

Effectivement, l'ajout de l'equipement se fait toujours au meme endroit. c'est jeedom qui doit le positionner comme ca, moi j'ai laisse un espace a l'endroit ou il le cree pour me permettre de le deplacer ensuite.
Pour l'equipement sur toute les pages, il faut creer des virtuels si tu veux le dupliquer sur le meme design, je n'ai pas d'autres solution, pour le moment.
Mais tu as du constaté que le changement est instantané, puisque que tout est dans le meme design, c'est comme si on ne faisait que scroller vers la droite

[HerveL]

Salut,
Merci pour le partage, c'est une très bonne idée.
Question maintenance c'est pas trop compliqué de s'y retrouver quand tu veux modifier un visuel ?

[pascal]

Ça ne fait que 2 semaines que j'ai ça, pour le moment je ne trouve pas à que ce soit difficile.

La seule contrainte c'est que tu ne peux pas mettre 2 équipements dans 2 vues puisque c'est le même design.
En tout cas vu la rapidité du truc, je ne change pas pour le moment

Envoyé de mon Redmi Note 5 en utilisant Tapatalk

[arnox]

Salut Pascal
Ton design me plait vraiment beaucoup! J'ai essaye de l'installer sur mon Jeedom, ca a l'air de fonctionne a un (gros) detail pres, je n'ai pas les images. Ce n'est pas une surprise, je savais que ca allait arriver vu que je n'ai pas les tiennes, et je voudrai de toutes facon les remplacer par les miennes, mais je ne sais pas ou les placer dans l'arbo de mon Raspberry... Tu pourrais me donner une piste stp?
Merci

[pascal]

Salut arnox,

pour les images, je ne me casse pas la tête, je vais dans le plugin Widget.
Puis je clique sur Mode Creation Facile, et je clique sur "Ajouter ses images..." et il les places dans le bon repertoire plugins/widget/core/images

c'est tout

[arnox]

Merci! Effectivement, c'est super simple comme ca!

[IPaaadPro]

Après, ce qui fait que c'est long c'est le refresh. L'allumage lui est instantané, le souci c'est que les indicateurs à l'écran ne sont pas à jour dans certains cas ...

Oui il faut rafraichir le design en arrière plan. toutes les 5 minutes par exple (paramétrable dans l'app Fully)
Pour les changements de design, moi ça prend 2-3 sec avec une SAMSUNG GALAXY TAB E (SM-T560) qui a déjà qq années et vraiment pas chère

Après le design panoramique, c'est une super idée sauf que tu perds le côté "allumage de l'écran et chargement du bon design en fonction d'un évènement"
Comme quand tu sonnes à la porte, tu allumes l'écran et tu charges le design où tu as mis les 3 caméras de l'entrée, interphone et devant la maison par exple
A moins qu'il soit possible d'appeler le design principal et de lui dire de charger la 3ème page?

[pascal]

@IPaaadPro, aller a la 3eme page directement c'est possible en récupérant un paramètre dans l'url, si tu ne vois pas comment faire, je pourrais te donner le code si tu veux