@3cr/viewer-browser 0.0.52 → 0.0.53

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/README.md +108 -81
  2. package/package.json +1 -1
  3. package/README2.md +0 -201
package/README.md CHANGED
@@ -1,81 +1,108 @@
1
- # Vuetify (Default)
2
-
3
- This is the official scaffolding tool for Vuetify, designed to give you a head start in building your new Vuetify application. It sets up a base template with all the necessary configurations and standard directory structure, enabling you to begin development without the hassle of setting up the project from scratch.
4
-
5
- ## ❗️ Important Links
6
-
7
- - 📄 [Docs](https://vuetifyjs.com/)
8
- - 🚨 [Issues](https://issues.vuetifyjs.com/)
9
- - 🏬 [Store](https://store.vuetifyjs.com/)
10
- - 🎮 [Playground](https://play.vuetifyjs.com/)
11
- - 💬 [Discord](https://community.vuetifyjs.com)
12
-
13
- ## 💿 Install
14
-
15
- Set up your project using your preferred package manager. Use the corresponding command to install the dependencies:
16
-
17
- | Package Manager | Command |
18
- |---------------------------------------------------------------|----------------|
19
- | [yarn](https://yarnpkg.com/getting-started) | `yarn install` |
20
- | [npm](https://docs.npmjs.com/cli/v7/commands/npm-install) | `npm install` |
21
- | [pnpm](https://pnpm.io/installation) | `pnpm install` |
22
- | [bun](https://bun.sh/#getting-started) | `bun install` |
23
-
24
- After completing the installation, your environment is ready for Vuetify development.
25
-
26
- ## ✨ Features
27
-
28
- - 🖼️ **Optimized Front-End Stack**: Leverage the latest Vue 3 and Vuetify 3 for a modern, reactive UI development experience. [Vue 3](https://v3.vuejs.org/) | [Vuetify 3](https://vuetifyjs.com/en/)
29
- - 🗃️ **State Management**: Integrated with [Pinia](https://pinia.vuejs.org/), the intuitive, modular state management solution for Vue.
30
- - 🚦 **Routing and Layouts**: Utilizes Vue Router for SPA navigation and vite-plugin-vue-layouts for organizing Vue file layouts. [Vue Router](https://router.vuejs.org/) | [vite-plugin-vue-layouts](https://github.com/JohnCampionJr/vite-plugin-vue-layouts)
31
- - 💻 **Enhanced Development Experience**: Benefit from TypeScript's static type checking and the ESLint plugin suite for Vue, ensuring code quality and consistency. [TypeScript](https://www.typescriptlang.org/) | [ESLint Plugin Vue](https://eslint.vuejs.org/)
32
- - ⚡ **Next-Gen Tooling**: Powered by Vite, experience fast cold starts and instant HMR (Hot Module Replacement). [Vite](https://vitejs.dev/)
33
- - 🧩 **Automated Component Importing**: Streamline your workflow with unplugin-vue-components, automatically importing components as you use them. [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components)
34
- - 🛠️ **Strongly-Typed Vue**: Use vue-tsc for type-checking your Vue components, and enjoy a robust development experience. [vue-tsc](https://github.com/johnsoncodehk/volar/tree/master/packages/vue-tsc)
35
-
36
- These features are curated to provide a seamless development experience from setup to deployment, ensuring that your Vuetify application is both powerful and maintainable.
37
-
38
- ## 💡 Usage
39
-
40
- This section covers how to start the development server and build your project for production.
41
-
42
- ### Starting the Development Server
43
-
44
- To start the development server with hot-reload, run the following command. The server will be accessible at [http://localhost:3000](http://localhost:3000):
45
-
46
- ```bash
47
- yarn dev
48
- ```
49
-
50
- (Repeat for npm, pnpm, and bun with respective commands.)
51
-
52
- > Add NODE_OPTIONS='--no-warnings' to suppress the JSON import warnings that happen as part of the Vuetify import mapping. If you are on Node [v21.3.0](https://nodejs.org/en/blog/release/v21.3.0) or higher, you can change this to NODE_OPTIONS='--disable-warning=5401'. If you don't mind the warning, you can remove this from your package.json dev script.
53
-
54
- ### Building for Production
55
-
56
- To build your project for production, use:
57
-
58
- ```bash
59
- yarn build
60
- ```
61
-
62
- (Repeat for npm, pnpm, and bun with respective commands.)
63
-
64
- Once the build process is completed, your application will be ready for deployment in a production environment.
65
-
66
- ## 💪 Support Vuetify Development
67
-
68
- This project is built with [Vuetify](https://vuetifyjs.com/en/), a UI Library with a comprehensive collection of Vue components. Vuetify is an MIT licensed Open Source project that has been made possible due to the generous contributions by our [sponsors and backers](https://vuetifyjs.com/introduction/sponsors-and-backers/). If you are interested in supporting this project, please consider:
69
-
70
- - [Requesting Enterprise Support](https://support.vuetifyjs.com/)
71
- - [Sponsoring John on Github](https://github.com/users/johnleider/sponsorship)
72
- - [Sponsoring Kael on Github](https://github.com/users/kaelwd/sponsorship)
73
- - [Supporting the team on Open Collective](https://opencollective.com/vuetify)
74
- - [Becoming a sponsor on Patreon](https://www.patreon.com/vuetify)
75
- - [Becoming a subscriber on Tidelift](https://tidelift.com/subscription/npm/vuetify)
76
- - [Making a one-time donation with Paypal](https://paypal.me/vuetify)
77
-
78
- ## 📑 License
79
- [MIT](http://opensource.org/licenses/MIT)
80
-
81
- Copyright (c) 2016-present Vuetify, LLC
1
+ # @3cr/viewer-browser
2
+
3
+ ![](https://img.shields.io/badge/tests-successful-green)
4
+ ![](https://img.shields.io/circleci/build/bitbucket/medvr/3cr-sdk-browser/main)
5
+
6
+
7
+ Ecosystem integration for installing and running [3DICOM Online Viewer (3CR-OV)](https://docs.3cr.singular.health/) within the Browser (client-side)
8
+
9
+ [3DICOM Online Viewer (3CR-OV) Playground](https://playground.3cr.singular.health/)
10
+
11
+ ## Include `@3cr/viewer-browser` script
12
+
13
+ Choose one of the following ways
14
+ - ### HTML Script Tag
15
+
16
+ Insert this line into your `index.html`
17
+
18
+ ```html
19
+ <script src="https://cdn.jsdelivr.net/npm/@3cr/viewer-browser@{{version}}/dist/Viewer3CR.umd.js"> </script>
20
+ ```
21
+ Note: Please ensure you replace the `{{version}}` with the version of the viewer you want.
22
+
23
+ - ### JS/TS way
24
+
25
+ You can also include it dynamically within your code.
26
+
27
+ `Typescript (.ts)`
28
+ ```ts
29
+ export async function loadViewerScript(version: string): Promise<void> {
30
+ return new Promise<void>((resolve) => {
31
+ const s = document.createElement('script');
32
+ s.onload = () => {
33
+ resolve()
34
+ }
35
+ s.src = `https://cdn.jsdelivr.net/npm/@3cr/viewer-browser@${version}/dist/Viewer3CR.umd.js`;
36
+ document.head.appendChild(s);
37
+ })
38
+ }
39
+
40
+ // ...
41
+
42
+ await loadViewerScript("1.0.0");
43
+ ```
44
+ `Javascript (.js)`
45
+ ```js
46
+ export async function loadViewerScript(version) {
47
+ return new Promise((resolve) => {
48
+ const s = document.createElement('script');
49
+ s.onload = () => {
50
+ resolve()
51
+ }
52
+ s.src = `https://cdn.jsdelivr.net/npm/@3cr/viewer-browser@${version}/dist/Viewer3CR.umd.js`;
53
+ document.head.appendChild(s);
54
+ })
55
+ }
56
+
57
+ // ...
58
+
59
+ await loadViewerScript("1.0.0");
60
+ ```
61
+
62
+
63
+ ## Using the Package
64
+
65
+ 1. #### Register 3DICOM Online Viewer version
66
+
67
+ Call the `registerViewer` function with the version of 3CR you would like to view. This will generate a new container to load the viewer within and register the 3CR Instance.
68
+
69
+ `Typescript (.ts) / Javascript (.js)`
70
+ ```ts
71
+ const VERSION_3CR: string = '1.0.0';
72
+
73
+ await window.registerViewer(VERSION_3CR)
74
+ ```
75
+
76
+ 2. #### Load in the 3VXL file
77
+
78
+ Generate the 3VXL file and Decryption Key/Iv and supply that to the `loadViewer` function
79
+
80
+ Note: You can supply undefined/nothing to the loadViewer() function to display a default scan for testing purposes.
81
+
82
+ `Typescript (.ts) / Javascript (.js)`
83
+ ```ts
84
+ const payload = {
85
+ Url: "<Some presigned URL to a 3VXL file.>",
86
+ DecryptionKey: {
87
+ Iv: "<Initialisation Vector of the Key>",
88
+ Key: "<Decryption Key>"
89
+ }
90
+ }
91
+ await window.loadViewer(payload)
92
+
93
+ // OR
94
+
95
+ await window.loadViewer()
96
+ ```
97
+
98
+
99
+ ## Contributing
100
+
101
+ Pull requests are welcome. For changes, please open an issue first
102
+ to discuss what you would like to change.
103
+
104
+ Please make sure to update tests as appropriate.
105
+
106
+ ## License
107
+
108
+ [MIT](https://choosealicense.com/licenses/mit/)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@3cr/viewer-browser",
3
- "version": "0.0.52",
3
+ "version": "0.0.53",
4
4
  "main": "./dist/Viewer3CR.umd.js",
5
5
  "module": "dist/Viewer3CR.umd.js",
6
6
  "homepage": "https://docs.3cr.singular.health",
package/README2.md DELETED
@@ -1,201 +0,0 @@
1
- # @3cr/sdk-browser
2
-
3
- ![](https://img.shields.io/badge/tests-successful-green)
4
- ![](https://img.shields.io/circleci/build/bitbucket/medvr/3cr-sdk-browser/main)
5
-
6
-
7
- Ecosystem integration for installing and running [3DICOM Online Viewer (3CR-OV)](https://docs.3cr.singular.health/) within the Browser (client-side)
8
-
9
- ## Include `@3cr/viewer-browser` script
10
-
11
- Choose one of the following ways
12
- - ### HTML Script Tag
13
-
14
- Insert this line into your `index.html`
15
-
16
- ```html
17
- <script src="https://cdn.jsdelivr.net/npm/@3cr/viewer-browser@{{version}}/dist/Viewer3CR.umd.js"> </script>
18
- ```
19
- Note: Please ensure you replace the `{{version}}` with the version of the viewer you want.
20
-
21
- - ### JS/TS way
22
-
23
- You can also include it dynamically within your code.
24
-
25
- `Typescript (.ts)`
26
- ```ts
27
- export async function loadViewerScript(version: string): Promise<void> {
28
- return new Promise<void>((resolve) => {
29
- const s = document.createElement('script');
30
- s.onload = () => {
31
- resolve()
32
- }
33
- s.src = `https://cdn.jsdelivr.net/npm/@3cr/viewer-browser@${version}/dist/Viewer3CR.umd.js`;
34
- document.head.appendChild(s);
35
- })
36
- }
37
-
38
- // ...
39
-
40
- await loadViewerScript("1.0.0");
41
- ```
42
- `Javascript (.js)`
43
- ```js
44
- export async function loadViewerScript(version) {
45
- return new Promise((resolve) => {
46
- const s = document.createElement('script');
47
- s.onload = () => {
48
- resolve()
49
- }
50
- s.src = `https://cdn.jsdelivr.net/npm/@3cr/viewer-browser@${version}/dist/Viewer3CR.umd.js`;
51
- document.head.appendChild(s);
52
- })
53
- }
54
-
55
- // ...
56
-
57
- await loadViewerScript("1.0.0");
58
- ```
59
-
60
-
61
- ## Using the Package
62
-
63
- 1. #### Register 3DICOM Online Viewer version
64
-
65
- Call the `registerViewer` function with the version of 3CR you would like to view. You also need to supply a
66
-
67
- `Typescript (.ts)`
68
- ```ts
69
- import { registerVersion } from '@3cr/sdk-browser';
70
-
71
- const VERSION_3CR: string = '1.0.0';
72
-
73
- await registerVersion(VERSION_3CR);
74
- ```
75
-
76
- `Javascript (.js)`
77
- ```js
78
- import { registerVersion } from '@3cr/sdk-browser';
79
-
80
- const VERSION_3CR = '1.0.0';
81
-
82
- await registerVersion(VERSION_3CR);
83
- ```
84
-
85
- 2. #### Create HTML Canvas
86
-
87
- Create a canvas element within your HTML Markup and assign it an `id`.
88
-
89
- You will have to ensure that the size (width & height) both match the inline css styling and the canvas styling
90
-
91
- `html`
92
- ```html
93
- <canvas
94
- id="renderer-canvas"
95
- width="1080"
96
- height="1920"
97
- tabindex="-1"
98
- style=" width: 1920px; height: 1080px; "
99
- >
100
- </canvas>
101
- ```
102
-
103
- 3. #### Register response handler for 3DICOM Core Renderer Instance
104
-
105
- You will need to register a function that can accept the responses from the 3CR instance.
106
-
107
- `Typescript (.ts)`
108
- ```ts
109
- import { registerOnPayloadHandler } from '@3cr/sdk-browser';
110
- import { FrontEndPayload } from '@3cr/sdk-browser/types/payload';
111
-
112
- function onPayload(json: FrontEndPayload) {
113
- console.log("Payload recieved from 3CR!", json)
114
- }
115
-
116
- await registerOnPayloadHandler(onPayload);
117
- ```
118
-
119
- `Javascript (.js)`
120
- ```js
121
- import { registerOnPayloadHandler } from '@3cr/sdk-browser';
122
-
123
- function onPayload(json) {
124
- console.log("Payload recieved from 3CR!", json)
125
- }
126
-
127
- await registerOnPayloadHandler(onPayload);
128
- ```
129
-
130
- 4. #### Attach the 3CR Instance to the HTML Canvas
131
- Get the HTML Element from the DOM Object and inject it into the instance.
132
-
133
- `Typescript (.ts)`
134
- ```ts
135
- import { createInstance } from '@3cr/sdk-browser';
136
- const canvas: HTMLCanvasElement = document.querySelector('#renderer-canvas') as HTMLCanvasElement;
137
-
138
- await createInstance(canvas);
139
- ```
140
-
141
- `Javascript (.js)`
142
- ```js
143
- import { createInstance } from '@3cr/sdk-browser';
144
- const canvas = document.querySelector('#renderer-canvas');
145
-
146
- await createInstance(canvas);
147
- ```
148
-
149
-
150
- 5. #### Execute payload on Instance
151
- Get the HTML Element from the DOM Object and inject it into the instance.
152
-
153
- `Typescript (.ts)`
154
- ```ts
155
- import { executePayload } from '@3cr/sdk-browser';
156
- import { FrontEndInterfaces, FileManagementActions } from '@3cr/sdk-browser/types/payload';
157
-
158
- await executePayload({
159
- Version: '1.0.0',
160
- Interface: FrontEndInterfaces.file_management,
161
- Action: FileManagementActions.fm_01,
162
- Message: JSON.stringify({
163
- Url: 'https://somethingtodownload.com/some.3vxl.compressed.encrypted',
164
- DecryptionKey: {
165
- Key: '<Encryption Key>',
166
- Iv: '<Encryption IV>'
167
- }
168
- }),
169
- });
170
- ```
171
-
172
- `Javascript (.js)`
173
- ```js
174
- import { executePayload } from '@3cr/sdk-browser';
175
-
176
- await executePayload({
177
- Version: '1.0.0',
178
- Interface: 'file_management',
179
- Action: 'fm_01',
180
- Message: JSON.stringify({
181
- Url: 'https://somethingtodownload.com/some.3vxl.compressed.encrypted',
182
- DecryptionKey: {
183
- Key: '<Encryption Key>',
184
- Iv: '<Encryption IV>'
185
- }
186
- }),
187
- });
188
- ```
189
-
190
-
191
-
192
- ## Contributing
193
-
194
- Pull requests are welcome. For changes, please open an issue first
195
- to discuss what you would like to change.
196
-
197
- Please make sure to update tests as appropriate.
198
-
199
- ## License
200
-
201
- [MIT](https://choosealicense.com/licenses/mit/)