Page 1 of 1
Gauge Layout.
Posted: Sun 20 Jun 2021 3:25 am
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.
Re: Gauge Layout.
Posted: Sun 20 Jun 2021 6:10 am
by water01
Re: Gauge Layout.
Posted: Sun 20 Jun 2021 9:46 am
by Phil23
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.
Re: Gauge Layout.
Posted: Sun 20 Jun 2021 12:13 pm
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
Re: Gauge Layout.
Posted: Sun 20 Jun 2021 8:31 pm
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>
Re: Gauge Layout.
Posted: Sat 25 Sep 2021 10:44 pm
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.
Re: Gauge Layout.
Posted: Sun 26 Sep 2021 2:55 pm
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.
Re: Gauge Layout.
Posted: Sun 26 Sep 2021 10:38 pm
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