Pushed 0.6.1

og2t · Jan 8, 2024 · afccc89 · afccc89
1 parent 05ba22b
commit afccc89
Show file tree

Hide file tree

Showing 8 changed files with 143 additions and 29 deletions.
diff --git a/css/collapsible.css b/css/collapsible.css
diff --git a/css/image-drop.css b/css/image-drop.css
diff --git a/css/styles.css b/css/styles.css
diff --git a/index.html b/index.html
@@ -1 +1 @@
-<!DOCTYPE html><html><head><meta charset="utf-8"><title>C64 Palette Explorer</title><link rel="stylesheet" href="css/styles.css"><link rel="stylesheet" href="css/collapsible.css"></head><body><h1><strike>Retro</strike> C64 Palette Explorer v0.53</h1><p>by Digger/Elysium © 2016-24</p><div id="canvas-container"><canvas id="canvas"></canvas><canvas id="canvas-alt"></canvas></div><div class="collabsible-wrapper"><input id="collapsible" type="checkbox" checked="true" class="toggle"><label for="collapsible" tabindex="0" class="lbl-toggle">Export</label><div class="collapsible-content"><textarea id="output"></textarea><a id="downloadlink" download="timanthes.txt" style="display: none">Download Timanthes palette</a></div></div><label for="sort">Sort by</label><select id="sort"><option value="">Unsorted</option><option value="luma" selected>Luma</option><option value="mixIndex">Mix Index</option><option value="distance,luma">Distance, Luma</option><option value="diffLuma">Luma Difference</option><option value="diffLuma,distance">Luma Difference, Distance</option><option value="h">Hue</option><option value="h,luma">Hue, Luma</option><option value="s">Saturation</option><option value="luma,s">Luma, Saturation</option><option value="distTo0">Closest to $0</option><option value="distTo1">Closest to $1</option><option value="distTo2">Closest to $2</option><option value="distTo3">Closest to $3</option><option value="distTo4">Closest to $4</option><option value="distTo5">Closest to $5</option><option value="distTo6">Closest to $6</option><option value="distTo7">Closest to $7</option><option value="distTo8">Closest to $8</option><option value="distTo9">Closest to $9</option><option value="distToA">Closest to $A</option><option value="distToB">Closest to $B</option><option value="distToC">Closest to $C</option><option value="distToD">Closest to $D</option><option value="distToE">Closest to $E</option><option value="distToF">Closest to $F</option><option value="distToRed">Closest to R</option><option value="distToGreen">Closest to G</option><option value="distToBlue">Closest to B</option></select><label for="palette">Palette</label><select id="palette"><option value="PEPTO">Pepto</option><option value="PICO8">PICO-8</option><option value="JAMPAL">JamPal</option><option value="AGONY">Agony</option><option value="DEEKAY">Deekay</option><option value="C64_HQ">C64 HQ</option></select><label for="dither">Dither</label><select id="dither"><option value="noDither">mix</option><option value="hiresDither" selected>hires</option><option value="multiDither">multi</option><option value="lineDither">line</option><option value="lace">lace</option></select><label for="slider">Luma Diff Threshold</label><input id="slider" type="range" min="0" max="1" step="0.01" value="1"><input id="text" type="text" value="1"><input id="exclude" type="checkbox" name="exclude"><label for="exclude">Hide mixed</label><input id="swap" type="checkbox" name="swap" checked="true"><label for="swap">Align</label><table id="table"></table><script src="js/log.js"></script><script src="js/hdpi.js"></script><script src="js/palettes.js"></script><script src="js/file-saver.js"></script><script src="js/sort-utils.js"></script><script src="js/color-utils.js"></script><script src="js/main.js"></script></body></html>
+<!DOCTYPE html><html><head><meta charset="utf-8"><title>C64 Palette Explorer</title><link rel="stylesheet" href="css/styles.css"><link rel="stylesheet" href="css/collapsible.css"><link rel="stylesheet" href="css/image-drop.css"></head><body><h1><strike>Retro</strike> C64 Palette Explorer v0.6.1</h1><p>by Digger/Elysium © 2016-24</p><div class="side-panel"><input id="collapsible-preview" type="checkbox" checked class="toggle"><label for="collapsible-preview" tabindex="0" class="lbl-toggle">Preview</label><div class="collapsible-content"><div id="canvas-container"><canvas id="canvas"></canvas><canvas id="canvas-alt"></canvas></div></div><input id="collapsible-image" type="checkbox" checked class="toggle"><label for="collapsible-image" tabindex="0" class="lbl-toggle">Image conversion</label><div class="collapsible-content"><div id="drop-area" onDragOver="FileUpload.handleDragOver(event)" onDragLeave="FileUpload.handleDragLeave(event)" onDrop="FileUpload.handleDrop(event)" onClick="document.getElementById('file-input').click()"><label htmlFor="file-input">Drag and drop an image here or click to select one.</label><input type="file" id="file-input" accept="image/*" style="display:none" onChange="FileUpload.handleFileSelect(event)"></div><div id="image-container"><img id="image-preview" alt="Image Preview" style="display:none"><canvas id="image-1"></canvas><canvas id="image-2"></canvas></div></div><input id="collapsible" type="checkbox" class="toggle"><label for="collapsible" tabindex="0" class="lbl-toggle">Palette export <label for="palette">Format&nbsp;<select id="palette"><option value="TIMANTHES">Timanthes</option></select></label></label><div class="collapsible-content"><textarea id="output"></textarea><a id="downloadlink" download="timanthes.txt" style="display: none">Download Timanthes palette</a></div></div><label for="sort">Sort by&nbsp;</label><select id="sort"><option value="">Unsorted</option><option value="luma" selected>Luma</option><option value="mixIndex">Mix Index</option><option value="distance,luma">Distance, Luma</option><option value="diffLuma">Luma Difference</option><option value="diffLuma,distance">Luma Difference, Distance</option><option value="h">Hue</option><option value="h,luma">Hue, Luma</option><option value="s">Saturation</option><option value="luma,s">Luma, Saturation</option><option value="distTo0">Closest to $0</option><option value="distTo1">Closest to $1</option><option value="distTo2">Closest to $2</option><option value="distTo3">Closest to $3</option><option value="distTo4">Closest to $4</option><option value="distTo5">Closest to $5</option><option value="distTo6">Closest to $6</option><option value="distTo7">Closest to $7</option><option value="distTo8">Closest to $8</option><option value="distTo9">Closest to $9</option><option value="distToA">Closest to $A</option><option value="distToB">Closest to $B</option><option value="distToC">Closest to $C</option><option value="distToD">Closest to $D</option><option value="distToE">Closest to $E</option><option value="distToF">Closest to $F</option><option value="distToRed">Closest to R</option><option value="distToGreen">Closest to G</option><option value="distToBlue">Closest to B</option></select><label for="palette">Palette&nbsp;</label><select id="palette"><option value="PEPTO">Pepto</option><option value="JAMPAL">JamPal</option><option value="AGONY">Agony</option><option value="DEEKAY">Deekay</option><option value="C64_HQ">C64 HQ</option></select><label for="dither">Dither&nbsp;</label><select id="dither"><option value="noDither">mix</option><option value="hiresDither" selected>hires</option><option value="multiDither">multi</option><option value="lineDither">line</option><option value="lace">lace</option></select><label for="slider">Luma Diff Threshold&nbsp;</label><input id="slider" type="range" min="0" max="1" step="0.01" value="1"><input id="text" type="text" value="1"><input id="exclude" type="checkbox" name="exclude"><label for="exclude">Hide mixed&nbsp;</label><input id="swap" type="checkbox" name="swap" checked="true"><label for="swap">Align&nbsp;</label><table id="table"></table><script src="js/log.js"></script><script src="js/hdpi.js"></script><script src="js/palettes.js"></script><script src="js/file-saver.js"></script><script src="js/sort-utils.js"></script><script src="js/color-utils.js"></script><script src="js/process-image.js"></script><script src="js/file-upload.js"></script><script src="js/main.js"></script></body></html>
diff --git a/js/file-upload.js b/js/file-upload.js
@@ -0,0 +1,50 @@
+var FileUpload;
+
+FileUpload = class FileUpload {
+  static handleDragOver(event) {
+    event.preventDefault();
+    return document.getElementById('drop-area').classList.add('highlight');
+  }
+
+  static handleDragLeave(event) {
+    event.preventDefault();
+    return document.getElementById('drop-area').classList.remove('highlight');
+  }
+
+  static handleDrop(event) {
+    var files;
+    event.preventDefault();
+    document.getElementById('drop-area').classList.remove('highlight');
+    files = event.dataTransfer.files;
+    if (files.length > 0) {
+      return this.handleFile(files[0]);
+    }
+  }
+
+  static handleFileSelect(event) {
+    var files;
+    files = event.target.files;
+    if (files.length > 0) {
+      return this.handleFile(files[0]);
+    }
+  }
+
+  static handleFile(file) {
+    var imagePreview, reader;
+    imagePreview = document.getElementById('image-preview');
+    if (file.type.startsWith('image/')) {
+      reader = new FileReader();
+      reader.onload = function(event) {
+        var data;
+        data = event.target.result;
+        imagePreview.src = data;
+        imagePreview.style = "display: block";
+        return ProcessImage.processImage(data);
+      };
+      return reader.readAsDataURL(file);
+    } else {
+      return alert('Please select a valid image file.');
+    }
+  }
+
+};