From 422b3b7d0d586af66517965c88d1d7f908a64aac Mon Sep 17 00:00:00 2001 From: TRMSC Date: Tue, 7 Nov 2023 22:14:04 +0100 Subject: [PATCH 01/22] create templates.json for processing later #5 --- templates/templates.json | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) create mode 100644 templates/templates.json diff --git a/templates/templates.json b/templates/templates.json new file mode 100644 index 0000000..6f24353 --- /dev/null +++ b/templates/templates.json @@ -0,0 +1,17 @@ +{ + "templates": [ + { + "name": "Bubbles", + "filename": "bubbles.raw", + "author": "", + "description": "Beschreibung des Bubbles Templates..." + }, + { + "name": "Indian Summer", + "filename": "indian-summer.raw", + "author": "TRMSC", + "description": "Beschreibung des Indian Summer Templates..." + } + ] + } + \ No newline at end of file From 652fa465bdc85716489232ce3072d5f902586297 Mon Sep 17 00:00:00 2001 From: TRMSC Date: Tue, 7 Nov 2023 22:27:59 +0100 Subject: [PATCH 02/22] remove options for generating them automatically --- docs/index.html | 2 -- 1 file changed, 2 deletions(-) diff --git a/docs/index.html b/docs/index.html index 8d0496b..c3c5510 100644 --- a/docs/index.html +++ b/docs/index.html @@ -151,8 +151,6 @@

From 56e913d6e7dcbaa6fab04a68a5b7727d0a6e7acd Mon Sep 17 00:00:00 2001 From: TRMSC Date: Tue, 7 Nov 2023 22:33:10 +0100 Subject: [PATCH 03/22] add global array for template data --- docs/src/script.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/docs/src/script.js b/docs/src/script.js index 1f26c0b..75ee2f2 100644 --- a/docs/src/script.js +++ b/docs/src/script.js @@ -6,16 +6,18 @@ ------------------------------------------------------------------------------------------------*/ /** - * Define const variables + * Define global variables * + * @param {array} templatesData Empty array for the templates.json content * @param {array} shareData Site information for share method * */ +let templatesData = []; const shareData = { title: 'Imagescene Generator | TRMSC', text: 'Create dynamic scenes from images | TRMSC', url: window.location -} +}; /** From 824c5c288059f7714c1ff16216107c3fd14fee57 Mon Sep 17 00:00:00 2001 From: TRMSC Date: Tue, 7 Nov 2023 22:49:52 +0100 Subject: [PATCH 04/22] add function for loading templates --- docs/src/script.js | 40 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 40 insertions(+) diff --git a/docs/src/script.js b/docs/src/script.js index 75ee2f2..4507096 100644 --- a/docs/src/script.js +++ b/docs/src/script.js @@ -36,6 +36,7 @@ window.onload = function() { // Call functions addYear(); + loadTemplates(); listenEvents(); // Return @@ -214,6 +215,45 @@ changeStatus = () => { }; +/** + * Load templates from templates.json + * + * @function loadTemplates + * @returns {void} + * @TODO Building path is actually a duplicate within the script + * + */ +loadTemplates = () => { + + // Build path + const baseUrl = window.location.href; + const originPath = 'https://raw.githubusercontent.com/TRMSC/imagescene-generator/main/templates/'; + const relativePath = '../templates/'; + let templatesPath = baseUrl.includes('github.io') ? originPath : relativePath; + let json = templatesPath + 'templates.json'; + console.log(json); + + // Fetch data + fetch(json) + .then(response => response.json()) + .then(data => { + templatesData = data.templates; + const templatesSelect = document.getElementById('imagescene-template'); + + templatesData.forEach((template, index) => { + const option = document.createElement('option'); + option.textContent = template.name; + option.value = template.filename; + templatesSelect.appendChild(option); + }); + }) + .catch(error => { + console.error('Error when loading templates.json: ' + error); + }); + +}; + + /** * Start generating the scene * From 3a7814a420eb5fb346a434d2655fc4f0aac4466c Mon Sep 17 00:00:00 2001 From: TRMSC Date: Tue, 7 Nov 2023 22:51:14 +0100 Subject: [PATCH 05/22] remove file extension --- docs/src/script.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/script.js b/docs/src/script.js index 4507096..0da8346 100644 --- a/docs/src/script.js +++ b/docs/src/script.js @@ -321,7 +321,7 @@ generateScene = () => { const originPath = 'https://raw.githubusercontent.com/TRMSC/imagescene-generator/main/templates/'; const relativePath = '../templates/'; let templatePath = baseUrl.includes('github.io') ? originPath : relativePath; - templatePath = templatePath + templateName + '.raw'; + templatePath = templatePath + templateName; // Fetch template content let templateContent = ''; From 58be277cede2f7fe6a68e8428f0859b4fd273a0d Mon Sep 17 00:00:00 2001 From: TRMSC Date: Tue, 7 Nov 2023 22:55:10 +0100 Subject: [PATCH 06/22] add eventlistener for changing template --- docs/src/script.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/docs/src/script.js b/docs/src/script.js index 0da8346..5fcac84 100644 --- a/docs/src/script.js +++ b/docs/src/script.js @@ -108,6 +108,10 @@ listenEvents = () => { let textarea = document.getElementById('imagescene-url'); textarea.addEventListener('input', getValues); + // Update status when template was changed + let templateSelect = document.getElementById('imagescene-template'); + templateSelect.addEventListener('change', changeStatus); + // Update status when width input was changes let width = document.getElementById('imagescene-w'); width.addEventListener('input', changeStatus); From 20017f3380cea3e8666442543b76961e795740eb Mon Sep 17 00:00:00 2001 From: TRMSC Date: Tue, 7 Nov 2023 23:06:28 +0100 Subject: [PATCH 07/22] outsource template path --- docs/src/script.js | 14 +++++--------- 1 file changed, 5 insertions(+), 9 deletions(-) diff --git a/docs/src/script.js b/docs/src/script.js index 5fcac84..e373101 100644 --- a/docs/src/script.js +++ b/docs/src/script.js @@ -9,10 +9,12 @@ * Define global variables * * @param {array} templatesData Empty array for the templates.json content + * @param {array} templatePath Path to the template directory depending on github or server adress * @param {array} shareData Site information for share method * */ let templatesData = []; +let templatesPath; const shareData = { title: 'Imagescene Generator | TRMSC', text: 'Create dynamic scenes from images | TRMSC', @@ -233,7 +235,7 @@ loadTemplates = () => { const baseUrl = window.location.href; const originPath = 'https://raw.githubusercontent.com/TRMSC/imagescene-generator/main/templates/'; const relativePath = '../templates/'; - let templatesPath = baseUrl.includes('github.io') ? originPath : relativePath; + templatesPath = baseUrl.includes('github.io') ? originPath : relativePath; let json = templatesPath + 'templates.json'; console.log(json); @@ -319,17 +321,11 @@ generateScene = () => { // Get template let templateName = document.getElementById('imagescene-template').value; - - // Build path - const baseUrl = window.location.href; - const originPath = 'https://raw.githubusercontent.com/TRMSC/imagescene-generator/main/templates/'; - const relativePath = '../templates/'; - let templatePath = baseUrl.includes('github.io') ? originPath : relativePath; - templatePath = templatePath + templateName; + let template = templatesPath + templateName; // Fetch template content let templateContent = ''; - fetch(templatePath) + fetch(template) .then(response => { // Check if (!response.ok) { From f7fdf40765c7bba70294d8ff94695c9cf883d3c6 Mon Sep 17 00:00:00 2001 From: TRMSC Date: Tue, 7 Nov 2023 23:20:56 +0100 Subject: [PATCH 08/22] add template details and rearrange options --- docs/index.html | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/docs/index.html b/docs/index.html index c3c5510..d0f137e 100644 --- a/docs/index.html +++ b/docs/index.html @@ -148,11 +148,6 @@

-
- - -
@@ -167,6 +162,18 @@

Breite und Höhe beziehen sich auf die Maße des verwendeten Bildes. Entscheidend ist das Seitenverhältnis, sodass die Einheit nicht beachtet werden muss.

+
+
+ + +
+
+
+ + ist eine Vorlage von : + +
From eee4940697ad6aa19c963c2e27b6f88357c2d493 Mon Sep 17 00:00:00 2001 From: TRMSC Date: Tue, 7 Nov 2023 23:51:10 +0100 Subject: [PATCH 09/22] handle template selection --- docs/src/script.js | 41 +++++++++++++++++++++++++++++++++++++---- 1 file changed, 37 insertions(+), 4 deletions(-) diff --git a/docs/src/script.js b/docs/src/script.js index e373101..56775f3 100644 --- a/docs/src/script.js +++ b/docs/src/script.js @@ -112,7 +112,10 @@ listenEvents = () => { // Update status when template was changed let templateSelect = document.getElementById('imagescene-template'); - templateSelect.addEventListener('change', changeStatus); + templateSelect.addEventListener('change', function () { + selectTemplates(); + changeStatus(); + }); // Update status when width input was changes let width = document.getElementById('imagescene-w'); @@ -226,7 +229,6 @@ changeStatus = () => { * * @function loadTemplates * @returns {void} - * @TODO Building path is actually a duplicate within the script * */ loadTemplates = () => { @@ -237,21 +239,26 @@ loadTemplates = () => { const relativePath = '../templates/'; templatesPath = baseUrl.includes('github.io') ? originPath : relativePath; let json = templatesPath + 'templates.json'; - console.log(json); // Fetch data fetch(json) .then(response => response.json()) .then(data => { + // Handle template data templatesData = data.templates; - const templatesSelect = document.getElementById('imagescene-template'); + let templatesSelect = document.getElementById('imagescene-template'); + // Create options templatesData.forEach((template, index) => { const option = document.createElement('option'); option.textContent = template.name; option.value = template.filename; templatesSelect.appendChild(option); }); + + // Handle template selection + selectTemplates(); + }) .catch(error => { console.error('Error when loading templates.json: ' + error); @@ -260,6 +267,32 @@ loadTemplates = () => { }; +/** + * Handle template selection + * + * @function selectTemplates + * @returns {void} + * + */ +selectTemplates = () => { + + // Get selection + let templatesSelect = document.getElementById('imagescene-template'); + const selectedFilename = templatesSelect.value; + const selectedTemplate = templatesData.find(template => template.filename === selectedFilename); + console.log(selectedTemplate); + + // Adjust details + const templatesName = document.getElementById('template-name'); + const templatesAuthor = document.getElementById('template-author'); + const templatesDescription = document.getElementById('template-description'); + templatesName.textContent = selectedTemplate.name; + templatesAuthor.textContent = selectedTemplate.author; + templatesDescription.textContent = selectedTemplate.description; + +}; + + /** * Start generating the scene * From 41960071bbc6c11a42c7c6c052ff21e36d6fa18d Mon Sep 17 00:00:00 2001 From: TRMSC Date: Tue, 7 Nov 2023 23:57:43 +0100 Subject: [PATCH 10/22] style template data parts --- docs/index.html | 2 +- docs/src/style.css | 3 +++ 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/docs/index.html b/docs/index.html index d0f137e..514dd42 100644 --- a/docs/index.html +++ b/docs/index.html @@ -171,7 +171,7 @@

- ist eine Vorlage von : + ist eine Vorlage von :
diff --git a/docs/src/style.css b/docs/src/style.css index 2adcf8f..569d640 100644 --- a/docs/src/style.css +++ b/docs/src/style.css @@ -31,6 +31,9 @@ h3 { text-decoration: underline; margin-block-end: 0.5em; } +.ic-bold { + font-weight: bold; +} input[type="button"] { cursor: pointer; border-radius: 3px; From db1152b826ecf6879eea31524d4017be106da36a Mon Sep 17 00:00:00 2001 From: TRMSC Date: Wed, 8 Nov 2023 00:04:22 +0100 Subject: [PATCH 11/22] adjust responsiveness --- docs/src/style.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/src/style.css b/docs/src/style.css index 569d640..9f8fc8d 100644 --- a/docs/src/style.css +++ b/docs/src/style.css @@ -133,9 +133,6 @@ footer { svg { border-radius: 8px; } - .select-container { - flex-direction: column; - } } @media (max-width: 568px) { html { @@ -144,6 +141,9 @@ footer { svg { border-radius: 6px; } + .select-container { + flex-direction: column; + } #result-container { display: flex; flex-direction: column; From 7b0b7c9deca916f5374a289f99385448df3c214e Mon Sep 17 00:00:00 2001 From: TRMSC Date: Wed, 8 Nov 2023 15:38:19 +0100 Subject: [PATCH 12/22] set indian summer as default template --- docs/src/script.js | 2 +- templates/templates.json | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/docs/src/script.js b/docs/src/script.js index 56775f3..1e20011 100644 --- a/docs/src/script.js +++ b/docs/src/script.js @@ -253,6 +253,7 @@ loadTemplates = () => { const option = document.createElement('option'); option.textContent = template.name; option.value = template.filename; + if (template.default === true) option.selected = 'selected'; templatesSelect.appendChild(option); }); @@ -280,7 +281,6 @@ selectTemplates = () => { let templatesSelect = document.getElementById('imagescene-template'); const selectedFilename = templatesSelect.value; const selectedTemplate = templatesData.find(template => template.filename === selectedFilename); - console.log(selectedTemplate); // Adjust details const templatesName = document.getElementById('template-name'); diff --git a/templates/templates.json b/templates/templates.json index 6f24353..cdea1c9 100644 --- a/templates/templates.json +++ b/templates/templates.json @@ -10,7 +10,8 @@ "name": "Indian Summer", "filename": "indian-summer.raw", "author": "TRMSC", - "description": "Beschreibung des Indian Summer Templates..." + "description": "Beschreibung des Indian Summer Templates...", + "default": true } ] } From 2de071470f6949e099189771e2e1ab500f352d99 Mon Sep 17 00:00:00 2001 From: TRMSC Date: Wed, 8 Nov 2023 15:45:13 +0100 Subject: [PATCH 13/22] add description --- templates/templates.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/templates/templates.json b/templates/templates.json index cdea1c9..422e49d 100644 --- a/templates/templates.json +++ b/templates/templates.json @@ -10,7 +10,7 @@ "name": "Indian Summer", "filename": "indian-summer.raw", "author": "TRMSC", - "description": "Beschreibung des Indian Summer Templates...", + "description": "Langsam nach unten schwebende Staubpartikel mit Sonnenreflexen.", "default": true } ] From c8d0147255ac34e68129ae94ca743a7968698056 Mon Sep 17 00:00:00 2001 From: TRMSC Date: Wed, 8 Nov 2023 15:53:46 +0100 Subject: [PATCH 14/22] add and adjust descriptions --- templates/templates.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/templates/templates.json b/templates/templates.json index 422e49d..de7f12e 100644 --- a/templates/templates.json +++ b/templates/templates.json @@ -4,13 +4,13 @@ "name": "Bubbles", "filename": "bubbles.raw", "author": "", - "description": "Beschreibung des Bubbles Templates..." + "description": "mit aufploppenden Blasen in unterschiedlicher Größe und Geschwindigkeit, die nach oben aufsteigend langsam verschwinden." }, { "name": "Indian Summer", "filename": "indian-summer.raw", "author": "TRMSC", - "description": "Langsam nach unten schwebende Staubpartikel mit Sonnenreflexen.", + "description": "mit langsam nach unten schwebenden Staubpartikeln und wandernden Sonnenreflexen.", "default": true } ] From 631022a514a050f44a8ce473b6419445b31a6cf3 Mon Sep 17 00:00:00 2001 From: TRMSC Date: Wed, 8 Nov 2023 15:57:05 +0100 Subject: [PATCH 15/22] remove colon --- docs/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/index.html b/docs/index.html index 514dd42..51fb388 100644 --- a/docs/index.html +++ b/docs/index.html @@ -171,7 +171,7 @@

- ist eine Vorlage von : + ist eine Vorlage von
From 7827db5f837eec56030c56791c70d283af5410a0 Mon Sep 17 00:00:00 2001 From: TRMSC Date: Wed, 8 Nov 2023 17:37:19 +0100 Subject: [PATCH 16/22] add author --- templates/templates.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/templates/templates.json b/templates/templates.json index de7f12e..0d737fb 100644 --- a/templates/templates.json +++ b/templates/templates.json @@ -3,7 +3,7 @@ { "name": "Bubbles", "filename": "bubbles.raw", - "author": "", + "author": "Florian Dagner", "description": "mit aufploppenden Blasen in unterschiedlicher Größe und Geschwindigkeit, die nach oben aufsteigend langsam verschwinden." }, { From 3ed904bcdb43026f17552d68b9b5cfead76e6929 Mon Sep 17 00:00:00 2001 From: TRMSC Date: Wed, 8 Nov 2023 17:40:53 +0100 Subject: [PATCH 17/22] adjust formulation --- docs/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/index.html b/docs/index.html index 51fb388..385cca2 100644 --- a/docs/index.html +++ b/docs/index.html @@ -159,7 +159,7 @@

- Breite und Höhe beziehen sich auf die Maße des verwendeten Bildes. Entscheidend ist das Seitenverhältnis, sodass die Einheit nicht beachtet werden muss. + Breite und Höhe beziehen sich auf die Ausgangsmaße des verwendeten Bildes. Entscheidend ist das Seitenverhältnis, sodass die Einheit nicht beachtet werden muss.
From de9863e8556f5a2b2d0f04f50d82b64393cf56fd Mon Sep 17 00:00:00 2001 From: TRMSC Date: Wed, 8 Nov 2023 17:42:42 +0100 Subject: [PATCH 18/22] correct spelling --- docs/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/index.html b/docs/index.html index 385cca2..7ebbd2f 100644 --- a/docs/index.html +++ b/docs/index.html @@ -81,7 +81,7 @@

Der Imagescene Generator befindet sich derzeit noch in einer Beta-Phase. - Die grundlegenden Funktionen sind weitestgehend stabil, während jedoch für die nächsten Schritten zentrale visuelle sowie funktionelle Anpassungen vorgesehen sind. + Die grundlegenden Funktionen sind weitestgehend stabil, während jedoch für die nächsten Schritte zentrale visuelle sowie funktionelle Anpassungen vorgesehen sind.

From 0bb96614ff339ad7909568c32349c0da33ee2f02 Mon Sep 17 00:00:00 2001 From: TRMSC Date: Wed, 8 Nov 2023 17:46:41 +0100 Subject: [PATCH 19/22] weaken the beta status by formulation adjustments --- docs/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/index.html b/docs/index.html index 7ebbd2f..07983c7 100644 --- a/docs/index.html +++ b/docs/index.html @@ -81,7 +81,7 @@

Der Imagescene Generator befindet sich derzeit noch in einer Beta-Phase. - Die grundlegenden Funktionen sind weitestgehend stabil, während jedoch für die nächsten Schritte zentrale visuelle sowie funktionelle Anpassungen vorgesehen sind. + Die grundlegenden Funktionen sind weitestgehend stabil, während für die nächsten Schritte noch visuelle sowie funktionelle Anpassungen vorgesehen sind.

From e9a1a7604c04be42d3283252f5b88fa9912d8974 Mon Sep 17 00:00:00 2001 From: TRMSC Date: Wed, 8 Nov 2023 19:04:08 +0100 Subject: [PATCH 20/22] adjust description --- docs/src/script.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/script.js b/docs/src/script.js index 1e20011..725dfe8 100644 --- a/docs/src/script.js +++ b/docs/src/script.js @@ -507,7 +507,7 @@ showInfo = (content) => { /** - * Download code as HTML + * Download file as HTML or SVG * * @function downloadFile * @param {string} type - Includes the file type (html or svg) From 3e5e2b4c0ce11b3ab8caa89bb9c4dd4ed5579417 Mon Sep 17 00:00:00 2001 From: TRMSC Date: Wed, 8 Nov 2023 19:08:52 +0100 Subject: [PATCH 21/22] correct file extension --- docs/src/script.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/src/script.js b/docs/src/script.js index 725dfe8..61baf8f 100644 --- a/docs/src/script.js +++ b/docs/src/script.js @@ -516,7 +516,7 @@ showInfo = (content) => { downloadFile = (type) => { // Get values let html = document.getElementById('imagescene-result').value; - let template = document.getElementById('imagescene-template').value; + let template = document.getElementById('imagescene-template').value.replace("raw", type); // Get date for filename const date = new Date(); @@ -535,7 +535,7 @@ downloadFile = (type) => { // Download const a = document.createElement('a'); a.href = url; - a.download = currentDate + '-' + 'imagescene-' + template + '.' + type; + a.download = currentDate + '-' + 'imagescene-' + template; a.click(); // Release URL resource From fce482405702ece6042a4fc9c72875f3310cdcb6 Mon Sep 17 00:00:00 2001 From: TRMSC Date: Wed, 8 Nov 2023 19:14:19 +0100 Subject: [PATCH 22/22] add time to filename --- docs/src/script.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/docs/src/script.js b/docs/src/script.js index 61baf8f..c603afb 100644 --- a/docs/src/script.js +++ b/docs/src/script.js @@ -518,12 +518,15 @@ downloadFile = (type) => { let html = document.getElementById('imagescene-result').value; let template = document.getElementById('imagescene-template').value.replace("raw", type); - // Get date for filename + // Get date and time for filename const date = new Date(); const year = date.getFullYear(); const month = String(date.getMonth() + 1).padStart(2, '0'); const day = String(date.getDate()).padStart(2, '0'); - const currentDate = `${year}-${month}-${day}`; + const hours = String(date.getHours()).padStart(2, '0'); + const minutes = String(date.getMinutes()).padStart(2, '0'); + const seconds = String(date.getSeconds()).padStart(2, '0'); + const currentDate = `${year}-${month}-${day}-${hours}-${minutes}-${seconds}`; // Add XML declaration for SVG type if (type === 'svg') html = `\n${html}`;