refresh-screen.js

// Name: Refresh Screen

import "@johnlindquist/kit"

await widget(`
<style>
body, html {
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden;
}
</style>

<script>
  console.log('refreshing screen');

  // Create a canvas element that fills the entire window
  const canvas = document.createElement('canvas');
  const root = document.getElementById("__widget-container");
  
  let width = canvas.width = window.innerWidth;
  let height = canvas.height = window.innerHeight;
  
  document.getElementById("__widget-container").appendChild(canvas);

  // Get the canvas context and set the pixel size
  const ctx = canvas.getContext('2d');
  const pixelSize = 10;

  // Draw random colored pixels
  function drawPixels() {
    if (width !== window.innerWidth || height !== window.innerHeight) {
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
    }

    // Loop through each pixel and fill it with a random color
    const p = pixelSize;

    for (let x = 0; x < canvas.width; x += p) {
      for (let y = 0; y < canvas.height; y += p) {
        let r = Math.floor(Math.random() * 256);
        let g = Math.floor(Math.random() * 256);
        let b = Math.floor(Math.random() * 256);
        ctx.fillStyle = 'rgb(' + r + ',' + g + ',' + b + ')';
        ctx.fillRect(x, y, p, p);
      }
    }

    window.requestAnimationFrame(drawPixels);
  }

  drawPixels();
</script>
`, {
  center: true,
  resizable: true,
  movable: true,
  fullscreenable: true,
  fullscreen: false,
  draggable: true,
  alwaysOnTop: true
});