From 3faf647a76895b78c31eab3eadf559b6f78f6dd6 Mon Sep 17 00:00:00 2001 From: Valvin Date: Sun, 17 Sep 2017 17:47:31 +0200 Subject: [PATCH 1/9] change canvas size automatically depending the client screen resolution change some css rename index.php to index.html fix hover issue --- comicgen.js | 35 +++++++++++----- gege.css | 10 ++--- index.php | 116 ---------------------------------------------------- 3 files changed, 29 insertions(+), 132 deletions(-) delete mode 100644 index.php diff --git a/comicgen.js b/comicgen.js index ffb6c1d..6853eb8 100644 --- a/comicgen.js +++ b/comicgen.js @@ -1,10 +1,13 @@ var d = document; var cg = {}; -var c = $('#c')[0]; +var w = window.innerWidth * 0.8; +var h = window.innerHeight * 0.8;; +console.log('size : ' + w + ' x ' + h); +var canvas = $('#c'); +canvas.attr('width',w).attr('height',h); +var c = canvas[0]; var ctx = c.getContext('2d'); var scene = new RB.Scene(c); -var w = c.width; -var h = c.height; var fontFamily = "Domestic Manners, Arial, helvetica, sans serif"; var pop = new Audio('pop.ogg'); var currentObj = null; @@ -68,9 +71,10 @@ d.onmousewheel = function(mw){ }; cg.hoverdiv = function(e,divid){ - - var left = e.clientX + "px"; - var top = e.clientY + "px"; + var x = e.clientX + 25; + var y = e.clientY ; + var left = x + "px"; + var top = y + "px"; var div = document.getElementById(divid); @@ -81,21 +85,23 @@ cg.hoverdiv = function(e,divid){ return false; } cg.sourceSwap = function (e) { - var img_mini = $(this); - var img_id = parseInt(img_mini.data('src-id')); + var div_mini = $(this); + console.log(div_mini) + var img_id = parseInt(div_mini.data('src-id')); var img_url = toonUrls[img_id]; - console.log(img_url) $("#bigImg").attr('src','toons/' + img_url); cg.hoverdiv(e,"focusImg") } cg.buildMinis = function(){ var buffer = ''; + var divString = "
"; var imgString = "toons"; var link = ""; for(var i=0; i < miniUrls.length; i++){ + buffer += divString.replace(/IMG_ID/,i); buffer += link.replace(/IMG_URL/, toonUrls[i]); - buffer += imgString.replace(/IMG_URL/, miniUrls[i]).replace(/IMG_ID/, i) + ''; + buffer += imgString.replace(/IMG_URL/, miniUrls[i]).replace(/IMG_ID/, i) + '
'; } lib.append(buffer); @@ -103,7 +109,7 @@ cg.buildMinis = function(){ //lib.append( $('#textTool').clone() ); $('#menuContainer').append( $('#instructs').clone() ); $(function () { - $('img.rc').hover(cg.sourceSwap, cg.sourceSwap); + $('div.himg').hover(cg.sourceSwap, cg.sourceSwap); }); } @@ -174,6 +180,13 @@ cg.createTextFromInput = function(e){ cg.saveImage = function(){ var data = c.toDataURL('png'); + // $.ajax({ + // type: "POST", + // url: 'https://lut.im', + // data: data, + // success: function(d){console.log(d);}, + // dataType: 'json' + // }); var win = window.open(); var b = win.document.body; var img = new Image(); diff --git a/gege.css b/gege.css index 8c04fc6..3d669c1 100644 --- a/gege.css +++ b/gege.css @@ -87,10 +87,10 @@ color:#000; #wrapper { -width: 1052px; -margin:0 auto; -margin-top: 60px; -height: 602px; +width: auto; +margin:0; +margin-top: 30px; +height: auto; background-color: #d5b578; border:7px solid rgb(213, 181, 120); box-shadow:0 3px 10px black; @@ -212,7 +212,7 @@ padding: 0; footer { -margin-top: 50px; +margin-top: 10px; width: 100%; text-align: center; color: #273740; diff --git a/index.php b/index.php deleted file mode 100644 index 2363361..0000000 --- a/index.php +++ /dev/null @@ -1,116 +0,0 @@ - - - - - - - -GéGé, Geektionnerd Generator - - - - -
- - - -
- - -
-
T
- -
-

Instructions

-
    -
  • Flêche bas: rétrécir
    • -
  • Flêche haut: agrandir
    • -
  • Gauche/Droite: retournement horizontal
    • -
  • Del: effacer l'objet
    • -
- -
-
- -

Enregistrer votre image

-

Redimensionner la fenêtre

-

800x600 | - 640x480 | - 320x240

-
- - -
- - Le générateur du GKND a besoin d'un navigateur récent et de javascript pour fonctionner. - -
-
-

Le Geektionnerd et l'intégralité de son contenu (images et textes) sont l'oeuvre de Simon "Gee" Giraudot et diffusés sous licence Creative Commons By-Sa.
- Découvrez le Geektionnerd sur http://geektionnerd.net/ et en album.
- - Gégé est une adaptation de Comic Gen de Chamb réalisée par Cyrille Largillier pour Framasoft.

-
- - - - -
- - From 7827fe5ec72a878672a16937977eaa02d49758ca Mon Sep 17 00:00:00 2001 From: Valvin Date: Sun, 17 Sep 2017 22:25:03 +0200 Subject: [PATCH 2/9] add image using url (all image format supported by canvas) add custom canvas size --- comicgen.js | 17 ++++++++++++++--- gege.css | 7 ++++++- 2 files changed, 20 insertions(+), 4 deletions(-) diff --git a/comicgen.js b/comicgen.js index 6853eb8..26f62c9 100644 --- a/comicgen.js +++ b/comicgen.js @@ -1,8 +1,7 @@ var d = document; var cg = {}; -var w = window.innerWidth * 0.8; -var h = window.innerHeight * 0.8;; -console.log('size : ' + w + ' x ' + h); +var w = parseInt(window.innerWidth * 0.8); +var h = parseInt(window.innerHeight * 0.8); var canvas = $('#c'); canvas.attr('width',w).attr('height',h); var c = canvas[0]; @@ -11,6 +10,8 @@ var scene = new RB.Scene(c); var fontFamily = "Domestic Manners, Arial, helvetica, sans serif"; var pop = new Audio('pop.ogg'); var currentObj = null; +$('#newWidth').val(w); +$('#newHeight').val(h); scene.add( scene.rect(w, h, 'white') ); scene.update(); @@ -177,7 +178,17 @@ cg.createTextFromInput = function(e){ pop.play(); } } +cg.createImageFromInput= function(e){ + var key = e.keyCode || e.which; + var imgUrl = $('#newImgUrl').val(); + + if(key == 13){ + + cg.createImage(imgUrl); + $('#newImgUrl').val(''); + } +} cg.saveImage = function(){ var data = c.toDataURL('png'); // $.ajax({ diff --git a/gege.css b/gege.css index 3d669c1..4c9a40b 100644 --- a/gege.css +++ b/gege.css @@ -53,7 +53,7 @@ margin: 0; padding: 0; } -h1, h2 +h1, h2, h3 { text-transform: uppercase; background-color: transparent; @@ -243,3 +243,8 @@ text-decoration: underline; position: fixed; } +#newWidth, #newHeight{ + + width: 70px ; +display : inline; +} From 7ed8c473987bfcd8daf9db07d61e70afa3c53f7b Mon Sep 17 00:00:00 2001 From: Valvin Date: Mon, 18 Sep 2017 13:01:31 +0200 Subject: [PATCH 3/9] add crossOrigin parameter on image to fix PNG creation --- ragaboom.min.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ragaboom.min.js b/ragaboom.min.js index d984778..95483a7 100644 --- a/ragaboom.min.js +++ b/ragaboom.min.js @@ -4,7 +4,7 @@ c.length;i++)this.add(c[i])};this.remove=function(c){for(var c=c.getId(),i=d.len e=h+i;e<0&&(e=0);e>=a&&(e=a-1);a=d[h];d[h]=d[e];d[e]=a};getObjectById=function(c){for(var a=d.length,f=0;f=0;a--){var f=r[a];if(f.checkRange(RB.xPos(c),RB.yPos(c))){f.onmousedown(c);t=f;currentObjectIndex=a;A=RB.xPos(c)-t.x;l=RB.yPos(c)-t.y;v=!0;break}}j.onmousedown(c)};b.onmouseup=function(c){v=!1;j.onmouseup(c)};n.onkeydown= function(c){B(c,!0);j.onkeydown(c)};n.onkeyup=function(c){B(c,!1);j.onkeyup(c)};this.getObjectSize=function(){return d.length};this.getObj=function(c){return d[c]};this.rect=function(c,a,f,h,e){var h=h||this.genID(),h=RB.createCanvas(c,a,h),g=h.getContext("2d");if(f)g.fillStyle=RB.getFS(f,g,a),g.fillRect(0,0,c,a);if(e)f=e.lineWidth||1,g.lineWidth=e.lineWidth,g.strokeStyle=e.strokeStyle,g.rect(0+f,0+f,c-f-f,a-f-f),g.stroke();return rectObj=new RB.Obj(h,this.ctx)};this.image=function(c,i,f){var h=new Image, -e=this,g=null;h.onload=function(){f=f||e.genID();g=RB.createCanvas(h.width,h.height,f);g.getContext("2d").drawImage(this,0,0);a++;var c=new RB.Obj(g,e.ctx);i(c)};h.src=c;x++};this.loadImage=function(c,i,f){var h=new Image,e=this,g=null;h.onload=function(){i=i||e.genID();g=RB.createCanvas(h.width,h.height,i);g.getContext("2d").drawImage(this,0,0);a++;f(g)};h.src=c;x++};this.imagePattern=function(c,i,f,h,e){var g=new Image,b=this;g.onload=function(){e=e||b.genID();var c=RB.createCanvas(i,f,e).getContext("2d"), +e=this,g=null;h.crossOrigin = "anonymous";h.onload=function(){f=f||e.genID();g=RB.createCanvas(h.width,h.height,f);g.getContext("2d").drawImage(this,0,0);a++;var c=new RB.Obj(g,e.ctx);i(c)};h.src=c;x++};this.loadImage=function(c,i,f){var h=new Image,e=this,g=null;h.onload=function(){i=i||e.genID();g=RB.createCanvas(h.width,h.height,i);g.getContext("2d").drawImage(this,0,0);a++;f(g)};h.src=c;x++};this.imagePattern=function(c,i,f,h,e){var g=new Image,b=this;g.onload=function(){e=e||b.genID();var c=RB.createCanvas(i,f,e).getContext("2d"), d=c.createPattern(g,h);c.fillStyle=d;c.fillRect(0,0,i,f);a++;a==x&&b.doAfterLoad()};g.src=c;x++};this.roundRect=function(c,a,f,h,e,g){var e=e||this.genID(),e=RB.createCanvas(c,a,e),b=e.getContext("2d");b.beginPath();b.moveTo(0+f,0);b.lineTo(c+0-f,0);b.quadraticCurveTo(c+0,0,c+0,0+f);b.lineTo(c+0,a+0-f);b.quadraticCurveTo(c+0,0+a,c+0-f,0+a);b.lineTo(0+f,0+a);b.quadraticCurveTo(0,0+a,0,0+a-f);b.lineTo(0,0+f);b.quadraticCurveTo(0,0,0+f,0);b.closePath();if(h)b.fillStyle=RB.getFS(h,b,a),b.fill();if(g)b.lineWidth= g.lineWidth,b.strokeStyle=g.strokeStyle,b.stroke();return new RB.Obj(e,this.ctx)};this.text=function(a,b,f,h,e){var g=RB.getTextBuffer(),e=e||this.genID();g.innerHTML=a;g.style.fontFamily=b;g.style.fontSize=f+"px";var d=RB.el(e);d?(e=d.getContext("2d"),d.width=g.offsetWidth,d.height=g.offsetHeight+15,e.clearRect(0,0,g.offsetWidth,g.offsetHeight+15)):(d=RB.createCanvas(g.offsetWidth,g.offsetHeight+15,e),e=d.getContext("2d"));e.fillStyle=RB.getFS(h,e,g.offsetHeight+25);e.font="normal "+f+"px "+b;e.fillText(a, 0,g.offsetHeight+5);return new RB.Obj(d,this.ctx)};this.start=function(){w=!0;this.animate()};this.stop=function(){w=!1};this.toggleStart=function(){w?this.stop():this.start()};this.onLoop=function(){};this.runOnce=function(){this.ctx.restore();for(var a=d.length,b=q.length,f=0;f Date: Mon, 18 Sep 2017 13:02:24 +0200 Subject: [PATCH 4/9] add index.html --- index.html | 118 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 118 insertions(+) create mode 100644 index.html diff --git a/index.html b/index.html new file mode 100644 index 0000000..cfd0c3c --- /dev/null +++ b/index.html @@ -0,0 +1,118 @@ + + + + + + + +GéGé, Geektionnerd Generator + + + + +
+ + + +
+ + +
+
T
+ +
+

Instructions

+
    +
  • Flêche bas: rétrécir
    • +
  • Flêche haut: agrandir
    • +
  • Gauche/Droite: retournement horizontal
    • +
  • Del: effacer l'objet
    • +
+ +
+
+ +

Enregistrer votre image

+

Redimensionner la fenêtre

+
+

x

+
+

Redimensionner

+
+ + +
+ + Le générateur du GKND a besoin d'un navigateur récent et de javascript pour fonctionner. + +
+
+

Le Geektionnerd et l'intégralité de son contenu (images et textes) sont l'oeuvre de Simon "Gee" Giraudot et diffusés sous licence Creative Commons By-Sa.
+ Découvrez le Geektionnerd sur http://geektionnerd.net/ et en album.
+ + Gégé est une adaptation de Comic Gen de Chamb réalisée par Cyrille Largillier pour Framasoft.

+
+ + + + +
+ + From c9806da48f53750cfd367461d283dfa520be514f Mon Sep 17 00:00:00 2001 From: Valvin Date: Mon, 18 Sep 2017 21:14:29 +0200 Subject: [PATCH 5/9] remove bad log --- comicgen.js | 1 - 1 file changed, 1 deletion(-) diff --git a/comicgen.js b/comicgen.js index 26f62c9..b4a7bf0 100644 --- a/comicgen.js +++ b/comicgen.js @@ -87,7 +87,6 @@ cg.hoverdiv = function(e,divid){ } cg.sourceSwap = function (e) { var div_mini = $(this); - console.log(div_mini) var img_id = parseInt(div_mini.data('src-id')); var img_url = toonUrls[img_id]; $("#bigImg").attr('src','toons/' + img_url); From dc05f972800da90c27793df61797e11cf1b2a474 Mon Sep 17 00:00:00 2001 From: Valvin Date: Tue, 19 Sep 2017 22:35:25 +0200 Subject: [PATCH 6/9] Remove remote url feature and replace it with upload file feature --- comicgen.js | 25 +++++++++++++++++-------- gege.css | 9 +++++++++ index.html | 11 ++++++----- ragaboom.min.js | 2 +- 4 files changed, 33 insertions(+), 14 deletions(-) diff --git a/comicgen.js b/comicgen.js index b4a7bf0..7ddebab 100644 --- a/comicgen.js +++ b/comicgen.js @@ -177,16 +177,25 @@ cg.createTextFromInput = function(e){ pop.play(); } } -cg.createImageFromInput= function(e){ +cg.createImageFromInput= function(t){ - var key = e.keyCode || e.which; - var imgUrl = $('#newImgUrl').val(); + var fileList = t.files; /* now you can work with the file list */ + var imageType = /image.*/; + var nBytes = 0; + + for (var i = 0; i < fileList.length; i++) + { + + var file = fileList[i]; + nBytes += file.size; + if (!file.type.match(imageType)) + { + continue; + } + imgUrl = window.URL.createObjectURL(file); + cg.createImage(imgUrl); + } - if(key == 13){ - - cg.createImage(imgUrl); - $('#newImgUrl').val(''); - } } cg.saveImage = function(){ var data = c.toDataURL('png'); diff --git a/gege.css b/gege.css index 4c9a40b..374f965 100644 --- a/gege.css +++ b/gege.css @@ -248,3 +248,12 @@ text-decoration: underline; width: 70px ; display : inline; } +.upload{ + margin-top: 20px; + margin-bottom: 20px; + +} + +input.file { + display:none; +} diff --git a/index.html b/index.html index cfd0c3c..cdf4615 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,5 @@ - + @@ -70,13 +70,14 @@
-
-
+
+ +

Télécharger une image

+
T
-

Instructions

    @@ -99,7 +100,7 @@
    - + Le générateur du GKND a besoin d'un navigateur récent et de javascript pour fonctionner.
    diff --git a/ragaboom.min.js b/ragaboom.min.js index 95483a7..d984778 100644 --- a/ragaboom.min.js +++ b/ragaboom.min.js @@ -4,7 +4,7 @@ c.length;i++)this.add(c[i])};this.remove=function(c){for(var c=c.getId(),i=d.len e=h+i;e<0&&(e=0);e>=a&&(e=a-1);a=d[h];d[h]=d[e];d[e]=a};getObjectById=function(c){for(var a=d.length,f=0;f=0;a--){var f=r[a];if(f.checkRange(RB.xPos(c),RB.yPos(c))){f.onmousedown(c);t=f;currentObjectIndex=a;A=RB.xPos(c)-t.x;l=RB.yPos(c)-t.y;v=!0;break}}j.onmousedown(c)};b.onmouseup=function(c){v=!1;j.onmouseup(c)};n.onkeydown= function(c){B(c,!0);j.onkeydown(c)};n.onkeyup=function(c){B(c,!1);j.onkeyup(c)};this.getObjectSize=function(){return d.length};this.getObj=function(c){return d[c]};this.rect=function(c,a,f,h,e){var h=h||this.genID(),h=RB.createCanvas(c,a,h),g=h.getContext("2d");if(f)g.fillStyle=RB.getFS(f,g,a),g.fillRect(0,0,c,a);if(e)f=e.lineWidth||1,g.lineWidth=e.lineWidth,g.strokeStyle=e.strokeStyle,g.rect(0+f,0+f,c-f-f,a-f-f),g.stroke();return rectObj=new RB.Obj(h,this.ctx)};this.image=function(c,i,f){var h=new Image, -e=this,g=null;h.crossOrigin = "anonymous";h.onload=function(){f=f||e.genID();g=RB.createCanvas(h.width,h.height,f);g.getContext("2d").drawImage(this,0,0);a++;var c=new RB.Obj(g,e.ctx);i(c)};h.src=c;x++};this.loadImage=function(c,i,f){var h=new Image,e=this,g=null;h.onload=function(){i=i||e.genID();g=RB.createCanvas(h.width,h.height,i);g.getContext("2d").drawImage(this,0,0);a++;f(g)};h.src=c;x++};this.imagePattern=function(c,i,f,h,e){var g=new Image,b=this;g.onload=function(){e=e||b.genID();var c=RB.createCanvas(i,f,e).getContext("2d"), +e=this,g=null;h.onload=function(){f=f||e.genID();g=RB.createCanvas(h.width,h.height,f);g.getContext("2d").drawImage(this,0,0);a++;var c=new RB.Obj(g,e.ctx);i(c)};h.src=c;x++};this.loadImage=function(c,i,f){var h=new Image,e=this,g=null;h.onload=function(){i=i||e.genID();g=RB.createCanvas(h.width,h.height,i);g.getContext("2d").drawImage(this,0,0);a++;f(g)};h.src=c;x++};this.imagePattern=function(c,i,f,h,e){var g=new Image,b=this;g.onload=function(){e=e||b.genID();var c=RB.createCanvas(i,f,e).getContext("2d"), d=c.createPattern(g,h);c.fillStyle=d;c.fillRect(0,0,i,f);a++;a==x&&b.doAfterLoad()};g.src=c;x++};this.roundRect=function(c,a,f,h,e,g){var e=e||this.genID(),e=RB.createCanvas(c,a,e),b=e.getContext("2d");b.beginPath();b.moveTo(0+f,0);b.lineTo(c+0-f,0);b.quadraticCurveTo(c+0,0,c+0,0+f);b.lineTo(c+0,a+0-f);b.quadraticCurveTo(c+0,0+a,c+0-f,0+a);b.lineTo(0+f,0+a);b.quadraticCurveTo(0,0+a,0,0+a-f);b.lineTo(0,0+f);b.quadraticCurveTo(0,0,0+f,0);b.closePath();if(h)b.fillStyle=RB.getFS(h,b,a),b.fill();if(g)b.lineWidth= g.lineWidth,b.strokeStyle=g.strokeStyle,b.stroke();return new RB.Obj(e,this.ctx)};this.text=function(a,b,f,h,e){var g=RB.getTextBuffer(),e=e||this.genID();g.innerHTML=a;g.style.fontFamily=b;g.style.fontSize=f+"px";var d=RB.el(e);d?(e=d.getContext("2d"),d.width=g.offsetWidth,d.height=g.offsetHeight+15,e.clearRect(0,0,g.offsetWidth,g.offsetHeight+15)):(d=RB.createCanvas(g.offsetWidth,g.offsetHeight+15,e),e=d.getContext("2d"));e.fillStyle=RB.getFS(h,e,g.offsetHeight+25);e.font="normal "+f+"px "+b;e.fillText(a, 0,g.offsetHeight+5);return new RB.Obj(d,this.ctx)};this.start=function(){w=!0;this.animate()};this.stop=function(){w=!1};this.toggleStart=function(){w?this.stop():this.start()};this.onLoop=function(){};this.runOnce=function(){this.ctx.restore();for(var a=d.length,b=q.length,f=0;f Date: Tue, 19 Sep 2017 22:48:37 +0200 Subject: [PATCH 7/9] change title image upload --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index cdf4615..4945504 100644 --- a/index.html +++ b/index.html @@ -72,7 +72,7 @@
    -

    Télécharger une image

    +

    Importer une image

From 5b77366f61ea4ad2147142c0873d7b16283e447d Mon Sep 17 00:00:00 2001 From: Valvin Date: Thu, 21 Sep 2017 12:52:38 +0200 Subject: [PATCH 8/9] separate appcache js script detection --- gege.js | 52 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 52 insertions(+) create mode 100644 gege.js diff --git a/gege.js b/gege.js new file mode 100644 index 0000000..5337e52 --- /dev/null +++ b/gege.js @@ -0,0 +1,52 @@ + +checkCacheFunction = function() { + var webappCache = window.applicationCache; + + function loaded() + { + //var h1El = document.querySelector("h1"); + var connectionStatus = ((navigator.onLine) ? 'online' : 'offline'); + //h1El.textContent = h1El.textContent + " - currently: " + connectionStatus; + + switch(webappCache.status) + { + case 0: + console.log("Cache status: Uncached"); + break; + case 1: + console.log("Cache status: Idle"); + break; + case 2: + console.log("Cache status: Checking"); + break; + case 3: + console.log("Cache status: Downloading"); + break; + case 4: + console.log("Cache status: Updateready"); + break; + case 5: + console.log("Cache status: Obsolete"); + break; + } + + } + + function updateCache() + { + webappCache.swapCache(); + console.log("Cache has been updated due to a change found in the manifest"); + } + + function errorCache() + { + console.log("You're either offline or something has gone horribly wrong."); + } + + window.addEventListener("load", loaded, false); + webappCache.addEventListener("updateready", updateCache, false); + webappCache.addEventListener("error", errorCache, false); + +} + +checkCacheFunction(); From 612cf594fbb8ba80612ad2cb7a23cfc8829adf29 Mon Sep 17 00:00:00 2001 From: Valvin Date: Thu, 21 Sep 2017 12:53:01 +0200 Subject: [PATCH 9/9] separate appcache js script detection --- index.html | 52 +--------------------------------------------------- 1 file changed, 1 insertion(+), 51 deletions(-) diff --git a/index.html b/index.html index 4945504..b495aec 100644 --- a/index.html +++ b/index.html @@ -3,57 +3,6 @@ - GéGé, Geektionnerd Generator @@ -113,6 +62,7 @@ +