The Alternative Interface (ai.cmx)

From Cumulus Wiki

An Alternative (additional) Interface

Overview

Following the release of the responsive default website for CumulusMX, I am now looking at the development of the main CumulusMX Interface.

Although the main focus of the Interface is to manage your weather station, it also provides your initial view of the data that you are collecting. As such I feel that it should also use the same up-to-date features as the supplied public default website.

Like the public website supplied with CumulusMX, the AI uses colour themes and, wherever possible, is fully responsive. This should make it easier to use on tablets and phones as well as the more traditional desktop/laptop screen.

Like the supplied Interface, the AI includes all the required pages to manage your weather station but also provides some additional information, especially on the dashboard page. It also provides 30+ themes that can be applied to it and the default public website, it required.

How it fits with the existing inteface

The AI has been developed as an alternative to the existing Interface - it is not a replacement. The existing Interface should always be retained as it is this that will be updated by Mark as and when required.

As said above, the AI includes all the same resources needed to view the data being generated by your website; to configure your station and to edit data should errors occur.

However, some changes to layout have been made:

  • The Header and Footer are both fixed by default. This can be changed by you if required.
  • The Menu has been adapted to take less space but includes a button to return to the default Interface pages.
Viewing generated data
  • The Dashboard page
    • Shows the alarm LEDs at the top of the page.
      (These can be hidden/re-displayed using the button provided with the page title).
    • The Sun and Moon rise & setting times are displayed in a popup; again using the button in the page title bar.
  • The Charts pages
    • All charts can be zoomed, i.e., you can swipe the mouse over parts of the chart to view readings in detail.
    • The recent and historic charts use buttons that always span a complete line (or lines).
    • The Select-a-Chart groups the buttons in two groups of three pairs, as in the default Interface.
  • The NOAA pages
    • Both pages have been amended so that the required report loads when a date is selected.
  • Extra Sensors - No significant cosmetic changes
Management and Setup Menus
  • The Data Logs Menu
    • All pages automatically load data when the pages open.
    • The Readings Logs and Extra Data Logs pages display the last 7 days of entries but this can be changed using the popup calendar.
  • The Settings Menu
    This menu provides access to the same pages as in the default system although some have been redesigned
    • The MySQL Settings page has been made into two columns.
    • The Alarm Settings page has simply been tidied up.
  • The Edit... Menu
    • The rain editor is now much narrower and the shading on read-only entries made more obvious.
    • Weather Conditions Editor
      • This is a new page that combines the old Current Conditions & Weather Diary pages.
        The original pages are still available but not in the menu. This can be edited to display the original pages if preferred.
  • The four Edit Records... pages
    • These are esentially the same except that editing is done using a popup box rather than in-line.
      This simply avoids the tables becoming confusing on small screens.
  • The Theme... menu
    • Gives you access to the various theme colour styles available.
      Selecting a theme makes it active for the current session only.
      To make it permanent you need to click the Use as default button.

Screen Shots

Below are a number of screenshots of various pages.

All the above are taken from my current Version 2 of the Interface except the last two.


Technical Changes

Generally, this has been limited to ensuring that all JavaScript files use the correct URL for API calls to both read and update settings / data. All modified JavaScript files are included in the AI package and do not over-write existing files.

The following JavaScript files are additions for the AI.

  • Charts-Plus.js: This script handles all buttons on the Readings and Historic charts pages.
  • Page-Manager.js: This script is a utility used by all pages to control the layout, obtain the CumulusMX Version data, handle the selected theme and various other utilities.
  • Theme-Manager.js: This script is only used by the Theme... page to enable you to change the colour theme for the site.

Things you can change easily

As already mentioned, the Header and Footer area of the site is static by default - i.e. they are always on page. To change this you need to edit the Page-Manager.js script as indicated below:

On lines 8 and 9 there are two variables: fixedBanner and fixedFooter. Both are currently set to true. If either, (or both), are set to false then that feature will move as the page scrolls.

Above these lines; i.e. lines 6 and 7 are two more variables topMargin and footerMargin. These control the space between the Header and Footer respectively. Changing these will adjust the space no matter whether the Header or Footer are static or not. Feel free to adjust as required.

 Page under development.  All information is, however, still current.
 

Download the latest version

Download the latest current version: "CumulusMX AI v2" (Updated 31st December 2021 @ 17:33)

This update accommodates the latest update from Mark - build 3160.

Installation

Once you have downloaded the zip file, extract it somewhere other than your CumulusMX installation. This will avoid accidentally overwriting your existing Interface contents.

The Extracted package should consist of a single folder - ai.cmx, which can then be copied into the existing Interface folder so it shows as a sub-folder.

You are then ready to start using it. If you use the url: http://localhost:8998/ to run your normal interface, you can simply add the folder name to the end like so: http://localhost:8998/ai.cmx/. (Note the trailing backslash)

Of course localhost can be replaced with the IP address of the machine running CumulusMX. Using the IP address of your CumulusMX computer, you can also brows to it from another computer on your local network.

You still have access to the default interface if you want.