Compare commits
1 Commits
game-data-
...
dithering-
| Author | SHA1 | Date | |
|---|---|---|---|
| 0324f5f389 |
@@ -1,6 +1,6 @@
|
|||||||
[package]
|
[package]
|
||||||
name = "pixsy"
|
name = "pixsy"
|
||||||
version = "0.72.8"
|
version = "0.72.7"
|
||||||
description = "convert images to Bitsy rooms"
|
description = "convert images to Bitsy rooms"
|
||||||
authors = ["Max Bradbury <max@tinybird.info>"]
|
authors = ["Max Bradbury <max@tinybird.info>"]
|
||||||
edition = "2018"
|
edition = "2018"
|
||||||
@@ -13,6 +13,7 @@ crate-type = ["cdylib"]
|
|||||||
[dependencies]
|
[dependencies]
|
||||||
base64 = "^0.12.3"
|
base64 = "^0.12.3"
|
||||||
bitsy-parser = "^0.72.5"
|
bitsy-parser = "^0.72.5"
|
||||||
|
dither = "^1.3.9"
|
||||||
image = "^0.23.7"
|
image = "^0.23.7"
|
||||||
json = "^0.12.4"
|
json = "^0.12.4"
|
||||||
lazy_static = "^1.4.0"
|
lazy_static = "^1.4.0"
|
||||||
|
|||||||
@@ -2,7 +2,6 @@
|
|||||||
@page-background: #968eb5;
|
@page-background: #968eb5;
|
||||||
@accent: #ec6d7d;
|
@accent: #ec6d7d;
|
||||||
@text: #464256;
|
@text: #464256;
|
||||||
@ok: #caec6d;
|
|
||||||
|
|
||||||
* {
|
* {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
@@ -132,13 +131,3 @@ textarea {
|
|||||||
image-rendering: pixelated;
|
image-rendering: pixelated;
|
||||||
image-rendering: crisp-edges;
|
image-rendering: crisp-edges;
|
||||||
}
|
}
|
||||||
|
|
||||||
.message {
|
|
||||||
background-color: @ok;
|
|
||||||
padding: 1em;
|
|
||||||
text-align: left;
|
|
||||||
|
|
||||||
&#game-data-errors {
|
|
||||||
background-color: @accent;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|||||||
10
index.pug
10
index.pug
@@ -34,9 +34,6 @@ html(lang="en-gb")
|
|||||||
autocomplete="off"
|
autocomplete="off"
|
||||||
)
|
)
|
||||||
|
|
||||||
p#game-data-result.message(style="display: none;")
|
|
||||||
p#game-data-errors.message(style="display: none;")
|
|
||||||
|
|
||||||
button.pagination.prev previous
|
button.pagination.prev previous
|
||||||
button.pagination.next#game-data-next(disabled=true) next
|
button.pagination.next#game-data-next(disabled=true) next
|
||||||
.page.image#page-image
|
.page.image#page-image
|
||||||
@@ -77,9 +74,12 @@ html(lang="en-gb")
|
|||||||
input#colour-foreground(type="color" value="#ffffff")
|
input#colour-foreground(type="color" value="#ffffff")
|
||||||
|
|
||||||
label
|
label
|
||||||
input#dither(type="checkbox" checked=true)
|
|
||||||
| dither
|
| dither
|
||||||
br
|
select#dither
|
||||||
|
option None
|
||||||
|
option(value="Atkinson" selected=true) Atkinson
|
||||||
|
option(value="Bayer4x4") Bayer 4×4
|
||||||
|
option(value="FloydSteinberg") Floyd-Steinberg
|
||||||
|
|
||||||
button.pagination.prev#back-to-image previous
|
button.pagination.prev#back-to-image previous
|
||||||
button.pagination.next#room-next add room
|
button.pagination.next#room-next add room
|
||||||
|
|||||||
34
script.js
34
script.js
@@ -78,8 +78,6 @@ async function run() {
|
|||||||
const inputColourBackground = el("colour-background");
|
const inputColourBackground = el("colour-background");
|
||||||
const inputColourForeground = el("colour-foreground");
|
const inputColourForeground = el("colour-foreground");
|
||||||
const inputRoomName = el("room-name");
|
const inputRoomName = el("room-name");
|
||||||
const paragraphGameResult = el("game-data-result");
|
|
||||||
const paragraphGameErrors = el("game-data-errors");
|
|
||||||
const selectPalette = el("palette");
|
const selectPalette = el("palette");
|
||||||
const textareaGameDataInput = el("game-data");
|
const textareaGameDataInput = el("game-data");
|
||||||
const textareaGameDataOutput = el("output");
|
const textareaGameDataOutput = el("output");
|
||||||
@@ -128,6 +126,7 @@ async function run() {
|
|||||||
el("game").addEventListener("change", function() {
|
el("game").addEventListener("change", function() {
|
||||||
readFile(this, function (e) {
|
readFile(this, function (e) {
|
||||||
textareaGameDataInput.value = e.target.result;
|
textareaGameDataInput.value = e.target.result;
|
||||||
|
console.log(load_game(e.target.result));
|
||||||
checkGameData();
|
checkGameData();
|
||||||
}, "text");
|
}, "text");
|
||||||
});
|
});
|
||||||
@@ -154,39 +153,16 @@ async function run() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function checkGameData() {
|
function checkGameData() {
|
||||||
paragraphGameResult.style.display = "none";
|
if (textareaGameDataInput.value.length > 0) {
|
||||||
paragraphGameErrors.style.display = "none";
|
|
||||||
|
|
||||||
let game_data = textareaGameDataInput.value;
|
|
||||||
|
|
||||||
if (game_data.length === 0) {
|
|
||||||
buttonGameDataProceed.setAttribute("disabled", "disabled");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
let result = load_game(game_data);
|
|
||||||
console.debug(result);
|
|
||||||
let parts = result.split(". Errors: ");
|
|
||||||
result = parts[0];
|
|
||||||
let errors = parts[1];
|
|
||||||
|
|
||||||
paragraphGameResult.innerText = result;
|
|
||||||
paragraphGameResult.style.display = "block";
|
|
||||||
|
|
||||||
if (errors) {
|
|
||||||
paragraphGameErrors.innerText = errors;
|
|
||||||
paragraphGameErrors.style.display = "block";
|
|
||||||
}
|
|
||||||
|
|
||||||
if (result.startsWith("Error")) {
|
|
||||||
buttonGameDataProceed.setAttribute("disabled", "disabled");
|
|
||||||
} else {
|
|
||||||
buttonGameDataProceed.removeAttribute("disabled");
|
buttonGameDataProceed.removeAttribute("disabled");
|
||||||
setPaletteDropdown();
|
setPaletteDropdown();
|
||||||
|
} else {
|
||||||
|
buttonGameDataProceed.setAttribute("disabled", "disabled");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
textareaGameDataInput.addEventListener("change", checkGameData);
|
textareaGameDataInput.addEventListener("change", checkGameData);
|
||||||
|
textareaGameDataInput.addEventListener("keyup", checkGameData);
|
||||||
checkGameData();
|
checkGameData();
|
||||||
|
|
||||||
el('image').addEventListener('change', function () {
|
el('image').addEventListener('change', function () {
|
||||||
|
|||||||
94
src/lib.rs
94
src/lib.rs
@@ -3,6 +3,7 @@
|
|||||||
use bitsy_parser::game::Game;
|
use bitsy_parser::game::Game;
|
||||||
use bitsy_parser::image::Image;
|
use bitsy_parser::image::Image;
|
||||||
use bitsy_parser::tile::Tile;
|
use bitsy_parser::tile::Tile;
|
||||||
|
use dither::prelude::Dither;
|
||||||
use image::{GenericImageView, Pixel, DynamicImage};
|
use image::{GenericImageView, Pixel, DynamicImage};
|
||||||
use image::imageops::ColorMap;
|
use image::imageops::ColorMap;
|
||||||
use image::imageops::FilterType::CatmullRom;
|
use image::imageops::FilterType::CatmullRom;
|
||||||
@@ -27,12 +28,18 @@ enum SelectedPalette {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
enum DitherAlgorithm {
|
||||||
|
Atkinson,
|
||||||
|
Bayer4x4,
|
||||||
|
FloydSteinberg,
|
||||||
|
}
|
||||||
|
|
||||||
struct State {
|
struct State {
|
||||||
game: Option<Game>,
|
game: Option<Game>,
|
||||||
image: Option<DynamicImage>,
|
image: Option<DynamicImage>,
|
||||||
room_name: Option<String>,
|
room_name: Option<String>,
|
||||||
palette: SelectedPalette,
|
palette: SelectedPalette,
|
||||||
dither: bool,
|
dither: Option<DitherAlgorithm>,
|
||||||
brightness: i32,
|
brightness: i32,
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -43,7 +50,7 @@ lazy_static! {
|
|||||||
image: None,
|
image: None,
|
||||||
room_name: None,
|
room_name: None,
|
||||||
palette: SelectedPalette::None,
|
palette: SelectedPalette::None,
|
||||||
dither: true,
|
dither: Some(DitherAlgorithm::Atkinson),
|
||||||
brightness: 0,
|
brightness: 0,
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
@@ -76,21 +83,16 @@ pub fn load_game(game_data: String) -> String {
|
|||||||
let result = Game::from(game_data);
|
let result = Game::from(game_data);
|
||||||
|
|
||||||
match result {
|
match result {
|
||||||
Ok((game, errors)) => {
|
Ok((game, _errs)) => {
|
||||||
let palette_id = game.palette_ids()[0].clone();
|
let palette_id = game.palette_ids()[0].clone();
|
||||||
let game_name = game.name.clone();
|
|
||||||
let errors: Vec<String> = errors.iter().map(|err| format!("{}", err)).collect();
|
|
||||||
|
|
||||||
state.game = Some(game);
|
state.game = Some(game);
|
||||||
state.palette = SelectedPalette::Existing { id: palette_id };
|
state.palette = SelectedPalette::Existing { id: palette_id };
|
||||||
|
format!("Loaded game")
|
||||||
format!("Loaded game: {}. Errors: {}", game_name, errors.join(", "))
|
},
|
||||||
}
|
|
||||||
_ => {
|
_ => {
|
||||||
state.game = None;
|
state.game = None;
|
||||||
state.palette = SelectedPalette::None;
|
state.palette = SelectedPalette::None;
|
||||||
|
format!("{}", result.err().unwrap())
|
||||||
format!("Error: {}", result.err().unwrap())
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -131,9 +133,15 @@ pub fn load_image(image_base64: String) -> String {
|
|||||||
}
|
}
|
||||||
|
|
||||||
#[wasm_bindgen]
|
#[wasm_bindgen]
|
||||||
pub fn set_dither(dither: bool) {
|
pub fn set_dither(dither: &str) {
|
||||||
let mut state = STATE.lock().unwrap();
|
let mut state = STATE.lock().unwrap();
|
||||||
state.dither = dither;
|
|
||||||
|
state.dither = match dither {
|
||||||
|
"Atkinson" => Some(DitherAlgorithm::Atkinson),
|
||||||
|
"Bayer4x4" => Some(DitherAlgorithm::Bayer4x4),
|
||||||
|
"FloydSteinberg" => Some(DitherAlgorithm::FloydSteinberg),
|
||||||
|
_ => None,
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#[wasm_bindgen]
|
#[wasm_bindgen]
|
||||||
@@ -172,7 +180,6 @@ pub fn get_palettes() -> String {
|
|||||||
|
|
||||||
let mut palette_objects = json::JsonValue::new_array();
|
let mut palette_objects = json::JsonValue::new_array();
|
||||||
|
|
||||||
if state.game.is_some() {
|
|
||||||
for palette in &state.game.as_ref().unwrap().palettes {
|
for palette in &state.game.as_ref().unwrap().palettes {
|
||||||
let mut object = json::JsonValue::new_object();
|
let mut object = json::JsonValue::new_object();
|
||||||
|
|
||||||
@@ -186,7 +193,6 @@ pub fn get_palettes() -> String {
|
|||||||
|
|
||||||
palette_objects.push(object).unwrap();
|
palette_objects.push(object).unwrap();
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
json::stringify(palette_objects)
|
json::stringify(palette_objects)
|
||||||
}
|
}
|
||||||
@@ -211,25 +217,55 @@ fn render_preview(state: &State) -> DynamicImage {
|
|||||||
let mut buffer = state.image.as_ref().unwrap().clone().into_rgba();
|
let mut buffer = state.image.as_ref().unwrap().clone().into_rgba();
|
||||||
|
|
||||||
let palette = match &state.palette {
|
let palette = match &state.palette {
|
||||||
SelectedPalette::None => bitsy_parser::mock::game_default().palettes[0].clone(),
|
SelectedPalette::None => {
|
||||||
SelectedPalette::Existing { id } => state.game.as_ref().unwrap().get_palette(id).unwrap().clone(),
|
bitsy_parser::mock::game_default().palettes[0].clone()
|
||||||
SelectedPalette::New { background, foreground } => palette_from(background, foreground),
|
},
|
||||||
|
SelectedPalette::Existing { id } => {
|
||||||
|
state.game.as_ref().unwrap().get_palette(id).unwrap().clone()
|
||||||
|
},
|
||||||
|
SelectedPalette::New { background, foreground } => {
|
||||||
|
palette_from(background, foreground)
|
||||||
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
let colour_map = crate::ColourMap::from(&palette);
|
let colour_map = crate::ColourMap::from(&palette);
|
||||||
|
|
||||||
// adjust brightness
|
// adjust brightness
|
||||||
let mut buffer = image::imageops::brighten(&mut buffer, state.brightness);
|
let mut buffer = image::imageops::brighten(
|
||||||
|
&mut buffer,
|
||||||
|
state.brightness
|
||||||
|
);
|
||||||
|
|
||||||
if state.dither {
|
if state.dither.is_some() {
|
||||||
image::imageops::dither(&mut buffer, &colour_map);
|
// image::imageops::dither(&mut buffer, &colour_map);
|
||||||
|
|
||||||
|
// so, what needs doing?
|
||||||
|
// convert the buffer to the format required by the dither crate
|
||||||
|
|
||||||
|
let dither_img = dither::prelude::Img::new(buffer.iter(), 128).unwrap();
|
||||||
|
|
||||||
|
// run the dither according to user preference
|
||||||
|
|
||||||
|
// todo what is the quantise function supposed to be like?
|
||||||
|
// dither::ditherer::ATKINSON.dither(dither_img, colour_map);
|
||||||
|
|
||||||
|
// convert the dither format back to an ImageBuffer
|
||||||
|
// buffer = image::ImageBuffer::new(128, 128); //from_vec(128, 128, pixels).unwrap();
|
||||||
|
//
|
||||||
|
// for pixel in dither_img.iter() {
|
||||||
|
// // todo enumerate?
|
||||||
|
// buffer.put_pixel(0,0, image::Rgba::from([0,0,0,0]));
|
||||||
|
// }
|
||||||
} else {
|
} else {
|
||||||
// just do colour indexing
|
// just do colour indexing
|
||||||
let indices = image::imageops::colorops::index_colors(&mut buffer, &colour_map);
|
let colour_indices = image::imageops::colorops::index_colors(
|
||||||
|
&mut buffer,
|
||||||
|
&colour_map
|
||||||
|
);
|
||||||
|
|
||||||
// todo get rid of magic numbers! what about Bitsy HD?
|
// todo get rid of magic numbers! what about Bitsy HD?
|
||||||
buffer = image::ImageBuffer::from_fn(128, 128, |x, y| -> image::Rgba<u8> {
|
buffer = image::ImageBuffer::from_fn(128, 128, |x, y| -> image::Rgba<u8> {
|
||||||
let p = indices.get_pixel(x, y);
|
let p = colour_indices.get_pixel(x, y);
|
||||||
|
|
||||||
colour_map
|
colour_map
|
||||||
.lookup(p.0[0] as usize)
|
.lookup(p.0[0] as usize)
|
||||||
@@ -399,16 +435,4 @@ mod test {
|
|||||||
// todo what? why are extraneous pixels appearing in the output tiles?
|
// todo what? why are extraneous pixels appearing in the output tiles?
|
||||||
assert_eq!(output(), include_str!("test-resources/expected.bitsy"));
|
assert_eq!(output(), include_str!("test-resources/expected.bitsy"));
|
||||||
}
|
}
|
||||||
|
|
||||||
#[test]
|
|
||||||
fn palettes() {
|
|
||||||
load_default_game();
|
|
||||||
|
|
||||||
assert_eq!(crate::get_palettes(), "[{\"id\":\"0\",\"name\":\"blueprint\"}]");
|
|
||||||
}
|
|
||||||
|
|
||||||
#[test]
|
|
||||||
fn no_palettes() {
|
|
||||||
assert_eq!(crate::get_palettes(), "[]");
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user