Add simple focus example

Author: TwitchBronBron

simple-focus/.vscode/launch.json

@@ -0,0 +1,14 @@
+{
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "brightscript",
+            "request": "launch",
+            "name": "BrightScript Debug: Launch",
+            "rootDir": "${workspaceFolder}",
+            "host": "${promptForHost}",
+            "injectRdbOnDeviceComponent": true,
+            "enableDebugProtocol": true
+        }
+    ]
+}

simple-focus/.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "brightscript.bsdk": "1.0.0-alpha.39"
+}

simple-focus/components/MainScene.brs

@@ -0,0 +1,71 @@
+sub init()
+    'get notified anytime the focus changes
+    m.focusRing = m.top.findNode("focusRing")
+
+    m.nodesToFocus = [
+        m.top.findNode("red"),
+        m.top.findNode("green"),
+        m.top.findNode("blue")
+        m.top.findNode("black")
+    ]
+    m.nodesToFocus[0].setFocus(true)
+    m.top.observeField("focusedChild", "onFocusedChildChange")
+end sub
+
+'draw a focus ring around the focused element
+sub onFocusedChildChange()
+    print "focus has changed"
+    focusedChild = m.top.focusedChild
+
+    'if we have a focusedChild and it's not the main scene (which has no ID)
+    if focusedChild <> invalid and focusedChild.id <> "" then
+        print "Currently focused element: " + focusedChild.id
+        m.focusRing.translation = [
+            focusedChild.translation[0] - 5,
+            focusedChild.translation[1] - 5
+        ]
+    end if
+end sub
+
+'Set focus to the next sibling in the specified direction
+sub focusNextSibling()
+    nodeToFocus = invalid
+
+    'focus the next child
+    for i = 0 to m.nodesToFocus.count() - 1
+        child = m.nodesToFocus[i]
+        'skip the focusRing
+        if child.id = "focusRing"
+            continue for
+        end if
+
+        if child.hasFocus()
+            nodeToFocus = m.nodesToFocus[i + 1]
+            exit for
+        end if
+    end for
+    'if we have no node to focus, then focus the first node that's not the focusRing
+    if nodeToFocus = invalid
+        nodeToFocus = m.nodesToFocus[0]
+    end if
+    nodeToFocus.setFocus(true)
+end sub
+
+function onKeyEvent(key as string, press as boolean) as boolean
+    'only handle key up events
+    if press <> true
+        return false
+    end if
+
+    'simple focus management for now, just move forwards or backwards
+    if key = "up" or key = "right" or key = "down" or key = "left"
+        focusNextSibling()
+        return true
+    end if
+
+    if key = "OK" then
+        print "Item was selected", m.focusedChild.id
+        return true
+    end if
+    return false
+end function

simple-focus/components/MainScene.xml

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<component name="MainScene" extends="Scene">
+  <script type="text/brightscript" uri="MainScene.brs" />
+
+  <interface>
+    <field id="appExit" type="bool" alwaysnotify="true" value="false" />
+  </interface>
+
+  <children>
+    <rectangle id="focusRing" color="0xFF69B4FF" width="310" height="310" translation="[95,95]" />
+
+    <Rectangle id="red" color="0xFF0000FF" width="300" height="300" translation="[100,100]" />
+    <Rectangle id="green" color="0x00FF00FF" width="300" height="300" translation="[500,100]" />
+    <Rectangle id="blue" color="0x000000FF" width="300" height="300" translation="[900,100]" />
+    <Rectangle id="black" color="0x0000FFFF" width="300" height="300" translation="[1300, 100]" />
+  </children>
+</component>

simple-focus/manifest

@@ -0,0 +1,21 @@
+# Channel Details
+title=Sample Channel One
+subtitle=A simple sample channel
+major_version=1
+minor_version=0
+build_version=0
+
+# Channel Assets
+mm_icon_focus_sd=pkg:/images/channel-poster_sd.png
+mm_icon_focus_hd=pkg:/images/channel-poster_hd.png
+mm_icon_focus_fhd=pkg:/images/channel-poster_fhd.png
+
+# Splash Screen + Loading Screen Artwork
+splash_screen_sd=pkg:/images/splash-screen_sd.jpg
+splash_screen_hd=pkg:/images/splash-screen_hd.jpg
+splash_screen_fhd=pkg:/images/splash-screen_fhd.jpg
+splash_color=#808080
+splash_min_time=0
+
+# Resolution
+ui_resolutions=fhd

simple-focus/source/main.brs

@@ -0,0 +1,26 @@
+sub Main(inputArguments as object)
+  screen = createObject("roSGScreen")
+  m.port = createObject("roMessagePort")
+  screen.setMessagePort(m.port)
+  scene = screen.CreateScene("MainScene")
+  screen.show()
+  ' vscode_rdb_on_device_component_entry
+  scene.observeField("appExit", m.port)
+  scene.setFocus(true)
+
+  while true
+    msg = wait(0, m.port)
+    msgType = type(msg)
+
+    if msgType = "roSGScreenEvent" then
+      if msg.isScreenClosed() then
+        return
+      end if
+    else if msgType = "roSGNodeEvent" then
+      field = msg.getField()
+      if field = "appExit" then
+        return
+      end if
+    end if
+  end while
+end sub