From 1b539d4d86241dff155f2c147973eb07fba2f936 Mon Sep 17 00:00:00 2001 From: Nicolas Roduit Date: Wed, 27 Mar 2024 15:15:18 +0100 Subject: [PATCH] Fix anchor and minor issues --- config.toml | 2 +- content/basics/customize/integration.en.md | 2 +- content/basics/customize/preferences.en.md | 22 +- content/basics/shortcuts.en.md | 50 ++--- content/demo.en.md | 2 +- content/getting-started/building-weasis.en.md | 4 +- content/getting-started/dcm4chee.en.md | 6 +- content/tutorials/build-ko-pr.en.md | 2 +- content/tutorials/dicom-2d-viewer.en.md | 44 ++-- content/tutorials/dicom-3d-viewer.en.md | 10 +- content/tutorials/dicom-audio.en.md | 8 +- content/tutorials/dicom-ecg.en.md | 12 +- content/tutorials/dicom-explorer.en.md | 4 +- content/tutorials/dicom-export.en.md | 4 +- content/tutorials/dicom-import.en.md | 2 +- content/tutorials/dicom-rt.en.md | 10 +- content/tutorials/dicom-segmentation.en.md | 4 +- content/tutorials/dicom-sr.en.md | 6 +- content/tutorials/draw-measure.en.md | 18 +- content/tutorials/histogram.en.md | 2 +- content/tutorials/image-orientation.en.md | 2 +- content/tutorials/lut.en.md | 8 +- content/tutorials/mip.en.md | 2 +- content/tutorials/mpr.en.md | 6 +- content/tutorials/tags.en.md | 6 +- content/tutorials/zoom.en.md | 6 +- layouts/partials/custom-header.html | 4 +- .../shortcodes/{badge.html => badgeC.html} | 4 +- layouts/shortcodes/svg.html | 2 +- static/css/theme-relearn-dark.css | 4 +- static/css/theme-relearn-light.css | 3 +- static/css/variant-internal.css | 106 ++++++++++ static/css/variant.css | 188 ++++++++---------- 33 files changed, 319 insertions(+), 236 deletions(-) rename layouts/shortcodes/{badge.html => badgeC.html} (83%) create mode 100644 static/css/variant-internal.css diff --git a/config.toml b/config.toml index 6b80a77b..07a49ad4 100755 --- a/config.toml +++ b/config.toml @@ -115,7 +115,7 @@ keepWhitespace = false [markup.goldmark.renderer] # activated for this showcase to use HTML and JavaScript; decide on your own needs; # if in doubt, remove this line - unsafe = true + unsafe = true [Languages] diff --git a/content/basics/customize/integration.en.md b/content/basics/customize/integration.en.md index 204547dc..1c011360 100755 --- a/content/basics/customize/integration.en.md +++ b/content/basics/customize/integration.en.md @@ -7,7 +7,7 @@ keywords: [ "workflow", "integration", "dicom viewer", "free dicom viewer", "ope ##
How to launch Weasis from any environments
-Here we present how to launch Weasis with associated images from any context either [using weasis-pacs-connector](#use-weasis-pacs-connector) or by [building your own connector](#build-your-own-connector). The launch of the application is based on the [weasis protocol](../../../getting-started/weasis-protocol) available since {{< badge "v3.5.3" >}}. +Here we present how to launch Weasis with associated images from any context either [using weasis-pacs-connector](#use-weasis-pacs-connector) or by [building your own connector](#build-your-own-connector). The launch of the application is based on the [weasis protocol](../../../getting-started/weasis-protocol) available since {{% badge title="Version" %}}3.5.3{{% /badge %}}. Using [weasis-pacs-connector](https://github.com/nroduit/weasis-pacs-connector) allows a high degree of integration and facilitates connection to a PACS. Here are some of the advantages: diff --git a/content/basics/customize/preferences.en.md b/content/basics/customize/preferences.en.md index 96d05d81..b5e8a15f 100755 --- a/content/basics/customize/preferences.en.md +++ b/content/basics/customize/preferences.en.md @@ -54,10 +54,10 @@ locale.lang.code=fr_CH | Property | Default value | GUI | Type | Description | |--------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------|-----|------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| -| weasis.confirm.closing | false (since {{< badge "v2.0.0" >}}) | yes | F | Show a message of confirmation when closing the application. | +| weasis.confirm.closing | false (since {{< badgeC "v2.0.0" >}}) | yes | F | Show a message of confirmation when closing the application. | | weasis.show.disclaimer | true | no | A | Show a disclaimer (requires to be accepted to start the application) during the first launch of Weasis. | -| weasis.show.release | true (since {{< badge "v2.0.0" >}}) | no | A | Show a message when the release has changed | -| weasis.export.dicom | true (since {{< badge "v1.2.5" >}}) | no | A | Allows exporting DICOM files. | +| weasis.show.release | true (since {{< badgeC "v2.0.0" >}}) | no | A | Show a message when the release has changed | +| weasis.export.dicom | true (since {{< badgeC "v1.2.5" >}}) | no | A | Allows exporting DICOM files. | | weasis.portable.dicom.cache | true | no | A | Cache the images imported from directories defined in weasis.portable.dicom.directory. If true, it is similar to the WEB import. | | org.apache.sling.commons.log.level | INFO | yes | F | Sets the logging level of the loggers. This may be any of the defined logging levels TRACE, DEBUG, INFO, WARN, ERROR. | | org.apache.sling.commons.log.file.activate | false | yes | F | Activate the log file. If this property is false, log messages are written to System.out. Since Weasis 2.0.4 | @@ -95,14 +95,14 @@ locale.lang.code=fr_CH | weasis.acquire.dest.port | 11112 | no | A | Port of DICOM send destination for Dicomizer | | weasis.acquire.meta.study.description | Pictures of follow-up,Pictures of observation,Pictures preoperative,Pictures intraoperative,Pictures postoperative | no | A | Comma-separated list of study description elements. Comment this property to have a free text field. | | weasis.acquire.meta.series.description | | no | A | Comma-separated list of series description elements. Comment this property to have a free text field. | -| weasis.level.inverse {{< badge "v2.6.0" >}} | true | yes | F | Inverse level direction (moving the cursor down to increase brightness) | -| weasis.apply.latest.pr {{< badge "v2.6.0" >}} | false | yes | F | Apply by default the most recent Presentation State to the related image | -| weasis.user {{< badge "v2.6.0" >}} | system user | no | A | Defines a user with its own preferences | -| weasis.pref.store.local.session {{< badge "v3.5.3" >}} | false | no | A | Store user preferences when weasis.user is not specified (only with remote preferences service) | -| weasis.theme {{< badge "v4.0.0" >}} | org.weasis.launcher.FlatWeasisTheme | yes | F | FlatWeasisTheme is the default dark theme. All the themes comes from [FlatLaf](https://www.formdev.com/flatlaf/) | -| weasis.theme.${system} {{< badge "v4.0.0" >}} | org.weasis.launcher.FlatWeasisTheme | yes | F | Apply a default theme specific to the platform (macosx, linux, windows). | -| flatlaf.uiScale {{< badge "v4.0.0" >}} | 1.0 (or the default scale factor of the Operating System) | yes | F | Specifies a custom scale factor used to scale the user interface. Allowed values: e.g. 1.5, 1.5x, 150% or 144dpi (96dpi is 100%) | -| weasis.update.release {{< badge "v4.0.1" >}} | true | no | A | Show a message when a new release is available | +| weasis.level.inverse {{< badgeC "v2.6.0" >}} | true | yes | F | Inverse level direction (moving the cursor down to increase brightness) | +| weasis.apply.latest.pr {{< badgeC "v2.6.0" >}} | false | yes | F | Apply by default the most recent Presentation State to the related image | +| weasis.user {{< badgeC "v2.6.0" >}} | system user | no | A | Defines a user with its own preferences | +| weasis.pref.store.local.session {{< badgeC "v3.5.3" >}} | false | no | A | Store user preferences when weasis.user is not specified (only with remote preferences service) | +| weasis.theme {{< badgeC "v4.0.0" >}} | org.weasis.launcher.FlatWeasisTheme | yes | F | FlatWeasisTheme is the default dark theme. All the themes comes from [FlatLaf](https://www.formdev.com/flatlaf/) | +| weasis.theme.${system} {{< badgeC "v4.0.0" >}} | org.weasis.launcher.FlatWeasisTheme | yes | F | Apply a default theme specific to the platform (macosx, linux, windows). | +| flatlaf.uiScale {{< badgeC "v4.0.0" >}} | 1.0 (or the default scale factor of the Operating System) | yes | F | Specifies a custom scale factor used to scale the user interface. Allowed values: e.g. 1.5, 1.5x, 150% or 144dpi (96dpi is 100%) | +| weasis.update.release {{< badgeC "v4.0.1" >}} | true | no | A | Show a message when a new release is available | ### Examples of properties in ext-config.properties diff --git a/content/basics/shortcuts.en.md b/content/basics/shortcuts.en.md index 9b81a7c1..a439a517 100755 --- a/content/basics/shortcuts.en.md +++ b/content/basics/shortcuts.en.md @@ -13,8 +13,8 @@ weight: 20 | Shortcut | Action | |------------------------|------------------------------------------------------------| -| **Ctrl + Tab** | Select the next tab (since {{< badge "v4.2.1" >}}) | -| **Ctrl + Shift + Tab** | Select the previous tab (since {{< badge "v4.2.1" >}}) | +| **Ctrl + Tab** | Select the next tab (since {{< badgeC "v4.2.1" >}}) | +| **Ctrl + Shift + Tab** | Select the previous tab (since {{< badgeC "v4.2.1" >}}) | | **Ctrl + Shift + E** | Open a the docking panel list for selection | | **Ctrl + M** | Maximize/Restore the selected tab | | **Ctrl + W** | Close the tab | @@ -24,31 +24,31 @@ weight: 20 | Shortcut | Action | |----------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------| -| **Left Arrow** | Display previous series (since {{< badge "v4.2.1" >}}) | -| **Right Arrow** | Display next series (since {{< badge "v4.2.1" >}}) | -| **Page Up** | Display first series (since {{< badge "v4.2.1" >}}) | -| **Page Down** | Display last series (since {{< badge "v4.2.1" >}}) | -| **Ctrl + Left Arrow** | Display previous study (since {{< badge "v4.2.1" >}}) | -| **Ctrl + Right Arrow** | Display next study (since {{< badge "v4.2.1" >}}) | -| **Ctrl + Page Up** | Display first study (since {{< badge "v4.2.1" >}}) | -| **Ctrl + Page Down** | Display last study (since {{< badge "v4.2.1" >}}) | -| **Up Arrow** | Display previous image (since {{< badge "v4.2.1" >}}) | -| **Down Arrow** | Display next image (since {{< badge "v4.2.1" >}}) | -| **Home** | Display first image (since {{< badge "v4.2.1" >}}) | -| **End** | Display last image (since {{< badge "v4.2.1" >}}) | -| **Shift + Up Arrow** | Go 10 images back (since {{< badge "v4.2.1" >}}) | -| **Shift + Down Arrow** | Go 10 images forward (since {{< badge "v4.2.1" >}}) | -| **Ctrl + Up Arrow** | Display previous patient (since {{< badge "v4.2.1" >}}) | -| **Ctrl + Down Arrow** | Display next patient (since {{< badge "v4.2.1" >}}) | -| **Ctrl + Home** | Display first patient (since {{< badge "v4.2.1" >}}) | -| **Ctrl + End** | Display last patient (since {{< badge "v4.2.1" >}}) | +| **Left Arrow** | Display previous series (since {{< badgeC "v4.2.1" >}}) | +| **Right Arrow** | Display next series (since {{< badgeC "v4.2.1" >}}) | +| **Page Up** | Display first series (since {{< badgeC "v4.2.1" >}}) | +| **Page Down** | Display last series (since {{< badgeC "v4.2.1" >}}) | +| **Ctrl + Left Arrow** | Display previous study (since {{< badgeC "v4.2.1" >}}) | +| **Ctrl + Right Arrow** | Display next study (since {{< badgeC "v4.2.1" >}}) | +| **Ctrl + Page Up** | Display first study (since {{< badgeC "v4.2.1" >}}) | +| **Ctrl + Page Down** | Display last study (since {{< badgeC "v4.2.1" >}}) | +| **Up Arrow** | Display previous image (since {{< badgeC "v4.2.1" >}}) | +| **Down Arrow** | Display next image (since {{< badgeC "v4.2.1" >}}) | +| **Home** | Display first image (since {{< badgeC "v4.2.1" >}}) | +| **End** | Display last image (since {{< badgeC "v4.2.1" >}}) | +| **Shift + Up Arrow** | Go 10 images back (since {{< badgeC "v4.2.1" >}}) | +| **Shift + Down Arrow** | Go 10 images forward (since {{< badgeC "v4.2.1" >}}) | +| **Ctrl + Up Arrow** | Display previous patient (since {{< badgeC "v4.2.1" >}}) | +| **Ctrl + Down Arrow** | Display next patient (since {{< badgeC "v4.2.1" >}}) | +| **Ctrl + Home** | Display first patient (since {{< badgeC "v4.2.1" >}}) | +| **Ctrl + End** | Display last patient (since {{< badgeC "v4.2.1" >}}) | | **Tab** | Go the next view when layout has more than one view | | **Shift + Tab** | Go the previous view when layout has more than one view | -| **Alt + Arrows** | Move image of 5 pixels (since {{< badge "v4.2.1" >}}) | -| **Alt + Shift + Arrows** | Move image of 10 pixels (since {{< badge "v4.2.1" >}}) | -| **Ctrl + Plus (+)** | Zoom in (since {{< badge "v4.2.1" >}}) | -| **Ctrl + Minus (-)** | Zoom out (since {{< badge "v4.2.1" >}}) | -| **Ctrl + Enter** | Set zoom to best fit (since {{< badge "v4.2.1" >}}) | +| **Alt + Arrows** | Move image of 5 pixels (since {{< badgeC "v4.2.1" >}}) | +| **Alt + Shift + Arrows** | Move image of 10 pixels (since {{< badgeC "v4.2.1" >}}) | +| **Ctrl + Plus (+)** | Zoom in (since {{< badgeC "v4.2.1" >}}) | +| **Ctrl + Minus (-)** | Zoom out (since {{< badgeC "v4.2.1" >}}) | +| **Ctrl + Enter** | Set zoom to best fit (since {{< badgeC "v4.2.1" >}}) | | **T** | Translate (pan) the image canvas | | **W** | Window / Level | | **S** | Series scroll | diff --git a/content/demo.en.md b/content/demo.en.md index aa2481c8..1ca74a11 100755 --- a/content/demo.en.md +++ b/content/demo.en.md @@ -302,5 +302,5 @@ $dicom:get -w "https://nroduit.github.io/demo-archive/demo/ko.xml" {{< /launch >}} {{% notice info %}} -Click on the right icon over the image to select the Key Object Selection. See [How to build and export DICOM KO](../tutorials/build-ko-pr). +Click on the right icon over the image to select the Key Object Selection. See [How to build and export DICOM KO](../tutorials/build-ko-pr/#key-object-selection-ko). {{% /notice %}} diff --git a/content/getting-started/building-weasis.en.md b/content/getting-started/building-weasis.en.md index a5f0a6d0..fa479dfd 100755 --- a/content/getting-started/building-weasis.en.md +++ b/content/getting-started/building-weasis.en.md @@ -29,7 +29,7 @@ git clone https://github.com/nroduit/Weasis.git mvn clean install {{< /highlight >}} -- Package `weasis-native.zip` (located in `target/native-dist/`) {{< badge "v4.0.0" >}} : +- Package `weasis-native.zip` (located in `target/native-dist/`), since {{% badge title="Version" %}}4.0.0{{% /badge %}} : {{< highlight shell >}} mvn -P compressXZ -f weasis-distributions clean package {{< /highlight >}} @@ -53,7 +53,7 @@ mvn -Dchangelist=-mybuild-beta -P compressXZ -f weasis-distributions clean packa ### Building native binaries and installers -Since {{< badge "v4.0.0" >}} the native installer has completely replaced the portable and the Java Webstart distributions. +Since {{% badge title="Version" %}}4.0.0{{% /badge %}} the native installer has completely replaced the portable and the Java Webstart distributions. The [official build](https://github.com/nroduit/Weasis/blob/master/.github/workflows/build-installer.yml) is done by Github actions with [GitHub-hosted runners](https://docs.github.com/en/actions/using-github-hosted-runners/about-github-hosted-runners) (Linux, macOS and Windows). diff --git a/content/getting-started/dcm4chee.en.md b/content/getting-started/dcm4chee.en.md index b42868be..d515914d 100755 --- a/content/getting-started/dcm4chee.en.md +++ b/content/getting-started/dcm4chee.en.md @@ -23,8 +23,8 @@ For a simpler and faster installation without server components, please follow t - [weasis-pacs-connector.war] Requires at least the version 7.1.2 - From the folder with the latest version number (Optional if you want to run only the [native version](../) installed on the client system): - [weasis.war] requires at least Weasis 3.5.3 - - {{< badge "Optional" >}} [weasis-i18n.war] for [internationalization](../translating) - - {{< badge "Optional" >}} [weasis-ext.war] for [additional plug-ins](../../basics/customize/build-plugins/) + - {{% badge style="info" %}}Optional{{% /badge %}} [weasis-i18n.war] for [internationalization](../translating) + - {{% badge style="info" %}}Optional{{% /badge %}} [weasis-ext.war] for [additional plug-ins](../../basics/customize/build-plugins/) - From the folder with the latest version number: 3. Open the wildfly management console (at `http://:9990`). @@ -65,7 +65,7 @@ deployment-overlay add --name=dcm4chee-arc --deployments=weasis-pacs-connector.w {{% notice tip %}} **Absolute path**: The values above starting by "../" are the default relative path when weasis-pacs-connector is installed in the same JBoss as dcm4chee. Otherwise replace the relative URL by an absolute value, ex: `http://:/weasis-pacs-connector/...` {{% /notice %}} - - {{< badge "Optional" >}} Add other properties in the URL. + - {{% badge style="info" %}}Optional{{% /badge %}} Add other properties in the URL. - Refresh the web page and the view button should appear as in the screenshot above - To launch the viewer from the web portal, the client computer must have installed the [Weasis package](../). diff --git a/content/tutorials/build-ko-pr.en.md b/content/tutorials/build-ko-pr.en.md index b69ccc12..656c3329 100755 --- a/content/tutorials/build-ko-pr.en.md +++ b/content/tutorials/build-ko-pr.en.md @@ -20,7 +20,7 @@ keywords: [ "Key Object Selection", "Presentation State", "dicom viewer", "free ### Presentation State (PR or GSPS) -- Apply PR loaded from a DICOM file (1) {{< svg "static/tuto/icon/imagePresentation.svg" >}}: Since Weasis {{< badge "v2.6.0" >}} PRs are not applied to the image by default (requires to select the right icon (2) over the image). In order to apply the most recent PR by default, change it from the main menu _File > Preferences (Alt + P)_ and check "Apply by default the most recent Presentation State", or in the [default preferences](../../basics/customize/preferences/). +- Apply PR loaded from a DICOM file (1) {{< svg "static/tuto/icon/imagePresentation.svg" >}}: Since {{% badge title="Version" %}}2.6.0{{% /badge %}} PRs are not applied to the image by default (requires to select the right icon (2) over the image). In order to apply the most recent PR by default, change it from the main menu _File > Preferences (Alt + P)_ and check "Apply by default the most recent Presentation State", or in the [default preferences](../../basics/customize/preferences/). - Create a new PR: Any type of annotations (Drawings and Measurements) can be exported in a DICOM Presentation State. Image presentation actions (zoom, calibration, W/L, LUT...) are not yet possible to export into PR. ![Build PR](/tuto/pr-actions.jpg?classes=shadow&width=700px)
diff --git a/content/tutorials/dicom-2d-viewer.en.md b/content/tutorials/dicom-2d-viewer.en.md index fb98d367..18f9db34 100755 --- a/content/tutorials/dicom-2d-viewer.en.md +++ b/content/tutorials/dicom-2d-viewer.en.md @@ -15,13 +15,13 @@ The 2D view can be opened with {{< svg "static/tuto/icon/view2d.svg" >}} in the ![DICOM 2DViewer](/tuto/dicom-viewer2d.jpg?classes=shadow&width=780px)
-The rulers{{< badge "K" >}} show a real size when it can be calculated from the DICOM file. When a text {{< badge "M" >}} above the calibration is displayed, it gives information about the calibration type. Here are some examples: +The rulers {{% badge style="blue" %}}K{{% /badge %}} show a real size when it can be calculated from the DICOM file. When a text {{% badge style="blue" %}}M{{% /badge %}} above the calibration is displayed, it gives information about the calibration type. Here are some examples: * _At dector:_ The calibration of the projection radiographic image is done at the detector level * _Magnified:_ The calibration of the projection radiographic image is corrected using the magnification factor (e.g. mammography, see the image above) * _Used fiducials:_ The calibration is based on fiducials (e.g. manual calibration with a ruler in the image) * _At scanner:_ The calibration comes from a media which has been digitized (e.g. film digitizer) -### Toolbars {{< badge "A" >}} +### Toolbars {{% badge style="red" %}}A{{% /badge %}} {#toolbars} #### Viewer Main Bar @@ -29,7 +29,7 @@ The rulers{{< badge "K" >}} show a real size when it can be calculated from the Select the preferred actions for the three mouse buttons and the mouse wheel: -* Mouse left button: The default value is Window/Level. Action can also be changed from the context menu {{< badge "F" >}} and the [key shortcuts](../../basics/shortcuts). +* Mouse left button: The default value is Window/Level. Action can also be changed from the context menu {{% badge style="blue" %}}F{{% /badge %}} and the [key shortcuts](../../basics/shortcuts). * Mouse right button: The default value is _Context Menu_ * Mouse wheel: The default value is _Series Scroll_ * Mouse middle button: The default value is _Pan_ @@ -40,8 +40,8 @@ Where the possible actions are: * Series Scroll: Scroll through the images of the current series. _S_ key to select the action. * [Zoom](../zoom): Zoom in/out the image. _Z_ key to select the action. * Rotation: Rotate the image with a free angle. _R_ key to select the action. -* [Measure](../draw-measure/#measurement-tools-hahahugoshortcodes3hbhb): Draw a graphic for measuring something. _M_ key to select the action. -* [Draw](../draw-measure/#drawings-hahahugoshortcodes7hbhb): Draw a graphic for annotating. _G_ key to select the action. +* [Measure](../draw-measure/#measurement-tools): Draw a graphic for measuring something. _M_ key to select the action. +* [Draw](../draw-measure/#drawings): Draw a graphic for annotating. _G_ key to select the action. * Context Menu: Display the context menu. _Q_ key to select the action. * [Crosshair](../mpr/#3d-cursor-crosshair): 3D cursor. _H_ key to select the action. _Ctrl + click_ or _Ctrl + Shift + click_ allows changing Window/Level. * No Action: Do nothing. _N_ key to select the action. @@ -59,7 +59,7 @@ When dragging, accelerate the action by pressing the _Ctrl_ key and _Ctrl + Shif #### Toolbars available in the DICOM 2D viewer * [DICOM Import](../dicom-import/#from-weasis-menu-or-toolbar) -* [DICOM Export](../dicom-export/#dicom-export-hahahugoshortcodes2hbhb) +* [DICOM Export](../dicom-export/#dicom-exporting) * [Screenshot](../dicom-export/#dicom-export) * Viewer Main Bar (see above) * [Measurement](../draw-measure/) @@ -81,10 +81,10 @@ Here is a list of the tools which are associated to the DICOM 2D viewer. The mini-tool is always visible and the other tools are displayed by clicking on the vertical button. The normalize button {{< svg "static/tuto/icon/normalize.svg" >}} allows you to insert the panel into the main layout. Otherwise, the panel is displayed as a popup window with the pin option {{< svg "static/tuto/icon/holdon.svg" >}} (which is not recommended, as it hides other panels). -#### Mini-tool {{< badge "B" >}} +#### Mini-tool {{% badge style="red" %}}B{{% /badge %}} {#mini-tool} Allows you by default to scroll through the images of the selected series (surrounded by an orange line). From the combobox at the top, the mini-tool can also be configured to change the zoom or the rotation of the image. -#### Display {{< badge "C" >}} +#### Display {{% badge style="red" %}}C{{% /badge %}} {#display} It lets you control the display of the image and the graphic objects. @@ -100,31 +100,31 @@ Display options for the image. Unchecking the _Image_ option will hide the image Display transformation properties and DICOM information on the image. * Annotations: Display DICOM information on the image corners: - * {{< badge "G" >}} The top left: Patient information - * {{< badge "H" >}} The top right: Study information - * {{< badge "I" >}} The bottom right: Series information (related to the modality type) - * {{< badge "J" >}} The bottom left: Image information and its position in the series + * {{% badge style="blue" %}}G{{% /badge %}} The top left: Patient information + * {{% badge style="blue" %}}H{{% /badge %}} The top right: Study information + * {{% badge style="blue" %}}I{{% /badge %}} The bottom right: Series information (related to the modality type) + * {{% badge style="blue" %}}J{{% /badge %}} The bottom left: Image information and its position in the series * Minimal Annotations: Reduce the number of annotations. Use _space_ or _i_ key to toggle between the 3 states (minimal, none, all). * Anonymize: Hide identifying information only in the views not in other places of the GUI like the tab title. Must be used with the [screenshot tool](../dicom-export) when exporting image. -* Scale: Display the rulers on the left and the bottom of the image {{< badge "K" >}} +* Scale: Display the rulers on the left and the bottom of the image {{% badge style="blue" %}}K{{% /badge %}} * Lookup Table: Display the [LUT](../lut) on the image -* Orientation: Display the [orientation of the image](../image-orientation) {{< badge "N" >}} -* Window/Level: Display the [window and level](../lut/#windowing-and-rendering) values {{< badge "J" >}} -* Zoom: Display the zoom value {{< badge "J" >}} -* Rotation: Display the rotation value {{< badge "J" >}} -* Frame Value: Display the frame number {{< badge "J" >}} -* Pixel (Value/Position): Display the pixel value and the position of the cursor {{< badge "J" >}} +* Orientation: Display the [orientation of the image](../image-orientation) {{% badge style="blue" %}}N{{% /badge %}} +* Window/Level: Display the [window and level](../lut/#windowing-and-rendering) values {{% badge style="blue" %}}J{{% /badge %}} +* Zoom: Display the zoom value {{% badge style="blue" %}}J{{% /badge %}} +* Rotation: Display the rotation value {{% badge style="blue" %}}J{{% /badge %}} +* Frame Value: Display the frame number {{% badge style="blue" %}}J{{% /badge %}} +* Pixel (Value/Position): Display the pixel value and the position of the cursor {{% badge style="blue" %}}J{{% /badge %}} ##### Drawings Check/uncheck to show/hide the graphic objects (see [Draw & Measure](../draw-measure/)). -#### Image Tools {{< badge "D" >}} +#### Image Tools {{% badge style="red" %}}D{{% /badge %}} {#image-tools} _Image Tools_ contains all the tools to modify the image rendering. ##### [Windowing and Rendering](../lut/) ##### Transform -Allows you to zoom, rotate and flip the image. [Zoom](../zoom) and rotation can also be configured with the [mini-tool](#mini-tool) or the [mouse actions](#toolbars-hahahugoshortcodes4hbhb). +Allows you to zoom, rotate and flip the image. [Zoom](../zoom) and rotation can also be configured with the [mini-tool](#mini-tool) or the [mouse actions](#toolbars). ##### Cine The _Cine start_ button {{< svg "static/tuto/icon/execute.svg" >}} lets you scroll through the images in a series at a certain speed (frame per second). The speed values comes from the DICOM file if exists. The cine options can also be changed from the context menu. @@ -145,7 +145,7 @@ A _Cine_ toolbar is also available. It is not visible by default, but can be dis ##### Reset It allows you to return to the default image rendering for all or specific parameters. Also available from the toolbar button {{< svg "static/tuto/icon/reset.svg" >}} or from the context menu. -#### [Draw & Measure](../draw-measure/) {{< badge "E" >}} +#### [Draw & Measure](../draw-measure/) {{% badge style="red" %}}E{{% /badge %}} {#draw-measure} #### Other specific tools * [DICOM RT tools](../dicom-rt) (for radiotherapy studies) diff --git a/content/tutorials/dicom-3d-viewer.en.md b/content/tutorials/dicom-3d-viewer.en.md index 506dc093..482131e4 100755 --- a/content/tutorials/dicom-3d-viewer.en.md +++ b/content/tutorials/dicom-3d-viewer.en.md @@ -7,7 +7,7 @@ keywords: [ "viewer 3D", "volume rendering", "ray casting", "3D rendering", "dic ##
Displaying volume data {{< svg "static/tuto/icon/volume.svg" >}}
-Since Weasis {{< badge "v4.1.0" >}} the 3D viewer allows displaying volumetric renderings with different options for adjusting the pseudo colors, the transparency, the shadows and the lighting according to the type of exam. +Since Weasis {{% badge title="Version" %}}4.1.0{{% /badge %}} the 3D viewer allows displaying volumetric renderings with different options for adjusting the pseudo colors, the transparency, the shadows and the lighting according to the type of exam. The volume rendering uses a [ray casting algorithm](https://en.wikipedia.org/wiki/Volume_ray_casting) and the OpenGL Shading Language (GLSL). Shader programming is used to create the necessary algorithms and data structures required for the ray casting computations to be executed efficiently on the graphics card. Therefore, minimal graphic resources are required. @@ -36,7 +36,7 @@ $dicom:get -w "https://nroduit.github.io/demo-archive/3d/head-neck.xml" ![3D View](/tuto/view-3d.jpg?classes=shadow&width=780px)
-### Toolbar {{< badge "A" >}} +### Toolbar {{% badge style="red" %}}A{{% /badge %}} {#toolbar} Actions in the toolbar are: * {{< svg "static/tuto/icon/loadVolume.svg" >}} Allows you to fully reload the volume * {{< svg "static/tuto/icon/orthographic.svg" >}} The orthographic projection maintains parallel lines unlike the perspective projection that provides a perception of depth. The default mode is the perspective projection. @@ -47,7 +47,7 @@ For other buttons see below. ### 3D Rendering Tools This tab contains all the tools to modify the volume rendering. If you want to return to the original settings, just click on the toolbar button {{< svg "static/tuto/icon/reset.svg" >}} or from the context menu. -#### Windowing and Rendering {{< badge "B" >}} +#### Windowing and Rendering {{% badge style="red" %}}B{{% /badge %}} {#windowing} Some of the options described below are also available in the toolbar and in the contextual menus. * _Window:_ The width of a range of voxels values mapped to a specific range of display values. @@ -58,7 +58,7 @@ Some of the options described below are also available in the toolbar and in the * {{< svg "static/tuto/icon/inverseLut.svg" >}} allows you to invert the LUT. -#### Volume Rendering {{< badge "C" >}} +#### Volume Rendering {{% badge style="red" %}}C{{% /badge %}} {#volume-rendering} This panel contains options for the rendering type and its quality, transparency, lighting, and shading settings. * _Type:_ Composite is the classic type of volume rendering. The Maximum Intensity Projection (MIP) is the highest intensity voxels (3D pixels) along a ray path are projected onto a 2D plane. Iso surface is a technique to create a 3D representation on a specific intensity threshold. @@ -66,7 +66,7 @@ This panel contains options for the rendering type and its quality, transparency * _Opacity:_ The opacity factor of the voxels. Can be set to more than 100% to modify initial values (lower than 100%) transmitted by the Volume LUTs. * _Shading:_ Allows to activate the shading. Default value is defined in LUT. The additional options allow you to override the default lighting settings (comes from Volume LUT). -#### Transform {{< badge "D" >}} +#### Transform {{% badge style="red" %}}D{{% /badge %}} {#transform} Allows you to zoom and rotate along a specific axis ### Preferences diff --git a/content/tutorials/dicom-audio.en.md b/content/tutorials/dicom-audio.en.md index 6d3b4bf4..f8123c86 100755 --- a/content/tutorials/dicom-audio.en.md +++ b/content/tutorials/dicom-audio.en.md @@ -15,15 +15,15 @@ $dicom:get -w "https://nroduit.github.io/demo-archive/demo/audio.xml" ![Audio Player](/tuto/dicom-audio.png?classes=shadow&width=780px)
-### Toolbar {{< badge "A" >}} +### Toolbar {{% badge style="red" %}}A{{% /badge %}} {#toolbar} Actions in the toolbar are: * {{< svg "static/tuto/icon/metadata.svg" >}} Show the DICOM metadata of the DICOM AU -### Play {{< badge "B" >}} +### Play {{% badge style="red" %}}B{{% /badge %}} {#play} The _Play_ button allows you to play and pause. The slicer allows you to navigate through the audio file and display the position in seconds. -### Volume {{< badge "C" >}} +### Volume {{% badge style="red" %}}C{{% /badge %}} {#volume} This slider allows you to adjust the volume of the audio file. -### Export Audio File {{< badge "D" >}} +### Export Audio File {{% badge style="red" %}}D{{% /badge %}} {#export-audio-file} The _Export Audio File_ button allows you to save the audio file in the format AU or WAVE. \ No newline at end of file diff --git a/content/tutorials/dicom-ecg.en.md b/content/tutorials/dicom-ecg.en.md index ed4e5c72..4d200c5f 100755 --- a/content/tutorials/dicom-ecg.en.md +++ b/content/tutorials/dicom-ecg.en.md @@ -13,13 +13,13 @@ The viewer can also provide tools for measuring ECG intervals and amplitudes in ![ECG Viewer](/tuto/ecg.png?classes=shadow&width=780px)
-### Toolbar {{< badge "A" >}} +### Toolbar {{% badge style="red" %}}A{{% /badge %}} {#toolbar} Actions in the toolbar are: * {{< svg "static/tuto/icon/print.svg" >}} Allows you to print the ECG as it is displayed with some basic information (patient/study) * {{< svg "static/tuto/icon/metadata.svg" >}} Show the DICOM metadata of the ECG -* {{< svg "static/tuto/icon/selectionDelete.svg" >}} Delete all the measurements (yellow areas in the image above), see [Markers](#markers-d) +* {{< svg "static/tuto/icon/selectionDelete.svg" >}} Delete all the measurements (yellow areas in the image above), see [Markers](#markers) -### Zoom and Display Format {{< badge "B" >}} +### Zoom and Display Format {{% badge style="red" %}}B{{% /badge %}} {#zoom-and-display-format} The zoom is on several graphic components. The first combo box represents the time, the second represents the voltage, and the slider allows you to zoom in both directions while preserving the aspect ratio. * Time (X-axis): The number of millimeters per second (by default is "_auto mm/s_") @@ -27,13 +27,13 @@ The zoom is on several graphic components. The first combo box represents the ti The Display Format allows you to show the leads in different layouts. -### Lead and Cursor information {{< badge "C" >}} +### Lead and Cursor information {{% badge style="red" %}}C{{% /badge %}} {#lead-and-cursor-information} Moving the cursor over the ECG displays the following information: * Lead label: show the minimum and maximum voltage values of a lead * Cursor: show the current time and voltage values under the cursor -### Markers {{< badge "D" >}} +### Markers {{% badge style="red" %}}D{{% /badge %}} {#markers} The markers are the result of the measurements made on the ECG (yellow areas in the image above). A measurement is done by defining a starting and ending point: * _Start Time:_ The time in seconds according to the position of the first point @@ -55,7 +55,7 @@ Deleting the measurement in a lead can be done by a middle-click or shift+click. Only one measurement is possible by lead. {{% /notice %}} -### Annotations {{< badge "E" >}} +### Annotations {{% badge style="red" %}}E{{% /badge %}} {#annotations} The annotations come from 2 groups of DICOM metadata: * Acquisition context and Annotations: Attributes which describes the conditions present during data acquisition. * Annotations: may represent a measurement or categorization based on the waveform data, identification of regions of interest or particular features of the waveform, or events during the data collection that may affect diagnostic interpretation (e.g., the time at which the subject coughed). \ No newline at end of file diff --git a/content/tutorials/dicom-explorer.en.md b/content/tutorials/dicom-explorer.en.md index d231d382..c83cbc98 100755 --- a/content/tutorials/dicom-explorer.en.md +++ b/content/tutorials/dicom-explorer.en.md @@ -34,7 +34,7 @@ You can navigate through the Patient/Study/Series/Image structure using only [ke #### Study Level * A study contains one or more series (thumbnails) belonging to a patient. A line representing the study surrounds its series (see image above). -* By default, the studies are sorted by reverse chronology order (since {{< badge "v4.1.0" >}} "_Study data sorting_" can be changed in the menu "_File > Preferences > DICOM > DICOM Explorer_"). If there is no study date then the studies are sorted alphabetically according to the Study Description. +* By default, the studies are sorted by reverse chronology order (since {{% badge title="Version" %}}4.1.0{{% /badge %}} "_Study data sorting_" can be changed in the menu "_File > Preferences > DICOM > DICOM Explorer_"). If there is no study date then the studies are sorted alphabetically according to the Study Description. * By default, all the studies are displayed, however you can choose to display only one of them from the study combobox. #### Series Level @@ -56,6 +56,6 @@ You can navigate through the Patient/Study/Series/Image structure using only [ke From the main menu "_File > Preferences > DICOM > DICOM Explorer_": * _Thumbnail size:_ defines the width of the thumbnails and adjusts the panel accordingly (Default: 144). It is recommended to restart the application after this change. -* _Study data sorting:_ allows sorting the studies by chronological order or inversely chronological (Default: reverse chronology order). Since {{< badge "v4.1.0" >}}. +* _Study data sorting:_ allows sorting the studies by chronological order or inversely chronological (Default: reverse chronology order). Since {{% badge title="Version" %}}4.1.0{{% /badge %}}. * _Open in new tab:_ behavior to automatically open the images of a patient when [using WADO or WADO-RS](../../basics/customize/integration/) (Default: All the patients) * _Download all series immediately:_ allows starting the download of the series immediately when [using WADO or WADO-RS](../../basics/customize/integration/) (Default: true). If unchecked then you must click on the play button on each series or globally at the bottom of the thumbnail list. \ No newline at end of file diff --git a/content/tutorials/dicom-export.en.md b/content/tutorials/dicom-export.en.md index 787eeb94..8ed44430 100755 --- a/content/tutorials/dicom-export.en.md +++ b/content/tutorials/dicom-export.en.md @@ -7,7 +7,7 @@ keywords: [ "dicom export", "dicom viewer", "free dicom viewer", "open source di ##
How to export DICOM files
-### Exporting the selected view {{< svg "static/tuto/icon/exportImage.svg" >}} +### Exporting the selected view {{< svg "static/tuto/icon/exportImage.svg" >}} {#export-view} From the toolbar icon {{< svg "static/tuto/icon/exportImage.svg" >}} or from the main menu _File > Export > Exporting view_ export the selected view either to the clipboard or to image file (PNG, TIF, JPG, JPEG2000). #### Current view @@ -27,7 +27,7 @@ Export the view according to the original image with some options. * DICOM Shutter: Apply the [DICOM shutters](https://dicom.nema.org/medical/Dicom/current/output/chtml/part03/sect_C.7.6.11.html) when checked * DICOM Overlay: Apply the [DICOM overlays](https://dicom.nema.org/medical/dicom/current/output/chtml/part03/sect_C.9.2.html) when checked -### DICOM Export {{< svg "static/tuto/icon/exportDicom.svg" >}} +### DICOM Export {{< svg "static/tuto/icon/exportDicom.svg" >}} {#dicom-exporting} In order to open the DICOM export window click on toolbar icon {{< svg "static/tuto/icon/exportDicom.svg" >}} or from the main menu _File > Export > DICOM_ diff --git a/content/tutorials/dicom-import.en.md b/content/tutorials/dicom-import.en.md index 142d4193..6986e984 100755 --- a/content/tutorials/dicom-import.en.md +++ b/content/tutorials/dicom-import.en.md @@ -62,7 +62,7 @@ It may be from a DICOM CD/DVD or a folder containing a DICOMDIR * On Search Criteria tab: ![Thumbnails](/tuto/dicom-import-search.png?classes=shadow&width=700px)
- 1. Select a pre-registered item (bottom right of the _Search Criteria_ panel) or Fill the search criteria. Criteria can be saved and reuse later, since {{< badge "v4.1.0" >}} the item selected in the combo box is automatically applied the next time this window is opened (the default value is _Empty_). + 1. Select a pre-registered item (bottom right of the _Search Criteria_ panel) or Fill the search criteria. Criteria can be saved and reuse later, since {{% badge title="Version" %}}4.1.0{{% /badge %}} the item selected in the combo box is automatically applied the next time this window is opened (the default value is _Empty_). 2. Adjust the limit to the maximum number of exams in the response. Set the limit to 0 to avoid this constraint. For DICOMWeb the limit is the number of elements on a page, and you can go to the next page with the spinner buttons. 3. Click on Search 4. Select the exams you want to import diff --git a/content/tutorials/dicom-rt.en.md b/content/tutorials/dicom-rt.en.md index c14f5363..40c205ae 100755 --- a/content/tutorials/dicom-rt.en.md +++ b/content/tutorials/dicom-rt.en.md @@ -7,15 +7,15 @@ keywords: [ "dicom rt", "radiotherapy", "dicom viewer", "free dicom viewer", "op ##
Displaying radiotherapy information {{< svg "static/tuto/icon/rt.svg" >}}
-The _RT Tool_ appears on the right panel when a CT exam (when linked with DICOM STRUCT, PLAN and DOSE) is displayed. Since Weasis {{< badge "v4.1.0" >}} a specific configuration in config.properties is no longer required. +The _RT Tool_ appears on the right panel when a CT exam (when linked with DICOM STRUCT, PLAN and DOSE) is displayed. Since {{% badge title="Version" %}}4.1.0{{% /badge %}} a specific configuration in config.properties is no longer required. ### How to display structure and iso-dose In order to display the structures in overlay on the image, apply the following points (see in the image below): -1. {{< badge "Optional" >}} When selected, it allows you to force the DVH calculations. Otherwise, it is calculated only if some information is not available in the DICOM files. +1. {{% badge style="info" %}}Optional{{% /badge %}} When selected, it allows you to force the DVH calculations. Otherwise, it is calculated only if some information is not available in the DICOM files. 2. Click on "_Load RT_" button to load DICOM STRUCT, PLAN and DOSE associated the CT images. Once loaded, the button becomes inactive. -3. {{< badge "Optional" >}} Select a structure if there is more than one. -4. {{< badge "Optional" >}} Select a plan if there is more than one. +3. {{% badge style="info" %}}Optional{{% /badge %}} Select a structure if there is more than one. +4. {{% badge style="info" %}}Optional{{% /badge %}} Select a plan if there is more than one. ![DICOM STRUCT](/tuto/dicom-rt-struct.jpg?classes=shadow)
@@ -32,7 +32,7 @@ For displaying the iso-doses, apply the following points (see in the image below 1. Select the _Isodoses_ tab 2. Check the _Isodoses_ root node which is not activated by default -3. {{< badge "Optional" >}} Adjust the graphic opacity +3. {{% badge style="info" %}}Optional{{% /badge %}} Adjust the graphic opacity ![DICOM DOSE](/tuto/dicom-rt-dose.jpg?classes=shadow)
diff --git a/content/tutorials/dicom-segmentation.en.md b/content/tutorials/dicom-segmentation.en.md index d133a7a2..43d3f901 100755 --- a/content/tutorials/dicom-segmentation.en.md +++ b/content/tutorials/dicom-segmentation.en.md @@ -7,7 +7,7 @@ keywords: [ "dicom seg", "segmentation", "SEG", "dicom viewer", "free dicom view ##
Displaying DICOM Segmentation {{< svg "static/tuto/icon/segmentation.svg" >}}
-Since Weasis {{< badge "v4.3.0" >}}, this panel lets you display the contents of a DICOM SEG file superimposed on the image. It also lets you modify the transparency of specific regions (label defined by a color). +Since Weasis {{% badge title="Version" %}}4.3.0{{% /badge %}}, this panel lets you display the contents of a DICOM SEG file superimposed on the image. It also lets you modify the transparency of specific regions (label defined by a color). DICOM SEG can be generated by [AI frameworks](../dicom-artificial-intelligence) to represent the results of segmentation algorithms applied to medical images. @@ -28,7 +28,7 @@ The regions tree has context menus that allow you to: * _Fill opacity_ (all nodes): The opacity of the interior of the shape, relative to the opacity of the line color (_Graphic Opacity_). The default value is 20%. For example, if the line color has an opacity of 80% and the fill opacity is 20%, then the perceived opacity will be 16% (0.8 * 0.2). * _Select/Unselect all the child nodes_ (only for parent nodes) * _Show ih the images view_ (only for leaf nodes): The region with the highest surface area is displayed in the image overview. -* _Pixel statistics from the selected view_ (only for leaf nodes): Show statistics of the pixel values within the region shape. +* _Pixel statistics from the selected view_ (only for leaf nodes): Show statistics of the pixel values within the region shape. For the definition of the statistics parameters, see graphic [Pixel Statistics](../draw-measure/#selected-measurement). {{% /notice %}} {{% notice tip %}} diff --git a/content/tutorials/dicom-sr.en.md b/content/tutorials/dicom-sr.en.md index f71b800a..6e0c7df8 100755 --- a/content/tutorials/dicom-sr.en.md +++ b/content/tutorials/dicom-sr.en.md @@ -19,15 +19,15 @@ $dicom:get -w "https://nroduit.github.io/demo-archive/demo/sr.xml" ![SR Viewer](/tuto/dicom-sr.png?classes=shadow&width=780px)
-### Toolbar {{< badge "A" >}} +### Toolbar {{% badge style="red" %}}A{{% /badge %}} {#toolbar} Actions in the toolbar are: * {{< svg "static/tuto/icon/print.svg" >}} Allows you to print the rendering of the SR * {{< svg "static/tuto/icon/metadata.svg" >}} Show the DICOM metadata of the SR -### Display SR Header {{< badge "B" >}} +### Display SR Header {{% badge style="red" %}}B{{% /badge %}} {#display-sr-header} The header of the SR object is displayed in a table format with 3 columns containing information about the patient, the study, and the report status. -### DICOM SR Tree {{< badge "C" >}} +### DICOM SR Tree {{% badge style="red" %}}C{{% /badge %}} {#dicom-sr-tree} The content of the SR object is displayed in a tree structure. Each node in the tree represents a content item with hierarchical numbering, and the tree structure reflects the relationships between the items. Some items can have a link to other content items, and the viewer provides a way to navigate through the tree by clicking on the links. diff --git a/content/tutorials/draw-measure.en.md b/content/tutorials/draw-measure.en.md index a5076fc2..5faffc62 100755 --- a/content/tutorials/draw-measure.en.md +++ b/content/tutorials/draw-measure.en.md @@ -18,8 +18,8 @@ This panel allows you to draw and measure on DICOM and standard images. The resu ### Draw & Measure Panel When clicking on {{< svg "static/tuto/icon/normalize.svg" >}} of the vertical button {{< svg "static/tuto/icon/measure.svg" >}}, the panel is displayed on the right side of the viewer. This panel is divided into 4 parts. -#### Measurement tools {{< badge "A" >}} -Select a measurement tool by clicking on one of the buttons and then draw on the image. Note that the previous action will select automatically the drawing action in the [mouse left button](../dicom-2d-viewer/#toolbars-hahahugoshortcodes4hbhb). +#### Measurement tools {{% badge style="red" %}}A{{% /badge %}} {#measurement-tools} +Select a measurement tool by clicking on one of the buttons and then draw on the image. Note that the previous action will select automatically the drawing action in the [mouse left button](../dicom-2d-viewer/#toolbars). The first button is the selection tool that allows you to select, resize and move the graphic objects. @@ -39,11 +39,11 @@ For a polyline or polygon, double-click to complete editing. You can also delete Rectangles and ellipses can be drawn in any direction. External control points can be used to rotate and resize the shape. With the single control point on the opposite side, you can only resize the shape. {{% /notice %}} -#### Drawings {{< badge "B" >}} -The drawing buttons allow you to add text and graphic as annotations. These graphics objects do not display measurement values and do not appear in _Selected Measurement_ {{< badge "D" >}}. +#### Drawings {{% badge style="red" %}}B{{% /badge %}} {#drawings} +The drawing buttons allow you to add text and graphic as annotations. These graphics objects do not display measurement values and do not appear in _Selected Measurement_ {{% badge style="red" %}}D{{% /badge %}}. -#### Graphic Options {{< badge "C" >}} +#### Graphic Options {{% badge style="red" %}}C{{% /badge %}} {#graphic-options} * Line color: The default line color when drawing new graphic object. The default value is yellow. The opacity can be changed from the transparency or alpha slider of the different color models in the color picker. * Line width: The default line width. * Draw only once: After drawing a graphic object, the tool is automatically set to the selection mode. If unchecked, the tool remains active for drawing a new graphic. @@ -52,11 +52,11 @@ The drawing buttons allow you to add text and graphic as annotations. These grap * More options: The preferences to change more display options (see [preferences](#preferences)). {{% notice tip %}} -Show/hide all the graphic objects from the [_Display_ panel](../dicom-2d-viewer/#display-hahahugoshortcodes13hbhb) by checking/unchecking the _Drawings_ option. +Show/hide all the graphic objects from the [_Display_ panel](../dicom-2d-viewer/#display) by checking/unchecking the _Drawings_ option. {{% /notice %}} -#### Selected Measurement {{< badge "D" >}} -The selected graphic {{< badge "E" >}} created with a measurement tool is displayed in the table. The table shows the shape properties according to the measurement type (and its units in square brackets if exists). +#### Selected Measurement {{% badge style="red" %}}D{{% /badge %}} {#selected-measurement} +The selected graphic {{% badge style="red" %}}E{{% /badge %}} created with a measurement tool is displayed in the table. The table shows the shape properties according to the measurement type (and its units in square brackets if exists). {{% notice note %}} For polygon, the length, the width and the orientation are calculated with OMBB (Offset Minimum Bounding Box) method which provides a more accurate approximation of the actual length and width based on the bounding box of the polygon. @@ -84,7 +84,7 @@ The table can be exported by copy/paste. Note that the maximum precision values From the menu “File > Preferences > Draw & Measure”: #### Drawings -It lets you change the graphic properties when drawing new graphics, since {{< badge "v4.3.0" >}}. +It lets you change the graphic properties when drawing new graphics, since {{% badge title="Version" %}}4.3.0{{% /badge %}}. * Line color: The default line color. The default value is yellow. The opacity can be changed from the transparency or alpha slider of the different color models in the color picker. * Line width: The default line width. diff --git a/content/tutorials/histogram.en.md b/content/tutorials/histogram.en.md index 2cd2e339..3abbf68a 100755 --- a/content/tutorials/histogram.en.md +++ b/content/tutorials/histogram.en.md @@ -19,7 +19,7 @@ General histogram parameters: * *Channel:* With gray images only the Luminance channel is available. With color images, you can choose one of the following color models: RGB, HSV and HLS. * *Bins:* The bins are the intervals values of pixels. By default, this number is calculated by the max value minus the min value and cannot exceed 512. The value entered must be between 64 and 4096. -* *Statistics:* Show the statistics of the histogram which allow you to analyze and to compare images or image regions in a quantitative way. For the definition of the statistics parameters, see graphic [Pixel Statistics](../draw-measure/#selected-measurement-hahahugoshortcodes11hbhb). +* *Statistics:* Show the statistics of the histogram which allow you to analyze and to compare images or image regions in a quantitative way. For the definition of the statistics parameters, see graphic [Pixel Statistics](../draw-measure/#selected-measurement). {{% notice note %}} The values on the x-axis represent the modality values (e.g. Hounsfield for CT) or the pixel values for some imaging types. If the unit of the pixel value of the modality exists, it is visible at the end of the histogram title. diff --git a/content/tutorials/image-orientation.en.md b/content/tutorials/image-orientation.en.md index f3ce7072..da882a2d 100755 --- a/content/tutorials/image-orientation.en.md +++ b/content/tutorials/image-orientation.en.md @@ -18,7 +18,7 @@ If _Anatomical Orientation Type (0010,2210)_ [attribute](../tags/) is absent or * H: head * F: foot -If _Anatomical Orientation Type (0010,2210)_ [attribute](../tags/) has a value of QUADRUPED (since Weasis {{< badge "v4.1.0" >}}), anatomical direction is designated by: +If _Anatomical Orientation Type (0010,2210)_ [attribute](../tags/) has a value of QUADRUPED (since {{% badge title="Version" %}}4.1.0{{% /badge %}}), anatomical direction is designated by: * LE: Left * RT: Right * D: Dorsal diff --git a/content/tutorials/lut.en.md b/content/tutorials/lut.en.md index 5accc31f..d71d810a 100755 --- a/content/tutorials/lut.en.md +++ b/content/tutorials/lut.en.md @@ -18,10 +18,10 @@ The Modality LUT and the Palette Color LUT are applied automatically when they e {{% /notice %}} ### Windowing and Rendering -The Windowing and Rendering is a panel in the [_Image Tools_ of the DICOM 2D viewer](../dicom-2d-viewer/#image-tools-hahahugoshortcodes25hbhb). Some of the options described below are also available in the Lookup Table toolbar, in the main menu and in contextual menus. +The Windowing and Rendering is a panel in the [_Image Tools_ of the DICOM 2D viewer](../dicom-2d-viewer/#image-tools). Some of the options described below are also available in the Lookup Table toolbar, in the main menu and in contextual menus. -* _Window:_ The range of pixel intensity values. The value can be changed when Window/Level is selected in [mouse actions](../dicom-2d-viewer/#toolbars-hahahugoshortcodes4hbhb) or by using the slider. -* _Level:_ The center of the range defined by Window. The value can be changed when Window/Level is selected in [mouse actions](../dicom-2d-viewer/#toolbars-hahahugoshortcodes4hbhb) or by using the slider. +* _Window:_ The range of pixel intensity values. The value can be changed when Window/Level is selected in [mouse actions](../dicom-2d-viewer/#toolbars) or by using the slider. +* _Level:_ The center of the range defined by Window. The value can be changed when Window/Level is selected in [mouse actions](../dicom-2d-viewer/#toolbars) or by using the slider. * {{< svg "static/tuto/icon/winLevel.svg" >}} _Preset:_ The possible items ordered according to the following list: * Empty item when the Window and level values are changed manually from slider or mouse actions. * Window and level values or VOI LUT data from the DICOM file (ending with _[DICOM]_). The default value is the first _[DICOM]_ item if exists, otherwise _Auto Level [Image]_. @@ -33,7 +33,7 @@ The Windowing and Rendering is a panel in the [_Image Tools_ of the DICOM 2D vie * _Filter:_ The 2D filter is applied to the image before the LUT. The filter can be used to enhance the image quality or to highlight specific structures. The default value is _None_. {{% notice tip %}} -In order to display the LUT on the image, select it from the [_Display_ panel](../dicom-2d-viewer/#display-hahahugoshortcodes13hbhb) on the right. The LUT color are associated to values that correspond to the Modality LUT values (e.g. Hounsfield values for CT) or to the pixel values for some imaging types. +In order to display the LUT on the image, select it from the [_Display_ panel](../dicom-2d-viewer/#display) on the right. The LUT color are associated to values that correspond to the Modality LUT values (e.g. Hounsfield values for CT) or to the pixel values for some imaging types. Another way to see the windowing transformation is to display the [histogram](../histogram). {{% /notice %}} diff --git a/content/tutorials/mip.en.md b/content/tutorials/mip.en.md index 317ce3f0..98d06c61 100755 --- a/content/tutorials/mip.en.md +++ b/content/tutorials/mip.en.md @@ -50,4 +50,4 @@ The _Image Extension_ value represents the number of slices to use for the MIP c #### Rebuild Series It allows you to build a new MIP series according to the MIP options. In this new series the slice position and thickness are modified. -The new MIP series is added to the [DICOM explorer](../dicom-explorer/) and can be [exported](../dicom-export/#dicom-export-hahahugoshortcodes2hbhb). \ No newline at end of file +The new MIP series is added to the [DICOM explorer](../dicom-explorer/) and can be [exported](../dicom-export/#dicom-exporting). \ No newline at end of file diff --git a/content/tutorials/mpr.en.md b/content/tutorials/mpr.en.md index b6694c38..0ff93abc 100755 --- a/content/tutorials/mpr.en.md +++ b/content/tutorials/mpr.en.md @@ -7,7 +7,7 @@ keywords: [ "mpr", "multiplanar reconstruction", "3d cursor", "open source dicom ##
MPR Viewer and 3D cursor (crosshair)
-### Orthogonal multiplanar reconstruction (MPR) {{< svg "static/tuto/icon/mpr.svg" >}} +### Orthogonal multiplanar reconstruction (MPR) {{< svg "static/tuto/icon/mpr.svg" >}} {#mpr} The orthogonal multiplanar reconstruction (MPR) allows you to create, from the original plane (usually axial), images in the two other planes of the Euclidean space. Only planes along the 3 axes (x,y,z) can be displayed, an oblique plane cannot be obtained with this tool. The MPR view inherits most of the [DICOM 2D viewer](../dicom-2d-viewer) properties. It can be opened with {{< svg "static/tuto/icon/mpr.svg" >}} in the toolbar or by right-clicking on the thumbnail in the [DICOM explorer](../dicom-explorer/). @@ -20,7 +20,7 @@ When the tab containing the MPR views is selected, the crosshair tool {{< svg "s By default, zoom and window/level are synchronized between the 3 views. The MRR views can be displayed in different layouts {{< svg "static/tuto/icon/layout.svg" >}}. {{% notice tip %}} -Once the 2 new plans are created, they also appear in the [DICOM explorer](../dicom-explorer/) and can be [exported](../dicom-export/#dicom-export). +Once the 2 new plans are created, they also appear in the [DICOM explorer](../dicom-explorer/) and can be [exported](../dicom-export/#dicom-exporting). {{% /notice %}} ![QuMPR](/tuto/mpr.jpg?classes=shadow) @@ -49,7 +49,7 @@ $dicom:get -w "https://nroduit.github.io/demo-archive/demo/ko.xml" {{< /launch >}} ### Preferences -From the main menu "_File > Preferences > Viewer > MPR_" (Since {{< badge "v4.1.0" >}}): +From the main menu "_File > Preferences > Viewer > MPR_" (Since {{% badge title="Version" %}}4.1.0{{% /badge %}}): * _Auto center axes:_ Allows you to choose a behavior to recenter the cursor in the different views. The position can be returned to the center systematically with the "Always" option (see the image above) or with the 2nd option only when the position is almost no longer visible (the default value). * _Crosshair gap at the center:_ Defines the size of the empty space in the center of the crosshair diff --git a/content/tutorials/tags.en.md b/content/tutorials/tags.en.md index bb489f75..5952eb95 100755 --- a/content/tutorials/tags.en.md +++ b/content/tutorials/tags.en.md @@ -9,8 +9,8 @@ keywords: [ "DICOM attributes", "tags", "search attributes" ] The DICOM attributes {{< svg "static/tuto/icon/metadata.svg" >}} can be displayed either by: -* selecting the "Dicom Information" layout from the layout dropdown button {{< badge "A" >}} -* clicking on the "Dicom Information" button in the toolbar to open a detached window {{< badge "B" >}} +* selecting the "Dicom Information" layout from the layout dropdown button {{% badge style="red" %}}A{{% /badge %}} +* clicking on the "Dicom Information" button in the toolbar to open a detached window {{% badge style="red" %}}B{{% /badge %}} ![Tags](/tuto/dicom-attributes.jpg?classes=shadow&width=700px)
@@ -42,7 +42,7 @@ In the image above, we are looking for the word "date". Here are the steps: 3. Use the arrows to navigate into the highlighted results. The button on the far right allows you to limit the results to positive ones. 4. The navigation shows the current result in highlight mode. -Using {{% icon icon="filter" %}} in the toolbar allows you to filter the results. This can be useful to keep the focus on certain elements when scrolling through a stack of images (only possible with layout {{< badge "A" >}}). +Using {{% icon icon="filter" %}} in the toolbar allows you to filter the results. This can be useful to keep the focus on certain elements when scrolling through a stack of images (only possible with layout {{% badge style="red" %}}A{{% /badge %}}). {{% notice note %}} Some attributes can be into a sequence element (5). Note: the left arrow shows the depth level as a sequence can contain another sequence. diff --git a/content/tutorials/zoom.en.md b/content/tutorials/zoom.en.md index 7f8e0ebd..e7c7b14a 100755 --- a/content/tutorials/zoom.en.md +++ b/content/tutorials/zoom.en.md @@ -21,7 +21,7 @@ The zoom factor can be modified from different locations: The context menu and the toolbar button allows you to select different zoom factor: * Actual pixel size {{< svg "static/tuto/icon/zoomOriginal.svg" >}}: display the image at a 1:1 ratio, where each pixel in the image corresponds to one pixel on the screen -* Real world (see [below](#real-world-zoom-hahahugoshortcodes7hbhb)) {{< svg "static/tuto/icon/zoomRealWorld.svg" >}} +* Real world (see [below](#real-world-zoom)) {{< svg "static/tuto/icon/zoomRealWorld.svg" >}} * Resize to best fit {{< svg "static/tuto/icon/zoomBestFit.svg" >}}: scaling the image to make it fit the view area as closely as possible {{% notice note %}} @@ -36,7 +36,7 @@ Since "Resize to best fit" is the default mode for a view, the image will be cen For selecting directly the zoom action of the mouse left button, enter "z" as a shortcut. {{% /notice %}} -### Real-world zoom {{< svg "static/tuto/icon/zoomRealWorld.svg" >}} +### Real-world zoom {{< svg "static/tuto/icon/zoomRealWorld.svg" >}} {#real-world-zoom} The real-world zoom allows displaying the content of the image at the same size of the real objects. The feature requires calibrating the screen where the image is displayed. From the main menu, open _File > Preferences (Alt + P) > Monitors_ and click on _Spatial calibration_. Then enter a value that matches to the line length or the diagonal length of the screen. @@ -45,7 +45,7 @@ The feature requires calibrating the screen where the image is displayed. From t Several screens can be calibrated. Each one has its own spatial calibration factor. {{% /notice %}} -## Magnifying lens {{< svg "static/tuto/icon/zoomPan.svg" >}} +## Magnifying lens {{< svg "static/tuto/icon/zoomPan.svg" >}} {#magnifying-lens} The magnifying lens can be activated from the toggle button of the zoom toolbar (see the image below). It has several parameters accessible from the context menu. This lens can be used in many situations, for instance: diff --git a/layouts/partials/custom-header.html b/layouts/partials/custom-header.html index faa18651..61eb90c7 100755 --- a/layouts/partials/custom-header.html +++ b/layouts/partials/custom-header.html @@ -1,6 +1,6 @@ diff --git a/layouts/shortcodes/badge.html b/layouts/shortcodes/badgeC.html similarity index 83% rename from layouts/shortcodes/badge.html rename to layouts/shortcodes/badgeC.html index 275175b0..b1ec6995 100755 --- a/layouts/shortcodes/badge.html +++ b/layouts/shortcodes/badgeC.html @@ -1,5 +1,5 @@ {{$text := .Get 0}} -{{ $text }} +{{ $text }} diff --git a/layouts/shortcodes/svg.html b/layouts/shortcodes/svg.html index eeaadfab..4ec11a18 100755 --- a/layouts/shortcodes/svg.html +++ b/layouts/shortcodes/svg.html @@ -1,3 +1,3 @@ -{{$svg := .Get 0}} +{{ $svg := .Get 0 }} {{ $svg | readFile | safeHTML }} diff --git a/static/css/theme-relearn-dark.css b/static/css/theme-relearn-dark.css index 9b14539c..7db9ddb7 100755 --- a/static/css/theme-relearn-dark.css +++ b/static/css/theme-relearn-dark.css @@ -25,7 +25,8 @@ --BROWSER-theme: dark; /* name of the theme for browser scrollbars of the main section */ --MERMAID-theme: dark; /* name of the default Mermaid theme for this variant, can be overridden in config.toml */ - --SWAGGER-theme: dark; /* name of the default Swagger theme for this variant, can be overridden in config.toml */ + --OPENAPI-theme: dark; /* name of the default OpenAPI theme for this variant, can be overridden in config.toml */ + --OPENAPI-CODE-theme: obsidian; /* name of the default OpenAPI code theme for this variant, can be overridden in config.toml */ --MENU-HOME-LINK-color: #404040; /* home button color if configured */ --MENU-HOME-LINK-HOVER-color: #000000; /* hovered home button color if configured */ @@ -46,5 +47,4 @@ --BOX-CAPTION-color: rgba( 240, 240, 240, 1 ); /* text color of colored box titles */ --BOX-BG-color: rgba( 20, 20, 20, 1 ); /* background color of colored boxes */ --BOX-TEXT-color: #e0e0e0; /* text color of colored box content */ - } diff --git a/static/css/theme-relearn-light.css b/static/css/theme-relearn-light.css index b5b938e4..74ae1311 100755 --- a/static/css/theme-relearn-light.css +++ b/static/css/theme-relearn-light.css @@ -26,7 +26,8 @@ --BROWSER-theme: light; /* name of the theme for browser scrollbars of the main section */ --MERMAID-theme: default; /* name of the default Mermaid theme for this variant, can be overridden in config.toml */ - --SWAGGER-theme: light; /* name of the default Swagger theme for this variant, can be overridden in config.toml */ + --OPENAPI-theme: light; /* name of the default OpenAPI theme for this variant, can be overridden in config.toml */ + --OPENAPI-CODE-theme: obsidian; /* name of the default OpenAPI code theme for this variant, can be overridden in config.toml */ --MENU-HOME-LINK-color: #404040; /* home button color if configured */ --MENU-HOME-LINK-HOVER-color: #000000; /* hovered home button color if configured */ diff --git a/static/css/variant-internal.css b/static/css/variant-internal.css new file mode 100644 index 00000000..e43b3b37 --- /dev/null +++ b/static/css/variant-internal.css @@ -0,0 +1,106 @@ +:root { + /* initially use section background to avoid flickering on load when a non default variant is active; + this is only possible because every color variant defines this variable, otherwise we would have been lost */ + --INTERNAL-PRIMARY-color: var(--PRIMARY-color, var(--MENU-HEADER-BG-color, rgba( 0, 0, 0, 0 ))); /* not --INTERNAL-MENU-HEADER-BG-color */ + --INTERNAL-SECONDARY-color: var(--SECONDARY-color, var(--MAIN-LINK-color, rgba( 72, 106, 201, 1 ))); /* not --INTERNAL-MAIN-LINK-color */ + --INTERNAL-ACCENT-color: var(--ACCENT-color, rgba( 255, 255, 0, 1 )); + + --INTERNAL-MAIN-LINK-color: var(--MAIN-LINK-color, var(--SECONDARY-color, rgba( 72, 106, 201, 1 ))); /* not --INTERNAL-SECONDARY-color */ + --INTERNAL-MAIN-LINK-HOVER-color: var(--MAIN-LINK-HOVER-color, var(--INTERNAL-MAIN-LINK-color)); + --INTERNAL-MAIN-BG-color: var(--MAIN-BG-color, rgba( 255, 255, 255, 1 )); + + --INTERNAL-MAIN-TEXT-color: var(--MAIN-TEXT-color, rgba( 16, 16, 16, 1 )); + --INTERNAL-MAIN-TITLES-TEXT-color: var(--MAIN-TITLES-TEXT-color, var(--INTERNAL-MAIN-TEXT-color)); + + --INTERNAL-MAIN-TITLES-H1-color: var(--MAIN-TITLES-H1-color, var(--INTERNAL-MAIN-TEXT-color)); + --INTERNAL-MAIN-TITLES-H2-color: var(--MAIN-TITLES-H2-color, var(--INTERNAL-MAIN-TITLES-TEXT-color)); + --INTERNAL-MAIN-TITLES-H3-color: var(--MAIN-TITLES-H3-color, var(--INTERNAL-MAIN-TITLES-H2-color)); + --INTERNAL-MAIN-TITLES-H4-color: var(--MAIN-TITLES-H4-color, var(--INTERNAL-MAIN-TITLES-H3-color)); + --INTERNAL-MAIN-TITLES-H5-color: var(--MAIN-TITLES-H5-color, var(--INTERNAL-MAIN-TITLES-H4-color)); + --INTERNAL-MAIN-TITLES-H6-color: var(--MAIN-TITLES-H6-color, var(--INTERNAL-MAIN-TITLES-H5-color)); + + --INTERNAL-MAIN-font: var(--MAIN-font, "Work Sans", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif); + --INTERNAL-MAIN-TITLES-TEXT-font: var(--MAIN-TITLES-TEXT-font, var(--INTERNAL-MAIN-font)); + + --INTERNAL-MAIN-TITLES-H1-font: var(--MAIN-TITLES-H1-font, var(--INTERNAL-MAIN-font)); + --INTERNAL-MAIN-TITLES-H2-font: var(--MAIN-TITLES-H2-font, var(--INTERNAL-MAIN-TITLES-TEXT-font)); + --INTERNAL-MAIN-TITLES-H3-font: var(--MAIN-TITLES-H3-font, var(--INTERNAL-MAIN-TITLES-H2-font)); + --INTERNAL-MAIN-TITLES-H4-font: var(--MAIN-TITLES-H4-font, var(--INTERNAL-MAIN-TITLES-H3-font)); + --INTERNAL-MAIN-TITLES-H5-font: var(--MAIN-TITLES-H5-font, var(--INTERNAL-MAIN-TITLES-H4-font)); + --INTERNAL-MAIN-TITLES-H6-font: var(--MAIN-TITLES-H6-font, var(--INTERNAL-MAIN-TITLES-H5-font)); + + --INTERNAL-CODE-BLOCK-color: var(--CODE-BLOCK-color, var(--MAIN-CODE-color, rgba( 0, 0, 0, 1 ))); + --INTERNAL-CODE-BLOCK-BG-color: var(--CODE-BLOCK-BG-color, var(--MAIN-CODE-BG-color, rgba( 248, 248, 248, 1 ))); + --INTERNAL-CODE-BLOCK-BORDER-color: var(--CODE-BLOCK-BORDER-color, var(--MAIN-CODE-BG-color, var(--INTERNAL-CODE-BLOCK-BG-color))); + + --INTERNAL-CODE-INLINE-color: var(--CODE-INLINE-color, rgba( 94, 94, 94, 1 )); + --INTERNAL-CODE-INLINE-BG-color: var(--CODE-INLINE-BG-color, rgba( 255, 250, 233, 1 )); + --INTERNAL-CODE-INLINE-BORDER-color: var(--CODE-INLINE-BORDER-color, rgba( 251, 240, 203, 1 )); + + --INTERNAL-CODE-font: var(--CODE-font, "Consolas", menlo, monospace); + + --INTERNAL-BROWSER-theme: var(--BROWSER-theme, light); + --INTERNAL-MERMAID-theme: var(--CONFIG-MERMAID-theme, var(--MERMAID-theme, var(--INTERNAL-PRINT-MERMAID-theme))); + --INTERNAL-OPENAPI-theme: var(--CONFIG-OPENAPI-theme, var(--OPENAPI-theme, var(--SWAGGER-theme, var(--INTERNAL-PRINT-OPENAPI-theme)))); + --INTERNAL-OPENAPI-CODE-theme: var(--CONFIG-OPENAPI-CODE-theme, var(--OPENAPI-CODE-theme, --INTERNAL-PRINT-OPENAPI-CODE-theme)); + + --INTERNAL-TAG-BG-color: var(--TAG-BG-color, var(--INTERNAL-PRIMARY-color)); + + --INTERNAL-MENU-HEADER-BG-color: var(--MENU-HEADER-BG-color, var(--PRIMARY-color, rgba( 0, 0, 0, 0 ))); /* not --INTERNAL-PRIMARY-color */ + --INTERNAL-MENU-HEADER-BORDER-color: var(--MENU-HEADER-BORDER-color, var(--INTERNAL-MENU-HEADER-BG-color)); + + --INTERNAL-MENU-HOME-LINK-color: var(--MENU-HOME-LINK-color, rgba( 50, 50, 50, 1 )); + --INTERNAL-MENU-HOME-LINK-HOVER-color: var(--MENU-HOME-LINK-HOVER-color, var(--MENU-HOME-LINK-HOVERED-color, rgba( 128, 128, 128, 1 ))); + + --INTERNAL-MENU-SEARCH-color: var(--MENU-SEARCH-color, var(--MENU-SEARCH-BOX-ICONS-color, rgba( 224, 224, 224, 1 ))); + --INTERNAL-MENU-SEARCH-BG-color: var(--MENU-SEARCH-BG-color, rgba( 50, 50, 50, 1 )); + --INTERNAL-MENU-SEARCH-BORDER-color: var(--MENU-SEARCH-BORDER-color, var(--MENU-SEARCH-BOX-color, var(--INTERNAL-MENU-SEARCH-BG-color))); + + --INTERNAL-MENU-SECTIONS-ACTIVE-BG-color: var(--MENU-SECTIONS-ACTIVE-BG-color, rgba( 0, 0, 0, .166 )); + --INTERNAL-MENU-SECTIONS-BG-color: var(--MENU-SECTIONS-BG-color, rgba( 40, 40, 40, 1 )); + --INTERNAL-MENU-SECTIONS-LINK-color: var(--MENU-SECTIONS-LINK-color, rgba( 186, 186, 186, 1 )); + --INTERNAL-MENU-SECTIONS-LINK-HOVER-color: var(--MENU-SECTIONS-LINK-HOVER-color, var(--INTERNAL-MENU-SECTIONS-LINK-color)); + --INTERNAL-MENU-SECTION-ACTIVE-CATEGORY-color: var(--MENU-SECTION-ACTIVE-CATEGORY-color, rgba( 68, 68, 68, 1 )); + --INTERNAL-MENU-SECTION-ACTIVE-CATEGORY-BG-color: var(--MENU-SECTION-ACTIVE-CATEGORY-BG-color, var(--INTERNAL-MAIN-BG-color)); + + --INTERNAL-MENU-VISITED-color: var(--MENU-VISITED-color, var(--INTERNAL-SECONDARY-color)); + --INTERNAL-MENU-SECTION-HR-color: var(--MENU-SECTION-HR-color, rgba( 96, 96, 96, 1 )); + + --INTERNAL-BOX-CAPTION-color: var(--BOX-CAPTION-color, rgba( 255, 255, 255, 1 )); + --INTERNAL-BOX-BG-color: var(--BOX-BG-color, rgba( 255, 255, 255, .833 )); + --INTERNAL-BOX-TEXT-color: var(--BOX-TEXT-color, var(--INTERNAL-MAIN-TEXT-color)); + + --INTERNAL-BOX-BLUE-color: var(--BOX-BLUE-color, rgba(48, 117, 229, 0.75)); + --INTERNAL-BOX-GREEN-color: var(--BOX-GREEN-color, rgba(42, 178, 24, 0.75)); + --INTERNAL-BOX-GREY-color: var(--BOX-GREY-color, rgba(128, 128, 128, 0.75)); + --INTERNAL-BOX-ORANGE-color: var(--BOX-ORANGE-color, rgba(237, 153, 9, 0.75)); + --INTERNAL-BOX-RED-color: var(--BOX-RED-color, rgba(224, 62, 62, 0.75)); + + --INTERNAL-BOX-INFO-color: var(--BOX-INFO-color, var(--INTERNAL-BOX-BLUE-color)); + --INTERNAL-BOX-NEUTRAL-color: var(--BOX-NEUTRAL-color, var(--INTERNAL-BOX-GREY-color)); + --INTERNAL-BOX-NOTE-color: var(--BOX-NOTE-color, var(--INTERNAL-BOX-ORANGE-color)); + --INTERNAL-BOX-TIP-color: var(--BOX-TIP-color, var(--INTERNAL-BOX-GREEN-color)); + --INTERNAL-BOX-WARNING-color: var(--BOX-WARNING-color, var(--INTERNAL-BOX-RED-color)); + + --INTERNAL-BOX-BLUE-TEXT-color: var(--BOX-BLUE-TEXT-color, var(--INTERNAL-BOX-TEXT-color)); + --INTERNAL-BOX-GREEN-TEXT-color: var(--BOX-GREEN-TEXT-color, var(--INTERNAL-BOX-TEXT-color)); + --INTERNAL-BOX-GREY-TEXT-color: var(--BOX-GREY-TEXT-color, var(--INTERNAL-BOX-TEXT-color)); + --INTERNAL-BOX-ORANGE-TEXT-color: var(--BOX-ORANGE-TEXT-color, var(--INTERNAL-BOX-TEXT-color)); + --INTERNAL-BOX-RED-TEXT-color: var(--BOX-RED-TEXT-color, var(--INTERNAL-BOX-TEXT-color)); + + --INTERNAL-BOX-INFO-TEXT-color: var(--BOX-INFO-TEXT-color, var(--INTERNAL-BOX-BLUE-TEXT-color)); + --INTERNAL-BOX-NEUTRAL-TEXT-color: var(--BOX-NEUTRAL-TEXT-color, var(--INTERNAL-BOX-GREY-TEXT-color)); + --INTERNAL-BOX-NOTE-TEXT-color: var(--BOX-NOTE-TEXT-color, var(--INTERNAL-BOX-ORANGE-TEXT-color)); + --INTERNAL-BOX-TIP-TEXT-color: var(--BOX-TIP-TEXT-color, var(--INTERNAL-BOX-GREEN-TEXT-color)); + --INTERNAL-BOX-WARNING-TEXT-color: var(--BOX-WARNING-TEXT-color, var(--INTERNAL-BOX-RED-TEXT-color)); + + /* print style, values taken from relearn-light as it is used as a default print style */ + --INTERNAL-PRINT-MAIN-BG-color: var(--PRINT-MAIN-BG-color, rgba( 255, 255, 255, 1 )); + --INTERNAL-PRINT-CODE-font: var(--PRINT-CODE-font, "Consolas", menlo, monospace); + --INTERNAL-PRINT-TAG-BG-color: var(--PRINT-TAG-BG-color, rgba( 125, 201, 3, 1 )); + --INTERNAL-PRINT-MAIN-font: var(--PRINT-MAIN-font, "Work Sans", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif); + --INTERNAL-PRINT-MAIN-TEXT-color: var(--PRINT-MAIN-TEXT-color, rgba( 16, 16, 16, 1 )); + --INTERNAL-PRINT-MERMAID-theme: var(--PRINT-MERMAID-theme, default); + --INTERNAL-PRINT-OPENAPI-theme: var(--PRINT-OPENAPI-theme, var(--PRINT-SWAGGER-theme, light)); + --INTERNAL-PRINT-OPENAPI-CODE-theme: var(--PRINT-OPENAPI-CODE-theme, obsidian); +} diff --git a/static/css/variant.css b/static/css/variant.css index 55e0746f..4ebd9777 100755 --- a/static/css/variant.css +++ b/static/css/variant.css @@ -1,107 +1,4 @@ -:root { - /* initially use section background to avoid flickering on load when a non default variant is active; - this is only possible because every color variant defines this variable, otherwise we would have been lost */ - --INTERNAL-PRIMARY-color: var(--PRIMARY-color, var(--MENU-HEADER-BG-color, rgba( 0, 0, 0, 0 ))); /* not --INTERNAL-MENU-HEADER-BG-color */ - --INTERNAL-SECONDARY-color: var(--SECONDARY-color, var(--MAIN-LINK-color, #486ac9)); /* not --INTERNAL-MAIN-LINK-color */ - --INTERNAL-ACCENT-color: var(--ACCENT-color, #ffff00); - - --INTERNAL-MAIN-LINK-color: var(--MAIN-LINK-color, var(--SECONDARY-color, #486ac9)); /* not --INTERNAL-SECONDARY-color */ - --INTERNAL-MAIN-LINK-HOVER-color: var(--MAIN-LINK-HOVER-color, var(--INTERNAL-MAIN-LINK-color)); - --INTERNAL-MAIN-BG-color: var(--MAIN-BG-color, #ffffff); - - --INTERNAL-MAIN-TEXT-color: var(--MAIN-TEXT-color, #101010); - --INTERNAL-MAIN-TITLES-TEXT-color: var(--MAIN-TITLES-TEXT-color, var(--INTERNAL-MAIN-TEXT-color)); - - --INTERNAL-MAIN-TITLES-H1-color: var(--MAIN-TITLES-H1-color, var(--INTERNAL-MAIN-TEXT-color)); - --INTERNAL-MAIN-TITLES-H2-color: var(--MAIN-TITLES-H2-color, var(--INTERNAL-MAIN-TITLES-TEXT-color)); - --INTERNAL-MAIN-TITLES-H3-color: var(--MAIN-TITLES-H3-color, var(--INTERNAL-MAIN-TITLES-H2-color)); - --INTERNAL-MAIN-TITLES-H4-color: var(--MAIN-TITLES-H4-color, var(--INTERNAL-MAIN-TITLES-H3-color)); - --INTERNAL-MAIN-TITLES-H5-color: var(--MAIN-TITLES-H5-color, var(--INTERNAL-MAIN-TITLES-H4-color)); - --INTERNAL-MAIN-TITLES-H6-color: var(--MAIN-TITLES-H6-color, var(--INTERNAL-MAIN-TITLES-H5-color)); - - --INTERNAL-MAIN-font: var(--MAIN-font, "Work Sans", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif); - --INTERNAL-MAIN-TITLES-TEXT-font: var(--MAIN-TITLES-TEXT-font, var(--INTERNAL-MAIN-font)); - - --INTERNAL-MAIN-TITLES-H1-font: var(--MAIN-TITLES-H1-font, var(--INTERNAL-MAIN-font)); - --INTERNAL-MAIN-TITLES-H2-font: var(--MAIN-TITLES-H2-font, var(--INTERNAL-MAIN-TITLES-TEXT-font)); - --INTERNAL-MAIN-TITLES-H3-font: var(--MAIN-TITLES-H3-font, var(--INTERNAL-MAIN-TITLES-H2-font)); - --INTERNAL-MAIN-TITLES-H4-font: var(--MAIN-TITLES-H4-font, var(--INTERNAL-MAIN-TITLES-H3-font)); - --INTERNAL-MAIN-TITLES-H5-font: var(--MAIN-TITLES-H5-font, var(--INTERNAL-MAIN-TITLES-H4-font)); - --INTERNAL-MAIN-TITLES-H6-font: var(--MAIN-TITLES-H6-font, var(--INTERNAL-MAIN-TITLES-H5-font)); - - --INTERNAL-CODE-BLOCK-color: var(--CODE-BLOCK-color, var(--MAIN-CODE-color, #000000)); - --INTERNAL-CODE-BLOCK-BG-color: var(--CODE-BLOCK-BG-color, var(--MAIN-CODE-BG-color, #f8f8f8)); - --INTERNAL-CODE-BLOCK-BORDER-color: var(--CODE-BLOCK-BORDER-color, var(--MAIN-CODE-BG-color, var(--INTERNAL-CODE-BLOCK-BG-color))); - - --INTERNAL-CODE-INLINE-color: var(--CODE-INLINE-color, #5e5e5e); - --INTERNAL-CODE-INLINE-BG-color: var(--CODE-INLINE-BG-color, #fffae9); - --INTERNAL-CODE-INLINE-BORDER-color: var(--CODE-INLINE-BORDER-color, #fbf0cb); - - --INTERNAL-CODE-font: var(--CODE-font, "Consolas", menlo, monospace); - - --INTERNAL-BROWSER-theme: var(--BROWSER-theme, light); - --INTERNAL-MERMAID-theme: var(--CONFIG-MERMAID-theme, var(--MERMAID-theme, var(--INTERNAL-PRINT-MERMAID-theme))); - --INTERNAL-SWAGGER-theme: var(--CONFIG-SWAGGER-theme, var(--SWAGGER-theme, var(--INTERNAL-PRINT-SWAGGER-theme))); - - --INTERNAL-TAG-BG-color: var(--TAG-BG-color, var(--INTERNAL-PRIMARY-color)); - - --INTERNAL-MENU-HEADER-BG-color: var(--MENU-HEADER-BG-color, var(--PRIMARY-color, rgba( 0, 0, 0, 0 ))); /* not --INTERNAL-PRIMARY-color */ - --INTERNAL-MENU-HEADER-BORDER-color: var(--MENU-HEADER-BORDER-color, var(--INTERNAL-MENU-HEADER-BG-color)); - - --INTERNAL-MENU-HOME-LINK-color: var(--MENU-HOME-LINK-color, #323232); - --INTERNAL-MENU-HOME-LINK-HOVER-color: var(--MENU-HOME-LINK-HOVER-color, var(--MENU-HOME-LINK-HOVERED-color, #808080)); - - --INTERNAL-MENU-SEARCH-color: var(--MENU-SEARCH-color, var(--MENU-SEARCH-BOX-ICONS-color, #e0e0e0)); - --INTERNAL-MENU-SEARCH-BG-color: var(--MENU-SEARCH-BG-color, #323232); - --INTERNAL-MENU-SEARCH-BORDER-color: var(--MENU-SEARCH-BORDER-color, var(--MENU-SEARCH-BOX-color, var(--INTERNAL-MENU-SEARCH-BG-color))); - - --INTERNAL-MENU-SECTIONS-ACTIVE-BG-color: var(--MENU-SECTIONS-ACTIVE-BG-color, rgba( 0, 0, 0, .166 )); - --INTERNAL-MENU-SECTIONS-BG-color: var(--MENU-SECTIONS-BG-color, #282828); - --INTERNAL-MENU-SECTIONS-LINK-color: var(--MENU-SECTIONS-LINK-color, #bababa); - --INTERNAL-MENU-SECTIONS-LINK-HOVER-color: var(--MENU-SECTIONS-LINK-HOVER-color, var(--INTERNAL-MENU-SECTIONS-LINK-color)); - --INTERNAL-MENU-SECTION-ACTIVE-CATEGORY-color: var(--MENU-SECTION-ACTIVE-CATEGORY-color, #444444); - --INTERNAL-MENU-SECTION-ACTIVE-CATEGORY-BG-color: var(--MENU-SECTION-ACTIVE-CATEGORY-BG-color, var(--INTERNAL-MAIN-BG-color)); - - --INTERNAL-MENU-VISITED-color: var(--MENU-VISITED-color, var(--INTERNAL-SECONDARY-color)); - --INTERNAL-MENU-SECTION-HR-color: var(--MENU-SECTION-HR-color, #606060); - - --INTERNAL-BOX-CAPTION-color: var(--BOX-CAPTION-color, rgba( 255, 255, 255, 1 )); - --INTERNAL-BOX-BG-color: var(--BOX-BG-color, rgba( 255, 255, 255, .833 )); - --INTERNAL-BOX-TEXT-color: var(--BOX-TEXT-color, var(--INTERNAL-MAIN-TEXT-color)); - - --INTERNAL-BOX-BLUE-color: var(--BOX-BLUE-color, rgba(48, 117, 229, 0.75)); - --INTERNAL-BOX-GREEN-color: var(--BOX-GREEN-color, rgba(42, 178, 24, 0.75)); - --INTERNAL-BOX-GREY-color: var(--BOX-GREY-color, rgba(128, 128, 128, 0.75)); - --INTERNAL-BOX-ORANGE-color: var(--BOX-ORANGE-color, rgba(237, 153, 9, 0.75)); - --INTERNAL-BOX-RED-color: var(--BOX-RED-color, rgba(224, 62, 62, 0.75)); - - --INTERNAL-BOX-INFO-color: var(--BOX-INFO-color, var(--INTERNAL-BOX-BLUE-color)); - --INTERNAL-BOX-NEUTRAL-color: var(--BOX-NEUTRAL-color, var(--INTERNAL-BOX-GREY-color)); - --INTERNAL-BOX-NOTE-color: var(--BOX-NOTE-color, var(--INTERNAL-BOX-ORANGE-color)); - --INTERNAL-BOX-TIP-color: var(--BOX-TIP-color, var(--INTERNAL-BOX-GREEN-color)); - --INTERNAL-BOX-WARNING-color: var(--BOX-WARNING-color, var(--INTERNAL-BOX-RED-color)); - - --INTERNAL-BOX-BLUE-TEXT-color: var(--BOX-BLUE-TEXT-color, var(--INTERNAL-BOX-TEXT-color)); - --INTERNAL-BOX-GREEN-TEXT-color: var(--BOX-GREEN-TEXT-color, var(--INTERNAL-BOX-TEXT-color)); - --INTERNAL-BOX-GREY-TEXT-color: var(--BOX-GREY-TEXT-color, var(--INTERNAL-BOX-TEXT-color)); - --INTERNAL-BOX-ORANGE-TEXT-color: var(--BOX-ORANGE-TEXT-color, var(--INTERNAL-BOX-TEXT-color)); - --INTERNAL-BOX-RED-TEXT-color: var(--BOX-RED-TEXT-color, var(--INTERNAL-BOX-TEXT-color)); - - --INTERNAL-BOX-INFO-TEXT-color: var(--BOX-INFO-TEXT-color, var(--INTERNAL-BOX-BLUE-TEXT-color)); - --INTERNAL-BOX-NEUTRAL-TEXT-color: var(--BOX-NEUTRAL-TEXT-color, var(--INTERNAL-BOX-GREY-TEXT-color)); - --INTERNAL-BOX-NOTE-TEXT-color: var(--BOX-NOTE-TEXT-color, var(--INTERNAL-BOX-ORANGE-TEXT-color)); - --INTERNAL-BOX-TIP-TEXT-color: var(--BOX-TIP-TEXT-color, var(--INTERNAL-BOX-GREEN-TEXT-color)); - --INTERNAL-BOX-WARNING-TEXT-color: var(--BOX-WARNING-TEXT-color, var(--INTERNAL-BOX-RED-TEXT-color)); - - /* print style, values taken from relearn-light as it is used as a default print style */ - --INTERNAL-PRINT-MAIN-BG-color: var(--PRINT-MAIN-BG-color, #ffffff); - --INTERNAL-PRINT-CODE-font: var(--PRINT-CODE-font, "Consolas", menlo, monospace); - --INTERNAL-PRINT-TAG-BG-color: var(--PRINT-TAG-BG-color, #7dc903); - --INTERNAL-PRINT-MAIN-font: var(--PRINT-MAIN-font, "Work Sans", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif); - --INTERNAL-PRINT-MAIN-TEXT-color: var(--PRINT-MAIN-TEXT-color, #101010); - --INTERNAL-PRINT-MERMAID-theme: var(--PRINT-MERMAID-theme, default); - --INTERNAL-PRINT-SWAGGER-theme: var(--PRINT-SWAGGER-theme, light); -} +@import "variant-internal.css"; html { color-scheme: only var(--INTERNAL-BROWSER-theme); @@ -163,7 +60,7 @@ a:hover, } #sidebar select:hover, -#sidebar .collapsible-menu label:hover, +#sidebar .collapsible-menu li:not(.active) > label:hover, #sidebar .select-container:hover, #sidebar a:hover, #sidebar button:hover { @@ -189,7 +86,7 @@ a:hover, } #sidebar .nav-title { - color: var(--INTERNAL-MENU-SECTIONS-LINK-HOVER-color); + color: var(--INTERNAL-MENU-SECTIONS-LINK-color); } #sidebar hr { @@ -236,6 +133,7 @@ h6 { div.box { background-color: var(--VARIABLE-BOX-color); + border-color: var(--VARIABLE-BOX-color); } div.box > .box-label { @@ -307,6 +205,13 @@ div.box > .box-content { --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-RED-TEXT-color); } +.cstyle.code { + --VARIABLE-BOX-color: var(--INTERNAL-CODE-BLOCK-BORDER-color); + --VARIABLE-BOX-CAPTION-color: var(--INTERNAL-CODE-BLOCK-color); + --VARIABLE-BOX-BG-color: var(--INTERNAL-CODE-BLOCK-BG-color); + --VARIABLE-BOX-TEXT-color: var(--INTERNAL-CODE-BLOCK-color); +} + .cstyle.transparent { --VARIABLE-BOX-color: transparent; --VARIABLE-BOX-CAPTION-color: var(--INTERNAL-MAIN-TITLES-TEXT-color); @@ -333,6 +238,11 @@ pre { color: var(--INTERNAL-CODE-BLOCK-color); } +div.highlight > div { + background-color: var(--INTERNAL-CODE-BLOCK-BG-color); + border-color: var(--INTERNAL-CODE-BLOCK-BORDER-color); +} + table { background-color: var(--INTERNAL-MAIN-BG-color); } @@ -362,11 +272,15 @@ table { color: var(--INTERNAL-CODE-INLINE-BG-color); } +div.highlight > div table + .copy-to-clipboard-button, +div.highlight pre + .copy-to-clipboard-button, pre .copy-to-clipboard-button { border-color: var(--INTERNAL-CODE-BLOCK-BORDER-color); color: var(--INTERNAL-MAIN-LINK-color); } +div.highlight > div table + .copy-to-clipboard-button:hover, +div.highlight pre + .copy-to-clipboard-button:hover, pre .copy-to-clipboard-button:hover { background-color: var(--INTERNAL-MAIN-LINK-color); border-color: var(--INTERNAL-MAIN-LINK-color); @@ -471,3 +385,65 @@ pre .copy-to-clipboard-button:hover { .badge.cstyle.transparent{ --VARIABLE-BOX-BG-color: var(--INTERNAL-BOX-BG-color); } + +article ul > li > input[type="checkbox"] { + background-color: var(--INTERNAL-MAIN-BG-color); /* box background */ + color: var(--INTERNAL-MAIN-TEXT-color); +} + +#body .tab-nav-button { + color: var(--INTERNAL-MAIN-TEXT-color); +} + +#body .tab-nav-button.active { + background-color: var(--VARIABLE-BOX-color); + border-bottom-color: var(--VARIABLE-BOX-BG-color); + color: var(--VARIABLE-BOX-TEXT-color); +} + +#body .tab-nav-button.active > *{ + background-color: var(--VARIABLE-BOX-BG-color); +} + +#body .tab-nav-button > * > *{ + border-color: var(--VARIABLE-BOX-color); +} + +#body .tab-content{ + background-color: var(--VARIABLE-BOX-color); + border-color: var(--VARIABLE-BOX-color); +} + +#body .tab-content-text{ + background-color: var(--VARIABLE-BOX-BG-color); + color: var(--VARIABLE-BOX-TEXT-color); +} + +.tab-panel-style.cstyle.initial, +.tab-panel-style.cstyle.default { + --VARIABLE-BOX-BG-color: var(--INTERNAL-MAIN-BG-color); +} + +.tab-panel-style.cstyle.transparent { + --VARIABLE-BOX-color: rgba( 134, 134, 134, .4 ); + --VARIABLE-BOX-BG-color: transparent; +} + +#body .tab-panel-style.cstyle.initial.tab-nav-button.active, +#body .tab-panel-style.cstyle.default.tab-nav-button.active, +#body .tab-panel-style.cstyle.transparent.tab-nav-button.active{ + background-color: var(--VARIABLE-BOX-BG-color); + border-left-color: var(--VARIABLE-BOX-color); + border-right-color: var(--VARIABLE-BOX-color); + border-top-color: var(--VARIABLE-BOX-color); +} + +#body .tab-panel-style.cstyle.code.tab-nav-button:not(.active){ + --VARIABLE-BOX-color: var(--INTERNAL-BOX-NEUTRAL-color); +} + +#body .tab-panel-style.cstyle.initial.tab-content, +#body .tab-panel-style.cstyle.default.tab-content, +#body .tab-panel-style.cstyle.transparent.tab-content{ + background-color: var(--VARIABLE-BOX-BG-color); +}