diff --git a/README-react.md b/README-react.md index a619a1514..9f4a1a5b8 100644 --- a/README-react.md +++ b/README-react.md @@ -12,13 +12,16 @@ To user another DICOMWeb endpoint, adapt index.js ## To include in your projects -Please refer to the example in the example directory. To set the DICOMWeb endpoint and do other customization, adapt index.html. +Please refer to the example in the example directory. To set the DICOMWeb +endpoint and do other customization, adapt index.html. + +### Build -### Build 1. `yarn install` 1. `yarn build` -### Run the example +### Run the example + 1. `cd example` 1. `yarn install` 1. `yarn start` @@ -26,4 +29,4 @@ Please refer to the example in the example directory. To set the DICOMWeb endpoi ## License -MIT © [OHIF](https://github.com/OHIF) \ No newline at end of file +MIT © [OHIF](https://github.com/OHIF) diff --git a/README.md b/README.md index 13d5b095e..c967b4b04 100644 --- a/README.md +++ b/README.md @@ -28,16 +28,30 @@ ## Why? -Building a web based medical imaging viewer from scratch is time intensive, hard to get right, and expensive. Instead of re-inventing the wheel, you can use the OHIF Viewer as a rock solid platform to build on top of. The Viewer is a [React][react-url] [Progressive Web Application][pwa-url] that can be embedded in existing applications via it's [packaged source (ohif-viewer)][ohif-viewer-url] or hosted stand-alone. The Viewer exposes [configuration][configuration-url] and [extensions][extensions-url] to support workflow customization and advanced functionality at common integration points. - -If you're interested in using the OHIF Viewer, but you're not sure it supports your use case [check out our docs](https://deploy-preview-398--ohif.netlify.com/). Still not sure, or you would like to propose new features? Don't hesitate to [create an issue](https://github.com/OHIF/Viewers/issues) or open a pull request ^_^ +Building a web based medical imaging viewer from scratch is time intensive, hard +to get right, and expensive. Instead of re-inventing the wheel, you can use the +OHIF Viewer as a rock solid platform to build on top of. The Viewer is a +[React][react-url] [Progressive Web Application][pwa-url] that can be embedded +in existing applications via it's [packaged source +(ohif-viewer)][ohif-viewer-url] or hosted stand-alone. The Viewer exposes +[configuration][configuration-url] and [extensions][extensions-url] to support +workflow customization and advanced functionality at common integration points. +If you're interested in using the OHIF Viewer, but you're not sure it supports +your use case +[check out our docs](https://deploy-preview-398--ohif.netlify.com/). Still not +sure, or you would like to propose new features? Don't hesitate to +[create an issue](https://github.com/OHIF/Viewers/issues) or open a pull request +^\_^ ## Getting Started -This readme is specific to testing and developing locally. If you're more interested in production deployment strategies, [you can check out our documentation on publishing](https://deploy-preview-398--ohif.netlify.com/). +This readme is specific to testing and developing locally. If you're more +interested in production deployment strategies, +[you can check out our documentation on publishing](https://deploy-preview-398--ohif.netlify.com/). -Want to play around before you dig in? [Check out our LIVE Demo](https://viewer.ohif.org/) +Want to play around before you dig in? +[Check out our LIVE Demo](https://viewer.ohif.org/) ### Setup @@ -50,10 +64,12 @@ _Steps:_ 1. Fork this repository 2. Clone your forked repository (your `origin`) - - `git clone git@github.com:YOUR_GITHUB_USERNAME/Viewers.git` -3. Add `OHIF/Viewers` as a `remote` repository (the `upstream`) - - `git remote add upstream git@github.com:OHIF/Viewers.git` +- `git clone git@github.com:YOUR_GITHUB_USERNAME/Viewers.git` + +3. Add `OHIF/Viewers` as a `remote` repository (the `upstream`) + +- `git remote add upstream git@github.com:OHIF/Viewers.git` ### Developing Locally @@ -68,16 +84,23 @@ yarn install yarn start ``` -For more advanced local development scenarios, like using your own locally hosted PACS and test data, [check out our Essential: Getting Started](https://deploy-preview-398--ohif.netlify.com/essentials/getting-started.html) guide. - +For more advanced local development scenarios, like using your own locally +hosted PACS and test data, +[check out our Essential: Getting Started](https://deploy-preview-398--ohif.netlify.com/essentials/getting-started.html) +guide. ### Contributing -> Large portions of the Viewer's functionality are maintained in other repositories. To get a better understanding of the Viewer's architecture and "where things live", read [our docs on the Viewer's architecture](https://deploy-preview-398--ohif.netlify.com/advanced/architecture.html#diagram) +> Large portions of the Viewer's functionality are maintained in other +> repositories. To get a better understanding of the Viewer's architecture and +> "where things live", read +> [our docs on the Viewer's architecture](https://deploy-preview-398--ohif.netlify.com/advanced/architecture.html#diagram) It is notoriously difficult to setup multiple dependent repositories for end-to-end testing and development. That's why we recommend writing and running -unit tests when adding and modifying features. This allows us to program in isolation without a complex setup, and has the added benefit of producing well-tested business logic. +unit tests when adding and modifying features. This allows us to program in +isolation without a complex setup, and has the added benefit of producing +well-tested business logic. 1. Clone this repository 2. Navigate to the project directory, and `yarn install` diff --git a/docs/latest/advanced/extensions.md b/docs/latest/advanced/extensions.md index 5303dac87..634fe5bd8 100644 --- a/docs/latest/advanced/extensions.md +++ b/docs/latest/advanced/extensions.md @@ -17,7 +17,7 @@ class myCustomExtension { * is used to help determine which component is used */ getViewportModule: () => reactViewportComponent; - /** React component that adds buttons/behavior to the viewer Toolbar */ + /** React component that adds buttons/behavior to the viewer Toolbar */ getToolbarModule: () => reactToolbarComponent; /** Provides a whitelist of SOPClassUIDs the viewport is capable of rendering. @@ -59,6 +59,7 @@ Viewport components are managed by the `LayoutManager`. Which Viewport component - The SopClassUID for visible/selected datasets ![Cornerstone Viewport](../assets/img/extensions-viewport.png) +
An example of three Viewports
For a complete example implementation, [check out the OHIFCornerstoneViewport](https://github.com/OHIF/Viewers/blob/react/extensions/ohif-cornerstone-extension/src/OHIFCornerstoneViewport.js). @@ -68,6 +69,7 @@ For a complete example implementation, [check out the OHIFCornerstoneViewport](h An extension can register a Toolbar Module by providing a `getToolbarModule()` method that returns a React Component. The component does not receive any props. If you want to modify or react to state, you will need to connect to the redux store. ![Toolbar Extension](../assets/img/extensions-toolbar.gif) +
A toolbar extension example
Toolbar components are rendered in the `ToolbarRow` component. @@ -91,13 +93,13 @@ In a future version, we will likely expose a way to provide the extensions you w _app.js_ ```js -import { createStore, combineReducers } from 'redux'; -import OHIF from 'ohif-core'; -import OHIFCornerstoneExtension from 'ohif-cornerstone-extension'; +import { createStore, combineReducers } from "redux"; +import OHIF from "ohif-core"; +import OHIFCornerstoneExtension from "ohif-cornerstone-extension"; const combined = combineReducers(OHIF.redux.reducers); const store = createStore(combined); -const extensions = [ new OHIFCornerstoneExtension() ]; +const extensions = [new OHIFCornerstoneExtension()]; // Dispatches the `addPlugin` action to the store // Adding extension modules to `state.plugins.availablePlugins` @@ -106,6 +108,6 @@ ExtensionManager.registerExtensions(store, extensions); ## OHIF Maintained Extensions -A small number of powerful extensions for popular use cases are maintained by OHIF. They're co-located in the [`OHIF/Viewers`](https://github.com/OHIF/Viewers/tree/react/) repository, in the top level [`extensions/`](https://github.com/OHIF/Viewers/tree/react/extensions) directory. +A small number of powerful extensions for popular use cases are maintained by OHIF. They're co-located in the [`OHIF/Viewers`](https://github.com/OHIF/Viewers/tree/react/) repository, in the top level [`extensions/`](https://github.com/OHIF/Viewers/tree/react/extensions) directory. {% include "./_maintained-extensions-table.md" %}