From 933ee0536e6d63ea70274e3cb5c7f65d5d1a88ae Mon Sep 17 00:00:00 2001 From: Xiao Gui <xgui3783@gmail.com> Date: Mon, 16 Dec 2019 17:58:01 +0100 Subject: [PATCH] chore: added reference to atlas viewer --- URL_STATE.md | 119 ------------------ docs/advanced/keyboard.md | 9 ++ mkdocs.yml | 1 + .../atlasViewer.constantService.service.ts | 2 +- src/ui/help/help.component.ts | 8 ++ src/ui/help/help.template.html | 35 +++--- 6 files changed, 39 insertions(+), 135 deletions(-) delete mode 100644 URL_STATE.md create mode 100644 docs/advanced/keyboard.md diff --git a/URL_STATE.md b/URL_STATE.md deleted file mode 100644 index 556d1ebcd..000000000 --- a/URL_STATE.md +++ /dev/null @@ -1,119 +0,0 @@ - -# URL State - - -Interactive Atlas Viewer could be run with already selected state. It is possible to create or save application URL so, that it will contain specific data which will usefull to run application with already defined state. In URL, this specific data, is saved as URL query parameters. - -## URL query parameters in Interactive Atlas Viewer - - -URL query parameters are variables which are located after URL and separated from the URL with "?" mark. URL query parameter variable contains variable name and value. Url query parameters are divided by "&" symbol. it is not possible to use whitespaces in the URL query. In Interactive Atlas Viewer, URL query parameters are used to save or create an application state. There are 6 main parameters which are used to save the application state. They are: navigation, niftiLayers, parcellationSelected, pluginState, regionsSelected and templateSelected. - -Example of already filled URL looks like this: - -``` - -https://dev-next-interactive-viewer.apps-dev.hbp.eu/?templateSelected=MNI+152+ICBM+2009c+Nonlinear+Asymmetric&parcellationSelected=Fibre+Bundle+Atlas+-+Long+Bundle&navigation=0_0_0_1__0.11092895269393921_0.8756000399589539_-0.44895267486572266_-0.13950254023075104__2500000__1430285_13076858_4495181__204326.41684726204®ionsSelected=31_51_32 - -``` - -4 parameters are mentioned inside the example URL: - -- templateSelected -- parcellationSelected -- navigation -- regionsSelected - - -### Template Selected - parameter - -Template Selected parameter, is used to or __select the template__ with using URL. From the given example we can see the parameter: - -``` -templateSelected=MNI+152+ICBM+2009c+Nonlinear+Asymmetric -``` - -In parameter value, whitespaces should be replaced with "+" symbol. So, actually, the selected template name is: - -``` -MNI 152 ICBM 2009c Nonlinear Asymmetric -``` - -To select a template from URL it is not required to have any other parameter. "Parcellation Selected" and "Navigation" parameters will be automatically added by default values. So, before the application automatically adds parameters, the URL will look like this: - -``` -https://dev-next-interactive-viewer.apps-dev.hbp.eu/?templateSelected=MNI+152+ICBM+2009c+Nonlinear+Asymmetric -``` - -### Parcellation Selected - parameter - -Given parameter is used to select parcellation on the template. As in template selection parameter value, whitespaces are changed with "+" symbol. To use Parcellation parameter, selection template should be in URL parameters too. Navigation parameter will be automatically added by default values. So, before the application automatically adds parameters, the URL will look like this: - -``` -https://dev-next-interactive-viewer.apps-dev.hbp.eu/?templateSelected=MNI+152+ICBM+2009c+Nonlinear+Asymmetric&parcellationSelected=Fibre+Bundle+Atlas+-+Long+Bundle -``` - -From this example selected parcellation name is - - -``` -Fibre Bundle Atlas - Long Bundle -``` - -### Navigation - parameter - -Navigation parameter is to determine orientation, position and zoom of 2d and 3d parts of the selected template. It does not depend on selected parcellation, but it depends on the selected template. -Navigation parameter itself includes 5 fields - orientation, perspectiveOrientation, perspectiveZoom, position and zoom. They are sorted appropriate and divided by "__" symbol. -This is the navigation parameters part from the example - -``` -navigation=0_0_0_1__0.11092895269393921_0.8756000399589539_-0.44895267486572266_-0.13950254023075104__2500000__1430285_13076858_4495181__204326.41684726204 -``` - -**orientation** - the field is used to determine an orientation of the 2D part in atlas viewer. The field contains with 4 numbers, divided by "_" symbol. 3 of these numbers should have value "0" and one should have value "1". Value 1 will determine the orientation of the 2D image. In the example orientation is a first element - "0_0_0_1". -**perspectiveOrientation** - the field is used to determine an orientation of the 3D part in atlas viewer. The field contains with 4 numbers, divided by "_" symbol. In the example perspective orientation is the second element - -``` -0.11092895269393921_0.8756000399589539_-0.44895267486572266_-0.13950254023075104" -``` - -**perspectiveZoom** - the field is used to determine zoom in 3D pard in atlas viewer. It is the single number and is the third element - "2500000" -**position** - the field is used to determine the position of the dot where the camera is oriented in both 2D and 3D parts of atlas viewer. Field contains with 3 numbers, divided by "_" symbol - "1430285_13076858_4495181". -**zoom** - the field is used to determine zoom in 2D pard in atlas viewer. It is the single number and is the last element - "204326.41684726204" - - -### Regions Selected - parameter - -Every region of selected parcellation has its own integer number as id. To select the region from URL, with templateSelected and parcellationSelected parameters, URL should contain the regionSelected parameter. In this parameter. In the given example, we can see the region parameter part. - -``` -regionsSelected=31_51_32 -``` - -in parameter, different regions are divided with "_" symbol. It meant that in the given example, there are 3 selected parameters - 31, 51 and 32. -The region belongs to parcellation, so user can not add regionsSelected without templateSelected and parcellationSelected parameters. Navigation parameter will be automatically added by default values. - -### Nifti Layers - parameter - -Nifti Layers parameter adds to the application URL, when the user selects the nifti layer of selected regions. The value of this parameter is text. Especially, it is a link where the nifti file is located. -Example - -``` -https://dev-next-interactive-viewer.apps-dev.hbp.eu/?niftiLayers=https%3A%2F%2Fneuroglancer.humanbrainproject.org%2Fprecomputed%2FJuBrain%2Fv2.2c%2FPMaps%2FIPL_PF.nii&templateSelected=MNI+Colin+27&parcellationSelected=JuBrain+Cytoarchitectonic+Atlas -``` - -You see, that value of parameter "niftiLayers" is - -``` -https%3A%2F%2Fneuroglancer.humanbrainproject.org%2Fprecomputed%2FJuBrain%2Fv2.2c%2FPMaps%2FIPL_PF.nii -``` - -This is the encoded text for URL where %3A is for ":" and %2F is for "/". So, nifti file's URL is - -``` -https://Fneuroglancer.humanbrainproject.org/Fprecomputed/JuBrain/v2.2c/PMaps/IPL_PF.nii -``` - -## Contributing - -Feel free to raise an issue in this repo and/or file a PR. diff --git a/docs/advanced/keyboard.md b/docs/advanced/keyboard.md new file mode 100644 index 000000000..04e5aacf0 --- /dev/null +++ b/docs/advanced/keyboard.md @@ -0,0 +1,9 @@ +# Keyboard shortcuts + +Please note that the keyboard shortcuts may alter the behaviour irreversibly. + +|Key|Description| +|---|---| +|[0-9]|Toggle layer visibility| +|[h] [?]|Show help| +|[o]|Toggle orthographic/perspective _3d view_ | \ No newline at end of file diff --git a/mkdocs.yml b/mkdocs.yml index 8aeb907d8..92dd61c41 100644 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -21,6 +21,7 @@ pages: - Navigation: 'usage/navigating.md' - Search KG: 'usage/search.md' - Advanced usage: + - Keyboard shortcuts: 'advanced/keyboard.md' - URL parsing: 'advanced/url.md' - Release notes: - v2.0.2 (latest): 'releases/v2.0.2.md' diff --git a/src/atlasViewer/atlasViewer.constantService.service.ts b/src/atlasViewer/atlasViewer.constantService.service.ts index bbe7dc290..803f2935c 100644 --- a/src/atlasViewer/atlasViewer.constantService.service.ts +++ b/src/atlasViewer/atlasViewer.constantService.service.ts @@ -235,7 +235,7 @@ Interactive atlas viewer requires **webgl2.0**, and the \`EXT_color_buffer_float * raise/track issues at github repo: <a target = "_blank" href = "${this.repoUrl}">${this.repoUrl}</a> */ - private supportEmailAddress = `inm1-bda@fz-juelich.de` + public supportEmailAddress = `inm1-bda@fz-juelich.de` public showHelpSupportText:string = `Did you encounter an issue? Send us an email: <a target = "_blank" href = "mailto:${this.supportEmailAddress}">${this.supportEmailAddress}</a>` diff --git a/src/ui/help/help.component.ts b/src/ui/help/help.component.ts index 831ff89d9..4c022e511 100644 --- a/src/ui/help/help.component.ts +++ b/src/ui/help/help.component.ts @@ -17,6 +17,11 @@ export class HelpComponent{ public perspectiveviewHelp public supportText + public contactEmailHref: string + public contactEmail: string + + public userDoc: string = `https://interactive-viewer-user-documentation.apps-dev.hbp.eu` + constructor( private constantService:AtlasViewerConstantsServices, private sanitizer:DomSanitizer @@ -25,5 +30,8 @@ export class HelpComponent{ this.sliceviewHelp = this.constantService.showHelpSliceViewMap this.perspectiveviewHelp = this.constantService.showHelpPerspectiveViewMap this.supportText = this.sanitizer.bypassSecurityTrustHtml(this.constantService.showHelpSupportText) + + this.contactEmailHref = `mailto:${this.constantService.supportEmailAddress}?Subject=[InteractiveAtlasViewer]%20Queries` + this.contactEmail = this.constantService.supportEmailAddress } } \ No newline at end of file diff --git a/src/ui/help/help.template.html b/src/ui/help/help.template.html index bf9920671..bc5f804ec 100644 --- a/src/ui/help/help.template.html +++ b/src/ui/help/help.template.html @@ -1,17 +1,22 @@ -<div> - <h2>General</h2> - <div *ngFor = "let entry of generalHelp"> - <b>{{ entry[0] }}</b>: {{ entry[1] }} - </div> - <h2>Slice View</h2> - <div *ngFor = "let entry of sliceviewHelp"> - <b>{{ entry[0] }}</b>: {{ entry[1] }} - </div> - <h2>Perspective View</h2> - <div *ngFor = "let entry of perspectiveviewHelp"> - <b>{{ entry[0] }}</b>: {{ entry[1] }} - </div> - <hr /> - <div [innerHTML] = "supportText"> +<div class="container-fluid"> + <div class="row mt-4 mb-4"> + + <a [href]="userDoc" target="_blank"> + <button mat-raised-button color="primary"> + <i class="fas fa-book-open"></i> + <span> + User documentation + </span> + </button> + </a> + + <a [href]="contactEmailHref"> + <button mat-flat-button> + <i class="fas fa-at"></i> + <span> + {{ contactEmail }} + </span> + </button> + </a> </div> </div> \ No newline at end of file -- GitLab