Bouton à 2 états

Archive du forum. Pour une commande domotique, utilisation du bouton à 2 états.

Forum

Bouton à 2 états

11-05-2010 23:29:18

slikus

Bonjour, Pour une utilisation de commande domotique, je suis intéréssé par votre bouton à 2 états trouvé sur votre site. Aprés plusieurs essais sans succés je vous solicite pour une aide J'aimerai lors du clique sur le bouton plutot que d'utiliser "Extensible", envoyer des commandes à mon logiciel eventghost, genre ON/OFF ! Pouvez vous m'aider s'il vous plait ? Par avance merci Voici un exemple de code d'une telecommande envoyant des codes à eventghost, si ça peut aider:

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

Et un exemple de bouton:

<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>
</table>
</center>
</body>

Par avance merci.

12-05-2010 18:18:18

webmaster

Bonjour Je pense en effet que la logique du script peut s'appliquer aussi bien aux fonctions de votre application. C'est la fonction switchButton() qui bascule entre les deux images et les fonctions à appeler. Les fonctions à appeler en l'occurence sont develop() et summarize()

var buttonDevelop = "develop.gif";
var buttonSummarize = "summarize.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);
        develop();
        return;                
    }
    iname = name.substr(name.length - s, s);
    if(iname == buttonSummarize)
    {
        image.setAttribute("src", buttonDevelop);
        summarize();
        return;                
    }
}

On pourrait remplacer

develop() et summarize()

par

TriggerEvent("on") et TriggerEvent("off")

ou quelque chose comme cela (je ne connaît pas bien votre application).

12-05-2010 22:14:37

slikus

Bonjour, Super, génial ça marche ! ça fait 5 jours que j'essai sans succés, et grace à vous ça fonctionne Merci beaucoup beaucoup c'est grace à des gens comme vous qu'on avance !!! Par contre, je vais encore abusé de votre conaissance, comment puis je faire si j'ai plusieurs bouton sur la même page ? Je l'ai fait mais en multipliant plusieurs fonctions, c'est peut être pas trop optimisé? NB: J'ai voulu copier le code modifié mais j'ai une erreur désolé: "Les erreurs suivantes doivent être corrigées pour que le message puisse être envoyé : *" Encore merci je suis trop heureux!!

13-05-2010 20:20:30

webmaster

On peut réutiliser la même fonction, c'est certain. J'ai essayé avec le même bouton en plusieurs exemplaires, et cela fonctionne, mais les fonctions appelées sont bien sûr différentes, il faut alors ajouter des paramètres: La fonction:

function switchButton(element, fonction1, fonction2)

L'appel:

onClick="switchButton(this, function1, function2)

14-05-2010 22:02:46

slikus

Bonjour, Merci pour la réponse, désolé ça fait 1h que j'essai mais je n'y arrive pas, je doit être vraiment nul !! J'ai peut être mal compris Par contre, je sais pas si je me suis bien fait comprendre: En fait j'aimerai bien savoir comment faire plusieurs boutons avec des evenements différents ? Exemple: 1 bouton allumage et extinction de l'eclairage de la terassse 1 bouton allumage et extinction de l'eclairage di garage ect... Je comprend pas trop le "this" en fait dans le script ? Encore désolé de vous déranger pour ça ! C'est deja enorme votre premiére réponse, c'est quand même mieu que d'avoir 2 boutons un ON et un OFF !!

15-05-2010 19:11:45

webmaster

Il s'agit bien d'évènements mais en fait je crois qu'un seul paramètre additionnel serait nécessaire. Ce peut être par exemple "OK", "Mute", etc... Le code deviendrait:

function switchButton(element, param)
{
    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(param, "on");
        return;                
    }
    iname = name.substr(name.length - s, s);
    if(iname == buttonSummarize)
    {
        image.setAttribute("src", buttonDevelop);
        TriggerEvent(param, "off");
        return;                
    }
}

Le détail dépend de l'application en question et de comment elle applique les états "on" et "off". Le mot-clé "this" dans l'appel de la fonction représente l'élément HTML auquel est associé l'évènement. Il se traduit par la variable element dans le code JavaScript. A partir de cela on récupère les données des attributs de l'élément HTML comme "src".

16-05-2010 21:02:08

slikus

Bonsoir, J'ai enfin compris, et ça fonctionne j'ai été obligé de changer un peu le code, mais je n'arrive toujours pas à le copier en balise code, j'ai toujour une erreur, en gros switchButton(this,'Lampe1') sans les cote ça fontionne pas, et TriggerEvent(param + "on"); ça m'envoie une Lampe1On et Lampe1OFF ça le fait comme ça !! Encore merci pour tout

09-06-2011 01:22:57

orguesauxerre

Bonsoir, J'utilise le code proposé pour les boutons à deux états. Sur une page, j'ai 67 boutons, tous identiques, pouvant prendre deux positions : éteint ou allumé. Mes boutons ne sont décrits qu'une seule fois, c'est-à-dire une image Develop et une image Summarize. L'affichage (positionnement sur la page) et le fonctionnement (allumé, éteint) fonctionnent bien. Or, comme chaque ligne HTML appelle chacun des boutons par un clic de souris, je voudrais qu'elle contienne et affiche le nom du bouton correspondant (deux fois) puisqu'il n'y a que la couleur qui change. Tout ça pour dire que je n'ai pas du tout envie de dessiner 2 x 67 boutons. La cerise sur le gateau serait un bouton supplémentaire (toujours éteint, du genre bouton-poussoir d'annulation) qui éteindrait tous les boutons allumés par un seul clic. Si cette page (ce panneau de boutons) pouvait fonctionner, je verrais plus tard comment affecter des fonctions aux boutons... je vous remercie de ce que vous pourrez faire. Cordialement. Jean-Marie d'orguesauxerre.

11-06-2011 20:15:54

webmaster

Bonjour Un autre exemple de bouton à deux états si cela peut aider... Bouton on/off Ce devrait être plus facile à installer quand il y a de nombreuses occurences dans la même page.