Tips: Lampsymboler med hoover effekt

Moderators: hekj, Telldus

Post Reply
hekj
Posts: 992
Joined: Fri Mar 17, 2023 9:45 am
Location: Stockholm
Contact:

Tips: Lampsymboler med hoover effekt

Post by hekj »

Med en specialdefinierad lampsymbol kan man få en hoover effekt då man för musmarkören över symbolen:

1) avsluta NexaHome

2) ladda hem testversion 2.3.3 eller senare

3) skapa filen demo2.html i "mywebserver" biblioteket enligt följande exempel:

Code: Select all

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head><title>NexaHome - Life Made Easy With Home Automation</title>
    <link rel="Shortcut Icon" href="http://nexahome.se/favicon32x32.ico">
    <meta http-equiv="refresh" content="60;#URL#?mypage=demo2&psw=#PSW#">

    <script type="text/javascript">

    if (document.images)
    {
       on = new Image();
       on.src = "#URL#/on.png";

       off = new Image();
       off.src = "#URL#/off.png";

       onoff = new Image();
       onoff.src = "#URL#/onoff.png";
       
       on150 = new Image();
       on150.src = "#URL#/on150.png";

       off150 = new Image();
       off150.src = "#URL#/off150.png";

       onoff150 = new Image();
       onoff150.src = "#URL#/onoff150.png";
    }

    function imgChange(name, image)
    {
        if (document.images)
        {
          if (image.indexOf("on.png") != -1) {
             document[name].src = eval("on.src");
             
          } else if (image.indexOf("off.png") != -1) {
             document[name].src = eval("off.src");

          } else if (image.indexOf("onoff.png") != -1) {
             document[name].src = eval("onoff.src");
             
          } else if (image.indexOf("on150.png") != -1) {
             document[name].src = eval("on150.src");
             
          } else if (image.indexOf("off150.png") != -1) {
             document[name].src = eval("off150.src");
             
          } else if (image.indexOf("onoff150.png") != -1) {
             document[name].src = eval("onoff150.src");
             
          } else {
             alert("Image not found: " + image);
          }
       }
    }

    function cmdTimeout(href)
    {
       cmd = href;
       setTimeout("cmdExec()", 1000);
    }

    function cmdExec()
    {
       if (cmd) {
          document.location.href = cmd;
       }
    }

    </script>

    </head>

    <!-- device="Kök (bord)" on="on.png" off="off.png" onoff="onoff.png" onhover="on150.png" offhover="off150.png" onoffhover="onoff150.png" -->
    <!-- device="Vardagsrum (gul)" on="on.png" off="off.png" onoff="onoff.png" onhover="on150.png" offhover="off150.png" onoffhover="onoff150.png"-->

    <body bgcolor="#ffffff" background="/nexahome/nexahome_bg.jpg">

    <img style="position:absolute;top:0px;left:0px" src="/nexahome/house_819_layout.png">

    <div style="position: absolute; top: 176px; left: 291px">
    <a href="#URL#?mypage=demo2&psw=#PSW#&device=#ID#Kök (bord)#&cmd=#CMD#Kök (bord)#&rnd=#RND#"
       onMouseOver='
          imgChange("device_#ID#Kök (bord)#", "#IMAGEHOVER#Kök (bord)#");
          cmdTimeout("#URL#?mypage=demo2&psw=#PSW#&device=#ID#Kök (bord)#&cmd=#CMD#Kök (bord)#&rnd=#RND#")'
       onMouseOut='imgChange("device_#ID#Kök (bord)#", "#IMAGE#Kök (bord)#")'>
    <img name="device_#ID#Kök (bord)#" src="#IMAGE#Kök (bord)#" border="0" alt="?"></a>
    </div>

    <div style="position: absolute; top: 205px; left: 105px">
    <a href="#URL#?mypage=demo2&psw=#PSW#&device=#ID#Vardagsrum (gul)#&cmd=#CMD#Vardagsrum (gul)#&rnd=#RND#"
       onMouseOver='imgChange("device_#ID#Vardagsrum (gul)#", "#IMAGEHOVER#Vardagsrum (gul)#")'
       onMouseOut='imgChange("device_#ID#Vardagsrum (gul)#", "#IMAGE#Vardagsrum (gul)#")'>
    <img name="device_#ID#Vardagsrum (gul)#" src="#IMAGE#Vardagsrum (gul)#" border="0" alt="?"></a>
    </div>

    <div style="position: absolute; top: 310px; left: 25px;">
    <form action="nexahome" method="get">
    <input type=hidden name="mypage" value="demo2">
    <input type=hidden name="psw" value="#PSW#">
    <input type=hidden name="rnd" value="#RND#">
    <input type=submit value="#TIMESTAMP#">
    </form>
    </div>

    </body>
    </html>
4) ändra till rätt namn på mottagare och bilder

5) starta NexaHome

6) öppna websidan demo2 och för muspekaren över de två mottagarna, en av mottagarna är definierad så att kommandot går iväg utan att man behöver klicka
Post Reply