Permalink
Browse files

First version of collaborative realtime linking.

  • Loading branch information...
Daniel Haehn
Daniel Haehn committed Mar 4, 2013
1 parent dda8d7c commit d348ff03fa9c1c8168ebb34599248af26d16c6b6
Showing with 129 additions and 42 deletions.
  1. +12 −0 css/viewer.css
  2. BIN gfx/link.png
  3. BIN gfx/link_selected.png
  4. +3 −1 index.html
  5. +48 −0 js/pusher.min.js
  6. +55 −33 js/x.realtime.js
  7. +3 −0 js/x.scene.js
  8. +8 −8 js/x.share.js
View
@@ -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;
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
@@ -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>
View

Large diffs are not rendered by default.

Oops, something went wrong.
View
@@ -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;
}
}
View
@@ -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() {
View
@@ -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!');
};

0 comments on commit d348ff0

Please sign in to comment.