Focused Buttons and State not working.
Code sample below. My buttons are acting kinda screwy. I can activate them by clicking, but they exhibit the focus and active states only when I click. Focus is not happening when I mouse over. Also the buttons quickly get out of sync or something. I wonder if I am not dealing with state properly.
<?xml version="1.0"?>
<root xml:lang="en" xmlns="http://www.dvdforum.org/2005/ihd"
xmlns:style="http://www.dvdforum.org/2005/ihd#style"
xmlns:state="http://www.dvdforum.org/2005/ihd#state">
<head>
<styling>
<style id="BTNSTYLE" style:position="absolute" style:backgroundFrame="0"
style:width="137px" style:height="137px" style:y="5px" style:x="5px"/>
</styling>
<timing clock="page" >
<defs>
<g id="ButtonHighlight">
<set style:backgroundFrame="1" />
</g>
<g id="ButtonActioned">
<set style:backgroundFrame="2" />
<event name="StartButtonPressed"/>
</g>
</defs>
<par>
<cue use="ButtonHighlight"
begin="id('BTN01')[state:focused()]"
end="defaultNode()[state:focused()=false()]"/>
<cue use="ButtonHighlight"
begin="id('BTN02')[state:focused()]"
end="defaultNode()[state:focused()=false()]"/>
<cue use="ButtonHighlight"
begin="id('BTN03')[state:focused()]"
end="defaultNode()[state:focused()=false()]"/>
<cue use="ButtonActioned"
begin="id('BTN01')[state:actioned()]"
end="defaultNode()[state:actioned()=false()]"/>
<cue use="ButtonActioned"
begin="id('BTN02')[state:actioned()]"
end="defaultNode()[state:actioned()=false()]"/>
<cue use="ButtonActioned"
begin="id('BTN03')[state:focused()]"
end="defaultNode()[state:actioned()=false()]"/>
</par>
</timing>
</head>
<body>
<div style:position="absolute" style:x="100px" style:y="945px"
style:width="150px" style:height="150px">
<button id="BTN01" style="BTNSTYLE" accessKey="VK_1"
style:backgroundImage="url('MENU/BTN_NORM.png')
url('MENU/BTN_FOC.png')
url('MENU/BTN_FOC_ACT.png')" />
</div>
<div style:position="absolute" style:x="500px" style:y="945px"
style:width="150px" style:height="150px">
<button id="BTN02" style="BTNSTYLE" accessKey="VK_1"
style:backgroundImage="url('MENU/BTN_NORM.png')
url('MENU/BTN_FOC.png')
url('MENU/BTN_FOC_ACT.png')" />
</div>
<div style:position="absolute" style:x="900px" style:y="945px"
style:width="150px" style:height="150px">
<button id="BTN03" style="BTNSTYLE" accessKey="VK_1"
style:backgroundImage="url('MENU/BTN_NORM.png')
url('MENU/BTN_FOC_ACT.png')
url('MENU/BTN_FOC.png')" />
</div>
</body>
</root>
I just tested this out and it works. It uses scripting to change the focus and backgroundFrame.
Going back your original, replace the the button focus cues with the ones below and add the button hover cue.
<cue
begin="id('BTN01')[state:focused()=true()]"
end="id('BTN01')[state:focused()=false()]">
<event name="MenuFocus">
<param name="btnID" value="BTN01"/>
</event>
</cue>
<cue
begin="id('BTN02')[state:focused()=true()]"
end="id('BTN02')[state:focused()=false()]">
<event name="MenuFocus">
<param name="btnID" value="BTN02"/>
</event>
</cue>
<cue
begin="id('BTN03')[state:focused()=true()]"
end="id('BTN03')[state:focused()=false()]">
<event name="MenuFocus">
<param name="btnID" value="BTN03"/>
</event>
</cue>
<cue use="ButtonHover"
begin="class('menuButton')[state:pointer()=true()]"
dur="1f"
/>In each of the <button> in the <body>, add class="menuButton". And up in your <defs> add:
<set id="ButtonHover"
state:focused="true"
/>
You can either add this to an existing script or create a new one. This will handle the focus and backgroundFrame changing.
function MenuFocusHandler(evt)
{
switch(evt.btnID)
{
case "BTN01":
document.BTN01.style.backgroundFrame = "1";
document.BTN01.state.focused = "true";
document.BTN02.style.backgroundFrame = "0";
document.BTN02.state.focused = "false";
document.BTN03.style.backgroundFrame = "0";
document.BTN03.state.focused = "false";
break;
case "BTN02":
document.BTN02.style.backgroundFrame = "1";
document.BTN02.state.focused = "true";
document.BTN01.style.backgroundFrame = "0";
document.BTN01.state.focused = "false";
document.BTN03.style.backgroundFrame = "0";
document.BTN03.state.focused = "false";
break;
case "BTN03":
document.BTN03.style.backgroundFrame = "1";
document.BTN03.state.focused = "true";
document.BTN01.style.backgroundFrame = "0";
document.BTN01.state.focused = "false";
document.BTN02.style.backgroundFrame = "0";
document.BTN02.state.focused = "false";
break;
}
}
addEventListener("MenuFocus",MenuFocusHandler,true);
Let me know how it works out.
Thanks for the help so far.
I figured out that one of my problems was I had the button order for button 3 set incorrectly (typo) and so the action button was displaying for the focus.
<button id="BTN03" style="BTNSTYLE" accessKey="VK_1"
style:backgroundImage="url('MENU/BTN_NORM.png')
url('MENU/BTN_FOC_ACT.png')
url('MENU/BTN_FOC.png')" />instead of
<button id="BTN03" style="BTNSTYLE" accessKey="VK_1"
style:backgroundImage="url('MENU/BTN_NORM.png')
url('MENU/BTN_FOC.png')
url('MENU/BTN_FOC_ACT.png')" />
I have another question but it deserves a new thread I think.
Thanks
