Submit My Question - Recent Questions - Recent Answer
Msdn Tech >> Audio and Video Development >> HD DVD Interactivity Authoring

Unsetting an 'actioned' button

Below is my js and markup. This is a basic button test with three states: normal, focused and selected/actioned. The test works, but I want a slightly different behavior. Right now when a button is pressed/selected, it stays actioned (in appearance) until I focus on another button.

What I'd like is for the button to revert back to focused. I've tried setting it to that state in the js, immediately after I jump in the title, but what happens then is I never see the action state. I'd like the button to stay actioned for like a second. To give it that pushed look/animation.

markup #####################

<?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="ButtonFocus">
<event name="ButtonFocus"/>
</g>
<g id="ButtonActioned">
<set style:backgroundFrame="2" />
<event name="StartButtonPressed"/>
</g>
</defs>
<par>
<cue use="ButtonFocus"
begin="id('BTN01')[state:focused()]"
end="defaultNode()[state:focused()=false()]"/>

<cue use="ButtonFocus"
begin="id('BTN02')[state:focused()]"
end="defaultNode()[state:focused()=false()]"/>

<cue use="ButtonFocus"
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:actioned()]"
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.png')
url('MENU/BTN_FOC_ACT.png') " />

</div>

</body>
</root>


js #########################

function OnStartButtonPressed(evt) {
document.BTN01.style.backgroundFrame = "0";
document.BTN02.style.backgroundFrame = "0";
document.BTN03.style.backgroundFrame = "0";

evt.target.style.backgroundFrame = "2";
evt.target.state.actioned = "true";
evt.target.state.unsetProperty("actioned");

var id = evt.target.getAttribute("id");
if (id == "BTN01") {
Player.playlist.titles["greenday"].jump("00:01:10:00", false);
evt.target.style.backgroundFrame = "0";
}
if (id == "BTN02") {
Player.playlist.titles["greenday"].jump("00:02:10:00", false);
evt.target.style.backgroundFrame = "0";
}
if (id == "BTN03") {
Player.playlist.titles["greenday"].jump("00:02:50:00", false);
evt.target.style.backgroundFrame = "0";
}
}

function ButtonFocusHandler(evt) {
document.BTN01.style.backgroundFrame = "0";
document.BTN02.style.backgroundFrame = "0";
document.BTN03.style.backgroundFrame = "0";

evt.target.style.backgroundFrame = "1";
evt.target.state.focused = "true";
evt.target.state.unsetProperty("focused");
}

addEventListener("ButtonFocus",ButtonFocusHandler,false);

addEventListener("StartButtonPressed",OnStartButtonPressed,false);

[18727 byte] By [wmerydith] at [2008-2-19]
«« VS2005 WPF Templates on Vista 5472
»» Problem with SQL Express DB !!
# 1

You could handle the animation entirely in mark up with a duration and not in script:

<par begin="id('BTN01')[state:actioned()=1]" dur="0.5s">
<cue select="id('BTN01')" begin="0.0s" dur="0.4s" fill="hold">
<set style:backgroundFrame="2" />
</cue>
<cue select="id('BTN01')" begin="0.4s" dur="1f">
<event name="StartButtonPressed" />
</cue>
</par>

The focus should stay on the button pressed so the focused() animation kicks in afterwards.

GunnarAdler at 2007-8-30 > top of Msdn Tech,Audio and Video Development,HD DVD Interactivity Authoring...
# 2

Question -- do you want to handle everything in script, or is that just how you got it to work?

I ask because we can certainly help get your script working if that's the way you want to do it, but it is probably easier to do it in markup and avoid script altogether for these simple cases.

Anyway, if you are OK with doing it in markup, just make these changes:

<g id="ButtonFocus">
<set style:backgroundFrame="1" />
 </g>

<cue use="ButtonActioned"
begin="id('BTN01')[state:actioned()]"
dur="0.5s"/>

And then remove all the animation code from your script. You don't need the focus handler, and the action handler can be simplified to just the chapter jumps.

PeterTorr-MSFT at 2007-8-30 > top of Msdn Tech,Audio and Video Development,HD DVD Interactivity Authoring...
# 3
A good question - one I am trying to answer myself ;)

Right now I am just making a bunch of functional tests to learn the iHD architecture. I have an assumption that it is better to separate code from presentation, and therefore my style right now is to put as much code into the js as possible. But granted that assumption is based on web development architectures and may simply not apply in this space.

So I guess the answer is I don't care as long as their are no performance hits.

I'll try this out thanks!

wmerydith at 2007-8-30 > top of Msdn Tech,Audio and Video Development,HD DVD Interactivity Authoring...
# 4
Actually I do remember now one reason I liked managing state through the script - managing state seems a lot easier.

For instance I can simple clear the other buttons.

Maybe it is overkill, but some of your early blog posts on managing state were a bit confusing at the time (to me) and it seemed like there were some issues with managing state at the markup level.

wmerydith at 2007-8-30 > top of Msdn Tech,Audio and Video Development,HD DVD Interactivity Authoring...
# 5

Managing state is harder in a generic way with only markup; most of my posts used a single cue to handle all possible buttons, and it is conceptually easier to do that in script (although potentially more work). If you have per-item cues, then it is easy in markup as well; the problem just becomes copy-and-pasting them all (hopefully authoring tools will do this for us in the future).

My personal opinion is that you can express some things better in markup and leave the script to only doing "real work." In terms of UI / code separation, the way the UI works really doesn't have any impact on the way the grunt coding works. If you change the way the Chapters menu functions (layout, animation, etc.) the code to perform the jumps is still the same.

But, the flexibility is there to do it either way. You could consider breaking out your "UI-related script" from your "Do the real work" script to make life easier in the future.

PeterTorr-MSFT at 2007-8-30 > top of Msdn Tech,Audio and Video Development,HD DVD Interactivity Authoring...
Audio and Video Development
HD DVD Interactivity Authoring

Audio and Video Development Hot Topic

Audio and Video Development New Topic

Audio and Video Development

Java / MSDN / Linux Tech / PHP Tech / MSDN DotNet / MSDN TECH / Health Library / Programmers Tech / visual basic Tech / Developer Tech / Ipod faqs / Msdn China Tech

Site Classified