The Utilities Menu provides access to…
In truth, the first three options actually load the same page which also includes the latest errors. These are all bookmarked so, on small screens, you will jump down to the selected section.
The Latest Errors link will load it's own page just focussing on the errors generated by your system.
You can use this panel to copy / upload the data files to your public site and your local version if you have enabled the local copy options in the settings section of the site. The statuspanel will inform you when the process is started but you will have to check what has been completed as indicated on the panel.
As it says on the panel - use if you have edited the dayfile outside of CumulusMX.
Will display the latest errors - the panel will expand up to a maximum of 20 lines but will load the same number of errors as the default interface. You can, of course, scroll down the list to display any additional errors in the log. You have options to copy the list to your clipboard and to clear it.
If you use this feature of CumulusMX, then you can see any failed commands in the queue and edit / delete any that fail. This works exactly as per the default interface.
As per most pages in the AI, you can alter the order of the panels by editing the utilities.html page and simple change the style 'order:1;' to any numeric value that suites your preferences. Remember, panels are displayed in numerical order of that style setting.
This page is provided to enable you to easily change the style of the AI. The options available are: Page Geometry, Theme, The Seagull and the Alarm LEDs.
Under this option you can alter the gap between the Banner / page content / Footer. You can also make the Banner and/or the footer scroll with the page - they are static by default.
Gaps can be set at anything from 1px upwards with the units used, either pixels, font height or percentage of the screen height. Using the latter two will always adjust the gaps in proportion whereas using pixels is independent of your viewing device.
As ever, I provide a number of light and dark themes1). These are NOT compatible with earlier versions of the AI but are compatible with my latest Default Website templates. They use 9 colour variations based on a single theme colour. I believe these provide a better contrast between the variations used. Please refer to the Themes page for the default website for more information.
The currently selected theme colours are displayed in panel 4 on this page. This panel also shows the basic theme classes that can be applied and the css variables that can be used directly in html elements on a page.
| Variables | What it does |
|---|---|
| –gradient-down | Creates a linear gradient downwards from –color7 to –color6 |
| –gradient-up | Creates a linear gradient upwards from –color6 to –color7 |
| –gradient-left | Creates a linear gradient left to right using the colours above |
| –gradient-right | Creates a linear gradient right to left using the above colours |
| –gradientBar | Creates the highlight used for highlighting data rows |
| –shadow | Creates a basic shadow |
| –shadows | Creates an advanced shadow |
| Class | What it does |
|---|---|
| .ax-theme1 | Sets text to –color9 and background to –color1 |
| .ax-theme2 | Sets text to –color9 and background to –color2 |
| .ax-theme3 | Sets text to –color9 and background to –color3 |
| .ax-theme4 | Sets text to –color92) and background to –color4 |
| .ax-theme5 | Sets text to –color93) and background to –color5 |
| .ax-theme6 | Sets text to –color14) and background to –color6 |
| .ax-theme7 | Sets text to –color1 and background to –color7 |
| .ax-theme8 | Sets text to –color1 and background to –color8 |
| .ax-theme9 | Sets text to –color1 and background to –color9 |
These all use the same colours as their corresponding ax-themeX but are only applied on hovering over the element.
.ax-theme1-hvr, .ax-theme2-hvr, .ax-theme3-hvr, .ax-theme4-hvr, .ax-theme5-hvr, .ax-theme6-hvr, .ax-theme7-hvr, .ax-theme8-hvr and .ax-theme9-hvr
These just change the colour of foreground elements
.ax-theme1-txt, .ax-theme2-txt, .ax-theme3-txt, .ax-theme4-txt, .ax-theme5-txt, .ax-theme6-txt, .ax-theme7-txt, .ax-theme8-txt, .ax-theme9-txt.
.ax-theme1-txt-hvr, .ax-theme2-txt-hvr, .ax-theme3-txt-hvr, .ax-theme4-txt-hvr, .ax-theme5-txt-hvr, .ax-theme6-txt-hvr, .ax-theme7-txt-hvr, .ax-theme8-txt-hvr, .ax-theme9-txt-hvr
.ax-theme1-bak, .ax-theme2-bak, .ax-theme3-bak, .ax-theme4-bak, .ax-theme5-bak, .ax-theme6-bak, .ax-theme7-bak, .ax-theme8-bak, .ax-theme9-bak
.ax-theme1-bdr, .ax-theme2-bdr, .ax-theme3-bdr, .ax-theme4-bdr, .ax-theme5-bdr, .ax-theme6-bdr, .ax-theme7-bdr, .ax-theme8-bdr, .ax-theme9-bdr
.ax-theme1-bdr-hvr, .ax-theme5-bdr-hvr, .ax-theme9-bdr-hvr
| Class | What it does |
|---|---|
| .ax-gradient-left | Uses –gradient-left |
| .ax-btn-gradient-left | Uses –gradient-left for buttons, –gradient-right when hovering and also modified the foreground colour |
| .ax-gradient-right | Uses –gradient-right |
| .ax-btn-gradient-right | Uses –gradient right for buttons and –gradient-left when hovering. It also changes the text colour |
| .ax-gradient-down | Uses gradient-down |
| .ax-btn-gradient-down | Uses –gradient-down for buttons and –gradient-up when hovering. Text colour also changed. |
| .ax-gradient-up | Uses –gradient-up |
| .ax-btn-gradient-up | Uses –gradient-up for buttons and –gradient-dow when hovering. Also changes text colour |
The seagull at the bottom right of the page is animated. It also displays above page content. To turn off the animation, simply set the speed to zero. To change the animation use the drop down to select one of the available pre-styled animations.
To make the Seagull sit behind page content, un-check the option button.
The default LED used for all alarms is a brick - ax-brick. You can change this to any of the available shapes as shown in the drop-downs.
If you have your own user defined alarms, then these can be different by selecting a different shape using the 'User Alarm LED' drop-down.
If you don't want your LEDs to be green by default, you will have to edit the main.css stylesheet, line 332 and 350.