Changeset 336


Ignore:
Timestamp:
Jul 23, 2011, 10:56:17 AM (13 years ago)
Author:
Rick van der Zwet
Message:

New version of UI stuff.

Location:
py-tcpmultiplexer
Files:
2 added
4 edited

Legend:

Unmodified
Added
Removed

  • py-tcpmultiplexer

    • Property svn:ignore set to
      py-tcpmultiplexer.log

  • py-tcpmultiplexer/htdocs/browser.html

    r333 r336  
    2626   $("#player").attr("alt","Video Feed: " + mjeg_uri);
    2727}
     28
     29$(document).ready(function(){
     30   if ( $.browser.msie ) {
     31     $("#messagebox").html('Live webcam does not support MSIE, please use alternative browser, <a href="http://www.browserchoice.eu">http://www.browserchoice.eu</a>');
     32   }
     33});
    2834</script>
    2935
    3036</head>
    3137<body>
    32 <h1>py-tcpmultiplexer webcam server</h1>
    33 
     38<div id="messagebox" style="background-color: red"></div>
    3439<div>
    35 <table>
    36 <tr><td>Select WebCam:</td><td>
    37 <input type="radio" name="cam" value="img/logo.png" checked="checked">None</input>
    38 <input type="radio" name="cam" value="/cam1/video">RepRap</input>
    39 <input type="radio" name="cam" value="/cam2/video">RoomA</input>
    40 <input type="radio" name="cam" value="/cam3/video">Kitchen</input>
    41 <input type="radio" name="cam" value="/cam4/video">OccTelex</input>
    42 <input type="radio" name="cam" value="/cam5/video">RickCam</input>
    43 <input type="radio" name="cam" value="/cam6/video">EdCam</input>
    44 <input type="radio" name="cam" value="/cam7/video">MobileCam</input>
    45 </td></tr>
    46 <tr><td>Select Audio:</td><td>
    47 <input type="radio" name="sound" value="none" checked="checked" >None</input>
    48 <input type="radio" name="sound" value="/cam1/audio">RepRap</input>
    49 <input type="radio" name="sound" value="/cam7/audio">MobileCam</input>
    50 </td></tr>
    51 </table>
     40<label for="cam">Webcam:</label>
     41<select name="cam">
     42  <option value="img/logo.png" checked="checked">None</option>
     43  <option value="/cam1/video">RepRap</option>
     44  <option value="/cam2/video">RoomA</option>
     45  <option value="/cam3/video">Kitchen</option>
     46  <option value="/cam4/video">RepRap</option>
     47  <option value="/cam5/video">RickCam</option>
     48  <option value="/cam6/video">EdCam</option>
     49  <option value="/cam7/video">MobileCam</option>
     50</select>
     51<label for="sound">Audio:</label>
     52<select name="sound">
     53  <option value="none" checked="checked" >None</option>
     54  <option value="/cam1/audio">RepRap</option>
     55  <option value="/cam7/audio">MobileCam</option>
     56</select>
    5257
    5358<script type="text/javascript">
    54   $("input[name='cam']").change(function () {
    55       changeVideo($("input[name='cam']:checked").val());
     59  $("select[name='cam']").change(function () {
     60      changeVideo($("select[name='cam']").val());
    5661  });
    57   $("input[name='sound']").change(function () {
    58       changeAudio($("input[name='sound']:checked").val());
     62  $("select[name='sound']").change(function () {
     63      changeAudio($("select[name='sound']").val());
    5964  });
    6065</script>

  • py-tcpmultiplexer/htdocs/room1.html

    r332 r336  
    2929  function flipImages()
    3030  {
    31      player_uri = $("#player").attr("src");
    32      screen_uri = $("#screen").attr("src");
    33      $("#player").attr("src", screen_uri);
    34      $("#screen").attr("src", player_uri);
     31     player_uri = $("#mainCam").attr("src");
     32     screen_uri = $("#smallCam").attr("src");
     33     $("#mainCam").attr("src", screen_uri);
     34     $("#smallCam").attr("src", player_uri);
    3535 
    3636  }
    … …  
    4040  {
    4141    if (runningPresentation) {
    42       $("#player").attr("src", '/img/logo.png');
    43       $("#screen").attr("src", '/img/logo.png');
     42      $("#mainCam").attr("src", '/img/logo.png');
     43      $("#smallCam").attr("src", '/img/logo.png');
    4444      changeAudio('');
    4545      runningPresentation = false;
    4646      $("#togglePresentation").attr('value',"Start Presentation");
    4747    } else {
    48       $("#player").attr("src", '/cam6/video');
    49       $("#screen").attr("src", '/cam7/video');
     48      $("#mainCam").attr("src", '/cam6/video');
     49      $("#smallCam").attr("src", '/cam7/video');
    5050      changeAudio('/cam7/audio');
    5151      runningPresentation = true;
    … …  
    5454  }
    5555
     56  $(document).ready(function(){
     57     if ( $.browser.msie ) {
     58       $("#messagebox").html('Live webcam does not support MSIE, please use alternative browser, <a href="http://www.browserchoice.eu">http://www.browserchoice.eu</a>');
     59     }
     60  });
     61
    5662</script>
    5763
     64<style type="text/css">
     65#mainCam {
     66 position: relative;
     67 height: 95%;
     68}
     69
     70#smallCam {
     71 position: absolute;
     72 right: 0;
     73 top: 0;
     74 width: 25%;
     75 border: 1px solid;
     76 background-color: lightgrey;
     77}
     78</style>
    5879</head>
    5980<body>
    60 <table border="2" width="100%" height="100%">
    61 <tr>
    62   <td height="200px" width="450px" style="background: url(http://wifisoft.org/svn/logo/WifiSoft_logo.jpg);">
    63     <img id="player" width="200px" src="/img/logo.png"  alt="Video feeds" border="1"/><br />
     81<div id="messagebox" style="background-color: red"></div>
     82<div>
    6483    <input type="button" id="togglePresentation" OnClick="changePresentation()" value="Start Presentation" />
    6584    <input type="button" id="toggleCamera" OnClick="flipImages()" value="Switch Camera's" />
    66   </td>
    67   <td rowspan="2" style="background: url(http://wifisoft.org/svn/logo/WifiSoft_logo.jpg) no-repeat;">
    68     <img id="screen" height="100%" src="/img/logo.png" alt="Presentation" border="1"/>
    69   </td>
    70 </tr>
    71 <tr>
    72   <td>
    73   <iframe src="http://webchat.freenode.net?&channels=occ&uio=d4" width="100%" height="100%"></iframe>
    74   </td>
    75 </tr>
    76 <tr>
    77   <td colspan="2">
    78 <p>Tested browsers: <a href="http://www.firefox.com">Mozilla Firefox</a>, <a href="http://www.google.com/chrome">Google Chrome</a> (<em>If no video appear below, you are using unsupported browser</em>)<br />
    79 <small>Source Code at: <a href="http://rickvanderzwet.nl/svn/personal/py-tcpmultiplexer/">http://rickvanderzwet.nl/svn/personal/py-tcpmultiplexer/</a> build @ <a href="http://opencommunitycamp.org">#occ2011</a> - feedback/comments at <a href="irc://irc.freenode.net/#occ">#occ</a></small>
    80   </td>
    81 </tr>
    82 </table>
     85</div>
     86<img id="mainCam" src='/img/logo.png' />
     87<img id="smallCam" src='/img/logo.png' />
     88</div>
    8389
    84 <div id="jplayer" />
     90    <div id="jplayer"></div>
    8591</body>
    8692</html>

  • py-tcpmultiplexer/streams.yaml

    r328 r336  
    55'/cam3/video' : 'http://172.16.2.200/stream.jpg'
    66'/cam4/video' : 'http://172.16.2.199/mjpeg'
    7 '/cam6/video' : 'http://edje.occ2011.org:9000/webcam'
    8 '/cam5/video' : 'http://rvdzwet-MacBookPro.occ2011.org:9000/webcam'
     7'/cam7/video' : 'http://172.16.0.47:8080/videofeed'
     8'/cam7/audio' : 'http://172.16.0.47:8080/audio.wav'
Note: See TracChangeset for help on using the changeset viewer.