Mirrors/sf2000
2
0
Fork 0
mirror of https://github.com/vonmillhausen/sf2000.git synced 2024-11-04 17:15:11 +01:00
Code Issues Packages Projects Releases Wiki Activity
9b411a0200
sf2000/tools/genericImageTool.htm

656 lines
36 KiB
HTML
Raw Normal View History

Bigger update... Added a new tool, the Generic Image Tool - allows you to convert SF2000 images to PNG, and PNG/JPEG images to SF2000 formats with several options. Also added a large amount of arcade-specific information thanks to some heroic work by `adcockm#8175`, fixed some typos thanks to `Luke#4448`, and tracked down where an "unused" image was actually being used thanks to `kid_sinn#9691`
2023-05-24 15:07:54 +02:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Data Frog SF2000 Generic Image Tool</title>
<meta name="viewport" content="width=device-width">
Moved tool CSS to shared CSS file Just for future flexibility, moved the CSS from each individual tool to a shared CSS library
2023-06-26 14:19:47 +02:00
<link rel="stylesheet" href="tools.css">
Bigger update... Added a new tool, the Generic Image Tool - allows you to convert SF2000 images to PNG, and PNG/JPEG images to SF2000 formats with several options. Also added a large amount of arcade-specific information thanks to some heroic work by `adcockm#8175`, fixed some typos thanks to `Luke#4448`, and tracked down where an "unused" image was actually being used thanks to `kid_sinn#9691`
2023-05-24 15:07:54 +02:00
</head>
<body>
<h1>Data Frog SF2000 Generic Image Tool</h1>
<p>This tool is a generic image conversion tool for the Data Frog SF2000. You can use it to convert the SF2000's raw image data files to PNG, and convert PNG/JPEG images to RGB565 format (a reduced colour mode used for most of the SF2000's UI elements), or BGRA format (the flavour of transparent images used by some SF2000 UI elements). You can also choose a variety of scaling or filtering modes when converting to an SF2000 image. Please note this tool is provided as-is; make sure you have backups of anything you care about before potentially replacing any files on your SF2000's microSD card! 🙂</p>
<hr>
<div id="steps">
<section id="modeSection">
<h2>Step 1: Select Operating Mode</h2>
<p>This tool can operate in two main modes - you can use it to convert <em>from</em> an SF2000 format <em>to</em> RGB888/RGBA, or you can use it to convert <em>to</em> an SF2000 format <em>from</em> RGB888/RGBA. Choose the mode you want, and follow the next instruction that appears.</p>
<div class="controlContainer">
<label class="control"><input type="radio" id="radioFrom" name="toolMode" value="fromSF2000" autocomplete="off"> Convert <em>from</em> SF2000</label><br>
<label class="control"><input type="radio" id="radioTo" name="toolMode" value="toSF2000" autocomplete="off"> Convert <em>to</em> SF2000</label>
</div>
</section>
</div>
Transitioned to shared Javascript library There was a lot of repeated JS across all my tools (e.g., image conversion, BIOS hash checking, etc.), and so I decided to move all shared code out to its own separate library. This will improve scalability and maintainability at the cost of portability - a fair trade in my opinion. This work also involved large-scale refactoring of all of the tools. There's no actual functional difference (all the tools should behave exactly the same), bar some UI improvements for the oldest tools as a result of moving to the same codebase used by the more recent tools.
2023-06-26 15:11:01 +02:00
<script src="tools.js"></script>
Bigger update... Added a new tool, the Generic Image Tool - allows you to convert SF2000 images to PNG, and PNG/JPEG images to SF2000 formats with several options. Also added a large amount of arcade-specific information thanks to some heroic work by `adcockm#8175`, fixed some typos thanks to `Luke#4448`, and tracked down where an "unused" image was actually being used thanks to `kid_sinn#9691`
2023-05-24 15:07:54 +02:00
<script>
// Global Variables
// ================
var sf2000ImageData; // Holds binary data for images coming from the SF2000
var userImageData; // Holds the original data of the PNG/JPEG coming from the user
var previewCanvasData; // Holds the binary data used for drawing to our preview canvases
var outputImageWidth = 320; // The width the user wants to interpret the image from the SF2000 as, default to 320px
var outputImageHeight = 240; // The height the user wants to interpret the image from the SF2000 as, default to 240px
var imageFormat = "RGB565"; // The format the user wants to interpret the image coming from the SF2000 as, default to RGB565
var fileName; // Holds the name of the user-selected file
var userScaleMode = "scale"; // The type of scaling the user wants for their image, default to preset scales
var userScaleFactor = "1x"; // Holds the currently selected scaling factor, defaults to 1x
var userFitWidth = 320; // Holds the current fit-to width, default to 320px
var userFitHeight = 240; // Holds the current fit-to height, default to 240px
var userFilterType = "Nearest Neighbour"; // Holds the currently selected filter type, defaulting to Nearest Neighbour
// When the tool loads, add some event watchers for when the Step 1 radio
// buttons change; and depending on which mode the user selects, begin
// rewriting the rest of the page...
var modes = document.getElementsByName("toolMode");
for (var i = 0; i < modes.length; i++) {
modes[i].addEventListener("change", function() {
// Clear out any HTML that might already exist after Step 1, just so
// things are nice and clean for Step 2 to load into...
while(document.getElementById("modeSection").nextSibling) {
document.getElementById("modeSection").nextSibling.remove();
}
// Add the appropriate Step 2 depending on what was selected...
if (this.value == "fromSF2000") {
setupStepTwo_From();
}
else if (this.value == "toSF2000") {
setupStepTwo_To();
}
});
}
Transitioned to shared Javascript library There was a lot of repeated JS across all my tools (e.g., image conversion, BIOS hash checking, etc.), and so I decided to move all shared code out to its own separate library. This will improve scalability and maintainability at the cost of portability - a fair trade in my opinion. This work also involved large-scale refactoring of all of the tools. There's no actual functional difference (all the tools should behave exactly the same), bar some UI improvements for the oldest tools as a result of moving to the same codebase used by the more recent tools.
2023-06-26 15:11:01 +02:00
// This function sets up the HTML for "Convert from SF2000 > Step 2",
// selecting an image file from the SF2000's Resources folder that the
// user wants to convert to RGB888/RGBA...
Bigger update... Added a new tool, the Generic Image Tool - allows you to convert SF2000 images to PNG, and PNG/JPEG images to SF2000 formats with several options. Also added a large amount of arcade-specific information thanks to some heroic work by `adcockm#8175`, fixed some typos thanks to `Luke#4448`, and tracked down where an "unused" image was actually being used thanks to `kid_sinn#9691`
2023-05-24 15:07:54 +02:00
function setupStepTwo_From() {
Transitioned to shared Javascript library There was a lot of repeated JS across all my tools (e.g., image conversion, BIOS hash checking, etc.), and so I decided to move all shared code out to its own separate library. This will improve scalability and maintainability at the cost of portability - a fair trade in my opinion. This work also involved large-scale refactoring of all of the tools. There's no actual functional difference (all the tools should behave exactly the same), bar some UI improvements for the oldest tools as a result of moving to the same codebase used by the more recent tools.
2023-06-26 15:11:01 +02:00
// Create the new section, add our heading and our instruction
// paragraph...
Bigger update... Added a new tool, the Generic Image Tool - allows you to convert SF2000 images to PNG, and PNG/JPEG images to SF2000 formats with several options. Also added a large amount of arcade-specific information thanks to some heroic work by `adcockm#8175`, fixed some typos thanks to `Luke#4448`, and tracked down where an "unused" image was actually being used thanks to `kid_sinn#9691`
2023-05-24 15:07:54 +02:00
var html = "<section id=\"selectSF2000File\"><h2>Step 2: Select SF2000 Image File</h2><p>Select the SF2000 image file you want to convert from. If you need help choosing the image you want to convert, you can <a href=\"https://vonmillhausen.github.io/sf2000/#images-used\" target=\"_blank\" rel=\"noreferrer noopener\">find a reference to all of the used UI images in my overview of the SF2000 here</a>.</p><div id=\"step2Messages\"></div>";
// Add our file chooser...
html += "<div class=\"controlContainer\"><label class=\"control\"><input id=\"inputImage\" type=\"file\"></label></div>";
// Close off our section...
html += "</section>";
Transitioned to shared Javascript library There was a lot of repeated JS across all my tools (e.g., image conversion, BIOS hash checking, etc.), and so I decided to move all shared code out to its own separate library. This will improve scalability and maintainability at the cost of portability - a fair trade in my opinion. This work also involved large-scale refactoring of all of the tools. There's no actual functional difference (all the tools should behave exactly the same), bar some UI improvements for the oldest tools as a result of moving to the same codebase used by the more recent tools.
2023-06-26 15:11:01 +02:00
// Finally, add a <hr> separator after the last step, and append the new
// step...
Bigger update... Added a new tool, the Generic Image Tool - allows you to convert SF2000 images to PNG, and PNG/JPEG images to SF2000 formats with several options. Also added a large amount of arcade-specific information thanks to some heroic work by `adcockm#8175`, fixed some typos thanks to `Luke#4448`, and tracked down where an "unused" image was actually being used thanks to `kid_sinn#9691`
2023-05-24 15:07:54 +02:00
document.getElementById("steps").insertAdjacentHTML("beforeend", "<hr>");
document.getElementById("steps").insertAdjacentHTML("beforeend", html);
// Attach our event handler to our new file input control...
var sf2000ImageInput = document.getElementById("inputImage");
sf2000ImageInput.addEventListener("change", function() {
Transitioned to shared Javascript library There was a lot of repeated JS across all my tools (e.g., image conversion, BIOS hash checking, etc.), and so I decided to move all shared code out to its own separate library. This will improve scalability and maintainability at the cost of portability - a fair trade in my opinion. This work also involved large-scale refactoring of all of the tools. There's no actual functional difference (all the tools should behave exactly the same), bar some UI improvements for the oldest tools as a result of moving to the same codebase used by the more recent tools.
2023-06-26 15:11:01 +02:00
// The user has chosen a new file; it should be a binary blob we can
// try to interpret as an image. First let's clear any old messages...
Bigger update... Added a new tool, the Generic Image Tool - allows you to convert SF2000 images to PNG, and PNG/JPEG images to SF2000 formats with several options. Also added a large amount of arcade-specific information thanks to some heroic work by `adcockm#8175`, fixed some typos thanks to `Luke#4448`, and tracked down where an "unused" image was actually being used thanks to `kid_sinn#9691`
2023-05-24 15:07:54 +02:00
document.getElementById("step2Messages").innerHTML = "";
Transitioned to shared Javascript library There was a lot of repeated JS across all my tools (e.g., image conversion, BIOS hash checking, etc.), and so I decided to move all shared code out to its own separate library. This will improve scalability and maintainability at the cost of portability - a fair trade in my opinion. This work also involved large-scale refactoring of all of the tools. There's no actual functional difference (all the tools should behave exactly the same), bar some UI improvements for the oldest tools as a result of moving to the same codebase used by the more recent tools.
2023-06-26 15:11:01 +02:00
// Now let's check to make sure the data URI indicates
// "application/octet-stream"...
Bigger update... Added a new tool, the Generic Image Tool - allows you to convert SF2000 images to PNG, and PNG/JPEG images to SF2000 formats with several options. Also added a large amount of arcade-specific information thanks to some heroic work by `adcockm#8175`, fixed some typos thanks to `Luke#4448`, and tracked down where an "unused" image was actually being used thanks to `kid_sinn#9691`
2023-05-24 15:07:54 +02:00
var frImage = new FileReader();
fileName = event.target.files[0].name;
frImage.readAsDataURL(event.target.files[0]);
frImage.onload = function(event) {
var fileData = event.target.result;
var dataType = fileData.substring(5, fileData.indexOf(";"));
if (dataType === "application/octet-stream") {
Transitioned to shared Javascript library There was a lot of repeated JS across all my tools (e.g., image conversion, BIOS hash checking, etc.), and so I decided to move all shared code out to its own separate library. This will improve scalability and maintainability at the cost of portability - a fair trade in my opinion. This work also involved large-scale refactoring of all of the tools. There's no actual functional difference (all the tools should behave exactly the same), bar some UI improvements for the oldest tools as a result of moving to the same codebase used by the more recent tools.
2023-06-26 15:11:01 +02:00
// The user selected a file that appears to contain binary data;
// it's a good candidate for image interpretation so! Extract the
// binary data, store it in our sf2000ImageData global, and start
// setting up Step 3...
Bigger update... Added a new tool, the Generic Image Tool - allows you to convert SF2000 images to PNG, and PNG/JPEG images to SF2000 formats with several options. Also added a large amount of arcade-specific information thanks to some heroic work by `adcockm#8175`, fixed some typos thanks to `Luke#4448`, and tracked down where an "unused" image was actually being used thanks to `kid_sinn#9691`
2023-05-24 15:07:54 +02:00
var base64Data = fileData.substring(fileData.indexOf(",") + 1);
var binaryData = atob(base64Data);
sf2000ImageData = new Uint8Array(binaryData.length);
for (var i = 0; i < binaryData.length; i++) {
sf2000ImageData[i] = binaryData.charCodeAt(i);
}
Transitioned to shared Javascript library There was a lot of repeated JS across all my tools (e.g., image conversion, BIOS hash checking, etc.), and so I decided to move all shared code out to its own separate library. This will improve scalability and maintainability at the cost of portability - a fair trade in my opinion. This work also involved large-scale refactoring of all of the tools. There's no actual functional difference (all the tools should behave exactly the same), bar some UI improvements for the oldest tools as a result of moving to the same codebase used by the more recent tools.
2023-06-26 15:11:01 +02:00
// Just before we get to Step 3, remove any existing HTML that
// comes after the current section, just to make sure things are
// nice and neat for Step 3 to load into...
Bigger update... Added a new tool, the Generic Image Tool - allows you to convert SF2000 images to PNG, and PNG/JPEG images to SF2000 formats with several options. Also added a large amount of arcade-specific information thanks to some heroic work by `adcockm#8175`, fixed some typos thanks to `Luke#4448`, and tracked down where an "unused" image was actually being used thanks to `kid_sinn#9691`
2023-05-24 15:07:54 +02:00
while(document.getElementById("selectSF2000File").nextSibling) {
document.getElementById("selectSF2000File").nextSibling.remove();
}
// On to Step 3!
setupStepThree_From_SF2000Image();
}
else {
// The file the user selected doesn't appear to be binary data, so
// it can't be an SF2000 image file; let the user know...
Transitioned to shared Javascript library There was a lot of repeated JS across all my tools (e.g., image conversion, BIOS hash checking, etc.), and so I decided to move all shared code out to its own separate library. This will improve scalability and maintainability at the cost of portability - a fair trade in my opinion. This work also involved large-scale refactoring of all of the tools. There's no actual functional difference (all the tools should behave exactly the same), bar some UI improvements for the oldest tools as a result of moving to the same codebase used by the more recent tools.
2023-06-26 15:11:01 +02:00
setMessage("error", "step2Messages", "ERROR: The selected file does not appear to be binary file; please make sure you're selecting an SF2000 encoded image file.");
Bigger update... Added a new tool, the Generic Image Tool - allows you to convert SF2000 images to PNG, and PNG/JPEG images to SF2000 formats with several options. Also added a large amount of arcade-specific information thanks to some heroic work by `adcockm#8175`, fixed some typos thanks to `Luke#4448`, and tracked down where an "unused" image was actually being used thanks to `kid_sinn#9691`
2023-05-24 15:07:54 +02:00
return;
}
}
});
}
Transitioned to shared Javascript library There was a lot of repeated JS across all my tools (e.g., image conversion, BIOS hash checking, etc.), and so I decided to move all shared code out to its own separate library. This will improve scalability and maintainability at the cost of portability - a fair trade in my opinion. This work also involved large-scale refactoring of all of the tools. There's no actual functional difference (all the tools should behave exactly the same), bar some UI improvements for the oldest tools as a result of moving to the same codebase used by the more recent tools.
2023-06-26 15:11:01 +02:00
// This function sets up the HTML for "Convert to SF2000 > Step 2",
// selecting the image file the user wants to convert to one of the
// SF2000's image formats...
Bigger update... Added a new tool, the Generic Image Tool - allows you to convert SF2000 images to PNG, and PNG/JPEG images to SF2000 formats with several options. Also added a large amount of arcade-specific information thanks to some heroic work by `adcockm#8175`, fixed some typos thanks to `Luke#4448`, and tracked down where an "unused" image was actually being used thanks to `kid_sinn#9691`
2023-05-24 15:07:54 +02:00
function setupStepTwo_To() {
Transitioned to shared Javascript library There was a lot of repeated JS across all my tools (e.g., image conversion, BIOS hash checking, etc.), and so I decided to move all shared code out to its own separate library. This will improve scalability and maintainability at the cost of portability - a fair trade in my opinion. This work also involved large-scale refactoring of all of the tools. There's no actual functional difference (all the tools should behave exactly the same), bar some UI improvements for the oldest tools as a result of moving to the same codebase used by the more recent tools.
2023-06-26 15:11:01 +02:00
Bigger update... Added a new tool, the Generic Image Tool - allows you to convert SF2000 images to PNG, and PNG/JPEG images to SF2000 formats with several options. Also added a large amount of arcade-specific information thanks to some heroic work by `adcockm#8175`, fixed some typos thanks to `Luke#4448`, and tracked down where an "unused" image was actually being used thanks to `kid_sinn#9691`
2023-05-24 15:07:54 +02:00
// Start our new section, add our header and our instructions...
var html = "<section id=\"selectImageFile\"><h2>Step 2: Select RGB888/RGBA Image File</h2><p>Select the image file you want to convert to an SF2000 image format. You can select either a PNG or JPEG format image. Transparency is respected for PNGs, but only if outputting to the BGRA output format.</p><div id=\"step2Messages\"></div>";
// Add our file chooser...
html += "<div class=\"controlContainer\"><label class=\"control\"><input id=\"inputImage\" type=\"file\"></label></div>";
// Close our section...
html += "</section>";
Transitioned to shared Javascript library There was a lot of repeated JS across all my tools (e.g., image conversion, BIOS hash checking, etc.), and so I decided to move all shared code out to its own separate library. This will improve scalability and maintainability at the cost of portability - a fair trade in my opinion. This work also involved large-scale refactoring of all of the tools. There's no actual functional difference (all the tools should behave exactly the same), bar some UI improvements for the oldest tools as a result of moving to the same codebase used by the more recent tools.
2023-06-26 15:11:01 +02:00
// Finally, add a <hr> separator after the last step, and append the new
// step...
Bigger update... Added a new tool, the Generic Image Tool - allows you to convert SF2000 images to PNG, and PNG/JPEG images to SF2000 formats with several options. Also added a large amount of arcade-specific information thanks to some heroic work by `adcockm#8175`, fixed some typos thanks to `Luke#4448`, and tracked down where an "unused" image was actually being used thanks to `kid_sinn#9691`
2023-05-24 15:07:54 +02:00
document.getElementById("steps").insertAdjacentHTML("beforeend", "<hr>");
document.getElementById("steps").insertAdjacentHTML("beforeend", html);
// Attach our event handler to our new file input control...
var userImageInput = document.getElementById("inputImage");
userImageInput.addEventListener("change", function() {
// The user has chosen a new file; it should be either a PNG or JPEG
// image for converting to an SF2000 binary image format...
// First let's clear any old messages...
document.getElementById("step2Messages").innerHTML = "";
// Now let's read in the file...
var frImage = new FileReader();
fileName = event.target.files[0].name;
frImage.readAsDataURL(event.target.files[0]);
frImage.onload = function(event) {
Transitioned to shared Javascript library There was a lot of repeated JS across all my tools (e.g., image conversion, BIOS hash checking, etc.), and so I decided to move all shared code out to its own separate library. This will improve scalability and maintainability at the cost of portability - a fair trade in my opinion. This work also involved large-scale refactoring of all of the tools. There's no actual functional difference (all the tools should behave exactly the same), bar some UI improvements for the oldest tools as a result of moving to the same codebase used by the more recent tools.
2023-06-26 15:11:01 +02:00
// The file is loaded; let's check to make sure we got a PNG or
// JPEG...
Bigger update... Added a new tool, the Generic Image Tool - allows you to convert SF2000 images to PNG, and PNG/JPEG images to SF2000 formats with several options. Also added a large amount of arcade-specific information thanks to some heroic work by `adcockm#8175`, fixed some typos thanks to `Luke#4448`, and tracked down where an "unused" image was actually being used thanks to `kid_sinn#9691`
2023-05-24 15:07:54 +02:00
if (!event.target.result.includes("data:image/png;") && !event.target.result.includes("data:image/jpeg;")) {
Transitioned to shared Javascript library There was a lot of repeated JS across all my tools (e.g., image conversion, BIOS hash checking, etc.), and so I decided to move all shared code out to its own separate library. This will improve scalability and maintainability at the cost of portability - a fair trade in my opinion. This work also involved large-scale refactoring of all of the tools. There's no actual functional difference (all the tools should behave exactly the same), bar some UI improvements for the oldest tools as a result of moving to the same codebase used by the more recent tools.
2023-06-26 15:11:01 +02:00
Bigger update... Added a new tool, the Generic Image Tool - allows you to convert SF2000 images to PNG, and PNG/JPEG images to SF2000 formats with several options. Also added a large amount of arcade-specific information thanks to some heroic work by `adcockm#8175`, fixed some typos thanks to `Luke#4448`, and tracked down where an "unused" image was actually being used thanks to `kid_sinn#9691`
2023-05-24 15:07:54 +02:00
// Whoops! Doesn't look like the user provided a PNG or a JPEG!
Transitioned to shared Javascript library There was a lot of repeated JS across all my tools (e.g., image conversion, BIOS hash checking, etc.), and so I decided to move all shared code out to its own separate library. This will improve scalability and maintainability at the cost of portability - a fair trade in my opinion. This work also involved large-scale refactoring of all of the tools. There's no actual functional difference (all the tools should behave exactly the same), bar some UI improvements for the oldest tools as a result of moving to the same codebase used by the more recent tools.
2023-06-26 15:11:01 +02:00
setMessage("error", "step2Messages", "ERROR: The selected file does not appear to be either a PNG or JPEG image; please make sure you're selecting an appropriate image file.");
Bigger update... Added a new tool, the Generic Image Tool - allows you to convert SF2000 images to PNG, and PNG/JPEG images to SF2000 formats with several options. Also added a large amount of arcade-specific information thanks to some heroic work by `adcockm#8175`, fixed some typos thanks to `Luke#4448`, and tracked down where an "unused" image was actually being used thanks to `kid_sinn#9691`
2023-05-24 15:07:54 +02:00
return;
Transitioned to shared Javascript library There was a lot of repeated JS across all my tools (e.g., image conversion, BIOS hash checking, etc.), and so I decided to move all shared code out to its own separate library. This will improve scalability and maintainability at the cost of portability - a fair trade in my opinion. This work also involved large-scale refactoring of all of the tools. There's no actual functional difference (all the tools should behave exactly the same), bar some UI improvements for the oldest tools as a result of moving to the same codebase used by the more recent tools.
2023-06-26 15:11:01 +02:00
Bigger update... Added a new tool, the Generic Image Tool - allows you to convert SF2000 images to PNG, and PNG/JPEG images to SF2000 formats with several options. Also added a large amount of arcade-specific information thanks to some heroic work by `adcockm#8175`, fixed some typos thanks to `Luke#4448`, and tracked down where an "unused" image was actually being used thanks to `kid_sinn#9691`
2023-05-24 15:07:54 +02:00
}
Transitioned to shared Javascript library There was a lot of repeated JS across all my tools (e.g., image conversion, BIOS hash checking, etc.), and so I decided to move all shared code out to its own separate library. This will improve scalability and maintainability at the cost of portability - a fair trade in my opinion. This work also involved large-scale refactoring of all of the tools. There's no actual functional difference (all the tools should behave exactly the same), bar some UI improvements for the oldest tools as a result of moving to the same codebase used by the more recent tools.
2023-06-26 15:11:01 +02:00
// Now we're going to load the file's data into an Image object, so
// we can access the raw image data...
Bigger update... Added a new tool, the Generic Image Tool - allows you to convert SF2000 images to PNG, and PNG/JPEG images to SF2000 formats with several options. Also added a large amount of arcade-specific information thanks to some heroic work by `adcockm#8175`, fixed some typos thanks to `Luke#4448`, and tracked down where an "unused" image was actually being used thanks to `kid_sinn#9691`
2023-05-24 15:07:54 +02:00
userImageData = new Image;
userImageData.src = event.target.result;
userImageData.onload = function(event) {
Transitioned to shared Javascript library There was a lot of repeated JS across all my tools (e.g., image conversion, BIOS hash checking, etc.), and so I decided to move all shared code out to its own separate library. This will improve scalability and maintainability at the cost of portability - a fair trade in my opinion. This work also involved large-scale refactoring of all of the tools. There's no actual functional difference (all the tools should behave exactly the same), bar some UI improvements for the oldest tools as a result of moving to the same codebase used by the more recent tools.
2023-06-26 15:11:01 +02:00
// Convert the Image object to an ImageData object...
userImageData = imageToImageData(userImageData);
// Now we've got our data, we can move on to Step 3. First though,
// let's remove any existing HTML after the current step, so
// things are nice and clean for Step 3 to load into...
Bigger update... Added a new tool, the Generic Image Tool - allows you to convert SF2000 images to PNG, and PNG/JPEG images to SF2000 formats with several options. Also added a large amount of arcade-specific information thanks to some heroic work by `adcockm#8175`, fixed some typos thanks to `Luke#4448`, and tracked down where an "unused" image was actually being used thanks to `kid_sinn#9691`
2023-05-24 15:07:54 +02:00
while(document.getElementById("selectImageFile").nextSibling) {
document.getElementById("selectImageFile").nextSibling.remove();
}
// On to Step 3!
setupStepThree_To_SF2000Image();
}
}
Transitioned to shared Javascript library There was a lot of repeated JS across all my tools (e.g., image conversion, BIOS hash checking, etc.), and so I decided to move all shared code out to its own separate library. This will improve scalability and maintainability at the cost of portability - a fair trade in my opinion. This work also involved large-scale refactoring of all of the tools. There's no actual functional difference (all the tools should behave exactly the same), bar some UI improvements for the oldest tools as a result of moving to the same codebase used by the more recent tools.
2023-06-26 15:11:01 +02:00
});
Bigger update... Added a new tool, the Generic Image Tool - allows you to convert SF2000 images to PNG, and PNG/JPEG images to SF2000 formats with several options. Also added a large amount of arcade-specific information thanks to some heroic work by `adcockm#8175`, fixed some typos thanks to `Luke#4448`, and tracked down where an "unused" image was actually being used thanks to `kid_sinn#9691`
2023-05-24 15:07:54 +02:00
}
Transitioned to shared Javascript library There was a lot of repeated JS across all my tools (e.g., image conversion, BIOS hash checking, etc.), and so I decided to move all shared code out to its own separate library. This will improve scalability and maintainability at the cost of portability - a fair trade in my opinion. This work also involved large-scale refactoring of all of the tools. There's no actual functional difference (all the tools should behave exactly the same), bar some UI improvements for the oldest tools as a result of moving to the same codebase used by the more recent tools.
2023-06-26 15:11:01 +02:00
// This function sets up the HTML for "Convert from SF2000 > Step 2 >
// Step 3"...
Bigger update... Added a new tool, the Generic Image Tool - allows you to convert SF2000 images to PNG, and PNG/JPEG images to SF2000 formats with several options. Also added a large amount of arcade-specific information thanks to some heroic work by `adcockm#8175`, fixed some typos thanks to `Luke#4448`, and tracked down where an "unused" image was actually being used thanks to `kid_sinn#9691`
2023-05-24 15:07:54 +02:00
function setupStepThree_From_SF2000Image() {
// In this section, we'll be rendering the HTML for the image processing
// controls, including data format, image width and image height. As a
// courtesy to the user, we can take a guess at what the controls should
// be set to for a given input image, based on its file size. As we'll
// want to have these values ready-to-go by the time we generate the
// HTML, let's start by checking the size of the input image in bytes,
Transitioned to shared Javascript library There was a lot of repeated JS across all my tools (e.g., image conversion, BIOS hash checking, etc.), and so I decided to move all shared code out to its own separate library. This will improve scalability and maintainability at the cost of portability - a fair trade in my opinion. This work also involved large-scale refactoring of all of the tools. There's no actual functional difference (all the tools should behave exactly the same), bar some UI improvements for the oldest tools as a result of moving to the same codebase used by the more recent tools.
2023-06-26 15:11:01 +02:00
// and set our data format, width and height automatically (note, this
// doesn't cover *all* of the SF2000's UI images, just the most common
// ones in terms of file size)...
Bigger update... Added a new tool, the Generic Image Tool - allows you to convert SF2000 images to PNG, and PNG/JPEG images to SF2000 formats with several options. Also added a large amount of arcade-specific information thanks to some heroic work by `adcockm#8175`, fixed some typos thanks to `Luke#4448`, and tracked down where an "unused" image was actually being used thanks to `kid_sinn#9691`
2023-05-24 15:07:54 +02:00
switch (sf2000ImageData.length) {
Transitioned to shared Javascript library There was a lot of repeated JS across all my tools (e.g., image conversion, BIOS hash checking, etc.), and so I decided to move all shared code out to its own separate library. This will improve scalability and maintainability at the cost of portability - a fair trade in my opinion. This work also involved large-scale refactoring of all of the tools. There's no actual functional difference (all the tools should behave exactly the same), bar some UI improvements for the oldest tools as a result of moving to the same codebase used by the more recent tools.
2023-06-26 15:11:01 +02:00
Bigger update... Added a new tool, the Generic Image Tool - allows you to convert SF2000 images to PNG, and PNG/JPEG images to SF2000 formats with several options. Also added a large amount of arcade-specific information thanks to some heroic work by `adcockm#8175`, fixed some typos thanks to `Luke#4448`, and tracked down where an "unused" image was actually being used thanks to `kid_sinn#9691`
2023-05-24 15:07:54 +02:00
case 1843200:
// Probably 640x1440 RGB565 - SF2000 button mapping images
outputImageWidth = 640; outputImageHeight = 1440; imageFormat = "RGB565";
break;
case 1044480:
// Probably 640x816 RGB565 - Button mapping system selection
outputImageWidth = 640; outputImageHeight = 816; imageFormat = "RGB565";
break;
case 744192:
Transitioned to shared Javascript library There was a lot of repeated JS across all my tools (e.g., image conversion, BIOS hash checking, etc.), and so I decided to move all shared code out to its own separate library. This will improve scalability and maintainability at the cost of portability - a fair trade in my opinion. This work also involved large-scale refactoring of all of the tools. There's no actual functional difference (all the tools should behave exactly the same), bar some UI improvements for the oldest tools as a result of moving to the same codebase used by the more recent tools.
2023-06-26 15:11:01 +02:00
// Probably 152x1224 BGRA - Main menu "Games Exist" and "Start:
// Open" labels for all languages
Bigger update... Added a new tool, the Generic Image Tool - allows you to convert SF2000 images to PNG, and PNG/JPEG images to SF2000 formats with several options. Also added a large amount of arcade-specific information thanks to some heroic work by `adcockm#8175`, fixed some typos thanks to `Luke#4448`, and tracked down where an "unused" image was actually being used thanks to `kid_sinn#9691`
2023-05-24 15:07:54 +02:00
outputImageWidth = 152; outputImageHeight = 1224; imageFormat = "BGRA";
break;
case 661248:
// Probably 1008x164 BGRA - User menu icons
outputImageWidth = 1008; outputImageHeight = 164; imageFormat = "BGRA";
break;
case 614400:
// Probably 640x480 RGB565 - Most background images
outputImageWidth = 640; outputImageHeight = 480; imageFormat = "RGB565";
break;
case 589824:
Transitioned to shared Javascript library There was a lot of repeated JS across all my tools (e.g., image conversion, BIOS hash checking, etc.), and so I decided to move all shared code out to its own separate library. This will improve scalability and maintainability at the cost of portability - a fair trade in my opinion. This work also involved large-scale refactoring of all of the tools. There's no actual functional difference (all the tools should behave exactly the same), bar some UI improvements for the oldest tools as a result of moving to the same codebase used by the more recent tools.
2023-06-26 15:11:01 +02:00
// Probably 576x256 BGRA - English and Chinese menu labels used for
// shortcut ROM names
Bigger update... Added a new tool, the Generic Image Tool - allows you to convert SF2000 images to PNG, and PNG/JPEG images to SF2000 formats with several options. Also added a large amount of arcade-specific information thanks to some heroic work by `adcockm#8175`, fixed some typos thanks to `Luke#4448`, and tracked down where an "unused" image was actually being used thanks to `kid_sinn#9691`
2023-05-24 15:07:54 +02:00
outputImageWidth = 576; outputImageHeight = 256; imageFormat = "BGRA";
break;
case 528000:
// Probably 1100x120 BGRA - Alternate UI large system icons
outputImageWidth = 1100; outputImageHeight = 120; imageFormat = "BGRA";
break;
case 409600:
// Probably 640x320 RGB565 - In-game menu save slots x4
outputImageWidth = 640; outputImageHeight = 320; imageFormat = "RGB565";
break;
case 153600:
if (fileName == "mhg4s.ihg") {
// Probably 400x192 RGB565 - Unknown warning prompt image
outputImageWidth = 400; outputImageHeight = 192; imageFormat = "RGB565";
}
else if (fileName == "werui.ioc") {
Transitioned to shared Javascript library There was a lot of repeated JS across all my tools (e.g., image conversion, BIOS hash checking, etc.), and so I decided to move all shared code out to its own separate library. This will improve scalability and maintainability at the cost of portability - a fair trade in my opinion. This work also involved large-scale refactoring of all of the tools. There's no actual functional difference (all the tools should behave exactly the same), bar some UI improvements for the oldest tools as a result of moving to the same codebase used by the more recent tools.
2023-06-26 15:11:01 +02:00
// Probably 320x240 RGB565 - Unused "NODATA" save state slot
// placeholder
Bigger update... Added a new tool, the Generic Image Tool - allows you to convert SF2000 images to PNG, and PNG/JPEG images to SF2000 formats with several options. Also added a large amount of arcade-specific information thanks to some heroic work by `adcockm#8175`, fixed some typos thanks to `Luke#4448`, and tracked down where an "unused" image was actually being used thanks to `kid_sinn#9691`
2023-05-24 15:07:54 +02:00
outputImageWidth = 320; outputImageHeight = 240; imageFormat = "RGB565";
}
break;
case 128400:
// Probably 150x214 BGRA - Game art placeholder
outputImageWidth = 150; outputImageHeight = 214; imageFormat = "BGRA";
break;
case 81144:
// Probably 161x126 BGRA - Main menu icon selection box
outputImageWidth = 161; outputImageHeight = 126; imageFormat = "BGRA";
break;
case 62720:
// Probably 392x80 RGB565 - In-game menu save slots (individual)
outputImageWidth = 392; outputImageHeight = 80; imageFormat = "RGB565";
break;
case 57600:
// Probably 120x240 RGB565 - TV system selection icons
outputImageWidth = 120; outputImageHeight = 240; imageFormat = "RGB565";
break;
case 40960:
Transitioned to shared Javascript library There was a lot of repeated JS across all my tools (e.g., image conversion, BIOS hash checking, etc.), and so I decided to move all shared code out to its own separate library. This will improve scalability and maintainability at the cost of portability - a fair trade in my opinion. This work also involved large-scale refactoring of all of the tools. There's no actual functional difference (all the tools should behave exactly the same), bar some UI improvements for the oldest tools as a result of moving to the same codebase used by the more recent tools.
2023-06-26 15:11:01 +02:00
// Probably 64x320 RGB565 - Non-transparent labels for system button
// assignments
Bigger update... Added a new tool, the Generic Image Tool - allows you to convert SF2000 images to PNG, and PNG/JPEG images to SF2000 formats with several options. Also added a large amount of arcade-specific information thanks to some heroic work by `adcockm#8175`, fixed some typos thanks to `Luke#4448`, and tracked down where an "unused" image was actually being used thanks to `kid_sinn#9691`
2023-05-24 15:07:54 +02:00
outputImageWidth = 64; outputImageHeight = 320; imageFormat = "RGB565";
break;
case 39936:
Transitioned to shared Javascript library There was a lot of repeated JS across all my tools (e.g., image conversion, BIOS hash checking, etc.), and so I decided to move all shared code out to its own separate library. This will improve scalability and maintainability at the cost of portability - a fair trade in my opinion. This work also involved large-scale refactoring of all of the tools. There's no actual functional difference (all the tools should behave exactly the same), bar some UI improvements for the oldest tools as a result of moving to the same codebase used by the more recent tools.
2023-06-26 15:11:01 +02:00
// Probably 52x192 BGRA - Transparent labels for system button
// assignments
Bigger update... Added a new tool, the Generic Image Tool - allows you to convert SF2000 images to PNG, and PNG/JPEG images to SF2000 formats with several options. Also added a large amount of arcade-specific information thanks to some heroic work by `adcockm#8175`, fixed some typos thanks to `Luke#4448`, and tracked down where an "unused" image was actually being used thanks to `kid_sinn#9691`
2023-05-24 15:07:54 +02:00
outputImageWidth = 52; outputImageHeight = 192; imageFormat = "BGRA";
break;
case 34560:
// Probably 60x144 BGRA - Battery level indicator
outputImageWidth = 60; outputImageHeight = 144; imageFormat = "BGRA";
break;
case 32116:
Transitioned to shared Javascript library There was a lot of repeated JS across all my tools (e.g., image conversion, BIOS hash checking, etc.), and so I decided to move all shared code out to its own separate library. This will improve scalability and maintainability at the cost of portability - a fair trade in my opinion. This work also involved large-scale refactoring of all of the tools. There's no actual functional difference (all the tools should behave exactly the same), bar some UI improvements for the oldest tools as a result of moving to the same codebase used by the more recent tools.
2023-06-26 15:11:01 +02:00
// Probably 217x37 BGRA - Yes and No labels when overwriting save
// games
Bigger update... Added a new tool, the Generic Image Tool - allows you to convert SF2000 images to PNG, and PNG/JPEG images to SF2000 formats with several options. Also added a large amount of arcade-specific information thanks to some heroic work by `adcockm#8175`, fixed some typos thanks to `Luke#4448`, and tracked down where an "unused" image was actually being used thanks to `kid_sinn#9691`
2023-05-24 15:07:54 +02:00
outputImageWidth = 217; outputImageHeight = 37; imageFormat = "BGRA";
break;
case 15360:
// Probably 16x240 BGRA - Latin numbers listed vertically
outputImageWidth = 16; outputImageHeight = 240; imageFormat = "BGRA";
break;
case 7168:
Transitioned to shared Javascript library There was a lot of repeated JS across all my tools (e.g., image conversion, BIOS hash checking, etc.), and so I decided to move all shared code out to its own separate library. This will improve scalability and maintainability at the cost of portability - a fair trade in my opinion. This work also involved large-scale refactoring of all of the tools. There's no actual functional difference (all the tools should behave exactly the same), bar some UI improvements for the oldest tools as a result of moving to the same codebase used by the more recent tools.
2023-06-26 15:11:01 +02:00
// Probably 8x224 BGRA - Rounded ends for unknown warning prompt
// image
Bigger update... Added a new tool, the Generic Image Tool - allows you to convert SF2000 images to PNG, and PNG/JPEG images to SF2000 formats with several options. Also added a large amount of arcade-specific information thanks to some heroic work by `adcockm#8175`, fixed some typos thanks to `Luke#4448`, and tracked down where an "unused" image was actually being used thanks to `kid_sinn#9691`
2023-05-24 15:07:54 +02:00
outputImageWidth = 8; outputImageHeight = 224; imageFormat = "BGRA";
break;
case 4096:
// Probably 32x32 BGRA - Star icon for favourited games
outputImageWidth = 32; outputImageHeight = 32; imageFormat = "BGRA";
break;
case 3840:
// Probably 40x24 BGRA - Game-list current game icon
outputImageWidth = 40; outputImageHeight = 24; imageFormat = "BGRA";
break;
}
Transitioned to shared Javascript library There was a lot of repeated JS across all my tools (e.g., image conversion, BIOS hash checking, etc.), and so I decided to move all shared code out to its own separate library. This will improve scalability and maintainability at the cost of portability - a fair trade in my opinion. This work also involved large-scale refactoring of all of the tools. There's no actual functional difference (all the tools should behave exactly the same), bar some UI improvements for the oldest tools as a result of moving to the same codebase used by the more recent tools.
2023-06-26 15:11:01 +02:00
// Create the new section, add our heading and our instruction
// paragraph...
Bigger update... Added a new tool, the Generic Image Tool - allows you to convert SF2000 images to PNG, and PNG/JPEG images to SF2000 formats with several options. Also added a large amount of arcade-specific information thanks to some heroic work by `adcockm#8175`, fixed some typos thanks to `Luke#4448`, and tracked down where an "unused" image was actually being used thanks to `kid_sinn#9691`
2023-05-24 15:07:54 +02:00
var html = "<section id=\"processSF2000File\"><h2>Step 3: Set Data Interpretation Options</h2><p>As the image files on the SF2000 are raw binary blobs, there's no information stored in them to say what their width or height is, what format the pixel information is stored in, etc.. Therefore, it is up to <em>you</em> to specify those details yourself, which you can do using the options below.</p><p>A preview of the image will appear below the options, reflecting the current options; the preview has a white dash outline so you can better judge where the bounds of transparent images are. Below the preview image is a \"Download\" button you can use to download the image as a PNG.</p><p>Depending on the size of the file you selected, this tool may recognise it as a \"known\" file from the SF2000, and if so the options below will have been set automatically for you. If not, or if the options are automatically set incorrectly, here's a brief description of what each option does:</p><dl><dt>Image Format:</dt><dd>Specifies the data format for each pixel in the image. There are two image formats currently used by the SF2000 - RGB565 (used for most of the \"basic\" UI elements, including main backgrounds, etc.), and BGRA (used for anything that requires transparency, such as the system logos on the main menu, etc.).</dd><dt>Width:</dt><dd>Specifies the width of the image in pixels.</dd><dt>Height:</dt><dd>Specifies the height of the image in pixels.</dd></dl>";
Transitioned to shared Javascript library There was a lot of repeated JS across all my tools (e.g., image conversion, BIOS hash checking, etc.), and so I decided to move all shared code out to its own separate library. This will improve scalability and maintainability at the cost of portability - a fair trade in my opinion. This work also involved large-scale refactoring of all of the tools. There's no actual functional difference (all the tools should behave exactly the same), bar some UI improvements for the oldest tools as a result of moving to the same codebase used by the more recent tools.
2023-06-26 15:11:01 +02:00
// Next, let's add our image controls; a select list for the image
// format, and number inputs for the interpreted width and height...
Bigger update... Added a new tool, the Generic Image Tool - allows you to convert SF2000 images to PNG, and PNG/JPEG images to SF2000 formats with several options. Also added a large amount of arcade-specific information thanks to some heroic work by `adcockm#8175`, fixed some typos thanks to `Luke#4448`, and tracked down where an "unused" image was actually being used thanks to `kid_sinn#9691`
2023-05-24 15:07:54 +02:00
html += "<div class=\"controlContainer\">";
html += "<div class=\"control\"><label>Image Format: <select id=\"imageFormat\"><option" + (imageFormat == "RGB565" ? " selected" : "") + ">RGB565</option><option" + (imageFormat == "BGRA" ? " selected" : "") + ">BGRA</option></select></label></div>";
html += "<div class=\"control\"><label>Width: <input id=\"outputImageWidth\" type=\"number\" min=\"1\" step=\"1\" value=\"" + outputImageWidth + "\"></label></div>";
html += "<div class=\"control\"><label>Height: <input id=\"outputImageHeight\" type=\"number\" min=\"1\" step=\"1\" value=\"" + outputImageHeight + "\"></label></div>";
html += "</div>";
// Next, we'll add the image preview...
html += "<div class=\"controlContainer\"><div class=\"control\"><canvas id=\"processFilePreview\"></canvas></div></div>";
// ... and the Download button...
html += "<div class=\"controlContainer\"><div class=\"control\"><input id=\"sf2000Download\" type=\"button\" value=\"Download\"></div></div>";
// ... and lastly we'll close off our section...
html += "</section>";
Transitioned to shared Javascript library There was a lot of repeated JS across all my tools (e.g., image conversion, BIOS hash checking, etc.), and so I decided to move all shared code out to its own separate library. This will improve scalability and maintainability at the cost of portability - a fair trade in my opinion. This work also involved large-scale refactoring of all of the tools. There's no actual functional difference (all the tools should behave exactly the same), bar some UI improvements for the oldest tools as a result of moving to the same codebase used by the more recent tools.
2023-06-26 15:11:01 +02:00
// Add a <hr> separator after the previous step, and append the new
// step...
Bigger update... Added a new tool, the Generic Image Tool - allows you to convert SF2000 images to PNG, and PNG/JPEG images to SF2000 formats with several options. Also added a large amount of arcade-specific information thanks to some heroic work by `adcockm#8175`, fixed some typos thanks to `Luke#4448`, and tracked down where an "unused" image was actually being used thanks to `kid_sinn#9691`
2023-05-24 15:07:54 +02:00
document.getElementById("steps").insertAdjacentHTML("beforeend", "<hr>");
document.getElementById("steps").insertAdjacentHTML("beforeend", html);
Transitioned to shared Javascript library There was a lot of repeated JS across all my tools (e.g., image conversion, BIOS hash checking, etc.), and so I decided to move all shared code out to its own separate library. This will improve scalability and maintainability at the cost of portability - a fair trade in my opinion. This work also involved large-scale refactoring of all of the tools. There's no actual functional difference (all the tools should behave exactly the same), bar some UI improvements for the oldest tools as a result of moving to the same codebase used by the more recent tools.
2023-06-26 15:11:01 +02:00
// Now, add our interactivity by attaching our event handlers; first up,
// our format selector...
Bigger update... Added a new tool, the Generic Image Tool - allows you to convert SF2000 images to PNG, and PNG/JPEG images to SF2000 formats with several options. Also added a large amount of arcade-specific information thanks to some heroic work by `adcockm#8175`, fixed some typos thanks to `Luke#4448`, and tracked down where an "unused" image was actually being used thanks to `kid_sinn#9691`
2023-05-24 15:07:54 +02:00
var ifField = document.getElementById("imageFormat");
ifField.addEventListener("change", function() {
Transitioned to shared Javascript library There was a lot of repeated JS across all my tools (e.g., image conversion, BIOS hash checking, etc.), and so I decided to move all shared code out to its own separate library. This will improve scalability and maintainability at the cost of portability - a fair trade in my opinion. This work also involved large-scale refactoring of all of the tools. There's no actual functional difference (all the tools should behave exactly the same), bar some UI improvements for the oldest tools as a result of moving to the same codebase used by the more recent tools.
2023-06-26 15:11:01 +02:00
// Set our global imageFormat to the new value, and update our
// preview...
Bigger update... Added a new tool, the Generic Image Tool - allows you to convert SF2000 images to PNG, and PNG/JPEG images to SF2000 formats with several options. Also added a large amount of arcade-specific information thanks to some heroic work by `adcockm#8175`, fixed some typos thanks to `Luke#4448`, and tracked down where an "unused" image was actually being used thanks to `kid_sinn#9691`
2023-05-24 15:07:54 +02:00
imageFormat = this.value;
Transitioned to shared Javascript library There was a lot of repeated JS across all my tools (e.g., image conversion, BIOS hash checking, etc.), and so I decided to move all shared code out to its own separate library. This will improve scalability and maintainability at the cost of portability - a fair trade in my opinion. This work also involved large-scale refactoring of all of the tools. There's no actual functional difference (all the tools should behave exactly the same), bar some UI improvements for the oldest tools as a result of moving to the same codebase used by the more recent tools.
2023-06-26 15:11:01 +02:00
convertFromSF2000AndRender();
Bigger update... Added a new tool, the Generic Image Tool - allows you to convert SF2000 images to PNG, and PNG/JPEG images to SF2000 formats with several options. Also added a large amount of arcade-specific information thanks to some heroic work by `adcockm#8175`, fixed some typos thanks to `Luke#4448`, and tracked down where an "unused" image was actually being used thanks to `kid_sinn#9691`
2023-05-24 15:07:54 +02:00
});
// Next our width and height fields...
var whFields = [document.getElementById("outputImageWidth"), document.getElementById("outputImageHeight")];
whFields.forEach(field => {
Transitioned to shared Javascript library There was a lot of repeated JS across all my tools (e.g., image conversion, BIOS hash checking, etc.), and so I decided to move all shared code out to its own separate library. This will improve scalability and maintainability at the cost of portability - a fair trade in my opinion. This work also involved large-scale refactoring of all of the tools. There's no actual functional difference (all the tools should behave exactly the same), bar some UI improvements for the oldest tools as a result of moving to the same codebase used by the more recent tools.
2023-06-26 15:11:01 +02:00
Bigger update... Added a new tool, the Generic Image Tool - allows you to convert SF2000 images to PNG, and PNG/JPEG images to SF2000 formats with several options. Also added a large amount of arcade-specific information thanks to some heroic work by `adcockm#8175`, fixed some typos thanks to `Luke#4448`, and tracked down where an "unused" image was actually being used thanks to `kid_sinn#9691`
2023-05-24 15:07:54 +02:00
// When a key is pressed, only allow the events through under certain
// circumstances - prevents folks from being able to type or paste
// non-integers into the field...
field.addEventListener("keydown", function(event) {
// Only allow integer entry and things like arrow keys, etc!
if (event.key.length > 1 || /\d/.test(event.key)) {
return;
}
event.preventDefault();
Transitioned to shared Javascript library There was a lot of repeated JS across all my tools (e.g., image conversion, BIOS hash checking, etc.), and so I decided to move all shared code out to its own separate library. This will improve scalability and maintainability at the cost of portability - a fair trade in my opinion. This work also involved large-scale refactoring of all of the tools. There's no actual functional difference (all the tools should behave exactly the same), bar some UI improvements for the oldest tools as a result of moving to the same codebase used by the more recent tools.
2023-06-26 15:11:01 +02:00
});
Bigger update... Added a new tool, the Generic Image Tool - allows you to convert SF2000 images to PNG, and PNG/JPEG images to SF2000 formats with several options. Also added a large amount of arcade-specific information thanks to some heroic work by `adcockm#8175`, fixed some typos thanks to `Luke#4448`, and tracked down where an "unused" image was actually being used thanks to `kid_sinn#9691`
2023-05-24 15:07:54 +02:00
// And when the number is updated, update our global variables to
// match, then update our preview...
field.addEventListener("change", function() {
if (this.value === "" || this.value === "0") {
this.value = "1";
}
if (this.id == "outputImageWidth") {
outputImageWidth = this.value;
}
else {
outputImageHeight = this.value;
}
Transitioned to shared Javascript library There was a lot of repeated JS across all my tools (e.g., image conversion, BIOS hash checking, etc.), and so I decided to move all shared code out to its own separate library. This will improve scalability and maintainability at the cost of portability - a fair trade in my opinion. This work also involved large-scale refactoring of all of the tools. There's no actual functional difference (all the tools should behave exactly the same), bar some UI improvements for the oldest tools as a result of moving to the same codebase used by the more recent tools.
2023-06-26 15:11:01 +02:00
convertFromSF2000AndRender();
});
});
Bigger update... Added a new tool, the Generic Image Tool - allows you to convert SF2000 images to PNG, and PNG/JPEG images to SF2000 formats with several options. Also added a large amount of arcade-specific information thanks to some heroic work by `adcockm#8175`, fixed some typos thanks to `Luke#4448`, and tracked down where an "unused" image was actually being used thanks to `kid_sinn#9691`
2023-05-24 15:07:54 +02:00
// And attach the event handler for the download button...
var downloadButton = document.getElementById("sf2000Download");
downloadButton.addEventListener("click", function() {
Transitioned to shared Javascript library There was a lot of repeated JS across all my tools (e.g., image conversion, BIOS hash checking, etc.), and so I decided to move all shared code out to its own separate library. This will improve scalability and maintainability at the cost of portability - a fair trade in my opinion. This work also involved large-scale refactoring of all of the tools. There's no actual functional difference (all the tools should behave exactly the same), bar some UI improvements for the oldest tools as a result of moving to the same codebase used by the more recent tools.
2023-06-26 15:11:01 +02:00
var canvas = document.getElementById("processFilePreview");
canvas.toBlob(function(blob) {
downloadToBrowser(blob, "image/png", fileName + ".png");
});
Bigger update... Added a new tool, the Generic Image Tool - allows you to convert SF2000 images to PNG, and PNG/JPEG images to SF2000 formats with several options. Also added a large amount of arcade-specific information thanks to some heroic work by `adcockm#8175`, fixed some typos thanks to `Luke#4448`, and tracked down where an "unused" image was actually being used thanks to `kid_sinn#9691`
2023-05-24 15:07:54 +02:00
});
Transitioned to shared Javascript library There was a lot of repeated JS across all my tools (e.g., image conversion, BIOS hash checking, etc.), and so I decided to move all shared code out to its own separate library. This will improve scalability and maintainability at the cost of portability - a fair trade in my opinion. This work also involved large-scale refactoring of all of the tools. There's no actual functional difference (all the tools should behave exactly the same), bar some UI improvements for the oldest tools as a result of moving to the same codebase used by the more recent tools.
2023-06-26 15:11:01 +02:00
// We're nearly ready to wrap up Step 3; all that's left is to perform
// our initial conversion and rendering...
convertFromSF2000AndRender();
Bigger update... Added a new tool, the Generic Image Tool - allows you to convert SF2000 images to PNG, and PNG/JPEG images to SF2000 formats with several options. Also added a large amount of arcade-specific information thanks to some heroic work by `adcockm#8175`, fixed some typos thanks to `Luke#4448`, and tracked down where an "unused" image was actually being used thanks to `kid_sinn#9691`
2023-05-24 15:07:54 +02:00
}
Transitioned to shared Javascript library There was a lot of repeated JS across all my tools (e.g., image conversion, BIOS hash checking, etc.), and so I decided to move all shared code out to its own separate library. This will improve scalability and maintainability at the cost of portability - a fair trade in my opinion. This work also involved large-scale refactoring of all of the tools. There's no actual functional difference (all the tools should behave exactly the same), bar some UI improvements for the oldest tools as a result of moving to the same codebase used by the more recent tools.
2023-06-26 15:11:01 +02:00
// This function sets up the HTML for "Convert to SF2000 > Step 2 >
// Step 3"...
Bigger update... Added a new tool, the Generic Image Tool - allows you to convert SF2000 images to PNG, and PNG/JPEG images to SF2000 formats with several options. Also added a large amount of arcade-specific information thanks to some heroic work by `adcockm#8175`, fixed some typos thanks to `Luke#4448`, and tracked down where an "unused" image was actually being used thanks to `kid_sinn#9691`
2023-05-24 15:07:54 +02:00
function setupStepThree_To_SF2000Image() {
Transitioned to shared Javascript library There was a lot of repeated JS across all my tools (e.g., image conversion, BIOS hash checking, etc.), and so I decided to move all shared code out to its own separate library. This will improve scalability and maintainability at the cost of portability - a fair trade in my opinion. This work also involved large-scale refactoring of all of the tools. There's no actual functional difference (all the tools should behave exactly the same), bar some UI improvements for the oldest tools as a result of moving to the same codebase used by the more recent tools.
2023-06-26 15:11:01 +02:00
// In this section, we'll be rendering the HTML for some image
// processing controls, as well as an image preview. As we're coming
// from a known image, we already have our width and height this time,
// and so we can just get on to rendering the HTML. Create our new
// section, add its heading and instruction paragraphs...
Bigger update... Added a new tool, the Generic Image Tool - allows you to convert SF2000 images to PNG, and PNG/JPEG images to SF2000 formats with several options. Also added a large amount of arcade-specific information thanks to some heroic work by `adcockm#8175`, fixed some typos thanks to `Luke#4448`, and tracked down where an "unused" image was actually being used thanks to `kid_sinn#9691`
2023-05-24 15:07:54 +02:00
html = "<section id=\"processUserFile\"><h2>Step 3: Set Conversion Options</h2><p>The options below control how your image is converted for use on the SF2000. A preview of the image will appear below the options, reflecting their current settings; the preview has a white dash outline so you can better judge where the bounds of transparent images are. Below the preview image is a \"Download\" button you can use to download the image as binary blob for the SF2000. If you name your input image like <code>name.extension.extension</code> (e.g., <code>c1eac.pal.png</code>), then the download will automatically be named like <code>name.extension</code> (e.g., <code>c1eac.pal</code>); this may help to speed up your workflow.</p><p>Here's a brief description of what each option does:</p><dl><dt>Image Format:</dt><dd>Specifies the data format for the output image. There are two image formats currently used by the SF2000 - RGB565 (used for most of the \"basic\" UI elements, including main backgrounds, etc.), and BGRA (used for anything that requires transparency, such as the system logos on the main menu, etc.). If you're not sure which format to choose, <a href=\"https://vonmillhausen.github.io/sf2000/#images-used\" target=\"_blank\" rel=\"noreferrer noopener\">refer to my list of images used by the SF2000</a>.</dd><dt>Scaling:</dt><dd>One of two available scaling modes for your input image; the \"Scaling\" option lets you scale your image maintaining aspect ratio amongst several common sizes (e.g., 1x scaling to maintain the input image size, 2x scaling to double it, etc.)</dd><dt>Fit to:</dt><dd>The other available scaling mode; this will scale your image to the specified width and height, <em>without</em> maintaining aspect ratio. This will allow you to scale an image to any dimension you want, but it'll be up to you to do your own aspect ratio calculations.</dd><dt>Filter Type:</dt><dd>When scaling an image by anything other than 1x, specifies the type of image filtering to use. \"Nearest Neighbour\" will give sharp pixel scaling but only at integer upscales; any other scale will appear aliased. \"Bilinear\" will give a fuzzier scale, but it works better for non-integer scale factors and for downscaling.</dd></dl>";
// Now let's add our image controls; there's a few of them! We have a
// select box for choosing the image format, we have two different
// scaling options (one with a select box for choosing pre-defined
// scales, and one for user-defined output size), and we have a select
// box for choosing nearest-neighbour or hybrid gaussian/bilinear
// image filtering...
html += "<div class=\"controlContainer\">";
// Image format...
html += "<div class=\"control\"><label>Image Format: <select id=\"imageFormat\"><option" + (imageFormat == "RGB565" ? " selected" : "") + ">RGB565</option><option" + (imageFormat == "BGRA" ? " selected" : "") + ">BGRA</option></select></label></div>";
// Scaling options...
html += "<div class=\"control\">";
html += "<div class=\"control\"><label><input type=\"radio\" name=\"scaleMode\" value=\"scale\"" + (userScaleMode == "scale" ? " checked" : "") + "> Scaling: </label><select id=\"scaleFactor\"" + (userScaleMode == "fit" ? " disabled" : "") + "><option" + (userScaleFactor == "0.5x" ? " selected" : "") + ">0.5x</option><option" + (userScaleFactor == "1x" ? " selected" : "") + ">1x</option><option" + (userScaleFactor == "2x" ? " selected" : "") + ">2x</option><option" + (userScaleFactor == "3x" ? " selected" : "") + ">3x</option><option" + (userScaleFactor == "4x" ? " selected" : "") + ">4x</option></select></div>";
html += " OR ";
html += "<div class=\"control\"><label><input type=\"radio\" name=\"scaleMode\" value=\"fit\"" + (userScaleMode == "fit" ? " checked" : "") + "> Fit to: </label><label>width <input id=\"userFitWidth\" type=\"number\" min=\"1\" step=\"1\" value=\""+ userFitWidth + "\"" + (userScaleMode == "scale" ? " disabled" : "") + "></label> and <label>height <input id=\"userFitHeight\" type=\"number\" min=\"1\" step=\"1\" value=\""+ userFitHeight + "\"" + (userScaleMode == "scale" ? " disabled" : "") + "></label></div>";
html += "</div>";
// Filter type...
html += "<div class=\"control\"><label>Filter Type: <select id=\"userFilterType\"><option" + (userFilterType == "Nearest Neighbour" ? " selected" : "") + ">Nearest Neighbour</option><option" + (userFilterType == "Bilinear" ? " selected" : "") + ">Bilinear</option></select></label></div>";
html += "</div>";
// Next we'll add our image preview...
html += "<div class=\"controlContainer\"><div class=\"control\"><canvas id=\"processFilePreview\"></canvas></div></div>";
// ... and our Download button...
html += "<div class=\"controlContainer\"><div class=\"control\"><input id=\"userDownload\" type=\"button\" value=\"Download\"></div></div>";
// ... and lastly we'll close off our section...
html += "</section>";
Transitioned to shared Javascript library There was a lot of repeated JS across all my tools (e.g., image conversion, BIOS hash checking, etc.), and so I decided to move all shared code out to its own separate library. This will improve scalability and maintainability at the cost of portability - a fair trade in my opinion. This work also involved large-scale refactoring of all of the tools. There's no actual functional difference (all the tools should behave exactly the same), bar some UI improvements for the oldest tools as a result of moving to the same codebase used by the more recent tools.
2023-06-26 15:11:01 +02:00
// Add a <hr> separator after the previous step, and append the new
// step...
Bigger update... Added a new tool, the Generic Image Tool - allows you to convert SF2000 images to PNG, and PNG/JPEG images to SF2000 formats with several options. Also added a large amount of arcade-specific information thanks to some heroic work by `adcockm#8175`, fixed some typos thanks to `Luke#4448`, and tracked down where an "unused" image was actually being used thanks to `kid_sinn#9691`
2023-05-24 15:07:54 +02:00
document.getElementById("steps").insertAdjacentHTML("beforeend", "<hr>");
document.getElementById("steps").insertAdjacentHTML("beforeend", html);
Transitioned to shared Javascript library There was a lot of repeated JS across all my tools (e.g., image conversion, BIOS hash checking, etc.), and so I decided to move all shared code out to its own separate library. This will improve scalability and maintainability at the cost of portability - a fair trade in my opinion. This work also involved large-scale refactoring of all of the tools. There's no actual functional difference (all the tools should behave exactly the same), bar some UI improvements for the oldest tools as a result of moving to the same codebase used by the more recent tools.
2023-06-26 15:11:01 +02:00
// Now we'll attach event listeners for all of the interactive elements
// in this step. We'll start with our image format select box...
Bigger update... Added a new tool, the Generic Image Tool - allows you to convert SF2000 images to PNG, and PNG/JPEG images to SF2000 formats with several options. Also added a large amount of arcade-specific information thanks to some heroic work by `adcockm#8175`, fixed some typos thanks to `Luke#4448`, and tracked down where an "unused" image was actually being used thanks to `kid_sinn#9691`
2023-05-24 15:07:54 +02:00
var ifField = document.getElementById("imageFormat");
ifField.addEventListener("change", function() {
Transitioned to shared Javascript library There was a lot of repeated JS across all my tools (e.g., image conversion, BIOS hash checking, etc.), and so I decided to move all shared code out to its own separate library. This will improve scalability and maintainability at the cost of portability - a fair trade in my opinion. This work also involved large-scale refactoring of all of the tools. There's no actual functional difference (all the tools should behave exactly the same), bar some UI improvements for the oldest tools as a result of moving to the same codebase used by the more recent tools.
2023-06-26 15:11:01 +02:00
Bigger update... Added a new tool, the Generic Image Tool - allows you to convert SF2000 images to PNG, and PNG/JPEG images to SF2000 formats with several options. Also added a large amount of arcade-specific information thanks to some heroic work by `adcockm#8175`, fixed some typos thanks to `Luke#4448`, and tracked down where an "unused" image was actually being used thanks to `kid_sinn#9691`
2023-05-24 15:07:54 +02:00
// Update our global variable with the new value, convert the user's
// image using the new format and render a preview...
imageFormat = this.value;
Transitioned to shared Javascript library There was a lot of repeated JS across all my tools (e.g., image conversion, BIOS hash checking, etc.), and so I decided to move all shared code out to its own separate library. This will improve scalability and maintainability at the cost of portability - a fair trade in my opinion. This work also involved large-scale refactoring of all of the tools. There's no actual functional difference (all the tools should behave exactly the same), bar some UI improvements for the oldest tools as a result of moving to the same codebase used by the more recent tools.
2023-06-26 15:11:01 +02:00
let newWH = calculateNewSize(userImageData);
convertImageToSF2000(scaleImage(userImageData, newWH.width, newWH.height, userFilterType));
convertFromSF2000AndRender();
Bigger update... Added a new tool, the Generic Image Tool - allows you to convert SF2000 images to PNG, and PNG/JPEG images to SF2000 formats with several options. Also added a large amount of arcade-specific information thanks to some heroic work by `adcockm#8175`, fixed some typos thanks to `Luke#4448`, and tracked down where an "unused" image was actually being used thanks to `kid_sinn#9691`
2023-05-24 15:07:54 +02:00
});
Transitioned to shared Javascript library There was a lot of repeated JS across all my tools (e.g., image conversion, BIOS hash checking, etc.), and so I decided to move all shared code out to its own separate library. This will improve scalability and maintainability at the cost of portability - a fair trade in my opinion. This work also involved large-scale refactoring of all of the tools. There's no actual functional difference (all the tools should behave exactly the same), bar some UI improvements for the oldest tools as a result of moving to the same codebase used by the more recent tools.
2023-06-26 15:11:01 +02:00
// The scaling mode radio buttons; these let the user choose between
// fixed-ratio scaling, or fixed width/height scaling...
Bigger update... Added a new tool, the Generic Image Tool - allows you to convert SF2000 images to PNG, and PNG/JPEG images to SF2000 formats with several options. Also added a large amount of arcade-specific information thanks to some heroic work by `adcockm#8175`, fixed some typos thanks to `Luke#4448`, and tracked down where an "unused" image was actually being used thanks to `kid_sinn#9691`
2023-05-24 15:07:54 +02:00
var modes = document.getElementsByName("scaleMode");
for (var i = 0; i < modes.length; i++) {
modes[i].addEventListener("change", function() {
// Update our global variable with the new selection...
userScaleMode = this.value;
// Check what they chose...
if (userScaleMode == "scale") {
// They chose fixed-ratio scaling, so enable the ratio selector,
// and disable the fixed-width/height number inputs...
document.getElementById("scaleFactor").removeAttribute("disabled");
document.getElementById("userFitWidth").setAttribute("disabled", "");
document.getElementById("userFitHeight").setAttribute("disabled", "");
}
else if (userScaleMode == "fit") {
Transitioned to shared Javascript library There was a lot of repeated JS across all my tools (e.g., image conversion, BIOS hash checking, etc.), and so I decided to move all shared code out to its own separate library. This will improve scalability and maintainability at the cost of portability - a fair trade in my opinion. This work also involved large-scale refactoring of all of the tools. There's no actual functional difference (all the tools should behave exactly the same), bar some UI improvements for the oldest tools as a result of moving to the same codebase used by the more recent tools.
2023-06-26 15:11:01 +02:00
// They chose fixed width/height scaling, so enable our
// width/height number inputs, and disable the ratio-scaling
// selection box...
Bigger update... Added a new tool, the Generic Image Tool - allows you to convert SF2000 images to PNG, and PNG/JPEG images to SF2000 formats with several options. Also added a large amount of arcade-specific information thanks to some heroic work by `adcockm#8175`, fixed some typos thanks to `Luke#4448`, and tracked down where an "unused" image was actually being used thanks to `kid_sinn#9691`
2023-05-24 15:07:54 +02:00
document.getElementById("userFitWidth").removeAttribute("disabled");
document.getElementById("userFitHeight").removeAttribute("disabled");
document.getElementById("scaleFactor").setAttribute("disabled", "");
}
Transitioned to shared Javascript library There was a lot of repeated JS across all my tools (e.g., image conversion, BIOS hash checking, etc.), and so I decided to move all shared code out to its own separate library. This will improve scalability and maintainability at the cost of portability - a fair trade in my opinion. This work also involved large-scale refactoring of all of the tools. There's no actual functional difference (all the tools should behave exactly the same), bar some UI improvements for the oldest tools as a result of moving to the same codebase used by the more recent tools.
2023-06-26 15:11:01 +02:00
// We'll also want to re-convert the user's image data and render
// a new preview...
let newWH = calculateNewSize(userImageData);
convertImageToSF2000(scaleImage(userImageData, newWH.width, newWH.height, userFilterType));
convertFromSF2000AndRender();
Bigger update... Added a new tool, the Generic Image Tool - allows you to convert SF2000 images to PNG, and PNG/JPEG images to SF2000 formats with several options. Also added a large amount of arcade-specific information thanks to some heroic work by `adcockm#8175`, fixed some typos thanks to `Luke#4448`, and tracked down where an "unused" image was actually being used thanks to `kid_sinn#9691`
2023-05-24 15:07:54 +02:00
});
}
// The fixed-ratio scaling selector...
var sField = document.getElementById("scaleFactor");
sField.addEventListener("change", function() {
Transitioned to shared Javascript library There was a lot of repeated JS across all my tools (e.g., image conversion, BIOS hash checking, etc.), and so I decided to move all shared code out to its own separate library. This will improve scalability and maintainability at the cost of portability - a fair trade in my opinion. This work also involved large-scale refactoring of all of the tools. There's no actual functional difference (all the tools should behave exactly the same), bar some UI improvements for the oldest tools as a result of moving to the same codebase used by the more recent tools.
2023-06-26 15:11:01 +02:00
Bigger update... Added a new tool, the Generic Image Tool - allows you to convert SF2000 images to PNG, and PNG/JPEG images to SF2000 formats with several options. Also added a large amount of arcade-specific information thanks to some heroic work by `adcockm#8175`, fixed some typos thanks to `Luke#4448`, and tracked down where an "unused" image was actually being used thanks to `kid_sinn#9691`
2023-05-24 15:07:54 +02:00
// Update our global variable with the newly chosen scaling factor,
Transitioned to shared Javascript library There was a lot of repeated JS across all my tools (e.g., image conversion, BIOS hash checking, etc.), and so I decided to move all shared code out to its own separate library. This will improve scalability and maintainability at the cost of portability - a fair trade in my opinion. This work also involved large-scale refactoring of all of the tools. There's no actual functional difference (all the tools should behave exactly the same), bar some UI improvements for the oldest tools as a result of moving to the same codebase used by the more recent tools.
2023-06-26 15:11:01 +02:00
// and then re-convert the user's image data and render a new
// preview...
Bigger update... Added a new tool, the Generic Image Tool - allows you to convert SF2000 images to PNG, and PNG/JPEG images to SF2000 formats with several options. Also added a large amount of arcade-specific information thanks to some heroic work by `adcockm#8175`, fixed some typos thanks to `Luke#4448`, and tracked down where an "unused" image was actually being used thanks to `kid_sinn#9691`
2023-05-24 15:07:54 +02:00
userScaleFactor = this.value;
Transitioned to shared Javascript library There was a lot of repeated JS across all my tools (e.g., image conversion, BIOS hash checking, etc.), and so I decided to move all shared code out to its own separate library. This will improve scalability and maintainability at the cost of portability - a fair trade in my opinion. This work also involved large-scale refactoring of all of the tools. There's no actual functional difference (all the tools should behave exactly the same), bar some UI improvements for the oldest tools as a result of moving to the same codebase used by the more recent tools.
2023-06-26 15:11:01 +02:00
let newWH = calculateNewSize(userImageData);
convertImageToSF2000(scaleImage(userImageData, newWH.width, newWH.height, userFilterType));
convertFromSF2000AndRender();
Bigger update... Added a new tool, the Generic Image Tool - allows you to convert SF2000 images to PNG, and PNG/JPEG images to SF2000 formats with several options. Also added a large amount of arcade-specific information thanks to some heroic work by `adcockm#8175`, fixed some typos thanks to `Luke#4448`, and tracked down where an "unused" image was actually being used thanks to `kid_sinn#9691`
2023-05-24 15:07:54 +02:00
});
// And the fixed-width/height number inputs...
var whFields = [document.getElementById("userFitWidth"), document.getElementById("userFitHeight")];
whFields.forEach(field => {
// These get two event listeners; the first is designed to prevent the
// user from entering anything other than positive integers...
field.addEventListener("keydown", function(event) {
Transitioned to shared Javascript library There was a lot of repeated JS across all my tools (e.g., image conversion, BIOS hash checking, etc.), and so I decided to move all shared code out to its own separate library. This will improve scalability and maintainability at the cost of portability - a fair trade in my opinion. This work also involved large-scale refactoring of all of the tools. There's no actual functional difference (all the tools should behave exactly the same), bar some UI improvements for the oldest tools as a result of moving to the same codebase used by the more recent tools.
2023-06-26 15:11:01 +02:00
Bigger update... Added a new tool, the Generic Image Tool - allows you to convert SF2000 images to PNG, and PNG/JPEG images to SF2000 formats with several options. Also added a large amount of arcade-specific information thanks to some heroic work by `adcockm#8175`, fixed some typos thanks to `Luke#4448`, and tracked down where an "unused" image was actually being used thanks to `kid_sinn#9691`
2023-05-24 15:07:54 +02:00
// Only allow integer entry and things like arrow keys, etc!
if (event.key.length > 1 || /\d/.test(event.key)) {
return;
}
event.preventDefault();
Transitioned to shared Javascript library There was a lot of repeated JS across all my tools (e.g., image conversion, BIOS hash checking, etc.), and so I decided to move all shared code out to its own separate library. This will improve scalability and maintainability at the cost of portability - a fair trade in my opinion. This work also involved large-scale refactoring of all of the tools. There's no actual functional difference (all the tools should behave exactly the same), bar some UI improvements for the oldest tools as a result of moving to the same codebase used by the more recent tools.
2023-06-26 15:11:01 +02:00
});
Bigger update... Added a new tool, the Generic Image Tool - allows you to convert SF2000 images to PNG, and PNG/JPEG images to SF2000 formats with several options. Also added a large amount of arcade-specific information thanks to some heroic work by `adcockm#8175`, fixed some typos thanks to `Luke#4448`, and tracked down where an "unused" image was actually being used thanks to `kid_sinn#9691`
2023-05-24 15:07:54 +02:00
// ... and this updates our global variables, re-converts the user's
// image data and renders a new preview image when the numbers are
// changed...
field.addEventListener("change", function() {
Transitioned to shared Javascript library There was a lot of repeated JS across all my tools (e.g., image conversion, BIOS hash checking, etc.), and so I decided to move all shared code out to its own separate library. This will improve scalability and maintainability at the cost of portability - a fair trade in my opinion. This work also involved large-scale refactoring of all of the tools. There's no actual functional difference (all the tools should behave exactly the same), bar some UI improvements for the oldest tools as a result of moving to the same codebase used by the more recent tools.
2023-06-26 15:11:01 +02:00
Bigger update... Added a new tool, the Generic Image Tool - allows you to convert SF2000 images to PNG, and PNG/JPEG images to SF2000 formats with several options. Also added a large amount of arcade-specific information thanks to some heroic work by `adcockm#8175`, fixed some typos thanks to `Luke#4448`, and tracked down where an "unused" image was actually being used thanks to `kid_sinn#9691`
2023-05-24 15:07:54 +02:00
if (this.value === "" || this.value === "0") {
this.value = "1";
}
if (this.id == "userFitWidth") {
userFitWidth = this.value;
}
else {
userFitHeight = this.value;
}
Transitioned to shared Javascript library There was a lot of repeated JS across all my tools (e.g., image conversion, BIOS hash checking, etc.), and so I decided to move all shared code out to its own separate library. This will improve scalability and maintainability at the cost of portability - a fair trade in my opinion. This work also involved large-scale refactoring of all of the tools. There's no actual functional difference (all the tools should behave exactly the same), bar some UI improvements for the oldest tools as a result of moving to the same codebase used by the more recent tools.
2023-06-26 15:11:01 +02:00
let newWH = calculateNewSize(userImageData);
convertImageToSF2000(scaleImage(userImageData, newWH.width, newWH.height, userFilterType));
convertFromSF2000AndRender();
});
});
Bigger update... Added a new tool, the Generic Image Tool - allows you to convert SF2000 images to PNG, and PNG/JPEG images to SF2000 formats with several options. Also added a large amount of arcade-specific information thanks to some heroic work by `adcockm#8175`, fixed some typos thanks to `Luke#4448`, and tracked down where an "unused" image was actually being used thanks to `kid_sinn#9691`
2023-05-24 15:07:54 +02:00
// Next, the event listener for our filter type selection...
var ftField = document.getElementById("userFilterType");
ftField.addEventListener("change", function() {
Transitioned to shared Javascript library There was a lot of repeated JS across all my tools (e.g., image conversion, BIOS hash checking, etc.), and so I decided to move all shared code out to its own separate library. This will improve scalability and maintainability at the cost of portability - a fair trade in my opinion. This work also involved large-scale refactoring of all of the tools. There's no actual functional difference (all the tools should behave exactly the same), bar some UI improvements for the oldest tools as a result of moving to the same codebase used by the more recent tools.
2023-06-26 15:11:01 +02:00
Bigger update... Added a new tool, the Generic Image Tool - allows you to convert SF2000 images to PNG, and PNG/JPEG images to SF2000 formats with several options. Also added a large amount of arcade-specific information thanks to some heroic work by `adcockm#8175`, fixed some typos thanks to `Luke#4448`, and tracked down where an "unused" image was actually being used thanks to `kid_sinn#9691`
2023-05-24 15:07:54 +02:00
// Update our global variable with the new filter type, re-convert
// the user's image data, and update our preview...
userFilterType = this.value;
Transitioned to shared Javascript library There was a lot of repeated JS across all my tools (e.g., image conversion, BIOS hash checking, etc.), and so I decided to move all shared code out to its own separate library. This will improve scalability and maintainability at the cost of portability - a fair trade in my opinion. This work also involved large-scale refactoring of all of the tools. There's no actual functional difference (all the tools should behave exactly the same), bar some UI improvements for the oldest tools as a result of moving to the same codebase used by the more recent tools.
2023-06-26 15:11:01 +02:00
let newWH = calculateNewSize(userImageData);
convertImageToSF2000(scaleImage(userImageData, newWH.width, newWH.height, userFilterType));
convertFromSF2000AndRender();
Bigger update... Added a new tool, the Generic Image Tool - allows you to convert SF2000 images to PNG, and PNG/JPEG images to SF2000 formats with several options. Also added a large amount of arcade-specific information thanks to some heroic work by `adcockm#8175`, fixed some typos thanks to `Luke#4448`, and tracked down where an "unused" image was actually being used thanks to `kid_sinn#9691`
2023-05-24 15:07:54 +02:00
});
// And last but not least, our Download button...
var dButton = document.getElementById("userDownload");
dButton.addEventListener("click", function() {
Transitioned to shared Javascript library There was a lot of repeated JS across all my tools (e.g., image conversion, BIOS hash checking, etc.), and so I decided to move all shared code out to its own separate library. This will improve scalability and maintainability at the cost of portability - a fair trade in my opinion. This work also involved large-scale refactoring of all of the tools. There's no actual functional difference (all the tools should behave exactly the same), bar some UI improvements for the oldest tools as a result of moving to the same codebase used by the more recent tools.
2023-06-26 15:11:01 +02:00
// For the file-name we're going to do something semi-fancy; if the
// user's original image file name had *two* extensions (e.g.,
// c1eac.pal.png), then we'll strip off the second extension and
// just save the file with the remainder of the name (e.g.,
// c1eac.pal) - this will speed up their workflow if their source
// image came from a design tool that exports images named after
// layers/artboards. Otherwise, we'll just use the name of the
// file they provided with ".bin" appended to the end...
var downloadName = fileName + ".bin";
var match = fileName.match(/(.+)\.([^.]+)\.([^.]+)/);
if (match) {
// It's got a double extension - so let's just strip off the
// second one...
downloadName = match[1] + "." + match[2];
}
downloadToBrowser(sf2000ImageData, "application/octet-stream", downloadName);
Bigger update... Added a new tool, the Generic Image Tool - allows you to convert SF2000 images to PNG, and PNG/JPEG images to SF2000 formats with several options. Also added a large amount of arcade-specific information thanks to some heroic work by `adcockm#8175`, fixed some typos thanks to `Luke#4448`, and tracked down where an "unused" image was actually being used thanks to `kid_sinn#9691`
2023-05-24 15:07:54 +02:00
});
// The last thing to do here in Step 3 is to perform our initial
// image data conversion and preview rendering... so let's do it!
Transitioned to shared Javascript library There was a lot of repeated JS across all my tools (e.g., image conversion, BIOS hash checking, etc.), and so I decided to move all shared code out to its own separate library. This will improve scalability and maintainability at the cost of portability - a fair trade in my opinion. This work also involved large-scale refactoring of all of the tools. There's no actual functional difference (all the tools should behave exactly the same), bar some UI improvements for the oldest tools as a result of moving to the same codebase used by the more recent tools.
2023-06-26 15:11:01 +02:00
let newWH = calculateNewSize(userImageData);
convertImageToSF2000(scaleImage(userImageData, newWH.width, newWH.height, userFilterType));
convertFromSF2000AndRender();
Bigger update... Added a new tool, the Generic Image Tool - allows you to convert SF2000 images to PNG, and PNG/JPEG images to SF2000 formats with several options. Also added a large amount of arcade-specific information thanks to some heroic work by `adcockm#8175`, fixed some typos thanks to `Luke#4448`, and tracked down where an "unused" image was actually being used thanks to `kid_sinn#9691`
2023-05-24 15:07:54 +02:00
}
Transitioned to shared Javascript library There was a lot of repeated JS across all my tools (e.g., image conversion, BIOS hash checking, etc.), and so I decided to move all shared code out to its own separate library. This will improve scalability and maintainability at the cost of portability - a fair trade in my opinion. This work also involved large-scale refactoring of all of the tools. There's no actual functional difference (all the tools should behave exactly the same), bar some UI improvements for the oldest tools as a result of moving to the same codebase used by the more recent tools.
2023-06-26 15:11:01 +02:00
// This function takes in an ImageData object, and given our global
// variables for the image conversion options, returns an object
// containing the new width and height of the image based on those
// options...
function calculateNewSize(imageData) {
Bigger update... Added a new tool, the Generic Image Tool - allows you to convert SF2000 images to PNG, and PNG/JPEG images to SF2000 formats with several options. Also added a large amount of arcade-specific information thanks to some heroic work by `adcockm#8175`, fixed some typos thanks to `Luke#4448`, and tracked down where an "unused" image was actually being used thanks to `kid_sinn#9691`
2023-05-24 15:07:54 +02:00
var newWidth = userFitWidth;
var newHeight = userFitHeight;
if (userScaleMode == "scale") {
Transitioned to shared Javascript library There was a lot of repeated JS across all my tools (e.g., image conversion, BIOS hash checking, etc.), and so I decided to move all shared code out to its own separate library. This will improve scalability and maintainability at the cost of portability - a fair trade in my opinion. This work also involved large-scale refactoring of all of the tools. There's no actual functional difference (all the tools should behave exactly the same), bar some UI improvements for the oldest tools as a result of moving to the same codebase used by the more recent tools.
2023-06-26 15:11:01 +02:00
newWidth = Math.round(imageData.width * Number(userScaleFactor.slice(0, -1)));
newHeight = Math.round(imageData.height * Number(userScaleFactor.slice(0, -1)));
Bigger update... Added a new tool, the Generic Image Tool - allows you to convert SF2000 images to PNG, and PNG/JPEG images to SF2000 formats with several options. Also added a large amount of arcade-specific information thanks to some heroic work by `adcockm#8175`, fixed some typos thanks to `Luke#4448`, and tracked down where an "unused" image was actually being used thanks to `kid_sinn#9691`
2023-05-24 15:07:54 +02:00
}
Transitioned to shared Javascript library There was a lot of repeated JS across all my tools (e.g., image conversion, BIOS hash checking, etc.), and so I decided to move all shared code out to its own separate library. This will improve scalability and maintainability at the cost of portability - a fair trade in my opinion. This work also involved large-scale refactoring of all of the tools. There's no actual functional difference (all the tools should behave exactly the same), bar some UI improvements for the oldest tools as a result of moving to the same codebase used by the more recent tools.
2023-06-26 15:11:01 +02:00
// Update the global variables used for rendering SF2000 image data with
// our new output width and height...
Bigger update... Added a new tool, the Generic Image Tool - allows you to convert SF2000 images to PNG, and PNG/JPEG images to SF2000 formats with several options. Also added a large amount of arcade-specific information thanks to some heroic work by `adcockm#8175`, fixed some typos thanks to `Luke#4448`, and tracked down where an "unused" image was actually being used thanks to `kid_sinn#9691`
2023-05-24 15:07:54 +02:00
outputImageWidth = newWidth;
outputImageHeight = newHeight;
Transitioned to shared Javascript library There was a lot of repeated JS across all my tools (e.g., image conversion, BIOS hash checking, etc.), and so I decided to move all shared code out to its own separate library. This will improve scalability and maintainability at the cost of portability - a fair trade in my opinion. This work also involved large-scale refactoring of all of the tools. There's no actual functional difference (all the tools should behave exactly the same), bar some UI improvements for the oldest tools as a result of moving to the same codebase used by the more recent tools.
2023-06-26 15:11:01 +02:00
return {width: newWidth, height: newHeight};
Bigger update... Added a new tool, the Generic Image Tool - allows you to convert SF2000 images to PNG, and PNG/JPEG images to SF2000 formats with several options. Also added a large amount of arcade-specific information thanks to some heroic work by `adcockm#8175`, fixed some typos thanks to `Luke#4448`, and tracked down where an "unused" image was actually being used thanks to `kid_sinn#9691`
2023-05-24 15:07:54 +02:00
}
Transitioned to shared Javascript library There was a lot of repeated JS across all my tools (e.g., image conversion, BIOS hash checking, etc.), and so I decided to move all shared code out to its own separate library. This will improve scalability and maintainability at the cost of portability - a fair trade in my opinion. This work also involved large-scale refactoring of all of the tools. There's no actual functional difference (all the tools should behave exactly the same), bar some UI improvements for the oldest tools as a result of moving to the same codebase used by the more recent tools.
2023-06-26 15:11:01 +02:00
// This function takes in an ImageData object, and uses our standard
// library conversion functions to convert it to either RGB565 or BGRA
// format, and sets the sf2000ImageData global to the resulting
// Uint8Array object...
Bigger update... Added a new tool, the Generic Image Tool - allows you to convert SF2000 images to PNG, and PNG/JPEG images to SF2000 formats with several options. Also added a large amount of arcade-specific information thanks to some heroic work by `adcockm#8175`, fixed some typos thanks to `Luke#4448`, and tracked down where an "unused" image was actually being used thanks to `kid_sinn#9691`
2023-05-24 15:07:54 +02:00
function convertImageToSF2000(sourceData) {
if (imageFormat == "RGB565") {
Transitioned to shared Javascript library There was a lot of repeated JS across all my tools (e.g., image conversion, BIOS hash checking, etc.), and so I decided to move all shared code out to its own separate library. This will improve scalability and maintainability at the cost of portability - a fair trade in my opinion. This work also involved large-scale refactoring of all of the tools. There's no actual functional difference (all the tools should behave exactly the same), bar some UI improvements for the oldest tools as a result of moving to the same codebase used by the more recent tools.
2023-06-26 15:11:01 +02:00
sf2000ImageData = imageDataToRgb565(sourceData);
Bigger update... Added a new tool, the Generic Image Tool - allows you to convert SF2000 images to PNG, and PNG/JPEG images to SF2000 formats with several options. Also added a large amount of arcade-specific information thanks to some heroic work by `adcockm#8175`, fixed some typos thanks to `Luke#4448`, and tracked down where an "unused" image was actually being used thanks to `kid_sinn#9691`
2023-05-24 15:07:54 +02:00
}
else if (imageFormat == "BGRA") {
Transitioned to shared Javascript library There was a lot of repeated JS across all my tools (e.g., image conversion, BIOS hash checking, etc.), and so I decided to move all shared code out to its own separate library. This will improve scalability and maintainability at the cost of portability - a fair trade in my opinion. This work also involved large-scale refactoring of all of the tools. There's no actual functional difference (all the tools should behave exactly the same), bar some UI improvements for the oldest tools as a result of moving to the same codebase used by the more recent tools.
2023-06-26 15:11:01 +02:00
sf2000ImageData = imageDataToBgra(sourceData);
Bigger update... Added a new tool, the Generic Image Tool - allows you to convert SF2000 images to PNG, and PNG/JPEG images to SF2000 formats with several options. Also added a large amount of arcade-specific information thanks to some heroic work by `adcockm#8175`, fixed some typos thanks to `Luke#4448`, and tracked down where an "unused" image was actually being used thanks to `kid_sinn#9691`
2023-05-24 15:07:54 +02:00
}
}
Transitioned to shared Javascript library There was a lot of repeated JS across all my tools (e.g., image conversion, BIOS hash checking, etc.), and so I decided to move all shared code out to its own separate library. This will improve scalability and maintainability at the cost of portability - a fair trade in my opinion. This work also involved large-scale refactoring of all of the tools. There's no actual functional difference (all the tools should behave exactly the same), bar some UI improvements for the oldest tools as a result of moving to the same codebase used by the more recent tools.
2023-06-26 15:11:01 +02:00
// This function takes our global sf2000ImageData object (Uint8Array),
// converts it to an ImageData object and assigns it to our
// previewCanvasData global; it then renders that ImageData to our preview
// canvas...
function convertFromSF2000AndRender() {
Bigger update... Added a new tool, the Generic Image Tool - allows you to convert SF2000 images to PNG, and PNG/JPEG images to SF2000 formats with several options. Also added a large amount of arcade-specific information thanks to some heroic work by `adcockm#8175`, fixed some typos thanks to `Luke#4448`, and tracked down where an "unused" image was actually being used thanks to `kid_sinn#9691`
2023-05-24 15:07:54 +02:00
if (imageFormat == "RGB565") {
Transitioned to shared Javascript library There was a lot of repeated JS across all my tools (e.g., image conversion, BIOS hash checking, etc.), and so I decided to move all shared code out to its own separate library. This will improve scalability and maintainability at the cost of portability - a fair trade in my opinion. This work also involved large-scale refactoring of all of the tools. There's no actual functional difference (all the tools should behave exactly the same), bar some UI improvements for the oldest tools as a result of moving to the same codebase used by the more recent tools.
2023-06-26 15:11:01 +02:00
previewCanvasData = rgb565ToImageData(sf2000ImageData, outputImageWidth, outputImageHeight);
Bigger update... Added a new tool, the Generic Image Tool - allows you to convert SF2000 images to PNG, and PNG/JPEG images to SF2000 formats with several options. Also added a large amount of arcade-specific information thanks to some heroic work by `adcockm#8175`, fixed some typos thanks to `Luke#4448`, and tracked down where an "unused" image was actually being used thanks to `kid_sinn#9691`
2023-05-24 15:07:54 +02:00
}
else if (imageFormat == "BGRA") {
Transitioned to shared Javascript library There was a lot of repeated JS across all my tools (e.g., image conversion, BIOS hash checking, etc.), and so I decided to move all shared code out to its own separate library. This will improve scalability and maintainability at the cost of portability - a fair trade in my opinion. This work also involved large-scale refactoring of all of the tools. There's no actual functional difference (all the tools should behave exactly the same), bar some UI improvements for the oldest tools as a result of moving to the same codebase used by the more recent tools.
2023-06-26 15:11:01 +02:00
previewCanvasData = bgraToImageData(sf2000ImageData, outputImageWidth, outputImageHeight);
Bigger update... Added a new tool, the Generic Image Tool - allows you to convert SF2000 images to PNG, and PNG/JPEG images to SF2000 formats with several options. Also added a large amount of arcade-specific information thanks to some heroic work by `adcockm#8175`, fixed some typos thanks to `Luke#4448`, and tracked down where an "unused" image was actually being used thanks to `kid_sinn#9691`
2023-05-24 15:07:54 +02:00
}
var canvas = document.getElementById("processFilePreview");
var context = canvas.getContext("2d");
Transitioned to shared Javascript library There was a lot of repeated JS across all my tools (e.g., image conversion, BIOS hash checking, etc.), and so I decided to move all shared code out to its own separate library. This will improve scalability and maintainability at the cost of portability - a fair trade in my opinion. This work also involved large-scale refactoring of all of the tools. There's no actual functional difference (all the tools should behave exactly the same), bar some UI improvements for the oldest tools as a result of moving to the same codebase used by the more recent tools.
2023-06-26 15:11:01 +02:00
canvas.width = previewCanvasData.width;
canvas.height = previewCanvasData.height;
Bigger update... Added a new tool, the Generic Image Tool - allows you to convert SF2000 images to PNG, and PNG/JPEG images to SF2000 formats with several options. Also added a large amount of arcade-specific information thanks to some heroic work by `adcockm#8175`, fixed some typos thanks to `Luke#4448`, and tracked down where an "unused" image was actually being used thanks to `kid_sinn#9691`
2023-05-24 15:07:54 +02:00
context.clearRect(0, 0, canvas.width, canvas.height);
Transitioned to shared Javascript library There was a lot of repeated JS across all my tools (e.g., image conversion, BIOS hash checking, etc.), and so I decided to move all shared code out to its own separate library. This will improve scalability and maintainability at the cost of portability - a fair trade in my opinion. This work also involved large-scale refactoring of all of the tools. There's no actual functional difference (all the tools should behave exactly the same), bar some UI improvements for the oldest tools as a result of moving to the same codebase used by the more recent tools.
2023-06-26 15:11:01 +02:00
context.putImageData(previewCanvasData, 0, 0);
Bigger update... Added a new tool, the Generic Image Tool - allows you to convert SF2000 images to PNG, and PNG/JPEG images to SF2000 formats with several options. Also added a large amount of arcade-specific information thanks to some heroic work by `adcockm#8175`, fixed some typos thanks to `Luke#4448`, and tracked down where an "unused" image was actually being used thanks to `kid_sinn#9691`
2023-05-24 15:07:54 +02:00
}
</script>
<hr>
Transitioned to shared Javascript library There was a lot of repeated JS across all my tools (e.g., image conversion, BIOS hash checking, etc.), and so I decided to move all shared code out to its own separate library. This will improve scalability and maintainability at the cost of portability - a fair trade in my opinion. This work also involved large-scale refactoring of all of the tools. There's no actual functional difference (all the tools should behave exactly the same), bar some UI improvements for the oldest tools as a result of moving to the same codebase used by the more recent tools.
2023-06-26 15:11:01 +02:00
<p><a rel="license" href="https://creativecommons.org/publicdomain/zero/1.0/">CC0</a>: public domain. Version 1.1, 20230626.1</p>
Bigger update... Added a new tool, the Generic Image Tool - allows you to convert SF2000 images to PNG, and PNG/JPEG images to SF2000 formats with several options. Also added a large amount of arcade-specific information thanks to some heroic work by `adcockm#8175`, fixed some typos thanks to `Luke#4448`, and tracked down where an "unused" image was actually being used thanks to `kid_sinn#9691`
2023-05-24 15:07:54 +02:00
</body>
</html>
Reference in New Issue Copy Permalink