Differences

This shows you the differences between two versions of the page.

--- wiki:ai:editing_the_layout [2025/05/31 15:56] – Neil
+++ wiki:ai:editing_the_layout [2025/10/19 15:08] (current) – [Breaking the Column Layout] Neil
@@ Line 1: / Line 1: @@
-<WRAP center round info 60%>
+====== Editing the Layout of Panels ======
-==== Page under Construction ====
+{{ :wiki:ai:gauges.png?nolink&400|The top half of the Gauges page}}Under the design of the AI just about every page can be re-arranged without resorting to cutting and pasting sections of HTML code.  This means that page layout can change as your weather station develops and new sensors / features are added.  It also means that if you are not happy with the layout I have used you can change((And undo that change.)) it with just a few simple steps.
-</WRAP>
+Show is the top of the **Gauges** page showing the default layout on a wide screen. Each panel has a **css style** attached to it, which by default is **order:1;**.  When your browser encounters this it looks for other panels with an order number.  If they are the same, then the browser displays the page in the order that it has been coded.  As they are all **order:1;** all panels appear as I have coded them.
+----
+<code html>
+	<div class="ax-column4 ax-fixedwidth">
+	  <!--	Panel 1 / column 1	-->
+	  <div class="w3-card ax-theme8 w3-center" style="order:1;">
+	    <div class="ax-titleBar">
+	      <h4>Temperature</h4>
+	    </div>
+	    <div id="tip_0" class="gauge">
+	      <canvas id="canvas_temp" class="ax-gaugeStandard"></canvas>
+		</div>
+	      <div class="ax-titleBar">
+		<div><input id="rad_temp1" class="w3-radio" type="radio" name="rad_temp" value="out" aria-label="Outside temperature" onclick="gauges.doTemp(this);" checked ><label id="lab_temp1" for="rad_temp1">Outside</label></div>
+		<div><input id="rad_temp2" class="w3-radio" type="radio" name="rad_temp" value="in" aria-label="Inside temperature" onclick="gauges.doTemp(this);"><label id="lab_temp2" for="rad_temp2">Inside</label></div>
+	      </div>
+	      <div class="ax-btnBar w3-hide">
+		<button id="Outside" class="w3-btn ax-theme9">Outside</button><button id="Inside" class="w3-btn ax-theme9">inside</button>
+	      </div>
+	    </div>
+	    <!--	Panel 2 / column 2	-->
+	    <div class="w3-card ax-theme8 w3-center" style="order:1;">
+	      <div class="ax-titleBar">
+		<h4>Other Temps.</h4>
+		</div>
+		  <div id="tip_1" class="gauge">
+		    <canvas id="canvas_dew" class="ax-gaugeStandard"></canvas>
+		  </div>
+		  <div class="ax-btnBar" style="justify-content: center;">
+		    <select id="rad_dew" class="w3-select ax-btn-gradient-up w3-small" aria-label="Select for alternative temperature" onchange="gauges.doDew(this);">
+		      <option id="lab_dew1" value="dew" selected="selected">Dew Point</option>
+		      <option id="lab_dew6" value="feel">Feels Like</option>
+		      <option id="lab_dew2" value="app">Apparent</option>
+		      <option id="lab_dew3" value="wnd">Wind Chill</option>
+		      <option id="lab_dew4" value="hea">Heat Index</option>
+		      <option id="lab_dew5" value="hum">Humidex</option>
+	            </select>
+		  </div>
+		</div>
+</code>
+The above snippet of code from the **gauges** page shows lines 92 to 127 which code the first two gauges.
+On lines **94** and **110** can be seen **//divs//** with the style //"order:1;"//.  If the first one on line **92** is changed to //order:2// it will jump to the end of the gauges((But not after the **Information** panel as that has an order of **21**.)).
+Using the above information it is possible to rearrange any panel simply by giving it a different order number.  But you need to remember...
+  * Order numbers create an ascending numerically ordered set of panels
+  * Order numbers can be negative
+  * Panels with the same order number will always be displayed in the order they have been coded.
+===== Changing the number of Columns =====
+In the above code the very first line **92** has a **//div//** has a class **//ax-column4//**.  This class dictates how many columns will attempt to be displayed((Remember that on narrow devices they will automatically get altered to ensure panel content can still be read)).  There are **six** available column classes - **ax-column1** to **ax-column6**.
+Simply by changing this class will re-adjust the number of columns used.  **HOWEVER**, this is bound to have an effect on tabular layouts.  You may well find that text gets wrapped inconveniently.  This may not be immediately obvious especially when dates are displayed as month and day names vary considerably in length.
+===== Breaking the Column Layout =====
+Again looking at line **92** you will see that it also has a class **ax-fixedwidth**.  This forces all panels to obey the assigned column layout,  I.e., it will always try to make panels the same width regardless whether there are enough panels for the selected layout.  Any //orphan// panels will be centred within the page width.
+If you remove this class - **ax-fixedwidth**, any '//orphan//' panels will stretch sideways to fill the page width.  If you don't want this to happen but want a specific panel to be wider, you can leave the class **ax-fixedwidth** but add a class **ax-growX2** to your selected panel to make it span two panel widths. ++ Note | You can also use '**ax-growX3**' or '**ax-growX4**' to make the panel grow by three or four panel widths. ++