Skip to content

Instantly share code, notes, and snippets.

@jasonals

jasonals/index.html

Created November 13, 2014 10:45
Show Gist options
  • Save jasonals/636de84bd2410454a2db to your computer and use it in GitHub Desktop.
Save jasonals/636de84bd2410454a2db to your computer and use it in GitHub Desktop.
Download ZIP
Famous App Clock in Famo.us 0.3.0 // source http://jsbin.com/wobice
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Clock in Famo.us 0.3.0" />
<meta charset="utf-8">
<title>Famous App</title>
<meta name="viewport" content="width=device-width, maximum-scale=1, user-scalable=no" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<script type="text/javascript" src="http://code.famo.us/lib/functionPrototypeBind.js"></script>
<script type="text/javascript" src="http://code.famo.us/lib/classList.js"></script>
<script type="text/javascript" src="http://code.famo.us/lib/requestAnimationFrame.js"></script>
<!-- famous -->
<link rel="stylesheet" type="text/css" href="http://code.famo.us/famous/0.3.0/famous.css" />
<script src="http://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.14/require.min.js"></script>
<script type="text/javascript" src="http://code.famo.us/famous/0.3.0/famous.min.js"></script>
<script type="text/javascript">require(['main']);console.log('------------start------------')</script>
<style id="jsbin-css">
html {
background: #fff;
}
.double-sided {
-webkit-backface-visibility: visible;
backface-visibility: visible;
}
.double-font {
font-size: 2em;
}
</style>
</head>
<body class='famous-root'>
<script id="jsbin-javascript">
define('main', function (require, exports, module) {
var Engine = require('famous/core/Engine');
var OptionsManager = require('famous/core/OptionsManager');
var Surface = require('famous/core/Surface');
var Modifier = require('famous/core/Modifier');
var RenderNode = require('famous/core/RenderNode');
var Transform = require('famous/core/Transform');
var Timer = require('famous/utilities/Timer');
var mainContext = Engine.createContext();
mainContext.setPerspective(1000);
var splash = new Surface({ content: 'Famo.us Rolex'});
var clockfaceDiameter = 280;
var secondHand = new Surface({
size:[2,Math.round(clockfaceDiameter/2*0.9)],
classes: ['double-sided'],
properties: {
zIndex: 0.001,
backgroundColor: 'rgba(0,0,0,1.0)',
cursor: 'pointer'
}
});
var minuteHand = new Surface({
size:[4,Math.round(clockfaceDiameter/2*0.85)],
classes: ['double-sided'],
properties: {
zIndex: 0.001,
backgroundColor: 'rgba(0,0,0,1.0)',
cursor: 'pointer'
}
});
var hourHand = new Surface({
size:[6,Math.round(clockfaceDiameter/2*0.70)],
classes: ['double-sided'],
properties: {
zIndex: 0.001,
backgroundColor: 'rgba(0,0,0,1.0)',
cursor: 'pointer'
}
});
mainContext.add(splash);
var initialTime = Date.now();
var centerSpinModifier = new Modifier({
origin: [0, 0],
align: [0.5, 0.5],
transform: Transform.rotateAxis([0,0,1], 0)
});
var now = new Date();
var angleSec = 180 + (6 * now.getSeconds());
var angleMin = 180 + (6 * now.getMinutes());
var angleHr = 180 + (30 * now.getHours());
var radiansSec = Math.PI/180 * angleSec;
var radiansMin = Math.PI/180 * angleMin;
var radiansHr = Math.PI/180 * angleHr;
var angleSecModifier = new Modifier({
origin: [0.5, 0],
align: [0.5, 0.5],
transform: function() {
return Transform.rotateAxis([0,0,1], radiansSec);
}
});
var angleMinModifier = new Modifier({
origin: [0.5, 0],
align: [0.5, 0.5],
transform: function() {
return Transform.rotateAxis([0,0,1], radiansMin);
}
});
var angleHrModifier = new Modifier({
origin: [0.5, 0],
align: [0.5, 0.5],
transform: function() {
return Transform.rotateAxis([0,0,1], radiansHr);
}
});
Timer.setInterval(function(){
now = new Date();
angleSec = 180 + (6* now.getSeconds());
angleMin = 180 + (6 * now.getMinutes()) + now.getSeconds()/12;
angleHr = (180 + (30 * now.getHours())) + (now.getMinutes()/2);
radiansSec = Math.PI/180 * angleSec;
radiansMin = Math.PI/180 * angleMin;
radiansHr = Math.PI/180 * angleHr;
splash.setContent('Famo.us Rolex '+' '+angleMin+ ' '+ angleHr+' '+now.getMinutes()/2);
},1000);
var centerModifier = new Modifier({
origin: [0.5, 0.5],
align: [0.5, 0.5]
});
var centerRadius = Math.round(clockfaceDiameter/2*0.05);
var centerCircle = new Surface({
origin: [0.5, 0.5],
align: [0.5, 0.5],
size: [14, 14],
properties: {
zIndex: 0.0001,
borderRadius: '7px',
backgroundColor: 'rgba(218,165,32,1)'
}
});
var clockModifier = new Modifier({
origin: [0.5, 0.5],
align: [0.5, 0.5]
});
var clockFace = new Surface({
origin: [0.5, 0.5],
align: [0.5, 0.5],
size: [clockfaceDiameter, clockfaceDiameter],
properties: {
zIndex: 0.0002,
borderRadius: (clockfaceDiameter/2)+ 'px',
background: 'url("http://fc01.deviantart.com/fs26/f/2008/106/6/a/Classic_Roam_Clock_Face_by_a_lemonhead.png") no-repeat',
backgroundSize: 'cover',
}
});
mainContext.add(clockModifier).add(clockFace);
mainContext.add(centerModifier).add(centerCircle);
mainContext.add(angleHrModifier).add(hourHand);
mainContext.add(angleMinModifier).add(minuteHand);
mainContext.add(angleSecModifier).add(secondHand);
});
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<meta name="description" content="Clock in Famo.us 0.3.0" />
<meta charset="utf-8">
<title>Famous App</title>
<meta name="viewport" content="width=device-width, maximum-scale=1, user-scalable=no" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<script type="text/javascript" src="http://code.famo.us/lib/functionPrototypeBind.js"><\/script>
<script type="text/javascript" src="http://code.famo.us/lib/classList.js"><\/script>
<script type="text/javascript" src="http://code.famo.us/lib/requestAnimationFrame.js"><\/script>
<\!-- famous -->
<link rel="stylesheet" type="text/css" href="http://code.famo.us/famous/0.3.0/famous.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.14/require.min.js"><\/script>
<script type="text/javascript" src="http://code.famo.us/famous/0.3.0/famous.min.js"><\/script>
<script type="text/javascript">require(['main']);console.log('------------start------------')<\/script>
</head>
<body class='famous-root'>
</body>
</html></script>
<script id="jsbin-source-css" type="text/css">html {
background: #fff;
}
.double-sided {
-webkit-backface-visibility: visible;
backface-visibility: visible;
}
.double-font {
font-size: 2em;
}
</script>
<script id="jsbin-source-javascript" type="text/javascript">define('main', function (require, exports, module) {
var Engine = require('famous/core/Engine');
var OptionsManager = require('famous/core/OptionsManager');
var Surface = require('famous/core/Surface');
var Modifier = require('famous/core/Modifier');
var RenderNode = require('famous/core/RenderNode');
var Transform = require('famous/core/Transform');
var Timer = require('famous/utilities/Timer');
var mainContext = Engine.createContext();
mainContext.setPerspective(1000);
var splash = new Surface({ content: 'Famo.us Rolex'});
var clockfaceDiameter = 280;
var secondHand = new Surface({
size:[2,Math.round(clockfaceDiameter/2*0.9)],
classes: ['double-sided'],
properties: {
zIndex: 0.001,
backgroundColor: 'rgba(0,0,0,1.0)',
cursor: 'pointer'
}
});
var minuteHand = new Surface({
size:[4,Math.round(clockfaceDiameter/2*0.85)],
classes: ['double-sided'],
properties: {
zIndex: 0.001,
backgroundColor: 'rgba(0,0,0,1.0)',
cursor: 'pointer'
}
});
var hourHand = new Surface({
size:[6,Math.round(clockfaceDiameter/2*0.70)],
classes: ['double-sided'],
properties: {
zIndex: 0.001,
backgroundColor: 'rgba(0,0,0,1.0)',
cursor: 'pointer'
}
});
mainContext.add(splash);
var initialTime = Date.now();
var centerSpinModifier = new Modifier({
origin: [0, 0],
align: [0.5, 0.5],
transform: Transform.rotateAxis([0,0,1], 0)
});
var now = new Date();
var angleSec = 180 + (6 * now.getSeconds());
var angleMin = 180 + (6 * now.getMinutes());
var angleHr = 180 + (30 * now.getHours());
var radiansSec = Math.PI/180 * angleSec;
var radiansMin = Math.PI/180 * angleMin;
var radiansHr = Math.PI/180 * angleHr;
var angleSecModifier = new Modifier({
origin: [0.5, 0],
align: [0.5, 0.5],
transform: function() {
return Transform.rotateAxis([0,0,1], radiansSec);
}
});
var angleMinModifier = new Modifier({
origin: [0.5, 0],
align: [0.5, 0.5],
transform: function() {
return Transform.rotateAxis([0,0,1], radiansMin);
}
});
var angleHrModifier = new Modifier({
origin: [0.5, 0],
align: [0.5, 0.5],
transform: function() {
return Transform.rotateAxis([0,0,1], radiansHr);
}
});
Timer.setInterval(function(){
now = new Date();
angleSec = 180 + (6* now.getSeconds());
angleMin = 180 + (6 * now.getMinutes()) + now.getSeconds()/12;
angleHr = (180 + (30 * now.getHours())) + (now.getMinutes()/2);
radiansSec = Math.PI/180 * angleSec;
radiansMin = Math.PI/180 * angleMin;
radiansHr = Math.PI/180 * angleHr;
splash.setContent('Famo.us Rolex '+' '+angleMin+ ' '+ angleHr+' '+now.getMinutes()/2);
},1000);
var centerModifier = new Modifier({
origin: [0.5, 0.5],
align: [0.5, 0.5]
});
var centerRadius = Math.round(clockfaceDiameter/2*0.05);
var centerCircle = new Surface({
origin: [0.5, 0.5],
align: [0.5, 0.5],
size: [14, 14],
properties: {
zIndex: 0.0001,
borderRadius: '7px',
backgroundColor: 'rgba(218,165,32,1)'
}
});
var clockModifier = new Modifier({
origin: [0.5, 0.5],
align: [0.5, 0.5]
});
var clockFace = new Surface({
origin: [0.5, 0.5],
align: [0.5, 0.5],
size: [clockfaceDiameter, clockfaceDiameter],
properties: {
zIndex: 0.0002,
borderRadius: (clockfaceDiameter/2)+ 'px',
background: 'url("http://fc01.deviantart.com/fs26/f/2008/106/6/a/Classic_Roam_Clock_Face_by_a_lemonhead.png") no-repeat',
backgroundSize: 'cover',
}
});
mainContext.add(clockModifier).add(clockFace);
mainContext.add(centerModifier).add(centerCircle);
mainContext.add(angleHrModifier).add(hourHand);
mainContext.add(angleMinModifier).add(minuteHand);
mainContext.add(angleSecModifier).add(secondHand);
});
</script></body>
</html>
Raw
jsbin.wobice.css
html {
background: #fff;
}
.double-sided {
-webkit-backface-visibility: visible;
backface-visibility: visible;
}
.double-font {
font-size: 2em;
}
Raw
jsbin.wobice.js
define('main', function (require, exports, module) {
var Engine = require('famous/core/Engine');
var OptionsManager = require('famous/core/OptionsManager');
var Surface = require('famous/core/Surface');
var Modifier = require('famous/core/Modifier');
var RenderNode = require('famous/core/RenderNode');
var Transform = require('famous/core/Transform');
var Timer = require('famous/utilities/Timer');
var mainContext = Engine.createContext();
mainContext.setPerspective(1000);
var splash = new Surface({ content: 'Famo.us Rolex'});
var clockfaceDiameter = 280;
var secondHand = new Surface({
size:[2,Math.round(clockfaceDiameter/2*0.9)],
classes: ['double-sided'],
properties: {
zIndex: 0.001,
backgroundColor: 'rgba(0,0,0,1.0)',
cursor: 'pointer'
}
});
var minuteHand = new Surface({
size:[4,Math.round(clockfaceDiameter/2*0.85)],
classes: ['double-sided'],
properties: {
zIndex: 0.001,
backgroundColor: 'rgba(0,0,0,1.0)',
cursor: 'pointer'
}
});
var hourHand = new Surface({
size:[6,Math.round(clockfaceDiameter/2*0.70)],
classes: ['double-sided'],
properties: {
zIndex: 0.001,
backgroundColor: 'rgba(0,0,0,1.0)',
cursor: 'pointer'
}
});
mainContext.add(splash);
var initialTime = Date.now();
var centerSpinModifier = new Modifier({
origin: [0, 0],
align: [0.5, 0.5],
transform: Transform.rotateAxis([0,0,1], 0)
});
var now = new Date();
var angleSec = 180 + (6 * now.getSeconds());
var angleMin = 180 + (6 * now.getMinutes());
var angleHr = 180 + (30 * now.getHours());
var radiansSec = Math.PI/180 * angleSec;
var radiansMin = Math.PI/180 * angleMin;
var radiansHr = Math.PI/180 * angleHr;
var angleSecModifier = new Modifier({
origin: [0.5, 0],
align: [0.5, 0.5],
transform: function() {
return Transform.rotateAxis([0,0,1], radiansSec);
}
});
var angleMinModifier = new Modifier({
origin: [0.5, 0],
align: [0.5, 0.5],
transform: function() {
return Transform.rotateAxis([0,0,1], radiansMin);
}
});
var angleHrModifier = new Modifier({
origin: [0.5, 0],
align: [0.5, 0.5],
transform: function() {
return Transform.rotateAxis([0,0,1], radiansHr);
}
});
Timer.setInterval(function(){
now = new Date();
angleSec = 180 + (6* now.getSeconds());
angleMin = 180 + (6 * now.getMinutes()) + now.getSeconds()/12;
angleHr = (180 + (30 * now.getHours())) + (now.getMinutes()/2);
radiansSec = Math.PI/180 * angleSec;
radiansMin = Math.PI/180 * angleMin;
radiansHr = Math.PI/180 * angleHr;
splash.setContent('Famo.us Rolex '+' '+angleMin+ ' '+ angleHr+' '+now.getMinutes()/2);
},1000);
var centerModifier = new Modifier({
origin: [0.5, 0.5],
align: [0.5, 0.5]
});
var centerRadius = Math.round(clockfaceDiameter/2*0.05);
var centerCircle = new Surface({
origin: [0.5, 0.5],
align: [0.5, 0.5],
size: [14, 14],
properties: {
zIndex: 0.0001,
borderRadius: '7px',
backgroundColor: 'rgba(218,165,32,1)'
}
});
var clockModifier = new Modifier({
origin: [0.5, 0.5],
align: [0.5, 0.5]
});
var clockFace = new Surface({
origin: [0.5, 0.5],
align: [0.5, 0.5],
size: [clockfaceDiameter, clockfaceDiameter],
properties: {
zIndex: 0.0002,
borderRadius: (clockfaceDiameter/2)+ 'px',
background: 'url("http://fc01.deviantart.com/fs26/f/2008/106/6/a/Classic_Roam_Clock_Face_by_a_lemonhead.png") no-repeat',
backgroundSize: 'cover',
}
});
mainContext.add(clockModifier).add(clockFace);
mainContext.add(centerModifier).add(centerCircle);
mainContext.add(angleHrModifier).add(hourHand);
mainContext.add(angleMinModifier).add(minuteHand);
mainContext.add(angleSecModifier).add(secondHand);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment