Theme settings in Arrigo

NOTE: There is an issue with old theme files (prior to 16 March, 2022), read more here.

All theme settings resides in the theme file, in frontend folder. Prepare with the following steps:

In Arrigo Local the theme folder should be overridden in Program Files\Arrigo\Arrigo Local\Frontend\theme. Create that folder.
Copy the theme files here and put them in the newly created folder above.

You can now override the theme settings.

Remember to back up your theme settings, including the images in the image folder. Easiest way is to create a backupfolder with two folders inside, one for images, and one for theme folder. It is also advised to run your theme files in an JSON validator (e.g. JSONLint)

Arrigo BMS legacy theme from EXOscada.

We now support legacy theming in views!

By inserting //LegacyTheme as the first row in the OnOpen-attribute of the View in ViewDesigner, Arrigo theming will be ignored when opening the view, letting font families and sizes be determined from the Shared/theme/Standard.cwvt.json-file instead.

Imagine you want to change the images on the login page. You can add or modify the left large image, the top centered images and an image at the bottom right.

Make sure your images are located in the "images" folder (Program Files\Arrigo\Arrigo Local\Frontend\images). Normal graphics formats are supported such as jpg, png, svg.

Change theme.json in theme folder as follows:

  "login": {
    "layout": {
      "name": "splash",
      "left_splash_image": "/arrigo/images/my_new_left_splash_image.png",
      "top_center_image": "/arrigo/images/a_logo_or_something_else.png",
      "bottom_right_image": "/arrigo/images/yet_another_logo_or_image.png"

Make sure the name field is set to "splash" and that the path to the images are included.

Save the file. Reload Arrigo with Ctrl+F5 to fetch the new theme settings.

Change logo in header

Put your new myLogo.png in images folder.

If you need to adjust the height of the header, simply increase the numbers in the height section of the theme.json. small is mobile settings, and normal is desktop.

Change theme.json in theme folder to set the new logo:

 "header": {
    "images": {
      "logo": "myLogo.png"
    },
    "height": {
      "normal": "70px",
      "small": "55px"
    }
  },

Change theme colors

Edit the colors.light.json and colors.dark.json to match your logo and visual style of your project.

Additonal configuration settings (settings.json)

A couple of additional custom styling implementations has been made into Arrigo.

Configuration Settings Explanation

Property	Default Value	Description
`autoRedirectToLastFolderVisitedTimeout`	`01:30:00`	Timeout that takes the user back to the last visited folder and link icon when logging in or visiting `/#/`. The timeout value is specified in the format `HH:MM:SS` with a fallback value of `01:30:00`.
`defaultLanguage`	`en`	The default language to be used if a user visits Arrigo for the first time. Available options are: `en`, `fr`, `nl`, `fi`, `sv`, `dk`, `no`
`forceFirstFolder`	`No`	By changing this setting to `Yes` the user will be forced to navigate to the first node in the tree instead of the root node upon login and page loads.
`fullScaleForViews`	`{ "showSetting": "Yes", "defaultValue": "No" }`	This setting controls if BMS views will be shown in full scale. `showSetting` controls if the setting will be visible for the user or not (`Yes`/`No`). `defaultValue` controls the default value (`Yes`/`No`). If `showSetting` is set to `` the default value will be used.
`hidePanelModeDivider`	`No`	By changing this setting to `Yes` the divider line between the top header and the navigation part of the panel mode in Arrigo will be hidden.
`includeAnimationViewsInTheme`	`No`	If set to `Yes`, the theme used in Animation views to be fetched from S00004001 instead of S00004000.
`maintenanceText`	`Empty string`	Overrides current, translated, maintenance text when Arrigo is not available due to restart or shutdown.
`minimizeContainerPaddingForViewsOnMobile`	`No`	By changin this to `Yes` the Animation views from ExoScada to be rendered without any side padding at all in Arrigo, freeing up a couple of pixels of width.
`notifications`	`{"showSetting": "Yes", "defaultValue": "Yes"}`	This setting governs the behavior of the notification system within the application. When `defaultValue` is set to `Yes`, the application will actively display notifications to users, providing timely updates, alerts, and important information. `showSetting` controls if the setting will be visible for the user or not (`Yes`/`No`). `defaultValue` controls the default value (`Yes`/`No`). If `showSetting` is set to `No` the default value will be used.
`panelMode`	`{ "showSetting": "Yes", "defaultValue": "No" }`	This setting controls the use of Panel mode navigation at the top of the page (instead of the original navigation in Arrigo). `showSetting` controls if the setting will be visible for the user or not (`Yes`/`No`). `defaultValue` controls the default value (`Yes`/`No`). If `showSetting` is set to `No` the default value will be used.
`reversedAlarmsTitle`	`{ "showSetting": "Yes", "defaultValue": "Yes" }`	Configure this setting to display the alarm titles in reversed order. `showSetting` controls if the setting will be visible for the user or not (`Yes`/`No`). `defaultValue` controls the default value (`Yes`/`No`). If `showSetting` is set to `No` the default value will be used.
`showChartSignalSettings`	`Yes`	Controls if the settings button for chart signals should be visible or not. If set to `No`, the button will be hidden.
`showChartSignalTitleInCollapsedWidget`	`No`	Replaces the date with signal title in all chart widgets if set to `Yes`.
`showFavorites`	`Yes`	By changing this setting `No`, the favorites view will be hidden.
`showHelp`	`Yes`	Changing this to `No` will hide the help icon (question mark) in the header.
`showLargeAlarmButtonsInMultiselect`	`No`	If set to `Yes`, the buttons for acknowledging alarms will become larger.
`showNavigation`	`Yes`	If changed to `No` the navigation icon will be hidden.
`showNoticeCenter`	`Yes`	By setting this to `No`, the notification log will be disabled.
`showRelativeTime`	`{ "showSetting": "Yes", "defaultValue": "Yes" }`	This setting controls if the timestamps should be shown in a relative format, such as "3 days ago," enhancing the user experience with more contextual time information. `showSetting` controls if the setting will be visible for the user or not (`Yes`/`No`). `defaultValue` controls the default value (`Yes`/`No`). If `showSetting` is set to `No` the default value will be used.
`showRgsvFilters`	`Yes`	By setting this to `No` the filter buttons for reports will be hidden.
`showSearch`	`Yes`	By setting this to `No` the search icon will be hidden.
`signalTolerance`	`"signalTolerance": { "default": 0.3, "mg/L": 0.001, "°C": 0.5, "ppm": 0.7 }`	This setting controls if the signalTolerance should be overridden.