Improve UI (#13)

* show connect button only when not connected
* filter out non pT serial devices from connect list
* just use plain black background with title
* update app favicon

lib/main_screen.dart

@@ -66,20 +66,40 @@ class _MainScreenState extends State<MainScreen> {
 
   @override
   Widget build(BuildContext context) {
+    print("connected: ${serialHandler.isConnected}");
     return Scaffold(
         backgroundColor: Colors.black,
-        floatingActionButton: MaterialButton(
-          child: const Text(
-            "choose serial port",
-            style: TextStyle(color: Colors.amberAccent),
-          ),
-          onPressed: () {
-            serialHandler.chooseSerialDevice();
-          },
-        ),
-        body: PicoScreen(
-          _grid,
-          _grid.background,
+        body: Stack(
+          children: [
+            PicoScreen(
+              _grid,
+              _grid.background,
+            ),
+            Visibility(
+              visible: !serialHandler.isConnected(),
+              child: Positioned(
+                left: MediaQuery.of(context).size.width / 4,
+                top: MediaQuery.of(context).size.height / 4,
+                child: MaterialButton(
+                  color: const Color.fromARGB(255, 35, 13, 73),
+                  child: const Padding(
+                    padding: EdgeInsets.all(38.0),
+                    child: Text(
+                      "Connect",
+                      style: TextStyle(
+                        color: Colors.amberAccent,
+                        fontSize: 50,
+                      ),
+                    ),
+                  ),
+                  onPressed: () {
+                    serialHandler.chooseSerialDevice();
+                    setState(() {});
+                  },
+                ),
+              ),
+            ),
+          ],
         ));
   }
 }

lib/serialport_none.dart

@@ -4,4 +4,6 @@ class SerialPortHandler {
   SerialPortHandler(CmdBuilder cmdBuilder);
 
   void chooseSerialDevice() async {}
+
+  bool isConnected() => false;
 }

lib/serialport_web.dart

@@ -6,13 +6,20 @@ import 'command_builder.dart';
 
 class SerialPortHandler {
   final CmdBuilder cmdBuilder;
+  JSSerialPort? port;
 
   SerialPortHandler(this.cmdBuilder);
 
+  bool isConnected() => port?.connected.toDart ?? false;
+
   void chooseSerialDevice() async {
-    late final JSSerialPort? port;
     try {
-      port = await requestWebSerialPort();
+      // Create filter options for specific vendor ID
+      final filters = [
+        JSFilterObject(usbVendorId: 0xcafe, usbProductId: 0x4009)
+      ];
+
+      port = await requestWebSerialPort(filters.toJS);
       debugPrint("got serial port: $port");
     } catch (e) {
       debugPrint(e.toString());
@@ -42,11 +49,11 @@ class SerialPortHandler {
     final reader = port?.readable?.getReader() as ReadableStreamDefaultReader;
 
     if (port != null) {
-      debugPrint("port opened: ${port.readable}");
+      debugPrint("port opened: ${port?.readable}");
       // request full screen refresh after opening
       final request = Uint8List.fromList([REMOTE_COMMAND_MARKER, 0x02]);
       final JSUint8Array jsReq = request.toJS;
-      final writer = port.writable?.getWriter();
+      final writer = port?.writable?.getWriter();
       writer?.write(jsReq);
       // Allow the serial port to be closed later.
       writer?.releaseLock();

lib/widgets/pico_screen.dart

@@ -18,35 +18,37 @@ class PicoScreen extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Container(
-      height: 754,
-      width: 904,
-      decoration: const BoxDecoration(
-        image: DecorationImage(
-          image: AssetImage(
-            'assets/images/bezel-brd-2.png',
-          ),
+    return Column(
+      children: [
+        Padding(
+          padding: const EdgeInsets.all(4.0),
+          child: Text("picoTracker",
+              style: Theme.of(context).textTheme.headlineLarge),
         ),
-      ),
-      child: Padding(
-        padding:
-            const EdgeInsets.only(top: 100, bottom: 98, left: 60, right: 75),
-        child: Container(
-          height: 320 * 2,
-          width: 240 * 2,
-          color: Colors.black,
-          child: Column(
-            mainAxisAlignment: MainAxisAlignment.start,
-            children: grid
-                .getRows()
-                .map((row) => ScreenCharRow(
-                      row,
-                      grid,
-                    ))
-                .toList(),
+        SizedBox(
+          height: 754,
+          width: 904,
+          child: Padding(
+            padding: const EdgeInsets.only(
+                top: 100, bottom: 98, left: 60, right: 75),
+            child: Container(
+              height: 320 * 2,
+              width: 240 * 2,
+              color: Colors.black,
+              child: Column(
+                mainAxisAlignment: MainAxisAlignment.start,
+                children: grid
+                    .getRows()
+                    .map((row) => ScreenCharRow(
+                          row,
+                          grid,
+                        ))
+                    .toList(),
+              ),
+            ),
           ),
         ),
-      ),
+      ],
     );
   }
 }

pubspec.lock

@@ -268,10 +268,10 @@ packages:
     dependency: "direct main"
     description:
       name: webserial
-      sha256: "45f464246ea90f6f6edf07c30ca69f719ad83d9b4e48ee27120fda7824d5cb83"
+      sha256: "5845d455033153939b12307bb1e33b676bd2f01faf57e436f70a5df7a091081c"
       url: "https://pub.dev"
     source: hosted
-    version: "1.0.0+1"
+    version: "1.1.0"
 sdks:
   dart: ">=3.5.1 <4.0.0"
   flutter: ">=3.18.0-18.0.pre.54"

pubspec.yaml

@@ -11,7 +11,7 @@ dependencies:
   flutter:
     sdk: flutter
   flutter_libserialport: ^0.4.0
-  webserial: ^1.0.0
+  webserial: ^1.1.0
   udev: ^0.0.3
 
 dev_dependencies: