backgroundImage parameters

Hot Topic

Any sample for ITA?
Applicative mode (Styling)
Error using System.Network.Wireless
Vector Graphics in Gadget
Sound card driver causes blue screen
SetPreference does not always work?
HDi and animations
AACS protection has been hacked
How can I capture the microphone audio and webcam images?
Basic Gadget Codes?

Audio and Video

A way to test h.264 ES on HD-DVD?
MIME types in Spaces vs. Live.com
How to insert "style:x" attribute to node using MSXML SDK?
How to send custom event form MFT?
HD DVD Jumpstart and Vista
Great news, looking forward to make authoring tool
Additional property for DIV\BUTTON elements
Problem with 'content ID' while creating directory in 'persistent storage'.
Window Media SDK
newbie questions...gadget SDK

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

  • Joe Buys

    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".



  • KVelocity

    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>



  • Richard Meijer

    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.



  • Aghasadeghi

    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.



  • Brad Corbett

    Very helpful Peter - thanks!


  • netpicker9

    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.


  • Fran431916

    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. 



  • Sergei Dorogin

    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.


  • Jared Y

    Peter,

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


  • Blast

    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>


  • tviel

    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)



  • backgroundImage parameters
Answer this question