Cumulus Wiki

Simple Website setup

Revision as of 10:46, 1 July 2020 by Sfws (talk | contribs)

The 'Simple Website' setup is by far the easiest and quickest way to get your Cumulus data online. It uses the standard Cumulus web templates and the process is well documented in the Help files for Cumulus 1 under 'Setting Up your Website'.

However this article may help further, and to some extent has been updated to also cover MX.

The assumption in this article is that FTP (protocol may vary for MX) is used to get files onto your web server. At present this article does not cover alternative of running your own web server and using copy to get files onto that web server.

Checklist

Below is your check list before you start:

  1. You have File Transfer Process (FTP) webspace (i.e. your provider allows you to use FTP to place files in your webspace)
  2. and an FTP tool (use this cross-reference to get more information)

From your webspace provider you will be given:

  • FTP server Host name (this is the name that is equivalent to the w.x.y.z format Internet Protocol version 4 (=IP) address in the screen-shot below - see the notes below it) (N.B. Some servers might have several names at a single IP location). In establising a connection to a host name, Cumulus will contact the domain name server (=DNS) your system uses to convert the name you specify to the IPv4 address that enables the connection to be made; that step not needed if IPv4 used directly.
  • FTP Port (in most cases port 21 is reserved for file transfer clients)
  • username (controls access to the directories you can update)
  • password (do not disclose this when you ask questions on the support forum)
  • webspace folder / directory (could be something like "public_html" which is related to the FTP root as explained later on this page for the file and folder structure you will create, that is different to the Universal Resource Locator (=URL) root when you look at the file through the browser's port)

For a simple set-up, a server that uses a Linux environment is normal for displaying standard Cumulus pages (although some people use a server on their own machines using a Windows environment).

Although Cumulus 1.x.y builds do not require PHP Hypertext Pre-processor script, having that available will allow you to subsequently use more of the customised pages on offer from other contributors, and if you later decide to write your own web pages PHP does allow you to 'include' standard bits of code (stored in just one file) on multiple web pages easily.

Do check with any provider that they let you FTP files with at least all the following extensions:

  • .txt (critical for real time processing, steel series guages and similar) and .css (defines look for web pages)
  • .htm and .html (used for files that define web page structure)
  • optionally .php if you might use that
  • .json (essential for Cumulus MX)
  • .js (script files)
  • .bmp, .png, .gif, .jpg (and any other graphic formats you might use)
  • audio and video mime types (Cumulus 1.x.y only: uses .swf)

Folders and Files to Transfer just Once

Overview

Firstly, we need to get several files and folders onto your web space. The files and folders vary depending on flavour of Cumulus, and will be described in next 2 sections, but this section gives a steer on how you might get the folders and files onto the web server.

  1. This is a one time only exercise but is essential to the operation of your Cumulus website.
  2. Configure your FTP tool to connect to your web server.
  3. Once done, make your connection and change to the correct directory/folder on your site, as advised by your provider.
  4. You may wish to create a sub-folder to store your weather site, but for this purpose we will assume not.

Whether you are using Cumulus 1 or Cumulus MX, the first task is to copy everything (see next section for details of exactly what) in the:

  • Cumulus 1: Cumulus\webfiles
  • Cumulus MX: CumulusMX\webfiles

folder into where you want to store your web site pages, preserving the sub-folder structure.

Cumulus 1.x.y webfiles folder

  Look at the Cumulus\webfiles folder on your PC.

The folders to be uploaded are:

  • dbimages
    • When you upload this folder, all of its files will also be uploaded (this folder is essential for the gauges.htm page to work).
  • images
    • When you upload this folder, the one file within it will also be uploaded (N.B. this is the folder to which Cumulus 1.x.y will upload graph images etc. by FTP when it is running, so the folder name cannot be changed).

One file to be uploaded is the Cascading Style Sheet:

  • weatherstyle.css

and there are 2 more files also used for the gauges.htm page:

  • wz_jsgraphics.js
  • CumulusRealtime.swf

The (obsolete) Microsoft Silverlight software is used for the full standard gauges.htm page (runs the real time graphics).

The transfer process

If you're using a graphical ftp client like Filezilla (recommended), in the left hand pane just navigate to the webfiles folder in Cumulus, open it, and you should see the five (Cumulus 1) or four (Cumulus MX) items listed in previous section.

  

Select them all as in left image, and drag them to your web site in the right hand pane. That's the setup done as in right image.

Cumulus MX webfiles folder

  Look at the CumulusMX\webfiles folder after un-zipping the download on your computer/device.

The folders to be uploaded are:

  • images
    • When you upload this folder, the two files within it:
      • logoSmall.png (I have not been able to find where this is used, perhaps someone knows and can update this message)
      • and picture.jpg (this is used for background to standard web pages, you might upload a different image with same name instead)
    • will also be uploaded
  • js
    • When you upload this folder, the one file within it will also be uploaded
  • lib
    • When you upload this folder, the 3 sub-folders within it will also be uploaded
      1. highstock
        • This script library is NOT used since version 3.5.0 (an old version of highstock is downloaded from the https://code.highcharts.com/ Contents Delivery Network for drawing the graphs on the Trends page)
        • Prior to that version, the files within this sub-folder were used for drawing the graphs on the trends page
        • If you do decide to update highstocks, you will need to edit all 3 lines in web/trendsT.htm mentioning highcharts and replace the obsolete "8.0" by the version you choose;
      2. jquery
        • This contains 2 files: jQuery template, and jQuery version 1.9 minimised code
        • This is used for the standard trends web page
        • You might think 1.9 is very old (despite the file name saying latest it is obsolete), but the jQuery template does not work with newer jQuery.
        • Actually, MX also uses jQuery 1.8.2, an even more obsolete version, for the gauges web page, but that is downloaded from a Contents Delivery Network by that web page.
      3. steelseries
        • This subfolder contains 3 further sub-folders containing HTML5 Canvas Steel Series gauges code needed for the gauges web page
        • Most of this code is standard from the steel series package described elsewhere in this wiki, but there is a slight tweak for MX to the defaults in the javaScript file.
        • Should you subsequently want to update gauges, for this web page, the latest version can always be downloaded at SteelSeries_Versions within this Wiki.

The file to be uploaded is the same Cascading Style Sheet as for Cumulus 1:

  • weatherstyle.css

Settings required for automatic regular uploads to web server by Cumulus

Internet Settings

Configuration menu; Internet Settings screen; for Cumulus 1

  Within Cumulus 1.x.x, click Configuration, Internet Settings (for Cumulus MX the interface is as described in the MX part of the forum)

 

  1. Within the Sites/Options tab you should see (Picture is Cumulus 1.x.y interface) a frame called 'web site' in the top left corner.
  2. The actual settings will not be as illustrated, but should be as described in section after next.
  3. Click "OK" when you have entered all the values.

Admin Interface: Settings menu: Internet Settings page; for Cumulus MX

  In Cumulus MX, the settings screen is different (part of it can be seen in MX_Administrative_Interface#Internet_Settings article).

  1. Again, the next section describes what to enter in each section. Note in MX, you need to click on section headings to open up the options to be set within each section
  2. Open up Web/FTP site to enter host, port, protocol, remote directory, username, password, forum, and webcam
  3. Scroll down, and Click the Save button when you have entered all the values.

Information requested on Internet Settings

  1. Host name
    • Here enter your FTP server name.
    • An example could be myserver.org. Just enter a HOST NAME or IP ADDRESS.
    • Do not enter a URL - do not include "ftp://" or "http://" or anything similar.
    • If you have managed to transfer files using a FTP tool, its log should show the host name or the (numbers separated by dots) Internet Protocol address. The illustration shows an IP (version 4) address typical of a local server. (Note that with a new web site, or following a change of host, it might take a couple of days for the numerical IP address to be associated with the host name on all Domain Name Servers. If that makes no sense to you, basically it means be patient if you don't get access on first day!)
  2. FTP port
    • This is normally 21 unless your provider has told you otherwise
  3. For Cumulus MX only, Select the FTP protocol to use. Hopefully, you know which to choose, or can ask your web space provider.
  4. Directory on Cumulus 1, Remote FTP directory for Cumulus MX
    • It may be blank, or may be a folder structure.
    • Generally your provider will have given you instructions what to enter here if you need to specify a FTP root relative to some overall root, obviously you might then want to make a sub-folder for the weather pages uploaded by Cumulus and if so then follow the blank or whatever for root with '/' and then your sub-folder name.
    • It is almost always case sensitive so type it exactly as advised. There will be NO spaces at the start, end, or anywhere within, the name. It is a relative path from the overall root. If you have successfully used a FTP tool to transfer files, then (as in before image above) there should be a reference to the directory in the log dialogue of establishing connection to your website.
  5. Username and Password
    • In all cases your provider will tell you these two values.(If you set up your own web-server, then you determine these two values in the set up).
    • It maybe, or may not be, the same username and password used for your email, username could even be your email address. Again this is case sensitive so type it exactly as advised. Again if you have successfully used a FTP tool, you will have specified username and password for that, so use same values for Cumulus.
    • Cumulus sends these (using standard commands) to the server to initiate a session of contact, and waits for the server to confirm the session has started.
  6. Forum URL
    • This can be left blank, if so then the standard web pages will not include a navigation link with the label Forum. However, if you type https://cumulus.hosiene.co.uk/search.php?search_id=active_topics here, then the navigation link labelled Forum on each standard web page will link to the Cumulus support forum and will initially display those postings that are most recent. (You might want it to display a particular sub-forum instead, but to keep this description simple that is not explained further). See Cumulus 'Help'.
  7. Webcam URL
    • This is discussed in the Cumulus 1 help, it was created as many people decided to add an addiitonal web page for their web cam and asked Steve Loft to make a link for that.
    • It can safely be left blank if you are only going to use the standard web pages.
    • Other people use it as an easy way for every standard web page to include a link to somewhere else on their web server, a home page, a information about locality page, or a third party web page they have added to their web site.

Selecting what Cumulus is to upload

Cumulus 1 FTP settings

Now we need to select the FTP settings which are still on the Internet Settings screen in the Configuration menu:

  1. In this 'frame' first click on Auto Update; this tells Cumulus you want it to automatically process the web tags in the templates, and generate web pages.
  2. The illustration (in Cumulus 1 interface on left below) shows Use active FTP mode un-selected as Cumulus Help suggests. In active mode, Cumulus is listening for an incoming data connection from the server; in passive mode, Cumulus asks the server if it can establish a connection.
  3. The illustration (Cumulus 1 interface) shows Use FTP rename selected as Cumulus Help suggests.
  4. Leave Delete before upload un-selected.
    • You may need to experiment with changing these last 3 selections, to find which work settings best as it depends on your web server.
  5. Leave UTF-8 encode selected (all standard Cumulus web pages use this encoding). This selection is shown in both Cumulus 1.x.y and Cumulus MX illustrations below with red arrow.
  6. Now look at Interval, this is how often Cumulus will update your website.
    • It has been set in both illustrated examples below to 5 minutes as that is quite good when you first start so you can see all your pages being updated frequently. Typically people set this to 10 or 15 minutes on established sites. It is tempting to change this to 1 minute, but little is gained from this as on most web pages very few figures change that frequently.

 (Left hand picture is Cumulus 1.x.y interface, right hand picture is Cumulus MX settings screen) 

Next, click on the Files tab if you are using Cumulus 1, or within the "Settings" menu on Cumulus MX select Extra Files: What you do here depends on which Cumulus version you are using.

Cumulus 1

 


 

Make sure both “Include Standard” Files and “Include Standard Images” are ticked in Cumulus 1.

You have now told Cumulus how to update your web space with the Standard Cumulus Template files for the web.

Admin Interface: Settings Menu: Internet settings: Web/FTP settings

 

 
  1. Click on this heading to expand settings as per illustration.
  2. Auto update
    • Tick this to enable updates to a web server by MX. (Don't tick it if you don't have any web space).
  3. Include standard files
    • Standard files are the web page templates in the web folder, each file as a name ending in "T.htm". Tick here if you want those files to be processed by MX and uploaded at standard web interval to the host and directory we have set earlier.
  4. Include graph data files
    • These are files with an extension ".json" and MX generates these automatically, storing them in the web folder. Tick here (as arrowed) if you want those files to be processed by MX and uploaded at standard web interval to the host and directory we have set earlier.
  5. Include Moon image file
    • We first need to set (later on this same settings page) that MX is to use system drawing to produce "moon.png" in the same web folder from "MoonBaseImage.png" in that folder. The base image is of a full moon, MX uses system drawing to generated a masked version of this image every hour that reflects the current phase of the moon and stores that in "moon.png".
    • With "moon.png" being generated, we can tick here to include the new image in an upload by FTP every hour.
  6. ActiveFTP mode, FTP rename, Delete before upload
    • Please be guided by the tips below these selections on the settings page.
  7. UTF-8 encoding
    • Cumulus supports just two encodings, please see Encoding section in another article for more information. Here just tick this selection for standard web pages.
  8. FTP logging
    • Normally, this is left unticked, but if you want to check MX is uploading (and you use the simple FTP protocol), you can tick this for every FTP transfer to be logged to MXDiags.
  9. Upload interval
    • Standard web pages are updated on the hour and every x minutes thereafter, where x is the number you enter here. Most people would choose 10, 15, 20, or 30, here depending how much uploading they want, and how up to date they want the displayed information to be.
    • As an aside, if you are not using the standard web pages, many third party web pages use ajax (don't worry about what that is) to allow some of the web page content to be updated far more frequently than the actual web pages get uploaded.
  10. The realtime settings are only needed for the gauges page and settings depend on your MX version.

From build 3042, MX automatically uploads the realtimegauges.txt file.

Note that the realtimegaugesT.txt file for MX is slightly different to the one for Cumulus 1, and it is important to use the one supplied with MX for MX.

You have now told Cumulus how to update your web space with the Standard Cumulus Template files for the web.

ADDITIONAL INSTRUCTIONS FOR OLDER BUILDS:

Prior to build 3042, you also need to specify an extra file in the table for the steel series gauges page to work: 

  1. 'Local filenames' column
    • Enter the path and filename for the realtimegaugesT.txt file where shown by red box. This will normally be web\realtimegaugesT.txt on Windows, and web/realtimegaugesT.txt on other platforms.
  2. 'Remote filenames' column
    • The green box shows where you must type the path to where you want the web page to appear (i.e. where the other web pages are uploaded to) ending with the file name realtimegauges.txt. Typically the path will involve specifying the directory you entered on the 'Sites/Options' tab (see the 'Web Site' settings step 3 for that tab above).
  3. 'Process?' column
    • Select this (ringed in purple), as realtimegaugesT.txt contains web tags and needs to be processed to create the remote file.
  4. 'Realtime?' column
    • Select this (ringed in purple), only if you want the file to be created at whatever interval you have defined for real-time updates (see 'web settings' point 7 above for where you did that); otherwise it will be updated on your web site at the normal updating interval.
  5. 'FTP?' column
    • Select this (ringed in purple) if the destination is remote (don't select if the destination is local).
  6. 'UTF-8?' column
    • This is irrelevant for this file.

Optional Pseudo Real-Time Data

  1. As part of the Standard set-up you can request Cumulus to provide pseudo real-time data. The blue arrows in the illustration shows the relevant items for Cumulus 1 in the left hand drawing and for Cumulus MX in the right hand drawing.
    1. There are now three 'Enable...' boxes for Realtime;
      • if you want Cumulus to upload (at the real-time interval you choose) the realtime.txt file for the 'Flash' gauges on the standard Cumulus 1 gauges page, you need to tick all three boxes. (In reality, the standard cumulus 1 web templates used in this Simple setup only include two ‘realtime’ elements to show wind speed and direction on the gauges page - it does not need the rest of the information in the file).
      • For Cumulus MX, if you want Cumulus to upload (at the real-time interval you choose) the realtime.txt file, this requires all 3 boxes to be selected as shown in the right hand illustration.
      • If you are running Cumulus 1.x.y, and do not wish to provide real-time data, un-tick the 3 “Enable Realtime” boxes, and comment out the last two graphics on the 'gaugesT.htm' template.
    2. The next selection is the time Cumulus will wait after sending a burst of real-time information until it re-starts for producing another burst of real-time information.
      • In this example, 90 seconds. Consider Real-time carefully -- firstly this impacts on your internet connection as Cumulus will update a very small file on your website every XX seconds. Also, some weather stations only update Cumulus less often (e.g. The Fine OffSet stations are updating every 48 or 60 seconds) so a 15 second real-time update is wasteful and unnecessary.




Testing

  1. You can force an immediate web update to test your settings by clicking FTP now in MX found at the bottom of the settings menu,, it simply returns a message there when it has run.
    • The equivalent is in File menu within Cumulus 1, clicking Web Update there.
      1. In Cumulus 1 this will display a window of progress as it uploads the necessary files to your web space (or show a failure message). (Within the Configuration menu, you can turn on 'FTP logging' for full diagnostics).
      2. Once completed the Cumulus 1 progress display will end with “Logging Out” and you can close the window.

Both Cumulus 1.x.y, and Cumulus MX, while running should create the 9 standard web pages in the local 'web' sub-directory, and upload these to the web space by FTP.

  • Cumulus 1.x.y should upload by FTP:
    • a moon image (moon.bmp),
    • the 3 images wind images (compass.png, windgauge.png, windrose.png) as seen on Cumulus main screen,
    • and graphs for 'trends.htm' page (hum.png, humsm.png, intemp.png, intempsm.png, press.png, presssm.png, rain.png, rainsm.png, raind.png, raindsm.png, raint.png, raintsm.png, temp.png tempsm.png, tempm.png, and tempmsm.png;
    • optionally depending on settings it also uploads solar.png, solarsm.png, sunshine.png, sunshinesm.png, uv.png, and uvsm.png) from the 'web\images' sub-directory to the 'images' folder on your web space.
  • Cumulus MX should upload by FTP a total of 22 files:
    • a moon image (moon.png)
    • 9 standard web pages
    • realtimegauges.txt
    • 11 .json files that Cumulus MX creates in the top level directory (that is, the one it's been installed in), for the graphs ("graphconfig.json", "tempdata.json", "pressdata.json", "winddata.json", "wdirdata.json", "humdata.json", "raindata.json", "solardata.json", "dailyrain.json", "sunhours.json", "dailytemp.json").


Apart from the differences in the user interface, and the differences in web pages for 'gauges.htm' and 'trends.htm', both versions of Cumulus generate the same web pages. When looking at the uploaded web pages using a browser, both can be tested in the same way.

  • Open a web browser
    1. Type in 'your web site' Universal Resource Locator (URL) name, if you were hosting yourself then localhost is usually recognised. It could be the same as you typed for Host Name, anyway, your provider has probably told you what your web site name is.
    2. The web server will have a list of file names that specify the order of names to look for to determine the first page to be shown, Cumulus produces a page called index.htm and (unless you have uploaded additional pages with names that occur earlier in the server's list) that will be loaded,
    3. Click one of the navigation links at the bottom of the standard Cumulus pages, and the next page will be sent to the browser. Repeat this to look through your complete Cumulus website with your data on the various pages.

Possible problems

  • You don't see what you expect, see a lot of text, the page lacks colours and/or has a bad layout, etc
You have not uploaded your Core files -- go back to the section above and check the instructions for your version of Cumulus.
  • You do not see your Cumulus Site but see another site, an error message or a blank
    • Check you are uploading to the correct folder/directory on your webspace. There is a good chance you have mis-typed the details in the Internet Configuration section above. See this FAQ for help.
    • Via your FTP tool ensure that your website has an index.htm file. It should NOT have index.html, default.html, default.htm, index.php, default.php. Any page with such a name can be removed if necessary, or see the support forum for ways to force a server to load your preferred page (using .htaccess).


  • My realtime section of the ‘gauges’ page is not refreshing every x seconds
    • If using free hosting, they may not permit uploading of ‘txt’ files. Please check with them.


  • Is there a log file to help with my problem?
    • Yes, you can enable FTP logging and then examine the file that will have more detail on any issues. It may also be useful to upload the log file to the Cumulus Support Forum when asking for help. More on Ftplog.txt
Retrieved from "https://www.cumuluswiki.org/index.php?title=Simple_Website_setup&oldid=6522"