# HG changeset patch # User Edwin Razafimahatratra # Date 1355256822 -3600 # Node ID f7bfdc49982bf063351bed8eb00a52081b4a76ca # Parent f905a56cc7e69d58db173a97fbff3d41f96f9ec5 ecrant choix unique diff -r f905a56cc7e6 -r f7bfdc49982b web/choix.html --- 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); }); diff -r f905a56cc7e6 -r f7bfdc49982b web/choix_1.html --- 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 @@ - - - - - The End - @todo - - - - - - - - - - - - -
- -
- -
- - -
- -
-
- - - - - - - - - - - - - \ No newline at end of file diff -r f905a56cc7e6 -r f7bfdc49982b web/static/res/css/style_1024.css --- 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; } /*----------------------------------------------*/ diff -r f905a56cc7e6 -r f7bfdc49982b web/static/res/js/incchoice.js --- 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); diff -r f905a56cc7e6 -r f7bfdc49982b web/static/res/js/incmosaic.js --- 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; } } };