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

m
 
(147 intermediate revisions by 2 users not shown)
{{TOCright}}
== An Alternative (additional) Interface ==
== 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 am now looking at the development of the main CumulusMX Interface.
 
The default 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).
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.
 
In the near future it may replace the existing Interface but this is still under discussion.
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.
 
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.
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.
 
=== Installation ===
=== How it fits with the existing inteface ===
 
As the AI is now included with CumulusMX, there is no need to download it unless an interim upgrade is provided.
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.
 
To use the AI, you should now use the url: '''localhost:8998/ai2/'''
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.
 
If you access the normal CumulusMX interface from a different computer then use the IP address of the machine running CumulusMX rather than ''localhost''.
However, some changes to layout have been made:
If you run CumulusMX through a different port then use that port rather than 8998.
*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 '''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.-->
*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 threes, as in the default Interface.
 
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.
Page under development. All information is, however, still current.
 
==General Features==
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.
 
This is a list of the features that the AI provides
=== Overview ===
* 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.
Below are a number screenshots of various aspects of the alternative interface.
 
* If you don't use a Davis station directly connected to your system, you will '''not''' see the 'Davis Stats' panel.
====Version 1====
<gallery>
AI_Weather_Records.png|Showing the weather records.
AI_NOAA_Month_Reports.png|NOAA Reports. No significant change to this page in version 2
AI_Extra_Sensors.png|Version 2 of this page enables you to re-order each block to suite your weather station resources
</gallery>
 
* The fonts used are fully responsive.
This has now been superseded by Version 2. (See below).
 
* Dashboard graphics have been updated. These also appear on other weather data pages.
====Version 2====
<gallery>
Screenshot_Dashboard.png|The v2 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|The same page showing the edit popup.
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.
</gallery>
 
* 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 the above are taken from my current Version 2 of the Interface. The only exception is the image of the dashboard that shows some of the developments I am playing with.
 
* All pages use a feature called flexboxes so can be re-organised simply by changing the order style for each panel.
* One is the inclusion of Davis Weather Station details so that I can see when the battery needs replacing or if there is some other issue.
* The second is the inclusion of "New Record" LEDs in the appropriate panels. I don't yet know how detailed this needs to be; at the moment its limited to just the four main categories - Temperature, Pressure, Rain and Wind. It might start getting very cluttered if I include all possible LEDs. Let me know your thoughts.
 
* The Utility pages have been combined into one page although the ''Latest Errors'' page is still available.
You can download version 2 of the Alternative Interface (AI) using this link [https://cumuluswiki.org/images/7/7c/Ai-cmx-latest.zip|Alternative Interface for CumulusMX v2]. This upload has been updated on 2nd December 2021 @ 10:55am. This update fixes the Feels Like gauges not displaying data, the Dew point temperatures title to 'Other Temperatures, and the popup editor used on the Day File, Sensor (and extra Sensor) logs pages. It also improves the Edit Records pages which were not loading the required stylesheet. It is also available on the '''Forum''' under CumulusMX ~ Alternative Interfaces.
 
* 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.
Following Marks update to build 3159, the zip file below contains the changes applied to the data log editing pages and their associated javascript files.
[https://cumuluswiki.org/images/6/65/Ai.cmx-build3159_changes.zip|Ai.CumulusMX build 3159 Changes ONLY], updated 9th December 2021 - further modifications to the Datepicker javascript to correct 'date To' selector reverting to start date. See included readme file.
 
* Modifications have been made to the Steel Series Gauge popup tooltips and it now includes the scrolling text graphic.
=== 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 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:CumulusMX Menu 2025-10-26.png|800px|alt=Current CumulusMX Menu|Current CumulusMX Menu]]
 
'''Note''' The link to the default Interface has been moved to the '''''Utilities''''' menu and a new drop-down, called ''''Support'''' has been added to provide access to the Wiki, the Forum and my Wiki.
 
===Viewing Data===
 
[[File:View Menu Screenshot 2025-10-26.png|350px|thumb|left|alt=Viewing your weather data|Viewing your weather data]]
 
====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.
<br><br>
The '''Weather data''' menu, as shown on the 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>
 
===Editing Data===
 
[[File:Settings Screenshot 2025-10-26.png|600px|thumb|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 pages that enable you to configure your CMX setting or to editing your weather station data.
 
These are: '''Logs''', '''Settings''', '''Edit''', '''Utilities''' and '''Support'''.
 
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 =====
This is now accessed using the '''''Utilities''''' drop-down menu.
<br><br><br><br><br><br><br><br>
 
==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:
*::'''''Grow upwards''''',
*::'''''Fade Downwards''''', or
*::'''''Expand diagonally'''''
*:If you chose an animation you can adjust the speed in seconds. Setting this to 0 effectively stops the animation.
*: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'''.
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'''.
 
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.
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'')
 
==Editing pages directly==
Of course localhost can be replaced with the IP address of the machine running CumulusMX.
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.
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.
445

edits