Popup télécommande TV

[Phebus06]

Bonjour,

Sur mon domoticz je peux piloter toute ma TV grâce à des boutons virtuels qui donnent des ordres à un Broadlink RM Pro 2.

J'ai vu que dans la custom page il y avait la possibilité d'avoir un popup de la télécommande Freebox.

Serait il possible d'avoir un popup d'une télécommande universel avec des lignes de commande vide afin que chacun puisse y mettre ses actions pour commander sa TV.

Perso j'ai essayé de bidouiller avec celle proposée sur la custom page, mais je n'ai pas trouvé dans quel fichier sont les lignes qui permettent d'envoyer les ordres par touche.

Si quelqu'un à une idée je suis preneur

[fab0030]

Un truc du genre :



mais pour télévision !!
je veux bien regarder, mais faudra être patient et me relancer de temps en temps !!

Fabien

[cyberbob]

peut-on le faire aussi avec un logitech harmony Hub ?
Pour l'instant cela fonctionne pour allumer ou éteindre mais peut-on envoyer d'autre ordre comme changement de chaine, volume, ... ?

[fab0030]

Presque terminé la télécommande !
J ai toutefois un pb, je n arriver pas à exécuter un fichier php (pour test) à partir d un .js

Code : Tout sélectionner

$("[name='power']").on('click', function(e){
  $('.display').text('POWER');
   
$.get("scripts/tempcoulpush.php");
             
  setTimeout(function(){
    $('.display').text('');
  },1000);
});

Je précise que le script fonctionne, testé via ./tempcoulpush.php et que je l utilise via domoticz
Dans la console j ai

Code : Tout sélectionner

http://IP/monitor_test/panel/paneltvsalon/scripts/tempcoulpush.php 501 (Not Implemented)  VM397 jquery-latest.min.js:4

merci pour l aide

[fab0030]

Voili Voilà à quoi cela ressemble



Le plus dur dans l'histoire c'est d'ajouter un popup...

je vais essayer de ne rien oublier

1ere étape : modifier frontpage.js

il faut ajouter les fonctions d'ouverture et fermeture du popup - modifiez les noms selon vos envies ainsi que le lien vers l'index (perso j ai ajouté un dossier panel pour faire propre)

Code : Tout sélectionner

// show televison salon commande panel
function showPanelcomtelesalon() {
	$('#popup_panelcomtelesalon').html(['<object type="text/html" data="',$.domoticzurl,'/monitor_test/panel/paneltvsalon/index.html" width="100%" height="100%"></object>'].join(''));
	$('#popup_panelraspdz').fadeIn(fad_Duration);
	$('#fade').fadeIn(fad_Duration);
	$('#fade').click(closePanelcomtelesalon);
	tempo = setTimeout(closePanelcomtelesalon,120000);
}

// close televison salon commande panel
function closePanelcomtelesalon() {
	$('#popup_panelcomtelesalon').fadeOut(fad_Duration);
	$('#fade').fadeOut(fad_Duration);
	$("#fade").off("click");
	$('#popup_panelcomtelesalon').empty();
	clearTimeout(tempo);
}

2eme étape : modifier index.html

Ajouter la ligne (en respectant le nom que avez choisi plus haut)

Code : Tout sélectionner

<div id="popup_panelcomtelesalon"></div>

3eme étape : modifier global.css

Ajouter la mise en forme du popup (en gardant toujours le même nom!)

Code : Tout sélectionner

#popup_panelcomtelesalon
{
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300px;
    height: 500px;
    margin-left: -150px;
    margin-top: -250px;                 
    padding: 0px;
 /*   border: 2px solid red;*/
 /*   background: #333;*/
   z-index:1002;
    overflow:hidden;
	font-family: 'Open Sans', sans-serif;
	font-weight: bold;
	font-size: 400px;
	color: white;
	line-height: 150px;
	border-radius: 15px 15px 15px 15px;	
}

4eme étape : modifier frontpage_settings.js

Ajouter une ligne dans la page où vous souhaitez placer l'icône pour ouvrir le popup

Code : Tout sélectionner

['0','Html',      					'cell8_43',                			'<button class="comtelesalon" onclick="showPanelcomtelesalon()" type="button" > </button>','','','',''],

J'ai défini une nouvelle classe de bouton....il faut donc la créer

5eme étape : modifier global.css

Ajouter notre icône pour lancer le popup

Code : Tout sélectionner

button.comtelesalon{
	background-image: url(/monitor_test/icons/icone_info.png);
	background-repeat: no-repeat;
	width:50px;
	height:50px;
	cursor:pointer;
	background-color:transparent;
	-moz-box-shadow: 0px 0px 0px 0px #000000;
	-webkit-box-shadow: 0px 0px 0px 0px #000000;
	box-shadow: 0px 0px 0px 0px #000000;

	border:0px solid #000000;
}

Il vous faut modifier l'url (background-image) qui renvoie vers la jolie icône choisie...et bien sur mettre l'image dans le dossier

6eme étape : modifier la page html dans lequel vous mettez l'icône

dans mon cas j'ajoute l'id vue plus haut dans frontpage_settings

Code : Tout sélectionner

<div id="ls_cell8_43"></div><div id="cell8_43">--</div><div id="desc_cell8_43">cell8_43</div>

7eme étape : modifier le .css de la page concernée pour placer votre icone

Code : Tout sélectionner

/*	popup panelcomtelesalon */

#cell8_43
     {

   	position: fixed;
    	top: 430px;
    	left: 355px;
		border: 1px solid transparent;
	border-radius: 0px;
	height: 58px;
	line-height: 55px; 		
	color: #999;
	font-size:10px;
	text-shadow: 1px 1px 4px black;	
}

Voilà pour l'ajout d'un popup, concernant la télécommande :

comme vu plus haut j'ai un dossier panel puis paneltvsalon

dans ce dernier j'ai trois fichiers : index.html - style.css - paneltvsalon.js

index.html :

Code : Tout sélectionner

<!DOCTYPE html>
<html lang="en-US">

<head>
<meta charset="utf-8">
<meta name="mobile-web-app-capable" content="yes">
<link rel="stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>

	
<body>		

<div id="controller">
  <div class="controls">
    <ins class="button red" name="power"><span>POWER</span></ins>
    <ins class="button" name="vol+"><span>Vol +</span></ins>
    <ins class="button" name="vol-"><span>Vol -</span></ins>
	<ins class="button" name="1"><span>1</span></ins>
    <ins class="button" name="2"><span>2</span></ins>
    <ins class="button" name="3"><span>3</span></ins>
	<ins class="button" name="4"><span>4</span></ins>
    <ins class="button" name="5"><span>5</span></ins>
    <ins class="button" name="6"><span>6</span></ins>
	<ins class="button" name="7"><span>7</span></ins>
    <ins class="button" name="8"><span>8</span></ins>
    <ins class="button" name="9"><span>9</span></ins>
    <ins class="button" name="ch-"><span>CH -</span></ins>
	<ins class="button" name="0"><span>0</span></ins>
    <ins class="button" name="ch+"><span>CH +</span></ins>
    <ins class="button" name="settings" ><span>SETTINGS</span></ins>
	<ins class="button" name="vide1"><span> </span></ins>
	<ins class="button" name="vide2"><span> </span></ins>
    <ins class="button" name="menu"><span>MENU</span></ins>
    <ins class="button blue" name="ok"><span>OK</span></ins>
    <ins class="button" name="input"><span>INPUT</span></ins>
    <ins class="button" name="back"><span>BACK</span></ins>
    <ins class="button" name="exit"><span>EXIT</span></ins>
    <ins class="button" name="guide"><span>GUIDE</span></ins>
  </div>
  <div class="display">
    <!-- display msg here -->
  </div>
</div>
	
<script type="text/javascript" src="paneltvsalon.js" ></script>	
	
</body>	

</html>

style.css :

Code : Tout sélectionner

#controller 
{
  margin: 0px auto;
  width: 127px;
  height: 400px;
  background: #000;
  background: -webkit-gradient(linear, left top, right top, color-stop(0%,#131313), color-stop(0%,#111111), color-stop(0%,#1c1c1c), color-stop(8%,#666666), color-stop(50%,#a59393), color-stop(92%,#595959), color-stop(100%,#000000), color-stop(100%,#4c4c4c));
  border: 1px solid transparent;
  border-radius: 10px;
  box-shadow: 3px 3px 10px #222;
  padding: 30px;
  font-family: sans-serif;
  color: #eee;
}

.controls {
  position:relative;
}

.display
{
  clear: both;
  width: 98%;
  height: 20px;
  padding: 10px 0;
  background: #222;
  box-shadow: inset 2px 0 11px #000;
  border-radius: 5px 5px 0;
  text-align:center;
  color: #48D1CC;
  font-size: 12px;
  text-shadow: 0 0 5px #FFFACD;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 2px;
  line-height: 18px; 
}

.button
{
  float: left;
  margin: 10px 10px 12px;
  background: #303131;
  width: 20px;
  height: 20px;
  border-radius: 30px;
  border: 1px solid #000;
  text-align: center;
  position: relative;
  box-shadow:0 0 7px #000, inset 0 0 20px #000;
}

.button:hover 
{
  box-shadow:0 0 1px #000, inset 0 0 9px #000;
}

ins > span 
{
  position: absolute;
  font-size: 9px;
  left: -9px; top:-20px;
  color: #888;
  width: 34px;
  color: #fff;
  font-weight: bold;
  padding: 3px;
  text-align: center;
  text-transform: uppercase;
}

.red {
  background: red!important; 
}

.blue 
{
  background: azure!important;
}

et paneltvsalon.js :

Code : Tout sélectionner

$("[name='power']").on('click', function(e){
  $('.display').text('POWER');
  
///////appel URL///////
$.ajax({
url : 'http://VOTRE_IP_VERS_SCRIPT_OU_VERS_APPAREIL_DOMOTICZ',
});

  setTimeout(function(){
    $('.display').text('');
  },1000);
});

$("[name='vol+']").on('click', function(e){
  $('.display').text('VOL +');
  
///////appel URL///////
$.ajax({
url : 'http://VOTRE_IP_VERS_SCRIPT_OU_VERS_APPAREIL_DOMOTICZ',
});
  
  setTimeout(function(){
    $('.display').text('');
  },1000);
});

$("[name='vol-']").on('click', function(e){
  $('.display').text('VOL -');
  setTimeout(function(){
    $('.display').text('');
  },1000);
});

$("[name='ch+']").on('click', function(e){
  $('.display').text('CH +');
  setTimeout(function(){
    $('.display').text('');
  },1000);
});

$("[name='ch-']").on('click', function(e){
  $('.display').text('CH -');
  setTimeout(function(){
    $('.display').text('');
  },1000);
});

$("[name='settings']").on('click', function(e){
  $('.display').text('SETTINGS');
  setTimeout(function(){
    $('.display').text('');
  },1000);
});

$("[name='menu']").on('click', function(e){
  $('.display').text('MENU');
  setTimeout(function(){
    $('.display').text('');
  },1000);
});

$("[name='ok']").on('click', function(e){
  $('.display').text('OK');
  setTimeout(function(){
    $('.display').text('');
  },1000);
});

$("[name='input']").on('click', function(e){
  $('.display').text('INPUT');
  setTimeout(function(){
    $('.display').text('');
  },1000);
});

$("[name='back']").on('click', function(e){
  $('.display').text('BACK');
  setTimeout(function(){
    $('.display').text('');
  },1000);
});

$("[name='exit']").on('click', function(e){
  $('.display').text('EXIT');
  setTimeout(function(){
    $('.display').text('');
  },1000);
});

$("[name='guide']").on('click', function(e){
  $('.display').text('GUIDE');
  setTimeout(function(){
    $('.display').text('');
  },1000);
});

$("[name='1']").on('click', function(e){
  $('.display').text('CH 1');
  setTimeout(function(){
    $('.display').text('');
  },1000);
});

$("[name='2']").on('click', function(e){
  $('.display').text('CH 2');
  setTimeout(function(){
    $('.display').text('');
  },1000);
});

$("[name='3']").on('click', function(e){
  $('.display').text('CH 3');
  setTimeout(function(){
    $('.display').text('');
  },1000);
});

$("[name='4']").on('click', function(e){
  $('.display').text('CH 4');
  setTimeout(function(){
    $('.display').text('');
  },1000);
});

$("[name='5']").on('click', function(e){
  $('.display').text('CH 5');
  setTimeout(function(){
    $('.display').text('');
  },1000);
});

$("[name='6']").on('click', function(e){
  $('.display').text('CH 6');
  setTimeout(function(){
    $('.display').text('');
  },1000);
});

$("[name='7']").on('click', function(e){
  $('.display').text('CH 7');
  setTimeout(function(){
    $('.display').text('');
  },1000);
});

$("[name='8']").on('click', function(e){
  $('.display').text('CH 8');
  setTimeout(function(){
    $('.display').text('');
  },1000);
});

$("[name='9']").on('click', function(e){
  $('.display').text('CH 9');
  setTimeout(function(){
    $('.display').text('');
  },1000);
});

$("[name='0']").on('click', function(e){
  $('.display').text('CH 0');
  setTimeout(function(){
    $('.display').text('');
  },1000);
});

C'est dans ce dernier qu'il vous faut ajouter les actions pour chaque boutons - voir exemple sur les deux premiers bouton (power et vol +).

j ai fait de mon mieux avec mes piètres connaissances tout en essayant de respecter le boulot de Vil1driver!! - ça me convient alors je partage !!

[fab0030]

Phebus06...est ce que cela te convient

[Phebus06]

Alors la bravo...très joli travail

Je vais tester ça dès que possible

Merci, merci

[jmv75013]

Bonjour,

J'ai adapté le travail de fab0030, pour l'affichage d'une popup pollen.J'ai un petit problème, le bouton n'apparait pas mais si je cliques à l'endroit ou il devrait apparaitre cela fonctionne le popup avec l'image des alertes pollen s'affiche bine.

le fichier image du bouton est situé dans monitor/icons/

Le css (dans global.css) associé est le suivant :

Code : Tout sélectionner

button.pollen{
   background-image: url(../icons/pollen.png);
   background-repeat: no-repeat;
   width:50px;
   height:50px;
   cursor:pointer;
   background-color:transparent;
   -moz-box-shadow: 0px 0px 0px 0px #000000;
   -webkit-box-shadow: 0px 0px 0px 0px #000000;
   box-shadow: 0px 0px 0px 0px #000000;
   border:0px solid #000000;
}

Je suppose que c'est un problème d'url... mais je sèche !
Merci pour votre aide.

[fab0030]

As tu essayé en mettant l'url complète de l'image sans commencer par ../

[jmv75013]

Bonjour Fab,

D'abord merci pour ton travail. Ensuite j'ai essayé de mettre l'url complète et cela ne change rien. Cela doit venir d'ailleurs mais je ne vois d'où