Added dynamic color grading algorithm

3 files changed, 23 insertions, 10 deletions

diff --git a/assets/css/main.css b/assets/css/main.css
index 1c1208c..75b9464 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -24,7 +24,8 @@ html, body {
 }
 
 pre {
-    float: right;
+    float: left;
+    margin-right: 30px;
 }
 
 /*
@@ -140,6 +141,7 @@ td.output {
     grid-template-columns: repeat(6, 1fr);
     justify-items: center;
     align-items: center;
+    margin-top: 10px;
     width: calc(50px * 6);
     height: calc(50px * 6);
 }
diff --git a/assets/js/generator.js b/assets/js/generator.js
index da9996d..928cdba 100644
--- a/assets/js/generator.js
+++ b/assets/js/generator.js
@@ -1,5 +1,5 @@
 // declare button event
-document.getElementById('minify').onclick = () => {
+document.getElementById('input').onkeyup = () => {
   // declare variables
   let a, b, c, d;
   const matrix = [[], [], [], []];
@@ -9,7 +9,10 @@ document.getElementById('minify').onclick = () => {
 
   // some logging..
   document.getElementById('log').innerText = '';
-  document.getElementById('log').append('LOG\ndcba Z ID\n');
+  document.getElementById('log').append('Wahrheitstabelle\n');
+  document.getElementById('log').append('----------------\n');
+  document.getElementById('log').append('d c b a | Z | ID\n');
+  document.getElementById('log').append('----------------\n');
 
   try {
     // fill kv diagram
@@ -21,7 +24,7 @@ document.getElementById('minify').onclick = () => {
       b = filledBinary[2] === '1';
       c = filledBinary[1] === '1';
       d = filledBinary[0] === '1';
-      document.getElementById('log').append(`${filledBinary} ${eval(input) ? '1' : '0'} ${document.getElementById(i + 1).getAttribute('data-id')}\n`);
+      document.getElementById('log').append(`${filledBinary.split('').join(' ')} | ${eval(input) ? '1' : '0'} | ${document.getElementById(i + 1).getAttribute('data-id')}\n`);
       document.getElementById(i + 1).innerText = eval(input) ? '1' : '0';
     }
 
@@ -55,18 +58,20 @@ document.getElementById('minify').onclick = () => {
     for (let coordinates in matrixMarks) {
       const x = parseInt(coordinates.substring(0, coordinates.indexOf("|")), 10);
       const y = parseInt(coordinates.split('|').pop(), 10);
+      // to ensure that max opacity is used
+      const opacity = (matrixMarks[coordinates] / 10 + (1 - Math.max.apply(null, Object.values(matrixMarks)) / 10));
       console.log('------');
       console.log(`Coordinates: x: ${x} y: ${y}`);
-      console.log(`Opacity of element: ${matrixMarks[coordinates]}`);
+      console.log(`Opacity of element: ${opacity}`);
       console.log(`Element id: ${x * 4 + y + 1}`);
       console.log(`KV-based id: ${document.querySelector(`[data-id="${x * 4 + y + 1}"]`).getAttribute('id')}`);
-      document.querySelector(`[data-id="${x * 4 + y + 1}"]`).style.background = `rgba(0, 100, 0, 0.${matrixMarks[coordinates]})`;
+      document.querySelector(`[data-id="${x * 4 + y + 1}"]`).style.background = `rgba(0, 100, 0, ${opacity})`;
     }
 
     console.log(matrixMarks);
     console.log(matrix);
   } catch (err) {
     console.error(err);
-    alert('Oh, da ist wohl was schiefgelaufen, bitte probieren Sie es noch einmal :)');
+    //alert('Oh, da ist wohl was schiefgelaufen, bitte probieren Sie es noch einmal :)');
   }
 };
diff --git a/generator.html b/generator.html
index 7498ebf..f172e8b 100644
--- a/generator.html
+++ b/generator.html
@@ -26,10 +26,16 @@
     <p>
         Es dürfen <u>NUR</u> die Variablen a, b, c und d und die Abel Schreibweise verwendet werden.
     </p>
-    <label for="input">Boolescher Funktionsterm:</label>
+    <p>
+        Wahre Werte werden zur Veranschaulichung grün hinterlegt und in Abhängigkeit der
+        umliegenden Werte (Matrix Neighbours) heller bzw. dunkler.
+    </p>
+    <p>
+        Mehr Informationen zur Kalkulation sind in <b>F12->Konsole</b> aufrufbar.
+    </p>
+    <label for="input"><b>Boolescher Funktionsterm:</b></label>
     <input id="input" placeholder="z.B. (a & b) # (c & d)" type="text">
-    <button id="minify">Generieren!</button>
-
+    <br>
     <pre id="log"></pre>
 
     <div class="kv-grid">