Download .zip of .webp images

web/package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "@solidjs/router": "^0.15.2",
         "chart.js": "^4.4.1",
+        "jszip": "^3.10.1",
         "moment": "^2.30.1",
         "solid-js": "^1.9.4"
       },
@@ -1430,6 +1431,12 @@
       "integrity": "sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==",
       "dev": true
     },
+    "node_modules/core-util-is": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
+      "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==",
+      "license": "MIT"
+    },
     "node_modules/cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -1697,6 +1704,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/immediate": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
+      "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==",
+      "license": "MIT"
+    },
     "node_modules/immutable": {
       "version": "4.3.5",
       "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.5.tgz",
@@ -1716,8 +1729,7 @@
     "node_modules/inherits": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
-      "dev": true
     },
     "node_modules/is-binary-path": {
       "version": "2.1.0",
@@ -1774,6 +1786,12 @@
         "url": "https://github.com/sponsors/mesqueeb"
       }
     },
+    "node_modules/isarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==",
+      "license": "MIT"
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -1804,6 +1822,18 @@
         "node": ">=6"
       }
     },
+    "node_modules/jszip": {
+      "version": "3.10.1",
+      "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.10.1.tgz",
+      "integrity": "sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==",
+      "license": "(MIT OR GPL-3.0-or-later)",
+      "dependencies": {
+        "lie": "~3.3.0",
+        "pako": "~1.0.2",
+        "readable-stream": "~2.3.6",
+        "setimmediate": "^1.0.5"
+      }
+    },
     "node_modules/less": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/less/-/less-4.2.0.tgz",
@@ -1830,6 +1860,15 @@
         "source-map": "~0.6.0"
       }
     },
+    "node_modules/lie": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz",
+      "integrity": "sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==",
+      "license": "MIT",
+      "dependencies": {
+        "immediate": "~3.0.5"
+      }
+    },
     "node_modules/lilconfig": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
@@ -2001,6 +2040,12 @@
         "wrappy": "1"
       }
     },
+    "node_modules/pako": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
+      "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==",
+      "license": "(MIT AND Zlib)"
+    },
     "node_modules/parse-node-version": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parse-node-version/-/parse-node-version-1.0.1.tgz",
@@ -2179,6 +2224,12 @@
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
       "dev": true
     },
+    "node_modules/process-nextick-args": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
+      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
+      "license": "MIT"
+    },
     "node_modules/prr": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
@@ -2186,6 +2237,21 @@
       "dev": true,
       "optional": true
     },
+    "node_modules/readable-stream": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
+      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
+      "license": "MIT",
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
     "node_modules/readdirp": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
@@ -2243,6 +2309,12 @@
         "fsevents": "~2.3.2"
       }
     },
+    "node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+      "license": "MIT"
+    },
     "node_modules/safer-buffer": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
@@ -2303,6 +2375,12 @@
         "seroval": "^1.0"
       }
     },
+    "node_modules/setimmediate": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
+      "integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==",
+      "license": "MIT"
+    },
     "node_modules/solid-js": {
       "version": "1.9.4",
       "resolved": "https://registry.npmjs.org/solid-js/-/solid-js-1.9.4.tgz",
@@ -2349,6 +2427,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
     "node_modules/strip-bom": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
@@ -2517,8 +2604,7 @@
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
-      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
-      "dev": true
     },
     "node_modules/validate-html-nesting": {
       "version": "1.2.2",
@@ -3541,6 +3627,11 @@
         }
       }
     },
+    "core-util-is": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
+      "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ=="
+    },
     "cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -3728,6 +3819,11 @@
       "dev": true,
       "optional": true
     },
+    "immediate": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
+      "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ=="
+    },
     "immutable": {
       "version": "4.3.5",
       "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.5.tgz",
@@ -3747,8 +3843,7 @@
     "inherits": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
-      "dev": true
     },
     "is-binary-path": {
       "version": "2.1.0",
@@ -3786,6 +3881,11 @@
       "integrity": "sha512-uKua1wfy3Yt+YqsD6mTUEa2zSi3G1oPlqTflgaPJ7z63vUGN5pxFpnQfeSLMFnJDEsdvOtkp1rUWkYjB4YfhgA==",
       "dev": true
     },
+    "isarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ=="
+    },
     "js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -3804,6 +3904,17 @@
       "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
       "dev": true
     },
+    "jszip": {
+      "version": "3.10.1",
+      "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.10.1.tgz",
+      "integrity": "sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==",
+      "requires": {
+        "lie": "~3.3.0",
+        "pako": "~1.0.2",
+        "readable-stream": "~2.3.6",
+        "setimmediate": "^1.0.5"
+      }
+    },
     "less": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/less/-/less-4.2.0.tgz",
@@ -3822,6 +3933,14 @@
         "tslib": "^2.3.0"
       }
     },
+    "lie": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz",
+      "integrity": "sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==",
+      "requires": {
+        "immediate": "~3.0.5"
+      }
+    },
     "lilconfig": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
@@ -3943,6 +4062,11 @@
         "wrappy": "1"
       }
     },
+    "pako": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
+      "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw=="
+    },
     "parse-node-version": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parse-node-version/-/parse-node-version-1.0.1.tgz",
@@ -4046,6 +4170,11 @@
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
       "dev": true
     },
+    "process-nextick-args": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
+      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag=="
+    },
     "prr": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
@@ -4053,6 +4182,20 @@
       "dev": true,
       "optional": true
     },
+    "readable-stream": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
+      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
+      "requires": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
     "readdirp": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
@@ -4097,6 +4240,11 @@
         "fsevents": "~2.3.2"
       }
     },
+    "safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+    },
     "safer-buffer": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
@@ -4138,6 +4286,11 @@
       "integrity": "sha512-hULTbfzSe81jGWLH8TAJjkEvw6JWMqOo9Uq+4V4vg+HNq53hyHldM9ZOfjdzokcFysiTp9aFdV2vJpZFqKeDjQ==",
       "requires": {}
     },
+    "setimmediate": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
+      "integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA=="
+    },
     "solid-js": {
       "version": "1.9.4",
       "resolved": "https://registry.npmjs.org/solid-js/-/solid-js-1.9.4.tgz",
@@ -4172,6 +4325,14 @@
       "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
       "dev": true
     },
+    "string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "requires": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
     "strip-bom": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
@@ -4283,8 +4444,7 @@
     "util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
-      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
-      "dev": true
     },
     "validate-html-nesting": {
       "version": "1.2.2",

web/package.json

@@ -17,9 +17,10 @@
     "vite-plugin-solid": "^2.11.0"
   },
   "dependencies": {
+    "@solidjs/router": "^0.15.2",
     "chart.js": "^4.4.1",
+    "jszip": "^3.10.1",
     "moment": "^2.30.1",
-    "solid-js": "^1.9.4",
+    "solid-js": "^1.9.4"
-    "@solidjs/router": "^0.15.2"
   }
 }

web/src/harmonie/Harmonie.tsx

@@ -18,6 +18,7 @@ export const Harmonie: Component<{}> = () => {
     const [getGribList, setGribList] = createSignal<GribMessage[]>([])
     const [getCanvas, setCanvas] = createSignal<HTMLCanvasElement>()
     const [getImgList, setImgList] = createSignal<[string, ImageBitmap | undefined][]>([])
+    const [getRefDate, setRefDate] = createSignal('')
 
     const cachedMessagesSignal = createSignal<GribMessage[]>([])
     const cachedBuffersSignal = createSignal<Uint8Array[]>([])
@@ -71,6 +72,7 @@ export const Harmonie: Component<{}> = () => {
                 getCanvas={getCanvas}
                 options={{ getIsCrop: getIsCrop, getIsContour: getIsContour, getIsInterpolated: getIsInterpolated }}
                 imgListSignal={[getImgList, setImgList]}
+                setRefDate={setRefDate}
                 onClick={getAllGribStructure}
             />
             <ul class={styles.fileList}>
@@ -93,6 +95,7 @@ export const Harmonie: Component<{}> = () => {
                 getIsLoading={getIsLoading}
                 getCanvas={getCanvas}
                 getImgList={getImgList}
+                getRefDate={getRefDate}
             />
             <DrawView
                 isLoadingSignal={[getIsLoading, setIsLoading]}

web/src/harmonie/ReferenceTimes.tsx

@@ -1,4 +1,4 @@
-import { Accessor, Component, createSignal, resetErrorBoundaries, Setter, Signal } from 'solid-js'
+import { Accessor, Component, createSignal, Setter, Signal } from 'solid-js'
 
 import { DrawOptions, GribMessage } from './interfaces'
 import { fetchGribBinaries } from './fetchGrib'
@@ -15,6 +15,7 @@ export const ReferenceTimes: Component<{
     getCanvas: Accessor<HTMLCanvasElement | undefined>,
     options: DrawOptions,
     imgListSignal: Signal<[string, ImageBitmap | undefined][]>,
+    setRefDate: Setter<string>,
     onClick: () => void,
 }> = ({
     setIsLoading,
@@ -23,6 +24,7 @@ export const ReferenceTimes: Component<{
     getCanvas,
     options,
     imgListSignal: [getImgList, setImgList],
+    setRefDate,
     onClick,
 }) => {
     const [getActiveDate, setActiveDate] = createSignal('')
@@ -73,6 +75,7 @@ export const ReferenceTimes: Component<{
             },
         ).finally(() => {
             console.log("FINALLLY")
+            setRefDate(refDateStr)
             const ctx = canvas.getContext('2d')!
             ctx.clearRect(0, 0, canvas.width, canvas.height)
             setIsLoading(false)

web/src/harmonie/SlideShow.tsx

@@ -7,10 +7,12 @@ export const SlideShow: Component<{
     getIsLoading: Accessor<boolean>,
     getCanvas: Accessor<HTMLCanvasElement | undefined>,
     getImgList: Accessor<[string, ImageBitmap | undefined][]>,
+    getRefDate: Accessor<string>,
 }> = ({
     getIsLoading,
     getCanvas,
-    getImgList
+    getImgList,
+    getRefDate,
 }) => {
     const [getActive, setActive] = createSignal(-1)
     const [getIsPlaying, setIsPlaying] = createSignal(false)
@@ -60,7 +62,7 @@ export const SlideShow: Component<{
 
     function download() {
         const imgs = getImgList().filter(([,img]) => !!img) as [string, ImageBitmap][]
-        downloadImagesAsZip(imgs)
+        downloadImagesAsZip(imgs, getRefDate())
     }
 
     return <>
@@ -70,7 +72,7 @@ export const SlideShow: Component<{
                 <input type='button' value={getIsPlaying()?'pause':'play'} onClick={play} />
                 <input type='button' value='next' onClick={() => next()} />
             </div>
-            <input type='button' value='download all' onClick={download} />
+            <input type='button' value='download .zip' onClick={download} />
         </div>
         <ul class={styles.slideShowList}>
             { getImgList().map(([forecastDate, img], i) =>

web/src/helpers/download.ts

@@ -1,46 +1,65 @@
-export async function downloadImagesAsZip(images: [string, ImageBitmap][]) {
+import JSZip from 'jszip'
-    downloadCompressedImage(images[0][1], '00.gzip')
+
+export async function downloadImagesAsZip(
+    images: [string, ImageBitmap][],
+    filename = 'images',
+): Promise<void> {
+    filename = filename + '.zip'
+    const strBlobArr = await Promise.all(
+        images.map(async ([bitmapName, bitmap]): Promise<[string, Blob]> => {
+            const blob = await bitmapToBlob(bitmap)
+            return [bitmapName+'.webp', blob]
+        })
+    )
+
+    const content = await createZip(strBlobArr)
+
+    download(content, filename)
 }
 
-async function compressImage(bitmap: ImageBitmap): Promise<Blob> {
+function bitmapToBlob( bitmap: ImageBitmap): Promise<Blob> {
-    // First convert ImageBitmap to WebP using canvas
+    const canvas = document.createElement('canvas')
-    const canvas = document.createElement('canvas');
+    canvas.width = bitmap.width
-    canvas.width = bitmap.width;
+    canvas.height = bitmap.height
-    canvas.height = bitmap.height;
+    const ctx = canvas.getContext('2d')!
+    ctx.drawImage(bitmap, 0, 0)
     
-    const ctx = canvas.getContext('2d');
+    return new Promise<Blob>((resolve, reject) => {
-    if (!ctx) throw new Error('Could not get canvas context');
+        canvas.toBlob(
-    
+            (blob) => {
-    ctx.drawImage(bitmap, 0, 0);
+                if (blob) resolve(blob)
-    
+                else reject(new Error(`Failed to convert blob to WebP`))
-    // Get WebP blob
+            },
-    const webpBlob = await new Promise<Blob>((resolve) => {
+            'image/webp',
-      canvas.toBlob((blob) => {
+            0.8
-        if (blob) resolve(blob);
+        )
-      }, 'image/webp', 0.8); // Quality 0.8, adjust as needed
+    })
-    });
+}
-  
+
-    // Convert Blob to ReadableStream
+export async function createZip(blobs: [string, Blob][]) {
-    const webpStream = webpBlob.stream();
+    const zip = new JSZip()
-    
+
-    // Apply GZIP compression
+    blobs.forEach(([name, blob]) => {
-    const compressedStream = webpStream.pipeThrough(
+        zip.file(name, blob)
-      new CompressionStream('gzip')
+    })
-    );
+
-  
+    return await zip.generateAsync({
-    // Return as Blob
+        type: 'blob',
-    return new Response(compressedStream).blob();
+        compression: 'DEFLATE',
-  }
+        compressionOptions: {
-  
+            level: 6
-  // Usage example:
+        }
-  async function downloadCompressedImage(bitmap: ImageBitmap, filename: string) {
+    })
-    const compressedBlob = await compressImage(bitmap);
+}
-    
+
-    const url = URL.createObjectURL(compressedBlob);
+export function download(content: Blob, name: string) {
-    const link = document.createElement('a');
+    const downloadUrl = URL.createObjectURL(content)
-    link.href = url;
+    const link = document.createElement('a')
-    link.download = filename;
+    link.href = downloadUrl
-    link.click();
+    link.download = name
-    
+    document.body.appendChild(link)
-    URL.revokeObjectURL(url);
+    link.click()
-  }
+    document.body.removeChild(link)
+
+    URL.revokeObjectURL(downloadUrl)
+}