feat: include canvas #15 #16

package.json

@@ -11,6 +11,7 @@
     "cross-env": "^7.0.3",
     "dotenv": "^16.0.3",
     "express": "^4.18.2",
+    "p5js": "^1.2.18",
     "pm2": "^5.3.0"
   },
   "babel": {
@@ -21,6 +22,7 @@
   "scripts": {
     "test": "cross-env NODE_OPTIONS=--experimental-vm-modules npx jest",
     "build2": "rollup --config",
+    "watch2": "rollup -c -w",
     "build": "browserify -t [ browserify-css --minify=true --output public/bundle.css ] public/main.js -o public/bundle.js",
     "watch": "watchify -t [ browserify-css --minify=true --output public/bundle.css ] public/main.js -o public/bundle.js",
     "dev": "nodemon --exec babel-node src/index.js",

src/rollup-project/components/information-message.js → src/rollup-project/components/errHandler.js

@@ -1,8 +1,7 @@
-import {container} from "./textContainer.js";
+import {container} from "./utils.js";
 
 const errorHandler = (res = {success: false}) => {
 
-
     // remove any message
     document.querySelectorAll(`#error-handle`).forEach((el) => {
         el.remove();

src/rollup-project/components/evolution-module.js

@@ -0,0 +1,23 @@
+import '../../../node_modules/p5js/p5.js/p5.min.js';
+
+export default () => {
+
+    window.preload = () => {
+        console.log(`preload`);
+    };
+
+    window.setup = () => {
+        console.log(`setup`);
+    }
+
+    window.draw = () => {
+        console.log(`draw`);
+    }
+
+    window.windowResized = () => {
+        console.log(`windowResized`);
+    }
+
+};
+
+

src/rollup-project/input.js → src/rollup-project/components/input-module.js

@@ -1,4 +1,4 @@
-import {container, input, headline, paragraphContainer, button} from './components/textContainer.js'
+import {container, inputField, headline, paragraphContainer, button} from './utils.js'
 
 const availableLanguages = [
     'ar', 'bn', 'bs', 'bg', 'zh', 'hr', 'cs', 'da', 'nl', 'en',
@@ -99,7 +99,7 @@ export const inputForm = () => {
     mainSection.appendChild(divider());
 
     const lineDivisionContainer = container("div", ["form-check", "form-check-inline", "mb-2"], `lineDivisionField`);
-    const checkAutomaticLineDivision = input(`checkbox`, "1", ["form-check-input"], "lineDivisionCheck", true);
+    const checkAutomaticLineDivision = inputField(`checkbox`, "1", ["form-check-input"], "lineDivisionCheck", true);
     const labelCheckAutomaticLineDivision = createLabel(checkAutomaticLineDivision.id, "Automatic line division", ["form-check-label", "col-form-label-sm"]);
 
 
@@ -113,7 +113,7 @@ export const inputForm = () => {
     });
 
     const textDelimiterContainer = container("div", ["form-group", "row", "mb-2", "d-none"], `textDelimiterField`);
-    const inputTextDelimiter = input("text", "¶", ["form-control", "form-control-lg"], "formControlTextDelimiter");
+    const inputTextDelimiter = inputField("text", "¶", ["form-control", "form-control-lg"], "formControlTextDelimiter");
     const inputTextDelimiterLabel = createLabel(inputTextDelimiter.id, "Text Line delimiter", ["col-form-label-sm"]);
 
 
@@ -128,7 +128,7 @@ export const inputForm = () => {
     mainSection.appendChild(divider());
 
     const imagesContainer = container("div", ["form-group", "row", "mb-2"]);
-    const inputImagesContainer = input("file", null, ["form-control-file"], "formControlImages", "files[]");
+    const inputImagesContainer = inputField("file", null, ["form-control-file"], "formControlImages", "files[]");
     inputImagesContainer.accept = "image/jpeg, image/png, image/jpg";
     inputImagesContainer.multiple = true;
     const inputImagesContainerLabel = createLabel(inputImagesContainer.id, "Images", ["col-form-label-sm"]);
@@ -138,7 +138,7 @@ export const inputForm = () => {
     mainSection.appendChild(imagesContainer);
 
     const imagePlacementCheckContainer = container("div", ["form-check", "form-check-inline", "mb-2", "d-none"], "imagePlacementField");
-    const inputImagePlacementCheck = input(`checkbox`, "1", ["form-check-input"], "imagePlacementCheck", true);
+    const inputImagePlacementCheck = inputField(`checkbox`, "1", ["form-check-input"], "imagePlacementCheck", true);
     const inputImagePlacementCheckLabel = createLabel(inputImagePlacementCheck.id, "Image Random Placement", ["form-check-label", "col-form-label-sm"]);
     imagePlacementCheckContainer.appendChild(inputImagePlacementCheckLabel);
     imagePlacementCheckContainer.appendChild(inputImagePlacementCheck);
@@ -155,7 +155,7 @@ export const inputForm = () => {
     });
 
     const imagePlaceholderDelimiterContainer = container("div", ["form-group", "row", "mb-2", "d-none"], "imageAnchorField");
-    const imagePlaceholderDelimiterInput = input(`text`, null, ["form-control", "form-control-lg"], "formControlImagePlaceholderDelimiter", false)
+    const imagePlaceholderDelimiterInput = inputField(`text`, null, ["form-control", "form-control-lg"], "formControlImagePlaceholderDelimiter", false)
     const imagePlaceholderDelimiterLabel = createLabel(imagePlaceholderDelimiterInput.id, "Image Placement Anchor", ["col-form-label-sm"]);
     imagePlaceholderDelimiterContainer.appendChild(imagePlaceholderDelimiterLabel);
     imagePlaceholderDelimiterContainer.appendChild(imagePlaceholderDelimiterInput);
@@ -166,12 +166,9 @@ export const inputForm = () => {
     const submitContainer = container("div", ["col-auto"]);
     const submitBt = button("Submit", ["btn", "btn-primary", "mb-2"], "submit");
 
-    const resetBt = button("Reset", ["btn", "btn-secondary", "mx-3", "mb-2"], "reset");
-
     submitContainer.appendChild(submitBt);
-    submitContainer.appendChild(resetBt);
-
     mainSection.appendChild(submitContainer);
+
     form.appendChild(mainSection);
     section.appendChild(form);
 
@@ -181,7 +178,7 @@ export const inputForm = () => {
         window.location.reload();
     }
 
-    const nextBt = button("Next", ["btn", "d-none", "btn-primary", "my-2", "nextBts", "mx-3"], null, "btNext");
+    const nextBt = button("Next", ["btn", "d-none", "btn-primary", "my-2", "nextBts", "mx-3"], "button", "btNext");
     nextBt.disabled = true;
 
     section.appendChild(reloadBt);

src/rollup-project/components/sketch.js

@@ -0,0 +1,20 @@
+import '../../../node_modules/p5js/p5.js/p5.min.js';
+
+export const preload = () => {
+    console.log (`p5js preload`);
+}
+
+export const setup = (msg = "kfjkgjkg") =>  {
+    console.log(p5);
+    createCanvas(windowWidth, windowHeight, WEBGL)
+}
+
+export const draw = () =>  {
+    background(50)
+}
+
+export const windowResized = () =>  {
+    resizeCanvas(windowWidth, windowHeight)
+}
+
+export default setup;

src/rollup-project/components/textContainer.js → src/rollup-project/components/utils.js

@@ -46,7 +46,7 @@ export const container = (
     return container;
 };
 
-export const input = (
+export const inputField = (
      type = "text", value = null, classes = [], id = null, checked = null, name = null
 ) => {
     const input = document.createElement(`input`);

src/rollup-project/index.html

@@ -1,9 +1,9 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <!-- TODO: meta information -->
     <title>Evolving Posters</title>
     <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="stylesheet" href="./build/bundle.min.css">
 </head>
 <body>

src/rollup-project/main.css

@@ -36,4 +36,8 @@ h4 {
 
 #info-results-section div {
     margin-bottom: 1.35em;
+}
+
+.p5Canvas {
+    display: none;
 }

src/rollup-project/main.js

@@ -1,11 +1,16 @@
 import '../../node_modules/bootstrap/dist/css/bootstrap.min.css';
 import './main.css';
 
-// TODO: (!) "this" has been rewritten to "undefined"
-// import '../../node_modules/bootstrap/dist/js/bootstrap.bundle';
+import '../../node_modules/p5js/p5.js/p5.min.js';
 
-import {resultsContainer, inputForm} from './input.js';
-import errorHandler from "./components/information-message.js";
+import {resultsContainer, inputForm} from './components/input-module.js';
+import errorHandler from "./components/errHandler.js";
+import {container} from "./components/utils.js";
+
+// import {setup, preload, draw, windowResized} from "./components/sketch.js";
+// import p5 from "./components/evolution-module.js"
+
+let app;
 
 export default class App {
     constructor()  {
@@ -20,23 +25,68 @@ export default class App {
         this.text = null;
         this.screen = 0;
 
+        this.results = null;
+
+        // params
         this.IMAGE_SIZE = 1024; // in kb
+        this.BACKGROUND_COLOR = color(random(255), random(255), random(255));
+    }
+
+    evolve = () => {
+        this.screen = 1;
+        document.getElementById(`input-module`).style.display = "none";
+        document.querySelector(`.p5Canvas`).style.display = "block";
+
+        // init canvas
+        createCanvas(windowWidth, windowHeight);
+        background (this.BACKGROUND_COLOR);
+
+        window.draw = () => {
+            background (this.BACKGROUND_COLOR);
+            push();
+            fill(0);
+            textSize(36);
+            let leading = 36*1.35;
+            let y = Math.round(leading * this.results.sentences.length/2);
+            for (let i=0; i<this.results.sentences.length; i++) {
+                let sentence =  this.results.sentences[i];
+                text(
+                    sentence,
+                    windowWidth/2-textWidth(sentence)/2,
+                    windowHeight/2 - y
+                );
+                y -= leading;
+            }
+            pop();
+        }
 
-        this.init();
+        window.windowResized = () => {
+            clearTimeout(this.resize);
+            this.resize = setTimeout(() => {
+                this.BACKGROUND_COLOR = color(random(255), random(255), random(255));
+                resizeCanvas(windowWidth, windowHeight);
+            }, 100);
+        }
     }
 
+
+
     init = () => {
         const resultsScreen = resultsContainer();
         const formInput = inputForm();
 
-        // screen.style(style);
-        document.body.appendChild(resultsScreen);
+        const inputModuleContainer = container(`div`, [],`input-module`);
+        inputModuleContainer.appendChild(resultsScreen);
+        inputModuleContainer.appendChild(formInput);
 
-        document.body.appendChild(formInput);
+        document.body.appendChild(inputModuleContainer);
         formInput.addEventListener("submit", this.get);
         document.getElementById('formControlImages').addEventListener('change', this._uploadImages);
+
+
     }
 
+
     get = async (e) => {
         e.preventDefault();
         let textArea = encodeURIComponent(document.getElementById('formControlTextarea').value);
@@ -64,6 +114,7 @@ export default class App {
 
         fetch(url).then((response) => response.json()).then((result) => {
             this._displayResults(result);
+            this.results = result;
         }).catch((error) => {
             console.error('Error:', error);
             errorHandler ({ message: `error on fetch. ${error}`});
@@ -92,7 +143,6 @@ export default class App {
         document.querySelector('#input-form fieldset').disabled = true;
         document.getElementById('btReload').enable = true;
 
-
         const section = document.getElementById(`info-results-section`);
         section.classList.replace('d-none', 'd-block');
 
@@ -101,6 +151,16 @@ export default class App {
             el.disabled = false;
             el.classList.replace('d-none', 'd-inline');
         });
+
+        document.getElementById(`btNext`).onclick = (e) => {
+            e.preventDefault();
+            if (this.results !== null) {
+                this.evolve();
+            } else {
+                errorHandler({ message: "text input not defined"})
+            }
+        }
+
     }
 
     _uploadImages = async (e) => {
@@ -110,7 +170,7 @@ export default class App {
         this.images.amount = e.target.files.length;
 
        this.images.blobs = await this._readImages(e.target.files).catch((err) => {
-           errorHandler (`not possible to load the image ${err}`);
+           errorHandler ({ message: `not possible to load the image ${err}`});
         })
 
         this.images.loading = false;
@@ -177,6 +237,7 @@ export default class App {
 }
 
 
-window.onload = () => {
-    const app = new App();
+window.setup = () => {
+    app = new App();
+    app.init();
 }