Wijzigen voor document Tekenveld

Laatst gewijzigd door Jeeves de Butler op 23-10-2026 02:42

Manage
- Kopiëren
Actions
- Export
- Afdrukvoorbeeld
Viewers
- Bekijk Bron
- Zusjes
- Inhoud
- Opmerkingen
- Bijlagen
- Historie
- Informatie
- Likes

From 6.1 to 5.1 From 9.1 to 8.1

Van versie 8.1

gewijzigd door Jeeves de Butler
op 19-10-2026 01:23

Opmerking bij wijziging: Er is geen opmerking bij deze versie

Naar versie 6.1

gewijzigd door Jeeves de Butler
op 16-10-2026 12:29

Opmerking bij wijziging: Er is geen opmerking bij deze versie

Raw
Rendered

Samenvatting

Objecten (2 gewijzigd, 0 toegevoegd, 0 verwijderd)
- XWiki.JavaScriptExtension[0]
- XWiki.StyleSheetExtension[0]

Details

XWiki.JavaScriptExtension[0]

code

@@ -1,5 +1,5 @@
  /* Tekenveld voor de Kennisbank. Gemaakt met maak-tekenveld.js uit de skill xwiki-wardenburg-admin.
--   Engine: Ember src/lib/glyphField.js, commit 83ea536. Niet hier wijzigen: pas de bron aan en maak opnieuw. */
++   Engine: Ember src/lib/glyphField.js, commit 2af047d. Niet hier wijzigen: pas de bron aan en maak opnieuw. */
  (function () {
  "use strict";
  // /src/lib/glyphField.js
@@ -258,11 +258,9 @@
    const styles = getComputedStyle(root);
    const text = styles.getPropertyValue("--text").trim() || "#111827";
    const accent = styles.getPropertyValue("--brand-red").trim() || "#e62b27";
--  // Een eigen kleur voor de hartslaglijn (ECG); zonder --glyph-line is dat het accent, zoals in Ember.
--  const line = styles.getPropertyValue("--glyph-line").trim() || accent;
    // :root zonder attribuut is in Ember donker; zie layout.css.
    const mode = root.getAttribute("data-appearance") === "light" ? "light" : "dark";
--  return { text, accent, line, mode };
++  return { text, accent, mode };
  }
  /* De tekens van een thema: een niet-lege lijst van hooguit 256 tekens (de index staat in een Uint8Array). */
@@ -307,12 +307,9 @@
    let trail = new Float32Array(0);
    let pulse = new Float32Array(0);
    let streak = new Float32Array(0);
--  // Het spoor van de hartslaglijn apart van dat van de smileys, zodat de lijn een eigen kleur kan hebben.
--  let lineTrail = new Float32Array(0);
    let quiet = new Float32Array(0);
    let neutralAtlas = null;
    let accentAtlas = null;
--  let lineAtlas = null;
    let yellowAtlas = null;
    let orangeAtlas = null;
    let smokeAtlas = null;
@@ -361,7 +361,6 @@
    function buildAtlases() {
      neutralAtlas = buildAtlas(theme.text);
      accentAtlas = buildAtlas(theme.accent);
--    lineAtlas = theme.line === theme.accent ? accentAtlas : buildAtlas(theme.line);
      // Vuurkleuren voor de explosie.
      yellowAtlas = buildAtlas(theme.mode === "light" ? "#eab308" : "#facc15");
      orangeAtlas = buildAtlas("#f97316");
@@ -393,7 +393,6 @@
      trail = new Float32Array(cols * rows);
      pulse = new Float32Array(cols * rows);
      streak = new Float32Array(cols * rows);
--    lineTrail = new Float32Array(cols * rows);
      quiet = new Float32Array(cols * rows);
      minC = minR = 1;
      maxC = maxR = 0;
@@ -405,7 +405,7 @@
    function applyTheme() {
      const next = readTheme();
--    if (next.text === theme.text && next.accent === theme.accent && next.line === theme.line && next.mode === theme.mode) return;
++    if (next.text === theme.text && next.accent === theme.accent && next.mode === theme.mode) return;
      theme = next;
      buildAtlases();
      lastAmbient = -Infinity;
@@ -632,7 +632,7 @@
        const phase = x / ecg.beatWidth + ecg.offset;
        const y = ecg.baseY - (ecgShape(phase % 1) * beatScale(ecg, Math.floor(phase)) + wander) * ecg.amplitude;
        if (Math.hypot(x - ecg.stampX, y - ecg.stampY) >= options.ecgRadius * 0.3) {
--        stamp(x, y, options.ecgRadius, options.ecgStrength, true, lineTrail);
++        stamp(x, y, options.ecgRadius, options.ecgStrength, true, streak);
          ecg.stampX = x;
          ecg.stampY = y;
        }
@@ -808,9 +808,8 @@
          let heat = trail[index];
          let beat = pulse[index];
          let flash = streak[index];
--        let pulseLine = lineTrail[index];
          let hush = quiet[index];
--        if (heat <= 0 && beat <= 0 && flash <= 0 && pulseLine <= 0 && hush <= 0) continue;
++        if (heat <= 0 && beat <= 0 && flash <= 0 && hush <= 0) continue;
          if (heat > 0) {
            heat *= decay;
@@ -827,17 +827,12 @@
            if (flash < 0.03) flash = 0;
            streak[index] = flash;
          }
--        if (pulseLine > 0) {
--          pulseLine *= streakDecay;
--          if (pulseLine < 0.03) pulseLine = 0;
--          lineTrail[index] = pulseLine;
--        }
          if (hush > 0) {
            hush *= streakDecay;
            if (hush < 0.03) hush = 0;
            quiet[index] = hush;
          }
--        if (heat === 0 && beat === 0 && flash === 0 && pulseLine === 0 && hush === 0) continue;
++        if (heat === 0 && beat === 0 && flash === 0 && hush === 0) continue;
          if (c < nextMinC) nextMinC = c;
          if (c > nextMaxC) nextMaxC = c;
@@ -845,7 +845,7 @@
          if (r > nextMaxR) nextMaxR = r;
          // Onder het spoor en de hartslag wisselen de tekens snel.
--        if (dt > 0 && Math.random() < (heat * 9 + beat * 5 + (flash + pulseLine) * 6) * dt) glyphs[index] = randomGlyph();
++        if (dt > 0 && Math.random() < (heat * 9 + beat * 5 + flash * 6) * dt) glyphs[index] = randomGlyph();
          // Een verse ring is roder dan het spoor; verder weg is hij al zwakker en daarmee
          // vanzelf grijzer.
@@ -859,10 +859,9 @@
          const x = cellX(c);
          const sx = glyphs[index] * tileW;
          // Achter een smiley wordt het rustende veld stilgezet (hush), zodat het gezicht
--        // niet in de wolken verdwijnt. De smileys (flash) en de hartslaglijn (pulseLine) zijn vooral rood; de lijn in --glyph-line.
--        const neutral = ambient[index] * calm * (1 - lift) * (1 - hush) + neutralMax * lift + streakNeutral * Math.max(flash, pulseLine);
++        // niet in de wolken verdwijnt. De lijn en de smileys (flash) zijn vooral rood.
++        const neutral = ambient[index] * calm * (1 - lift) * (1 - hush) + neutralMax * lift + streakNeutral * flash;
          const red = Math.max(glow * glow * accentMax, flash * streakAccent);
--        const lineRed = pulseLine * streakAccent;
          ctx.clearRect(x, y, tileW, tileH);
          if (neutral >= MIN_ALPHA) {
            ctx.globalAlpha = neutral;
@@ -872,10 +872,6 @@
            ctx.globalAlpha = Math.min(1, red);
            ctx.drawImage(accentAtlas, sx, 0, tileW, tileH, x, y, tileW, tileH);
          }
--        if (lineRed > 0.01) {
--          ctx.globalAlpha = Math.min(1, lineRed);
--          ctx.drawImage(lineAtlas, sx, 0, tileW, tileH, x, y, tileW, tileH);
--        }
        }
      }
@@ -1204,7 +1204,6 @@
        fallers = null;
        canvas.style.transform = "";
        streak.fill(0);
--      lineTrail.fill(0);
        quiet.fill(0);
        minC = minR = 1;
        maxC = maxR = 0;
@@ -1306,13 +1306,6 @@
  // beeldverkeer op de terminalserver); bij de eerste beweging loopt het weer.
  const KB_STILSTAND_MS = 60000;
--// De explosie van de engine: vijf klikken op de lege achtergrond binnen 1,6 seconde, met een
--// nasleep van een minuut. Dezelfde getallen als de standaard van de engine; hier alleen om
--// tijdens de explosie het vervagen naar het midden weg te halen en het veld wakker te houden.
--const KB_BOEM_KLIKKEN = 5;
--const KB_BOEM_VENSTER_MS = 1600;
--const KB_BOEM_DUUR_MS = 62000;
--
  function kbTekenveld() {
    // Alleen op de startpagina; de extensie wordt ook alleen daar geladen.
    if (!document.querySelector(".wb-home")) return;
@@ -1325,59 +1325,29 @@
    canvas.setAttribute("aria-hidden", "true");
    document.body.prepend(canvas);
--  const isAchtergrond = (event) => event.target instanceof Element && !event.target.closest(KB_NIET_ACHTERGROND);
    const opties = {
      ...glyphFieldSettings({ intensity: "lijst" }),
--    isBackground: isAchtergrond,
++    // Geen atoomexplosie op de Kennisbank.
++    nukeClicks: Infinity,
++    isBackground: (event) => event.target instanceof Element && !event.target.closest(KB_NIET_ACHTERGROND),
      obstacles: () => Array.from(document.querySelectorAll(KB_BLOKKEN), (element) => element.getBoundingClientRect()),
    };
    let veld = null;
    let rustTimer = 0;
--  let klikken = [];
--  let boemTot = 0;
--  function slaap() {
--    // Tijdens een explosie niet: de nasleep duurt een minuut, ook zonder muis.
--    if (Date.now() < boemTot) {
--      rustTimer = window.setTimeout(slaap, boemTot - Date.now());
--      return;
--    }
--    // Het laatste beeld blijft staan; alleen de animatie stopt.
--    veld.destroy();
--    veld = null;
--  }
--
--  // De klik die een slapend veld wekt, ziet de engine zelf niet (hij luistert pas daarna);
--  // die telt hier dus ook niet mee, anders lopen de twee tellers uiteen.
--  let wekklik = null;
--
--  function wakker(event) {
--    if (!veld) {
--      veld = createGlyphField(canvas, opties);
--      wekklik = event || null;
--    }
++  function wakker() {
++    if (!veld) veld = createGlyphField(canvas, opties);
      window.clearTimeout(rustTimer);
--    rustTimer = window.setTimeout(slaap, KB_STILSTAND_MS);
++    rustTimer = window.setTimeout(() => {
++      // Het laatste beeld blijft staan; alleen de animatie stopt.
++      veld.destroy();
++      veld = null;
++    }, KB_STILSTAND_MS);
    }
--  function telKlik(event) {
--    const nu = Date.now();
--    if (event === wekklik || event.button !== 0 || nu < boemTot || !isAchtergrond(event)) return;
--    klikken = klikken.filter((tijd) => nu - tijd < KB_BOEM_VENSTER_MS);
--    klikken.push(nu);
--    if (klikken.length < KB_BOEM_KLIKKEN) return;
--    klikken = [];
--    boemTot = nu + KB_BOEM_DUUR_MS;
--    // Tijdens de explosie het hele scherm, niet alleen de randen.
--    canvas.classList.add("kb-tekenveld--boem");
--    window.setTimeout(() => canvas.classList.remove("kb-tekenveld--boem"), KB_BOEM_DUUR_MS);
--  }
--
    window.addEventListener("pointermove", wakker, { passive: true });
--  // Eerst wakker maken, zodat de engine de klik ook krijgt als het veld sliep.
    window.addEventListener("pointerdown", wakker, { passive: true });
--  window.addEventListener("pointerdown", telKlik, { passive: true });
    wakker();
  }

XWiki.StyleSheetExtension[0]

Code

@@ -1,12 +1,10 @@
  /* Tekenveld op de startpagina van de Kennisbank (Wardenburg.Code.Tekenveld); alleen geladen op
     de startpagina. Het canvas ligt achter de inhoud; de vlakken eromheen worden doorzichtig. */
--/* Kleuren voor de engine: de tekstkleur en het donkere oranje (brand-warning) uit het kleurthema;
--   de hartslaglijn in het rood van het thema (brand-danger). */
++/* Kleuren voor de engine: de tekstkleur en het donkere oranje (brand-warning) uit het kleurthema. */
  html {
    --text: #202124;
    --brand-red: #e8920c;
--  --glyph-line: #d0021b;
    background: #ffffff;
  }
@@ -26,18 +26,11 @@
    inset: 0;
    z-index: -1;
    pointer-events: none;
--  /* Naar het midden, waar het zoekveld en de tegels staan, vervaagt het veld tot 40%: het zwakke
--     grijze veld is daar vrijwel weg, de rode hartslaglijn komt er nog doorheen. */
--  -webkit-mask-image: radial-gradient(ellipse 48% 58% at 50% 55%, rgba(0, 0, 0, .4) 45%, #000 100%);
--  mask-image: radial-gradient(ellipse 48% 58% at 50% 55%, rgba(0, 0, 0, .4) 45%, #000 100%);
++  /* Naar het midden, waar het zoekveld en de tegels staan, vervaagt het veld. */
++  -webkit-mask-image: radial-gradient(ellipse 48% 58% at 50% 55%, transparent 45%, #000 100%);
++  mask-image: radial-gradient(ellipse 48% 58% at 50% 55%, transparent 45%, #000 100%);
  }
--/* Tijdens de explosie (vijf snelle klikken) het hele scherm. */
--canvas.kb-tekenveld.kb-tekenveld--boem {
--  -webkit-mask-image: none;
--  mask-image: none;
--}
--
  /* Leesbaarheid: een zachte witte gloed achter de kop, het zoekveld en elke tegel. */
  .wb-zoek > h1,
  .wb-zoek > p,