From 9c91b33253023bf0c6fe6313cd578c9899ca4d04 Mon Sep 17 00:00:00 2001 From: minottic Date: Tue, 29 Jul 2025 18:39:07 +0200 Subject: [PATCH 1/7] Load hdf5 from buffer --- app/public/index.html | 15 ++++++++------- app/src/h5-element.tsx | 14 ++++++++++++-- 2 files changed, 20 insertions(+), 9 deletions(-) diff --git a/app/public/index.html b/app/public/index.html index f76b0cd..4284133 100644 --- a/app/public/index.html +++ b/app/public/index.html @@ -15,17 +15,18 @@

H5Web Web Component Test

- diff --git a/app/src/h5-element.tsx b/app/src/h5-element.tsx index a5ee071..ed390db 100644 --- a/app/src/h5-element.tsx +++ b/app/src/h5-element.tsx @@ -34,11 +34,21 @@ export class H5WebViewer extends HTMLElement { this.unmount(); } - set file(file: File) { - this._file = file; + set base64Data(base64Data: string) { + this._file = this.base64ToFile(base64Data); this.mount(); } + private base64ToFile(base64Data: string, filename = "foo.h5", mimeType = ''): File { + const base64 = base64Data.split(',')[1] + const binary = atob(base64); + const bytes = new Uint8Array(binary.length); + for (let i = 0; i < binary.length; i++) { + bytes[i] = binary.charCodeAt(i); + } + return new File([bytes], filename, { type: mimeType }); + } + private mount() { if (!this.container || !this.isConnected) return; From e9bf775e68663d32202801db8e204081b8d571ee Mon Sep 17 00:00:00 2001 From: minottic Date: Wed, 30 Jul 2025 15:41:16 +0200 Subject: [PATCH 2/7] Add relative width --- app/src/h5-wrapper.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/src/h5-wrapper.tsx b/app/src/h5-wrapper.tsx index 2666e9c..25ad909 100644 --- a/app/src/h5-wrapper.tsx +++ b/app/src/h5-wrapper.tsx @@ -11,7 +11,7 @@ function H5Wrapper({ file }: Props) { } return ( -
+
From 0448f834044c6372bc01127cd97863fcf0adf3fa Mon Sep 17 00:00:00 2001 From: minottic Date: Wed, 30 Jul 2025 15:46:03 +0200 Subject: [PATCH 3/7] Add isConnected if --- app/src/h5-element.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/app/src/h5-element.tsx b/app/src/h5-element.tsx index ed390db..e1d2c15 100644 --- a/app/src/h5-element.tsx +++ b/app/src/h5-element.tsx @@ -36,7 +36,9 @@ export class H5WebViewer extends HTMLElement { set base64Data(base64Data: string) { this._file = this.base64ToFile(base64Data); - this.mount(); + if (this.container && this.isConnected) { + this.mount(); + } } private base64ToFile(base64Data: string, filename = "foo.h5", mimeType = ''): File { From ef472e3c45e1d20f3cb0f5484e6fa93a1da26aed Mon Sep 17 00:00:00 2001 From: minottic Date: Wed, 30 Jul 2025 15:52:15 +0200 Subject: [PATCH 4/7] Fix width and height --- app/src/h5-wrapper.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/src/h5-wrapper.tsx b/app/src/h5-wrapper.tsx index 25ad909..3c904c7 100644 --- a/app/src/h5-wrapper.tsx +++ b/app/src/h5-wrapper.tsx @@ -11,7 +11,7 @@ function H5Wrapper({ file }: Props) { } return ( -
+
From cbb8ebb7d7873210159b34e55442e8044e75bbd8 Mon Sep 17 00:00:00 2001 From: minottic Date: Wed, 30 Jul 2025 16:19:02 +0200 Subject: [PATCH 5/7] Prevent from defining multiple times --- app/src/index.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/app/src/index.ts b/app/src/index.ts index 1c44296..ec2a2d3 100644 --- a/app/src/index.ts +++ b/app/src/index.ts @@ -1,3 +1,5 @@ import { H5WebViewer } from "./h5-element"; -customElements.define('h5web-viewer', H5WebViewer); +if (!customElements.get('h5web-viewer')) { + customElements.define('h5web-viewer', H5WebViewer); +} From b6de74d2da05eafc9819da80f6f2264b42fa8f6e Mon Sep 17 00:00:00 2001 From: minottic Date: Wed, 30 Jul 2025 17:57:49 +0200 Subject: [PATCH 6/7] Add name to file --- app/src/h5-element.tsx | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/app/src/h5-element.tsx b/app/src/h5-element.tsx index e1d2c15..2c9e801 100644 --- a/app/src/h5-element.tsx +++ b/app/src/h5-element.tsx @@ -8,6 +8,7 @@ export class H5WebViewer extends HTMLElement { private shadow?: ShadowRoot; private container?: HTMLDivElement; private _file?: File; + private _name?: string static get observedAttributes() { return []; @@ -41,14 +42,22 @@ export class H5WebViewer extends HTMLElement { } } - private base64ToFile(base64Data: string, filename = "foo.h5", mimeType = ''): File { + set name(name: string) { + this._name = name; + if (this.container && this.isConnected) { + this.mount(); + } + } + + + private base64ToFile(base64Data: string, filename = this._name, mimeType = ''): File { const base64 = base64Data.split(',')[1] const binary = atob(base64); const bytes = new Uint8Array(binary.length); for (let i = 0; i < binary.length; i++) { bytes[i] = binary.charCodeAt(i); } - return new File([bytes], filename, { type: mimeType }); + return new File([bytes], filename as string, { type: mimeType }); } private mount() { From 2bacaeb287571eda2de831667ad0c9caa6dd00af Mon Sep 17 00:00:00 2001 From: minottic Date: Wed, 30 Jul 2025 18:06:51 +0200 Subject: [PATCH 7/7] Use filename instead --- app/src/h5-element.tsx | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/app/src/h5-element.tsx b/app/src/h5-element.tsx index 2c9e801..763efeb 100644 --- a/app/src/h5-element.tsx +++ b/app/src/h5-element.tsx @@ -8,7 +8,7 @@ export class H5WebViewer extends HTMLElement { private shadow?: ShadowRoot; private container?: HTMLDivElement; private _file?: File; - private _name?: string + private _fileName?: string static get observedAttributes() { return []; @@ -42,15 +42,14 @@ export class H5WebViewer extends HTMLElement { } } - set name(name: string) { - this._name = name; + set fileName(name: string) { + this._fileName = name; if (this.container && this.isConnected) { this.mount(); } } - - private base64ToFile(base64Data: string, filename = this._name, mimeType = ''): File { + private base64ToFile(base64Data: string, filename = this._fileName, mimeType = ''): File { const base64 = base64Data.split(',')[1] const binary = atob(base64); const bytes = new Uint8Array(binary.length);