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

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


=== Overview ===
=== Overview ===


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 similar.  The 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.
Following the release of the responsive default website for CumulusMX, I am now looking at the development of the main CumulusMX Interface.


Like the default website, you can change the theme with impacts all elements on the pages including tooltips and calendarsUnlike the default site, you get nearly 30 colour themes included which can also be used with the default site.
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 responsiveThis 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 ===
=== How it fits with the existing inteface ===


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 Interface.  This is a deliberate choice so that you don't need to do anything differently.  The menu has been reworked to shorten it; I have grouped together pages that just show you your weather data and those that enable you to configure or edit it.
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.


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 will be releasing a new version shortly that enables the alarm panel to be hidden once scanned for issues.
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.
*The header area is now better at being responsive on small screens - reducing in size to give you more space for your data.
=====Viewing generated data=====
*The '''Dashboard''' page
**Shows the '''alarm LEDs''' at the top of the page.<br/>(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 Temperature, Pressure, Winds & Rain panels will flash when a new record is set
**For those users with Davis weather stations, you can see '''Packets''' data, '''CRC errors''' and the percentage failure rate.<br/>I have found that this last piece of info is a good indicator for when the battery needs changing.  This option toggles across sessions so if you hide them they stay hidden until you choose to view them again.
*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


=== Overview ===
=====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.<br/>These tables also display metric units for all appropriate data.  If you use other units then you will need to edit the three html files.  (Details are in the 'readme' file included in the download).
*The '''Settings''' Menu<br/>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.<br/>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.<br/>This simply avoids the tables becoming confusing on small screens.
*The '''AI Settings...''' menu
**Gives you access to the various theme colour styles available.<br/>Selecting a theme makes it active for the current page '''only'''.<br/>To make it ''permenant'' you need to click the '''Use for all pages''' button.
**Enables you to change the status of the header and footer from static to scrolling - either or both.
**You can now also adjust the gap between the body of the page and the header and footer.
----
 
===Screen Shots===
Below are a number of screenshots of various pages.
<gallery>
Screenshot_Dashboard.png|The Dashboard showing some version 3 developments ideas
Screenshot_Charts.png|A sample of the carts page - note all charts are zoomable and any buttons always spread across the width of the page
Screenshot_TodayVYesterday.png|The Today verses Yesterday page.  All panels can be re-ordered as required.
Screenshot_Edit_Data_Logs.png|The 'Edit Data Logs' page showing rows hovered and rows selected.
Screenshot_Edit_Data_Logs_2.png|This is the same page showing the edit popup.
</gallery>
<gallery>
Screenshot_Alarm_Settings.png|The Alarms settings page.
Screenshot_Extra_Web_Files.png|The extra Webfiles page.  Note I put a heading in the first entry of every page to identify role of upload.
Screenshot_Weather_Diary_Editor.png|Showing the combined diary and current conditions editor.
AI_Weather_Records.png|Showing the weather records.
AI_Extra_Sensors.png|Version 2 of this page enables you to re-order each block to suite your weather station resources
The_AI_Settings_page.png|Build 3 showing the new AI Settings page
</gallery>
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.
*'''AI-Charts-Plus.js''': This script handles all buttons on the ''Readings'' and ''Historic'' charts pages.
*'''AI-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.<br/>If you have hidden the 'Davis Stats Panel' on the Dashboard then this script makes sure it is hidden the next time you open the page.
*'''AI-Configure.js''': This script is only used to configure the AI: Static or scrolling header/footer and gapes between them and the main body.  You can also change the colour theme for the site.


Below are a number screenshots of various aspects of the alternative interface (version 1).
This package also includes the gauges.js file in th esteelseries library - it has been modified to make to make the tooltips use the theme, and the datatables editor library again to make use of the themes.  
{| 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.


|}
====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 use the '''AI-Config.html''' page.  It can also be used to make the header and/or footer scroll and change the gap between the body of the page and the header/footer.


Where the above screenshots vary in colour, it is because I temporarily loaded alternate themes. You get 30 themes included that can also be used with the default website.  
==Download the latest version==
Download the latest current version: [https://cumuluswiki.org/images/c/c2/Ai.cmx.zip the latest ai.cmx ] (''Updated 7th February 2022 @ 10:06'')


You can download the Alternative Interface using this link [https://cumuluswiki.org/images/7/7c/Ai-cmx-latest.zip Alternative Interface for CumulusMX]. This upload has been updated on 25th November 2021 and is now Version 2 of the Interface.  It is also available on the '''Forum''' under CumulusMX ~ Alternative Interfaces.
This update accommodates the latest update from Mark - build 3169


=== Installation ===
==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.
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.
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 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:
You are then 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:
<nowiki>http://localhost:8998/ai.cmx/</nowiki>.
'''<nowiki>http://localhost:8998/ai.cmx/</nowiki>'''. (''Note the trailing backslash'')


Of course localhost can be replaced with the IP address of the machine running CumulusMX.
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.  It can also be run from the alternative interface - there is a menu item at the right end to do this.
You still have access to the default interface if you want.

Revision as of 10:06, 7 February 2022

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.
  • The header area is now better at being responsive on small screens - reducing in size to give you more space for your data.
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 Temperature, Pressure, Winds & Rain panels will flash when a new record is set
    • For those users with Davis weather stations, you can see Packets data, CRC errors and the percentage failure rate.
      I have found that this last piece of info is a good indicator for when the battery needs changing. This option toggles across sessions so if you hide them they stay hidden until you choose to view them again.
  • 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.
      These tables also display metric units for all appropriate data. If you use other units then you will need to edit the three html files. (Details are in the 'readme' file included in the download).
  • 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 AI Settings... menu
    • Gives you access to the various theme colour styles available.
      Selecting a theme makes it active for the current page only.
      To make it permenant you need to click the Use for all pages button.
    • Enables you to change the status of the header and footer from static to scrolling - either or both.
    • You can now also adjust the gap between the body of the page and the header and footer.

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.

  • AI-Charts-Plus.js: This script handles all buttons on the Readings and Historic charts pages.
  • AI-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.
    If you have hidden the 'Davis Stats Panel' on the Dashboard then this script makes sure it is hidden the next time you open the page.
  • AI-Configure.js: This script is only used to configure the AI: Static or scrolling header/footer and gapes between them and the main body. You can also change the colour theme for the site.

This package also includes the gauges.js file in th esteelseries library - it has been modified to make to make the tooltips use the theme, and the datatables editor library again to make use of the themes.

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 use the AI-Config.html page. It can also be used to make the header and/or footer scroll and change the gap between the body of the page and the header/footer.

Download the latest version

Download the latest current version: the latest ai.cmx (Updated 7th February 2022 @ 10:06)

This update accommodates the latest update from Mark - build 3169

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.