Skip to content

Commit 4b91194

Browse files
IPdotSetAFIPdotSetAF
committed
added colorPreserving option to logo module
1 parent 98f7f13 commit 4b91194

File tree

4 files changed

+51
-24
lines changed

4 files changed

+51
-24
lines changed

‎index.css‎

0 Bytes
Binary file not shown.

‎index.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,8 @@
1010
</head>
1111

1212
<body>
13-
<canvas id="mask"></canvas>
13+
<canvas id="m1" class="mask"></canvas>
14+
<canvas id="m2" class="mask"></canvas>
1415
<canvas id="neomatrix"></canvas>
1516
<p id="debug"></p>
1617
<div id="gui"></div>

‎index.js‎

Lines changed: 30 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ window.onload = function () {
4444
ui_audio_silenceTimeoutSeconds: 3,
4545
ui_logo_logo: "0",
4646
ui_logo_customLogo: "",
47+
ui_logo_preserveColor: false,
4748
ui_logo_scale: 1,
4849
ui_logo_positionX: 0,
4950
ui_logo_positionY: 0,
@@ -109,6 +110,7 @@ window.onload = function () {
109110
const logoFolder = gui.addFolder("Logo");
110111
logoFolder.add(options, "ui_logo_logo", optionsToDict(config.general.properties.ui_logo_logo.options)).name("Logo").onChange(updateMask);
111112
logoFolder.add(options, "ui_logo_customLogo").name("Custom Logo URL (SVG)").onChange(updateMask);
113+
logoFolder.add(options, "ui_logo_preserveColor").name("Preserve Logo Color").onChange(updateMask);
112114
logoFolder.add(options, "ui_logo_scale").min(0).max(10).step(0.1).name("Scale").onChange(updateMask);
113115
const logoPositionFolder = logoFolder.addFolder("Position");
114116
logoPositionFolder.add(options, "ui_logo_positionX").min(-5000).max(5000).step(1).name("X").onChange(updateMask);
@@ -184,7 +186,9 @@ window.onload = function () {
184186
options.ui_logo_positionX = properties.ui_logo_positionx.value;
185187
if (properties.ui_logo_positiony)
186188
options.ui_logo_positionY = properties.ui_logo_positiony.value;
187-
if (properties.ui_logo_logo || properties.ui_logo_customlogo || properties.ui_logo_scale || properties.ui_logo_positionx || properties.ui_logo_positiony)
189+
if (properties.ui_logo_preservecolor)
190+
options.ui_logo_preserveColor = properties.ui_logo_preservecolor.value;
191+
if (properties.ui_logo_logo || properties.ui_logo_customlogo || properties.ui_logo_scale || properties.ui_logo_positionx || properties.ui_logo_positiony || properties.ui_logo_preservecolor)
188192
updateMask();
189193

190194
if (properties.ui_other_codescommaseparated) {
@@ -218,8 +222,10 @@ window.onload = function () {
218222
var AudioTimeout = false, LastSoundTime = new Date(), isSilent = false, frequencyArray, frequencyArrayLength = 128, column_frequency;
219223
var column_hue, row_hue;
220224
var font_fraction;
221-
var maskDom = document.getElementById("mask");
222-
var mask = maskDom.getContext("2d");
225+
var mask1Dom = document.getElementById("m1");
226+
var mask1 = mask1Dom.getContext("2d");
227+
var mask2Dom = document.getElementById("m2");
228+
var mask2 = mask2Dom.getContext("2d");
223229
var c = document.getElementById("neomatrix");
224230
var ctx = c.getContext("2d");
225231

@@ -232,8 +238,10 @@ window.onload = function () {
232238
function updateCanvasSize() {
233239
c.height = window.innerHeight;
234240
c.width = window.innerWidth;
235-
maskDom.height = window.innerHeight;
236-
maskDom.width = window.innerWidth;
241+
mask1Dom.height = window.innerHeight;
242+
mask1Dom.width = window.innerWidth;
243+
mask2Dom.height = window.innerHeight;
244+
mask2Dom.width = window.innerWidth;
237245
}
238246

239247
function updateMask() {
@@ -245,8 +253,11 @@ window.onload = function () {
245253
let img_width = (c.height / 2) * (img.width / img.height) * options.ui_logo_scale;
246254
let img_height = (c.height / 2) * options.ui_logo_scale;
247255

248-
mask.globalCompositeOperation = 'destination-out';
249-
mask.drawImage(img, c.width / 2 - img_width / 2 + options.ui_logo_positionX, c.height / 2 - img_height / 2 + options.ui_logo_positionY, img_width, img_height);
256+
mask1.globalCompositeOperation = 'destination-out';
257+
mask1.drawImage(img, c.width / 2 - img_width / 2 + options.ui_logo_positionX, c.height / 2 - img_height / 2 + options.ui_logo_positionY, img_width, img_height);
258+
259+
mask2.clearRect(0, 0, c.width, c.height);
260+
mask2.drawImage(img, c.width / 2 - img_width / 2 + options.ui_logo_positionX, c.height / 2 - img_height / 2 + options.ui_logo_positionY, img_width, img_height);
250261
};
251262

252263
switch (options.ui_logo_logo) {
@@ -265,14 +276,21 @@ window.onload = function () {
265276
}
266277

267278
function drawBlackMask() {
268-
mask.globalCompositeOperation = 'source-over';
269-
mask.clearRect(0, 0, c.width, c.height);
270-
mask.fillStyle = "rgba(0, 0, 0, " + options.trailLength + ")";
271-
mask.fillRect(0, 0, c.width, c.height);
279+
mask1.globalCompositeOperation = 'source-over';
280+
mask1.clearRect(0, 0, c.width, c.height);
281+
mask1.fillStyle = "rgba(0, 0, 0, " + options.trailLength + ")";
282+
mask1.fillRect(0, 0, c.width, c.height);
272283
}
273284

274285
function drawMask() {
275-
ctx.drawImage(maskDom, 0, 0);
286+
ctx.globalCompositeOperation = 'source-over';
287+
ctx.drawImage(mask1Dom, 0, 0);
288+
289+
if (options.ui_logo_preserveColor) {
290+
ctx.globalCompositeOperation = 'source-atop';
291+
ctx.drawImage(mask2Dom, 0, 0);
292+
ctx.globalCompositeOperation = 'source-over';
293+
}
276294
}
277295

278296
function updateCharSet() {

‎project.json‎

Lines changed: 19 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -42,8 +42,8 @@
4242
},
4343
"folder_other" :
4444
{
45-
"index" : 26,
46-
"order" : 126,
45+
"index" : 27,
46+
"order" : 127,
4747
"text" : "<h4>Other</h4>",
4848
"type" : "text"
4949
},
@@ -242,7 +242,6 @@
242242
"label" : "Courier Bold",
243243
"value" : "3"
244244
}
245-
246245
],
247246
"order" : 113,
248247
"text" : "Font",
@@ -384,10 +383,10 @@
384383
{
385384
"condition" : "ui_logo_logo.value != 0",
386385
"fraction" : false,
387-
"index" : 24,
386+
"index" : 25,
388387
"max" : 5000,
389388
"min" : -5000,
390-
"order" : 124,
389+
"order" : 125,
391390
"text" : "Logo Position X",
392391
"type" : "slider",
393392
"value" : 0
@@ -396,22 +395,31 @@
396395
{
397396
"condition" : "ui_logo_logo.value != 0",
398397
"fraction" : false,
399-
"index" : 25,
398+
"index" : 26,
400399
"max" : 5000,
401400
"min" : -5000,
402-
"order" : 125,
401+
"order" : 126,
403402
"text" : "Logo Position Y",
404403
"type" : "slider",
405404
"value" : 0
406405
},
406+
"ui_logo_preservecolor" :
407+
{
408+
"condition" : "ui_logo_logo.value != 0",
409+
"index" : 23,
410+
"order" : 123,
411+
"text" : "Preserve Logo Color",
412+
"type" : "bool",
413+
"value" : false
414+
},
407415
"ui_logo_scale" :
408416
{
409417
"condition" : "ui_logo_logo.value != 0",
410418
"fraction" : true,
411-
"index" : 23,
419+
"index" : 24,
412420
"max" : 10,
413421
"min" : 0,
414-
"order" : 123,
422+
"order" : 124,
415423
"precision" : 1.1,
416424
"step" : 0.79432823,
417425
"text" : "Logo Scale",
@@ -420,8 +428,8 @@
420428
},
421429
"ui_other_codescommaseparated" :
422430
{
423-
"index" : 27,
424-
"order" : 127,
431+
"index" : 28,
432+
"order" : 128,
425433
"text" : "Codes (comma separated)",
426434
"type" : "textinput",
427435
"value" : "THE MATRIX"

0 commit comments

Comments
 (0)