The Alternative Interface (ai.cmx): Difference between revisions
NeilThomas (talk | contribs) |
NeilThomas (talk | contribs) m (→Overview) |
||
(73 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
{{TOCright}} |
{{TOCright}} |
||
== |
== The Alternative Interface == |
||
[[Category:Cumulus MX]] |
|||
== Overview == |
|||
The Alternative Interface (AI) is currently provided as an '''addition''' to the existing Interface for CumulusMX. |
|||
Following the release of the responsive default website for CumulusMX, I have now produced an alternative interface (AI) for administrating your CumulusMX installation. |
|||
The existing Interface is maintained by Mark and will always provide all the tools needed to manage your installation of your weather station, The '''AI''' can be used as an alternative except immediately after an upgrade that has added new features to the interface as these may not yet be implemented on the AI (although every effort is made to do this). |
|||
As with the default interface it provides views of your weather readings and history and also enables you to configure and change your settings. You can also change the way the AI looks. |
|||
In the near future it may replace the existing Interface but this is still under discussion. |
|||
It comes with 30+ themes that can applied to the Interface to personalise it. If you are familiar with css rules, you can even create your own themes. |
|||
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. |
|||
=== How it fits with the existing inteface === |
|||
====The AI for CumulusMX Version 4+==== |
|||
The AI has been developed as an '''addition''' to the existing Interface - it is '''not provided as a replacement'''. The existing Interface '''should always be retained''' as it is this that will be updated by Mark as and when required. As changes are made to CumulusMX your only access to them initially will be through the default interface provide by Mark. |
|||
In this version ALL the features of the included Interface work as expected with some enhancements. |
|||
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. |
|||
====AI Update==== |
|||
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. |
|||
**I have also moved/duplicated some of the menu entries to other top level menu items. |
|||
*The header area is now better at being responsive on small screens - reducing in size to give you more space for your data on small screens. |
|||
=====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''' |
|||
**These pages use flex boxes and as such it is possible to rearrange them on the page simply by changing their 'order' number in the html code. |
|||
*The '''Data Logs''' pages |
|||
**These now all have fixed columns for line number and date (and time). |
|||
**All pages automatically load data when the pages open. |
|||
'''July 2024''' |
|||
=====Management and Setup Menus===== |
|||
*The '''Readings Logs''' and '''Extra Data Logs''' pages display the current days 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). |
|||
For those of you who cannot wait, I have provided below a link to the latest update to the AI. This has focused on accessibility features making the menu on large screens accessible and changing the highlights used for table like structures. As a requested bonus it includes the firmware version for Davis stations. |
|||
**Some cosmetic changes have been made to the popup editor panel. |
|||
*The '''Settings''' Menu<br/>This menu provides access to the same pages as in the default system although some have been redesigned |
|||
[https://www.cumuluswiki.org/images/7/73/Ai2-v4.zip Ai2-v5.zip] |
|||
**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 not included in the latest zip file. |
|||
*The four '''Edit Records...''' pages |
|||
**These are essentially the same as the default interface. Cosmetic changes have been made to the popups. |
|||
*The '''Utilities...''' menu |
|||
**This inludes FTP, Purge database, Reload the Dayfile, Custom logs and 'AI Settings'. |
|||
**The FTP and Dayfile options load the same page with both options available. |
|||
**Custom Logs loads the same page as the 'Settings' menu. |
|||
**'AI Settings...' gives you access to the various theme colour styles available.<br/>To view the them on this page use the appropriate button or selecting 'Use for all pages' will make the change permenantly. |
|||
**You also have the option to reset the theme to the default. |
|||
**It also enables you to change the status of the header and footer from static to scrolling - either or both and adjust the gap between the body of the page and the header and footer. |
|||
---- |
|||
=== |
=== Installation === |
||
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. |
|||
---- |
|||
Download the above package and extract it to '''somewhere other than your CumulusMX files'''. |
|||
===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 package contains a second zip file and documentation which you should read to understand what it does and what you can do with it. |
|||
The following JavaScript files were (January 2022) 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. |
|||
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. |
|||
Those users not using Microsoft Windows OS should note case inconsistencies; e.g. "ai-config.html" (December 2021) has become "AI-Config.html" now. |
|||
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. |
|||
This package also includes: |
|||
* the '''gauges.js''' file in the ''steelseries'' library - it has been modified to make to make the ''tooltips'' use the theme, |
|||
* and the "datatables editor" library - again modified to make use of the themes. |
|||
To use the AI, you should now use the url: '''localhost:8998/ai2/''' |
|||
====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. |
|||
If you renamed the folder then use the new name rather than ''ai2''. |
|||
==Download the latest version== |
|||
If you access the normal CumulusMX interface from a different computer then use the IP address of the machine running CumulusMX rather than ''localhost''. |
|||
Download the latest current version: [https://cumuluswiki.org/images/c/c2/Ai.cmx.zip the latest ai.cmx ] (''Updated 14<sup>th</sup> Feb 2022 @ 15:00'') |
|||
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. |
|||
This update accommodates the latest update from Mark - version 3.23.1 build 3221. It includes the additional custom logs feature. Please do not use with previous versions of CumulusMX as it will generate errors due to the changes to the main interface. |
|||
==General Features== |
|||
For full history of changes to the zip see [[File:Ai.cmx.zip|File:Ai-cmx.zip page]]. |
|||
This is a list of the features that the AI provides |
|||
==Installation== |
|||
* It has a large number of ''themes'' that can be used to change the colours used 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. |
|||
* 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 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'''. |
|||
* If you don't use a Davis station directly connected to your system, you will '''not''' see the 'Davis Stats' panel. |
|||
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>'''. (''Note the trailing backslash'') |
|||
* The fonts used are fully responsive. |
|||
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. |
|||
* Dashboard graphics have been updated. These also appear on other weather data pages. |
|||
You still have access to the default interface if you want. |
|||
* 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'''). |
|||
PLEASE read the included ''''ReadMe'''' file as this shows how you can change the '''UNITS''' in the DayFile and Data Logs pages. |
|||
* 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. |
|||
[[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. |
|||
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. |
Latest revision as of 10:42, 29 October 2024
The Alternative Interface
Overview
The Alternative Interface (AI) is currently provided as an addition to the existing Interface for CumulusMX.
The existing Interface is maintained by Mark and will always provide all the tools needed to manage your installation of your weather station, The AI can be used as an alternative except immediately after an upgrade that has added new features to the interface as these may not yet be implemented on the AI (although every effort is made to do this).
In the near future it may replace the existing Interface but this is still under discussion.
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 AI for CumulusMX Version 4+
In this version ALL the features of the included Interface work as expected with some enhancements.
AI Update
July 2024 For those of you who cannot wait, I have provided below a link to the latest update to the AI. This has focused on accessibility features making the menu on large screens accessible and changing the highlights used for table like structures. As a requested bonus it includes the firmware version for Davis stations. Ai2-v5.zip
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.
Viewing Data
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
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.