Differences

This shows you the differences between two versions of the page.

--- wiki:aw:configure [2025/10/03 15:00] – Neil
+++ wiki:aw:configure [2025/10/20 08:32] (current) – [Dynamic Configuring] Neil
@@ Line 1: / Line 1: @@
 ====== Configuring the site ======
 <WRAP nicebox teal>
-**Unlike all previous versions of the default and alternative website, all settings are now held in one place - the CMXConfig object held in the <color blue>**page-manager.js**</color> file.**
+**Like all previous versions of the alternative website, all settings are now held in one place - the cmxConfig object held in the <color #80f>**page-control.js**</color> file.**
-This object holds the location of the menu to use, the location of your data, the path and name of your menu, the location of your NOAA Reports and other features that the website uses.  Data is only stored for the current browsing session so will **not be retained once the browser is closed**.
+This object holds the location of the menu to use, the location of your data, the path and name of your menu, the location of your NOAA Reports and other features that the website uses.  This object is stored locally on your machine as '**SessionStorage**' with the name suffix **//apwConfig//** so is only stored for the current browsing session and will **not be retained once the browser is closed**.
 </WRAP>
+===== Initial Configuration =====
+Before any page is fully loaded your browsers current Session Storage is checked to see if a copy of the cmxConfig object already exists, if it does, it is used to configure the page.  If it does not not then it is created.  This is then used throughout the site to access data, theme colours and other configurable options.
+Below is an explanation of the <color #800>**critical**</color> entries.
 <WRAP group>
-<WRAP half column>
+<WRAP twothirds column>
-===== Information =====
+<WRAP nicebox teal>
-Before any page is fully loaded your browsers current Session Storage is checked to see if a copy of the CMXConfig object already exists, if it does, it is loaded into memory.
+==== Data ====
+This points to the location of your ***.json** data files((and the **realtimegauges.txt** file)) uploaded by CumulusMX.  CumulusMX normally uploads these to the same location as the ***.htm** page files.  This entry allows you to use a custom locations.
-If it does not then it is created.  This enables every page to have access to values stored in it.  Below is an explanation of all entries.
+++++ See more |
+If the entry is blank, it is assumed to be the root directory of your site: //<domain-name>/<site>// \\
+If your site is **not** in the root directory, you will need to edit this entry.
-==== Data ====
+  * Entries that start with **/** will be an absolute path to your data.
-This points to the location of your .json data files((and the **realtimegauges.txt** file)) uploaded by CumulusMX.  The default location is the same as the pages.  If you want to upload you data to a different location then use this entry to point to it.
+  * Other initial characters will interpret the entry as a relative path.
-==== Menu ====
+  * See [[:wiki:aw:Config-Detail|detailed information]] with images.
-The menu used by the default website is created from a .json formatted file.  This entry points to the supplied menu file.
+++++
-If you want to create your own menu, then make a copy of the supplied one and make sure this entry points to your intended new menu.  Please note that the menu structure has been extended and you should view **[[wiki:aw:the-menu|Editing the Menu]]** page for guidance.
 ==== NOAA Reports ====
-If you publish NOAA reports from CumulusMX, this entry should point to the folder containing them.  The default is 'Reports/' which is a sub-folder of the main upload folder.
+Unlike general data CumulusMX allows you to specify your own location for any NOAA reports that you choose to publish.  The default location is '**Reports/**'.  This is a relative path and so a sub-folder of your site.  If you choose an alternative location then you can use this entry to provide the required access.++ More | The same options apply as for the Data entry. ++
-==== Theme ====
-The default website comes with a new set of colour themes.  This entry enables you to choose one of these or to point to one you have created.  Please view **[[wiki:aw:themes| the Themes]]** page for more information.
-</WRAP>
-<WRAP half column>
+==== Menu ====
-<WRAP nicebox blue>
+This should be used to point to the javascript menu file used to drive all the menus on the site.  Unless you use your own modified menu, there should be little need to edit this.  Its default value is **js/ows-menu.js**. More details about creating your own menu can be found on the page [[the-menu|Creating your own menu]].
-=== The CMXConfig object ===
+=== Custom ===
+This area is used to configure other user settings.  This is covered in detail in the [[cmxConfig page|wiki:aw:cmxConfig]]
+</WRAP>
+</WRAP>
+<WRAP third column>
+=== The cmxConfig object ===
 <code javascript>
-CMXConfig = {
+cmxConfig = {
-    'Data': '',
+    Charts: {
-    'Menu': 'js/aw-menu.js',
+        Trends: '',
-    'NOAAReportPath': 'Reports/',
+        Historic: '',
-    'Theme': '',
-    'StaticHead': true,
-    'StaticFoot': true,
-    'paddingTop': 2,
-    'paddingBottom': 1,
-    'paddingUnits': 'em',
-    'Seagull': {
-        'Animation': '',
-        'Speed': 5,
-        'OnTop': false
     },
-    'Charts':{
+    Custom: {
-        'Trends': '',
+        StandardMenu: false,
-        'Historic':''
+        Dropdown: true,
+        Theme: '',
+       	Logo: '',
+	BannerImage: '',
+	StaticHead: true,
+	StaticFoot: true,
+	PaddingTop: '2',
+	PaddingBottom: '1',
+	PaddingUnits: 'em',
     },
-    'Records':{
+    Data: '',
-        'All':'',
+    Menu: 'js/ows-menu.js',
-        'Monthly':''
+    NOAAReportPath: 'Reports/',
+    Gull: {
+        Animation: '',
+        Speed: 10,
+        OnTop: false,
+    },
+    Records: {
+        All: '',
+        Monthly: '',
     }
-}
+};
 </code>
 </WRAP>
 </WRAP>
-==== The Seagull ====
+==== Non-critical entries ====
-As in the AI, the seagull can be animated.  The default animation is for it to fade in slowly over 5 seconds but by changing the 'Speed' value you can slow this down or speed it up.  Setting the speed to zero effectively stops the animation and the seagull will appear instantly.  Some of the other provided keyframe animation will also work and you are free to develop your own.
+<WRAP nicebox blue>
+=== The Gull ===
+As in the AI, the seagull is animated.  The three settings for the gull determine the animation to use, the speed in seconds of that animation and whether or not the gull sits on top of or below other page content.
-=== StaticHead, StaticFoot, paddingTop, paddingBottom and paddingUnits===
+++++ More |
-Along with changing the colour theme, you can also modify the header and footer to make them scroll with the page and change the gap between them and the main page content.  The next 5 entries control this and work in the same way as the Alternative Interface.
+**Animation**:<wrap intent>The default animation is for it to fade in.  The animations available are:</wrap>
+  * **gull-FadeIn**<wrap indent>This is the default.</wrap>
+  * **gull-GrowUp**<wrap indent>The gull expands upwards from the bottom of the page.</wrap>
+  * **gull-SlideIn-from-Left**<wrap indent>Slides into position from the left of the screen.</wrap>
+  * **gull-SlideIn-from-Right**<wrap indent>As above but from the right.</wrap>
-----
+**Speed**:<wrap indent>Sets the speed of the animation.  Setting this to **0** effectively stops the animation</wrap>
+**OnTop**:<wrap indent>If **true**, the gull will always be on top of all other page content, otherwise it will tuck in below everything.
+</wrap>
+++++
-==== The remaining entries ====
+==== Charts & Records ====
+Both these entries are dynamic in that they are used by the site to record the last **Trends** or **Historic** chart or **Monthly** or **All Records** recordset viewed so that when a visitor returns to them, the same chart / recordset is displayed.
+=== Charts ===
+The charts section can be used to dictate which chart is displayed when a visitor first views the respective page.
+++++ See more |
+If **you** set them in cmxConfig then the chart you set will be the one visitors see first.  Valid entries are:
-At the end of the CMXConfig object there are two more groups of settings.  These are used by, and change while a visitor is browsing your website.  They relate to the charts - Trends and Historic, and Records - Monthly and All Records.
+**Trends**: <wrap indent>'temp', 'dailytemp', 'press', 'wind', 'windDir', 'rain', 'dailyrain', 'humidity', 'solar', 'sunhours', 'airquality', 'extratemp',  'extrahum', 'extradew', 'soiltemp', 'soilmoist',  'leafwet', 'usertemp' or 'co2'.</wrap>
-They store the last chart or the last record set viewed in both cases.  This enables visitors to jump from page to page but still return to the last chart or record set that they were viewing.  **Note** this only occurs in the current browsing session - these settings are lost when they close their browser window on your site.
+**Historic**: <wrap indent>'Temp', 'Press', 'Wind', 'Humidity', 'Rain', 'Solar', 'DegDays', 'TempSum', 'ChillHrs' or 'Snow'.</wrap>
-=== Bonus Feature ===
+Of course, if your system does not generate a chart it is pointless to force it to display by default.  However, the site will gracefully inform the user that no data has been found.
+++++
+</WRAP>
+==== Dynamic Configuring ====
+<WRAP nicebox red>
+Previously I included a command in **page-manager.js** to clear the sessionStorage on every page load.  I have not included this in this version although it is still a valid command.\\
+++ See more |
+You can still add this command to **page-control.js** if you want.  Add the following before line 29 and the session storage area will be cleared on every page load making any changes current.
-One bonus of the above is that you can set the default chart or record set viewed when a visitor initially views your site by entering the chart or record set **ID** on lines <color brown>**44, 45** and **48 or 49**</color>.  Valid IDs are as shown below:
+**%%sessionStorage.clear()%%**
-**Trends**: 'temp', 'dailytemp', 'press', 'wind', 'windDir', 'rain', 'dailyrain', 'humidity', 'solar', 'sunhours', 'airquality', 'extratemp',  'extrahum', 'extradew', 'soiltemp', 'soilmoist',  'leafwet', 'usertemp' or 'co2'.
+<wrap alert 50% center><color #800>**Remember to remove it or comment it out when you have completed any configuration**</color></wrap>
-**Historic**: 'Temp', 'Press', 'Wind', 'Humidity', 'Rain', 'Solar', 'DegDays', 'TempSum', 'ChillHrs' or 'Snow'.
+++
-Of course, if your system does not generate a chart it is pointless to force it to display by default.  However, the site will gracefully inform the user that no data has been found.
+My preferred method is to use the **Developer Tools** available in most browsers and to edit the sessionStorage variable directly.  For my Alternative Public Website the variable always ends: **-apwConfig** and is prefixed with the parent folder name.  You should be able to edit the **Values** directly and see the effect simply by refreshing the page.
-As the Records pages already select the most appropriate record set, I have not included the options for these but there is no reason why they cannot be used.
+If this is not possible, for whatever reason, simply close the browser and reload the page.  The session variable will have been deleted and whatever you have stored in the **page-control.js** cmxConfig variable will be used.
-<WRAP nicebox red>
-**In order to make the changes you make active for you without having to start a new browser session, you can uncomment line 14** -
-  //sessionStorage.clear()
-This will force the browser to store a new CMXConfig object when you refresh a page or view a new one.  **Do remember to comment it again afterwards otherwise the Charts & Records feature won't work for visitors.**
 </WRAP>
+===== Dashboard Information Panel =====
+<WRAP nicebox orange>
+The contents of this panel can now be changed without editing the **index.html** page.
+<WRAP alert center 60% round>
+=== You should edit this file to include the text that you want to appear on the dashboard page. ===
+</WRAP>
+A new **//index-info.html//** file has been added that can be edited to contain whatever you want to appear in this panel.  Just edit this file and its contents will be used instead of the coded content.++ Note | If you delete this file then the box will revert to the coded content of the index.html page and a warning will be displayed on the console. ++
+</WRAP>