Skip to content

Commit c8e97f3

Browse files
IPdotSetAFIPdotSetAF
committed
cleaned up masks
debuged logo masking added clock and message controls implemented big clock rendering neomatrix font does not load sometimes
1 parent 19d5c27 commit c8e97f3

2 files changed

Lines changed: 301 additions & 41 deletions

File tree

‎index.js‎

Lines changed: 127 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,16 @@ window.onload = function () {
4848
ui_logo_scale: 1,
4949
ui_logo_positionX: 0,
5050
ui_logo_positionY: 0,
51+
ui_clock_clock: "0",
52+
ui_clock_24HourFormat: true,
53+
ui_clock_scale: 1,
54+
ui_clock_positionX: 0,
55+
ui_clock_positionY: 0,
56+
ui_message_message: "0",
57+
ui_message_text: "THE MATRIX",
58+
ui_message_scale: 1,
59+
ui_message_positionX: 0,
60+
ui_message_positionY: 0,
5161
Save() {
5262
window.localStorage.setItem("preset", JSON.stringify(gui.save()));
5363
Log("Saved preset.");
@@ -108,13 +118,32 @@ window.onload = function () {
108118
gui.addFolder("Audio (not available in web version)");
109119

110120
const logoFolder = gui.addFolder("Logo");
111-
logoFolder.add(options, "ui_logo_logo", optionsToDict(config.general.properties.ui_logo_logo.options)).name("Logo").onChange(updateMask);
112-
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);
114-
logoFolder.add(options, "ui_logo_scale").min(0).max(10).step(0.1).name("Scale").onChange(updateMask);
121+
logoFolder.add(options, "ui_logo_logo", optionsToDict(config.general.properties.ui_logo_logo.options)).name("Logo").onChange(updateLogo);
122+
logoFolder.add(options, "ui_logo_customLogo").name("Custom Logo URL (SVG)").onChange(updateLogo);
123+
logoFolder.add(options, "ui_logo_preserveColor").name("Preserve Logo Color").onChange(updateLogo);
124+
logoFolder.add(options, "ui_logo_scale").min(0).max(10).step(0.1).name("Scale").onChange(updateLogo);
115125
const logoPositionFolder = logoFolder.addFolder("Position");
116-
logoPositionFolder.add(options, "ui_logo_positionX").min(-5000).max(5000).step(1).name("X").onChange(updateMask);
117-
logoPositionFolder.add(options, "ui_logo_positionY").min(-5000).max(5000).step(1).name("Y").onChange(updateMask);
126+
logoPositionFolder.add(options, "ui_logo_positionX").min(-2500).max(2500).step(1).name("X").onChange(updateLogo);
127+
logoPositionFolder.add(options, "ui_logo_positionY").min(-2500).max(2500).step(1).name("Y").onChange(updateLogo);
128+
129+
const clockfolder = gui.addFolder("Clock");
130+
clockfolder.add(options, "ui_clock_clock", optionsToDict(config.general.properties.ui_clock_clock.options)).name("Clock").onChange(updateMask);
131+
clockfolder.add(options, "ui_clock_24HourFormat").name("24 Hour format").onChange(() => {
132+
updateTime();
133+
updateMask();
134+
});
135+
clockfolder.add(options, "ui_clock_scale").min(1).max(10).step(1).name("Scale").onChange(updateMask);
136+
const clockPositionFolder = clockfolder.addFolder("Position");
137+
clockPositionFolder.add(options, "ui_clock_positionX").min(-100).max(100).step(1).name("X").onChange(updateMask);
138+
clockPositionFolder.add(options, "ui_clock_positionY").min(-100).max(100).step(1).name("Y").onChange(updateMask);
139+
140+
const messagefolder = gui.addFolder("Message");
141+
messagefolder.add(options, "ui_message_message", optionsToDict(config.general.properties.ui_message_message.options)).name("Message").onChange(updateMask);
142+
messagefolder.add(options, "ui_message_text").name("Message Text").onChange(updateMask);
143+
messagefolder.add(options, "ui_message_scale").min(1).max(10).step(1).name("Scale").onChange(updateMask);
144+
const messagePositionFolder = messagefolder.addFolder("Position");
145+
messagePositionFolder.add(options, "ui_message_positionX").min(-100).max(100).step(1).name("X").onChange(updateMask);
146+
messagePositionFolder.add(options, "ui_message_positionY").min(-100).max(100).step(1).name("Y").onChange(updateMask);
118147

119148
const otherFolder = gui.addFolder("Other");
120149
otherFolder.add(options, 'ui_other_codesCommaSeparated').name('Codes (Comma separated)').onChange(() => {
@@ -189,6 +218,34 @@ window.onload = function () {
189218
if (properties.ui_logo_preservecolor)
190219
options.ui_logo_preserveColor = properties.ui_logo_preservecolor.value;
191220
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)
221+
updateLogo();
222+
223+
if (properties.ui_clock_clock)
224+
options.ui_clock_clock = properties.ui_clock_clock.value;
225+
if (properties.ui_clock_24hourformat) {
226+
options.ui_clock_24HourFormat = properties.ui_clock_24hourformat.value;
227+
updateTime();
228+
}
229+
if (properties.ui_clock_scale)
230+
options.ui_clock_scale = properties.ui_clock_scale.value;
231+
if (properties.ui_clock_positionx)
232+
options.ui_clock_positionX = properties.ui_clock_positionx.value;
233+
if (properties.ui_clock_positiony)
234+
options.ui_clock_positionY = properties.ui_clock_positiony.value;
235+
if (properties.ui_clock_clock || properties.ui_clock_24hourformat || properties.ui_clock_scale || properties.ui_clock_positionx || properties.ui_clock_positiony)
236+
updateMask();
237+
238+
if (properties.ui_message_message)
239+
options.ui_message_message = properties.ui_message_message.value;
240+
if (properties.ui_message_text)
241+
options.ui_message_text = properties.ui_message_text.value;
242+
if (properties.ui_message_scale)
243+
options.ui_message_scale = properties.ui_message_scale.value;
244+
if (properties.ui_message_positionx)
245+
options.ui_message_positionX = properties.ui_message_positionx.value;
246+
if (properties.ui_message_positiony)
247+
options.ui_message_positionY = properties.ui_message_positiony.value;
248+
if (properties.ui_message_message || properties.ui_message_text || properties.ui_message_scale || properties.ui_message_positionx || properties.ui_message_positiony)
192249
updateMask();
193250

194251
if (properties.ui_other_codescommaseparated) {
@@ -206,6 +263,12 @@ window.onload = function () {
206263
fallAnimation();
207264
}, false);
208265

266+
setInterval(() => {
267+
updateTime();
268+
if (options.ui_clock_clock != "0")
269+
updateMask();
270+
}, 60000);
271+
209272
var fonts = ["monospace", "consolas", "courier-bold"];
210273
var charsets = [
211274
"ABCDEFGHIJKLMNOPQRSTUVWXYZ",
@@ -216,8 +279,9 @@ window.onload = function () {
216279
"0123456789ABCDEF",
217280
"|."
218281
];
219-
var logos = ["ipaf", "kali-1", "kali-2", "ubuntu-1", "ubuntu-2", "windows-11", "windows-10-8", "windows-7", "visual-studio", "vs-code", "unity-1", "unity-2", "unreal", "python", "blazor", "docker", "flutter", "git", "blender", "angular", "c-sharp", "c-plus-plus", "qt"];
282+
var logo = null, logos = ["ipaf", "kali-1", "kali-2", "ubuntu-1", "ubuntu-2", "windows-11", "windows-10-8", "windows-7", "visual-studio", "vs-code", "unity-1", "unity-2", "unreal", "python", "blazor", "docker", "flutter", "git", "blender", "angular", "c-sharp", "c-plus-plus", "qt"];
220283
var debug = document.getElementById("debug"), logs = [];
284+
var hour = "", minute = "";
221285
var startTime, now, then, elapsed, letters, columns, rows, drops, drop_chars;
222286
var AudioTimeout = false, LastSoundTime = new Date(), isSilent = false, frequencyArray, frequencyArrayLength = 128, column_frequency;
223287
var column_hue, row_hue;
@@ -231,6 +295,7 @@ window.onload = function () {
231295

232296
updateCanvasSize();
233297
updateCharSet();
298+
updateTime();
234299
updateFont();
235300
startAnimating();
236301

@@ -243,56 +308,86 @@ window.onload = function () {
243308
mask2Dom.width = window.innerWidth;
244309
}
245310

246-
function updateMask() {
247-
let img = new Image();
248-
249-
img.onload = function () {
250-
drawBlackMask();
251-
252-
let img_width = (c.height / 2) * (img.width / img.height) * options.ui_logo_scale;
253-
let img_height = (c.height / 2) * options.ui_logo_scale;
254-
255-
mask1.globalCompositeOperation = 'destination-out';
256-
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);
257-
258-
mask2.clearRect(0, 0, c.width, c.height);
259-
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);
260-
};
311+
function updateLogo() {
312+
logo = new Image();
313+
logo.onload = updateMask;
261314

262315
switch (options.ui_logo_logo) {
263316
case "0": {
264-
drawBlackMask();
317+
logo = null;
318+
updateMask();
265319
break;
266320
}
267321
case "1": {
268-
img.src = options.ui_logo_customLogo;
322+
logo.src = options.ui_logo_customLogo;
269323
break;
270324
}
271325
default: {
272-
img.src = "images/" + logos[parseInt(options.ui_logo_logo) - 2] + ".svg";
326+
logo.src = "images/" + logos[parseInt(options.ui_logo_logo) - 2] + ".svg";
273327
}
274328
}
275329
}
276330

277-
function drawBlackMask() {
331+
function updateTime() {
332+
let today = new Date();
333+
hour = today.getHours();
334+
minute = today.getMinutes();
335+
336+
if (!options.ui_clock_24HourFormat && hour > 12) {
337+
hour = hour % 12;
338+
if (hour == 0)
339+
hour = 12;
340+
}
341+
if (hour < 10)
342+
hour = "0" + hour;
343+
if (minute < 10)
344+
minute = "0" + minute;
345+
}
346+
347+
function updateMask() {
278348
mask1.globalCompositeOperation = 'source-over';
279349
mask1.clearRect(0, 0, c.width, c.height);
280350
mask1.fillStyle = "rgba(0, 0, 0, " + options.trailLength + ")";
281351
mask1.fillRect(0, 0, c.width, c.height);
282352

283-
if (true) {
284-
mask1.globalCompositeOperation = 'destination-out';
285-
mask1.fillStyle = "#FFF";
286-
mask1.fillText("Hello this is a Text", options.ui_font_size * 3 - font_fraction, options.ui_font_size * 10 +font_fraction);
287-
mask1.globalCompositeOperation = 'source-over';
353+
mask1.globalCompositeOperation = 'destination-out';
354+
355+
if (logo) {
356+
let logo_width = (c.height / 2) * (logo.width / logo.height) * options.ui_logo_scale;
357+
let logo_height = (c.height / 2) * options.ui_logo_scale;
358+
359+
mask1.drawImage(logo, c.width / 2 - logo_width / 2 + options.ui_logo_positionX, c.height / 2 - logo_height / 2 + options.ui_logo_positionY, logo_width, logo_height);
360+
361+
mask2.clearRect(0, 0, c.width, c.height);
362+
mask2.drawImage(logo, c.width / 2 - logo_width / 2 + options.ui_logo_positionX, c.height / 2 - logo_height / 2 + options.ui_logo_positionY, logo_width, logo_height);
363+
}
364+
365+
switch (options.ui_clock_clock) {
366+
case "3": {
367+
let center = [Math.floor((columns - 17 * options.ui_clock_scale) / 2), Math.floor((rows + 5 * options.ui_clock_scale) / 2)];
368+
drawTextOnMask(hour + ":" + minute, center[0] + options.ui_clock_positionX, center[1] + options.ui_clock_positionY, options.ui_clock_scale);
369+
break;
370+
}
371+
case "4": {
372+
let center = [Math.floor((columns - 7 * options.ui_clock_scale) / 2), Math.floor((rows + options.ui_clock_scale) / 2)];
373+
drawTextOnMask(hour, center[0] + options.ui_clock_positionX, center[1] + options.ui_clock_positionY - 1 * options.ui_clock_scale, options.ui_clock_scale);
374+
drawTextOnMask(minute, center[0] + options.ui_clock_positionX, center[1] + options.ui_clock_positionY + 5 * options.ui_clock_scale, options.ui_clock_scale);
375+
break;
376+
}
288377
}
289378
}
290379

380+
function drawTextOnMask(text, x, y, scale) {
381+
mask1.font = options.ui_font_size * 5 * scale + "px neo-matrix";
382+
mask1.fillStyle = "#FFF";
383+
mask1.fillText(text, options.ui_font_size * x - font_fraction, options.ui_font_size * y + font_fraction);
384+
}
385+
291386
function drawMask() {
292387
ctx.globalCompositeOperation = 'source-over';
293388
ctx.drawImage(mask1Dom, 0, 0);
294389

295-
if (options.ui_logo_preserveColor) {
390+
if (logo && options.ui_logo_preserveColor) {
296391
ctx.globalCompositeOperation = 'source-atop';
297392
ctx.drawImage(mask2Dom, 0, 0);
298393
ctx.globalCompositeOperation = 'source-over';
@@ -317,7 +412,6 @@ window.onload = function () {
317412
font_name = fonts[parseInt(options.ui_font_font) - 1];
318413

319414
ctx.font = options.ui_font_size + "px " + font_name;
320-
mask1.font = options.ui_font_size * 5 + "px neo-matrix";
321415
font_fraction = options.ui_font_size / 4;
322416

323417
updateGrid();

0 commit comments

Comments
 (0)