Commit d26d5406 authored by Luc Didry's avatar Luc Didry
Browse files

Fix #16 Add text outline

parent 3d603a61
Pipeline #27227 passed with stage
*.swp
*/node_modules
wemawema_ynh
......@@ -170,6 +170,14 @@
</div>
</div>
</div>
<div class="col-sm-12">
<div class="row">
<label for="wemake-outline-color" class="col-sm-12 col-md-6 outline-color">Outline color</label>
<div class="col-sm-12 col-md-6">
<input id="wemake-outline-color" type="color" value="#FFFFFF" class="form-control">
</div>
</div>
</div>
</div>
<div class="row porn text-center">
Second line
......@@ -185,13 +193,21 @@
</div>
<div class="col-sm-12">
<div class="row">
<label for="porn-alpha" class="col-sm-12 col-md-6 transparency">ransparency</label>
<label for="porn-alpha" class="col-sm-12 col-md-6 transparency">Transparency</label>
<div class="col-sm-12 col-md-6 input-group">
<input id="porn-alpha" type="number" min="0" max="100" value="0" class="form-control">
<div class="input-group-addon">%</div>
</div>
</div>
</div>
<div class="col-sm-12">
<div class="row">
<label for="porn-outline-color" class="col-sm-12 col-md-6 outline-color">Outline color</label>
<div class="col-sm-12 col-md-6">
<input id="porn-outline-color" type="color" value="#FFFFFF" class="form-control">
</div>
</div>
</div>
</div>
<div class="row border-txt text-center">
Border
......@@ -443,6 +459,12 @@
<input id="wemake-width" type="number" min="1" value="725" class="form-control">
</div>
</div>
<div class="row">
<label for="wemake-outline-size" class="col-sm-12 col-md-8 outline-size">Outline size</label>
<div class="col-sm-12 col-md-4">
<input id="wemake-outline-size" type="number" min="0" value="0" class="form-control">
</div>
</div>
<div class="row porn text-center">
Second line
</div>
......@@ -470,6 +492,12 @@
<input id="porn-width" type="number" min="1" value="725" class="form-control">
</div>
</div>
<div class="row">
<label for="porn-outline-size" class="col-sm-12 col-md-8 outline-size">Outline size</label>
<div class="col-sm-12 col-md-4">
<input id="porn-outline-size" type="number" min="0" value="0" class="form-control">
</div>
</div>
</div>
</div>
<div class="row d-none" id="set-img-size">
......
......@@ -101,7 +101,8 @@ function translate(userLang, languages) {
refreshText();
}
['get-source', 'donate-dpdn', 'license', 'author', 'wemake', 'porn', 'border-txt',
'color', 'transparency', 'x-position', 'y-position', 'font', 'style', 'text-size', 'text-width'
'color', 'transparency', 'x-position', 'y-position', 'font', 'style', 'text-size',
'text-width', 'outline-color', 'outline-size'
].forEach(function(e) {
if (locale[e] !== undefined) {
$('.'+e).text(locale[e]);
......@@ -317,6 +318,18 @@ function getParameters() {
if (url.searchParams.get('rr') !== null) {
$('#rick-rad').val(url.searchParams.get('rr'));
}
if (url.searchParams.get('woc') !== null) {
$('#wemake-outline-color').val(url.searchParams.get('woc'));
}
if (url.searchParams.get('wos') !== null) {
$('#wemake-outline-size').val(url.searchParams.get('wos'));
}
if (url.searchParams.get('poc') !== null) {
$('#porn-outline-color').val(url.searchParams.get('poc'));
}
if (url.searchParams.get('pos') !== null) {
$('#porn-outline-size').val(url.searchParams.get('pos'));
}
}
function bindEvents() {
......@@ -678,6 +691,10 @@ function reset() {
$('#rick-y').val(0);
$('#rick-size').val(100);
$('#rick-rad').val(0);
$('#wemake-outline-color').val('#FFFFFF');
$('#wemake-outline-size').val(0);
$('#porn-outline-color').val('#FFFFFF');
$('#porn-outline-size').val(0);
show('bg-color');
hide('gradient-settings');
......@@ -726,6 +743,10 @@ function refreshText() {
var ry = $('#rick-y').val();
var rs = $('#rick-size').val();
var rr = $('#rick-rad').val();
var woc = $('#wemake-outline-color').val();
var wos = $('#wemake-outline-size').val();
var poc = $('#porn-outline-color').val();
var pos = $('#porn-outline-size').val();
var width = $('#img-width').val();
var height = $('#img-height').val();
......@@ -751,13 +772,16 @@ function refreshText() {
window.history.pushState("change", "WemaWema", createUrl(url,
w, wx, wy, ws, wc, wa, wf, wfs, ww,
p, px, py, ps, pc, pa, pf, pfs, pw,
co, ra, gli, bgt, rc, bgr, egr, or, bgi, cor, bth, width, height, x, y, s, bgu, r, rx, ry, rs, rr)
co, ra, gli, bgt, rc, bgr, egr, or,
bgi, cor, bth, width, height, x, y,
s, bgu, r, rx, ry, rs, rr, woc, wos,
poc, pos)
);
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, ww, pw);
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, ww, pw, woc, wos, poc, pos);
}
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, ww, pw) {
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, ww, pw, woc, wos, poc, pos) {
// cleanup
ctx.clearRect(0, 0, width, height);
......@@ -807,11 +831,14 @@ 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, ww,
p, px, py, ps, pc, pa, pf, pfs, pw,
co, ra, gli, bgt, rc, bgr, egr, or, bgi, cor, bth, width, height, x, y, s, bgu, r, rx, ry, rs, rr)
co, ra, gli, bgt, rc, bgr, egr, or,
bgi, cor, bth, width, height, x, y,
s, bgu, r, rx, ry, rs, rr, woc, wos,
poc, pos)
);
}
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, r, rx, ry, rs, rr, ww, pw);
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, ww, pw, woc, wos, poc, pos);
} else {
if (bgi === '' || (bgi === 'custom' && (bgu === undefined || bgu === null || bgu === ''))) {
bgi = 'beer';
......@@ -847,11 +874,14 @@ 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, ww,
p, px, py, ps, pc, pa, pf, pfs, pw,
co, ra, gli, bgt, rc, bgr, egr, or, bgi, cor, bth, width, height, x, y, s, bgu, r, rx, ry, rs, rr)
co, ra, gli, bgt, rc, bgr, egr, or,
bgi, cor, bth, width, height, x, y,
s, bgu, r, rx, ry, rs, rr, woc, wos,
poc, pos)
);
}
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, r, rx, ry, rs, rr, ww, pw);
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, ww, pw, woc, wos, poc, pos);
}
}
return;
......@@ -877,13 +907,14 @@ 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, r, rx, ry, rs, rr, ww, pw);
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, ww, pw, woc, wos, poc, pos);
}
/*
* 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, r, rx, ry, rs, rr, ww, pw) {
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, ww, pw, woc, wos, poc, pos) {
console.log(ctx.lineWidth);
// Inside rounded rectangle
if (bth > 0) {
ctx.lineWidth = bth;
......@@ -893,15 +924,25 @@ function drawOver(ctx, rc, ra, ws, wc, wa, wf, wfs, w, wx, wy, ps, pc, pa, pf, p
ctx.textAlign="center";
// Write WE MAKE
var style = (wfs === 'regular') ? '' : wfs+' ';
ctx.font = style+parseInt(ws)+'px \''+wf+'\'';
ctx.fillStyle = colorToRGBA(wc, wa);
var style = (wfs === 'regular') ? '' : wfs+' ';
ctx.font = style+parseInt(ws)+'px \''+wf+'\'';
ctx.fillStyle = colorToRGBA(wc, wa);
if (wos > 0) {
ctx.strokeStyle = woc;
ctx.lineWidth = wos;
ctx.strokeText(w, parseInt(wx), parseInt(wy), ww);
}
ctx.fillText(w, parseInt(wx), parseInt(wy), ww);
// Write PORN
style = (pfs === 'regular') ? '' : pfs+' ';
ctx.font = style+parseInt(ps)+'px \''+pf;+'\'';
ctx.fillStyle = colorToRGBA(pc, pa);
if (pos > 0) {
ctx.strokeStyle = poc;
ctx.lineWidth = pos;
ctx.strokeText(p, parseInt(px), parseInt(py), pw);
}
ctx.fillText(p, parseInt(px), parseInt(py), pw);
if (r) {
......@@ -1034,6 +1075,10 @@ function addItem() {
ry : $('#rick-y').val(),
rs : $('#rick-size').val(),
rr : $('#rick-rad').val(),
woc : $('#wemake-outline-color').val(),
wos : $('#wemake-outline-size').val(),
poc : $('#porn-outline-color').val(),
pos : $('#porn-outline-size').val(),
};
localStorage.setItem('wemas', JSON.stringify(wemas));
}
......@@ -1082,7 +1127,7 @@ function fillGallery() {
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, v.ww, v.pw
v.rr, v.ww, v.pw, v.woc, v.wos, v.poc, v.pos
);
d.html(c);
......@@ -1097,7 +1142,8 @@ function fillGallery() {
v.p, v.px, v.py, v.ps, v.pc, v.pa, v.pf, v.pfs, v.pw,
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
v.x, v.y, v.s, v.bgu, v.r, v.rx, v.ry, v.rs, v.rr,
v.woc, v.wos, v.poc, v.pos
);
a1.attr('href', url);
a1.text(load);
......@@ -1219,7 +1265,7 @@ function centerText(e) {
}
// create the URL with all the parameters
function createUrl(url, w, wx, wy, ws, wc, wa, wf, wfs, ww, p, px, py, ps, pc, pa, pf, pfs, pw, co, ra, gli, bgt, rc, bgr, egr, or, bgi, cor, bth, width, height, x, y, s, bgu, r, rx, ry, rs, rr) {
function createUrl(url, w, wx, wy, ws, wc, wa, wf, wfs, ww, p, px, py, ps, pc, pa, pf, pfs, pw, co, ra, gli, bgt, rc, bgr, egr, or, bgi, cor, bth, width, height, x, y, s, bgu, r, rx, ry, rs, rr, woc, wos, poc, pos) {
url.searchParams.set('w', w);
url.searchParams.set('wx', wx);
url.searchParams.set('wy', wy);
......@@ -1258,6 +1304,10 @@ function createUrl(url, w, wx, wy, ws, wc, wa, wf, wfs, ww, p, px, py, ps, pc, p
url.searchParams.set('ry', ry);
url.searchParams.set('rs', rs);
url.searchParams.set('rr', rr);
url.searchParams.set('woc', woc);
url.searchParams.set('wos', wos);
url.searchParams.set('poc', poc);
url.searchParams.set('pos', pos);
return url;
}
This diff is collapsed.
......@@ -81,5 +81,7 @@
"rick-y": "Rick face y position",
"rick-rad": "Rick face rotation",
"whale": "Whale",
"text-width": "Text width"
"text-width": "Text width",
"outline-color": "Outline color",
"outline-size": "Outline size"
}
......@@ -81,5 +81,7 @@
"rick-y": "Ordonnées de la tête de Rick",
"rick-rad": "Rotation de la tête de Rick",
"whale": "Baleine",
"text-width": "Largeur du texte"
"text-width": "Largeur du texte",
"outline-color": "Couleur du contour du texte",
"outline-size": "Taille du contour du texte"
}
......@@ -81,5 +81,7 @@
"rick-y": "I am Groot",
"rick-rad": "I am Groot",
"whale": "I am Groot",
"text-width": "I am Groot"
"text-width": "I am Groot",
"outline-color": "I am Groot",
"outline-size": "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