5,838
edits
Category:Cumulus MX: Difference between revisions
→Editing the User Interface
| Line 120: | Line 120: | ||
== Editing the User Interface == | == Editing the User Interface == | ||
If your weather station does not have solar instrumentation you might wish to | You need some understanding of Hyper-Text Markup Language to do this correctly, but here are simple examples. | ||
Remember, if you decide to download a new release to not overwrite any file(s) that you have edited, or your edit will be lost. It is less likely that a new release will change the interface files than other files, but each release zip contains all MX files, even those not changed since previous release. The release notice will usually give some idea of whether interface files have changed. | |||
=== Removing Solar Figures === | |||
If your weather station does not have solar instrumentation you might wish to remove some of the display elements that relate to that. | |||
# Navigate to '''\CumulusMX\interface''' folder. | # Navigate to '''\CumulusMX\interface''' folder. | ||
# Open the file '''now.html''' in an editor designed for code (e.g. Notepad++ for Windows) | # Open the file '''now.html''' in an editor designed for code (e.g. Notepad++ for Windows) | ||
# Near the bottom of the file edit it by inserting HTML comment delimiters (opening after </thead>, closing before </table>) so it looks like this: | # Near the bottom of the file edit it by inserting HTML comment delimiters (opening after </thead>, closing before </table>) so it looks like this: | ||
<pre><table id="SolarTable" style="width:100%"> | <pre><table id="SolarTable" style="width:100%"> | ||
<thead> | |||
<tr> | |||
<th> Solar</th> | |||
<th></th> | |||
<th></th> | |||
</tr> | |||
</thead> | |||
<!-- | |||
<tr> | |||
<td>Solar Radiation</td> | |||
<td><span id="SolarRad">--</span></td> | |||
<td>W/m<sup>2</sup></td> | |||
</tr> | |||
<tr> | |||
<td>Sunshine Today</td> | |||
<td><span id="SunshineHours">--</span></td> | |||
<td>hrs</td> | |||
</tr> | |||
<tr> | |||
<td>UV</td> | |||
<td><span id="UVindex">--</span></td> | |||
<td></td> | |||
</tr> | |||
--> | |||
</table> </pre> | |||
=== Adding derivatives not shown on the existing interface page === | |||
It is a JavaScript file '''\CumulusMX\interface\js\dashboard.js'''that reads the standard web tags and inserts their content into position indicated by values of the HTML attribute "id" on the interface screens. The standard '''\CumulusMX\interface\now.html''' does not include temperature trend for example, but because there is a '''temptrend: inp.TempTrend.toString()''' defined in the JavaScript file, you can easily add it to the "now" page by a simple insert of the middle row here: | |||
<pre><tr> | |||
<td>Outdoor Temperature</td> | |||
<td><span id="OutdoorTemp">--</span></td> | |||
<td><span class="TempUnit">--</span></td> | |||
</tr> | |||
<tr> | |||
<td>Trend</td> | |||
<td><span id="TempTrend">--</span></td> | |||
<td><span class="TempUnit">--</span> hour<sup>-1</sup></td> | |||
</tr> | |||
<tr> | |||
<td>Dew Point</td> | |||
<td><span id="OutdoorDewpoint">--</span></td> | |||
<td><span class="TempUnit">--</span></td> | |||
</tr></pre> | |||
The Beaufort force wind description is not mentioned in the "dashboard.js", but there is a web tag <#beaudesc> for ''The current wind speed Beaufort description (e.g. "Gale")''. So we can edit | |||
'''dashboard.js''' to add this: | |||
<pre> | |||
wlatest: inp.WindLatest.toString(), | |||
beaudesc: inp.Beaufort.toString(), | |||
wspeed: inp.WindAverage.toString(),</pre> | |||
and then we can edit '''now.html''' to include it: | |||
<pre> | |||
</thead> | |||
<tr> | <tr> | ||
<td> | <td>Latest</td> | ||
<td><span id=" | <td><span id="WindLatest">--</span></td> | ||
<td> | <td><span class="WindUnit">--</span></td> | ||
</tr> | </tr> | ||
<tr> | <tr> | ||
<td> | <td>Bearing</td> | ||
<td><span id=" | <td><span id="Bearing">--</span></td> | ||
<td> | <td><span id="BearingCP">°</span></td> | ||
</tr> | </tr> | ||
<tr> | <tr> | ||
<td> | <td>Latest Beaufort</td> | ||
<td><span id=" | <td><span id="Beaufort">--</span></td> | ||
<td></td> | <td></td> | ||
</tr> | |||
<tr> | |||
<td>Average Speed</td> | |||
<td><span id="WindAverage">--</span></td> | |||
<td><span class="WindUnit">--</span></td> | |||
</tr> | |||
<tr> | |||
<td>Average Bearing</td> | |||
<td><span id="Avgbearing">--</span></td> | |||
<td><span id="AvgbearingCP">°</span></td> | |||
</tr> | |||
<tr> | |||
<td>Peak Gust</td> | |||
<td><span id="Recentmaxgust">--</span></td> | |||
<td><span class="WindUnit">--</span></td> | |||
</tr> | </tr> | ||
</table></pre> | |||
</table> </pre> | === Changing Look === | ||
You need some understanding of Cascading Style Sheets (CSS) to do this, but all you need to do is to edit the relevant style sheet in '''\CumulusMX\interface\css'''. | |||
= Updating to a new MX release = | = Updating to a new MX release = | ||