Maestro Panel - Hello World !

SampleApp/components/TestHarness.brs

@@ -0,0 +1,99 @@
+sub init()
+  m.settingConfig = m.top.findNode("settingConfig")
+  m.settingConfig.observeField("itemSelected", "onItemSelected")
+  m.hintText = m.top.findNode("hintText")
+
+  m.top.observeField("focusedChild", "onFocusChange")
+  m.top.observeField("MaestroKit", "onlibrary")
+  m.top.observeField("automationLog", "addLogLabel")
+  m.top.observeField("selectedVersion", "onVersionSelected")
+
+  m.logTitleLable = m.top.findNode("logTitleLable")
+  m.logsGroup = m.top.findNode("logsGroup")
+
+end sub
+
+sub onItemSelected(event)
+  index = event.getData()
+  action = m.settingConfig.content.getChild(index)?.title
+
+  if action = "ShowPanel"
+    m.lib.showPanel = true
+    m.lib.callFunc("setPanelFocus")
+    ' minVideo()
+
+  else if action = "HidePanel"
+    m.lib.showPanel = false
+    ' maxVideo()
+  end if
+end sub
+
+function handleDevPanelKeyPress(key as string) as boolean
+  handled = false
+
+  if key = "right"
+    m.lib.callFunc("setPanelFocus")
+    handled = true
+  end if
+  return handled
+end function
+
+function onKeyEvent(key as string, press as boolean) as boolean
+  handled = false
+  if (press)
+    if m.settingConfig.hasFocus()
+      handled = handleDevPanelKeyPress(key)
+    end if
+  end if
+  return handled
+end function
+
+sub onHandleLoadingSceneAction(event)
+  action = event.getData()
+  if action = "returnFocus"
+    m.settingConfig.setFocus(true)
+  end if
+end sub
+
+sub onLibKeyAction(event)
+  action = event.getData()
+  if action = "overLaySelected"
+    'minVideo()
+  else if action = "setFocusOnSettingConfig"
+    m.settingConfig.setFocus(true)
+  end if
+end sub
+
+sub onFocusChange(event)
+  focusNode = event.getData()
+  if focusNode <> invalid and focusNode.id = "TestHarness"
+    m.settingConfig.setFocus(true)
+  end if
+
+end sub
+
+
+sub onlibrary(event)
+  if event.getData() <> invalid
+    if m.lib <> invalid
+      m.lib.unobserveFieldScoped("handleLoadingSceneAction")
+      m.lib = invalid
+    end if
+
+    m.lib = event.getData()
+    m.top.unObserveField("MaestroKit")
+    m.lib.observeField("handleLoadingSceneAction", "onHandleLoadingSceneAction")
+  end if
+end sub
+
+sub addLogLabel(text)
+    config = {
+        width: 1000,
+        wrap: true,
+        lineSpacing: -3
+    }
+    logLable = createObject("roSGNode", "Label")
+    logLable.update(config)
+    logLable.text = text.getData()
+    m.logsGroup.appendChild(logLable)
+end sub

SampleApp/components/TestHarness.xml

@@ -0,0 +1,67 @@
+<?xml version="1.0" encoding="utf-8"?>
+<component name="TestHarness" extends="group">
+  <interface>
+    <field id="MaestroKit" type="node" />
+    <field id="selectedVersion" type="string" />
+    <field id="automationLog" type="string"/>
+  </interface>
+  <script type="text/brightscript" uri="pkg:/components/TestHarness.brs" />
+
+  <children>
+      <Rectangle width="1100" height="1920" color="#000000B3" />
+    <Label id="hintText" color="#ffffff" horizAlign="left" vertAlign="left" width="568" text=""
+      translation="[20,20]">
+      <Font role="font" uri="pkg://fonts/BentonSans-Medium.ttf" size="25" />
+    </Label>
+
+    <Label  color="#ffffff" horizAlign="left" vertAlign="left" width="700" text="Dev Panel"
+      translation="[0,20]">
+      <Font role="font" uri="pkg://fonts/BentonSans-Medium.ttf" size="25" />
+    </Label>
+
+    <MarkupGrid
+      id="settingConfig"
+      font="font:MediumSystemFont"
+      focusedFont="font:MediumBoldSystemFont"
+      numColumns="4"
+      numRows="5"
+      itemSize="[250,48]"
+      itemSpacing="[10, 10 ]"
+      translation="[20,80]"
+      vertFocusAnimationStyle="floatingFocus"
+      itemComponentName="MarkupGridItem">
+      <ContentNode id="menu" role="content">
+        <ContentNode title="ShowPanel" />
+        <ContentNode title="HidePanel" />
+      </ContentNode>
+    </MarkupGrid>
+
+    <LayoutGroup layoutDirection="horiz" translation="[0,400]"  >
+      <!-- SDK Version -->
+    </LayoutGroup>
+     <Group
+            id="logGroup"
+            translation="[0, 600]">
+            <Rectangle
+                id = "logBackground"
+                color="0xAAAAAAAA"
+                width="1100"
+                height="470" />
+            <Label
+                id="logTitleLable"
+                width="1000"
+                translation="[20, 20]"
+                />
+            <Poster
+                width="1000"
+                height="400"
+                translation="[50, 70]"
+                uri="pkg:/images/border_r8.9.png" />
+            <LayoutGroup
+                id="logsGroup"
+                translation="[60, 80]" />
+        </Group>
+
+
+  </children>
+</component>

SampleApp/components/TestScene/TestVideo.brs

@@ -3,7 +3,10 @@ sub init()
     m.video = m.top.findNode("video")
     m.video.observeField("position", "onPositionChanged")
     m.video.notificationInterval = 1
+    m.settingConfig = m.top.findNode("settingConfig")
+    m.settingConfig.observeField("itemSelected", "onItemSelected")
     playVideo()
+    initSDK()
 end sub
 function playVideo()
     videoContent = createObject("RoSGNode", "ContentNode")
@@ -13,3 +16,114 @@ function playVideo()
     m.video.content = videoContent
     m.video.control = "play"
 end function
+
+function onKeyEvent(key as string, press as boolean) as boolean
+    handled = false
+
+    if press
+        if key = "back"
+            m.settingConfig.setFocus(true)
+            handled = true
+        else if key = "left"
+            m.settingConfig.setFocus(true)
+            handled = true
+        end if
+    end if
+
+    return handled
+end function
+
+'<Step 1>
+sub initSDK()
+    'Init a component library and set your desired version number
+    m.componentLibrary = createObject("rosgNode", "ComponentLibrary")
+    m.componentLibrary.uri = "https://roku-sdk.us-central1-master.gcp.maestro.io/4.1.16/maestrokit.pkg"
+    m.componentLibrary.observeField("loadStatus", "onLibraryLoadStatusChanged")
+end sub
+
+function onLibraryLoadStatusChanged()
+  if (m.componentLibrary.loadStatus = "ready")
+    'Create a version of the pannel and set observers.
+    m.lib = createObject("rosgNode", "MaestroPanelLib:MaestroPanel")
+    m.lib.observeField("showPanel", "onShowPanel")
+    m.lib.observeField("handleLoadingSceneAction", "onHandleLoadingSceneAction")
+    'add panel to your scene
+    m.top.appendChild(m.lib)
+    finishSetup()
+  end if
+end function
+'<Step 1>
+
+'<Step 2>
+sub finishSetup()
+    m.lib.observeField("showPanel", "onShowPanel")
+    'configure the SDK with your siteID and pageID, these ID's can be found on your maestro site in the browser
+    m.lib.config ={
+        "siteID": "695c05610f99e7584a1b7407", '<-- TODO replace with your siteID.
+        "pageId": "695c05610f99e7584a1b743e", '<-- TODO replace with a pageID on your site, later to be dynamic based on the video you select
+        "useProdEnv": false
+    }
+    'set focus to the buttons or your custom UI
+    m.settingConfig.setFocus(true)
+end sub
+'<Step 2>
+
+'<Step 3>
+sub onItemSelected(event)
+  index = event.getData()
+  action = m.settingConfig.content.getChild(index)?.title
+    'handlers for the actions to show and hide the panel
+  if action = "ShowPanel"
+    m.lib.showPanel = true
+    m.lib.callFunc("setPanelFocus")
+    minVideo()
+
+  else if action = "HidePanel"
+    m.lib.showPanel = false
+    maxVideo()
+  end if
+end sub
+
+sub onHandleLoadingSceneAction(event)
+  action = event.getData()
+  'handler to return focus to your custom UI when the user exist the panel
+  if action = "returnFocus"
+    maxVideo()
+    m.settingConfig.setFocus(true)
+  end if
+end sub
+
+function minVideo()
+    m.video.width = 1184
+    m.video.height = 666
+    m.video.translation = [50, 200]
+end function
+
+function maxVideo()
+    m.video.width = 1920
+    m.video.height = 1080
+    m.video.translation = [0, 0]
+end function
+
+sub onShowPanel(event)
+    isPanelShown =  event.getData()
+    if isPanelShown
+        minVideo()
+        m.lib.callFunc("setPanelFocus")
+    else
+         m.settingConfig.setFocus(true)
+    end if
+end sub
+'<Step 3/>
+
+'<Step 4>
+sub cleanup()
+    maxVideo()
+    m.top.removeChild(m.lib )
+    m.lib = invalid
+end sub
+
+sub onDestroySDK()
+    m.lib.callFunc("destroySDK")
+end sub
+'<Step 4/>

SampleApp/components/TestScene/TestVideo.xml

@@ -13,5 +13,22 @@
             focusable="false"
             enableTrickPlay="false"
         />
+        <Rectangle width="600" height="200" color="#000000B3" />
+        <MarkupGrid
+            id="settingConfig"
+            font="font:MediumSystemFont"
+            focusedFont="font:MediumBoldSystemFont"
+            numColumns="4"
+            numRows="5"
+            itemSize="[250,48]"
+            itemSpacing="[10, 10 ]"
+            translation="[20,80]"
+            vertFocusAnimationStyle="floatingFocus"
+            itemComponentName="MarkupGridItem">
+            <ContentNode id="menu" role="content">
+                <ContentNode title="ShowPanel" />
+                <ContentNode title="HidePanel" />
+            </ContentNode>
+        </MarkupGrid>
     </children>
 </component>

readme

@@ -1 +1,19 @@
-Install the brightscript extension https://marketplace.visualstudio.com/items?itemName=RokuCommunity.brightscript
+Installing the Maestro SDK
+
+The main branch has a simple Roku application simulating your Roku application.
+Checkout the "Hello-World" branch and open PR https://github.com/lessthan3/maestro-roku-sdk-example/pull/1
+The PR will highlight the diff showing whats required to implement the SDK at the minimum level.
+
+Step 1
+Create a new component library and fetch the SDK
+Define the handler for when the library is fetched and ready for use.
+
+Step 2
+Add desired observers and configure the SDK for your site and page.
+Site and Page ID's can be found on your Maestro site.
+
+Step 3
+Add handlers to your custom UI to show and hide the panel using it's "showPanel" interface.
+
+Step 4
+Ensure to destroy the SDK when exiting the view session. This will ensure proper analytics tracking and node destruction.