index.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>clutter - palette animation editor</title>
<link rel="stylesheet" href="./src/style.css">
</head>
<body>
<div id="app">

  <div id="toolbar">
    <label>Import <input type="file" id="file-png" accept="image/png,application/json,.json" class="hidden"></label>
    <button id="btn-import" title="A PNG to import, or a .clutter.json project to open">Open&hellip;</button>
    <button id="btn-save" title="Save the project as JSON">Save</button>
    <button id="btn-export" title="Export image data, palettes, a TIM or a text template">Export&hellip;</button>
    <span class="sep"></span>
    <button id="open-format" title="Change colour format">Format&hellip;</button>
    <span class="sep"></span>
    <button id="btn-play">Play</button>
    <label>fps <input type="number" id="fps-input" min="1" max="240" step="1" value="60"></label>
    <span class="sep"></span>
    <span id="zoom-label" style="min-width:48px;text-align:center">100%</span>
    <button id="btn-zoom-out">-</button>
    <button id="btn-zoom-in">+</button>
    <button id="btn-fit">Fit</button>
    <button id="btn-1to1">1:1</button>
    <span class="grow"></span>
    <span id="format-change-note" class="note"></span>
    <a id="btn-manual" href="https://tools.psx.dev/clutter/manual/" target="_blank" rel="noopener">Manual</a>
  </div>

  <div id="main">
    <div id="canvas-wrap">
      <canvas id="canvas"></canvas>
      <div id="readout"></div>
      <div id="import-hint">Open a PNG to begin, or drop one here. An indexed PNG keeps its own palette; anything truecolour is quantized. A saved .clutter.json project opens the same way.</div>
    </div>

    <div id="right">
      <h2>Palette</h2>
      <div id="palette-grid"><canvas id="palette-canvas"></canvas></div>
      <div class="note" id="palette-empty">No image loaded.</div>

      <div id="gen-buttons">
        <button id="open-cycle">Colour cycle&hellip;</button>
        <button id="open-hsb">HSB ramp&hellip;</button>
        <button id="open-interp">Interpolate&hellip;</button>
      </div>
      <div id="gen-buttons2">
        <button id="run-setall" title="Write the selected entries' colours into every selected frame">Set for all</button>
        <button id="open-copyfrom">Copy from&hellip;</button>
        <button id="open-phase">Phase shift&hellip;</button>
      </div>

      <div id="entry-editor" class="hidden">
        <div class="slider-row">
          <label for="e-r">R</label>
          <input type="range" id="e-r-range" min="0" max="255" step="1">
          <input type="number" id="e-r" min="0" max="255" step="1">
        </div>
        <div class="slider-row">
          <label for="e-g">G</label>
          <input type="range" id="e-g-range" min="0" max="255" step="1">
          <input type="number" id="e-g" min="0" max="255" step="1">
        </div>
        <div class="slider-row">
          <label for="e-b">B</label>
          <input type="range" id="e-b-range" min="0" max="255" step="1">
          <input type="number" id="e-b" min="0" max="255" step="1">
        </div>
        <div class="slider-row" id="e-a-row">
          <label for="e-a">A</label>
          <input type="range" id="e-a-range" min="0" max="255" step="1">
          <input type="number" id="e-a" min="0" max="255" step="1">
        </div>
        <label id="e-stp-row"><input type="checkbox" id="e-stp"> STP (semi-transparency flag)</label>
        <div class="field"><span class="k">packed</span><span class="v"><input type="text" id="e-hex" style="width:100px;text-align:right"></span></div>
        <p class="warn-text hidden" id="e-diagnose"></p>
      </div>



    </div>
  </div>

  <div id="frame-strip"><canvas id="strip-canvas"></canvas></div>
  <div id="frame-strip-controls">
    <button id="f-insert">Insert</button>
    <button id="f-delete">Delete</button>
    <button id="f-duplicate">Duplicate</button>
    <button id="f-move-left">&larr; Move</button>
    <button id="f-move-right">Move &rarr;</button>
    <span class="sep"></span>
    <label>hold <input type="number" id="f-hold" min="1" step="1" value="1"></label>
    <span class="sep"></span>
    <label title="How playback repeats. The loop point is hidden while this is off, and remembered.">loop
      <select id="f-loop-mode"></select>
    </label>
    <button id="f-loop-set">Set loop here</button>
  </div>

  <div id="status-bar">
    <span id="s-frames">0 frames</span>
    <span id="s-frame"></span>
    <span id="s-loop">no loop</span>
    <span id="s-hover"></span>
    <span class="grow"></span>
    <span id="s-msg"></span>
  </div>
</div>

<dialog id="dlg-cycle" class="generator-dialog">
  <form method="dialog"><button class="dlg-close" aria-label="Close">&times;</button></form>
  <h3>Colour cycle</h3>
        <p class="note" id="g-cycle-target">Cycles the palette entries you have selected.</p>
        <div class="row">
          <label title="Signed places to shift per frame. 1 is one place a frame, 0.5 is one every two frames, negative runs backwards.">increment
            <input type="number" id="g-cycle-inc" step="0.05" value="1">
          </label>
          <label title="Off: colours fall off the end and the vacated slots repeat their neighbour."><input type="checkbox" id="g-cycle-wrap" checked> wrap</label>
        </div>
        <div class="row">
          <label>steps <input type="number" id="g-cycle-steps" min="1" value="1"></label>
        </div>
        <div class="note" id="g-cycle-distinct"></div>
        <button id="g-cycle-run">Generate</button>
        <div class="note" id="g-cycle-stalled"></div>

</dialog>

<dialog id="dlg-hsb" class="generator-dialog">
  <form method="dialog"><button class="dlg-close" aria-label="Close">&times;</button></form>
  <h3>HSB ramp</h3>
        <p class="note">Each parameter ramps from its first value to its second across the run. Leave both equal to hold it still.</p>
        <div class="row">
          <label>hue + <input type="number" id="g-hsb-hue-from" step="1" value="0"></label>
          <label>to <input type="number" id="g-hsb-hue-to" step="1" value="360"></label>
        </div>
        <div class="row">
          <label>saturation &times; <input type="number" id="g-hsb-sat" min="0" step="0.05" value="1"></label>
          <label>to <input type="number" id="g-hsb-sat-to" min="0" step="0.05" value="1"></label>
        </div>
        <div class="row">
          <label>brightness &times; <input type="number" id="g-hsb-val" min="0" step="0.05" value="1"></label>
          <label>to <input type="number" id="g-hsb-val-to" min="0" step="0.05" value="1"></label>
        </div>
        <div class="row">
          <label>easing <select id="g-hsb-easing"></select></label>
        </div>
        <div class="row">
          <label id="g-hsb-steps-row">steps <input type="number" id="g-hsb-steps" min="1" value="12"></label>
          <label><input type="checkbox" id="g-hsb-closed"> closed</label>
        </div>
        <div class="row ps1-only" id="g-hsb-black-row">
          <label title="RGB5551 reads 0x0000 as fully transparent, so a generated colour that lands on solid black is replaced with this instead.">black becomes
            <input type="text" id="g-hsb-black" value="0x0421" size="8" spellcheck="false">
          </label>
        </div>
        <div class="note" id="g-hsb-distinct"></div>
        <button id="g-hsb-run">Generate</button>
        <div class="note" id="g-hsb-stalled"></div>

</dialog>

<dialog id="dlg-interp" class="generator-dialog">
  <form method="dialog"><button class="dlg-close" aria-label="Close">&times;</button></form>
  <h3>Interpolate</h3>
        <p class="note" id="g-interp-target"></p>
        <div class="row">
          <label title="New frames put into every gap between adjacent frames.">frames per gap
            <input type="number" id="g-interp-count" min="1" max="64" step="1" value="1">
          </label>
          <label>easing <select id="g-interp-easing"></select></label>
        </div>
        <div class="row ps1-only" id="g-interp-black-row">
          <label title="RGB5551 reads 0x0000 as fully transparent, so an interpolated colour that lands on solid black is replaced with this instead.">black becomes
            <input type="text" id="g-interp-black" value="0x0421" size="8" spellcheck="false">
          </label>
        </div>
        <div class="note" id="g-interp-distinct"></div>
        <button id="g-interp-run">Insert</button>
        <div class="note" id="g-interp-stalled"></div>

</dialog>

<dialog id="dlg-format" class="generator-dialog">
  <form method="dialog"><button class="dlg-close" aria-label="Close">&times;</button></form>
  <h3>Colour format</h3>
  <div class="row">
    <label>format <select id="format-select"></select></label>
  </div>
  <div class="row" id="colors-row">
    <label title="Palette size used when quantizing this image">colours <input type="number" id="colors-input" min="2" max="256" step="1" value="16"></label>
  </div>
  <p class="note" id="format-dialog-note"></p>
  <button id="format-apply">Apply</button>
</dialog>

<dialog id="dlg-discard" class="generator-dialog">
  <h3>Unsaved changes</h3>
  <p>This animation has changes that are not saved anywhere. Importing <b id="discard-what"></b> will discard them.</p>
  <div class="row">
    <button id="discard-yes">Discard and import</button>
    <button id="discard-no">Cancel</button>
  </div>
</dialog>

<dialog id="dlg-copyfrom" class="generator-dialog">
  <form method="dialog"><button class="dlg-close" aria-label="Close">&times;</button></form>
  <h3>Copy from</h3>
  <div class="row">
    <label title="Read per frame, so a source colour that animates carries its animation across.">source entry <input type="number" id="cf-index" min="0" step="1" value="0"></label>
  </div>
  <p class="note" id="cf-note"></p>
  <button id="cf-run">Copy</button>
</dialog>

<dialog id="dlg-phase" class="generator-dialog">
  <form method="dialog"><button class="dlg-close" aria-label="Close">&times;</button></form>
  <h3>Phase shift</h3>
  <div class="row">
    <label title="Frames to shift the first selected entry by. Negative shifts the other way.">shift <input type="number" id="ph-shift" step="1" value="1"></label>
    <label title="Extra frames per selected entry, floored. Base 2 with increment 0.5 shifts the first two entries by 2 and the next two by 3.">increment <input type="number" id="ph-inc" step="0.05" value="0"></label>
  </div>
  <div class="row">
    <label title="Off: entries shifted past the end are dropped and the vacated frames repeat their neighbour."><input type="checkbox" id="ph-wrap" checked> wrap</label>
  </div>
  <p class="note" id="ph-note"></p>
  <button id="ph-run">Shift</button>
</dialog>

<dialog id="dlg-export" class="generator-dialog">
  <form method="dialog"><button class="dlg-close" aria-label="Close">&times;</button></form>
  <h3>Export</h3>
  <div class="row">
    <label>what
      <select id="ex-what">
        <option value="raw">raw image data</option>
        <option value="palettes">palette sequence</option>
        <option value="tim">multi-palette .tim</option>
        <option value="clt">palettes only .clt</option>
        <option value="text">text template</option>
      </select>
    </label>
  </div>
  <div class="row ps1-only" id="ex-clut-row">
    <label title="Palettes placed side by side before wrapping to the row below. 1 stacks them vertically.">palettes per row
      <input type="number" id="ex-per-row" min="1" max="256" step="1" value="1">
    </label>
  </div>
  <div class="row" id="ex-template-row">
    <label style="flex:1">template
      <textarea id="ex-template" rows="8" spellcheck="false" style="width:100%"></textarea>
    </label>
  </div>
  <p class="note" id="ex-note"></p>
  <button id="ex-run">Export</button>
</dialog>

<script type="module" src="./src/main.ts"></script>
</body>
</html>