diff --git a/src/atlasViewer/atlasViewer.component.ts b/src/atlasViewer/atlasViewer.component.ts index 8092e5718b2345e49e695922deadb73041c7eeb8..ecc667d7a16f1cd02af990f4547ba9b074e89d24 100644 --- a/src/atlasViewer/atlasViewer.component.ts +++ b/src/atlasViewer/atlasViewer.component.ts @@ -416,42 +416,23 @@ export class AtlasViewer implements OnDestroy, OnInit, AfterViewInit { const canvas = document.createElement('canvas') const gl = canvas.getContext('webgl2') as WebGLRenderingContext const message: any = { - Error: 'Your browser does not meet the minimum requirements to run neuroglancer.' + Error: this.constantsService.minReqModalHeader } if (!gl) { - message['Detail'] = 'Your browser does not support WebGL2.' - - this.modalService.show(ModalUnit, { - initialState: { - title: message.Error, - body: message.Detail - } - }) return false } const colorBufferFloat = gl.getExtension('EXT_color_buffer_float') if (!colorBufferFloat) { - - const detail = `Your browser does not support - ${ !colorBufferFloat ? 'EXT_color_buffer_float' : ''} ` - message['Detail'] = [detail] - - this.modalService.show(ModalUnit, { - initialState: { - title: message.Error, - body: message.Detail - } - }) return false } if(this.constantsService.mobile){ this.modalService.show(ModalUnit,{ initialState: { - title: 'Power and Network Usage warning', + title: this.constantsService.mobileWarningHeader, body: this.constantsService.mobileWarning } }) diff --git a/src/atlasViewer/atlasViewer.constantService.service.ts b/src/atlasViewer/atlasViewer.constantService.service.ts index 2abfe5f1df743a32a6b55755c716ef3d4542ce70..aaf0da3b864b943630a0060323de6b1c799beaf9 100644 --- a/src/atlasViewer/atlasViewer.constantService.service.ts +++ b/src/atlasViewer/atlasViewer.constantService.service.ts @@ -105,11 +105,20 @@ export class AtlasViewerConstantsServices{ pointHitRadius : 0, } - public doesNotMeetRequirementMD = ` -Unfortunately, your browser does not meet the minimum requirement to run the atlas viewer. -the atlas viewer requires **webgl2.0**, and the \`EXT_color_buffer_float\` extension enabled + public minReqMD = ` +# Hmm... it seems like we hit a snag +It seems your browser has trouble loading interactive atlas viewer. +Interactive atlas viewer requires **webgl2.0**, and the \`EXT_color_buffer_float\` extension enabled. +- We recommend using _Chrome >= 56_ or _Firefox >= 51_. You can check your browsers' support of webgl2.0 by visiting <https://caniuse.com/#feat=webgl2> +- If you are on _Chrome < 56_ or _Firefox < 51_, you may be able to enable **webgl2.0** by turning on experimental flag <https://get.webgl.org/webgl2/enable.html>. +- If you are on an Android device we recommend _Chrome for Android_ or _Firefox for Android_. +- Unfortunately, Safari and iOS devices currently do not support **webgl2.0**: <https://webkit.org/status/#specification-webgl-2> ` + public minReqModalHeader = `Hmm... it seems your browser and is having trouble loading interactive atlas viewer` + public minReqWebGl2 = `Your browser does not support WebGL2.` + public minReqColorBufferFloat = `Your browser does not support EXT_color_bugger_float extension` + public mobileWarningHeader = `Power and Network Usage warning` public mobileWarning = `It looks like you are on a mobile device. Please note that the atlas viewer is power and network usage intensive.` get floatingWidgetStartingPos() : [number,number]{ diff --git a/src/atlasViewer/atlasViewer.style.css b/src/atlasViewer/atlasViewer.style.css index 1ddd86aad3d7a95a516803487caa049e9be16523..12c9f1ff5f483b45f42ad32b478a483076b1d6c6 100644 --- a/src/atlasViewer/atlasViewer.style.css +++ b/src/atlasViewer/atlasViewer.style.css @@ -237,4 +237,10 @@ span.tabContainer.active-tab:before { padding: 1.5em; display:block; +} + +markdown-dom[minReqMd] +{ + margin: 1em; + display:block; } \ No newline at end of file diff --git a/src/atlasViewer/atlasViewer.template.html b/src/atlasViewer/atlasViewer.template.html index c5224690ffea86489c8584dc0a78be5e05e48bea..497a1bd9d402fcd4b5722259f13c5c668a5fce12 100644 --- a/src/atlasViewer/atlasViewer.template.html +++ b/src/atlasViewer/atlasViewer.template.html @@ -175,5 +175,5 @@ </div> -<markdown-dom *ngIf = "!meetsRequirement" [markdown] = "constantsService.doesNotMeetRequirementMD" > +<markdown-dom minReqMd *ngIf = "!meetsRequirement" [markdown] = "constantsService.minReqMD" > </markdown-dom>