From fc95109405cb9a15b90fe666476b363e06bb3910 Mon Sep 17 00:00:00 2001 From: Marvin Borner Date: Sun, 10 Mar 2019 22:37:06 +0100 Subject: Added process of minifying via KV --- assets/css/main.css | 184 ++++++++++++++++++++++++++++++++++ assets/js/process.js | 84 ++++++++++++++++ process.html | 271 +++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 539 insertions(+) create mode 100644 assets/js/process.js create mode 100644 process.html diff --git a/assets/css/main.css b/assets/css/main.css index e69de29..017f084 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -0,0 +1,184 @@ +/* + Variable declarations + */ +:root { + --green: #296431; + --light-grey: #6a6a6a; + --grey: #3d3d3d; +} + +/* + Set global configuration + */ +* { + transition: background-color .5s; +} + +html, body { + font-family: sans-serif; + min-height: 100vh; + max-width: 100vw; + overflow-x: hidden; + padding: 0; + margin: 0; +} + +pre { + float: right; +} + +/* + Navigation bar + */ +.navbar { + width: 100vw; + background: var(--grey); + overflow: hidden; +} + +.navbar a { + display: block; + color: white; + float: left; + text-align: center; + padding: 15px; + text-decoration: none; +} + +.navbar a[data-current] { + background: var(--green) +} + +.navbar a:hover { + background: var(--light-grey) +} + +.navbar a:first-child:hover { + background: var(--grey) +} + +.navbar a[data-current]:hover { + background: var(--green) +} + +/* + Content + */ +.content { + padding: 20px; +} + +.content .heading { + font: normal small-caps normal 24px/1.4 sans-serif; +} + +button { + border: none; + padding: 10px; + color: white; + background: var(--green); +} + +a { + color: var(--green); + text-decoration: none; +} + +p { + margin-bottom: 10px; +} + +li[data-contrast] { + font-size: 24px; + text-shadow: -.5px 0 black, 0 .5px black, 1px 0 black, 0 -.5px black; +} + +.content figure { + text-align: center; + margin: 10px auto; +} + +.content figcaption { + font-size: 12px; +} + +.content .not { + border-top: 1px solid black; +} + +footer { + margin: 10px; +} + +/* + KV-Diagram layout + */ +.true { + color: green; +} + +.false { + color: red; +} + +table * { + text-align: center; +} + +td, th { + border: 1px solid black; + padding: 5px; +} + +td.output { + background-color: lightgrey; +} + +.kv-grid { + display: grid; + grid-template-columns: repeat(6, 1fr); + justify-items: center; + align-items: center; + width: calc(50px * 6); + height: calc(50px * 6); +} + +.kv-grid div { + display: flex; + justify-content: center; + align-items: center; + width: 50px; + height: 50px; + text-align: center; + border-left: 1px solid black; + border-bottom: 1px solid black; +} + +.grid-child:nth-child(1), .grid-child:nth-child(6), .grid-child:nth-child(31), .grid-child:nth-child(36), +.grid-child:nth-child(2), .grid-child:nth-child(5), .grid-child:nth-child(7), .grid-child:nth-child(25) { + border: 0; +} + +.grid-child:nth-child(4), .grid-child:nth-child(12), .grid-child:nth-child(24) { + border-top: 0; + border-right: 0; +} + +.grid-child:nth-child(18), .grid-child:nth-child(30), .grid-child:nth-child(33), .grid-child:nth-child(35) { + border-bottom: 0; + border-right: 0; +} + +.grid-child:nth-child(3), .grid-child:nth-child(13) { + border-top: 0; + border-left: 0; +} + +.grid-child:nth-child(19), .grid-child:nth-child(34), .grid-child:nth-child(32) { + border-bottom: 0; + border-left: 0; +} + +.grid-child:nth-child(2), .grid-child:nth-child(5) { + border-bottom: 1px solid black; +} diff --git a/assets/js/process.js b/assets/js/process.js new file mode 100644 index 0000000..988d9bf --- /dev/null +++ b/assets/js/process.js @@ -0,0 +1,84 @@ +/** + * Fill the diagram with 1s and 0s (animated) + */ +document.getElementById('fill').onclick = () => { + document.getElementById('combine').style.display = 'block'; + const elements = document.getElementsByClassName('output'); + + // reset diagram + for (let i = 0; i < elements.length; i++) { + document.getElementById(i + 1).innerText = ''; + } + + // fill diagram + for (let i = 0; i < elements.length; i++) { + ((ind) => { // awesome animation + setTimeout(() => { + document.getElementById(i + 1).innerText = elements[i].classList.contains('true') ? '1' : '0'; + }, 150 * ind) + })(i) + } +}; + +/** + * Combining fields to blocks (animated) + */ +document.getElementById('combine').onclick = () => { + document.getElementById('fill').style.display = 'none'; + document.getElementById('combine').innerText = 'Weiter'; + const steps = document.getElementById('steps'); + const elements = document.getElementsByClassName('grid-child'); + + // mark truthy values + steps.insertAdjacentHTML('beforeend', '
  • Finden von wahren Werten (grün markiert)
    • '); + for (let i = 0; i < elements.length; i++) { + if (elements[i].getAttribute('id') !== null && elements[i].innerText === '1') { + elements[i].style.background = 'lightgreen' + } + } + + // combine fields - stage 1 + document.getElementById('combine').onclick = () => { + steps.insertAdjacentHTML('beforeend', '
  • Felder zu Blöcken zusammenfassen
    • '); + const fieldDnf = document.getElementById('field_dnf'); + + // reset field color + for (let i = 0; i < elements.length; i++) { + elements[i].style.background = 'white' + } + + document.getElementById('3').style.background = 'green'; + document.getElementById('4').style.background = 'green'; + document.getElementById('11').style.background = 'green'; + document.getElementById('12').style.background = 'green'; + + fieldDnf.insertAdjacentHTML('beforeend', '
  • (E2∧E3)
    • '); + + // combine fields - stage 2 + document.getElementById('combine').onclick = () => { + document.getElementById('11').style.background = 'linear-gradient(to top right, blue, green)'; + document.getElementById('15').style.background = 'blue'; + + fieldDnf.insertAdjacentHTML('beforeend', '
  • (E1∧E2∧E4)
    • '); + + // combine fields - stage 3 + document.getElementById('combine').onclick = () => { + document.getElementById('6').style.background = 'orange'; + + fieldDnf.insertAdjacentHTML('beforeend', + '
  • (E1∧E2∧E3E4)
    • '); + + document.getElementById('combine').style.display = "none"; + } + }; + }; +}; + +/** + * Scroll up magic + */ +const button = document.getElementById('up'); +const options = {top: 0, left: 0, behavior: 'smooth'}; +button.addEventListener('click', () => { + window.scroll(options) +}); diff --git a/process.html b/process.html new file mode 100644 index 0000000..7b0135b --- /dev/null +++ b/process.html @@ -0,0 +1,271 @@ + + + + + + + + KV-Diagramme + + + + +
    +

    Ablauf

    +

    + Das Minimieren eines booleschen Ausdrucks beginnt mit einer ausgefüllten Wahrheitstabelle, + mit deren Ausgangswerten daraufhin eine KV-Tafel erstellt wird und wie im folgenden + Beispiel erklärt, die disjunktive Normalform ausgelesen wird. +

    + +

    Beispielsablauf:

    +
      +
    1. +

      Wahrheitstabelle:

      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      E4E3E2E1ZDNF
      00000
      00010
      00101(E1∧E2∧E3∧E4) +
      00111(E1∧E2∧E3∧E4) +
      01000
      01011(E1∧E2∧E3∧E4) +
      01100
      01110
      10000
      10010
      10101(E1∧E2∧E3∧E4) +
      10111(E1∧E2∧E3∧E4) +
      11000
      11010
      11101(E1∧E2∧E3∧E4) +
      11110
      +
      2. + +
    2. +

      Disjunktive Normalform ablesen (zum vergleichen):

      +

      + Z = + (E1∧E2∧E3∧E4)∨ + (E1∧E2∧E3∧E4)∨ + (E1∧E2∧E3∧E4)∨ + (E1∧E2∧E3∧E4)∨ + (E1∧E2∧E3∧E4)∨ + (E1∧E2∧E3∧E4) +

      +
      3. + +
    3. +

      KV-Diagramm zeichnen und mit den Z Werten aus der Wahrheitstabelle + füllen:

      + +
      +
      +
      E1
      +
      E1
      +
      !E1
      +
      !E1
      +
      +
      E2
      +
      +
      +
      +
      +
      !E4
      +
      E2
      +
      +
      +
      +
      +
      E4
      +
      !E2
      +
      +
      +
      +
      +
      E4
      +
      !E2
      +
      +
      +
      +
      +
      !E4
      +
      +
      !E3
      +
      E3
      +
      E3
      +
      !E3
      +
      +
      +
      4. + +
    4. +

      Felder mit Beachtung der Regeln zusammenfassen:

      +
        + +
        1. + +
      1. +

        Disjunktive Normalform erstellen:

        +

        + Z = (E2∧E3)∨ + (E1∧E2∧E4)∨ + (E1∧E2∧E3 + E4) +

        +
        2. +
      + + + > Hinweise +
      + + + + + + -- cgit v1.2.3