--- a/web/choix.html Tue Dec 11 19:49:17 2012 +0100
+++ b/web/choix.html Tue Dec 11 21:13:42 2012 +0100
@@ -54,10 +54,12 @@
incResize.init("content", null, "mosaic", null, null, 130, 1920/809, null, incMosaic.registerPostNewCanvasSize);
// Set the mosaic effect
- incChoice.setMosaicEffect(["choix1fond1.jpg", "choix1fond2.jpg", "choix1fond3.jpg"],
- ["choix2fond1.jpg", "choix2fond2.jpg", "choix2fond3.jpg"],
- "choix_2.html");
- incChoice.currentWorldIndex = 0;
+ incChoice.setMosaicImages(["choix1fond1.jpg", "choix1fond2.jpg", "choix1fond3.jpg"],
+ ["choix2fond1.jpg", "choix2fond2.jpg", "choix2fond3.jpg"],
+ ["choix3fond1.jpg", "choix3fond2.jpg", "choix3fond3.jpg"]);
+
+ // Set the list of words and the mosaic effect
+ incChoice.setWordsAndEffect(0);
});
</script>
</body>
--- a/web/choix_1.html Tue Dec 11 19:49:17 2012 +0100
+++ /dev/null Thu Jan 01 00:00:00 1970 +0000
@@ -1,64 +0,0 @@
-<!DOCTYPE html>
-<html lang="fr">
- <head>
- <meta charset="utf-8">
- <title>The End - @todo</title>
-
- <meta name="description" content="@todo">
-
- <!-- Mobile Specific Metas -->
- <meta name="viewport" content="initial-scale=1.0, width=device-width" />
-
- <link rel="stylesheet" href="static/res/css/style_1024.css" />
- <!-- stylesheet for ipad 3
- <link rel="stylesheet" href="static/res/css/style_2048.css" />
- -->
-
- </head>
- <body>
- <!-- div content - site takes the full height of browser -->
- <div id="content" class="full_screen">
- <!--this div empty allows the element content_vcentering to be vertically aligned -->
- <div class="strut"></div><!--
- this comment corrects the white-space (display: inline);
- --><section class="fullScreen_vcentering container_vcentering choix">
- <div id="choix1" class="box_vcentering blue big_txt">
- <p><a id="mot1" onClick="incChoice.selectWord(1);">Famille</a></p>
- <p><a id="mot2" onClick="incChoice.selectWord(2);">Amour</a></p>
- <p><a id="mot3" onClick="incChoice.selectWord(3);">Travail</a></p>
- <p><a id="mot4" onClick="incChoice.selectWord(4);">International</a></p>
- <p><a id="mot5" onClick="incChoice.selectWord(5);">Dieu</a></p>
- <p><a id="mot6" onClick="incChoice.selectWord(6);">Président</a></p>
- </div>
- </section>
-
- <!-- il faut regler comment on nome ici les id. j'aimerai changer id="main" mais je ne sai pas si je peux
- -->
- <section id="main" class="mosaic_choice">
- <canvas id="mosaic" width="100" height="100"></canvas>
- </section>
- </div>
-
- <!-- Metanav FranceTV -->
- <script src="http://static.francetv.fr/js/jquery.metanav-min.js" charset="utf-8"></script>
- <!-- JavaScript -->
- <script src="static/res/js/jquery-1.8.2.min.js"></script>
- <script src="static/res/js/jquery.cookie.js"></script>
- <script src="static/res/js/ease.js"></script>
- <script src="static/res/js/incresize.js"></script>
- <script src="static/res/js/incmosaic.js"></script>
- <script src="static/res/js/incchoice.js"></script>
- <script>
- $(function() {
- // Init the resize object
- incResize.init("content", null, "mosaic", null, null, 130, 1920/809, null, incMosaic.registerPostNewCanvasSize);
-
- // Set the choice logic
- incChoice.setWords(0);
-
- // Set the mosaic effect
- incChoice.setMosaicEffect(["choix1fond1.jpg", "choix1fond2.jpg", "choix1fond3.jpg"], ["choix2fond1.jpg", "choix2fond2.jpg", "choix2fond3.jpg"]);
- });
- </script>
- </body>
-</html>
\ No newline at end of file
--- a/web/static/res/css/style_1024.css Tue Dec 11 19:49:17 2012 +0100
+++ b/web/static/res/css/style_1024.css Tue Dec 11 21:13:42 2012 +0100
@@ -335,7 +335,7 @@
font-size: 25px;
}
#main {
- display: inline-block;
+ display: block;
margin: 0 auto;
}
/*----------------------------------------------*/
--- a/web/static/res/js/incchoice.js Tue Dec 11 19:49:17 2012 +0100
+++ b/web/static/res/js/incchoice.js Tue Dec 11 21:13:42 2012 +0100
@@ -4,20 +4,25 @@
{
this.currentWorldIndex = 0;
this.canSelectWord = true;
+ this.image1;
+ this.image2;
+ this.image3;
- this.setMosaicEffect = function(images1, images2)
+ this.setMosaicImages = function(images1, images2, images3)
{
// Choose 2 image for the effect
- var image1 = images1[incMosaic.randomInt(0, images1.length)];
- var image2 = images2[incMosaic.randomInt(0, images2.length)];
- incMosaic.addImageUrl("static/res/img/" + image1);
- incMosaic.addImageUrl("static/res/img/" + image2);
+ this.image1 = images1[incMosaic.randomInt(0, images1.length)];
+ this.image2 = images2[incMosaic.randomInt(0, images2.length)];
+ this.image3 = images3[incMosaic.randomInt(0, images3.length)];
- // Start mosaic effect
- incMosaic.start("mosaic", effectSpeed, 9, 5, false, true, function() {incChoice.effectIsDone();});
+ incMosaic.addImageUrl("static/res/img/" + this.image1);
+ incMosaic.addImageUrl("static/res/img/" + this.image2);
+ incMosaic.addImageUrl("static/res/img/" + this.image3);
+
+ incMosaic.start("mosaic", effectSpeed, 9, 5, true, true, function() {incChoice.effectIsDone();});
};
- this.setWords = function(choiceIndex)
+ this.setWordsAndEffect = function(choiceIndex)
{
if (choiceIndex == 0) {
$("#mot1").html("famille");
@@ -27,14 +32,24 @@
$("#mot5").html("dieu");
$("#mot6").html("president");
+ // Set images for effect
+ //incMosaic.clear();
+ //incMosaic.addImageUrl("static/res/img/" + this.image1);
+ //incMosaic.addImageUrl("static/res/img/" + this.image2);
+
} else if (choiceIndex == 1) {
$("#mot1").html("actif");
$("#mot2").html("passif");
$("#mot3").html("corps");
- $("#mot4").html("charité");
+ $("#mot4").html("charite");
$("#mot5").html("patrie");
$("#mot6").html("politique");
+ // Set images for effect
+ //incMosaic.clear();
+ //incMosaic.addImageUrl("static/res/img/" + this.image2);
+ //incMosaic.addImageUrl("static/res/img/" + this.image3);
+
} else {
$("#mot1").html("spleen");
$("#mot2").html("ideal");
@@ -42,7 +57,14 @@
$("#mot4").html("peur");
$("#mot5").html("desir");
$("#mot6").html("bonheur");
+
+ // Set images for effect
+ //incMosaic.clear();
+ //incMosaic.addImageUrl("static/res/img/" + this.image3);
+ //incMosaic.addImageUrl("static/res/img/" + this.image1);
}
+
+ //incMosaic.start("mosaic", effectSpeed, 9, 5, false, true, function() {incChoice.effectIsDone();});
};
this.selectWord = function(wordIndex)
@@ -55,7 +77,7 @@
this.canSelectWord = false;
// Start the mosaic effect
- incMosaic.goEffect();
+ incMosaic.UnpauseEffect(true);
// Fade the text
$('.big_txt').animate({opacity: 0}, 20000 * 1 / effectSpeed);
@@ -69,8 +91,11 @@
this.canSelectWord = true;
++this.currentWorldIndex;
- // Change list of words
- this.setWords(this.currentWorldIndex);
+ // Set the list of words and the mosaic effect
+ this.setWordsAndEffect(this.currentWorldIndex);
+
+ // Stop the mosaic effect
+ incMosaic.UnpauseEffect(false);
// Fade the text
$('.big_txt').animate({opacity: 1}, 20000 * 1 / effectSpeed);
--- a/web/static/res/js/incmosaic.js Tue Dec 11 19:49:17 2012 +0100
+++ b/web/static/res/js/incmosaic.js Tue Dec 11 21:13:42 2012 +0100
@@ -89,18 +89,20 @@
this.startTime = new Date().getTime();
};
- this.goEffect = function()
+ this.UnpauseEffect = function(go)
{
- this.waitStartEffectGo = false;
+ this.waitStartEffectGo = !go;
};
this.init = function()
{
- // Init canvas objects
- this.canvas = document.getElementById(this.canvasId );
- this.ctx = this.canvas.getContext('2d');
- this.ctx.fillStyle = "#000000";
- this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
+ if (this.canvas === undefined || this.canvas === null) {
+ // Init canvas objects
+ this.canvas = document.getElementById(this.canvasId );
+ this.ctx = this.canvas.getContext('2d');
+ this.ctx.fillStyle = "#000000";
+ this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
+ }
};
this.registerPreNewCanvasSize = function(newCanvasWidth, newCanvasHeight)
@@ -209,13 +211,17 @@
}
if (!effectsContinue) {
+ if (this.endEffecFunc != undefined && this.endEffecFunc != null) {
+ // Call the end callback
+ var func = this.endEffecFunc;
+ if (!this.loop) {
+ this.endEffecFunc = null;
+ }
+ func();
+ }
if (this.loop) {
// The effect loop
this.setNewEffect();
- } else if (this.endEffecFunc != undefined && this.endEffecFunc != null) {
- // Call the end callback
- this.endEffecFunc();
- this.endEffecFunc = null;
}
}
};