Background/Start Menu

I'm having trouble understanding how to set up a basic start menu, which goes away when video is selected (I have the spec now so feel free to refer me to specific sections/pages).

Maybe I am going about this wrong but basically I have defined title 1 as not having any video asset. So at start no video plays. Instead you see a background image ("BACKGROUND") and a little menu panel ("TRAY"):

<styling>
<style id="BTNSTYLE" style:position="absolute" style:backgroundFrame="0"
style:width="88px" style:height="88px"
style:y="5px" style:x="5px"/>

<style id="TRAYTEXT" style:position="absolute" style:backgroundFrame="0"
style:backgroundImage="url('MENU/TRAY_TEXT.png')"
style:width="622px" style:height="50px"
style:y="95px" style:x="55px" />

<style id="BACKGROUND" style:position="absolute" style:backgroundFrame="0"
style:backgroundImage="url('MENU/BKG.png')"
style:y="0px" style:x="0px"
style:width="1280px" style:height="720px" />

</styling>

<body>
<div id="TRAY"
style:position="absolute" style:x="250px" style:y="900px"
style:width="1007px" style:height="177px"
style:backgroundImage="url('MENU/TRAY.png')">

<div style:position="absolute" style:x="75px" style:y="0px"
style:width="95px" style:height="95px">

<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="205px" style:y="0px"
style:width="95px" style:height="95px">

<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="335px" style:y="0px"
style:width="95px" style:height="95px">

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

<div style:position="absolute" style:x="575px" style:y="0px"
style:width="95px" style:height="95px">

<button id="BTN04" 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="TRAYTEXT">
</div>
</div>
<div style="BACKGROUND">
</div>
</body>

Then what I do is attempt to set visibility on the background to "hidden" in the js when a video item is selected:

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") {
document.BACKGROUND.style.visibility = "hidden";
Player.playlist.titles["greenday"].jump("00:01:10:00", false);
}
if (id == "BTN02") {
Player.playlist.titles["greenday"].jump("00:02:10:00", false);
}
if (id == "BTN03") {
Player.playlist.titles["greenday"].jump("00:02:50:00", false);
}
if (id == "BTN04") {
Player.playlist.titles["greenday"].jump("00:02:50:00", false);
}
}

That however is not working. The background images stays, covering the video. :(

Perhaps I am simply not understanding a basic principle of how to put these elements together It seems like building a front page menu that is a gateway to video content should be straightforward.

Answer this question

Background/Start Menu

Wee Bubba
Yes, pretty much everything should be absolute in HD DVD. It will be long time before we have resizable TV screens :-)
jdunleav
Found the problem. I had not defined the id for BACKGROUND! :)

Still, I'm curious to see other solutions to this problem.
SivaS
Ah ok - good tip.

Normally I use relative/float positioning in web development in order to take advantage of a resizable space (the browser). My assumption here is that the aperature is fixed and that is why I've been using absolute positioning (which is much easier to work with imo).
eldiener

Indeed :-)

You should use display="none" rather than visibility="hidden". Setting display will cause the image to be discarded from the pixel buffer, freeing it up for other uses. Setting visibility will keep it in the pixel buffer, and sooner or later you will run out of memory.

(There are also other things like whether it takes up room in the flow, but with absolute positioning that doesn't really matter).
Background/Start Menu

Answer this question