Insert a 3D viewer in a deckjs slide
46 views
Skip to first unread message
ynoel
Jun 21, 2012, 8:58:30 AM6/21/12
to UIZE JavaScript Framework Group
Hello all,
I am trying to insert a Uize 3d viewer in a deckjs (http://
imakewebthings.com/deck.js/) presentation slide. Did someone ever try
this? I am not sure how to do this, as I am no experienced javascript
programmer, and I am not sure how a 3d viewer can be added as a child
in anything else but a Uize.Page.
My main DeckJs document is as follows:
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js ie6" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie7" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]--
>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Title</title>
<meta name="description" content="Usages et mésusages des analyses
factorielles">
<meta name="author" content="Yvonnick Noël">
<meta name="viewport" content="width=1024, user-scalable=no">
<!-- Core and extension CSS files -->
<link rel="stylesheet" href="../deckjs/core/deck.core.css">
<link rel="stylesheet" href="../deckjs/extensions/goto/
deck.goto.css">
<link rel="stylesheet" href="../deckjs/extensions/menu/
deck.menu.css">
<link rel="stylesheet" href="../deckjs/extensions/navigation/
deck.navigation.css">
<link rel="stylesheet" href="../deckjs/extensions/status/
deck.status.css">
<link rel="stylesheet" href="../deckjs/extensions/hash/
deck.hash.css">
<link rel="stylesheet" href="../deckjs/extensions/scale/
deck.scale.css">
<!-- Style theme. More available in /themes/style/ or create your
own. -->
<link rel="stylesheet" href="../deckjs/themes/style/myswiss.css">
<!-- Transition theme. More available in /themes/transition/ or
create your own. -->
<link rel="stylesheet" href="../deckjs/themes/transition/fade.css">
<script src="../deckjs/modernizr.custom.js"></script>
<style type="text/css">
.rotationViewer {
position:relative;
width:550px;
height:550px;
border-style:solid;
border-width:1px;
margin:auto;
margin-bottom:10px;
cursor:pointer;
}
.rotationViewer img {
position:absolute;
visibility:hidden;
left:0;
top:0;
width:100%;
height:100%;
}
#controls, #page-shareThisPanel { display:none; }
</style>
</head>
<body class="deck-container">
<!-- Begin slides -->
<section class="slide" id="title-slide">
<h1>Title</h1>
<h3>Author</h3>
</section>
<section class="slide" id="factor">
<h2>Notion 1</h2>
<p>My text</p>
</section>
<!-- deck.navigation snippet -->
<a href="#" class="deck-prev-link" title="Previous">←</a>
<a href="#" class="deck-next-link" title="Next">→</a>
<!-- deck.status snippet -->
<p class="deck-status">
<span class="deck-status-current"></span>
/
<span class="deck-status-total"></span>
</p>
<!-- deck.goto snippet -->
<form action="." method="get" class="goto-form">
<label for="goto-slide">Go to slide:</label>
<input type="text" name="slidenum" id="goto-slide" list="goto-
datalist">
<datalist id="goto-datalist"></datalist>
<input type="submit" value="Go">
</form>
<!-- deck.hash snippet -->
<a href="." title="Permalink to this slide" class="deck-permalink">#</
a>
<!-- Grab CDN jQuery, with a protocol relative URL; fall back to local
if offline -->
<script src="../deckjs/jquery-1.7.min.js"></script>
<!-- Deck Core and extensions -->
<script src="../deckjs/core/deck.core.js"></script>
<script src="../deckjs/extensions/hash/deck.hash.js"></script>
<script src="../deckjs/extensions/menu/deck.menu.js"></script>
<script src="../deckjs/extensions/goto/deck.goto.js"></script>
<script src="../deckjs/extensions/status/deck.status.js"></script>
<script src="../deckjs/extensions/navigation/deck.navigation.js"></
script>
<script src="../deckjs/extensions/scale/deck.scale.js"></script>
<!-- Initialize the deck -->
<script>
$(function() {
$.deck('.slide');
});
</script>
</body>
</html>
//-----------
and I have tried to insert the following minimal Uize 3d viewer code
at several places in the sections above, but with no success (nothing
appears):
<script type="text/javascript" src="http://www.uize.com/js/Uize.js"></
script>
<div id="copy">
<div id="page_rotationViewer" class="rotationViewer
insetBorderColor"></div>
<div id="controls" style="text-align:center;">
<a href="javascript://" class="linkedJs buttonLink" title="spin
(360,2700,Uize.Curve.easeInOutPow (4))">360 clockwise</a><a
href="javascript://" class="linkedJs buttonLink" title="spin
(-360,2700,Uize.Curve.easeInOutPow (4))">360 counter-clockwise</a><a
href="javascript://" class="linkedJs buttonLink" title="spin
(1080,4000,Uize.Curve.easeInOutPow (4))">3 spins</a><a
href="javascript://" class="linkedJs buttonLink" title="spin
(360,2700,Uize.Curve.Rubber.easeOutBounce (5,-2,1.5))">spin with
bounce</a><a href="javascript://" class="linkedJs buttonLink"
title="spin (360,4000,Uize.Curve.Mod.bend
(Uize.Curve.Rubber.easeOutElastic (.1),3))">spin with elasticity</a>
</div>
</div>
<!-- JavaScript code to make the static bar HTML "come alive" -->
<script type="text/javascript">
Uize.module ({
required:[
'Uize.Widget.Page',
'Uize.Widget.Drag',
'Uize.Fade.xFactory',
'Uize.Curve.Rubber',
'Uize.Curve.Mod'
],
builder:function () {
/*** create the example page widget ***/
var page = window.page = Uize.Widget.Page ({evaluator:function
(code) {eval (code)}});
/*** configuration variables ***/ // was 72 frames (5 degree)
var
totalFrames = 72,
frameUrlTemplate = 'http://www.apple.com/html5/showcase/
threesixty/images/optimized/Seq_v04_640x378_[#frame].jpg';
/*** state variables ***/
var
rotation = 0,
lastFrameNo = -1,
dragStartRotation
;
/*** create the Uize.Widget.Drag instance ***/
var rotationViewer = notionfacteur.addChild (
'rotationViewer',
Uize.Widget.Drag,
{
cancelFade:{duration:
5000,curve:Uize.Curve.Rubber.easeOutBounce ()},
releaseTravel:function (speed) {
var
deceleration = 5000, // measured in pixels/s/s
duration = speed / deceleration
;
return {
duration:duration,
distance:Math.round (speed * duration / 2),
curve:function (_value) {return 1 - (_value = 1 -
_value) * _value}
};
},
html:function (input) {
var
htmlChunks = [],
frameNodeIdPrefix = input.idPrefix + '-frame'
;
for (var frameNo = 0; ++frameNo <= totalFrames;) {
htmlChunks.push (
'<img' +
' id="' + frameNodeIdPrefix + frameNo + '"' +
' src="' + Uize.substituteInto (frameUrlTemplate,
{frame:(frameNo < 10 ? '0' : '') + frameNo}) +'"' +
'/>'
);
}
return htmlChunks.join ('');
},
built:false
}
);
/*** wire up the drag widget with events for updating rotation
degree ***/
function updateRotation (newRotation) {
rotation = ((newRotation % 360) + 360) % 360;
var frameNo = 1 + Math.round (rotation / 360 * (totalFrames -
1));
if (frameNo != lastFrameNo) {
rotationViewer.showNode ('frame'+ lastFrameNo,false);
rotationViewer.showNode ('frame'+ (lastFrameNo = frameNo));
}
}
rotationViewer.wire ({
'Drag Start':function () {dragStartRotation = rotation},
'Drag Update':function (e) {updateRotation (dragStartRotation
- e.source.eventDeltaPos [0] / 2.5)}
});
/*** function for animating spin ***/
function spin (degrees,duration,curve) {
Uize.Fade.fade (updateRotation,rotation,rotation +
degrees,duration,{quantization:1,curve:curve});
}
/*** initialization ***/
Uize.Node.wire (window,'load',function () {spin
(360,2700,Uize.Curve.easeInOutPow (4))});
/*** wire up the page widget ***/
page.wireUi ();
}
});
</script>
//---------------
Note that both work fine separately but I can't figure out how to mix
both of them.
Any clue?
Thank you very much in advance for your help,
Yvonnick
I am trying to insert a Uize 3d viewer in a deckjs (http://
imakewebthings.com/deck.js/) presentation slide. Did someone ever try
this? I am not sure how to do this, as I am no experienced javascript
programmer, and I am not sure how a 3d viewer can be added as a child
in anything else but a Uize.Page.
My main DeckJs document is as follows:
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js ie6" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie7" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]--
>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Title</title>
<meta name="description" content="Usages et mésusages des analyses
factorielles">
<meta name="author" content="Yvonnick Noël">
<meta name="viewport" content="width=1024, user-scalable=no">
<!-- Core and extension CSS files -->
<link rel="stylesheet" href="../deckjs/core/deck.core.css">
<link rel="stylesheet" href="../deckjs/extensions/goto/
deck.goto.css">
<link rel="stylesheet" href="../deckjs/extensions/menu/
deck.menu.css">
<link rel="stylesheet" href="../deckjs/extensions/navigation/
deck.navigation.css">
<link rel="stylesheet" href="../deckjs/extensions/status/
deck.status.css">
<link rel="stylesheet" href="../deckjs/extensions/hash/
deck.hash.css">
<link rel="stylesheet" href="../deckjs/extensions/scale/
deck.scale.css">
<!-- Style theme. More available in /themes/style/ or create your
own. -->
<link rel="stylesheet" href="../deckjs/themes/style/myswiss.css">
<!-- Transition theme. More available in /themes/transition/ or
create your own. -->
<link rel="stylesheet" href="../deckjs/themes/transition/fade.css">
<script src="../deckjs/modernizr.custom.js"></script>
<style type="text/css">
.rotationViewer {
position:relative;
width:550px;
height:550px;
border-style:solid;
border-width:1px;
margin:auto;
margin-bottom:10px;
cursor:pointer;
}
.rotationViewer img {
position:absolute;
visibility:hidden;
left:0;
top:0;
width:100%;
height:100%;
}
#controls, #page-shareThisPanel { display:none; }
</style>
</head>
<body class="deck-container">
<!-- Begin slides -->
<section class="slide" id="title-slide">
<h1>Title</h1>
<h3>Author</h3>
</section>
<section class="slide" id="factor">
<h2>Notion 1</h2>
<p>My text</p>
</section>
<!-- deck.navigation snippet -->
<a href="#" class="deck-prev-link" title="Previous">←</a>
<a href="#" class="deck-next-link" title="Next">→</a>
<!-- deck.status snippet -->
<p class="deck-status">
<span class="deck-status-current"></span>
/
<span class="deck-status-total"></span>
</p>
<!-- deck.goto snippet -->
<form action="." method="get" class="goto-form">
<label for="goto-slide">Go to slide:</label>
<input type="text" name="slidenum" id="goto-slide" list="goto-
datalist">
<datalist id="goto-datalist"></datalist>
<input type="submit" value="Go">
</form>
<!-- deck.hash snippet -->
<a href="." title="Permalink to this slide" class="deck-permalink">#</
a>
<!-- Grab CDN jQuery, with a protocol relative URL; fall back to local
if offline -->
<script src="../deckjs/jquery-1.7.min.js"></script>
<!-- Deck Core and extensions -->
<script src="../deckjs/core/deck.core.js"></script>
<script src="../deckjs/extensions/hash/deck.hash.js"></script>
<script src="../deckjs/extensions/menu/deck.menu.js"></script>
<script src="../deckjs/extensions/goto/deck.goto.js"></script>
<script src="../deckjs/extensions/status/deck.status.js"></script>
<script src="../deckjs/extensions/navigation/deck.navigation.js"></
script>
<script src="../deckjs/extensions/scale/deck.scale.js"></script>
<!-- Initialize the deck -->
<script>
$(function() {
$.deck('.slide');
});
</script>
</body>
</html>
//-----------
and I have tried to insert the following minimal Uize 3d viewer code
at several places in the sections above, but with no success (nothing
appears):
<script type="text/javascript" src="http://www.uize.com/js/Uize.js"></
script>
<div id="copy">
<div id="page_rotationViewer" class="rotationViewer
insetBorderColor"></div>
<div id="controls" style="text-align:center;">
<a href="javascript://" class="linkedJs buttonLink" title="spin
(360,2700,Uize.Curve.easeInOutPow (4))">360 clockwise</a><a
href="javascript://" class="linkedJs buttonLink" title="spin
(-360,2700,Uize.Curve.easeInOutPow (4))">360 counter-clockwise</a><a
href="javascript://" class="linkedJs buttonLink" title="spin
(1080,4000,Uize.Curve.easeInOutPow (4))">3 spins</a><a
href="javascript://" class="linkedJs buttonLink" title="spin
(360,2700,Uize.Curve.Rubber.easeOutBounce (5,-2,1.5))">spin with
bounce</a><a href="javascript://" class="linkedJs buttonLink"
title="spin (360,4000,Uize.Curve.Mod.bend
(Uize.Curve.Rubber.easeOutElastic (.1),3))">spin with elasticity</a>
</div>
</div>
<!-- JavaScript code to make the static bar HTML "come alive" -->
<script type="text/javascript">
Uize.module ({
required:[
'Uize.Widget.Page',
'Uize.Widget.Drag',
'Uize.Fade.xFactory',
'Uize.Curve.Rubber',
'Uize.Curve.Mod'
],
builder:function () {
/*** create the example page widget ***/
var page = window.page = Uize.Widget.Page ({evaluator:function
(code) {eval (code)}});
/*** configuration variables ***/ // was 72 frames (5 degree)
var
totalFrames = 72,
frameUrlTemplate = 'http://www.apple.com/html5/showcase/
threesixty/images/optimized/Seq_v04_640x378_[#frame].jpg';
/*** state variables ***/
var
rotation = 0,
lastFrameNo = -1,
dragStartRotation
;
/*** create the Uize.Widget.Drag instance ***/
var rotationViewer = notionfacteur.addChild (
'rotationViewer',
Uize.Widget.Drag,
{
cancelFade:{duration:
5000,curve:Uize.Curve.Rubber.easeOutBounce ()},
releaseTravel:function (speed) {
var
deceleration = 5000, // measured in pixels/s/s
duration = speed / deceleration
;
return {
duration:duration,
distance:Math.round (speed * duration / 2),
curve:function (_value) {return 1 - (_value = 1 -
_value) * _value}
};
},
html:function (input) {
var
htmlChunks = [],
frameNodeIdPrefix = input.idPrefix + '-frame'
;
for (var frameNo = 0; ++frameNo <= totalFrames;) {
htmlChunks.push (
'<img' +
' id="' + frameNodeIdPrefix + frameNo + '"' +
' src="' + Uize.substituteInto (frameUrlTemplate,
{frame:(frameNo < 10 ? '0' : '') + frameNo}) +'"' +
'/>'
);
}
return htmlChunks.join ('');
},
built:false
}
);
/*** wire up the drag widget with events for updating rotation
degree ***/
function updateRotation (newRotation) {
rotation = ((newRotation % 360) + 360) % 360;
var frameNo = 1 + Math.round (rotation / 360 * (totalFrames -
1));
if (frameNo != lastFrameNo) {
rotationViewer.showNode ('frame'+ lastFrameNo,false);
rotationViewer.showNode ('frame'+ (lastFrameNo = frameNo));
}
}
rotationViewer.wire ({
'Drag Start':function () {dragStartRotation = rotation},
'Drag Update':function (e) {updateRotation (dragStartRotation
- e.source.eventDeltaPos [0] / 2.5)}
});
/*** function for animating spin ***/
function spin (degrees,duration,curve) {
Uize.Fade.fade (updateRotation,rotation,rotation +
degrees,duration,{quantization:1,curve:curve});
}
/*** initialization ***/
Uize.Node.wire (window,'load',function () {spin
(360,2700,Uize.Curve.easeInOutPow (4))});
/*** wire up the page widget ***/
page.wireUi ();
}
});
</script>
//---------------
Note that both work fine separately but I can't figure out how to mix
both of them.
Any clue?
Thank you very much in advance for your help,
Yvonnick
Reply all
Reply to author
Forward
0 new messages