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>
Focused Buttons and State not working.
citygirl
I thought the mouse in the simulator was the same as the left right up down buttons. Ok focus works with the arrow keys, but still the state gets screwy. Active buttons are not clearing when focused is transfered to another button.
Orbix
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
pu132
Personally I wouldn't use the script method (I'd handle this in markup), but if you want to then you can simplify it:
rSchild
Where you have,
<cue use="ButtonHighlight"
begin="id('BTN01')[state:focused()]"
end="defaultNode()[state:focused()=false()]"/>
try,
<cue use="ButtonHighlight"
begin="id('BTN01')[state:pointer()=true()]"
end="defaultNode()[state:pointer()=false()]"/>
Do that for all three buttons. Also, that may not work in an HD-DVD player because there is no "pointer" on the screen. In that case, state:focused would be needed.
Brian Driscoll
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.
<cuebegin="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.