{"componentChunkName":"component---smooth-doc-smooth-doc-src-templates-doc-js","path":"/docs/viewer/basic-controls/","result":{"data":{"mdx":{"fields":{"pageType":"doc","title":"Basic Controls","editLink":""},"body":"var _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n  \"title\": \"Basic Controls\",\n  \"description\": \"basic controls\",\n  \"section\": \"Viewer\",\n  \"order\": 15\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h1\", {\n    \"id\": \"basic-controls\"\n  }, mdx(\"a\", {\n    parentName: \"h1\",\n    \"href\": \"#basic-controls\",\n    \"aria-label\": \"basic controls permalink\",\n    \"className\": \"anchor\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Basic Controls\"), mdx(\"br\", null), mdx(\"h2\", {\n    \"id\": \"panning\"\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#panning\",\n    \"aria-label\": \"panning permalink\",\n    \"className\": \"anchor\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Panning\"), mdx(\"p\", null, \"The Viewer supports multiple ways for navigating images in the Viewer using the mouse and keyboard.\"), mdx(\"details\", null, mdx(\"summary\", null, \" To pan an image with the mouse from within the Viewer \"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Press and hold the left mouse button anywhere on the image\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Drag with the mouse to navigate the image\")))), mdx(\"details\", null, mdx(\"summary\", null, \" To pan an image with the keyboard from within the Viewer \"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Click anywhere on the image (to set focus)\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Use the arrow keys (up, down, left, right) to navigate the image\")))), mdx(\"details\", null, mdx(\"summary\", null, \" To show the current position of the cursor \"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Click on the \", mdx(\"img\", {\n    parentName: \"p\",\n    \"src\": \"/flow/manual/latest/9f0cbfd534b43d57ee073cc3e5b58e0b/viewer-topbar-location.svg\",\n    \"alt\": \"Enable cursor location reporting\"\n  }), \" button in the Viewer top bar\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Hover over the image to display a tooltip with the cursor's x and y position. It also includes the red (R), green (G), and blue (B) values for brightfield images\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"(Optional) Click on the \", mdx(\"img\", {\n    parentName: \"p\",\n    \"src\": \"/flow/manual/latest/c49b83dccbb16ee0b1c1dbe7f4518123/viewer-topbar-location-off.svg\",\n    \"alt\": \"Disable cursor location reporting\"\n  }), \" button to turn off the tooltip.\")))), mdx(\"h2\", {\n    \"id\": \"magnification\"\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#magnification\",\n    \"aria-label\": \"magnification permalink\",\n    \"className\": \"anchor\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Magnification\"), mdx(\"p\", null, \"Magnification controls are automatically provided for images that define an objective magnification and for images that are heuristically determined to be whole slide images (e.g., a TIFF file containing a description from a known \", mdx(\"abbr\", {\n    parentName: \"p\",\n    \"title\": \"Whole Slide Image(s)\"\n  }, \"WSI\"), \" scanner manufacturer that also has a well-defined pixel size).\"), mdx(\"p\", null, \"The Viewer will provide preset magnification buttons that are appropriate for the current image, if this information is provided by the image or can be determined heuristically. The preset buttons are accessible from the bottom left side of the image viewport, above the current magnification. For any image where magnification cannot be determined, the magnification controls are replaced with scaling controls (e.g., 50%, 100%).\"), mdx(\"div\", {\n    className: \"info\"\n  }, \"The current magnification is displayed in the Viewer top bar and at the bottom left corner of each image\"), mdx(\"details\", null, mdx(\"summary\", null, \" To change magnification (or scale factor) using the mouse from within the Viewer \"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Click anywhere on the image (to set focus)\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Use the wheel on the mouse to change magnification fluidly\")))), mdx(\"details\", null, mdx(\"summary\", null, \" To change magnification using the keyboard from within the Viewer \"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Click anywhere on the image (to set focus)\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Use the +/- buttons to change magnification in small increments\")))), mdx(\"h3\", {\n    \"id\": \"heuristically-determined-magnification\"\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#heuristically-determined-magnification\",\n    \"aria-label\": \"heuristically determined magnification permalink\",\n    \"className\": \"anchor\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Heuristically Determined Magnification\"), mdx(\"p\", null, \"Image pixel size is loosely related to the scanned magnification. \", mdx(\"abbr\", {\n    parentName: \"p\",\n    \"title\": \"Whole Slide Image(s)\"\n  }, \"WSI\"), \" scanner manufacturers typically define a conversion between pixel size and magnification. Where magnification is not explicitly defined in an image, the pixel size will be used to infer the equivalent objective magnification of the image. In many cases, scanned magnification of 20x is approximately equal to 0.5\", \"\\u03BC\", \"m per pixel.\"), mdx(\"h3\", {\n    \"id\": \"digital-zoom\"\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#digital-zoom\",\n    \"aria-label\": \"digital zoom permalink\",\n    \"className\": \"anchor\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Digital Zoom\"), mdx(\"p\", null, \"You can zoom an image beyond its native resolution up to 400%. For example, if an image has a maximum magnification of 20x, it can be scaled up to 80x.\"), mdx(\"p\", null, \"The current magnification is always visible in the bottom left corner of an image. When digital zoom is enabled for an image, the current magnification is shown with a blue border and an adjacent \\\"Digital Zoom\\\" indicator.\"), mdx(\"h2\", {\n    \"id\": \"focal-planes\"\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#focal-planes\",\n    \"aria-label\": \"focal planes permalink\",\n    \"className\": \"anchor\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Focal Planes\"), mdx(\"p\", null, \"Focal planes are automatically detected when present in supported images. If the image has multiple \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"/flow/manual/latest/docs/viewer/overview/#sub-images\"\n  }, \"sub-images\"), \", the focal plane for each sub-image can be independently configured by selecting the appropriate sub-image from the dropdown menu.\"), mdx(\"p\", null, \"The focal plane controls are visible in the bottom left bottom of the image viewport only when focal planes are detected in an image.\"), mdx(\"details\", null, mdx(\"summary\", null, \" To see available focal planes for an image \"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Click on the current focal plane indicator\", \"*\", \" to reveal the focal plane dialog\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Click into the Focal Plane dropdown menu to view available planes\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Click on the \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"x\"), \" button to close the focal plane dialog\"))), mdx(\"p\", null, \" \", \"*\", \" The focal plane controls consist of \", mdx(\"img\", {\n    parentName: \"p\",\n    \"src\": \"/flow/manual/latest/1fd36fc2c491724a14e1ed943b49a589/viewer-nav-arrow-up.svg\",\n    \"alt\": \"Up Arrow\"\n  }), \" and \", mdx(\"img\", {\n    parentName: \"p\",\n    \"src\": \"/flow/manual/latest/2fc4a755a8ade98fd38e8306b448be2c/viewer-nav-arrow-down.svg\",\n    \"alt\": \"Down Arrow\"\n  }), \" arrows and a numeric indicator displaying the current focal plane offset (e.g., \\\"0 \", \"\\u03BC\", \"m\\\"). If available for the current image, these controls are located on the bottom left-hand side of the image viewport immediately above the magnification controls.\")), mdx(\"details\", null, mdx(\"summary\", null, \" To change the focal plane using the mouse \"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Click on the \", mdx(\"img\", {\n    parentName: \"li\",\n    \"src\": \"/flow/manual/latest/1fd36fc2c491724a14e1ed943b49a589/viewer-nav-arrow-up.svg\",\n    \"alt\": \"Up Arrow\"\n  }), \" or \", mdx(\"img\", {\n    parentName: \"li\",\n    \"src\": \"/flow/manual/latest/2fc4a755a8ade98fd38e8306b448be2c/viewer-nav-arrow-down.svg\",\n    \"alt\": \"Down Arrow\"\n  }), \" buttons on the focal plane controls\", \"*\")), mdx(\"p\", null, \" \", \"*\", \" The focal plane controls consist of \", mdx(\"img\", {\n    parentName: \"p\",\n    \"src\": \"/flow/manual/latest/1fd36fc2c491724a14e1ed943b49a589/viewer-nav-arrow-up.svg\",\n    \"alt\": \"Up Arrow\"\n  }), \" and \", mdx(\"img\", {\n    parentName: \"p\",\n    \"src\": \"/flow/manual/latest/2fc4a755a8ade98fd38e8306b448be2c/viewer-nav-arrow-down.svg\",\n    \"alt\": \"Down Arrow\"\n  }), \" arrows and a numeric indicator displaying the current focal plane offset (e.g., \\\"0 \", \"\\u03BC\", \"m\\\"). If available for the current image, these controls are located on the bottom left-hand side of the image viewport immediately above the magnification controls.\")), mdx(\"details\", null, mdx(\"summary\", null, \" To change the focal plane using the mouse wheel \"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Click on the image\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Hold down the \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Shift\"), \" key on the keyboard and simultaneously use the mouse wheel to fly through the available focal planes\")))), mdx(\"h2\", {\n    \"id\": \"rotation-controls\"\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#rotation-controls\",\n    \"aria-label\": \"rotation controls permalink\",\n    \"className\": \"anchor\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Rotation Controls\"), mdx(\"p\", null, \"The rotation tool is located on the bottom left corner of the image viewport. The rotation value is always saved for each user and will be preserved the next time you view the image.\"), mdx(\"details\", null, mdx(\"summary\", null, \" To enable the rotation tool \"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Hover or click on the image to reveal the toolbar at the top left of the panel\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Click on the \", mdx(\"img\", {\n    parentName: \"p\",\n    \"src\": \"/flow/manual/latest/e195e6666b342c7ff7eddacd10051b31/viewer-toolbar-expand.svg\",\n    \"alt\": \"Expand Toolbar\"\n  }), \" button to expand the toolbar if necessary\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Click on the \", mdx(\"img\", {\n    parentName: \"p\",\n    \"src\": \"/flow/manual/latest/9a7b7dbe5a04ce78ba83e13f8b11e05e/viewer-toolbar-rotate.svg\",\n    \"alt\": \"Rotate\"\n  }), \" button in the toolbar to show or hide the rotation tool\")))), mdx(\"details\", null, mdx(\"summary\", null, \" To rotate using the mouse \"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Click and drag the ball around the outside of the rotation tool to the desired value\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Click in the middle of the rotation tool (where the rotation value is displayed) and type a value between (-360) to +360 degrees\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"To reset rotation to 0\", \"\\xB0\", \", click in the middle of the rotation tool and type 0\"))), mdx(\"div\", {\n    className: \"info\"\n  }, \"The rotation tool accepts values with a precision of 0.1.\")), mdx(\"details\", null, mdx(\"summary\", null, \" To rotate using the keyboard \"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Hold the \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Alt\"), \" key and press the \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"up arrow\"), \" or \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"down arrow\"), \" key to rotate by 1\", \"\\xB0\", \" clockwise or counter-clockwise, respectively\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Hold the \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Alt\"), \" key and press the \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"PageUp\"), \" or \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"PageDown\"), \" key to rotate by 10\", \"\\xB0\", \" clockwise or counter-clockwise, respectively\")))), mdx(\"h2\", {\n    \"id\": \"color-management\"\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#color-management\",\n    \"aria-label\": \"color management permalink\",\n    \"className\": \"anchor\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Color Management\"), mdx(\"p\", null, \"The color management tools can be used to apply an \", mdx(\"abbr\", {\n    parentName: \"p\",\n    \"title\": \"International Color Consortium\"\n  }, \"ICC\"), \" color profile within the Viewer. The application of \", mdx(\"abbr\", {\n    parentName: \"p\",\n    \"title\": \"International Color Consortium\"\n  }, \"ICC\"), \" profiles ensures a high degree of color reproducibility across different monitors and can be used to overcome/reduce color variability across multiple devices.\"), mdx(\"div\", {\n    className: \"info\"\n  }, \"Color Management is available for RGB images and disabled by default; users can choose their preference.\"), mdx(\"details\", null, mdx(\"summary\", null, \" To change the color management profile \"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Hover or click on the image to reveal the toolbar at the top left of the panel\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Click on the \", mdx(\"img\", {\n    parentName: \"p\",\n    \"src\": \"/flow/manual/latest/e195e6666b342c7ff7eddacd10051b31/viewer-toolbar-expand.svg\",\n    \"alt\": \"Expand Toolbar\"\n  }), \" button to expand the toolbar if necessary\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Click on the \", mdx(\"img\", {\n    parentName: \"p\",\n    \"src\": \"/flow/manual/latest/566b88e4d6e090723e594b330621595b/viewer-toolbar-palette.svg\",\n    \"alt\": \"Palette\"\n  }), \" button dropdown menu in the toolbar to reveal the color management dialog\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Select one of the available \", mdx(\"abbr\", {\n    parentName: \"p\",\n    \"title\": \"International Color Consortium\"\n  }, \"ICC\"), \" color profiles\")))), mdx(\"h2\", {\n    \"id\": \"full-screen-mode\"\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#full-screen-mode\",\n    \"aria-label\": \"full screen mode permalink\",\n    \"className\": \"anchor\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Full Screen Mode\"), mdx(\"p\", null, \"To enlarge the image viewport, so that it fills your screen, click on the \", mdx(\"img\", {\n    parentName: \"p\",\n    \"src\": \"/flow/manual/latest/41deae8f96e78bed393fdbc1f86ee35b/viewer-topbar-fullscreen.svg\",\n    \"alt\": \"Fullscreen\"\n  }), \" button in the Viewer top bar. When done, press the \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Escape\"), \" key on your keyboard to exit full screen mode.\"), mdx(\"h2\", {\n    \"id\": \"keyboard-shortcuts\"\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#keyboard-shortcuts\",\n    \"aria-label\": \"keyboard shortcuts permalink\",\n    \"className\": \"anchor\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Keyboard Shortcuts\"), mdx(\"p\", null, \"The following keyboard shortcuts are available when using the keyboard:\"), mdx(\"table\", null, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Shortcut\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Action\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"A\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Draw an arrow annotation\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"B\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Draw a bookmark annotation\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"C\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Draw an ellipse annotation\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"P\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Draw a polygon annotation\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"F\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Draw a freehand annotation\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"R\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Draw a rectangle annotation\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"U\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Draw a ruler annotation\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"S\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Create a snapshot\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Alt + \\u2191\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Rotate clockwise 1\", \"\\xB0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Alt + \\u2193\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Rotate counter-clockwise 1\", \"\\xB0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Alt + PageUp\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Rotate clockwise 10\", \"\\xB0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Alt + PageDown\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Rotate counter-clockwise 10\", \"\\xB0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Ctrl + \\u2192\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Next Image\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Ctrl + \\u2190\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Previous Image\")))));\n}\n;\nMDXContent.isMDXComponent = true;","tableOfContents":{"items":[{"url":"#basic-controls","title":"Basic Controls","items":[{"url":"#panning","title":"Panning"},{"url":"#magnification","title":"Magnification","items":[{"url":"#heuristically-determined-magnification","title":"Heuristically Determined Magnification"},{"url":"#digital-zoom","title":"Digital Zoom"}]},{"url":"#focal-planes","title":"Focal Planes"},{"url":"#rotation-controls","title":"Rotation Controls"},{"url":"#color-management","title":"Color Management"},{"url":"#full-screen-mode","title":"Full Screen Mode"},{"url":"#keyboard-shortcuts","title":"Keyboard Shortcuts"}]}]}}},"pageContext":{"id":"445791e5-ce4d-59e4-a295-18e9acfcd473"}},"staticQueryHashes":["1086510573","1106176283","1122327541","2140385554","2719290676","3597609067","4027383558"]}