Page 1 of 5 123 ... LastLast
Results 1 to 10 of 48

Thread: iPhone Web Remote

  1. #1
    Join Date
    Oct 2007
    Location
    Buckinghamshire, UK
    Posts
    33

    Default iPhone/iPad Web Remote

    I have decided to build a wi-fi browser based remote on an iPhone/iPad. I want to use your Girder WebServer. I have used the example html files in the httpd folder as a starting point but have run into a problem. Let me be honest - I am a complete novice in web design! My home page will contain a number of activity based buttons. Each of these will send an event to the Girder server to initiate some IR or app commands. The button will also load a new page which will have the buttons and controls for the activity. I am using OnClick to initiate a function, NewPage. The problem is that I can't make the function send the event and open the new page. Each of the lines in the function will work on its own but not both together. Can anyone see what I am doing wrong?

    <HTML>
    <HEAD>
    <TITLE>Activities</TITLE>
    <LINK href="styles.css" rel="stylesheet" type="text/css">
    <SCRIPT src="jquery.min.js" type="text/javascript"></SCRIPT>
    <script type="application/x-javascript">
    addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);


    </script>
    <script language="javascript" type="text/javascript">
    function NewPage(Event, Device, Add_url)
    {
    $.get("ajax_sendevent.lhtml?event="+escape(Event)+ "&device="+escape(Device));
    window.location.href=(Add_url);
    }
    </script>

    </HEAD>
    <BODY>
    <input type="image" src="img/TV.png" width="100" height="30" onClick="NewPage('TV', '4000', 'Transport.html');"/>
    </BODY>
    </HTML>>

    Nick.
    Last edited by NickF; November 7th, 2011 at 09:29 AM.

  2. #2
    Join Date
    Jan 1998
    Location
    Jupiter, FL
    Posts
    13,553

    Default

    Welcome to the Girder forums. Try this one, it's completely untested
    Code:
    <HTML>
    <HEAD>
      <TITLE>Activities</TITLE>
      <LINK href="styles.css" rel="stylesheet" type="text/css">
      <SCRIPT src="jquery.min.js" type="text/javascript"></SCRIPT>
    <script type="application/x-javascript">
    addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
    
    
    </script>
    <script language="javascript" type="text/javascript">
    function NewPage(Event, Device, Add_url)
    {
    $.get("ajax_sendevent.lhtml?event="+escape(Event)+  "&device="+escape(Device));
    window.location.href=(Add_url);
    //  window.location =(Add_url); // this maybe?
    return false;
    }
    </script>
    
    </HEAD>
    <BODY>
    <input type="image" src="img/TV.png" width="100" height="30" onClick="return NewPage('TV', '4000', 'Transport.html');"/>
    </BODY>
    </HTML>
    Ron
    No support through PM

  3. #3
    Join Date
    Oct 2007
    Location
    Buckinghamshire, UK
    Posts
    33

    Default

    Thanks for the prompt reply, Ron. Unfortunately, this gives the same result. The new page loads but no event is sent to the server.

    Nick.

  4. #4
    Join Date
    Jan 1998
    Location
    Jupiter, FL
    Posts
    13,553

    Default

    ah i see. I thought it was the other way around. Okay what you need to do is load the next page on the success callback of the $.get
    Ron
    No support through PM

  5. #5
    Join Date
    Oct 2007
    Location
    Buckinghamshire, UK
    Posts
    33

    Default

    OK. I understand the logic but I don't know how to do that.
    What statement do I need to pick up the success of the $.get?

    Your help is very much appreciated.

    Nick.

  6. #6
    Join Date
    Jan 1998
    Location
    Jupiter, FL
    Posts
    13,553

    Default

    here you go:

    Code:
    <HTML>
    <HEAD>
      <TITLE>Activities</TITLE>
      <LINK href="styles.css" rel="stylesheet" type="text/css">
      <SCRIPT src="jquery.min.js" type="text/javascript"></SCRIPT>
    <script language="javascript" type="text/javascript">
    
    
        function newPage(Event, Device, Add_url)
        {
            $.get("ajax_sendevent.lhtml?event="+escape(Event)+  "&device="+escape(Device), function () {
                // once the ajax request completes change the page.
                window.location.href=(Add_url);
            });
            // return false to prevent default action from
            // happening on this event.
            return false;
        }
    
        $(document).ready( function () {
        
            // hideURLBar gives an error in FireFox so I have 
            // uncommented it below. But if it works for you keep it!
            
            // setTimeout(hideURLbar, 0);
           
           
            // instead of doing the onClick parameter below we
            // hook the click event from javascript, keep it all
            // nice and tidy.
            $("#myInput").click ( function () {
                newPage('TV', '4000', 'Transport.html');
                return false;
            });
            
        });
        
    </script>
    </HEAD>
    <BODY>
    <input id="myInput" type="image" src="img/TV.png" width="100" height="30"/>
    </BODY>
    </HTML>
    Ron
    No support through PM

  7. #7
    Join Date
    Oct 2007
    Location
    Buckinghamshire, UK
    Posts
    33

    Default

    Excellent!! It works.

    Many thanks.

    Nick.

  8. #8
    Join Date
    Oct 2005
    Posts
    307

    Default

    Click has a 300ms delay built in for iOS, so if you are only going to use iPhone and iPad and have a layout that fits each device: I would use touchstart. If you want to use other browsers, you can use something like:

    var whichEvent = ["click"];
    if (navigator.platform == "iPad" || navigator.platform == "iPhone") {
    whichEvent = ["touchstart"];
    }
    and then:

    $("#myInput").bind(whichEvent[0],function(e){
    newPage('TV', '4000', 'Transport.html');
    return false;
    });

    Unless you are getting REALLY complicated, there is no need to have different pages for each device, instead you can just have the controls for each device with <div> tags and show/hide them as needed.

  9. #9
    Join Date
    Oct 2007
    Location
    Buckinghamshire, UK
    Posts
    33

    Default

    Shaun, thanks for the suggestion but I can't perceive any difference with or without this change. I implemented it on one button and the original on another and there is no difference in timing. Are you sure about the 300ms on Click?

    Nick.

  10. #10
    Join Date
    Oct 2005
    Posts
    307

    Default

    Yes, mousedown,mouseup, and click all fire ~300ms after you lift your finger. If you are still loading a different page to send your event, I doubt there would be any way to tell. My biggest improvement was the feedback beep I use to indicate a button was pressed.

Page 1 of 5 123 ... LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •