Load Frigate config into the starter grid

components/MainScene.brs

@@ -1,3 +1,56 @@
 sub init()
     m.top.setFocus(true)
+    m.backend = m.top.findNode("backend")
+    m.status = m.top.findNode("status")
+    m.cameraNodes = [
+        m.top.findNode("cam1"),
+        m.top.findNode("cam2"),
+        m.top.findNode("cam3"),
+        m.top.findNode("cam4")
+    ]
+
+    loadConfig()
+end sub
+
+sub loadConfig()
+    raw = ReadAsciiFile("pkg:/config/cameras.json")
+    config = ParseJson(raw)
+
+    if type(config) <> "roAssociativeArray" then
+        m.status.text = "Unable to parse cameras.json"
+        return
+    end if
+
+    if config.doesExist("backend") and config.backend.doesExist("baseUrl") then
+        m.backend.text = "Frigate: " + config.backend.baseUrl
+    end if
+
+    if not config.doesExist("cameras") then
+        m.status.text = "No cameras found in config"
+        return
+    end if
+
+    cameras = config.cameras
+    m.status.text = cameras.count().toStr() + " cameras loaded from static config"
+
+    for i = 0 to m.cameraNodes.count() - 1
+        node = m.cameraNodes[i]
+
+        if i < cameras.count() then
+            camera = cameras[i]
+            label = camera.name
+
+            if camera.doesExist("host") then
+                label = label + chr(10) + camera.host
+            end if
+
+            if camera.doesExist("frigateCamera") then
+                label = label + chr(10) + "Frigate ID: " + camera.frigateCamera
+            end if
+
+            node.text = label
+        else
+            node.text = "Empty slot"
+        end if
+    end for
 end sub

components/MainScene.xml

@@ -20,13 +20,53 @@
             text="Labs camera viewer for Roku"
             font="font:MediumSystemFont"
             color="0xC9D1D9FF" />
+        <Label
+            id="backend"
+            translation="[80, 210]"
+            width="1760"
+            height="40"
+            text="Frigate: not loaded"
+            font="font:SmallSystemFont"
+            color="0x8B949EFF" />
         <Label
             id="status"
             translation="[80, 260]"
             width="1760"
-            height="120"
-            text="Project scaffold is live. Next step: load Frigate camera config and render the first Roku camera grid."
+            height="60"
+            text="Loading camera config..."
             font="font:MediumSystemFont"
             color="0x8B949EFF" />
+        <Label
+            id="cam1"
+            translation="[80, 360]"
+            width="760"
+            height="120"
+            text="Cam slot 1"
+            font="font:MediumSystemFont"
+            color="0xFFFFFFFF" />
+        <Label
+            id="cam2"
+            translation="[980, 360]"
+            width="760"
+            height="120"
+            text="Cam slot 2"
+            font="font:MediumSystemFont"
+            color="0xFFFFFFFF" />
+        <Label
+            id="cam3"
+            translation="[80, 580]"
+            width="760"
+            height="120"
+            text="Cam slot 3"
+            font="font:MediumSystemFont"
+            color="0xFFFFFFFF" />
+        <Label
+            id="cam4"
+            translation="[980, 580]"
+            width="760"
+            height="120"
+            text="Cam slot 4"
+            font="font:MediumSystemFont"
+            color="0xFFFFFFFF" />
     </children>
 </component>