The Alternative Interface (ai.cmx): Difference between revisions

From Cumulus Wiki
Jump to navigationJump to search
 
(122 intermediate revisions by 2 users not shown)
Line 1: Line 1:
== An Alternative (additional) Interface ==
{{TOCright}}
== The Alternative Interface ==


=== Overview ===
==IMPORTANT NOTICE==


Following the release of the responsive default website for CumulusMX, I have now developed an alternative interface pack so that both your live site and your CumulusMX Console site look similarThe general layout is the same but without a sidebar. The header and footer are static by default but both can be made to scroll if preferred.
Due to issues with Alpaca Forms and the AI please DO NOT use any of the following AI pages to configure your station:
Configuration Wizard,  Program Setup,        Station Setup,        Internet Setup,
Third Party Settings,  Extra Sensor Settings, Calibration Settings, NOAA Settings,
MySQL Settings,        Custom Logs,          Custom Alarms,       Display Options or
Locale Settings.
   
  This issue has been resolved for an upcoming release of CumulusMX.


Like the default website, you can change the theme with impacts all elements on the pages including tooltips and calendars.  Unlike the default site, you get nearly 30 colour themes included which can also be used with the default site.
== Overview ==


=== How it fits with the existing inteface ===
The Alternative Interface (AI) is currently provided as an '''addition''' to the existing Interface for CumulusMX.  At the current time, it should '''NOT''' be used as an alternative.  In the near future this may be possible.


It has been developed to run in tandem with the existing Interface, has the same pages (plus one to manage the themes), and each page does the same as the InterfaceThis is a deliberate choice so that you don't need to do anything differentlyThe menu is however organised a little differently; I have grouped together pages that just show you your weather data and those that enable you to configure or edit it.  My reasoning is simply to reduce the width of the menu for smaller screens.
The AI is built using the same technology as the alternative public website and is intended to be flexible and responsive on all screen resolutionsIt is modular and designed so that end users can make changes to the way page content is displayed without too much knowledge of html codingIt comes with themes that allow its colour to be changed to suit your personal preferences and a configuration page so that you can do this easily.


One other alteration is on the main dashboard. I have moved the alarms panel to just underneath the sun and moon times. When using the Interface I like to be made aware of any alarms without scrolling; especially ones about the system. This page is already being modified to improve its layout - I am keen to also get the weather record set LEDs displayed.
The current version is for CumulusMX 3.28.1 and can be downloaded form [https://www.cumuluswiki.org/images/d/d7/AI2.zip AI2 for v3.28.01 build 32693]. Updated December 2023.


=== Overview ===
=== Installation ===
 
Download the above package and extract it to '''somewhere other than your CumulusMX files'''.
 
The package contains a second zip file and documentation which you should read to understand what it does and what you can do with it.
 
Unzip the second zip file, again away from CumulusMX.  This is to ensure that you don't accidentally overwrite critical files in the existing Interface.
 
You should now have a folder called '''ai2'''.  This can be copied as is into the Interface folder so that it is a sub-folder of the Interface folder.  You can rename the AI2 folder if you wish.
 
To use the AI, you should now use the url: '''localhost:8998/ai2/'''
 
If you renamed the folder then use the new name rather than ''ai2''.
If you access the normal CumulusMX interface from a different computer then use the IP address of the machine running CumulusMX rather than ''localhost''.
If you run CumulusMX through a different port then use that port rather than 8998.
 
If you already have the AI running on your system then please '''don't''' try to merge the two - keep them separate as files will change with each release and this '''will''' cause you issues.  Technically you could simply create new folders for each AI release and run any of them in conjunction with the existing Interface.
 
==General Features==
 
This is a list of the features that the AI provides
* It has a large number of ''themes'' that can be used to change the colours used throughout the site
 
* The Header and Footer can be fixed (default) or scroll, the footer is always at the bottom of the screen when page content is short and always scrolls on small screens.
 
* If you don't use a Davis station directly connected to your system, you will '''not'' see the 'Davis Stats' panel.
 
* The fonts used are fully responsive.
 
* Dashboard graphics have been updated.  These also appear on other weather data pages.
 
* The menu has been adapted to have fewer top level entries and focus on managing your weather station.  It provides a link back to the default Interface if required.  ('''See note at top of the page''').
 
* All pages use a feature called flexboxes so can be re-organised simply by changing the order style for each panel.


Below are a number screenshots of various aspects of the alternative interface.
* The Utility pages have been combined into one page although the ''Latest Errors'' page is still available.
{| class="wikitable" style="vertical-align: top;"
|-
! Screenshot !! Information
|-
| [[File:AI_Theme_Selector.png|thumb]] || style="vertical-align:top;"| The included theme selector page.  You can select a theme<br/>(lots included) and set it active for the current session or make it permanent.<br/>You can also reset to the original theme.  At the<br/>bottom of the page are the email settings for sending emails.
|-
| [[File:AI_Weather_Records.png|thumb]] || style="vertical-align:top;"|<strong>Weather view pages</strong><br/><br/>The 'view records' page.  Note that you can select the same sub-sets as<br/>in the normal interface.  The only difference is the selectors are actually buttons, not lists.
|-
| [[File:AI_NOAA_Month_Reports.png|thumb]] ||style="vertical-align:top;"| There are some small changes to the way that this page works.<br/>The date selector now automatically closes when you select a date and the report is loaded.
|-
| [[File:AI_Extra_Sensors.png|thumb]] ||style="vertical-align:top;"| If you have extra sensors on your weather station this is where the readings will<br/>be displayed.  It uses an HTML table as in the normal interface but these have all been made<br/>responsive.
|-
| [[File:AI_Compare_Charts.png|thumb]] ||style="vertical-align:top;"|The new 'choose your own date' charts are included.<br/>The only difference is that ALL charts can now be zoomed to show more detail.<br/>On a tablet this is done with two fingers, but with the mouse just press and drag.
|-
| [[File:AI_Dashboard.png|thumb]] || style="vertical-align:top;"|This is the alternative dashboard.  I have made some<br/>changes to this page as I always like to see any<br/>alarms that have been set as soon as the page<br/>loads.<br/><br/>This page is also on my main list for future development.<br/>I want to include LEDs for Records Set and probably add<br/>extra Almanac data but as a popup so that it<br/>doesn't interfere with the main page data.
|-
| [[File:AI_Data_Log_Editor.png|thumb]] || style="vertical-align:top;"|The first screenshots of the 'Edit/Configure' pages.<br/>All 'Edit' pages with a date selector modified have had it modified.<br/>The date selector will now disappear as soon as you select a date<br/> and the data loaded.  The page also automatically loads the<br/>first set of data on load so you don't need<br/>to click any buttons to start.
|-
| [[File:AI_Dayfile_Viewer-Editor.png|thumb]] || style="vertical-align:top;"|The Day File Viewer/Editor has been forced to fit within the page layout.<br/>However, it still scrolls sideways so that you can<br/>view all the data.<br/><br/>You can still edit it as this is still done within a popup window.
|-
| [[File:AI_Diary_Editor.png|thumb]] || style="vertical-align:top;"|This page has been restructured to improve its design.<br/><br/>The calendar has also been themed so that when you choose a new<br/>theme, the calendar colours change as well.<br/><br/>Future versions of this page may be combined with the<br/>Current Conditions editor.
|-
| [File:AI_Extra_Sensor_Settings.png|thumb]] || style="vertical-align:top;"|This is an example of the Extra Sensor Settings page.<br/><br/>Many of the 'Settings' pages use the 'Alpaca' library to generate the required forms.<br/><br/>None of these have been changed except for the page framework.  In action there is no difference.
|-
| [[File:AI_Records_Editor.png|thumb]] || style="vertical-align:top;"|The Records Editor pages all use standard HTML tables and a library to enable you to edit them.<br/><br/>The only changes made to these pages was to make the buttons work with the new themes and the use a<br/>'splash' screen when you load data.  This makes it more obvious that the system is busy.


|}
* Modifications have been made to all the Charts pages so that you can zoom in on small data sets.  They also latch within the current session so if you move away from the page, and return, the same chart will be displayed.


Where the above screenshots vary in colour, it is because I temporarily loaded an alternate theme.  You get 30 themes included that can also be used with the default website.  
* Modifications have been made to the Steel Series Gauge popup tooltips and it now includes the scrolling text graphic.


You can download the Alternative Interface using this link [https://cumuluswiki.org/images/7/7c/Ai-cmx-latest.zip Alternative Interface for CumulusMX]. It is also available on the Forum under CumulusMX ~ Alternative Interfaces.
* The Logs pages have fixed regions to display line, date (and time) and scroll sideways rather than break the page layout. Their popup editors have been restyled.


=== Installation ===
* Font-Awsome icons are available throughout the site.
Once you have downloaded the zip file, extract it somewhere other than your CumulusMX installation.  This will avoid accidentally overwriting your existing Interface contents.
 
Significant, but not exhaustive improvements have been added for accessibility.  Anyone requiring these features with knowledge of how to improve the AI2 should contact me.
 
== The Menu ==
 
As far as possible, the menu has been split between those pages that simply allow you to view information provided by your weather station and those that allow you to edit them.
 
[[File:Screenshot AI Menu.png|800px|alt=AI Menu|The latest AI Menu]]
 
===Viewing Data===
[[File:Screenshot Weather Data Menu.png|350px|left|alt=AI Weather Data menu|The mainWeather Data menu]]
 
====The first three menu items====
There are three top level menu items at the left to enable this. 
 
These are '''Dashboard''', '''Weather Data''' and '''Extra Sensors'''.
 
The ''Dashboard'' menu item is always visible in both large and small screen, other menu items collapse until you expand the menu with the classic ''hamburger'' item.
 
The '''Weather data''' menu, as shown on th left, contains links for all other pages that simply allow you to view rather than edit data.
 
The exceptions are for the NOAA reports pages which can still be used to regenerate the currently displayed or all missing reports.
 
The ''Extra sensors''' menu provides access for any extra sensors that are attached or 'air linked' to your weather station.
 
<br><br><br><br><br><br><br><br><br>
===Editing Data===
 
[[File:Screenshot Settings Menu.png|600px|left|alt=The Settings Menu|The Settings Menu]]
As can be seen in the screenshot on the left, there are four top level menu items to the right of the ''diamond''.
 
These give access to either page that enable you to configure setting for your CumulusMX system or to editing your weather station data.
 
These are: '''Logs''', '''Settings''', '''Edit''' and '''Utilities'''.
 
These mirror the same menu items as on the default Interface.  One feature of the AI is that the ''Settings'' Menu is a drop down panel with columns.  On the mobile menu it reduces to two columns.  This makes it easier to access all items even on small screens.
<br><br><br><br><br><br><br><br>
====The Default Interface====
 
Access is provided to this via the last top level menu at the extreme right of the menu (just visible in the screenshot).  It will open the Interface in a new Window.
 
==Using the AI Settings Page==
 
The AI Settings page enables you to make global changes to the way the Interface looks.  Things you can change are:
 
*Page Geometry
*:Use this to alter the gaps between the Header & Page content, and the Page content & Footer.
*:Change the units used to measure those gaps.  The site uses the Font Height, the Screen Height or pixels.  Pixels are fixed, the others are responsive.
*:Make the Header scroll with the page (Only if the page is long enough)
*:Make the Footer scroll with the page (only on long pages).  The Footer will always scroll on small screens.
 
*The Theme
*:There are approximately 16 light themes
*:There are the same number of dark themes
*:There is one '''High Contrast''' theme.
 
*The Seagull Animation
*:The default is None (however, the seagull does still fade in at its default position).
*:You can choose:
*::'''Float down the screen''', or
*::'''Slide across the screen'''
*:If you chose an animation you can adjust the speed in seconds
*:Regardless of any animation, you can force the seagull to hide behind page content if preferred.


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.
As you make changes to any of these settings it will be reflected in the current page only.  To use the current selection you '''must''' click the bottom '''Use this Configuration'''. To restore the default settings as programmed into the AI use the button '''Restore default'''.


You are there ready to start using it.  If you use the url: <nowiki>http://localhost:8998/</nowiki> to run your normal interface, you can simply add the folder name to the end like so:
Beneath these buttons you will see the values used in the CMXConfig object to store these settings.  If your browser does '''not''' allow the setting to be stored, you can copy this directly into the ai-pagemanager.js file replacing what is already there.
<nowiki>http://localhost:8998/ai.cmx/</nowiki>.


Of course localhost can be replaced with the IP address of the machine running CumulusMX.
==Editing pages directly==
On the next release of the AI, I will be adding extra pages to the wiki to help you take control of the AI and make changes to suit your needs.


You still have access to the default interface if you want.  It can also be run from the alternative interface - there is a menu item at the right end to do this.
The AI does include a 'development' page that you can use to try out different layouts with the available dates well as making it easy for you to change columns and column orders.

Latest revision as of 11:38, 25 March 2024

The Alternative Interface

IMPORTANT NOTICE

Due to issues with Alpaca Forms and the AI please DO NOT use any of the following AI pages to configure your station:

Configuration Wizard,   Program Setup,         Station Setup,        Internet Setup, 
Third Party Settings,   Extra Sensor Settings, Calibration Settings, NOAA Settings,
MySQL Settings,         Custom Logs,           Custom Alarms,        Display Options or
Locale Settings.

This issue has been resolved for an upcoming release of CumulusMX.

Overview

The Alternative Interface (AI) is currently provided as an addition to the existing Interface for CumulusMX. At the current time, it should NOT be used as an alternative. In the near future this may be possible.

The AI is built using the same technology as the alternative public website and is intended to be flexible and responsive on all screen resolutions. It is modular and designed so that end users can make changes to the way page content is displayed without too much knowledge of html coding. It comes with themes that allow its colour to be changed to suit your personal preferences and a configuration page so that you can do this easily.

The current version is for CumulusMX 3.28.1 and can be downloaded form AI2 for v3.28.01 build 32693. Updated December 2023.

Installation

Download the above package and extract it to somewhere other than your CumulusMX files.

The package contains a second zip file and documentation which you should read to understand what it does and what you can do with it.

Unzip the second zip file, again away from CumulusMX. This is to ensure that you don't accidentally overwrite critical files in the existing Interface.

You should now have a folder called ai2. This can be copied as is into the Interface folder so that it is a sub-folder of the Interface folder. You can rename the AI2 folder if you wish.

To use the AI, you should now use the url: localhost:8998/ai2/
If you renamed the folder then use the new name rather than ai2.
If you access the normal CumulusMX interface from a different computer then use the IP address of the machine running CumulusMX rather than localhost.
If you run CumulusMX through a different port then use that port rather than 8998.
If you already have the AI running on your system then please don't try to merge the two - keep them separate as files will change with each release and this will cause you issues.  Technically you could simply create new folders for each AI release and run any of them in conjunction with the existing Interface.

General Features

This is a list of the features that the AI provides

  • It has a large number of themes that can be used to change the colours used throughout the site
  • The Header and Footer can be fixed (default) or scroll, the footer is always at the bottom of the screen when page content is short and always scrolls on small screens.
  • If you don't use a Davis station directly connected to your system, you will 'not see the 'Davis Stats' panel.
  • The fonts used are fully responsive.
  • Dashboard graphics have been updated. These also appear on other weather data pages.
  • The menu has been adapted to have fewer top level entries and focus on managing your weather station. It provides a link back to the default Interface if required. (See note at top of the page).
  • All pages use a feature called flexboxes so can be re-organised simply by changing the order style for each panel.
  • The Utility pages have been combined into one page although the Latest Errors page is still available.
  • Modifications have been made to all the Charts pages so that you can zoom in on small data sets. They also latch within the current session so if you move away from the page, and return, the same chart will be displayed.
  • Modifications have been made to the Steel Series Gauge popup tooltips and it now includes the scrolling text graphic.
  • The Logs pages have fixed regions to display line, date (and time) and scroll sideways rather than break the page layout. Their popup editors have been restyled.
  • Font-Awsome icons are available throughout the site.

Significant, but not exhaustive improvements have been added for accessibility. Anyone requiring these features with knowledge of how to improve the AI2 should contact me.

The Menu

As far as possible, the menu has been split between those pages that simply allow you to view information provided by your weather station and those that allow you to edit them.

AI Menu

Viewing Data

AI Weather Data menu

The first three menu items

There are three top level menu items at the left to enable this.

These are Dashboard, Weather Data and Extra Sensors.

The Dashboard menu item is always visible in both large and small screen, other menu items collapse until you expand the menu with the classic hamburger item.

The Weather data menu, as shown on th left, contains links for all other pages that simply allow you to view rather than edit data.

The exceptions are for the NOAA reports pages which can still be used to regenerate the currently displayed or all missing reports.

The Extra sensors' menu provides access for any extra sensors that are attached or 'air linked' to your weather station.










Editing Data

The Settings Menu

As can be seen in the screenshot on the left, there are four top level menu items to the right of the diamond.

These give access to either page that enable you to configure setting for your CumulusMX system or to editing your weather station data.

These are: Logs, Settings, Edit and Utilities.

These mirror the same menu items as on the default Interface. One feature of the AI is that the Settings Menu is a drop down panel with columns. On the mobile menu it reduces to two columns. This makes it easier to access all items even on small screens.







The Default Interface

Access is provided to this via the last top level menu at the extreme right of the menu (just visible in the screenshot). It will open the Interface in a new Window.

Using the AI Settings Page

The AI Settings page enables you to make global changes to the way the Interface looks. Things you can change are:

  • Page Geometry
    Use this to alter the gaps between the Header & Page content, and the Page content & Footer.
    Change the units used to measure those gaps. The site uses the Font Height, the Screen Height or pixels. Pixels are fixed, the others are responsive.
    Make the Header scroll with the page (Only if the page is long enough)
    Make the Footer scroll with the page (only on long pages). The Footer will always scroll on small screens.
  • The Theme
    There are approximately 16 light themes
    There are the same number of dark themes
    There is one High Contrast theme.
  • The Seagull Animation
    The default is None (however, the seagull does still fade in at its default position).
    You can choose:
    Float down the screen, or
    Slide across the screen
    If you chose an animation you can adjust the speed in seconds
    Regardless of any animation, you can force the seagull to hide behind page content if preferred.

As you make changes to any of these settings it will be reflected in the current page only. To use the current selection you must click the bottom Use this Configuration. To restore the default settings as programmed into the AI use the button Restore default.

Beneath these buttons you will see the values used in the CMXConfig object to store these settings. If your browser does not allow the setting to be stored, you can copy this directly into the ai-pagemanager.js file replacing what is already there.

Editing pages directly

On the next release of the AI, I will be adding extra pages to the wiki to help you take control of the AI and make changes to suit your needs.

The AI does include a 'development' page that you can use to try out different layouts with the available dates well as making it easy for you to change columns and column orders.