Boutons ON/OFF pour commandes domotique

9 mai 2010 à 20:20:09

Bonjour,

J'ai un besoin similaire a ce sujet:

http://www.siteduzero.com/forum-83-503 [...] html#r4956109

Mais pour lancer des commandes, ON et OFF au logiciel "Eventghost" qui permet ensuite de commander physiquement des lampes.

Pour ceux que ça intérésse, j'ai commencé à parler de mon projet domotique ici:

http://www.touteladomotique.com/forum/ [...] ic.php?t=3850

Je suis technicien Réseaux et Télécom et donc peux de connaissance sur le javascript, donc je vous appel à l'aide, j'ai essayé de comprendre mais je n'arrive pas à m'en sortir.

J'ai essayé un onclick="location.href('url_locale_page_web.htm')" sur le checkbox mais sans succés !

Je vous remerci par avance de votre aide

Voici un exemple de code d'une telecommande qui fonctionne avec eventghost:

<html>
<head>
<meta http-equiv="expires" content="0">

<title>Remote</title>

<code type="css"><code type="css"><style type="text/css">
    /* Hide the Menubar */
    #toolbar-menubar {display: none;}
    
    #p1 
    { 
        width:28pt; 
        height:26pt; 
        color:white; 
        background-color:dimgray; 
        font-weight:bold 
    }
    #p2 
    { 
        width:28pt; 
        height:26pt; 
        color:white; 
        background-color:dimgray; 
        font-weight:bold; 
        font-size:8pt; 
    }
    #p3 
    { 
        width:20pt; 
        height:20pt; 
        color:white; 
        background-color:dimgray; 
        font-weight:bold; 
        font-size:8pt; 
    }
</style>
</code>

<code type="javascript">
</code><script type="text/javascript">

function Request(eventname)
{
    var xmlHttp = null;
    var dateObject = new Date();

    try
    {
        // Firefox, Opera 8.0+, Safari, IE7
        xmlHttp = new XMLHttpRequest();
    }
    catch (e)
    {
        
        try
        {
            // IE 6
            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch (e)
        {
            // IE 5
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
    }

    xmlHttp.open('GET', "empty?" + eventname + "&_id" + dateObject.getTime(), true);
    xmlHttp.send(null);
    return false;
}


function TriggerEvent(eventname)
{
    Request(eventname + "&withoutRelease");
    return false;
}


function ButtonReleased() 
{
   Request("ButtonReleased");
   return false;
}


function KeyDownHandler(event) 
{
    switch(event.which)
    {
        case  13: TriggerEvent("Ok"); break;
        case  32: TriggerEvent("Mute"); break;
        case  33: TriggerEvent("PageUp"); break;
        case  34: TriggerEvent("PageDown"); break;
        case  37: TriggerEvent("Left"); break;
        case  38: TriggerEvent("Up"); break;
        case  39: TriggerEvent("Right"); break;
        case  40: TriggerEvent("Down"); break;
        case  77: TriggerEvent("Music"); break; // key 'm'
        case  68: TriggerEvent("DVD"); break; // key 'd'
        case  84: TriggerEvent("TV"); break; // key 't'
        case  48: case  96: TriggerEvent("Num0"); break;
        case  49: case  97: TriggerEvent("Num1"); break;
        case  50: case  98: TriggerEvent("Num2"); break;
        case  51: case  99: TriggerEvent("Num3"); break;
        case  52: case 100: TriggerEvent("Num4"); break;
        case  53: case 101: TriggerEvent("Num5"); break;
        case  54: case 102: TriggerEvent("Num6"); break;
        case  55: case 103: TriggerEvent("Num7"); break;
        case  56: case 104: TriggerEvent("Num8"); break;
        case  57: case 105: TriggerEvent("Num9"); break;
        case 106: TriggerEvent("VolumeUp"); break;
        case 111: TriggerEvent("VolumeDown"); break;
        default:  alert(event.which); break;
    }
    return false;
}

function StartUp()
{
    document.onkeydown = KeyDownHandler;
    document.onkeyup = ButtonReleased;
    
    // It is important to assign a mouse-up event handler to the document body. 
    // Assigning it to the element (eg. button) wouldn't get triggered if the pressed 
    // mouse moves outside the elements area.
    document.onmouseup = ButtonReleased;
}

</script>
</code>

<code type="html">
</head>

<body onLoad="StartUp()" bgcolor="#3A3C69" text=white link=white vlink=white alink=white>
<center>
<table border="0">
    <tr>
        <td><button id="p2" onMouseDown="TriggerEvent('TV')">TV</button></td>
        <td><button id="p2" onMouseDown="TriggerEvent('DVD')">DVD</button></td>
        <td><button id="p2" onMouseDown="TriggerEvent('Music')" style="font-weight:normal">Music</button></td>
    </tr>
</table>
<br>
<table border="0">
    <tr>
        <td><button id="p1" onMouseDown="TriggerEvent('Num1')">1</button></td>
        <td><button id="p1" onMouseDown="TriggerEvent('Num2')">2</button></td>
        <td><button id="p1" onMouseDown="TriggerEvent('Num3')">3</button></td>
    </tr>
    <tr>
        <td><button id="p1" onMouseDown="TriggerEvent('Num4')">4</button></td>
        <td><button id="p1" onMouseDown="TriggerEvent('Num5')">5</button></td>
        <td><button id="p1" onMouseDown="TriggerEvent('Num6')">6</button></td>
    </tr>
    <tr>
        <td><button id="p1" onMouseDown="TriggerEvent('Num7')">7</button></td>
        <td><button id="p1" onMouseDown="TriggerEvent('Num8')">8</button></td>
        <td><button id="p1" onMouseDown="TriggerEvent('Num9')">9</button></td>
    <tr>
        <td></td>
        <td><button id="p1" onMouseDown="TriggerEvent('Num0')">0</button></td>
        <td></td>
    </tr>
    <tr>
        <td height="10"></td>
    </tr>
    <tr>
</table>
<table border="0">
    <tr cellspan="3">
        <td><button id="p3" onMouseDown="TriggerEvent('Red')" style="background-color:red">&nbsp;</button></td>
        <td><button id="p3" onMouseDown="TriggerEvent('Green')" style="background-color:green">&nbsp;</button></td>
        <td><button id="p3" onMouseDown="TriggerEvent('Yellow')" style="background-color:yellow">&nbsp;</button></td>
        <td><button id="p3" onMouseDown="TriggerEvent('Blue')" style="background-color:blue">&nbsp;</button></td>
    </tr>
    <tr>
        <td height="10"></td>
    </tr>
</table>
<table border="0">
    <tr>
        <td><button id="p2" onMouseDown="TriggerEvent('Home')" style="font-weight:normal">Home</button></td>
        <td><button id="p1" onMouseDown="TriggerEvent('Up')"><img src="up.gif"></button></td>
        <td><button id="p1" onMouseDown="TriggerEvent('PageUp')"><img src="dup.gif"></button></td>
    </tr>
    <tr>
        <td><button id="p1" onMouseDown="TriggerEvent('Left')"><img src="left.gif"></button></td>
        <td><button id="p1" onMouseDown="TriggerEvent('Ok')">OK</button></td>
        <td><button id="p1" onMouseDown="TriggerEvent('Right')"><img src="right.gif"></button></td>
    </tr>
    <tr>
        <td><button id="p2" onMouseDown="TriggerEvent('Menu')" style="font-weight:normal">Menu</button></td>
        <td><button id="p1" onMouseDown="TriggerEvent('Down')"><img src="down.gif"></button></td>
        <td><button id="p1" onMouseDown="TriggerEvent('PageDown')"><img src="ddown.gif"></button></td>
    </tr>
    <tr>
        <td height="20"></td>
    </tr>
    <tr>
        <td><button id="p1" onMouseDown="TriggerEvent('VolumeUp')">V+</button></td>
        <td><button id="p1" onMouseDown="TriggerEvent('Mute')"><img src="mute.gif"></button></td>
        <td><button id="p2" onMouseDown="TriggerEvent('Help')" style="font-weight:normal">Help</button></td>
    </tr>
    <tr>
        <td><button id="p1" onMouseDown="TriggerEvent('VolumeDown')">V-</button></td>
        <td><button id="p1" onMouseDown="TriggerEvent('Fullscreen')">16:9</button></td>
        <td><button id="p2" onMouseDown="TriggerEvent('Power')" style="color:black; background-color:orangered;">Off</button></td>
    </tr>
</table>
</center>
</body>
</code>
</html>

slikus

11 mai 2010 à 23:33:17

Bonsoir,

Personne pour m'aider, s'il vous plait ?

ça fait deja 2 soir que j'essai sans succés !!

Par avance merci

M. Drake

11 mai 2010 à 23:40:38

Personne ne te répondera car ton problème est spécifique à EvenGhost, or tu ne donnes pas plus de spécifications (comment sont échangées les données, etc ...)

Essaye de précisé comment la page web que tu veux créer doit interagir avec le logiciel.

Sinon il semble que c'est de l'ajax, je te redirige vers ce tuto : http://www.siteduzero.com/tutoriel-3-4 [...] vascript.html

Tu en apprendra plus sur l'Ajax et l'échange de données, cela semble être la techno utilisée par ton programme.

N'hésite pas a poser des questions

slikus

12 mai 2010 à 0:07:42

Merci je regarde ça, en fait event ghost recupére des commandes envoyés dans l'url genre:

<a href="?shuffel"><img border="0" src="shuffel.gif"></a>

Mais en javascript je vois pas trop comment faire avec un bouton à 2 états ?

Golmote

12 mai 2010 à 2:53:34

Bah il te suffit de faire comme dans ton code d'exemple non ? Tu passes les commandes en Ajax et c'est bon... ?

slikus

12 mai 2010 à 23:26:29

Merci pour vos réponses, en fait j'ai fini par faire plus simple grace au site "xul.fr", un bouton à 2 état, pour ceux que ça intérésse voici les codes:

La page HTML:

<html>
<head>
<title>D&eacute;mo JavaScript - Echanger des Boutons</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
	.aep
	{
		color: #009;
	}
</style>

<script src="oneButton.js" type="text/javascript"></script>

</head>

<body bgcolor="#FFFFFF">
<h1>Demo JavaScript - Echanger des boutons</h1>
<table width="352" border="0" cellspacing="4" cellpadding="0">
  <tr> 
    <td width="151"> 
      <div onclick="switchButton(this);" align="center"><img src="green-off.gif" width="28" height="28" align="middle"></div>
	  <div onclick="switchButton2(this);" align="center"><img src="green-off.gif" width="28" height="28" align="middle"></div>
	</td>
  </tr>
</table>
</body>
</html>

Et le js:

/**
	Ajax Extensible Page - (c) 2007 Denis Sureau
	http://www.xul.fr
	Version 1.2.
*/

/**
	A script to change the image of a button
	and call a function according to each image.
*/	


var buttonDevelop = "red-off.gif";
var buttonSummarize = "red-on.gif";
function switchButton(element)
{
	var d = buttonDevelop.length;
	var s = buttonSummarize.length;
	
	var image = element.firstChild;
	var name = image.getAttribute("src");
	var iname = name.substr(name.length - d, d);

	if(iname == buttonDevelop)
	{		
		image.setAttribute("src", buttonSummarize);
		TriggerEvent("on");
		return;				
	}
	iname = name.substr(name.length - s, s);
	if(iname == buttonSummarize)
	{
		image.setAttribute("src", buttonDevelop);
		TriggerEvent("off")
		return;				
	}
}

function switchButton2(element)
{
	var d = buttonDevelop.length;
	var s = buttonSummarize.length;
	
	var image = element.firstChild;
	var name = image.getAttribute("src");
	var iname = name.substr(name.length - d, d);

	if(iname == buttonDevelop)
	{		
		image.setAttribute("src", buttonSummarize);
		TriggerEvent("on1");
		return;				
	}
	iname = name.substr(name.length - s, s);
	if(iname == buttonSummarize)
	{
		image.setAttribute("src", buttonDevelop);
		TriggerEvent("off1")
		return;				
	}
}

function Request(eventname)
{
    var xmlHttp = null;
    var dateObject = new Date();

    try
    {
        // Firefox, Opera 8.0+, Safari, IE7
        xmlHttp = new XMLHttpRequest();
    }
    catch (e)
    {
        
        try
        {
            // IE 6
            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch (e)
        {
            // IE 5
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
    }

    xmlHttp.open('GET', "empty?" + eventname + "&_id" + dateObject.getTime(), true);
    xmlHttp.send(null);
    return false;
}


function TriggerEvent(eventname)
{
    Request(eventname);
    return false;
}

Et ça roule

En fait la commande pour event est:

"TriggerEvent("on")

Si on veut l'adapter au script de restimel ou doit-on la placer dans le code pour l'activer lors d'un clique ?