UI enhancements for horizontal mode, intermediate checkin.

main.go

@@ -102,6 +102,7 @@ func eventloop() {
 	state := "starting"
 	var hr int
 	var periph ble.Peripheral
+	var wide bool
 	periphs := make([]ble.Peripheral, 0)
 	btns := make([]*widget.Button, 0)
 	backBtn := &widget.Button{}
@@ -110,22 +111,30 @@ func eventloop() {
 
 	f := &layout.Flex{Axis: layout.Vertical}
 	offpage = func() {
-		c1 := f.Rigid(gtx, func() {
+		f.Layout(gtx,
+			f.Rigid(gtx, func() {
 				th.Body1("Heart Rate Monitor").Layout(gtx)
-		})
+			}),
-		c2 := f.Rigid(gtx, func() {
+			f.Rigid(gtx, func() {
 				th.Body1("Bluetooth is Powered Off").Layout(gtx)
-		})
+			}),
-		f.Layout(gtx, c1, c2)
+		)
 	}
-	scanpage = func() {
+
-		c1 := f.Rigid(gtx, func() {
+	appname := func() { th.Body1("Heart Rate Monitor").Layout(gtx) }
-			th.Body1("Heart Rate Monitor").Layout(gtx)
+	appstate := func() { th.Body1(state).Layout(gtx) }
-		})
+	periphname := func() { th.Body1(periph.Name).Layout(gtx) }
-		c2 := f.Rigid(gtx, func() {
+
-			th.Body1(state).Layout(gtx)
+	leftbar := func() {
-		})
+		f := &layout.Flex{Axis: layout.Vertical}
-		c3 := f.Rigid(gtx, func() {
+		f.Layout(gtx,
+			f.Rigid(gtx, appname),
+			f.Rigid(gtx, func() { th.Body1("").Layout(gtx) }),
+			f.Rigid(gtx, appstate),
+		)
+	}
+
+	scanlist := func() {
 		lst := &layout.List{Axis: layout.Vertical}
 		lst.Layout(gtx, len(periphs), func(i int) {
 			gtx.Constraints.Width.Min = gtx.Constraints.Width.Max
@@ -141,21 +150,32 @@ func eventloop() {
 				w.Invalidate()
 			}
 		})
-		})
+	}
-		f.Layout(gtx, c1, c2, c3)
+
+	scanpage = func() {
+		if wide {
+			f2 := &layout.Flex{Axis: layout.Horizontal}
+			f2.Layout(gtx,
+				f2.Flex(gtx, 0.2, leftbar),
+				f2.Rigid(gtx, scanlist),
+			)
+		} else {
+			f.Layout(gtx,
+				f.Rigid(gtx, appname),
+				f.Rigid(gtx, appstate),
+				f.Rigid(gtx, scanlist),
+			)
+		}
 	}
 
 	connpage = func() {
-		c1 := f.Rigid(gtx, func() {
+		f.Layout(gtx,
-			th.Body1("Heart Rate Monitor").Layout(gtx)
+			f.Rigid(gtx, appname),
-		})
+			f.Rigid(gtx, func() {
-		c2 := f.Rigid(gtx, func() {
 				th.Body1("Connecting").Layout(gtx)
-		})
+			}),
-		c3 := f.Rigid(gtx, func() {
+			f.Rigid(gtx, periphname),
-			th.Body1(periph.Name).Layout(gtx)
+			f.Rigid(gtx, func() {
-		})
-		c4 := f.Rigid(gtx, func() {
 				th.Button("Cancel").Layout(gtx, backBtn)
 				if backBtn.Clicked(gtx) {
 					ble.CancelConnection(periph)
@@ -166,32 +186,11 @@ func eventloop() {
 					state = "scanning"
 					page = scanpage
 				}
-		})
+			}),
-		f.Layout(gtx, c1, c2, c3, c4)
+		)
 	}
 
-	hrpage = func() {
+	hrcircle := func() {
-		c1 := f.Rigid(gtx, func() {
-			th.Body1("Heart Rate Monitor").Layout(gtx)
-		})
-		c2 := f.Rigid(gtx, func() {
-			th.Body1(periph.Name).Layout(gtx)
-		})
-		c4 := f.Rigid(gtx, func() {
-			layout.UniformInset(unit.Dp(2)).Layout(gtx, func() {
-				th.Button("Stop").Layout(gtx, backBtn)
-			})
-			if backBtn.Clicked(gtx) {
-				ble.Disconnect(periph)
-				periphs = periphs[:0]
-				Config.Autoconnect = ""
-				saveConfig()
-				b.Scan()
-				state = "scanning"
-				page = scanpage
-			}
-		})
-		c3 := f.Rigid(gtx, func() {
 		blue := color.RGBA{0x3f, 0x51, 0xb5, 255}
 		white := color.RGBA{255, 255, 255, 255}
 		w, h1 := float32(gtx.Constraints.Width.Max), float32(gtx.Constraints.Height.Max)
@@ -220,8 +219,28 @@ func eventloop() {
 			l.Layout(gtx)
 		})
 		gtx.Dimensions.Size = image.Point{int(h1), int(h1)}
+	}
+
+	hrpage = func() {
+		f.Layout(gtx,
+			f.Rigid(gtx, appname),
+			f.Rigid(gtx, periphname),
+			f.Rigid(gtx, func() {
+				layout.UniformInset(unit.Dp(2)).Layout(gtx, func() {
+					th.Button("Stop").Layout(gtx, backBtn)
 				})
-		f.Layout(gtx, c1, c2, c3, c4)
+				if backBtn.Clicked(gtx) {
+					ble.Disconnect(periph)
+					periphs = periphs[:0]
+					Config.Autoconnect = ""
+					saveConfig()
+					b.Scan()
+					state = "scanning"
+					page = scanpage
+				}
+			}),
+			f.Rigid(gtx, hrcircle),
+		)
 	}
 
 	page = offpage
@@ -297,6 +316,11 @@ func eventloop() {
 				return
 			case system.FrameEvent:
 				gtx.Reset(e.Config, e.Size)
+				if e.Size.X > e.Size.Y {
+					wide = true
+				} else {
+					wide = false
+				}
 				resetSysinset(e.Insets)
 				sysinset.Layout(gtx, func() {
 					margin.Layout(gtx, page)