Differences

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

--- wiki:aw:configure [2025/10/03 15:45] – Neil
+++ wiki:aw:configure [2025/10/20 08:32] (current) – [Dynamic Configuring] Neil
@@ Line 1: / Line 1: @@
 ====== Configuring the site ======
 <WRAP nicebox teal>
-**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-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.  This object is stored locally on your machine as '**SessionStorage**' so is only stored for the current browsing session and 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>
-===== Information =====
+===== 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.
+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 all entries.
+Below is an explanation of the <color #800>**critical**</color> entries.
 <WRAP group>
 <WRAP twothirds column>
-<WRAP nicebox green>
+<WRAP nicebox teal>
-=== Charts ===
+==== Data ====
-This is used dynamically by the site to record the last chart viewed.  When you return to a charts page it displays same chart.
+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.
-=== Records ===
+++++ See more |
-Again this is dynamically changed by the website based on the last set of records you viewed.
+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.
-=== Custom ===
+  * Entries that start with **/** will be an absolute path to your data.
-<wrap info>Only applies to the latest version.</wrap>\\
+  * Other initial characters will interpret the entry as a relative path.
-This area is used to configure user settings.  This is covered in detail in the [[cmxConfig page|wiki:aw:cmxConfig]]
+  * See [[:wiki:aw:Config-Detail|detailed information]] with images.
+++++
-==== Data ====
+==== NOAA Reports ====
-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.
+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. ++
-=== Menu ===
-Theis should be used to point to the javascript manu file used to drive all the menus on the site.  Its default value is **js/ows-menu.js**. More details can be found on the page [[the-menu|Creating your own menu]].
-=== 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.
-=== The Gull ===
-As in the AI, the seagull can be animated.  The default animation is for it to fade in slowly over 5/10 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.  Other keyframe animations are provided with a prefix gull.
-<wrap info>Other entries are covered in the page devoted to [[cmxConfig page|wiki:aw:cmxConfig]]</wrap>
+==== Menu ====
+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]].
+=== Custom ===
+This area is used to configure other user settings.  This is covered in detail in the [[cmxConfig page|wiki:aw:cmxConfig]]
 </WRAP>
@@ Line 38: / Line 38: @@
 <WRAP third column>
 === The cmxConfig object ===
-<code javascript>
-CMXConfig = {
-    'Data': '',
-    'Menu': 'js/aw-menu.js',
-    'NOAAReportPath': 'Reports/',
-    'Theme': '',
-    'StaticHead': true,
-    'StaticFoot': true,
-    'paddingTop': 2,
-    'paddingBottom': 1,
-    'paddingUnits': 'em',
-    'Seagull': {
-        'Animation': '',
-        'Speed': 5,
-        'OnTop': false
-    },
-    'Charts':{
-        'Trends': '',
-        'Historic':''
-    },
-    'Records':{
-        'All':'',
-        'Monthly':''
-    }
-}
-</code>
-<WRAP hide>
 <code javascript>
 cmxConfig = {
@@ Line 99: / Line 72: @@
 </WRAP>
 </WRAP>
+==== Non-critical entries ====
+<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>
-<WRAP hide>
+**Speed**:<wrap indent>Sets the speed of the animation.  Setting this to **0** effectively stops the animation</wrap>
-==== The remaining entries ====
+**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>
+++++
-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.
+==== 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:
-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.
+**Trends**: <wrap indent>'temp', 'dailytemp', 'press', 'wind', 'windDir', 'rain', 'dailyrain', 'humidity', 'solar', 'sunhours', 'airquality', 'extratemp',  'extrahum', 'extradew', 'soiltemp', 'soilmoist',  'leafwet', 'usertemp' or 'co2'.</wrap>
-=== Bonus Feature ===
+**Historic**: <wrap indent>'Temp', 'Press', 'Wind', 'Humidity', 'Rain', 'Solar', 'DegDays', 'TempSum', 'ChillHrs' or 'Snow'.</wrap>
-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:
+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.
-**Trends**: 'temp', 'dailytemp', 'press', 'wind', 'windDir', 'rain', 'dailyrain', 'humidity', 'solar', 'sunhours', 'airquality', 'extratemp',  'extrahum', 'extradew', 'soiltemp', 'soilmoist',  'leafwet', 'usertemp' or 'co2'.
+**%%sessionStorage.clear()%%**
-**Historic**: 'Temp', 'Press', 'Wind', 'Humidity', 'Rain', 'Solar', 'DegDays', 'TempSum', 'ChillHrs' or 'Snow'.
+<wrap alert 50% center><color #800>**Remember to remove it or comment it out when you have completed any configuration**</color></wrap>
-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.
+++
-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.
+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.
+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>
-<WRAP nicebox red>
+===== Dashboard Information Panel =====
-**In order to make the changes you make active for you without having to start a new browser session, you can uncomment line 14** -
+<WRAP nicebox orange>
-  //sessionStorage.clear()
+The contents of this panel can now be changed without editing the **index.html** page.
-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 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>