progress on webcomponent/bare wasm PoC

knzai · Aug 7, 2024 · f898405 · f898405
1 parent d47f2a0
commit f898405
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 24 deletions.
diff --git a/src/lib.rs b/src/lib.rs
@@ -62,7 +62,7 @@ impl ImageType {
     }
 
     pub fn widths(&self, byte_count: usize) -> Vec<i64> {
-        Self::factors(self.pixel_count(byte_count), 80)
+        Self::factors(self.pixel_count(byte_count), 320)
     }
 
     pub fn heights(&self, byte_count: usize, width: usize) -> Vec<i64> {

diff --git a/src/png.rs b/src/png.rs
@@ -56,3 +56,10 @@ pub fn write_to(
 ) -> Result<(), image::ImageError> {
     convert_image(image_data, palette).write_to(&mut Cursor::new(bytes), image::ImageFormat::Png)
 }
+
+pub fn write2(image_data: RawGrid, palette: ColorPalette) -> Vec<u8> {
+    let mut bytes: Vec<u8> = Vec::new();
+    let _ = convert_image(image_data.clone(), palette)
+        .write_to(&mut Cursor::new(&mut bytes), image::ImageFormat::Png);
+    bytes
+}
diff --git a/src/webc/index.html b/src/webc/index.html
@@ -12,18 +12,29 @@
    <script>
       const fileReader = new FileReader();
       fileReader.onloadend = function() {
-         var array = new Int8Array(fileReader.result);
-         document.getElementById('preview').src = window.wasmBindings.png(array);
+         let array = new Int8Array(fileReader.result);
+         let images = window.wasmBindings.previews(array);
+         images.forEach(makePreview);
       }
       document.addEventListener("DOMContentLoaded", () => {
          const fileInput = document.getElementById('file-input');
          fileInput.addEventListener("change", e => fileReader.readAsArrayBuffer(fileInput.files[0]));
       });
+
+      function makePreview(src) {
+         const template = document.querySelector("#preview");
+         const clone = template.content.cloneNode(true);
+         const container = document.querySelector(".preview-area");
+         let img = clone.querySelector("img");
+         img.src=src;
+         container.appendChild(img);
+      }
 </script>
 </head>
 <body>
    <h1>Process your CGA/EGAs</h1>
    <input id="file-input" multiple="false" type="file" accept=".bin,.cga,.ega,.cega" />
-   <img id="preview" src="" />
+   <div class="preview-area"></div>
+   <template id="preview"><img class="preview" src="" /></template>
 </body>
 </html>
diff --git a/src/webc/main.rs b/src/webc/main.rs
@@ -15,9 +15,24 @@ pub fn png(data: &[u8]) -> String {
     let parser = ParserType::CGA;
     let image = file_data.parse(parser, 320);
     let palette = palette_from_abbr("cga0");
-    let mut bytes: Vec<u8> = Vec::new();
-    let _ = png::write_to(&mut bytes, image.data(), palette.clone());
-    format!("data:application/png;base64,{}", STANDARD.encode(bytes))
+    let result = png::write2(image.data(), palette.clone());
+    format!("data:application/png;base64,{}", STANDARD.encode(result))
+}
+
+#[wasm_bindgen]
+pub fn previews(data: &[u8]) -> Vec<String> {
+    let file_data = Raw::new(data);
+    let palette = palette_from_abbr("cga0");
+    file_data
+        .previews()
+        .iter()
+        .map(|p| {
+            format!(
+                "data:application/png;base64,{}",
+                STANDARD.encode(png::write2(p.data(), palette.clone()))
+            )
+        })
+        .collect()
 }
 
 fn main() {}
diff --git a/src/webc/styles.css b/src/webc/styles.css
@@ -5,10 +5,14 @@
 
 html,
 body {
-  margin: 0;
+  margins 0;
   padding: 0;
   background: #2d3131;
   color: #fcfcfc;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-flow: column;
 }
 
 p {
@@ -19,18 +23,12 @@ label {
   cursor: pointer;
 }
 
-
-#wrapper {
-  width: 70%;
-  margin: auto;
-}
-
 #h1 {
   font-size: 2rem;
   text-align: center;
 }
 
-.drop-container {
+/*.drop-container {
   padding: 4rem;
   display: flex;
   flex-direction: column;
@@ -44,23 +42,24 @@ label {
 .drop-container i {
   font-size: 4rem;
 }
-
+*/
 .preview-area {
   display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  align-items: stretch;
+  flex-flow: row wrap;
+  align-items: flex-start;
 }
-
-.preview-tile {
+.preview-area img{
+  margin: 1rem;
+}
+/*.preview-tile {
   display: flex;
   flex-direction: column;
   padding: 2rem;
   margin: 1rem;
   background: #313737;
   border-radius: 1rem;
-}
-.preview-row {
+}*/
+/*.preview-row {
   display: flex;
   flex-direction: row;
   padding: 2rem;
@@ -80,4 +79,4 @@ label {
   display: flex;
   flex-direction: column;
   justify-content: center;
-}
+}*/