update Apple Watch example.

bkwdesign · Jun 15, 2015 · f2fa552 · f2fa552
1 parent 3a01af7
commit f2fa552
Show file tree

Hide file tree

Showing 4 changed files with 567 additions and 12 deletions.
diff --git a/AppleWatch/AppleWatchLogo.png b/AppleWatch/AppleWatchLogo.png
diff --git a/AppleWatch/index-prefetch-json.html b/AppleWatch/index-prefetch-json.html
@@ -0,0 +1,233 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="dns-prefetch" href="https://clara.io">
+  <title>Clara.io - Apple Watch Configurator</title>
+  <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans:400,300">
+</head>
+<body style="font-family: 'Open Sans', Arial, sans-serif; top: 0; bottom: 0; left: 0; right: 0; position: static;">
+<script src="./jquery-2.0.2.min.js" type="text/javascript"></script>
+<script>
+
+var uuid = '12ab5659-50cc-4f55-ab9f-dd5fc7bfe0cb';
+var sceneJSONRequest = $.get('https://clara.io/api/scenes/' + uuid);
+
+var host = 'http://192.168.33.10';
+var min = '';
+if( window.location.host.indexOf( 'github.io') >= 0 ) {
+  host = "https://clara.io";
+  min = '.min';
+}
+
+window.lightningjs||function(c){function g(b,d){d&&(d+=(/\?/.test(d)?"&":"?")+"lv=1");c[b]||function(){var i=window,h=document,j=b,g=h.location.protocol,l="load",k=0;(function(){function b(){a.P(l);a.w=1;c[j]("_load")}c[j]=function(){function m(){m.id=e;return c[j].apply(m,arguments)}var b,e=++k;b=this&&this!=i?this.id||0:0;(a.s=a.s||[]).push([e,b,arguments]);m.then=function(b,c,h){var d=a.fh[e]=a.fh[e]||[],j=a.eh[e]=a.eh[e]||[],f=a.ph[e]=a.ph[e]||[];b&&d.push(b);c&&j.push(c);h&&f.push(h);return m}; return m};var a=c[j]._={};a.fh={};a.eh={};a.ph={};a.l=d?d.replace(/^\/\//,(g=="https:"?g:"http:")+"//"):d;a.p={0:+new Date};a.P=function(b){a.p[b]=new Date-a.p[0]};a.w&&b();i.addEventListener?i.addEventListener(l,b,!1):i.attachEvent("on"+l,b);var q=function(){function b(){return["<head></head><",c,' onload="var d=',n,";d.getElementsByTagName('head')[0].",d,"(d.",g,"('script')).",i,"='",a.l,"'\"></",c,">"].join("")}var c="body",e=h[c];if(!e)return setTimeout(q,100);a.P(1);var d="appendChild",g="createElement", i="src",k=h[g]("div"),l=k[d](h[g]("div")),f=h[g]("iframe"),n="document",p;k.style.display="none";e.insertBefore(k,e.firstChild).id=o+"-"+j;f.frameBorder="0";f.id=o+"-frame-"+j;/MSIE[ ]+6/.test(navigator.userAgent)&&(f[i]="javascript:false");f.allowTransparency="true";l[d](f);try{f.contentWindow[n].open()}catch(s){a.domain=h.domain,p="javascript:var d="+n+".open();d.domain='"+h.domain+"';",f[i]=p+"void(0);"}try{var r=f.contentWindow[n];r.write(b());r.close()}catch(t){f[i]=p+'d.write("'+b().replace(/"/g, String.fromCharCode(92)+'"')+'");d.close();'}a.P(2)};a.l&&q()})()}();c[b].lv="1";return c[b]}var o="lightningjs",k=window[o]=g(o);k.require=g;k.modules=c}({});
+window.clara = lightningjs.require("clara", host + '/js/clara-embed'+min+'.js');
+if (typeof jQuery !== 'undefined') jQuery.fn.clara = function(c,o) { return clara('jq',this,c,o); };
+(function() { var l = document.createElement('link'); l.href = host + '/css/clara-embed.css'; l.rel = "stylesheet"; document.head.appendChild(l); })();
+
+</script>
+<script src="./three.min.js" type="text/javascript"></script>
+
+
+<!--<iframe width='600' height='600' frameborder='0' src='http://clara.io/embed/52f258ac-37f2-4097-9fea-543bc8fae9c5' allowfullscreen='false'></iframe>-->
+<div class="main" style="width:570px; margin-right: auto; margin-left: auto;">
+  <table style="width:580px; align:center; padding: 0px;" bgcolor="#fff">
+  <!--<img src="AppleWatchLogo.png" width="550px" bgcolor="#fff">-->
+  <tr>
+    <td>
+    <div id="clara-sc-embed" data-hide-header="true" style="height: 480px; width: 480px; background: #fff; solid: #fff; background-color: #fff;" class="clara light" bgcolor="#fff">    
+    </div>
+    </td>
+    <td>
+      <center><b>Strap color:</b></center>
+      <div style="width:90px;height:90px;background-color:#fff;border: 1px solid; border-radius: 15px; box-shadow: 5px 5px 5px #888888;" class="clara-change" data-changes="bodyColor=0"></div>
+      <div style="width:90px;height:90px;background-color:#3ac4ff; border: 1px solid; border-radius: 15px; box-shadow: 5px 5px 5px #888888;" class="clara-change" data-changes="bodyColor=1"></div>
+      <div style="width:90px;height:90px;background-color:#dbff00;border: 1px solid; border-radius: 15px; box-shadow: 5px 5px 5px #888888;" class="clara-change" data-changes="bodyColor=2"></div>
+      <div style="width:90px;height:90px;background-color:#fe5757;border: 1px solid; border-radius: 15px; box-shadow: 5px 5px 5px #888888;" class="clara-change" data-changes="bodyColor=3"></div>
+      <div style="width:90px;height:90px;background-color:#282828;border: 1px solid; border-radius: 15px; box-shadow: 5px 5px 5px #888888;" class="clara-change" data-changes="bodyColor=4"></div>
+    </td>
+  </tr>
+  </table>
+  <center><small>This product configurator was build using <a href="http://clara.io" target="_blank">Clara.io</a> and it's <a href="http://clara.io/learn/sdk/embedding" target="_blank">interactive 3D model viewer</a> features.  This <a href="https://clara.io/view/12ab5659-50cc-4f55-ab9f-dd5fc7bfe0cb/webgl" target="_blank">Apple Watch 3D model</a>, made by Samir Braga, is also free!</a></small></center>
+ </div>
+
+<script>
+
+$('#clara-sc-embed').clara({id: uuid, sceneJSON: sceneJSONRequest, hideHeader: true, controlBar: false, interactive: true, hideLogo: true }).then(function() {
+  // updating car.
+});
+
+
+// this is the initial load default state
+var colors = [ '#fff', '#3ac4ff', '#dbff00', '#fe5757', '#282828' ];
+
+var state = {
+  bodyColor: 0,
+};
+
+var applyVisibility = function( ctx, meshNames, visibility ) {
+  for( var i = 0; i < meshNames.length; i ++ ) {
+    ctx( meshNames[i] + '#Properties' ).set({"visible":visibility});
+  }
+};
+
+var lastColor = null;
+var currentColor = null;
+var nextColor = null;
+
+var rotationDelay = 0;
+var speedUpProgress = 0;  
+var colorChangeProgress = 0;
+var colorInterpolateProgress = 0;
+
+var startAnimationController = function( ctx ) {
+  var lastUpdateTime = null;  
+  var rotationRate = 360 / 12.0;
+  var speedUpDuration = 1;
+  var colorInterpolateDuration = 0.25;
+  var colorChangeDuration = 12.0;
+  var colorUpdate = 0;
+
+  setInterval(function(){
+    var currentTime = new Date().getTime();
+    //console.log( 'currentTime', currentTime )
+    if( lastUpdateTime ) {
+      var deltaSeconds = ( currentTime - lastUpdateTime ) / 1000.0;
+      rotationDelay -= deltaSeconds;
+      if( rotationDelay <= 0 ) {
+        speedUpProgress += deltaSeconds;
+        //console.log( 'deltaSeconds', deltaSeconds )
+        var rotation = ctx('group#Transform[name=Transform]').get('rotation');
+        rotation.y -= rotationRate * deltaSeconds * THREE.Math.smoothstep( Math.min( speedUpProgress / speedUpDuration, 1 ), 0, 1 );
+        ctx('group#Transform[name=Transform]').set({"rotation":rotation});
+      }
+
+      colorChangeProgress += deltaSeconds;
+      if( colorChangeProgress > colorChangeDuration ) {
+        state.bodyColor++;
+        lastColor = currentColor;
+        nextColor = new THREE.Color( colors[ state.bodyColor % colors.length ] );
+        colorChangeProgress = 0;
+        colorInterpolateProgress = 0;
+      }
+
+      if( ! nextColor.equals( currentColor ) ) {
+        colorInterpolateProgress += deltaSeconds;
+        colorUpdate ++;
+        if( colorUpdate % 7 == 0 ) {
+          var alpha = THREE.Math.smoothstep( Math.min( colorInterpolateProgress / colorInterpolateDuration, 1 ), 0, 1 );
+          currentColor = nextColor.clone().multiplyScalar( alpha ).add( lastColor.clone().multiplyScalar( 1 - alpha ) );
+          //console.log( colorInterpolateProgress, lastColor, nextColor, alpha, currentColor );
+          ctx('Plastic Strap#Material[name=Standard]').set({"diffuseColor":{"r": currentColor.r,"g": currentColor.g,"b":currentColor.b}});
+        }
+      }
+    }
+    lastUpdateTime = currentTime;
+  },10);
+};
+/*
+var beginRotation = function( ctx ) {
+  rotationTimeout = setInterval(function(){
+    var currentTime = new Date().getTime();
+    //console.log( 'currentTime', currentTime )
+    if( lastUpdateTime ) {
+      var deltaSeconds = ( currentTime - lastUpdateTime ) / 1000.0;
+      speedUpProgress += deltaSeconds;
+      //console.log( 'deltaSeconds', deltaSeconds )
+      var rotation = ctx('group#Transform[name=Transform]').get('rotation');
+      rotation.y -= rotationRate * deltaSeconds * THREE.Math.smoothstep( Math.min( speedUpProgress / speedUp, 1 ), 0, 1 );
+      ctx('group#Transform[name=Transform]').set({"rotation":rotation});
+
+      colorChangeTimeRemaining -= deltaSeconds;
+      if( colorChangeTimeRemaining <= 0 ) {
+        state.bodyColor++;
+        updateScene( state );
+        colorChangeTimeRemaining = colorChangeTimeInterval;
+      }
+    }
+    lastUpdateTime = currentTime;
+  },1);
+};
+
+var endRotation = function( ctx ) {
+  if( rotationTimeout ) {
+    clearTimeout( rotationTimeout );    
+  }
+  rotationTimeout = setTimeout( function() {
+    //restartRotation
+    beginRotation( ctx );
+  }, 5000);
+}*/
+
+
+
+$( '.clara-change' ).click( function(){
+  var changes = $(this).data('changes').split(';') || [];
+
+  for( var i = 0; i < changes.length; i ++ ) {
+    var split = changes[i].split('=');
+    if( ! split || split.length < 2 ) {
+      continue;
+    }
+    var name = split[0];
+    var value = split[1];
+    if( value === 'true' ) value = true;
+    if( value === 'false' ) value = false;
+
+    lastColor = currentColor;
+    state.bodyColor = value;
+    nextColor = new THREE.Color( colors[ value % colors.length ] );
+    colorInterpolateProgress = 0;
+    colorChangeProgress = 0;
+  }
+});
+
+
+
+
+$('#clara-sc-embed').clara('script', {fn: function(ctx) {
+  var mousedown = false;
+
+  ctx.editor.on('loadedPre', function() {  
+    nextColor = currentColor = lastColor = new THREE.Color( colors[0] );
+  });
+
+  ctx.editor.on('loadedPost', function() {  
+    startAnimationController( ctx );
+  });
+
+  ctx.editor.on('selectionMouseMove', function(node, mouseInfo) {
+    //console.log( mouseInfo );
+    if( mousedown ) {
+      rotationDelay = 5;
+      speedUpProgress = 0;
+      colorChangeProgress = 0;
+    }
+    //$('.mouseover-info').text('Mouse Over: ' + ( node ? node.get('name') : "" ) );
+  });
+
+  ctx.editor.on('selectionMouseDown', function(node, mouseInfo) {
+    rotationDelay = 5;
+    speedUpProgress = 0;
+    colorChangeProgress = 0;
+    if (node && !mousedown) {
+      //$('.mousedown-info').text('Mouse Down: ' + node.get('name') );
+      var viewport = ctx.editor.viewports.first();
+      //viewport.frameTo(node, null, null, true);
+      //mouseInfo.preventDefault = true;
+    } else {
+      //$('.mousedown-info').text('Mouse Down: (NONE)');
+    }
+    mousedown = true;
+  });
+
+  $(window).on('mouseup', function() {
+    mousedown = false;
+  });
+}});
+</script>
+
+</body>
+</html>