silveracorn.nz MXUI website - Version MX_2.2.6 - 17-June-2023 --: PLEASE NOTE :-- THIS PACKAGE IS PROVIDED AS IS AND IS NOT SUPPORTED. WHILE SOME COMMENT AND/OR ASSISTANCE MAY BE PROVIDED FROM TIME TO TIME VIA THE CUMULUS FORUM, NO SUPPORT SHOULD BE EXPECTED. BCJKiwi silveracorn.nz Weather Website PHP Scripts from Silver Acorn These programs are distributed in the hope that they may be useful, but WITHOUT ANY WARRANTY, without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details. !!! There is NO guaranteed support !!! We would like to acknowledge the significant contribution of those who have gone before us and on whose work we have built. In particular we would like to acknowledge the considerable contribution of beteljuice - Thanks. ################################################################################ CumulusMX MXUI style website:- Requires a working CumulusMX installation ( build 3221 or later !! ). NOTE:- Some features may not work if version is earlier than build 3205 These instructions have changed from previous instructions to suit build 3221. There are additional HowTo files for the optional modules in the MXUIwebsite Opt file set. To utilise the Optional readDayfile (annual Data) option, the Extra Webfiles / End of Day option setting is required. UPDATE your Version of CumulusMX if this is missing !! The first version including this feature is build 3047 and at the time of writing the current build is CumulusMX build 3.25.2 version 3245) The information below assumes that CumulusMX is installed in the path C:\CumulusMX\ If using other locations, then the syntax of the directory / file names may be different. A working example of a website using this template may be viewed here:- https://silveracorn.nz/cumulusmx It is intended as an alternative to the Original or New default website included in CumulusMX There may be minor differences between this package and the one at https://silveracorn.nz/cumulusmx. This website template is based on the look and feel of the internal User Interface website incorporated into CumulusMX It is different from the original included Cumulus website in the cumulusMX/web and cumulusMX/webfiles folders which are currently the default files for a CumulusMX user to create a public website. Some component files of the website are copied and/or may be adapted from CumulusMX. So in the future it is possible that if those files are updated, the CumulusMX source files used for this website may also need updating. This website template also borrows from concepts and code in the Saratoga template. The MXUI style website uses HTML5, UTF-8, PHP, Ajax, JavaScript, and jQuery. This website template also includes additional modules that are not part of CumulusMX. These are included in the separate MXUIwebsite_Options file set. Local and UTC clocks:- ( effectively 'built in' as there is no switch to turn them off! ) If the clock is not showing the correct time for your station, check the setting in settings.php at line 17:- $tz = 'Pacific/Auckland'; and change it to your Time Zone https://us.php.net/manual/en/timezones.php has a list of timezone names Current Conditions:- ( Built into ajaxCUmx.js ) Cloudbase Extremes NOAA Reports Annual Data Davis 'live' Console(s) The basic structure of the site is as follows; yourdomainname/yourhomedirectory/index.php i.e. the 'dashboard' Each .php page file utilises 'includes' to link in the following as required:- CUtags.php settings.php, style sheets required for the page JavaScript files required for the page css files required for the page nav_menu.php the header and navigation menu the page itself - dashboard, now, gauges etc footer.php CONFIGURING THE WEBSITE FILES This package contains a set of core files to create a website with the look and feel of the CumulusMX User Interface. and, a second set of files with five optional modules:- Cloudbase Extremes NOAA Reports Annual Data Davis Live Consoles Refer to the MXUIwebsite Options file set for these modules and HowTo info. There is a separate file for the moon images. Getting Started In the CumulusMX Installation, Check that there are no folder names the same as these:- C:\CumulusMX\webMX C:\CumulusMX\webfilesMX and create two new folders with these names (or alternative names if required). NOTE:- C:\CumulusMX\ may be different for you, substitute the correct path for your CumulusMX installation if required. Back up any existing files in CumulusMX/web, webmx, webfiles, and, webfilesmx Open the MXUIwebsite_2.2.6.zip file and copy the contents of the webMX folder to C:\CumulusMX\webmx copy the contents of the webfilesMX folder to C:\CumulusMX\webfilesmx These files will serve as the master files for any edits you wish to make now and in the future. Preparing the files for your website We recommend notepad++ file editor - available here at no cost! https://notepad-plus-plus.org/downloads/ Ensure your editor Encoding is set to UTF-8 with NO BOM. If you are using a different editor and it does not have these settings, DO NOT USE IT! The files in this template use either 3 spaces, or tabs of 3 spaces width. This setting (in Notepad++ can be changed at:- Settings / Preferences / Language / Tab Settings / Tab size NOTE:- Most code in websites is case sensitive so, for example, between tags. Take care with the case of all text. Also, single quotes ' ', double quotes " ", =, ==, and === each have different meanings and may not be interchangeable. CONFIGURE C:\CumulusMX\webfilesmx\ajaxCUmx.js ***** The settings section is from line 77 to line 157 . ***** ***** !!!! DO NOT EDIT ANYTHING OUTSIDE THIS SECTION !!!! ***** If updating an existing working MXUI website, you may also find programs such as diffmerge or winmerge may be useful to compare and update the new file with your settings. In this settings area, make any changes required to match your station, units of measure etc. These should match those configured in CumulusMX. These may be changed at any time BUT DO NOT change the units in CumulusMX !! !!!! NOTE:- CumulusMX must be configured for no more than 2 decimal places for Temp, Baro, Rain, Height and Wind !!!! If you do not wish to support any non-English languages then change allow_Languages = true; to allow_Languages = false; If you want to use a single non-English language, change allow_Languages = true; to allow_Languages = false; and change set_Language = "en"; to your language e.g. set_Language = "fr"; Note:- The language processing system must be installed as it is used for some English language components, and as the reference for which words to translate to the non-English language(s) so, do not be tempted to remove the included files. Note that you can set the default language for the site as indicated above. This setting is on line 116 change the "en" in set_Language = "en"; to the preferred default language ISO 2 letter code for the site. Rem out any languages that are not supported or you do not wish to offer (or are currently unavailable). e.g. // ["cs", "Český"], CONFIGURE CHARTS While Charts are included as a core page, it does have its own language system. Check the file /js/README_charts.txt for details for including other language translations. CONFIGURE SETTINGS.PHP options on default pages, and Cloudbase Extremes NOAA Reports Annual Data Davis Live Consoles Note, Cloudbase, Extremes, NOAA Reports, Annual Data and Davis options are turned off by default. In C:\CumulusMX\webfilesMX\settings.php the following may be edited:- Line 11 - The shortcut icon (favicon) is configured as the CumulusMX blue cloud. If you wish to change this then a new favicon.ico file in the images folder will be required. There are on-line favicon editors which will generate a favicon from an existing graphic. Line 13 - EDIT the text between - This is the text that displays at the very top of the web browser along with the favicon. Line 17 Set the Timezone ( $tz = ) to suit the location of your station There is a list of timezone names here:- https://us.php.net/manual/en/timezones.php There are switches following this for the optional modules, and other features at lines:- 41 - $show_daylengths - Options for showing Day length and Daylight length on Dashboard 44 - $show_cc_conds - Optional - current conditions ( built into ajaxCUmx.js ) 47 - $show_forecast - default is the Cumulus "Zambretti" forecast Optional - if your station is a Davis OR is an alternative station which provides a forecast something else AND you can provide translations for it if supporting languages. 50 - $show_cloudbase - Optional - Show Cloudbase - Optional Feature 53 - $show_links - Optional - Show dropdown menu for external links NOTE:- the links menu item is placed first as the menu descriptions may be long and could be partly lost off the page if placed at the end of nav_menu. There are two sample links drop down menus included in the main file set. links_singledropdn.html - This provides a single list of links Edit content to suit your site. links_multidropdn.html 'multidrop' provides dropdown menus within the links dropdown menu links_multidropdn.html shows how single and drop down menus may be combined. Edit content to suit your site. 58 - $show_apptemp - Optional - Show Apparent temperature 61 - $show_feelslike - Optional - Feels Like 64 - $show_heatchill - Optional - Show Heat / Chill 66 - $show_heat_uom - Optional - Show Heatindex Unit of Measure. As an Index it does not really have a uom. 69 - $show_humidex - Optional - = > Build 3089 - Show Humidex 71 - $show_humidex_uom - Optional - Show Humidex Unit of Measure. As an Index it does not really have a uom. 74 - $show_AQ - Currently only implemented for Charts - See below for extra sensors airlink / or Extra page(s) 80 - $block_option - Determines which blocks will appear on row 1 and row 3 of the Dashboard There are new preconfigured options for indexblk_hscharts 111 - $show_stormrain - Optional - Show Storm Rain 114 - $show_solar - Optional - Show Solar 119 - $show evt - Optional - show ET - Davis stations only ? 123 - $show_uv - Optional - Show UV 129 - $show_filler - Optional - Show filler block in row 3 or 4 IF there is space - Edit with what ever you wish 131 - $show_filler2 - Optional - Show filler2 block in row 3 or 4 IF there is space - Edit with what ever you wish 133 - $show_filler3 - Optional - Show filler3 block in row 3 or 4 IF there is space - Edit with what ever you wish 137 - $show_extrasens - Optional - Show Airlink and / or Extra page(s) 141 - $show_airlink_out - Optional - Show airlink - Outside 143 - $show_airlink_in - Optional - Show airlink - Inside 145 - $show_extra - Optional - Show extra (WH45 CO2 and pm) 148 - $show_extremes - Optional - Show Extremes - Optional Feature 151 - $show_noaareports - Optional - Show NOAA Reports - Optional Feature 154 - $show_annualdata - Optional - Show Annual Data - Optional Feature 164 - $show_davcon - Optional - Options for Davis Console(s) - Optional Feature 170 - $todayyest_colour - Optional - Option for Today/Yesterday to show coloured positive and negative in difference column 173 - $show_degreeday - Optional - Show Degree Day on historic chart 176 - $show_tempsum - Optional - Show Temperature Sum on historic chart 179 - $show_InTemp = 1; // 0 ( zero ) NO Indoor Temp // 1 Show Indoor Temp 181 - $show_InHum = 1; // 0 ( zero ) NO Indoor Temp or Indoor Humidity // 1 Show Indoor Temp and Indoor Humidity The Settings for Optional pages are turned OFF (set to 0) by default and may be changed at any time but ensure any necessary file(s) from the options file set are copied to webfiles and web folders, are configured if required, and uploaded to the website. Review and change to your preferences. Recommend reviewing the defaults in action before changing! When you make a change, upload the revised file(s) to the website plus settings.php and any others required. nav_menu.php Location ( line 14 ) Note, in the English /langlib/en.json language file, only the current conditions section is used, as English is NOT a translated language. If your language is not English, The English language selection will never see an English Version of your location unless you place an English Version of your location in the first part of all the non-English language files. Do this for each xx.json file that you provide a translation for ( i.e. those without // at the beginning of the language line in ajaxCUmx.js ). If your base language is ENGLISH Line 13
produces the title of your website. You may wish to change the content in cumulusMX Station settings / Location / Name and Description. The ." - ". between $location and $longlocation is the one placed at line 14 as shown above. If you don't want a - there, then change line 14 to:-
This will only produce a single space between location and long location. If you want more spaces add   between ." ". as many times as desired. Once you are happy with the result, then open each /langlib/xx.json file and change line 14 to match the text that is showing on the website. Copy and paste that text into the LEFT part replacing the text between the " and " in "Silver Acorn - Royal Oak, Auckland, New Zealand":" If you don't want the title translated, then put the same text in the second part as well. If your base language is NOT ENGLISH $location and $longlocation most likely contain text in your own language. If this is the case and you follow the instructions above for English, visitors to your site who select English will see the site name in your language not English. There are options:- a. Do not offer an English version of your site title - do nothing different from the instructions above. b. Change the text in CumulusMX for $location and $longlocation to English - Note you can set your website default language to your language in ajaxCUmx.js. c. Leave $location and $longlocation in the Cumulus configuration in your language and in nav_menu.php, at line 14, replace
with
and use the same text between " and ":" in the English (left part) of the xx.json language files. See the separate /langlib/README.txt file for detailed information to assist with the language files. CONFIGURE GAUGES ./lib/steelseries/scripts/gauges-sa.js gauges.js has changed back from a php file to .js file. Lines 38 thru 137 contain option settings. Take care when changing anything here. The only settings required are:- line 44 realtime interval line 47 graphUpdateTime There are further option settings below this including inside/outside. inside/outside must be configured in MX Settings / Station Settings / Graphs / Data Series Visibility While there is no setting for turning on/off apparent/feelslike in gauges.js gauges.php responds to settings.php apparent/feelslike switches. If using the OPTIONAL Modules:- Refer to the MXUIwebsite_Options file set for additional HowTo information for each module. SETTING UP THE WEBSITE After completing the configuration options above, decide how you wish to test the new MX style website. We suggest you create a new folder mxtest on your public website. for example - yourdomainname\mxtest When you are satisfied that the edits are complete, you are ready to FTP the files (and subfolders) in the webfilesmx folder to yourdomainname\mxtest (or whatever other name you used). We recommend Filezilla FTP client to transfer files (and subfolders) to the website, available free from https://filezilla-project.org/ We also find WinSCP FTP client useful to transfer files (and subfolders) to the website available free from https://winscp.net/ Both work in much the same way and generally have similar features. Stop CumulusMX If updating a previous Version of the CumulusMXUI website create new backup folders of the previous installation so you have a backup to use if required (e.g. rename the existing xxxback folders). 1. Create a CumulusMXback folder and make a complete copy of the existing cumulusMX installation by copying the entire contents of the working cumulusMX folder to cumulusMXback Set up the new files 2. Rename the C:\CumulusMX\web folder to C:\CumulusMX\webback 3. Create a new empty C:\CumulusMX\web folder 4. Copy the files in the webMX folder to the new C:\CumulusMX\web folder OPEN C:\CumulusMX\Cumulus.ini in your editor AND save as C:\CumulusMX\Cumulus.iniback to ensure you have a copy of the existing working file. As the standard web files are not being used, some settings in the CumulusMX UI configuration are different from a standard installation. Start CumulusMX Settings ONLY check / change the settings indicated below, If you have a working website then other settings should not be changed Internet Settings/ Web/Upload site *** Note these instructions are for FTP *** Select the FTP Protocol to use - Choose carefully ensuring that you select an option that is supported by your website Host. Remote FTP Directory - change (or add to if there is no folder after yourdomainname) the last part of the existing director to mxtest (or whatever other name you used) Advanced Settings Skip these unless you are sure of what you are doing! Web/FTP settings As this template does not use the supplied default website (although you could run that at the same time and do its own configuration), the settings here are for this MXUI template only. Unless you are sending data to the default website, DO NOT tick Enable file copy of standard files Unless you are sending data to the default website, DO NOT tick I want to use the supplied default web site Normal Interval settings tick Enable the web update interval Set Web interval - Typically 10 (mins) or what ever you used before Tick Enable update interval uploads Standard File Settings tick the boxes according to the instructions below. read the instructions carefully !. Graph File Settings, and Daily Graph File Settings tick all the boxes for any files you wish to send and for which you have sensors. read the instructions below carefully !. Real time Interval Settings / Daily Graph File Settings tick Enable Realtime Realtime interval Typically 10 (seconds) or what ever you used before tick Enable real time Uploads un-tick realtime.txt Unless also using default website (replaced by realtime-xT.txt / realtime-x.txt in C:\CumulusMX\web). realtime-x.txt file contains all the standard realtime.txt data points PLUS additional data points for this website. tick realtimegauges.txt and Upload General settings tick FTP rename un-tick Delete before upload tick UTF-8 encoding un-tick FTP logging Moon Image un-tick Generate Moon image (unless sending to default website). This file is not required for the CumulusMX UI website as ajaxCUmx.js will automatically update the images included in this fileset (or any others you may wish to use) from the included set of images derived from the CumulusMX MoonBaseImage.png so they are the same as those CumulusMX would send. This change has been made to provide the same images for both the index page and the Cloudbase image. Scroll to bottom of page and click Save Settings Settings Extra web files While the realtimegauges.txt file and .json graph data files (and a few others) are automatically processed and uploaded by CumulusMX with the settings detailed above, Settings / Extra web files must be used to process and upload the additional data files required. /httpdocs/ This may be different for your website as different web hosting services use different terminology/file structures. Check the instructions of your hosting service to ensure the correct folder structure is used. If you already have a website then it should match what you have as the first part of the settings in Internet Settings/ Web/FTP site Directory The settings required are; ! Check your website path details ! LOCAL FILENAME REMOTE FILENAME Process Realtime Upload UTF8 BINARY END OF DAY C:\CumulusMX\web\realtime-xT.txt httpdocs/mxtest/realtime-x.txt tick tick tick tick notick notick C:\CumulusMX\web\realtimetagsT.php httpdocs/mxtest/realtimetags.php tick tick tick tick notick notick C:\CumulusMX\web\CUtagsT.php httpdocs/mxtest/CUtags.php tick notick tick tick notick notick C:\CumulusMX\web\records-saT.js httpdocs/mxtest/records-sa.js tick notick tick tick notick notick NOTE:- If your locale uses comma decimal characters and these are set in CumulusMX, there is an automatic conversion (from ver MX_2.1.3 - 15-Nov-2020) in ajaxCUmx.js which will accept and output comma decimals when the data file has comma decimals. NOTE:- The ajaxCUmx.js file comma decimal code relies on ALL data items in the realtime-x.txt file data having no more than 2 decimal places. ET uses the same Unit settings as rain BUT MX adds an extra decimal place to the ET data. If rain units are set to more than 1 then ajax will fail if comma decimals are used. There is now a limiting setting <#ET dp=2> in the tag files to compensate for this. Any other 'realtime' units set to more than 2 decimals will cause ajax failure. Start CumulusMX Check the new Website to ensure files are uploading at both realtime and tag-time (interval) times. NOTE that some pages will not work and error messages may appear until the tag-time (interval) files have uploaded at least once. Remember there is an FTP Now! option in the Cumulus MX User Interface which will update all the FTP files immediately. With filezilla / WinSCP, the website files may be sorted by "Last modified" / "Changed". Sort so the newest files are at the top. A right-click then click refresh on the website panel will make it easy to check that the files are updating. If further edits are required, Edit the current file in C:\Cumulusmx\webfilesMX Rename the working file on the website (use the FTP client) to retain it in case there is an error in the update which may stop the page (or site) working! FTP the changed file from the local webfilesMX folder to the website. If there is an error, use your FTP client to delete the new file and restore the previous file. Look at the edits made and correct them then try again. Click on the Valid HTML5 link at the bottom of each page that has been changed to ensure there are no errors. When working correctly, delete the old version(s) from the website. If you wish to install any of the optional pages, work on those now. Once you are comfortable with the way the test website is working, using the FTP Client, rename any existing Cumulus website folder OR if running that site directly in the root of the host system, create a new folder and copy all the existing working website files into it, then rename the mxtest folder to the original name of the old website OR move all the mxtest files into the original website location. Then work through the CumulusMX UI settings again Web/FTP site Change the Directory back to the old website location Change extra webfiles configurations changing only the Remote filename destinations to match the new CumulusMX website location. Website visitors will now view the new CumulusMX style website using the same URL as before. Enjoy BCJKiwi