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

From Cumulus Wiki
Jump to navigationJump to search
m
(9 intermediate revisions by the same user not shown)
Line 1: Line 1:
{{TOCright}}
{{TOCright}}
== An Alternative (additional) Interface ==
== The Alternative Interface ==
 


==IMPORTANT NOTICE==
==IMPORTANT NOTICE==
Line 12: Line 11:
  Locale Settings.
  Locale Settings.
   
   
  This issue has been resolved for the upcoming release of CumulusMX.  
  This issue has been resolved for an upcoming release of CumulusMX.


== Overview ==
== Overview ==
Line 44: Line 43:
This is a list of the features that the AI provides
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
* 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.
* 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.
* The fonts used are fully responsive.
* 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 not at top of the page''').


* All pages use a feature called flex-boxes so can be re-organised simply by changing the order style for each panel.
* 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.
* 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.
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.


Line 56: Line 71:


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.
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===
===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. 


There are three top level menu items at the left to enable this.  These are '''Dashboard''', '''Weather Data''' and '''Extra Sensors'''.
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 ''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 contains links for all other pages that allow you to view rather than edit data except for the NOAA reports pages which can still be used to regenerate the current or all missing reports.
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 linked to your weather station.
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===
===Editing Data===


There are four top level menu items to the right of the ''diamond'' that give access to either setting or editing your weather station.  These are: '''Logs''', '''Settings''', '''Edit''' and '''Utilities'''.
[[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 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.  This makes it easier to access all items even on spall screens.
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====
====The Default Interface====


Access is provided to this via the last top level menu at the extreme right of the menu.  It will open the Interface in a new Window.
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==
==Using the AI Settings Page==
Line 83: Line 112:
*Page Geometry
*Page Geometry
*:Use this to alter the gaps between the Header & Page content, and the Page content & Footer.
*: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 used the Font Height, The screen height or pixels.  Pixels are fixed, the others are responsive.
*: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 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.
*:Make the Footer scroll with the page (only on long pages).  The Footer will always scroll on small screens.


*The Theme
*The Theme
*:There are approximately 14 light themes
*:There are approximately 16 light themes
*:There are the same number of dark themes
*:There are the same number of dark themes
*:There is one '''High Contrast''' theme.
*:There is one '''High Contrast''' theme.
Line 98: Line 127:
*::'''Slide across the screen'''
*::'''Slide across the screen'''
*:If you chose an animation you can adjust the speed in seconds
*: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.
*: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'''.
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.
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.
320

edits

Navigation menu