Adding a switch breaks scrolling

Forum for discussing building user interfaces for controlling MLServer using the iPhone or iPod Touch.
User avatar
maik
Senior Member
Senior Member
Posts: 208
Joined: Sat Mar 10, 2007 12:46 pm
Location: North Bay, Ontario, Canada
Contact:

Adding a switch breaks scrolling

Postby maik » Sat Oct 01, 2011 7:12 pm

Adding a switch to the Lighting-Room1.html breaks the scrolling and slider updating on the IPhone. I can remove a switch and slider and everything scrolls and updates fine but adding just one extra switch breaks it. Why???

Maik

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

Re: Adding a switch breaks scrolling

Postby CinemarDave » Sun Oct 02, 2011 10:40 am

Impossible to say without seeing what was done. There is a region defined in the JavaScript that manages all the scrolling. I suspect that adding the additional switch violates the defined region. There are two critical <DIV>s in the code.

Code: Select all

<div id="wrapper">
   <div id="scroller">


Make sure you are putting the new switch inside the "scroller" div.

User avatar
maik
Senior Member
Senior Member
Posts: 208
Joined: Sat Mar 10, 2007 12:46 pm
Location: North Bay, Ontario, Canada
Contact:

Re: Adding a switch breaks scrolling

Postby maik » Sun Oct 02, 2011 1:38 pm

Great info, I got that okay but if it scrolls it doesn't update the sliders. Why? If it updates the sliders it doesn't scroll. ?? The Lighting-Room1.html page works great with 5 switches, I just don't get it?

Maik

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

Re: Adding a switch breaks scrolling

Postby CinemarDave » Sun Oct 02, 2011 2:50 pm

Did you add another slider? If so you will have to modify the javascript array that contains the slider geometry and then make sure that the 6th slider is given a unique name. You just cannot copy and paste because of the requirement of needing unique IDs.

User avatar
maik
Senior Member
Senior Member
Posts: 208
Joined: Sat Mar 10, 2007 12:46 pm
Location: North Bay, Ontario, Canada
Contact:

Re: Adding a switch breaks scrolling

Postby maik » Sun Oct 02, 2011 6:05 pm

This is now working with 7 UPB switches.
Lighting-Room1.html

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<link href="images/MainLobby.png" rel="apple-touch-icon" />
<meta content="minimum-scale=1.0, width=device-width, maximum-scale=0.6667, user-scalable=no" name="viewport" />
<link href="css/styles.css" rel="stylesheet" media="screen" type="text/css" />
<script src="javascript/functions.js" type="text/javascript"></script>
<script src="javascript/iPhone.js" type="text/javascript"></script>
<script src="javascript/iscroll.js?v3.6" type="text/javascript"></script>
<title>Lighting</title>
<script>
   var Sliders = [   {min:0,max:100,curX:0,minX:0,maxX:240,value:0,handel:"slider1handle"},
               {min:0,max:100,curX:0,minX:0,maxX:240,value:0,handel:"slider2handle"},
               {min:0,max:100,curX:0,minX:0,maxX:240,value:0,handel:"slider3handle"},
               {min:0,max:100,curX:0,minX:0,maxX:240,value:0,handel:"slider4handle"},
               {min:0,max:100,curX:0,minX:0,maxX:240,value:0,handel:"slider5handle"},
               {min:0,max:100,curX:0,minX:0,maxX:240,value:0,handel:"slider6handle"},
               {min:0,max:100,curX:0,minX:0,maxX:240,value:0,handel:"slider7handle"}];
   var myScroll;
   var a = 0;

   document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

   function UpdateSlider(sNum, sVal) {
      Sliders[sNum-1].curX = sVal * (Sliders[sNum-1].maxX / Sliders[sNum-1].max);
      $(Sliders[sNum-1].handel).style.webkitTransform = 'translate3d(' + Sliders[sNum-1].curX + 'px,0,0)';
   }

    function StartupMacro() {
        $('slider1handle').addEventListener('touchmove', function(event) {
            event.preventDefault();
            var el = event.target;
            var touch = event.touches[0];
            Sliders[0].curX = touch.pageX - this.offsetLeft - 19;
            if (Sliders[0].curX < Sliders[0].minX) {
                Sliders[0].curX = Sliders[0].minX;
            };
            if (Sliders[0].curX >= Sliders[0].maxX) {
                Sliders[0].curX = Sliders[0].maxX;
            }
            el.style.webkitTransform = 'translate3d(' + Sliders[0].curX + 'px,0,0)';
        }, false);

        $('slider1handle').addEventListener('touchend', function(event) {
            var sVal = Math.floor(Sliders[0].curX / Sliders[0].maxX * 100);
            $('ml__mllighting_7_value').innerHTML = sVal;
            doCommand("MLLighting|On~7~" + sVal);
        }, false);

        $('slider2handle').addEventListener('touchmove', function(event) {
            event.preventDefault();
            var el = event.target;
            var touch = event.touches[0];
            Sliders[0].curX = touch.pageX - this.offsetLeft - 19;
            if (Sliders[0].curX < Sliders[0].minX) {
                Sliders[0].curX = Sliders[0].minX;
            };
            if (Sliders[0].curX >= Sliders[0].maxX) {
                Sliders[0].curX = Sliders[0].maxX;
            }
            el.style.webkitTransform = 'translate3d(' + Sliders[0].curX + 'px,0,0)';
        }, false);

        $('slider2handle').addEventListener('touchend', function(event) {
            var sVal = Math.floor(Sliders[0].curX / Sliders[0].maxX * 100);
            $('ml__mllighting_009_value').innerHTML = sVal;
            doCommand("MLLighting|On~9~" + sVal);
        }, false);

        $('slider3handle').addEventListener('touchmove', function (event) {
            event.preventDefault();
            var el = event.target;
            var touch = event.touches[0];
            Sliders[0].curX = touch.pageX - this.offsetLeft - 19;
            if (Sliders[0].curX < Sliders[0].minX) {
                Sliders[0].curX = Sliders[0].minX;
            };
            if (Sliders[0].curX >= Sliders[0].maxX) {
                Sliders[0].curX = Sliders[0].maxX;
            }
            el.style.webkitTransform = 'translate3d(' + Sliders[0].curX + 'px,0,0)';
        }, false);

        $('slider3handle').addEventListener('touchend', function (event) {
            var sVal = Math.floor(Sliders[0].curX / Sliders[0].maxX * 100);
            $('ml__mllighting_008_value').innerHTML = sVal;
            doCommand("MLLighting|On~8~" + sVal);
        }, false);

        $('slider4handle').addEventListener('touchmove', function (event) {
            event.preventDefault();
            var el = event.target;
            var touch = event.touches[0];
            Sliders[0].curX = touch.pageX - this.offsetLeft - 19;
            if (Sliders[0].curX < Sliders[0].minX) {
                Sliders[0].curX = Sliders[0].minX;
            };
            if (Sliders[0].curX >= Sliders[0].maxX) {
                Sliders[0].curX = Sliders[0].maxX;
            }
            el.style.webkitTransform = 'translate3d(' + Sliders[0].curX + 'px,0,0)';
        }, false);

        $('slider4handle').addEventListener('touchend', function (event) {
            var sVal = Math.floor(Sliders[0].curX / Sliders[0].maxX * 100);
            $('ml__mllighting_006_value').innerHTML = sVal;
            doCommand("MLLighting|On~6~" + sVal);
        }, false);

        $('slider5handle').addEventListener('touchmove', function (event) {
            event.preventDefault();
            var el = event.target;
            var touch = event.touches[0];
            Sliders[0].curX = touch.pageX - this.offsetLeft - 19;
            if (Sliders[0].curX < Sliders[0].minX) {
                Sliders[0].curX = Sliders[0].minX;
            };
            if (Sliders[0].curX >= Sliders[0].maxX) {
                Sliders[0].curX = Sliders[0].maxX;
            }
            el.style.webkitTransform = 'translate3d(' + Sliders[0].curX + 'px,0,0)';
        }, false);

        $('slider5handle').addEventListener('touchend', function (event) {
            var sVal = Math.floor(Sliders[0].curX / Sliders[0].maxX * 100);
            $('ml__mllighting_005_value').innerHTML = sVal;
            doCommand("MLLighting|On~5~" + sVal);
        }, false);

        $('slider6handle').addEventListener('touchmove', function (event) {
            event.preventDefault();
            var el = event.target;
            var touch = event.touches[0];
            Sliders[0].curX = touch.pageX - this.offsetLeft - 19;
            if (Sliders[0].curX < Sliders[0].minX) {
                Sliders[0].curX = Sliders[0].minX;
            };
            if (Sliders[0].curX >= Sliders[0].maxX) {
                Sliders[0].curX = Sliders[0].maxX;
            }
            el.style.webkitTransform = 'translate3d(' + Sliders[0].curX + 'px,0,0)';
        }, false);

        $('slider6handle').addEventListener('touchend', function (event) {
            var sVal = Math.floor(Sliders[0].curX / Sliders[0].maxX * 100);
            $('ml__mllighting_004_value').innerHTML = sVal;
            doCommand("MLLighting|On~4~" + sVal);
        }, false);

        $('slider7handle').addEventListener('touchmove', function (event) {
            event.preventDefault();
            var el = event.target;
            var touch = event.touches[0];
            Sliders[0].curX = touch.pageX - this.offsetLeft - 19;
            if (Sliders[0].curX < Sliders[0].minX) {
                Sliders[0].curX = Sliders[0].minX;
            };
            if (Sliders[0].curX >= Sliders[0].maxX) {
                Sliders[0].curX = Sliders[0].maxX;
            }
            el.style.webkitTransform = 'translate3d(' + Sliders[0].curX + 'px,0,0)';
        }, false);

        $('slider7handle').addEventListener('touchend', function (event) {
            var sVal = Math.floor(Sliders[0].curX / Sliders[0].maxX * 100);
            $('ml__mllighting_003_value').innerHTML = sVal;
            doCommand("MLLighting|On~3~" + sVal);
        }, false);

          myScroll = new iScroll('wrapper', {desktopCompatibility:true, checkDOMChanges: true});
   }

   function loaded() {
      myscroll = new iScroll('wrapper', { useTransform: false, checkDOMChanges: true});
   }

   document.addEventListener('DOMContentLoaded', loaded, false);

</script>
</head>
<body>
<div id="topbar" class="black">
   <div id="title">{{Lighting_ActiveRoomName}}</div>
   <div id="blueleftbutton"><a href="Lighting.html">Rooms</a></div>
</div>

<div id="wrapper">
   <div id="scroller">
      <span style="z-index:3;position:absolute;top:0px;left:20px;width:285px;height:34px;text-align:center;font:normal 22px/34px Helvetica;color:rgba(255, 255, 255, 1.0);padding:0px;border:0px;margin:0px;overflow:hidden;text-overflow:clip;">{{mllighting_007_alias}}</span>
      <div class="sliderbase" style="z-index:2;position:absolute;top:30px;left:15px;">
         <img id="slider1" src="images/Slider1.png" style="z-index:3;position:inherit;top:16px;left:58px;-webkit-transform:scale(1.45);" />
         <img id="slider1handle" src="images/SliderHandle1.png" style="z-index:4;position:inherit;top:16px;left:7px;-webkit-transition: -webkit-transform 0.25s ease" />
         <span id="ml__mllighting_007_value" _MLSlider="1" _MLSliderIndex="1" style="visibility:hidden;">{{mllighting_007_value}}</span>>
      </div>
      <span onclick="doCommand('MLLighting|On~7~0');" class="basebutton" style="z-index:2;position:absolute;top:115px;left:45px;">&nbsp;&nbsp;Off&nbsp;&nbsp;</span>
      <span onclick="doCommand('MLLighting|On~7~100');" class="basebutton" style="z-index:2;position:absolute;top:115px;left:220px;">&nbsp;&nbsp;On&nbsp;&nbsp;</span>

      <span style="z-index:3;position:absolute;top:160px;left:20px;width:285px;height:34px;text-align:center;font:normal 22px/34px Helvetica;color:rgba(255, 255, 255, 1.0);padding:0px;border:0px;margin:0px;overflow:hidden;text-overflow:clip;">{{mllighting_009_alias}}</span>
      <div class="sliderbase" style="z-index:2;position:absolute;top:190px;left:15px;">
         <img id="slider2" src="images/Slider1.png" style="z-index:3;position:inherit;top:16px;left:58px;-webkit-transform:scale(1.45);" />
         <img id="slider2handle" src="images/SliderHandle1.png" style="z-index:4;position:inherit;top:16px;left:7px;-webkit-transition: -webkit-transform 0.25s ease" />
         <span id="ml__mllighting_009_value" _MLSlider="1" _MLSliderIndex="2" style="visibility:hidden;">{{mllighting_9_level}}</span>
      </div>
      <span onclick="doCommand('MLLighting|On~9~0');" class="basebutton" style="z-index:2;position:absolute;top:275px;left:45px;">&nbsp;&nbsp;Off&nbsp;&nbsp;</span>
      <span onclick="doCommand('MLLighting|On~9~100');" class="basebutton" style="z-index:2;position:absolute;top:275px;left:220px;">&nbsp;&nbsp;On&nbsp;&nbsp;</span>

      <span style="z-index:3;position:absolute;top:320px;left:20px;width:285px;height:34px;text-align:center;font:normal 22px/34px Helvetica;color:rgba(255, 255, 255, 1.0);padding:0px;border:0px;margin:0px;overflow:hidden;text-overflow:clip;">{{mllighting_008_alias}}</span>
      <div class="sliderbase" style="z-index:2;position:absolute;top:350px;left:15px;">
         <img id="slider3" src="images/Slider1.png" style="z-index:3;position:inherit;top:16px;left:58px;-webkit-transform:scale(1.45);" />
         <img id="slider3handle" src="images/SliderHandle1.png" style="z-index:4;position:inherit;top:16px;left:7px;-webkit-transition: -webkit-transform 0.25s ease" />
         <span id="ml__mllighting_008_value" _MLSlider="1" _MLSliderIndex="3" style="visibility:hidden;">{{mllighting_8_level}}</span>
      </div>
      <span onclick="doCommand('MLLighting|On~8~0');" class="basebutton" style="z-index:2;position:absolute;top:435px;left:45px;">&nbsp;&nbsp;Off&nbsp;&nbsp;</span>
      <span onclick="doCommand('MLLighting|On~8~100');" class="basebutton" style="z-index:2;position:absolute;top:435px;left:220px;">&nbsp;&nbsp;On&nbsp;&nbsp;</span>

      <span style="z-index:3;position:absolute;top:480px;left:20px;width:285px;height:34px;text-align:center;font:normal 22px/34px Helvetica;color:rgba(255, 255, 255, 1.0);padding:0px;border:0px;margin:0px;overflow:hidden;text-overflow:clip;">{{mllighting_006_alias}}</span>
      <div class="sliderbase" style="z-index:2;position:absolute;top:510px;left:15px;">
         <img id="slider4" src="images/Slider1.png" style="z-index:3;position:inherit;top:16px;left:58px;-webkit-transform:scale(1.45);" />
         <img id="slider4handle" src="images/SliderHandle1.png" style="z-index:4;position:inherit;top:16px;left:7px;-webkit-transition: -webkit-transform 0.25s ease" />
         <span id="ml__mllighting_006_value" _MLSlider="1" _MLSliderIndex="4" style="visibility:hidden;">{{mllighting_6_level}}</span>
      </div>
      <span onclick="doCommand('MLLighting|On~6~0');" class="basebutton" style="z-index:2;position:absolute;top:595px;left:45px;">&nbsp;&nbsp;Off&nbsp;&nbsp;</span>
      <span onclick="doCommand('MLLighting|On~6~100');" class="basebutton" style="z-index:2;position:absolute;top:595px;left:220px;">&nbsp;&nbsp;On&nbsp;&nbsp;</span>

      <span style="z-index:3;position:absolute;top:640px;left:20px;width:285px;height:34px;text-align:center;font:normal 22px/34px Helvetica;color:rgba(255, 255, 255, 1.0);padding:0px;border:0px;margin:0px;overflow:hidden;text-overflow:clip;">{{mllighting_005_alias}}</span>
      <div class="sliderbase" style="z-index:2;position:absolute;top:670px;left:15px;">
         <img id="slider5" src="images/Slider1.png" style="z-index:3;position:inherit;top:16px;left:58px;-webkit-transform:scale(1.45);" />
         <img id="slider5handle" src="images/SliderHandle1.png" style="z-index:4;position:inherit;top:16px;left:7px;-webkit-transition: -webkit-transform 0.25s ease" />
         <span id="ml__mllighting_005_value" _MLSlider="1" _MLSliderIndex="5" style="visibility:hidden;">{{mllighting_5_level}}</span>
      </div>
      <span onclick="doCommand('MLLighting|On~5~0');" class="basebutton" style="z-index:2;position:absolute;top:755px;left:45px;">&nbsp;&nbsp;Off&nbsp;&nbsp;</span>
      <span onclick="doCommand('MLLighting|On~5~100');" class="basebutton" style="z-index:2;position:absolute;top:755px;left:220px;">&nbsp;&nbsp;On&nbsp;&nbsp;</span>

      <span style="z-index:3;position:absolute;top:800px;left:20px;width:285px;height:34px;text-align:center;font:normal 22px/34px Helvetica;color:rgba(255, 255, 255, 1.0);padding:0px;border:0px;margin:0px;overflow:hidden;text-overflow:clip;">{{mllighting_004_alias}}</span>
      <div class="sliderbase" style="z-index:2;position:absolute;top:830px;left:15px;">
         <img id="slider6" src="images/Slider1.png" style="z-index:3;position:inherit;top:16px;left:58px;-webkit-transform:scale(1.45);" />
         <img id="slider6handle" src="images/SliderHandle1.png" style="z-index:4;position:inherit;top:16px;left:7px;-webkit-transition: -webkit-transform 0.25s ease" />
         <span id="ml__mllighting_004_value" _MLSlider="1" _MLSliderIndex="6" style="visibility:hidden;">{{mllighting_4_level}}</span>
      </div>
      <span onclick="doCommand('MLLighting|On~4~0');" class="basebutton" style="z-index:2;position:absolute;top:915px;left:45px;">&nbsp;&nbsp;Off&nbsp;&nbsp;</span>
      <span onclick="doCommand('MLLighting|On~4~100');" class="basebutton" style="z-index:2;position:absolute;top:915px;left:220px;">&nbsp;&nbsp;On&nbsp;&nbsp;</span>

      <span style="z-index:3;position:absolute;top:960px;left:20px;width:285px;height:34px;text-align:center;font:normal 22px/34px Helvetica;color:rgba(255, 255, 255, 1.0);padding:0px;border:0px;margin:0px;overflow:hidden;text-overflow:clip;">{{mllighting_003_alias}}</span>
      <div class="sliderbase" style="z-index:2;position:absolute;top:990px;left:15px;">
         <img id="slider7" src="images/Slider1.png" style="z-index:3;position:inherit;top:16px;left:58px;-webkit-transform:scale(1.45);" />
         <img id="slider7handle" src="images/SliderHandle1.png" style="z-index:4;position:inherit;top:16px;left:7px;-webkit-transition: -webkit-transform 0.25s ease" />
         <span id="ml__mllighting_003_value" _MLSlider="1" _MLSliderIndex="7" style="visibility:hidden;">{{mllighting_3_level}}</span>
      </div>
      <span onclick="doCommand('MLLighting|On~3~0');" class="basebutton" style="z-index:2;position:absolute;top:1075px;left:45px;">&nbsp;&nbsp;Off&nbsp;&nbsp;</span>
      <span onclick="doCommand('MLLighting|On~3~100');" class="basebutton" style="z-index:2;position:absolute;top:1075px;left:220px;">&nbsp;&nbsp;On&nbsp;&nbsp;</span>

      <span onclick="doCommand('Macro|SetVariableFast|mllighting_1_level~0!MLLighting|On~7~0!SetVariableFast|mllighting_3_level~0!SetVariableFast|mllighting_4_level~0!SetVariableFast|mllighting_5_level~0');" class="basebutton" style="z-index:2;position:absolute;top:1135px;left:45px;">&nbsp;&nbsp;All Off&nbsp;&nbsp;</span>
      <span onclick="doCommand('Macro|SetVariableFast|mllighting_1_level~100!MLLighting|On~7~100!SetVariableFast|mllighting_3_level~100!SetVariableFast|mllighting_4_level~100!SetVariableFast|mllighting_5_level~100');" class="basebutton" style="z-index:2;position:absolute;top:1135px;left:190px;">&nbsp;&nbsp;All On&nbsp;&nbsp;</span>

      <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
      <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
      <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
      <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
        <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
   </div>
</div>

<script language="javascript">
   autoupdate = true;
   pagevars = getvars();
   StartupMacro();
   UpdateVariables();
</script>
</body>
</html>


LOVE IT! :D
Thanks for all the help!!!
Maik


Return to “iPhone / iPod Touch Beta”

Who is online

Users browsing this forum: No registered users and 1 guest