Commit 8a16d506 authored by Luc Didry's avatar Luc Didry
Browse files

Fix #17 : Allow to add a rick face on top of the sticker

parent ace3f203
......@@ -28,6 +28,7 @@
<a class="dropdown-item" href="#" data-setting="set-fonts">Fonts</a>
<a class="dropdown-item" href="#" data-setting="set-positions">Positions</a>
<a class="dropdown-item" href="#" data-setting="set-img-size">Image size</a>
<a class="dropdown-item" href="#" data-setting="set-rick">Rick</a>
<a class="dropdown-item" href="#" data-setting="gallery">Gallery</a>
</div>
</li>
......@@ -86,6 +87,9 @@
<li class="nav-item">
<a class="nav-link" href="#" data-setting="set-img-size">Image size</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" data-setting="set-rick">Rick</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" data-setting="gallery">Gallery</a>
</li>
......@@ -323,7 +327,7 @@
<div class="col">
<div class="row">
<div class="form-check col text-center">
<label class="form-check-label">
<label class="form-check-label glitter">
<input id="add-glitter" type="checkbox" class="form-check-input">
<span>Add glitter</span>
</label>
......@@ -478,6 +482,44 @@
</div>
</div>
</div>
<div class="row d-none" id="set-rick">
<div class="col">
<div class="row">
<div class="form-check col text-center">
<label class="form-check-label rick">
<input id="add-rick" type="checkbox" class="form-check-input">
<span>Add Rick face</span>
</label>
</div>
</div>
<div class="row">
<label for="rick-size" class="col-sm-12 col-md-8">Rick face size</label>
<div class="col-sm-12 col-md-4 input-group">
<input id="rick-size" type="number" min="1" value="100" class="form-control">
<div class="input-group-addon">%</div>
</div>
</div>
<div class="row">
<label for="rick-x" class="col-sm-12 col-md-8">Rick face x position</label>
<div class="col-sm-12 col-md-4">
<input id="rick-x" type="number" min="0" value="0" class="form-control">
</div>
</div>
<div class="row">
<label for="rick-y" class="col-sm-12 col-md-8">Rick face y position</label>
<div class="col-sm-12 col-md-4">
<input id="rick-y" type="number" min="0" value="0" class="form-control">
</div>
</div>
<div class="row">
<label for="rick-rad" class="col-sm-12 col-md-8">Rick face rotation</label>
<div class="col-sm-12 col-md-4 input-group">
<input id="rick-rad" type="number" min="-359" max="359" value="0" class="form-control">
<div class="input-group-addon">°</div>
</div>
</div>
</div>
</div>
</div>
<div class="col">
<div class="row" id="canvas-container">
......
......@@ -116,7 +116,7 @@ function translate(userLang, languages) {
});
['wemake', 'porn', 'filename', 'corners', 'bg-type', 'bgu-color', 'bgr-color', 'egr-color',
'gr-orientation', 'bg-img', 'custom-img', 'custom-x', 'custom-y', 'custom-size', 'border-thickness',
'img-width', 'img-height', 'custom-img-url'
'img-width', 'img-height', 'custom-img-url', 'rick-size', 'rick-x', 'rick-y', 'rick-rad'
].forEach(function(e) {
if (locale[e] !== undefined) {
$('label[for="'+e+'"]').text(locale[e]);
......@@ -129,7 +129,7 @@ function translate(userLang, languages) {
$('#corners option[value="0"]').text(locale['corners-square']);
}
if (locale['add-glitter'] !== undefined) {
$('.form-check-label span').text(locale['add-glitter']);
$('.glitter span').text(locale['add-glitter']);
}
['plain', 'gradient', 'rainbow', 'img', 'lr', 'rl', 'tb', 'bt', 'r', 'beer', 'glitter',
'rainbow-flag', 'sky', 'field', 'bridge', 'regular', 'bold', 'italic', 'italic bold',
......@@ -174,6 +174,9 @@ function translate(userLang, languages) {
if (locale['download-clic'] !== undefined) {
downloadClic = locale['download-clic'];
}
if (locale['add-rick'] !== undefined) {
$('.rick span').text(locale['add-rick']);
}
}
});
}
......@@ -236,7 +239,7 @@ function getParameters() {
$('#bgu-color').val(url.searchParams.get('co'));
}
if (url.searchParams.get('gli') !== null) {
$('#add-glitter').prop('checked',(url.searchParams.get('gli') === 'true') ? true : false);
$('#add-glitter').prop('checked', (url.searchParams.get('gli') === 'true') ? true : false);
}
if (url.searchParams.get('bgt') !== null) {
$('#bg-type').val(url.searchParams.get('bgt'));
......@@ -293,6 +296,21 @@ function getParameters() {
$('#custom-img-url').val(url.searchParams.get('bgu'));
handleImageURL(false);
}
if (url.searchParams.get('r') !== null) {
$('#add-rick').prop('checked', (url.searchParams.get('r') === 'true') ? true : false);
}
if (url.searchParams.get('rx') !== null) {
$('#rick-x').val(url.searchParams.get('rx'));
}
if (url.searchParams.get('ry') !== null) {
$('#rick-y').val(url.searchParams.get('ry'));
}
if (url.searchParams.get('rs') !== null) {
$('#rick-size').val(url.searchParams.get('rs'));
}
if (url.searchParams.get('rr') !== null) {
$('#rick-rad').val(url.searchParams.get('rr'));
}
}
function bindEvents() {
......@@ -399,7 +417,7 @@ function bindEvents() {
if (t.data('setting') === 'hide-settings') {
hide('gallery');
show('main-tool');
['settings', 'set-corner-shape', 'set-colors', 'set-fonts', 'set-bg', 'set-positions', 'set-img-size'].forEach(function(e) {
['settings', 'set-corner-shape', 'set-colors', 'set-fonts', 'set-bg', 'set-positions', 'set-img-size', 'set-rick'].forEach(function(e) {
hide(e);
});
} else if (t.data('setting') === 'gallery') {
......@@ -409,7 +427,7 @@ function bindEvents() {
} else {
hide('gallery');
show('main-tool');
['set-corner-shape', 'set-colors', 'set-fonts', 'set-bg', 'set-positions', 'set-img-size'].forEach(function(e) {
['set-corner-shape', 'set-colors', 'set-fonts', 'set-bg', 'set-positions', 'set-img-size', 'set-rick'].forEach(function(e) {
if (e !== t.data('setting')) {
hide(e);
} else {
......@@ -638,6 +656,11 @@ function reset() {
$('#img-height').val(400);
$('#border-thickness').val(20);
$('#custom-img-url').val(null);
$('#add-rick').prop('checked', false);
$('#rick-x').val(0);
$('#rick-y').val(0);
$('#rick-size').val(100);
$('#rick-rad').val(0);
show('bg-color');
hide('gradient-settings');
......@@ -679,6 +702,11 @@ function refreshText() {
var y = $('#custom-y').val();
var s = $('#custom-size').val();
var bgu = ($('#custom-img-url')[0].checkValidity()) ? $('#custom-img-url').val() : '';
var r = $('#add-rick').prop('checked');
var rx = $('#rick-x').val();
var ry = $('#rick-y').val();
var rs = $('#rick-size').val();
var rr = $('#rick-rad').val();
var width = $('#img-width').val();
var height = $('#img-height').val();
......@@ -704,13 +732,13 @@ function refreshText() {
window.history.pushState("change", "WemaWema", createUrl(url,
w, wx, wy, ws, wc, wa, wf, wfs,
p, px, py, ps, pc, pa, pf, pfs,
co, ra, gli, bgt, rc, bgr, egr, or, bgi, cor, bth, width, height, x, y, s, bgu)
co, ra, gli, bgt, rc, bgr, egr, or, bgi, cor, bth, width, height, x, y, s, bgu, r, rx, ry, rs, rr)
);
drawCtx(false, ctx, rc, ra, ws, wc, wa, wf, wfs, w, wx, wy, ps, pc, pa, pf, pfs, p, px, py, gli, width, height, bth, bgt, co, cor, bgi, s, bgr, egr, or, x, y, bgu);
drawCtx(false, ctx, rc, ra, ws, wc, wa, wf, wfs, w, wx, wy, ps, pc, pa, pf, pfs, p, px, py, gli, width, height, bth, bgt, co, cor, bgi, s, bgr, egr, or, x, y, bgu, r, rx, ry, rs, rr);
}
function drawCtx(inGallery, ctx, rc, ra, ws, wc, wa, wf, wfs, w, wx, wy, ps, pc, pa, pf, pfs, p, px, py, gli, width, height, bth, bgt, co, cor, bgi, s, bgr, egr, or, x, y, bgu) {
function drawCtx(inGallery, ctx, rc, ra, ws, wc, wa, wf, wfs, w, wx, wy, ps, pc, pa, pf, pfs, p, px, py, gli, width, height, bth, bgt, co, cor, bgi, s, bgr, egr, or, x, y, bgu, r, rx, ry, rs, rr) {
// cleanup
ctx.clearRect(0, 0, width, height);
......@@ -760,11 +788,11 @@ function drawCtx(inGallery, ctx, rc, ra, ws, wc, wa, wf, wfs, w, wx, wy, ps, pc,
window.history.pushState("change", "WemaWema", createUrl(url,
w, wx, wy, ws, wc, wa, wf, wfs,
p, px, py, ps, pc, pa, pf, pfs,
co, ra, gli, bgt, rc, bgr, egr, or, bgi, cor, bth, width, height, x, y, s, bgu)
co, ra, gli, bgt, rc, bgr, egr, or, bgi, cor, bth, width, height, x, y, s, bgu, r, rx, ry, rs, rr)
);
}
ctx.drawImage(customImg, 0, 0, iw, ih, x, y, iw*sizer, ih*sizer);
drawOver(ctx, rc, ra, ws, wc, wa, wf, wfs, w, wx, wy, ps, pc, pa, pf, pfs, p, px, py, gli, width, height, bth);
drawOver(ctx, rc, ra, ws, wc, wa, wf, wfs, w, wx, wy, ps, pc, pa, pf, pfs, p, px, py, gli, width, height, bth, r, rx, ry, rs, rr);
} else {
if (bgi === '' || (bgi === 'custom' && (bgu === undefined || bgu === null || bgu === ''))) {
bgi = 'beer';
......@@ -800,11 +828,11 @@ function drawCtx(inGallery, ctx, rc, ra, ws, wc, wa, wf, wfs, w, wx, wy, ps, pc,
window.history.pushState("change", "WemaWema", createUrl(url,
w, wx, wy, ws, wc, wa, wf, wfs,
p, px, py, ps, pc, pa, pf, pfs,
co, ra, gli, bgt, rc, bgr, egr, or, bgi, cor, bth, width, height, x, y, s, bgu)
co, ra, gli, bgt, rc, bgr, egr, or, bgi, cor, bth, width, height, x, y, s, bgu, r, rx, ry, rs, rr)
);
}
ctx.drawImage(background, 0, 0, iw, ih, x, y, iw*sizer, ih*sizer);
drawOver(ctx, rc, ra, ws, wc, wa, wf, wfs, w, wx, wy, ps, pc, pa, pf, pfs, p, px, py, gli, width, height, bth);
drawOver(ctx, rc, ra, ws, wc, wa, wf, wfs, w, wx, wy, ps, pc, pa, pf, pfs, p, px, py, gli, width, height, bth, r, rx, ry, rs, rr);
}
}
return;
......@@ -830,13 +858,13 @@ function drawCtx(inGallery, ctx, rc, ra, ws, wc, wa, wf, wfs, w, wx, wy, ps, pc,
}
roundRect(ctx, 0, 0, width, height, parseInt(cor), true, false);
drawOver(ctx, rc, ra, ws, wc, wa, wf, wfs, w, wx, wy, ps, pc, pa, pf, pfs, p, px, py, gli, width, height, bth);
drawOver(ctx, rc, ra, ws, wc, wa, wf, wfs, w, wx, wy, ps, pc, pa, pf, pfs, p, px, py, gli, width, height, bth, r, rx, ry, rs, rr);
}
/*
* Drawing functions
*/
function drawOver(ctx, rc, ra, ws, wc, wa, wf, wfs, w, wx, wy, ps, pc, pa, pf, pfs, p, px, py, gli, width, height, bth) {
function drawOver(ctx, rc, ra, ws, wc, wa, wf, wfs, w, wx, wy, ps, pc, pa, pf, pfs, p, px, py, gli, width, height, bth, r, rx, ry, rs, rr) {
// Inside rounded rectangle
if (bth > 0) {
ctx.lineWidth = bth;
......@@ -857,7 +885,32 @@ function drawOver(ctx, rc, ra, ws, wc, wa, wf, wfs, w, wx, wy, ps, pc, pa, pf, p
ctx.fillStyle = colorToRGBA(pc, pa);
ctx.fillText(p, parseInt(px), parseInt(py), (width * 29 / 32));
if (gli) {
if (r) {
var rick = new Image();
rick.src = 'img/Rick.png';
rick.onload = function() {
rx = parseInt(rx);
ry = parseInt(ry);
var rw = rick.width * rs / 100;
var rh = rick.height * rs / 100;
console.log(rw);
console.log(rh);
ctx.translate(rx + (rw / 2), ry + rh / 2);
ctx.rotate(rr * Math.PI / 180);
ctx.drawImage(rick, -(rw / 2), -(rh / 2), rw, rh);
ctx.translate(-(rx + rw / 2), -(ry + rh / 2));
if (gli) {
var glitter = new Image();
glitter.src = 'img/glitter-calc.png';
glitter.onload = function() {
ctx.drawImage(glitter, 0, 0);
$('#svg').html(svg.getSerializedSvg());
}
} else {
$('#svg').html(svg.getSerializedSvg());
}
}
} else if (gli) {
var glitter = new Image();
glitter.src = 'img/glitter-calc.png';
glitter.onload = function() {
......@@ -955,6 +1008,11 @@ function addItem() {
y : $('#custom-y').val(),
s : $('#custom-size').val(),
bgu : $('#custom-img-url').val(),
r : $('#add-rick').prop('checked'),
rx : $('#rick-x').val(),
ry : $('#rick-y').val(),
rs : $('#rick-size').val(),
rr : $('#rick-rad').val(),
};
localStorage.setItem('wemas', JSON.stringify(wemas));
}
......@@ -998,7 +1056,12 @@ function fillGallery() {
c.setAttribute('width', v.width);
c.setAttribute('height', v.height);
var ctx = c.getContext('2d');
drawCtx(true, ctx, v.rc, v.ra, v.ws, v.wc, v.wa, v.wf, v.wfs, v.w, v.wx, v.wy, v.ps, v.pc, v.pa, v.pf, v.pfs, v.p, v.px, v.py, v.gli, v.width, v.height, v.bth, v.bgt, v.co, v.cor, v.bgi, v.s, v.bgr, v.egr, v.org, v.x, v.y, v.bgu);
drawCtx(true, ctx,
v.rc, v.ra, v.ws, v.wc, v.wa, v.wf, v.wfs, v.w, v.wx, v.wy,
v.ps, v.pc, v.pa, v.pf, v.pfs, v.p, v.px, v.py, v.gli,
v.width, v.height, v.bth, v.bgt, v.co, v.cor, v.bgi, v.s,
v.bgr, v.egr, v.org, v.x, v.y, v.bgu, v.r, v.rx, v.ry, v.rs, v.rr
);
d.html(c);
var p = $('<div>');
......@@ -1010,7 +1073,9 @@ function fillGallery() {
var url = createUrl(new URL(window.location),
v.w, v.wx, v.wy, v.ws, v.wc, v.wa, v.wf, v.wfs,
v.p, v.px, v.py, v.ps, v.pc, v.pa, v.pf, v.pfs,
v.co, v.ra, v.gli, v.bgt, v.rc, v.bgr, v.egr, v.or, v.bgi, v.cor, v.bth, v.width, v.height, v.x, v.y, v.s, v.bgu
v.co, v.ra, v.gli, v.bgt, v.rc, v.bgr, v.egr,
v.or, v.bgi, v.cor, v.bth, v.width, v.height,
v.x, v.y, v.s, v.bgu, v.r, v.rx, v.ry, v.rs, v.rr
);
a1.attr('href', url);
a1.text(load);
......@@ -1132,7 +1197,7 @@ function centerText(e) {
}
// create the URL with all the parameters
function createUrl(url, w, wx, wy, ws, wc, wa, wf, wfs, p, px, py, ps, pc, pa, pf, pfs, co, ra, gli, bgt, rc, bgr, egr, or, bgi, cor, bth, width, height, x, y, s, bgu) {
function createUrl(url, w, wx, wy, ws, wc, wa, wf, wfs, p, px, py, ps, pc, pa, pf, pfs, co, ra, gli, bgt, rc, bgr, egr, or, bgi, cor, bth, width, height, x, y, s, bgu, r, rx, ry, rs, rr) {
url.searchParams.set('w', w);
url.searchParams.set('wx', wx);
url.searchParams.set('wy', wy);
......@@ -1166,6 +1231,11 @@ function createUrl(url, w, wx, wy, ws, wc, wa, wf, wfs, p, px, py, ps, pc, pa, p
url.searchParams.set('y', y);
url.searchParams.set('s', s);
url.searchParams.set('bgu', bgu);
url.searchParams.set('r', r);
url.searchParams.set('rx', rx);
url.searchParams.set('ry', ry);
url.searchParams.set('rs', rs);
url.searchParams.set('rr', rr);
return url;
}
This diff is collapsed.
......@@ -74,5 +74,10 @@
"snow": "Snow",
"custom-img-url": "Use an image from the Web",
"custom-img-text": "Custom image",
"download-clic": "Please, right-click on the sticker and select \"Save as\" to download the sticker"
"download-clic": "Please, right-click on the sticker and select \"Save as\" to download the sticker",
"add-rick": "Add Rick face",
"rick-size": "Rick face size",
"rick-x": "Rick face x position",
"rick-y": "Rick face y position",
"rick-rad": "Rick face rotation"
}
......@@ -74,5 +74,10 @@
"snow": "Neige",
"custom-img-url": "Utiliser une image du web",
"custom-img-text": "Image personnalisée",
"download-clic": "Veuillez faire un clic droit sur l’autocollant et sélectionner « Enregistrer l’image sous » pour télécharger l’autocollant"
"download-clic": "Veuillez faire un clic droit sur l’autocollant et sélectionner « Enregistrer l’image sous » pour télécharger l’autocollant",
"add-rick": "Ajouter la tête de Rick",
"rick-size": "Taille de la tête de Rick",
"rick-x": "Abcisse de la tête de Rick",
"rick-y": "Ordonnées de la tête de Rick",
"rick-rad": "Rotation de la tête de Rick"
}
......@@ -74,5 +74,10 @@
"snow": "I am Groot",
"custom-img-url": "I am Groot",
"custom-img-text": "I am Groot",
"download-clic": "I am Groot"
"download-clic": "I am Groot",
"add-rick": "I am Groot",
"rick-size": "I am Groot",
"rick-x": "I am Groot",
"rick-y": "I am Groot",
"rick-rad": "I am Groot"
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment