feat: Grid Size Appropriateness metric #46

src/@evoposter/evaluator/package.json

@@ -12,5 +12,8 @@
     "url": "git+https://github.com/sergiomrebelo/evo-poster.git"
   },
   "author": "Sérgio M. Rebelo <[email protected]> (https://sergiorebelo.work/)",
-  "license": "ISC"
+  "license": "ISC",
+  "devDependencies": {
+    "jest": "^29.6.1"
+  }
 }

src/@evoposter/evaluator/src/index.mjs

@@ -7,8 +7,8 @@
  * v0.0.1 July 2023
  */
 
-import * as Legibility from "./constraints/Legibility.mjs";
-import * as GridAppropriateSize from "./constraints/GridAppropriateSize.mjs";
+import * as Legibility from "./metrics/Legibility.mjs";
+import * as GridAppropriateSize from "./metrics/GridAppropriateSize.mjs";
 
 export const info = () => {
     console.log ("Evaluator working");

src/@evoposter/evaluator/src/metrics/GridAppropriateSize.mjs

@@ -0,0 +1,61 @@
+/**
+ * Grid Size Appropriateness
+ *
+ * Measure the appropriate of the used grid to the size of container
+ * it is related to if the width and height of the grid is
+ * in accordance with poster size
+ *
+ * Sérgio M. Rebelo
+ * CDV lab. (CMS, CISUC, Portugal)
+ * srebelo[at]dei.uc.pt
+ *
+ * v1.0.0 November 2023
+ */
+
+const DEBUG = true;
+
+export const compute = (
+    containerWidth, containerHeight,
+    rows = [], columns = [],
+    margins = {left:0, top:0, right:0, bottom:0}
+) => {
+    console.log ("EXAMPLE=", containerWidth, containerHeight, rows, columns, margins);
+
+
+    let invalid = false;
+    // debug
+    let msg = "";
+
+    // height calculation
+    let height = margins.top+margins.bottom;
+    for (let r of rows) {
+        height = height + parseFloat(r);
+    }
+    // width calculation
+    let width = margins.left+margins.right;
+    for (let r of columns) {
+        width = width + parseFloat(r);
+    }
+
+    if (height > containerHeight) {
+        invalid = true;
+        msg += `Grid height is bigger than container (grid:${height}, container:${containerHeight}). `;
+    } else if (height < containerHeight) {
+        msg += `Grid and container height are not the same (grid:${height}, container:${containerHeight}). `;
+    }
+
+    if (width > containerWidth) {
+        invalid = true;
+        msg += `Grid width is bigger than container (grid:${width}, container:${containerWidth}). `;
+    } else if (width < containerWidth) {
+        msg += `Grid and container width are not the same (grid:${width}, container:${containerWidth}). `;
+    }
+
+    if (msg !== "" && DEBUG) {
+        console.warn(msg);
+    }
+
+    return invalid ? 1 : 0;
+}
+
+export { compute as default };

src/@evoposter/evaluator/src/constraints/Legibility.mjs → src/@evoposter/evaluator/src/metrics/Legibility.mjs

@@ -3,6 +3,8 @@
  * it is related to the legibility of the sentence
  * and not the typeface shapes
  *
+ * Expected return a value between 0 (good) and (1) bad
+ *
  * Sérgio M. Rebelo
  * CDV lab. (CMS, CISUC, Portugal)
  * srebelo[at]dei.uc.pt
@@ -15,7 +17,7 @@
 
 import {arrMean, map} from "../utils.js";
 
-const MAX_CONSTRAINT = 0.5;
+const MAX_CONSTRAINT = 1;
 const WHITE_SPACE_FACTOR = 3;
 
 const MODES = [`OVERSET`, `JUSTIFY`,`ATTEMPT_JUSTIFY`];

src/@evoposter/evaluator/test/unit/gridSize.test.js

@@ -0,0 +1,25 @@
+const params = [
+    {
+        width: 300,
+        height: 423,
+        rows: [379.95],
+        columns: [135, 135],
+        margins: {left: 15, top: 21.900000000000002, right: 15, bottom: 21.150000000000002},
+        invalid: false,
+    },
+    {
+        width: 300,
+        height: 423,
+        rows: [377.84999999999997],
+        columns: [135, 135],
+        margins: {left: 15, top: 21.150000000000002, right: 15, bottom: 24.000000000000025},
+        invalid: true
+    }
+];
+
+
+describe(`Test the Grid Size Appropriateness metric`, () => {
+    // Grid Size Appropriateness metric
+});
+
+// (5) [72.85000000000001, 69.85, 71.95, 70.89999999999999, 70.89999999999999] (2) [135, 135] {left: 15, top: 33.27500000000001, right: 15, bottom: 33.27500000000001}

src/client/controllers/Population.js

@@ -68,7 +68,6 @@ export class Population {
         // crossover
         for (let i = eliteSize; i < this.params["evo"]["popSize"]; i++) {
             if (Math.random() <= this.params["evo"]["crossoverProb"]) {
-
                 const parentA = this.tournament(TOURNAMENT_SIZE);
                 const parentB = this.tournament(TOURNAMENT_SIZE);
                 // crossover method

src/client/controllers/Poster.js

@@ -223,7 +223,12 @@ class Poster {
 
         // constraints
         const legibility = evaluator.legibility(this.sentencesLenght, this.genotype["grid"].getAvailableWidth(), `JUSTIFY`);
-        // const gridAppropriateness = evaluator.gridAppropriateSize(this.genotype["size"], this.genotype["grid"]);
+        const gridAppropriateness = evaluator.gridAppropriateSize(
+            this.genotype["size"].width, this.genotype["size"].height,
+            this.genotype["grid"].rows.l, this.genotype["grid"].columns.l, this.genotype["grid"].marginsPos
+        );
+
+        console.log (`gridAppropriateness=${gridAppropriateness}`)
 
         // returns a number between 0 and 0.5
         // subtracted to fitness
@@ -477,7 +482,11 @@ export class Grid {
         this.columns.y.bottom = (this.size.height / 2) - (this.marginsPos.bottom);
 
         const inc = (this.size.width - (this.marginsPos.left + this.marginsPos.right)) / this.v;
-        this.columns.l = inc;
+        let horizontalSpace = [];
+        for (let i=0; i<this.v; i++) {
+            horizontalSpace.push(inc);
+        }
+        this.columns.l = horizontalSpace;
 
         // start cod of x
         let x = -(this.size.width / 2) + this.marginsPos.left;