How to use roImageCanvas in scene graph component

Question

I am using Scene Graph Component to develop a application with MarkupList and MarkupGrid. I want a custom dialog box open when user exit from application. I am using roImageCanvas to create custom dialog box but don't know how to implement this. Main.brs file code is...

sub main()
screen = CreateObject("roSGScreen")
m.port = CreateObject("roMessagePort")
screen.setMessagePor`enter code here`t(m.port)
scene = screen.CreateScene("HomeScene")
screen.show()

while(true)
msg = wait(1000, m.port)
msgType = type(msg)
if msgType = "roSGScreenEvent"

if msg.isScreenClosed() then showImageCanvas()
end if
end while
end sub

and roImageCanvas code is...

Sub showImageCanvas()
print "sdfsdf"
canvasItems = [
{
url:"http://192.168.1.23/boardwalk.jpg"
TargetRect:{x:100,y:100,w:400,h:300}
},
{
url:"http://192.168.1.23/walking.jpg"
TargetRect:{x:500,y:400,w:400,h:300}
},
{
Text:"Hello ImageCanvas"
TextAttrs:{Color:"#FFCCCCCC", Font:"Medium",
HAlign:"HCenter", VAlign:"VCenter",
Direction:"LeftToRight"}
TargetRect:{x:390,y:357,w:500,h:60}
}
]

canvas = CreateObject("roImageCanvas")
port = CreateObject("roMessagePort")
canvas.SetMessagePort(port)
'Set opaque background
canvas.SetLayer(0, {Color:"#FF000000", CompositionMode:"Source"})
canvas.SetRequireAllImagesToDraw(true)
canvas.SetLayer(1, canvasItems)
canvas.Show()
while(true)
msg = wait(0,port)
if type(msg) = "roImageCanvasEvent" then
if (msg.isRemoteKeyPressed()) then
i = msg.GetIndex()
print "Key Pressed - " ; msg.GetIndex()
if (i = 2) then
' Up - Close the screen.
canvas.close()
end if
else if (msg.isScreenClosed()) then
print "Closed"
return
end if
end if
end while
End Sub

Generally i want when user exit from app showImageCanvas() should be called. I have also tried to put showImageCanvas() code in Scene file but it's always giving error so please suggest me what i am doing wrong.

Answer 1

If you use Scene Graph Component, you should use only one screen - roSGScreen, and one Scene. To show dialogues you should also use Scene Graph toolset. There is Dialog component for this purpose. To show confirmation dialog before channel close, you may add onKeyEvent observer to your HomeScene and show dialog like this:

function onKeyEvent(key as String, press as Boolean) as Boolean
    handled = false

    if press
        if key = "back"
            showExitConfirmationDialog()
            handled = true
        end if
    end if

    return handled
end function


sub showExitConfirmationDialog()
    dialog = createObject("roSGNode", "Dialog")
    dialog.message = "Are you sure you want to exit?"
    dialog.buttons = ["Cancel", "Exit"]
    dialog.observeField("buttonSelected", "onDialogButtonSelected")
    m.top.dialog = dialog
end sub


sub onDialogButtonSelected()
    if m.top.dialog.buttonSelected = 1
        m.top.close = true
    else
        m.top.dialog.close = true
    end if
end sub

Note that it is not possible to intercept Home button event, Home button will close the channel anyway.

To close the app, scene's "close" field is used, here is how you can add it:

<?xml version="1.0" encoding="UTF-8"?>
<component name="HomeScene" extends="Scene" xsi:noNamespaceSchemaLocation="http://rokudev.roku.com/rokudev/schema/RokuSceneGraph.xsd">

<script type="text/brightscript" uri="pkg:/components/HomeScene.brs"/>

<interface>
    <field id="close" type="bool"/>
</interface>

</component>

also observe it in your main function:

sub main(params as Object)
    screen = createObject("roSGScreen")
    scene = screen.createScene("HomeScene")
    port = createObject("roMessagePort")
    screen.setMessagePort(port)
    screen.show()

    scene.observeField("close", port)

    while true
        msg = wait(0, port)

        if type(msg) = "roSGNodeEvent"
            if msg.getField() = "close" and msg.getData()
                return
            end if
        end if
    end while
end sub