From 8d018d56bd7d54edcd968a132ca6e1e6bf0352f1 Mon Sep 17 00:00:00 2001 From: Kenzi Connor Date: Mon, 22 Jul 2024 14:20:18 -0700 Subject: [PATCH] start reworking api based on learnings from doing a web front-end to it --- README.md | 1 - src/image.rs | 32 +++++-------------- src/terminal/args.rs | 7 ----- src/terminal/main.rs | 2 +- src/wasm/image.rs | 15 ++++----- src/wasm/styles.css | 73 ++++++++++++++++++++++++++++++++++++++++++++ 6 files changed, 88 insertions(+), 42 deletions(-) create mode 100644 src/wasm/styles.css diff --git a/README.md b/README.md index e52f459..ccdc08a 100644 --- a/README.md +++ b/README.md @@ -86,7 +86,6 @@ Options: -i, --image-parser [default: cga] [possible values: ega_row_planar, erp, cga] -c, --custom-ascii 4 or 16 chars palette like -a " +%0" -w, --width [default: 320] - -m, --max-width used for wrapping rows if retiling with tile_height -o, --output-file format based on extension - see image crate -t, --tile-height -s, --sdl diff --git a/src/image.rs b/src/image.rs index 379dc8d..eb1aa9b 100644 --- a/src/image.rs +++ b/src/image.rs @@ -5,6 +5,8 @@ use crate::{parser, RawGrid}; pub struct Image(RawGrid); impl Image { + const MAX_WIDTH: usize = 320; + pub fn new(buffer: &[u8], width: usize, parser: parser::ParserType) -> Self { Self(parser.process_input(buffer, width)) } @@ -61,17 +63,9 @@ impl Image { } } -pub fn tile( - data: Vec>, - tile_height: usize, - max_width: Option, -) -> Vec> { +pub fn tile(data: Vec>, tile_height: usize) -> Vec> { let width = data[0].len(); - let tiles_per_row = if let Some(mw) = max_width { - mw / width - } else { - width - }; + let tiles_per_row = Image::MAX_WIDTH / width; data.chunks(tiles_per_row * tile_height) .flat_map(|tile_row| concat_tiles(tile_row.to_vec(), tile_height)) @@ -132,38 +126,28 @@ mod tests { } #[test] + //rework these tests to actually be wider than max_width, or do something clever to overwrite it fn tiling() { let data: u32 = 0b00011011000110110001101100011011; let tiled = image::tile( Image::new(&data.to_be_bytes(), 2, ParserType::type_str("cga")).data(), 2, - Some(4), ); assert_eq!( tiled, - [ - vec![0, 1, 0, 1], - vec![2, 3, 2, 3], - vec![0, 1, 0, 1], - vec![2, 3, 2, 3], - ] + [vec![0, 1, 0, 1, 0, 1, 0, 1], vec![2, 3, 2, 3, 2, 3, 2, 3],] ); let data: u64 = 0b0001101100011011000110110001101100011011000110110001101100011011; let tiled = image::tile( Image::new(&data.to_be_bytes(), 2, ParserType::type_str("cga")).data(), 2, - Some(6), ); assert_eq!( tiled, vec![ - vec![0, 1, 0, 1, 0, 1], - vec![2, 3, 2, 3, 2, 3], - vec![0, 1, 0, 1, 0, 1], - vec![2, 3, 2, 3, 2, 3], - vec![0, 1, 0, 1], - vec![2, 3, 2, 3], + vec![0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1], + vec![2, 3, 2, 3, 2, 3, 2, 3, 2, 3, 2, 3, 2, 3, 2, 3], ] ); } diff --git a/src/terminal/args.rs b/src/terminal/args.rs index 2c53c12..b569ea7 100644 --- a/src/terminal/args.rs +++ b/src/terminal/args.rs @@ -25,13 +25,6 @@ pub struct Args { #[clap(short, long, default_value_t = 320)] pub width: usize, - #[clap( - short, - long, - help = "used for wrapping rows if retiling with tile_height" - )] - pub max_width: Option, - #[clap(short, long, help = "format based on extension - see image crate")] pub output_file: Option, diff --git a/src/terminal/main.rs b/src/terminal/main.rs index f62180c..9747432 100644 --- a/src/terminal/main.rs +++ b/src/terminal/main.rs @@ -23,7 +23,7 @@ pub fn main() -> Result<(), Box> { let image = Image::new(&reader, args.width, parser); let image_data = if args.tile_height.is_some() { - image::tile(image.data(), args.tile_height.unwrap(), args.max_width) + image::tile(image.data(), args.tile_height.unwrap()) } else { image.data() }; diff --git a/src/wasm/image.rs b/src/wasm/image.rs index ab99644..fa64b6a 100644 --- a/src/wasm/image.rs +++ b/src/wasm/image.rs @@ -14,7 +14,7 @@ use crate::wasm::FileUpload; pub struct ImageFile<'a> { file_input: &'a FileUpload, width: usize, - height: usize + height: usize, } impl ImageFile<'_> { @@ -42,13 +42,7 @@ impl ImageFile<'_> { let palette = palette_from_abbr("cga0"); let mut bytes: Vec = Vec::new(); - let data = if self.width == 320 { - image.data() - } else { - tile(image.data(), self.height, Some(320)) - }; - - let _ = png::write_to(&mut bytes, data, palette.clone()); + let _ = png::write_to(&mut bytes, tile(image.data(), self.height), palette.clone()); bytes } } @@ -74,7 +68,10 @@ impl Component for ImageComponent { type Properties = Props; fn create(_ctx: &Context) -> Self { - Self { width: 320, height: 200 } + Self { + width: 320, + height: 200, + } } fn update(&mut self, _ctx: &Context, msg: Self::Message) -> bool { diff --git a/src/wasm/styles.css b/src/wasm/styles.css new file mode 100644 index 0000000..972d8fb --- /dev/null +++ b/src/wasm/styles.css @@ -0,0 +1,73 @@ +* { + box-sizing: border-box; + font-family: Helvetica Neue, Helvetica, Arial, sans-serif; +} + +html, +body { + margin: 0; + padding: 0; + background: #2d3131; + color: #fcfcfc; +} + +img { + display: block; +} + +p { + text-align: center; +} + +label { + cursor: pointer; +} + + +#wrapper { + width: 70%; + margin: auto; +} + +#title { + font-size: 2rem; + text-align: center; +} + +#drop-container { + padding: 4rem; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + background: #3d4141; + border: 1px dashed #fcfcfc; + border-radius: 1rem; +} + +#drop-container i { + font-size: 4rem; +} + +#preview-area { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: stretch; +} + +.preview-tile { + display: flex; + flex-direction: column; + padding: 2rem; + margin: 1rem; + background: #313737; + border-radius: 1rem; +} + +.preview-media { + flex: 1; + display: flex; + flex-direction: column; + justify-content: center; +} \ No newline at end of file