First version of collaborative realtime linking.

slicedrop · Mar 4, 2013 · d348ff0 · d348ff0
1 parent dda8d7c
commit d348ff0
Show file tree

Hide file tree

Showing 8 changed files with 129 additions and 42 deletions.
diff --git a/css/viewer.css b/css/viewer.css
@@ -46,6 +46,18 @@
   float:right;
 }
 
+#linkselectedlogo {
+  opacity: 0.7;
+  float:left;
+  margin-right: 10px;
+}
+
+#linklogo {
+  opacity: 0.7;
+  float:left;
+  margin-right: 10px;
+}
+
 #share {
 	display: none;
 	position: absolute;

diff --git a/gfx/link.png b/gfx/link.png
diff --git a/gfx/link_selected.png b/gfx/link_selected.png
diff --git a/index.html b/index.html
@@ -72,7 +72,7 @@
 <script type='text/javascript' src='js/x.share.js'></script>
 <script type='text/javascript' src='js/x.realtime.js'></script>
 <script type='text/javascript' src='js/xtk.js'></script>
-<script src="http://js.pusher.com/1.12/pusher.js" type="text/javascript"></script>
+<script type='text/javascript' src='js/pusher.min.js'></script>
 
 <!-- Google Analytics -->
 <script type="text/javascript">
@@ -443,6 +443,8 @@ <h1>Drop files anywhere...</h1>
     </div>
 
     <div id='download'>
+      <img id='linklogo' src='gfx/link.png' title='Realtime Collaboration'/>
+      <img id='linkselectedlogo' style='display:none' src='gfx/link_selected.png' title='Stop Realtime Collaboration'/>
       <img id='downloadlogo' src='gfx/download.png' title='Download data'/>
     </div>
 

diff --git a/js/pusher.min.js b/js/pusher.min.js
diff --git a/js/x.realtime.js b/js/x.realtime.js
@@ -1,37 +1,62 @@
 var RT = RT || {};
 RT.linked = false;
+RT.channel = null;
+RT.pusher = null;
 
 RT.link = function() {
 
-  var channelname = 'abcdef';
+  if ( !RT.linked ) {
 
-  var pusher = new Pusher('7d039f97f26780edd35e');
-  Pusher.channel_auth_endpoint = 'http://x.babymri.org/auth.php';
+    var _location = (window.location != window.parent.location) ? document.referrer
+        : document.location;
+    var channelname = 'mydrop-' + _location.split('?')[1];
 
-  RT._channel = pusher.subscribe('private-' + channelname);
+    console.log('Linking via channel ' + channelname + '...');
 
-  RT._updater = 1;
-  RT._old_view = [1];
+    RT.pusher = new Pusher('7d039f97f26780edd35e');
+    Pusher.channel_auth_endpoint = 'http://x.babymri.org/auth.php';
 
-  // the events
-  RT._channel.bind('client-camera-sync', function(data) {
+    RT.channel = 'private-' + channelname;
+    RT._link = RT.pusher.subscribe(RT.channel);
 
-    eval(data.target).camera.view = new Float32Array(data.value);
+    RT._updater = 1;
+    RT._old_view = [ 1 ];
 
-  });
-  RT._channel.bind('client-volume-sync', function(data) {
+    // the events
+    RT._link.bind('client-camera-sync', function(data) {
 
-    volume[data.target] = data.value;
+      eval(data.target).camera.view = new Float32Array(data.value);
 
-  });
+    });
+    RT._link.bind('client-volume-sync', function(data) {
+
+      volume[data.target] = data.value;
+
+    });
+
+    // observe the cameras
+    RT.observeCamera('ren3d');
+    RT.observeCamera('sliceX');
+    RT.observeCamera('sliceY');
+    RT.observeCamera('sliceZ');
+
+    RT.linked = true;
 
-  // observe the cameras
-  RT.observeCamera('ren3d');
-  RT.observeCamera('sliceX');
-  RT.observeCamera('sliceY');
-  RT.observeCamera('sliceZ');
+    // switch to the blue icon
+    $('#linklogo').hide();
+    $('#linkselectedlogo').show();
 
-  RT.linked = true;
+  } else {
+
+    RT.pusher.unsubscribe(RT.channel);
+
+    RT.linked = false;
+
+    // switch to the gray icon
+    $('#linkselectedlogo').hide();
+    $('#linklogo').show();
+
+  }
 
 };
 
@@ -42,29 +67,27 @@ RT.observeCamera = function(renderer) {
   };
 
   eval(renderer).interactor.onMouseDown = function(e) {
-    RT._updater = setInterval(RT.pushCamera.bind(this,renderer), 150);
+    RT._updater = setInterval(RT.pushCamera.bind(this, renderer), 150);
   };
 
   eval(renderer).interactor.onMouseWheel = function(e) {
 
     clearTimeout(RT._updater);
-    RT._updater = setTimeout(RT.pushCamera.bind(this,renderer), 150);
+    RT._updater = setTimeout(RT.pushCamera.bind(this, renderer), 150);
 
   };
 
 };
 
 RT.pushCamera = function(renderer) {
 
-  console.log('push');
-
   var _current_view = Array.apply([], eval(renderer).camera.view);
 
-  if (!arraysEqual(_current_view, RT._old_view)) {
+  if ( !arraysEqual(_current_view, RT._old_view) ) {
 
-    RT._channel.trigger('client-camera-sync', {
-      'target': renderer,
-      'value': _current_view
+    RT._link.trigger('client-camera-sync', {
+      'target' : renderer,
+      'value' : _current_view
     });
 
     RT._old_view = _current_view;
@@ -75,22 +98,21 @@ RT.pushCamera = function(renderer) {
 
 RT.pushVolume = function(target, value) {
 
-  RT._channel.trigger('client-volume-sync', {
-    'target': target,
-    'value': value
+  RT._link.trigger('client-volume-sync', {
+    'target' : target,
+    'value' : value
   });
 
 };
 
-
 // compare two arrays
 function arraysEqual(arr1, arr2) {
 
-  if (arr1.length !== arr2.length) {
+  if ( arr1.length !== arr2.length ) {
     return false;
   }
   for ( var i = arr1.length; i--;) {
-    if (arr1[i] !== arr2[i]) {
+    if ( arr1[i] !== arr2[i] ) {
       return false;
     }
   }

diff --git a/js/x.scene.js b/js/x.scene.js
@@ -72,6 +72,9 @@ function loadScene(sceneUrl) {
     // artwork from http://www.iconlet.com/info/94982_download_258x258
     $('#download').show();
     $('#downloadlogo').click(downloadScene);
+    // and this artwork is part of the cool jigsoar icons (CC)
+    $('#linklogo').click(RT.link);
+    $('#linkselectedlogo').click(RT.link);
 
     configurator = function() {
 

diff --git a/js/x.share.js b/js/x.share.js
@@ -21,7 +21,7 @@ function share() {
 function authorize(client) {
 
   client.authDriver(new Dropbox.Drivers.Popup({
-    receiverUrl : "http://slicedrop.com/loginok.html",
+    receiverUrl : window.location.href + "/loginok.html",
     useQuery : true
   }));
 
@@ -152,9 +152,9 @@ function grabSlicedrop(client, foldername, _toUpload) {
   }).done(function(html) {
 
     // replace paths to point to slicedrop.com
-    html = html.replace(/'css/g, "'http://slicedrop.com/css");
-    html = html.replace(/'js/g, "'http://slicedrop.github.com/js");
-    html = html.replace(/'gfx/g, "'http://slicedrop.com/gfx");
+    html = html.replace(/'css/g, "'" + window.location.href + "/css");
+    html = html.replace(/'js/g, "'" + window.location.href + "/js");
+    html = html.replace(/'gfx/g, "'" + window.location.href + "/gfx");
 
     client.writeFile(foldername + '/index.html', html, function(error, stat) {
 
@@ -358,9 +358,9 @@ function createShortURL(url) {
   }).done(
       function(shorturl) {
         // display the short URL
-        
+
         shorturl = shorturl.replace('jvf.li/', 'my.slicedrop.com/?');
-        
+
         $('#sharemsg').html(
             $('#sharemsg').html() + '<br><a href="' + shorturl
                 + '" target=_blank><span style="font-size:14px;color:red;">'
@@ -382,7 +382,7 @@ var showError = function(error) {
   case Dropbox.ApiError.NOT_FOUND:
     // The file or folder you tried to access is not in the user's Dropbox.
     // Handling this error is specific to your application.
-    $('#sharemsg').html('File not found!');  
+    $('#sharemsg').html('File not found!');
     break;
 
   case Dropbox.ApiError.OVER_QUOTA:
@@ -412,5 +412,5 @@ var showError = function(error) {
     // Tell the user an error occurred, ask them to refresh the page.
     $('#sharemsg').html('There was an error!');
   }
-  $('#sharemsg').html($('#sharemsg').html()+'<br>Please try again!');
+  $('#sharemsg').html($('#sharemsg').html() + '<br>Please try again!');
 };