Welcome to the Cumulus Support forum.

Latest Cumulus MX V3 release 3.28.6 (build 3283) - 21 March 2024

Cumulus MX V4 beta test release 4.0.0 (build 4018) - 28 March 2024

Legacy Cumulus 1 release v1.9.4 (build 1099) - 28 November 2014 (a patch is available for 1.9.4 build 1099 that extends the date range of drop-down menus to 2030)

Download the Software (Cumulus MX / Cumulus 1 and other related items) from the Wiki

Gauge Layout.

From build 3044 the development baton passed to Mark Crossley. Mark has been responsible for all the Builds since. He has made the code available on GitHub. It is Mark's hope that others will join in this development, but at the very least he welcomes your ideas for future developments (see Cumulus MX Development suggestions).

Moderator: mcrossley

Post Reply
Phil23
Posts: 884
Joined: Sat 16 Jul 2016 11:59 pm
Weather Station: Davis VP2+ & GW1000 (Standalone)
Operating System: Win10 Pro / rPi Buster
Location: Australia

Gauge Layout.

Post by Phil23 »

Hi All,

Trying to find out the best way to change the layout of the gauges page to change it from 4x3 to 3x4 rows,

I prefer the 3x4 layout as each row can group related gauges,

Ie

Temp, Temp, Humidity
Wind Speed, Direction, Wind Rose etc.

Much the same as I have here in the old templates.
http://weather.inverellit.com/gauges.htm

Have looked at the htm & css but it's not immediately apparent.
Seems they is a list of gauges that arrange according to this.

Code: Select all

						<div style="display:flex; flex-flow: row wrap; justify-content:space-evenly">
Thanks

Phil.
:Now: :Today/Yesterday:

Image

Main Station Davis VP2+ Running Via Win10 Pro.
Secondary Stations, Ecowitt HP2551/GW1000 Via rPi 3 & 4 Running Buster GUI.
:Local Inverell Ecowitt Station: :Remote Ashford Ecowitt Station:
water01
Posts: 3215
Joined: Sat 13 Aug 2011 9:33 am
Weather Station: Ecowitt HP2551
Operating System: Windows 10 64bit
Location: Burnham-on-Sea
Contact:

Re: Gauge Layout.

Post by water01 »

David
Image
Phil23
Posts: 884
Joined: Sat 16 Jul 2016 11:59 pm
Weather Station: Davis VP2+ & GW1000 (Standalone)
Operating System: Win10 Pro / rPi Buster
Location: Australia

Re: Gauge Layout.

Post by Phil23 »

water01 wrote: Sun 20 Jun 2021 6:10 am The Wiki is your friend https://cumuluswiki.org/a/SteelSeries_G ... n_the_page
I did look there, but can't relate those layout to the new page code.
Used that info to position UV under Rain in my old school page.

Not looking now, but I recall there's no Row's in the new pages, just a list of gauges that wrap according to width.
:Now: :Today/Yesterday:

Image

Main Station Davis VP2+ Running Via Win10 Pro.
Secondary Stations, Ecowitt HP2551/GW1000 Via rPi 3 & 4 Running Buster GUI.
:Local Inverell Ecowitt Station: :Remote Ashford Ecowitt Station:
water01
Posts: 3215
Joined: Sat 13 Aug 2011 9:33 am
Weather Station: Ecowitt HP2551
Operating System: Windows 10 64bit
Location: Burnham-on-Sea
Contact:

Re: Gauge Layout.

Post by water01 »

Looking at your source code

Code: Select all

<div class="row">
    <div id="tip_6" class="gauge">
      <canvas id="canvas_wind" width="221" height="221"></canvas>
    </div>
    <div id="tip_7" class="gauge">
      <canvas id="canvas_dir" width="221" height="221"></canvas>
    </div>
    <div id="tip_10" class="gauge">
      <canvas id="canvas_rose" width="221" height="221"></canvas>
    </div>
  </div>
  <div class="row">
    <div id="tip_5" class="gauge">
      <canvas id="canvas_baro" width="221" height="221"></canvas>
    </div>
    <div id="tip_2" class="gauge">
      <canvas id="canvas_rain" width="221" height="221"></canvas>
    </div>
    <div id="tip_3" class="gauge">
      <canvas id="canvas_rrate" width="221" height="221"></canvas>
    </div>
  </div>
  <div class="row">
    <div id="tip_9" class="gauge">
      <canvas id="canvas_solar" width="221" height="221"></canvas>
    </div>
    <div id="tip_8" class="gauge">
      <canvas id="canvas_uv" width="221" height="221"></canvas>
    </div>
	<div id="tip_11" class="gauge">
      <canvas id="canvas_cloud" class="gaugeSizeStd"></canvas>
    </div>
There plain as day is the div class "row", so just move the contents of each div class and you achieve
https://www.dmjsystems.co.uk/weatherbos/gauges-ss.php
David
Image
Phil23
Posts: 884
Joined: Sat 16 Jul 2016 11:59 pm
Weather Station: Davis VP2+ & GW1000 (Standalone)
Operating System: Win10 Pro / rPi Buster
Location: Australia

Re: Gauge Layout.

Post by Phil23 »

water01 wrote: Sun 20 Jun 2021 12:13 pm There plain as day is the div class "row",
Thanks, but we are not on the same page.

I should have been clearer in my question, I'm referring to the new pages as opposed to my existing site.

This Page here:- http://weather.inverellit.com/new/gauges.htm
This is the page I'd like to arrange into 3 Rows.

Where the code contains no Div Class Row.

Code: Select all

			<!--	Row Two - All Gauges	-->
			<div class="w3-row-padding">
				<div class="w3-col s12">
					<div class="w3-panel w3-card w3-theme-white">
						<!--	The following html can be copied into ANY single panel page - template -->
						<div style="display:flex; flex-flow: row wrap; justify-content:space-evenly">
							<div class="w3-panel w3-theme-l5 at-gaugeSmall" style="order:0;">
								<!--	dial	-->
								<h5 class="">Temperature</h5>
								<div class="gauge w3-center">
									<div id="tip_0">
										<canvas id="canvas_temp" class="gaugeSmall"></canvas>
									</div>
								</div>
							</div>
							<div class="w3-panel w3-theme-l5 at-gaugeSmall" style="order:0;">
								<!--	dial	-->
								<h5 class="">Other Temps</h5>
								<div class="gauge w3-center">
									<div id="tip_1">
										<canvas id="canvas_dew" class="gaugeSmall"></canvas>
									</div>
								</div>
							</div>
							<div class="w3-panel  w3-theme-l5 at-gaugeSmall" style="order:0;">
								<!--	dial	-->
								<h5 class="">Humidity</h5>
								<div class="gauge w3-center">
									<div id="tip_4">
										<canvas id="canvas_hum" class="gaugeSmall"></canvas>
									</div>
								</div>
							</div>
							<div class="w3-panel w3-theme-l5 at-gaugeSmall" style="order:0;">
								<!--	dial	-->
								<h5 class="">Wind</h5>
								<div id="tip_6" class="gauge w3-center">
									<canvas id="canvas_wind" class="gaugeSmall"></canvas>
								</div>
							</div>
							<div class="w3-panel w3-theme-l5 at-gaugeSmall" style="order:0;">
								<!--	dial	-->
								<h5 class="">Wind Direction</h5>
								<div id="tip_7" class="gauge w3-center">
									<canvas id="canvas_dir" class="gaugeSmall"></canvas>
								</div>
							</div>
							<div class="w3-panel w3-theme-l5 at-gauge-small" style="order:0;">
								<!--	dial	-->
								<h5 class="">Wind Rose</h5>
								<div id="tip_10" class="gauge w3-center">
									<canvas id="canvas_rose" class="gaugeSmall"></canvas>
								</div>
							</div>
							<div class="w3-panel w3-theme-l5 at-gaugeSmall" style="order:0;">
								<!--	dial	-->
								<h5 class="">Pressure</h5>
								<div id="tip_5" class="gauge w3-center">
									<canvas id="canvas_baro" class="gaugeSmall"></canvas>
								</div>
							</div>
							<div class="w3-panel w3-theme-l5 at-gaugeSmall" style="order:0;">
								<!--	dial	-->
								<h5 class="">Rainfall</h5>
								<div id="tip_2" class="gauge w3-center">
									<canvas id="canvas_rain" class="gaugeSmall"></canvas>
								</div>
							</div>
							<div class="w3-panel w3-theme-l5 at-gaugeSmall" style="order:0;">
								<!--	dial	-->
								<h5 class="">Rainfall Rate</h5>
								<div id="tip_3" class="gauge w3-center">
									<canvas id="canvas_rrate" class="gaugeSmall"></canvas>
								</div>
							</div>
							<div data-cmx-uv-gauge class="w3-panel w3-theme-l5 at-gaugeSmall" style="order:0;">
								<!--	dial	-->
								<h5>UV Radiation</h5>
								<div id="tip_8" class="gauge w3-center">
									<canvas id="canvas_uv" class="gaugeSmall"></canvas>
								</div>
							</div>
							<div data-cmx-solar-gauge class="w3-panel w3-theme-l5 at-gaugeSmall" style="order:0;">
								<!--	dial	-->
								<h5>Solar</h5>
								<div id="tip_9" class="gauge w3-center">
									<canvas id="canvas_solar" class="gaugeSmall"></canvas>
								</div>
							</div>
							<div class="w3-panel w3-theme-l5 at-gaugeSmall" style="order:0;">
								<!--	dial	-->
								<h5>Cloudbase</h5>
								<div id="tip_11" class="gauge w3-center">
									<canvas id="canvas_cloud" class="gaugeSmall"></canvas>
								</div>
							</div>
						</div>
						<!--	End of Gauges HTML	-->
					</div>
				</div>
			</div>
		</div>
:Now: :Today/Yesterday:

Image

Main Station Davis VP2+ Running Via Win10 Pro.
Secondary Stations, Ecowitt HP2551/GW1000 Via rPi 3 & 4 Running Buster GUI.
:Local Inverell Ecowitt Station: :Remote Ashford Ecowitt Station:
Phil23
Posts: 884
Joined: Sat 16 Jul 2016 11:59 pm
Weather Station: Davis VP2+ & GW1000 (Standalone)
Operating System: Win10 Pro / rPi Buster
Location: Australia

Re: Gauge Layout.

Post by Phil23 »

Bump, Bump, Bump....

I've still like some help on resolving question about having the page 3 gauges wide instead of 4.
Quite simply I prefer the 3 across 4 down layout as they are more relevantly grouped.

Seems to be little support feedback from the developer in this area.
And as per above Wiki references are not relevant.

Cheers

Phil.
:Now: :Today/Yesterday:

Image

Main Station Davis VP2+ Running Via Win10 Pro.
Secondary Stations, Ecowitt HP2551/GW1000 Via rPi 3 & 4 Running Buster GUI.
:Local Inverell Ecowitt Station: :Remote Ashford Ecowitt Station:
User avatar
mcrossley
Posts: 12694
Joined: Thu 07 Jan 2010 9:44 pm
Weather Station: Davis VP2/WLL
Operating System: Bullseye Lite rPi
Location: Wilmslow, Cheshire, UK
Contact:

Re: Gauge Layout.

Post by mcrossley »

Phil, a quick fix would be to change <div class="w3-col s12"> to <div class="w3-col s10"> for both the gauges and the gauge "header" that contains the ticker. It would be left justified though, a more involved fix is required if you want the content centred.
Phil23
Posts: 884
Joined: Sat 16 Jul 2016 11:59 pm
Weather Station: Davis VP2+ & GW1000 (Standalone)
Operating System: Win10 Pro / rPi Buster
Location: Australia

Re: Gauge Layout.

Post by Phil23 »

Thanks Mark,

That got me on a positive track.

Actually got a result I'm happy with in a different way for now,
(Losing some vertical white space will improve it).

Changed all classes gaugeSmall & at-gaugeSmall to Large.

Don't really have my head right around the workings, but the look is more what I want.
Will obviously find where I've slipped & fell in it down the track.

https://w2.inverellit.com/gauges2.htm

Cheers

Phil
:Now: :Today/Yesterday:

Image

Main Station Davis VP2+ Running Via Win10 Pro.
Secondary Stations, Ecowitt HP2551/GW1000 Via rPi 3 & 4 Running Buster GUI.
:Local Inverell Ecowitt Station: :Remote Ashford Ecowitt Station:
Post Reply