the beginnings of preview/wizard mode

Author: knzai

src/file_data.rs

@@ -27,4 +27,11 @@ impl Raw {
     pub fn parse(&self, parser: ParserType, width: usize) -> Image {
         Image(parser.process_input(&self.0, width))
     }
+
+    pub fn previews(&self) -> Vec<Image> {
+        self.widths(ImageType::CGA)
+            .iter()
+            .map(|w| Image(ParserType::CGA.process_input(&self.0, *w as usize)))
+            .collect()
+    }
 }

src/lib.rs

@@ -64,7 +64,7 @@ impl ImageType {
     pub fn widths(&self, byte_count: usize) -> Vec<i64> {
         factor(self.pixel_count(byte_count).try_into().unwrap())
             .into_iter()
-            .filter(|&x| x < 80)
+            .filter(|&x| x > 4 && x < 80)
             .collect()
     }
 }

src/wasm/image.rs

@@ -1,13 +1,12 @@
 use base64::{engine::general_purpose::STANDARD, Engine};
 
-use web_sys::HtmlInputElement;
+use web_sys::{HtmlElement, HtmlInputElement};
 use yew::{html, Callback, Component, Context, Event, Html, Properties, SubmitEvent, TargetCast};
 
 use crate::color::palette::palette_from_abbr;
-use crate::file_data;
 use crate::image::tile;
 use crate::parser::ParserType;
-use crate::png;
+use crate::{file_data, png};
 
 use crate::wasm::FileUpload;
 
@@ -42,6 +41,28 @@ impl ImageComponent {
         };
         format!("data:application/png;base64,{}", STANDARD.encode(data))
     }
+
+    pub fn previews(&self, file: &FileUpload) -> Html {
+        if file.mime_type.contains("image") {
+            "".into()
+        } else {
+            let file_data = file_data::Raw::new(&file.data);
+            file_data
+                .previews()
+                .iter()
+                .map(|p| {
+                    let palette = palette_from_abbr("cga0");
+                    let mut bytes: Vec<u8> = Vec::new();
+
+                    let _ = png::write_to(&mut bytes, tile(p.data(), self.height), palette.clone());
+                    let src = format!("data:application/png;base64,{}", STANDARD.encode(bytes));
+                    html! {
+                        <img src={ src } />
+                    }
+                })
+                .collect()
+        }
+    }
 }
 
 impl Component for ImageComponent {
@@ -76,18 +97,21 @@ impl Component for ImageComponent {
         let file = &ctx.props().file;
 
         html! {
-            <div class="preview-tile ">
-                <form onsubmit={noop}>
-                        <label for="width">{"[Tile] Width"}</label>
-                        <input name="width" type="number" value={self.width.to_string()} onchange={ctx.link().callback(Msg::Width)} />
-                        <label for="height">{"[Tile] Height"}</label>
-                        <input name="height" type="number" value={self.height.to_string()} onchange={ctx.link().callback(Msg::Height)} />
-                </form>
-                <p class="preview-name">{ file.name.to_string() }</p>
-                <div class=".preview-media">
-                    <img src={ self.src(file) } />
+            <>
+                <div class="preview-tile ">
+                    <div class=".preview-media">
+                        <p class="preview-name">{ file.name.to_string() }</p>
+                        <img src={ self.src(file) } />
+                    </div>
+                    <form onsubmit={noop}>
+                            <label for="width">{"[Tile] Width"}</label>
+                            <input name="width" type="number" value={self.width.to_string()} onchange={ctx.link().callback(Msg::Width)} />
+                            <label for="height">{"[Tile] Height"}</label>
+                            <input name="height" type="number" value={self.height.to_string()} onchange={ctx.link().callback(Msg::Height)} />
+                    </form>
                 </div>
-            </div>
+                {self.previews(file)}
+            </>
         }
     }
 }

src/wasm/main.rs

@@ -41,9 +41,7 @@ impl Component for App {
             <div id="wrapper">
                 <h1>{ "Process your CGA/EGAs" }</h1>
                 <FileInput accept="image/png,.bin,.cga,.ega" onload={ctx.link().callback( Msg::Loaded )} children={None}/>
-                <div id="preview-area">
-                    {{ images }}
-                </div>
+                <div id="preview-area">{{ images }}</div>
             </div>
         }
     }

src/wasm/styles.css

@@ -11,10 +11,6 @@ body {
   color: #fcfcfc;
 }
 
-img {
-	display: block;
-}
-
 p {
   text-align: center;
 }