-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Digger/Elysium
committed
Jan 8, 2024
1 parent
05ba22b
commit afccc89
Showing
8 changed files
with
143 additions
and
29 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 <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 </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="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/process-image.js"></script><script src="js/file-upload.js"></script><script src="js/main.js"></script></body></html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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.'); | ||
} | ||
} | ||
|
||
}; |
Oops, something went wrong.