General Developments

Version 5.21

The primary reason for this incarnation of the Ai was to remove dependancy on the w3schools^® w3.css structures.

Much of the styles contained in it were not used in the AI and many had to be over-ridden with local styles, either in my main stylesheet or in-line with the HTML. It also impacted on the way the menu could be constructed and styled. I could not implement a proper sidemenu without duplication a complete menu structure and even for the standard menu entries needed to be duplicated. Now the menu is a single entity no matter what stle you chose.

My secondary reason was to make the pages and styles used more consistent across the site. This has resulted in groups of pages using a common specific stylesheet and avoided duplication.

In addition to both of the above, I wanted to include more configuration options and modify how these were integrated into the AI.

Changes

General

The Menus

This version of the AI provides the option to either the standard menu at the top of the banner or a sidebar menu on the left of the screen.

The Standard Menu

This is along the bottom edge of the banner and includes a number of drop-down panels for the various menu options. It has the same menu items as the default menu but organised differently to save space. Menu items respond to mouse clicks, with only the currently selected drop-down displayed. It collapses into a 'mobile' menu on smaller screens, leaving the dashboard link on the left and adding a hamburger menu on the right.

Some of the drop-down panels open as 'mega-menus' - multiple columns; to reduce the height of the drop-down. Menu Options It is possible to change any panel into a mega-menu or simple panel if required. See The AI Menu for details.

The Sidebar Menu

This is opened by its own dedicated hamburger displayed to the left of the CumulusMX Logo in the banner. It will span 40% of the available screen width down to a minimum of 410px. With screen widths below 600px it will occupy the full width of the screen.

Drop-downs that are mega menus in the standard menu will also try to display as mega menus in the sidebar. On small screens they will be single columns. The sidebar panel will always cover the full height of the window but the menu itself will not scroll. To mitigate this there is a 'back to top' link at the bottom of the panel.

The Gulls

At the top right of the screen, the Gull moves inwards and upwards until it reaches the main page content - it then fades to avoid obstructing the header data.

The Gull at the bottom right is perched on the footer bar and also fades if it is likely to obstruct data in the page content.

The flying Gull at the bottom left is animated but cannot go behind the page content. However, it gets smaller and sinks downward. It should fit in the space between the page content and the footer (unless you have set this to zero).

Buttons

Hopefully these are now all consistent across all pages: They should be the background colour of their container and have the theme colour as a border, which is round.

When hovering over them they should all be a theme based gradient. In button bars they will expand but not react in any way if they are currently selected.

The only exception to the standardised buttons are on the NOAA pages. As in the default Interface, the three option buttons have a red, blue and green gradient background respectively.

The Banner

This now includes the port number as well as the location data of your system. This is only useful for thos of you that run CumulusMX on a non-standard port or run multiple versions.

Data Highlights

When hovering the mouse over rows of data, they should all display a top and bottom highlight and the font should go bold and coloured.

Pages

Charts

The charts pages are now all in a grid layout so you can place any buttons above or below the chart area using the 'order:X' facility. See the Page Layout section of the wiki.

Query Day file

This now displays the correct units for the data variable selected.

Extra Sensors

This now only displays panels for sensors that you have registered on your system. Note It is possible to have all panels display but this does require the HTML ID's for each panel to be changed - %%<article id=“name”>.

NOAA Reports

All reports are displayed centred within their panel regardless of whether they are text based or coded. Coded reports will allow you to hover over each day / month to highlight the row.

Data Logs

The alternate row highlighting is less striking and the selected highlight is now theme colour based(ish).

Although most units are picked up from CumulusMX, some are not defined as they are global. However, you will need to edit these pages to ensure that the correct unit / language is used. This is covered on The Data Log Pages.

Daily Data Viewer

The layout of this page has been modified to reduce the space needed to display all available options.

The Settings Pages

Generally speaking all the Settings pages are as in the default interface. However, they have all been slightly modified to include as much of the theme colours as possible.

If the 'Accessibility' feature is used, most pages display the top level options as rounded tabs. However, this has not been possible for some, where they have not been coded the same way by Mark. Should this be amended by Mark in the future, they should automatically adopt the AI styles.

HTTP File Settings, User Defined Alarms & Custom Logs These pages contain notes outside the main forms which in the default Interface are single strings. In the AI they are heading and explanation. Due to this, should you use a different language, the headings will not change to your chosen language.

AI Settings

You should refer to the AI Settings page for information about this menu option

Oaktree Weather Systems

Table of Contents