backgroundImage parameters

The CSS used in iHD seems to be a bit different than CSS2.0.

First question:
Does the HD specification cover style syntax and definitions

Second question (and example of my confusion):
One of the samples posted to these forums includes a backgroundImage assignment with multiple items. I'm guessing this is to define different images per state.

style:backgroundImage="url('BUTTON_T1_0.PNG') url('BUTTON_T1_1.PNG')"

What is the signature for this style declaration

Thanks.

Answer this question

backgroundImage parameters

dj_develop

In this case they are equivalent. Depending on the implementation, one may be slightly more efficient than the other, but it would not matter unless you had MANY of them being resolvable at one time.

Note that you can only use defaultNode in an end clause. It selects the first node of the default nodeset, which is basically whatever was selected by the begin or select.

I like to use defaultNode() because it makes it very obvious what the intention of the animation is, and it makes it easier to copy-and-paste cues without introducing errors (since you only have to change the begin / select, not the end)
MaggieChan
I changed my question (edited) shortly after posting because I figured it out. Didn't see your reply otherwise I would have just posted a new question.

Anyways, see above. It doesn't seem to work in iHDSim even though it validates and the logic appears valid.
Dylan Smith
The sample references an animation by name, and the animation toggles the backgroundFrame. The code is not as efficient as it could be (see below):
- The button has two background images, BUTTON_T1_0.PNG and BUTTON_T1_1.PNG:
<button id="BTN01" accessKey="VK_1" style="BTNSTYLE" style:y= "20px" style:backgroundImage="url('BUTTON_T1_0.PNG') url('BUTTON_T1_1.PNG')"/>
- The cue fires when the button gets focus and uses the named animation ButtonHighlight:
<cue use="ButtonHighlight" begin="//button[@id='BTN01' and state:focused()=true()]" end="//button[@id='BTN01' and state:focused()=false()]"/>

Although it would be better to write this as:

<cue use="ButtonHighlight" begin="id('BTN01')[state:focused()]" end="defaultNode()[state:focused()=false()]"/>
- The ButtonHighlight animation sets the backgroundFrame to 1:
<g id="ButtonHighlight">
<set style:backgroundColor="green" style:backgroundFrame="1"/>
</g>

So the button starts off with the default backgroundFrame value of 0, and gets the image BUTTON_T1_0.PNG. When the button gets the focus, it switches to backgroundFrame 1 and shows the image BUTTON_T1_1.PNG. When the button loses the focus, the animation is terminated and it goes back to frame 0.
WishfulDoctor
I cannot seem to get my own example to work in the iHD simulator (below). It validates clean.

< 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>
Moim Hossain

It is a whitespace-delimited list of normal url('...') values.

You use (set / animate) the style:backgroundFrame attribute to determine which of the images to actually show. The indexing starts at zero.
Kevin_B
You're right, I did get a DOM exception for that line. I thought it was an issue with the default node and my lack of experience using xpath ;)

Thanks Peter. I'll try it on my production machine when I get a chance.
milkshake

state:focused() is a function -- note the parens on the end :-)

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

Simple typo that I do a lot... note that iHDSim will tell you in the status bar that there was a DOM exception for the expression.
Tryin2Bgood
Very helpful Peter - thanks!
yhong
Peter,

Is there a difference if end="defaultNode()[state:focused()=false()]" or end="id('BTN01')[state:focused()=false()]" is used
Samoyed

Yes, defs = definitions.

g = "group"; you can put (eg) three animate and two set elements in a group and reference them with one use="IDREF".
Davids Learning
So in the code below, how are the two images defined in the button's backgroundImage declaration being managed to display one image or the other based on focus

<root xmlns:style="http://www.dvdforum.org/2005/ihd#style" xmlns:state="http://www.dvdforum.org/2005/ihd#state" xmlns="http://www.dvdforum.org/2005/ihd" xml:lang="en">
<head>
<timing clock="page">
<defs>
<g id="ButtonHighlight">
<set style:backgroundColor="green" style:backgroundFrame="1"/>
</g>
<g id="ButtonActioned">
<set style:border="4px solid red"/>
<event name="StartButtonPressed"/>
</g>
</defs>
<par>
<cue use="ButtonHighlight" begin="//button[@id='BTN01' and state:focused()=true()]" end="//button[@id='BTN01' and state:focused()=false()]"/>
<cue use="ButtonHighlight" begin="//button[@id='BTN02' and state:focused()=true()]" end="//button[@id='BTN02' and state:focused()=false()]"/>
<cue use="ButtonHighlight" begin="//button[@id='BTN03' and state:focused()=true()]" end="//button[@id='BTN03' and state:focused()=false()]"/>
<cue use="ButtonHighlight" begin="//button[@id='BTN04' and state:focused()=true()]" end="//button[@id='BTN04' and state:focused()=false()]"/>
<cue use="ButtonHighlight" begin="//button[@id='BTN05' and state:focused()=true()]" end="//button[@id='BTN05' and state:focused()=false()]"/>

<cue use="ButtonActioned" begin="//button[@id='BTN01' and state:actioned()=true()]" end="//button[@id='BTN01' and state:actioned()=false()]"/>
<cue use="ButtonActioned" begin="//button[@id='BTN02' and state:actioned()=true()]" end="//button[@id='BTN02' and state:actioned()=false()]"/>
<cue use="ButtonActioned" begin="//button[@id='BTN03' and state:actioned()=true()]" end="//button[@id='BTN03' and state:actioned()=false()]"/>
<cue use="ButtonActioned" begin="//button[@id='BTN04' and state:actioned()=true()]" end="//button[@id='BTN04' and state:actioned()=false()]"/>
<cue use="ButtonActioned" begin="//button[@id='BTN05' and state:actioned()=true()]" end="//button[@id='BTN05' and state:actioned()=false()]"/>
</par>
</timing>
<styling>
<style id="BTNSTYLE" style:position="absolute" style:border="2px solid black" style:backgroundFrame="0"
style:x="20px" style:width="240px" style:height="70px" />
</styling>
</head>
<body>
<div style:position="absolute" style:x="300px" style:y="240px" style:width="300px" style:height="510px"
style:border="2px solid red" style:backgroundColor="rgba(128, 128, 255, 70)">
<button id="BTN01" accessKey="VK_1" style="BTNSTYLE" style:y= "20px" style:backgroundImage="url('BUTTON_T1_0.PNG') url('BUTTON_T1_1.PNG')"/>
<button id="BTN02" accessKey="VK_2" style="BTNSTYLE" style:y="120px" style:backgroundImage="url('BUTTON_T2_0.PNG') url('BUTTON_T2_1.PNG')"/>
<button id="BTN03" accessKey="VK_3" style="BTNSTYLE" style:y="220px" style:backgroundImage="url('BUTTON_T3_0.PNG') url('BUTTON_T3_1.PNG')"/>
<button id="BTN04" accessKey="VK_4" style="BTNSTYLE" style:y="320px" style:backgroundImage="url('BUTTON_T4_0.PNG') url('BUTTON_T4_1.PNG')"/>
<button id="BTN05" accessKey="VK_5" style="BTNSTYLE" style:y="420px" style:backgroundImage="url('BUTTON_T5_0.PNG') url('BUTTON_T5_1.PNG')"/>
</div>
</body>
</root>
backgroundImage parameters

Answer this question

backgroundImage parameters

Hot Topic

Audio and Video

backgroundImage parameters

backgroundImage parameters

dj_develop

MaggieChan

Dylan Smith

WishfulDoctor

Moim Hossain

Kevin_B

milkshake

Tryin2Bgood

yhong

Samoyed

Davids Learning