backgroundImage parameters

Hot Topic

Production Method for Released HD-DVDs
MFT help
no region element in manifest file
Image PReview
How do I hide scrollbars in Firefox?
Peripheral Devices
js file not Big Endian
Help needed RSS feeds
Cinevision
style:border error

Audio and Video

New HD DVD players
Scaling with Media Foundation transform
Gadget with remote html src??
Bug #25: Flyout will only show if Sidebar has focus.
Gadget resets?
css behavior support?
Does iHDSim Support WMAs?
filecache
Can I create byte stream from network source?
IFrame Sample

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

  • rockmanxyj

    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.


  • Ultrawhack

    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>


  • Delano

    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.



  • ChristopheW

    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. 



  • RAB36

    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.


  • Tovdb

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



  • masom

    Peter,

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


  • Kzin

    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.



  • DennisWCP

    Very helpful Peter - thanks!


  • Malmer

    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)



  • Lars E.Nes

    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>



  • backgroundImage parameters
Answer this question