Change Color of Button

Discussions about Mainlobby running on Apple mobile devices.
sonypoolplr
Is there life beyond Cinemar?
Is there life beyond Cinemar?
Posts: 1490
Joined: Fri Mar 26, 2004 8:48 am
Location: New Jersey
Contact:

Change Color of Button

Postby sonypoolplr » Fri Apr 15, 2011 8:59 am

It might not be possible, but I was looking to see if I could change the color of a button based on the status of a device. I mainly want to use this for on/off status of a light etc. I just don't even know where to start with the code. Could someone help out and give me a push in the right direction.

Here is the code Iam using now to turn on a light:

<span onclick="doCommand('MLHSPlugin|HS_Execx10:q29~off');" class="basebutton" style="z-index:2;position:absolute;top:115px;left:45px;">&nbsp;&nbsp;Off&nbsp;&nbsp;</span>

Thank you.

User avatar
CinemarDave
Site Admin
Site Admin
Posts: 10535
Joined: Fri Feb 07, 2003 8:56 am
Location: Planet Earth
Contact:

Re: Change Color of Button

Postby CinemarDave » Fri Apr 15, 2011 10:10 am

Here's one way to do it. First add an ID and hidden variable that tracks the state of the light

Code: Select all

<span id="__monitor1" onclick="doCommand('MLHSPlugin|HS_Execx10:q29~off');" class="basebutton" style="z-index:2;position:absolute;top:115px;left:45px;">&nbsp;&nbsp;Off&nbsp;&nbsp;</span>
<span id="ml__THEVARIABLETOMONITOR" style="visibility:hidden">{{THEVARIABLETOMONITOR}}</span>


The at the bottom of the document add a line of javascript to the existing code like

Code: Select all

<script type="text/javascript" language="javascript">
   autoupdate = true;
   pagevars = getvars();
   StartupMacro();
   UpdateVariables();
   var tl = setTimeout("FlipText('1')", 5000);
   var t2 = setTimeout("Refresh()", 500);      // THIS IS THE NEW LINE
</script>


Finally in the <head> section where all the Javascript lives add a new routine

Code: Select all

function Refresh(){
      switch ($("ml__THEVARIABLETOMONITOR").innerHTML) {
         case "Off":
            $("__monitor1").class='basebutton';
            break;
         case "On":
            $("__monitor1").class='basebuttonAlt';
            break;
         default:
            $("__monitor1").class='basebutton';
            break;
      }
      setTimeout("Refresh()", 500);
   }


This will run the Refresh script every 500 milliseconds. it checks the state of the monitored server variable and changes the class depending on its state. You need to define two classes. In this example basebutton and basebuttonAlt. The Alt version would have the color change in it.


Return to “MainLobby on iPhone, iPod Touch”

Who is online

Users browsing this forum: No registered users and 1 guest