var imageIndex = 0;
var vidIcon = new Image();
var imgIcon = new Image();
-var metalBar = new Image();
var imagesLoaded = false;
+var mediaListItemW;
+var mediaListItemH;
+var imageControls;
var mediaNameCanvas;
var mediaNameCTX;
+var mainMenuTitleTemplateLandscape = {"font" : "oblique bolder 30pt arial", "lineWidth" : 9.5, "fillStyle" : "black", "strokeStyle" : "white", "textAlign" : "left",
+ "largeShadow" : 8, "shadowOffsetX" : 0, "shadowOffsetY" : 0, "shadowBlur" : 45, "shadowColor" : "rgba(255, 187, 0, 0.4)"};
+
var mainMenuTitleTemplate = {"font" : "oblique bolder 40pt arial", "lineWidth" : 9.5, "fillStyle" : "black", "strokeStyle" : "white", "textAlign" : "left",
- "largeShadow" : 8, "shadowOffsetX" : 0, "shadowOffsetY" : 0, "shadowBlur" : 45, "shadowColor" : "rgba(255, 187, 0, 0.4)"}; //150
+ "largeShadow" : 8, "shadowOffsetX" : 0, "shadowOffsetY" : 0, "shadowBlur" : 45, "shadowColor" : "rgba(255, 187, 0, 0.4)"};
+
+var mainTrackTemplateLandscape = {"font" : "bold 20pt Arial", "lineWidth" : 7.5, "fillStyle" : "black", "strokeStyle" : "white", "textAlign" : "left",
+ "largeShadow" : 8, "shadowOffsetX" : 0, "shadowOffsetY" : 0, "shadowBlur" : 45, "shadowColor" : "rgba(255, 187, 0, 0.5))"};
var mainTrackTemplate = {"font" : "bold 30pt Arial", "lineWidth" : 7.5, "fillStyle" : "black", "strokeStyle" : "white", "textAlign" : "left",
- "largeShadow" : 8, "shadowOffsetX" : 0, "shadowOffsetY" : 0, "shadowBlur" : 45, "shadowColor" : "rgba(255, 187, 0, 0.5))"};
+ "largeShadow" : 8, "shadowOffsetX" : 0, "shadowOffsetY" : 0, "shadowBlur" : 45, "shadowColor" : "rgba(255, 187, 0, 0.5))"};
var mediaTextTemplate2 = {"font" : "bold 20pt Arial", "lineWidth" : 10.0, "fillStyle" : "white", "strokeStyle" : "rgba(0, 0, 0, 1.0)", "textAlign" : "left",
- "shadowOffsetX" : 0, "shadowOffsetY" : 0, "shadowBlur" : 0, "shadowColor" : "rgba(0, 0, 0, 1.0)"};
+ "shadowOffsetX" : 0, "shadowOffsetY" : 0, "shadowBlur" : 0, "shadowColor" : "rgba(0, 0, 0, 1.0)"};
var mediaTextTemplate3 = {"font" : "bold 20pt Arial", "lineWidth" : 3.0, "fillStyle" : "white", "strokeStyle" : "rgba(100, 0, 0, 1.0)", "textAlign" : "left"};
var trackTextTemplate = {"font" : "bold 16pt Arial", "lineWidth" : 3.0, "fillStyle" : "white", "strokeStyle" : "black", "textAlign" : "left"};
+var mediaTextTemplate2Landscape = {"font" : "bold 15pt Arial", "lineWidth" : 10.0, "fillStyle" : "white", "strokeStyle" : "rgba(0, 0, 0, 1.0)", "textAlign" : "left",
+ "shadowOffsetX" : 0, "shadowOffsetY" : 0, "shadowBlur" : 0, "shadowColor" : "rgba(0, 0, 0, 1.0)"};
+
+var mediaTextTemplate3Landscape = {"font" : "bold 15pt Arial", "lineWidth" : 3.0, "fillStyle" : "white", "strokeStyle" : "rgba(100, 0, 0, 1.0)", "textAlign" : "left"};
+
+var trackTextTemplateLandscape = {"font" : "bold 11pt Arial", "lineWidth" : 3.0, "fillStyle" : "white", "strokeStyle" : "black", "textAlign" : "left"};
+
+
var mediaTextTemplate = {"font" : "bold 20pt Arial", "fillStyle" : "", "textAlign" : "left",
- "shadowOffsetX" : 0, "shadowOffsetY" : 0, "shadowBlur" : 12, "shadowColor" : "red"};
+ "shadowOffsetX" : 0, "shadowOffsetY" : 0, "shadowBlur" : 12, "shadowColor" : "red"};
function onError()
{
- alert("Content discovery failed");
+ console.log("Content discovery failed");
}
function loadImages(callback)
{
- var loadedImages = 0;
- var numImages = 0;
-
- for (var src in audioContent)
- {
- numImages++;
- }
- for (var src in audioContent)
- {
- audioContent[src].coverArt = new Image();
- audioContent[src].coverArt.onload = function(){
- if (++loadedImages >= numImages) {
- imagesLoaded = true;
- callback(audioContent);
- }
- };
-
- audioContent[src].coverArt.onerror = function(e){
- audioContent[src].coverArt.src = "images/musicButton.png";
- };
-
- audioContent[src].coverArt.src = audioContent[src].coverArtURI;
- }
+ var loadedImages = 0;
+ var numImages = 0;
+
+ for (var src in audioContent)
+ {
+ numImages++;
+ }
+ for (var src in audioContent)
+ {
+ audioContent[src].coverArt = new Image();
+ audioContent[src].coverArt.onload = function(){
+
+ if (++loadedImages >= numImages) {
+ imagesLoaded = true;
+ callback(audioContent);
+ }
+ };
+
+ audioContent[src].coverArt.onerror = function(e){
+ audioContent[src].coverArt.src = "images/musicButton.png";
+ };
+
+ audioContent[src].coverArt.src = audioContent[src].coverArtURI;
+ }
}
function updateMediaName(newArtist, newTitle, newCover)
{
- var playBarHeight = mediaNameCanvas.height;
- var boxWidth = playBarHeight * 0.75;
- mediaNameCTX.clearRect(0,0,mediaNameCanvas.width, mediaNameCanvas.height);
-
- if (currentPlayerType === "AUDIO")
- {
- var shadeJump = 10;
- var alphaJump = 0.01;
- var currColor = 255;
- var currAlpha = 1.0;
-
- mediaNameCTX.fillStyle="rgba(30,30,30,0.5)";
- mediaNameCTX.strokeStyle="rgba(130,130,130,1)";
- mediaNameCTX.lineWidth = 5;
- mediaNameCTX.fillRect(0,0,mediaNameCanvas.width, playBarHeight);
- mediaNameCTX.strokeRect(-20,0,mediaNameCanvas.width + 40, playBarHeight);
- mediaNameCTX.drawImage(newCover, 20, 20, boxWidth, boxWidth);
- var textStartX = boxWidth + 50;
- var trackText = new TextObject(mediaNameCTX,{"text" : newTitle, "xLoc" : textStartX, "yLoc" : 70 , "zLoc" : 0, "width" : mediaNameCanvas.width - textStartX, "height" : 50, "lineHeight" : 50, "wordWrap" : true});
- trackText.applyTemplate(mainMenuTitleTemplate);
- var artistText = new TextObject(mediaNameCTX,{"text" : newArtist, "xLoc" : textStartX, "yLoc" : 70 + trackText.height, "zLoc" : 0, "width" : mediaNameCanvas.width - textStartX, "height" : 50, "lineHeight" : 50, "wordWrap" : true});
-
- mediaNameCTX.drawImage(newCover, 0, 0, mediaNameCanvas.height, mediaNameCanvas.height);
- }
-
- trackText.drawObj();
- trackText.drawLargeShadow();
-
- artistText.yLoc = 70 + trackText.height;
- artistText.applyTemplate(mainTrackTemplate);
- artistText.drawObj();
+ var playBarHeight = mediaNameCanvas.height;
+ var boxWidth = playBarHeight * 0.75;
+ mediaNameCTX.clearRect(0,0,mediaNameCanvas.width, mediaNameCanvas.height);
+
+ if (currentPlayerType === "AUDIO")
+ {
+ var shadeJump = 10;
+ var alphaJump = 0.01;
+ var currColor = 255;
+ var currAlpha = 1.0;
+
+ mediaNameCTX.fillStyle="rgba(30,30,30,0.5)";
+ mediaNameCTX.strokeStyle="rgba(130,130,130,1)";
+ mediaNameCTX.lineWidth = 5;
+ mediaNameCTX.fillRect(0,0,mediaNameCanvas.width, playBarHeight);
+ mediaNameCTX.strokeRect(-20,0,mediaNameCanvas.width + 40, playBarHeight);
+ mediaNameCTX.drawImage(newCover, 20, (playBarHeight - boxWidth) / 2, boxWidth, boxWidth);
+
+ if (screenOrientation === "portrait")
+ {
+ var textStartX = boxWidth + 50;
+ var trackText = new TextObject(mediaNameCTX,{"text" : newTitle, "xLoc" : textStartX, "yLoc" : 70 , "zLoc" : 0, "width" : mediaNameCanvas.width - textStartX, "height" : 50, "lineHeight" : 50, "wordWrap" : true});
+ trackText.applyTemplate(mainMenuTitleTemplate);
+ var artistText = new TextObject(mediaNameCTX,{"text" : newArtist, "xLoc" : textStartX, "yLoc" : 70 + trackText.height, "zLoc" : 0, "width" : mediaNameCanvas.width - textStartX, "height" : 50, "lineHeight" : 50, "wordWrap" : true});
+ artistText.applyTemplate(mainTrackTemplate);
+
+ trackText.drawObj();
+ trackText.drawLargeShadow();
+
+ artistText.yLoc = 70 + trackText.height;
+ artistText.drawObj();
+ }
+ else
+ {
+ var textStartX = boxWidth + 50;
+ var trackText = new TextObject(mediaNameCTX,{"text" : newTitle, "xLoc" : textStartX, "yLoc" : 50 , "zLoc" : 0, "width" : mediaNameCanvas.width - textStartX, "height" : 30, "lineHeight" : 30, "wordWrap" : true});
+ trackText.applyTemplate(mainMenuTitleTemplateLandscape);
+ var artistText = new TextObject(mediaNameCTX,{"text" : newArtist, "xLoc" : textStartX, "yLoc" : 50, "zLoc" : 0, "width" : mediaNameCanvas.width - textStartX, "height" : 30, "lineHeight" : 30, "wordWrap" : true});
+ artistText.applyTemplate(mainTrackTemplateLandscape);
+
+ trackText.drawObj();
+ trackText.drawLargeShadow();
+
+ artistText.yLoc = 50 + trackText.height;
+ artistText.drawObj();
+ }
+ }
}
function fillMediaList(contentList)
{
- if (!imagesLoaded)
- return false;
-
- var iconURI;
- var currentCanvas;
- var iconImg = new Image();
- var mediaListItemW = $("#mediaList").width() * 0.92;
- var mediaListItemH = $("#mediaList").height() / 10;
- var canvasW = mediaListItemW;// * 0.9;
- var canvasH = mediaListItemH * 0.95 ;
-
- $("#mediaListItems").empty();
- var lightColor = false;
- for (var i=0; i < contentList.length; i++)
- {
- if (!lightColor)
+ if (!imagesLoaded)
+ return false;
+
+ var iconURI;
+ var currentCanvas;
+ var iconImg = new Image();
+ var canvasW = mediaListItemW;
+ var canvasH = mediaListItemH * 0.95 ;
+
+ $("#mediaListItems").empty();
+ var lightColor = false;
+ for (var i=0; i < contentList.length; i++)
{
- $("#mediaListItems").append("<li><a href='#'>" +
- "<canvas id=canvasNum" + i + " width=" + canvasW + " height=" + canvasH + "> </canvas>" +
- "</a></li>"
- );
- }
- else
- {
- $("#mediaListItems").append("<li><a href='#' class='lightColor'>" +
- "<canvas id=canvasNum" + i + " width=" + canvasW + " height=" + canvasH + "> </canvas>" +
- "</a></li>"
- );
- }
-
- lightColor = !lightColor;
-
- currentCanvas = document.getElementById("canvasNum"+ i);
- currentCTX = currentCanvas.getContext("2d");
+ if (!lightColor)
+ {
+ $("#mediaListItems").append("<li><a href='#'>" +
+ "<canvas id=canvasNum" + i + " width=" + canvasW + " height=" + canvasH + "> </canvas>" +
+ "</a></li>"
+ );
+ }
+ else
+ {
+ $("#mediaListItems").append("<li><a href='#' class='lightColor'>" +
+ "<canvas id=canvasNum" + i + " width=" + canvasW + " height=" + canvasH + "> </canvas>" +
+ "</a></li>"
+ );
+ }
- // Set callback function for the new list item
- $("#canvasNum"+i).click(function () {
- listIndex = $(this).parent().parent().index();
+ lightColor = !lightColor;
+
+ currentCanvas = document.getElementById("canvasNum"+ i);
+ currentCTX = currentCanvas.getContext("2d");
+
+ // Set callback function for the new list item
+ $("#canvasNum"+i).click(function () {
+ listIndex = $(this).parent().parent().index();
+
+ switch (currentPlayerType)
+ {
+ case "AUDIO":
+ updateMediaName(audioContent[listIndex].artists[0], audioContent[listIndex].title, audioContent[listIndex].coverArt);
+ $("#audioSrc").attr("src", audioContent[listIndex].contentURI);
+ audioPlayer.load();
+ break;
+ case "VIDEO":
+ updateMediaName(videoContent[listIndex].artists[0], audioContent[listIndex].title, vidIcon);
+ $("#videoSrc").attr("src", videoContent[listIndex].contentURI);
+ videoPlayer.load();
+ $("#mediaList").fadeOut(300);
+ break;
+ case "IMAGE":
+ $("#imagePlayer").css("background", "url(" + imageContent[listIndex].contentURI + ") no-repeat center");
+ $("#imagePlayer").css("background-size", "contain");
+ $("#mediaList").fadeOut(300);
+ break;
+ default:
+ break;
+ }
+ });
switch (currentPlayerType)
{
case "AUDIO":
- updateMediaName(audioContent[listIndex].artists[0], audioContent[listIndex].title, audioContent[listIndex].coverArt);
- $("#audioSrc").attr("src", audioContent[listIndex].contentURI);
- audioPlayer.load();
- break;
+ currentCTX.drawImage(audioContent[i].coverArt, 0, 0, canvasH, canvasH );
+ var trackText = new TextObject(currentCTX,{"text" : contentList[i].title, "xLoc" : canvasH + 20, "yLoc" : canvasH / 2.5 , "zLoc" : 0});
+ var artistText = new TextObject(currentCTX,{"text" : contentList[i].artists[0], "xLoc" : canvasH + 20, "yLoc" : canvasH / 1.1 , "zLoc" : 0});
+
+ break;
case "VIDEO":
- updateMediaName(videoContent[listIndex].artists[0], audioContent[listIndex].title, vidIcon);
- $("#videoSrc").attr("src", videoContent[listIndex].contentURI);
- videoPlayer.load();
- $("#mediaList").fadeOut(300);
- break;
+ currentCTX.drawImage(vidIcon, 0, 0, canvasH, canvasH );
+ var artistText = new TextObject(currentCTX,{"text" : contentList[i].artists[0], "xLoc" : canvasH + 20, "yLoc" : canvasH / 2.5 , "zLoc" : 0});
+ var trackText = new TextObject(currentCTX,{"text" : contentList[i].title, "xLoc" : canvasH + 20, "yLoc" : canvasH / 1.1 , "zLoc" : 0});
+
+ break;
case "IMAGE":
- $("#imagePlayer").css("background", "url(" + imageContent[listIndex].contentURI + ") no-repeat center");
- $("#imagePlayer").css("background-size", "contain");
- $("#mediaList").fadeOut(300);
- break;
+ currentCTX.drawImage(imgIcon, 0, 0, canvasH, canvasH );
+ var artistText = new TextObject(currentCTX,{"text" : contentList[i].title, "xLoc" : canvasH + 20, "yLoc" : canvasH / 2.5 , "zLoc" : 0});
+ var trackText = new TextObject(currentCTX,{"text" : " ", "xLoc" : canvasH + 20, "yLoc" : canvasH / 1.1 , "zLoc" : 0});
+ break;
default:
- break;
+ break;
}
- });
- switch (currentPlayerType)
- {
- case "AUDIO":
- currentCTX.drawImage(audioContent[i].coverArt, 0, 0, canvasH, canvasH );
- var trackText = new TextObject(currentCTX,{"text" : contentList[i].title, "xLoc" : canvasH + 20, "yLoc" : canvasH / 2.5 , "zLoc" : 0});
- var artistText = new TextObject(currentCTX,{"text" : contentList[i].artists[0], "xLoc" : canvasH + 20, "yLoc" : canvasH / 1.1 , "zLoc" : 0});
+ var mediaTextTemp1 = screenOrientation === "portrait" ? mediaTextTemplate2 : mediaTextTemplate2Landscape;
+ var mediaTextTemp2 = screenOrientation === "portrait" ? mediaTextTemplate3 : mediaTextTemplate3Landscape;
+ var trackTextTemp = screenOrientation === "portrait" ? trackTextTemplate : trackTextTemplateLandscape;
- break;
- case "VIDEO":
- currentCTX.drawImage(vidIcon, 0, 0, canvasH, canvasH );
- var artistText = new TextObject(currentCTX,{"text" : contentList[i].artists[0], "xLoc" : canvasH + 20, "yLoc" : canvasH / 2.5 , "zLoc" : 0});
- var trackText = new TextObject(currentCTX,{"text" : contentList[i].title, "xLoc" : canvasH + 20, "yLoc" : canvasH / 1.1 , "zLoc" : 0});
+ trackText.applyTemplate(mediaTextTemp1);
+ trackText.drawObj();
+ trackText.applyTemplate(mediaTextTemp2);
+ trackText.drawObj();
- break;
- case "IMAGE":
- currentCTX.drawImage(imgIcon, 0, 0, canvasH, canvasH );
- var artistText = new TextObject(currentCTX,{"text" : contentList[i].title, "xLoc" : canvasH + 20, "yLoc" : canvasH / 2.5 , "zLoc" : 0});
- var trackText = new TextObject(currentCTX,{"text" : " ", "xLoc" : canvasH + 20, "yLoc" : canvasH / 1.1 , "zLoc" : 0});
- break;
- default:
- break;
+ artistText.applyTemplate(trackTextTemp);
+ artistText.drawObj();
}
- trackText.applyTemplate(mediaTextTemplate2);
- trackText.drawObj();
- trackText.applyTemplate(mediaTextTemplate3);
- trackText.drawObj();
-
- artistText.applyTemplate(trackTextTemplate);
- artistText.drawObj();
- }
-
- $("#mediaListItems li").css({"width" : mediaListItemW + "px", "height" : mediaListItemH + "px", "margin-bottom" : "10px"});
+ $("#mediaListItems li").css({"width" : mediaListItemW + "px", "height" : mediaListItemH + "px", "margin-bottom" : "10px"});
}
function onContentItemArraySuccess(content)
{
- var emptyContent = true;
+ var emptyContent = true;
- if (!content || content === undefined || content.length <= 0)
- alert("Invalid content");
- else
- {
- emptyContent = false;
- }
+ if (!content || content === undefined || content.length <= 0)
+ console.log("Invalid content");
+ else
+ {
+ emptyContent = false;
+ }
- switch (contentType)
- {
+ switch (contentType)
+ {
case "AUDIO":
- if (!emptyContent)
- {
- audioContent = content;
- sortByAlpha(audioContent);
-
- $("#audioSrc").attr("src", audioContent[0].contentURI);
-
- var imgSources = [];
- for (var i=0; i < audioContent.length; i++)
+ if (!emptyContent)
{
- if (i == 0)
- audioContent[i].coverArtURI = "images/musicButton.png";
- else
- {
- var iconURI = audioContent[i].thumbnailURIs[0].length > 1 ? audioContent[i].thumbnailURIs[0] : "images/musicButton.png";
- audioContent[i].coverArtURI = iconURI;
- }
+ audioContent = content;
+ sortByAlpha(audioContent);
+
+ $("#audioSrc").attr("src", audioContent[0].contentURI);
+
+ var imgSources = [];
+ for (var i=0; i < audioContent.length; i++)
+ {
+ if (i == 0)
+ audioContent[i].coverArtURI = "images/musicButton.png";
+ else
+ {
+ var iconURI = audioContent[i].thumbnailURIs[0].length > 1 ? audioContent[i].thumbnailURIs[0] : "images/musicButton.png";
+ audioContent[i].coverArtURI = iconURI;
+ }
+ }
+
+ loadImages(fillMediaList);
}
-
- loadImages(fillMediaList);
- }
- contentType = "VIDEO";
- break;
+ contentType = "VIDEO";
+ break;
case "VIDEO":
- if (!emptyContent)
- {
- videoContent = content;
- $("#videoSrc").attr("src", videoContent[0].contentURI);
- }
- contentType = "IMAGE";
- break;
+ if (!emptyContent)
+ {
+ videoContent = content;
+ $("#videoSrc").attr("src", videoContent[0].contentURI);
+ }
+ contentType = "IMAGE";
+ break;
case "IMAGE":
- if (!emptyContent)
- {
- imageContent = content;
- $("#imagePlayer").css("background", "url(" + imageContent[0].contentURI + ") no-repeat center");
- $("#imagePlayer").css("background-size", "contain");
- }
- contentType = undefined;
- break;
+ if (!emptyContent)
+ {
+ imageContent = content;
+ $("#imagePlayer").css("background", "url(" + imageContent[0].contentURI + ") no-repeat center");
+ $("#imagePlayer").css("background-size", "contain");
+ }
+ contentType = undefined;
+ break;
default:
- console.log("Undefined content search type");
- nextContentType = undefined;
- break;
- }
+ console.log("Undefined content search type");
+ nextContentType = undefined;
+ break;
+ }
- if (contentType !== undefined)
- getMedia(contentType);
+ if (contentType !== undefined)
+ getMedia(contentType);
}
function getMedia(mediaType)
{
- var manager = tizen.content;
+ var manager = tizen.content;
- var filter = new tizen.AttributeFilter("type", "EXACTLY", mediaType);
- manager.find(onContentItemArraySuccess, onError, null, filter);
+ var filter = new tizen.AttributeFilter("type", "EXACTLY", mediaType);
+ manager.find(onContentItemArraySuccess, onError, null, filter);
}
function showMediaMenu()
{
- $(".navButton").fadeIn(800);
+ $(".navButton").fadeIn(800);
- switch(currentPlayerType)
- {
+ switch(currentPlayerType)
+ {
case "AUDIO":
- //show audio player
- updateMediaName(audioContent[listIndex].artists[0], audioContent[listIndex].title, audioContent[listIndex].coverArt);
- $("#mediaName").fadeIn(800);
- $(".sortButton").fadeIn(800);
- currentPlayer.fadeIn(800);
- $("#mediaList").addClass("mediaListAudioList");
- $("#mediaList").fadeIn(800);
- break;
+ //show audio player
+ updateMediaName(audioContent[listIndex].artists[0], audioContent[listIndex].title, audioContent[listIndex].coverArt);
+ $("#mediaName").fadeIn(800);
+ $(".sortButton").fadeIn(800);
+ currentPlayer.fadeIn(800);
+ $("#mediaList").addClass("mediaListAudioList");
+
+ if (screenOrientation === "landscape" )
+ $("#mediaList").addClass("landscape");
+ else
+ $("#mediaList").removeClass("landscape");
+
+ $("#mediaList").fadeIn(800);
+ break;
case "VIDEO":
- //show video
- setTimeout(function(){currentPlayer.show()}, 800); //The video element can't be faded, so wait a moment before showing
- break;
+ //show video
+ setTimeout(function(){currentPlayer.show()}, 800); //The video element can't be faded, so wait a moment before showing
+ break;
case "IMAGE":
- //show image
- currentPlayer.fadeIn(800);
- break;
- default:0
- console.log("Invalid player type");
+ //show image
+ currentPlayer.fadeIn(800);
break;
- }
+ default:0
+ console.log("Invalid player type");
+ break;
+ }
}
function showMediaList()
{
- if ($("#mediaList").is(":visible"))
- $("#mediaList").fadeOut(300);
- else
- {
- fillMediaList(currentContent);
- $("#mediaList").fadeIn(300);
- }
+ if ($("#mediaList").is(":visible"))
+ $("#mediaList").fadeOut(300);
+ else
+ {
+ fillMediaList(currentContent);
+ $("#mediaList").fadeIn(300);
+ }
}
function changeMenu(menuButtonId)
{
- var clickedButton = $("#" + menuButtonId);
- var buttonWidth = clickedButton.width();
- var buttonHeight = clickedButton.height();
- var buttonBottom = clickedButton.css("bottom");
- var buttonRight = clickedButton.css("right");
-
- //Animate the clicked button slightly
- clickedButton.animate({
-bottom: screenOrientation === "portrait" ? "+=0" : "+=50",
-right: screenOrientation === "portrait" ? "+=50" : "+=0",
-opacity: "0"
-}, 300 ,
-
-//Reset the size once done
-function() {
-clickedButton.width(buttonWidth);
-clickedButton.height(buttonHeight);
-
-if (screenOrientation === "portrait")
-clickedButton.css({"right": buttonRight});
-else
-clickedButton.css({"bottom": buttonBottom});
-}
-);
+ var clickedButton = $("#" + menuButtonId);
+ var buttonWidth = clickedButton.width();
+ var buttonHeight = clickedButton.height();
+ var buttonBottom = clickedButton.css("bottom");
+ var buttonRight = clickedButton.css("right");
+
+ //Animate the clicked button slightly
+ clickedButton.animate({
+ bottom: screenOrientation === "portrait" ? "+=0" : "+=50",
+ right: screenOrientation === "portrait" ? "+=50" : "+=0",
+ opacity: "0"
+ }, 300 ,
+
+ //Reset the size once done
+ function() {
+ clickedButton.width(buttonWidth);
+ clickedButton.height(buttonHeight);
+
+ if (screenOrientation === "portrait")
+ clickedButton.css({"right": buttonRight});
+ else
+ clickedButton.css({"bottom": buttonBottom});
+ }
+ );
- $(".mainButton").fadeOut(300);
+ $(".mainButton").fadeOut(300);
-switch(menuButtonId)
-{
- case ("mainMusicButton"):
- currentPlayer = $("#audioPlayer");
+ switch(menuButtonId)
+ {
+ case ("mainMusicButton"):
+ currentPlayer = $("#audioPlayer");
currentPlayerControls = document.getElementById("audioPlayer");
currentPlayerType = "AUDIO";
currentContent = audioContent;
showMediaMenu();
break;
- case ("mainVideoButton"):
- currentPlayer = $("#videoPlayer");
+ case ("mainVideoButton"):
+ currentPlayer = $("#videoPlayer");
currentPlayerControls = document.getElementById("videoPlayer");
currentPlayerType = "VIDEO";
currentContent = videoContent;
showMediaMenu();
break;
- case ("mainImageButton"):
- currentPlayer = $("#imagePlayer");
+ case ("mainImageButton"):
+ currentPlayer = $("#imagePlayer");
+ currentPlayerControls = imageControls;
currentPlayerType = "IMAGE";
currentContent = imageContent;
showMediaMenu();
break;
- default:
- console.log("Error: No menu by that name");
+ default:
+ console.log("Error: No menu by that name");
break;
-}
+ }
}
function showMainMenu()
{
- audioPlayer.pause();
- videoPlayer.pause();
- $("#playButton").attr("src","images/playButton.png");
+ currentPlayerControls.pause();
- //If the media list is showing, hide it. Remove the mediaListAudioList class if it exists so that it will resize properly
- if ($("#mediaList").is(":visible"))
- $("#mediaList").fadeOut(300, function(){$("#mediaList").removeClass("mediaListAudioList");});
+ $("#playButton").attr("src","images/playButton.png");
- $(".navButton").fadeOut(300);
- $(".sortButton").fadeOut(300);
- $("#mediaName").fadeOut(300);
+ //If the media list is showing, hide it. Remove the mediaListAudioList class if it exists so that it will resize properly
+ if ($("#mediaList").is(":visible"))
+ $("#mediaList").fadeOut(300, function(){$("#mediaList").removeClass("mediaListAudioList");});
- if (currentPlayerType !== "VIDEO")
- currentPlayer.fadeOut(300);
- else
- currentPlayer.hide();
+ $(".navButton").fadeOut(300);
+ $(".sortButton").fadeOut(300);
+ $("#mediaName").fadeOut(300);
+
+ if (currentPlayerType !== "VIDEO")
+ currentPlayer.fadeOut(300);
+ else
+ currentPlayer.hide();
- $(".mainButton").css({"opacity": "100"});
- $(".mainButton").fadeIn(800);
+ $(".mainButton").css({"opacity": "100"});
+ $(".mainButton").fadeIn(800);
}
function sortByAlpha(contentToSort)
{
- //If contentToSort is undefined it's because the request came from the sortBy buttons
- if (contentToSort === undefined)
- contentToSort = audioContent;
+ //If contentToSort is undefined it's because the request came from the sortBy buttons
+ if (contentToSort === undefined)
+ contentToSort = audioContent;
- contentToSort.sort(function (a,b) {
- var first = a.title.toLowerCase();
- var second = b.title.toLowerCase();
+ contentToSort.sort(function (a,b) {
+ var first = a.title.toLowerCase();
+ var second = b.title.toLowerCase();
- if (first < second)
- return -1;
- if (first > second)
- return 1;
+ if (first < second)
+ return -1;
+ if (first > second)
+ return 1;
- return 0;
- });
+ return 0;
+ });
- fillMediaList(contentToSort);
+ fillMediaList(contentToSort);
}
function sortByArtist(contentToSort)
{
- if (contentToSort === undefined)
- contentToSort = audioContent;
+ if (contentToSort === undefined)
+ contentToSort = audioContent;
- contentToSort.sort(function (a,b) {
- var first = a.artists[0].toLowerCase();
- var second = b.artists[0].toLowerCase();
+ contentToSort.sort(function (a,b) {
+ var first = a.artists[0].toLowerCase();
+ var second = b.artists[0].toLowerCase();
- if (first < second)
- return -1;
- if (first > second)
- return 1;
+ if (first < second)
+ return -1;
+ if (first > second)
+ return 1;
- return 0;
- });
+ return 0;
+ });
- fillMediaList(contentToSort);
+ fillMediaList(contentToSort);
}
function sortByAlbum(contentToSort)
{
- if (contentToSort === undefined)
- contentToSort = audioContent;
+ if (contentToSort === undefined)
+ contentToSort = audioContent;
- contentToSort.sort(function (a,b) {
- var first = a.album.toLowerCase();
- var second = b.album.toLowerCase();
+ contentToSort.sort(function (a,b) {
+ var first = a.album.toLowerCase();
+ var second = b.album.toLowerCase();
- if (first < second)
- return -1;
- if (first > second)
- return 1;
+ if (first < second)
+ return -1;
+ if (first > second)
+ return 1;
- return 0;
- });
+ return 0;
+ });
- fillMediaList(contentToSort);
+ fillMediaList(contentToSort);
}
/**************************************** NAVIGATION FUNCTIONS *******************************************/
function playButtonClick()
{
- if (currentPlayerControls.paused)
- {
- currentPlayerControls.play();
- $("#playButton").attr("src","images/pauseButton.png");
- }
- else
- {
- currentPlayerControls.pause();
- $("#playButton").attr("src","images/playButton.png");
- }
+ if (currentPlayerControls.paused)
+ {
+ currentPlayerControls.play();
+ $("#playButton").attr("src","images/pauseButton.png");
+ }
+ else
+ {
+ currentPlayerControls.pause();
+ $("#playButton").attr("src","images/playButton.png");
+ }
}
function backButtonClick()
{
- switch (currentPlayerType)
- {
+ switch (currentPlayerType)
+ {
case "AUDIO":
- if (audioContent)
- {
- if (listIndex > 0 )
- listIndex--;
- else
- listIndex = imageContent.length - 1;
+ if (audioContent)
+ {
+ if (listIndex > 0 )
+ listIndex--;
+ else
+ listIndex = imageContent.length - 1;
- audioPlayer.pause();
- $("#playButton").attr("src","images/playButton.png");
+ audioPlayer.pause();
+ $("#playButton").attr("src","images/playButton.png");
+
+ $("#audioSrc").attr("src", audioContent[listIndex].contentURI);
+ updateMediaName(audioContent[listIndex].artists[0], audioContent[listIndex].title, audioContent[listIndex].coverArt);
+ audioPlayer.load();
+ }
+ break;
- $("#audioSrc").attr("src", audioContent[listIndex].contentURI);
- updateMediaName(audioContent[listIndex].artists[0], audioContent[listIndex].title, audioContent[listIndex].coverArt);
- audioPlayer.load();
- }
- break;
case "VIDEO":
- if (videoContent)
- {
- if (videoIndex > 0 )
- videoIndex--;
- else
- videoIndex = imageContent.length - 1;
+ if (videoContent)
+ {
+ if (videoIndex > 0 )
+ videoIndex--;
+ else
+ videoIndex = imageContent.length - 1;
+
+ if ($("#mediaList").is(":visible"))
+ videoPlayer.pause();
+
+ $("#playButton").attr("src","images/playButton.png");
+ $("#videoSrc").attr("src", videoContent[videoIndex].contentURI);
+ videoPlayer.load();
+ }
+ break;
- if ($("#mediaList").is(":visible"))
- videoPlayer.pause();
- $("#playButton").attr("src","images/playButton.png");
- $("#videoSrc").attr("src", videoContent[videoIndex].contentURI);
- videoPlayer.load();
- }
- break;
case "IMAGE":
- if (imageContent)
- {
- if (imageIndex > 0 )
- imageIndex--;
- else
- imageIndex = imageContent.length - 1;
+ if (imageContent)
+ {
+ if (imageIndex > 0 )
+ imageIndex--;
+ else
+ imageIndex = imageContent.length - 1;
+
+ $("#imagePlayer").css("background", "url(" + imageContent[imageIndex].contentURI + ") no-repeat center");
+ $("#imagePlayer").css("background-size", "contain");
+ }
+ break;
- $("#imagePlayer").css("background", "url(" + imageContent[imageIndex].contentURI + ") no-repeat center");
- $("#imagePlayer").css("background-size", "contain");
- }
- break;
default:
- console.log("Content failure");
- break;
- }
+ console.log("Content failure");
+ break;
+ }
}
function nextButtonClick()
{
- switch (currentPlayerType)
- {
+ switch (currentPlayerType)
+ {
case "AUDIO":
- if (audioContent)
- {
- if (audioContent.length > (listIndex + 1))
- listIndex++;
- else
- listIndex = 0;
+ if (audioContent)
+ {
+ if (audioContent.length > (listIndex + 1))
+ listIndex++;
+ else
+ listIndex = 0;
- audioPlayer.pause();
- $("#playButton").attr("src","images/playButton.png");
+ audioPlayer.pause();
+ $("#playButton").attr("src","images/playButton.png");
+
+ $("#audioSrc").attr("src", audioContent[listIndex].contentURI);
+ updateMediaName(audioContent[listIndex].artists[0], audioContent[listIndex].title, audioContent[listIndex].coverArt);
+ audioPlayer.load();
+ }
+ break;
- $("#audioSrc").attr("src", audioContent[listIndex].contentURI);
- updateMediaName(audioContent[listIndex].artists[0], audioContent[listIndex].title, audioContent[listIndex].coverArt);
- audioPlayer.load();
- }
- break;
case "VIDEO":
- if (videoContent)
- {
- if (videoContent.length > (videoIndex + 1))
- videoIndex++;
- else
- videoIndex = 0;
+ if (videoContent)
+ {
+ if (videoContent.length > (videoIndex + 1))
+ videoIndex++;
+ else
+ videoIndex = 0;
- videoPlayer.pause();
- $("#playButton").attr("src","images/playButton.png");
+ videoPlayer.pause();
+ $("#playButton").attr("src","images/playButton.png");
+
+ $("#videoSrc").attr("src", videoContent[videoIndex].contentURI);
+ videoPlayer.load();
+ }
+ break;
- $("#videoSrc").attr("src", videoContent[videoIndex].contentURI);
- videoPlayer.load();
- }
- break;
case "IMAGE":
- if (imageContent)
- {
- if (imageContent.length > (imageIndex + 1))
- imageIndex++;
- else
- imageIndex = 0;
+ if (imageContent)
+ {
+ if (imageContent.length > (imageIndex + 1))
+ imageIndex++;
+ else
+ imageIndex = 0;
+
+ $("#imagePlayer").css("background", "url(" + imageContent[imageIndex].contentURI + ") no-repeat center");
+ $("#imagePlayer").css("background-size", "contain");
+ }
+ break;
- $("#imagePlayer").css("background", "url(" + imageContent[imageIndex].contentURI + ") no-repeat center");
- $("#imagePlayer").css("background-size", "contain");
- }
- break;
default:
- console.log("Content failure");
- break;
- }
+ console.log("Content failure");
+ break;
+ }
}
/**************************************** END NAVIGATION FUNCTIONS *******************************************/
function resizeMainMenu()
{
- $("#mediaList").fadeOut(0);
- screenWidth = window.innerWidth;
- screenHeight = window.innerHeight;
- screenOrientation = screenWidth < screenHeight ? "portrait" : "landscape";
- iconWidth = screenOrientation === "portrait" ? screenHeight / 4 : screenWidth / 4;
- var padding = 20;
-
- $(".mainButton").width(iconWidth + "px");
- $(".mainButton").height(iconWidth + "px");
-
- var iconsTop = screenOrientation === "portrait" ? ((screenHeight - (iconWidth * 3)) / 2) - (padding * 3) : (screenHeight - iconWidth) / 2;
-
- if (screenOrientation === "portrait")
- $("#mainMenuButtons").css({"top": iconsTop + "px", "left" : (screenWidth / 2) - (iconWidth /2) - padding + "px", "width" : "50%"});
- else
- $("#mainMenuButtons").css({"top": iconsTop + "px", "left" : ((iconWidth / 2) - (padding * 3)) + "px", "width" : "100%"});
+ $("#mediaList").fadeOut(0);
+ screenWidth = window.innerWidth;
+ screenHeight = window.innerHeight;
+ screenOrientation = screenWidth < screenHeight ? "portrait" : "landscape";
+ iconWidth = screenOrientation === "portrait" ? screenHeight / 4 : screenWidth / 4;
+ var padding = 20;
+
+ $(".mainButton").width(iconWidth + "px");
+ $(".mainButton").height(iconWidth + "px");
+
+ var iconsTop = screenOrientation === "portrait" ? ((screenHeight - (iconWidth * 3)) / 2) - (padding * 3) : (screenHeight - iconWidth) / 2;
+
+ if (screenOrientation === "portrait")
+ $("#mainMenuButtons").css({"top": iconsTop + "px", "left" : (screenWidth / 2) - (iconWidth /2) - padding + "px", "width" : "50%"});
+ else
+ {
+ $("#mainMenuButtons").css({"top": iconsTop + "px", "left" : ((iconWidth / 2) - (padding * 3)) + "px", "width" : "100%"});
+ $("#sortButtons").addClass("landscape");
+ }
}
function resizePlayerPage()
{
- audioPlayer = document.getElementById("audioPlayer");
- videoPlayer = document.getElementById("videoPlayer");
- screenWidth = window.innerWidth;
- screenHeight = window.innerHeight;
-
- var padding = 15;
- var buttonWidth = screenOrientation === "portrait" ? screenHeight * 0.05 : screenWidth * 0.05;
-
- $("#backButton").css({"width": buttonWidth + "px", "height": buttonWidth + "px", "top": padding + "px", "left": ((screenWidth / 2) - (buttonWidth *3)) + "px"});
- $("#nextButton").css({"width": buttonWidth + "px", "height": buttonWidth + "px", "top": padding + "px", "left": ((screenWidth / 2) + (buttonWidth *2)) + "px"});
- $("#returnButton").css({"width": buttonWidth + "px", "height": buttonWidth + "px", "top": padding + "px", "left": padding + "px"});
- $("#listButton").css({"width": buttonWidth + "px", "height": buttonWidth + "px", "top": padding + "px", "left": (screenWidth - buttonWidth - padding * 2) + "px"});
- $("#playButton").css({"width": buttonWidth * 1.3 + "px", "height": buttonWidth * 1.3 + "px", "top": padding * 0.3 + "px", "left": (screenWidth / 2) - (buttonWidth / 2) + "px"});
-
- mediaNameCanvas.width = (screenWidth);
- mediaNameCanvas.height = (screenHeight * 0.34) - (buttonWidth + (2 * padding));
- mediaNameCanvas.style.top = (buttonWidth + (2 * padding) ) + "px";
- mediaNameCanvas.style.left = "0px";
-
- var sortButtonTop = (buttonWidth + (2 * padding) ) + mediaNameCanvas.height - (buttonWidth * 1.3);
- var sortButtonWidth = buttonWidth * 2.5;
- var buttonSpacing = screenWidth / 5;
- $(".player").css({"height": (screenHeight - (buttonWidth * 2) - (padding * 2)) + "px", "top": buttonWidth + padding + "px"});
+ audioPlayer = document.getElementById("audioPlayer");
+ videoPlayer = document.getElementById("videoPlayer");
+ screenWidth = window.innerWidth;
+ screenHeight = window.innerHeight;
+
+ var padding = 15;
+ var buttonWidth = screenOrientation === "portrait" ? screenHeight * 0.05 : screenWidth * 0.05;
+
+ $("#backButton").css({"width": buttonWidth + "px", "height": buttonWidth + "px", "top": padding + "px", "left": ((screenWidth / 2) - (buttonWidth *3)) + "px"});
+ $("#nextButton").css({"width": buttonWidth + "px", "height": buttonWidth + "px", "top": padding + "px", "left": ((screenWidth / 2) + (buttonWidth *2)) + "px"});
+ $("#returnButton").css({"width": buttonWidth + "px", "height": buttonWidth + "px", "top": padding + "px", "left": padding + "px"});
+ $("#listButton").css({"width": buttonWidth + "px", "height": buttonWidth + "px", "top": padding + "px", "left": (screenWidth - buttonWidth - padding * 2) + "px"});
+ $("#playButton").css({"width": buttonWidth * 1.3 + "px", "height": buttonWidth * 1.3 + "px", "top": padding * 0.3 + "px", "left": (screenWidth / 2) - (buttonWidth / 2) + "px"});
+
+ mediaNameCanvas.width = (screenWidth);
+ mediaNameCanvas.height = (screenHeight * 0.34) - (buttonWidth + (2 * padding));
+ mediaNameCanvas.style.top = (buttonWidth + (2 * padding) ) + "px";
+ mediaNameCanvas.style.left = "0px";
+
+ var sortButtonTop = (buttonWidth + (2 * padding) ) + mediaNameCanvas.height - (buttonWidth * 1.3);
+ var sortButtonWidth = buttonWidth * 2.5;
+ var buttonSpacing = screenWidth / 5;
+ $(".player").css({"height": (screenHeight - (buttonWidth * 2) - (padding * 2)) + "px", "top": buttonWidth + padding + "px"});
+
+ mediaListItemW = $("#mediaList").width() * 0.92;
+ mediaListItemH = $("#mediaList").height() / 10;
}
function resizeAll()
{
- resizeMainMenu();
- resizePlayerPage();
+ resizeMainMenu();
+ resizePlayerPage();
}
/*
function swipe(direction, object)
{
- switch (object)
- {
+ switch (object)
+ {
case "mediaName":
- if (direction === "right")
- nextButtonClick();
- else if (direction === "left")
- backButtonClick();
- break;
+ if (direction === "right")
+ nextButtonClick();
+ else if (direction === "left")
+ backButtonClick();
+ break;
default:
- break;
- }
+ break;
+ }
}
function init()
{
- vidIcon.src = "images/videoButton.png";
- imgIcon.src = "images/imageButton.png";
-
- mediaNameCanvas = document.getElementById("mediaName");
- mediaNameCTX = mediaNameCanvas.getContext("2d");
-
- //Resize all items and search for local media
- resizeAll();
- getMedia(contentType);
-
- //Prevent highlighting
- window.ondragstart = function() { return false; }
-
- $(window).bind('resize', resizeAll);
-
- //Simple swipe detection
- $("#mediaName").mousedown(function(e){mouseDownEvent = e;});
- $("#mediaName").mouseup(function(e){
- if (Math.abs(mouseDownEvent.clientY - e.clientY) < 100)
- {
- if (Math.abs(mouseDownEvent.clientX - e.clientX) > 100)
- {
- if (mouseDownEvent.clientX > e.clientX)
- swipe("left", "mediaName");
- else
- swipe("right", "mediaName");
- }
- }
- });
+ vidIcon.src = "images/videoButton.png";
+ imgIcon.src = "images/imageButton.png";
+ imageControls = new ImageControls();
+
+ mediaNameCanvas = document.getElementById("mediaName");
+ mediaNameCTX = mediaNameCanvas.getContext("2d");
+
+ //Resize all items and search for local media
+ resizeAll();
+ getMedia(contentType);
+
+ //Prevent highlighting
+ window.ondragstart = function() { return false; }
+
+ $(window).bind('resize', resizeAll);
+
+ //Simple swipe detection
+ $("#mediaName").mousedown(function(e){mouseDownEvent = e;});
+ $("#mediaName").mouseup(function(e){
+ if (Math.abs(mouseDownEvent.clientY - e.clientY) < 100)
+ {
+ if (Math.abs(mouseDownEvent.clientX - e.clientX) > 100)
+ {
+ if (mouseDownEvent.clientX > e.clientX)
+ swipe("left", "mediaName");
+ else
+ swipe("right", "mediaName");
+ }
+ }
+ });
}
$(document).ready(function () {
init();
- });
+});
/*
* Copyright (c) 2013, Intel Corporation.
*
- * This program is licensed under the terms and conditions of the
+ * This program is licensed under the terms and conditions of the
* Apache License, version 2.0. The full text of the Apache License is at
* http://www.apache.org/licenses/LICENSE-2.0
*
TextObject = function(ctx, args)
{
- /* General */
- this.name = args.name;
- this.type = "text";
- this.text = args.text ? args.text : "";
- this.xLoc = args.xLoc;
- this.yLoc = args.yLoc;
- this.zLoc = args.zLoc == undefined ? 0 : args.zLoc;
- this.width = args.width;
- this.height = args.lineHeight;
- this.lineHeight = args.lineHeight;
- this.wordWrap = args.wordWrap;
- this.largeShadow = args.largeShadow;
- this.ctx = ctx;
- this.visible = args.visible == undefined ? true : args.visible;
- this.onClick = undefined;
-
- /* Text styles */
- this.font = args.font;
- this.fillStyle = args.fillStyle;
- this.lineWidth = args.lineWidth;
- this.strokeStyle = args.strokeStyle;
- this.textAlign = args.textAlign;
- this.textBaseline = args.textBaseline;
- this.shadowOffsetX = args.shadowOffsetX;
- this.shadowOffsetY = args.shadowOffsetY;
- this.shadowBlur = args.shadowBlur;
- this.shadowColor = args.shadowColor;
-
- if (args.template)
- this.applyTemplate(args.template);
-
- if (this.wordWrap)
- {
- var words = this.text.split(" ");
- var line = "";
- var tmpYloc = this.yLoc;
-
- for(var i = 0; i < words.length; i++)
- {
- var testLine = line + words[i] + " ";
- var metrics = this.ctx.measureText(testLine);
- var testWidth = metrics.width;
-
- if(testWidth > this.width)
- {
- line = words[i] + " ";
- tmpYloc += this.lineHeight;
- this.height += this.lineHeight;
- }
- else
- {
- line = testLine;
- }
- }
- }
+ /* General */
+ this.name = args.name;
+ this.type = "text";
+ this.text = args.text ? args.text : "";
+ this.xLoc = args.xLoc;
+ this.yLoc = args.yLoc;
+ this.zLoc = args.zLoc == undefined ? 0 : args.zLoc;
+ this.width = args.width;
+ this.height = args.lineHeight;
+ this.lineHeight = args.lineHeight;
+ this.wordWrap = args.wordWrap;
+ this.largeShadow = args.largeShadow;
+ this.ctx = ctx;
+ this.visible = args.visible == undefined ? true : args.visible;
+ this.onClick = undefined;
+
+ /* Text styles */
+ this.font = args.font;
+ this.fillStyle = args.fillStyle;
+ this.lineWidth = args.lineWidth;
+ this.strokeStyle = args.strokeStyle;
+ this.textAlign = args.textAlign;
+ this.textBaseline = args.textBaseline;
+ this.shadowOffsetX = args.shadowOffsetX;
+ this.shadowOffsetY = args.shadowOffsetY;
+ this.shadowBlur = args.shadowBlur;
+ this.shadowColor = args.shadowColor;
+
+ if (args.template)
+ this.applyTemplate(args.template);
+
+ if (this.wordWrap)
+ {
+ var words = this.text.split(" ");
+ var line = "";
+ var tmpYloc = this.yLoc;
+
+ for(var i = 0; i < words.length; i++)
+ {
+ var testLine = line + words[i] + " ";
+ var metrics = this.ctx.measureText(testLine);
+ var testWidth = metrics.width;
+
+ if(testWidth > this.width)
+ {
+ line = words[i] + " ";
+ tmpYloc += this.lineHeight;
+ this.height += this.lineHeight;
+ }
+ else
+ {
+ line = testLine;
+ }
+ }
+ }
}
TextObject.prototype.update = function(args)
{
- /* General */
- if (args.name) {this.name = args.name;}
- if (args.text) {this.text = args.text;}
- if (args.xLoc) {this.xLoc = args.xLoc;}
- if (args.yLoc) {this.yLoc = args.yLoc;}
- if (args.zLoc) {this.zLoc = args.zLoc;}
- if (args.width) {this.width = args.width;}
- if (args.lineHeight) {this.height = args.lineHeight;}
- if (args.lineHeight) {this.lineHeight = args.lineHeight;}
- if (args.wordWrap) {this.wordWrap = args.wordWrap;}
- if (args.largeShadow) {this.largeShadow = args.largeShadow;}
- if (args.ctx) {this.ctx = ctx;}
- if (args.visible) {this.visible = args.visible;}
- if (args.onClick) {this.onClick = args.onClick;}
-
- /* Text styles */
- if (args.font) {this.font = args.font;}
- if (args.fillStyle) {this.fillStyle = args.fillStyle;}
- if (args.lineWidth) {this.lineWidth = args.lineWidth;}
- if (args.strokeStyle) {this.strokeStyle = args.strokeStyle;}
- if (args.textAlign) {this.textAlign = args.textAlign;}
- if (args.textBaseline) {this.textBaseline = args.textBaseline;}
- if (args.shadowOffsetX) {this.shadowOffsetX = args.shadowOffsetX;}
- if (args.shadowOffsetY) {this.shadowOffsetY = args.shadowOffsetY;}
- if (args.shadowBlur) {this.shadowBlur = args.shadowBlur;}
- if (args.shadowColor) {this.shadowColor = args.shadowColor;}
-
- if (args.template)
- this.applyTemplate(args.template);
+ /* General */
+ if (args.name) {this.name = args.name;}
+ if (args.text) {this.text = args.text;}
+ if (args.xLoc) {this.xLoc = args.xLoc;}
+ if (args.yLoc) {this.yLoc = args.yLoc;}
+ if (args.zLoc) {this.zLoc = args.zLoc;}
+ if (args.width) {this.width = args.width;}
+ if (args.lineHeight) {this.height = args.lineHeight;}
+ if (args.lineHeight) {this.lineHeight = args.lineHeight;}
+ if (args.wordWrap) {this.wordWrap = args.wordWrap;}
+ if (args.largeShadow) {this.largeShadow = args.largeShadow;}
+ if (args.ctx) {this.ctx = ctx;}
+ if (args.visible) {this.visible = args.visible;}
+ if (args.onClick) {this.onClick = args.onClick;}
+
+ /* Text styles */
+ if (args.font) {this.font = args.font;}
+ if (args.fillStyle) {this.fillStyle = args.fillStyle;}
+ if (args.lineWidth) {this.lineWidth = args.lineWidth;}
+ if (args.strokeStyle) {this.strokeStyle = args.strokeStyle;}
+ if (args.textAlign) {this.textAlign = args.textAlign;}
+ if (args.textBaseline) {this.textBaseline = args.textBaseline;}
+ if (args.shadowOffsetX) {this.shadowOffsetX = args.shadowOffsetX;}
+ if (args.shadowOffsetY) {this.shadowOffsetY = args.shadowOffsetY;}
+ if (args.shadowBlur) {this.shadowBlur = args.shadowBlur;}
+ if (args.shadowColor) {this.shadowColor = args.shadowColor;}
+
+ if (args.template)
+ this.applyTemplate(args.template);
}
TextObject.prototype.drawObj = function()
{
- if (this.visible)
- {
- this.ctx.save();
+ if (this.visible)
+ {
+ this.ctx.save();
- this.ctx.font = this.font;
- this.ctx.fillStyle = this.fillStyle;
- this.ctx.lineWidth = this.lineWidth ;
- this.ctx.strokeStyle = this.strokeStyle;
- this.ctx.textAlign = this.textAlign;
- this.ctx.textBaseline = this.textBaseline;
- this.ctx.shadowOffsetX = this.shadowOffsetX;
- this.ctx.shadowOffsetY = this.shadowOffsetY;
- this.ctx.shadowBlur = this.shadowBlur;
- this.ctx.shadowColor = this.shadowColor;
+ this.ctx.font = this.font;
+ this.ctx.fillStyle = this.fillStyle;
+ this.ctx.lineWidth = this.lineWidth ;
+ this.ctx.strokeStyle = this.strokeStyle;
+ this.ctx.textAlign = this.textAlign;
+ this.ctx.textBaseline = this.textBaseline;
+ this.ctx.shadowOffsetX = this.shadowOffsetX;
+ this.ctx.shadowOffsetY = this.shadowOffsetY;
+ this.ctx.shadowBlur = this.shadowBlur;
+ this.ctx.shadowColor = this.shadowColor;
- if (this.wordWrap)
- this.wrapText();
- else
- {
-
- if (this.strokeStyle)
- this.ctx.strokeText(this.text, this.xLoc, this.yLoc);
-
- if (this.fillStyle)
- this.ctx.fillText(this.text, this.xLoc, this.yLoc);
-
- this.drawNoShadow();
- }
-
- this.ctx.restore();
- }
+ if (this.wordWrap)
+ this.wrapText();
+ else
+ {
+
+ if (this.strokeStyle)
+ this.ctx.strokeText(this.text, this.xLoc, this.yLoc);
+
+ if (this.fillStyle)
+ this.ctx.fillText(this.text, this.xLoc, this.yLoc);
+
+ this.drawNoShadow();
+ }
+
+ this.ctx.restore();
+ }
}
TextObject.prototype.applyTemplate = function(template)
{
- this.font = template.font;
- this.fillStyle = template.fillStyle;
- this.lineWidth = template.lineWidth;
- this.strokeStyle = template.strokeStyle;
- this.textAlign = template.textAlign;
- this.textBaseline = template.textBaseline;
- this.shadowOffsetX = template.shadowOffsetX;
- this.shadowOffsetY = template.shadowOffsetY;
- this.shadowBlur = template.shadowBlur;
- this.shadowColor = template.shadowColor;
-
- if (this.wordWrap)
- {
- var words = this.text.split(" ");
- var line = "";
- var tmpYloc = this.yLoc;
-
- for(var i = 0; i < words.length; i++)
- {
- var testLine = line + words[i] + " ";
- var metrics = this.ctx.measureText(testLine);
- var testWidth = metrics.width;
-
- if(testWidth > this.width)
- {
- line = words[i] + " ";
- tmpYloc += this.lineHeight;
- this.height += this.lineHeight;
- }
- else
- {
- line = testLine;
- }
- }
- }
+ this.font = template.font;
+ this.fillStyle = template.fillStyle;
+ this.lineWidth = template.lineWidth;
+ this.strokeStyle = template.strokeStyle;
+ this.textAlign = template.textAlign;
+ this.textBaseline = template.textBaseline;
+ this.shadowOffsetX = template.shadowOffsetX;
+ this.shadowOffsetY = template.shadowOffsetY;
+ this.shadowBlur = template.shadowBlur;
+ this.shadowColor = template.shadowColor;
+
+ if (this.wordWrap)
+ {
+ var words = this.text.split(" ");
+ var line = "";
+ var tmpYloc = this.yLoc;
+
+ for(var i = 0; i < words.length; i++)
+ {
+ var testLine = line + words[i] + " ";
+ var metrics = this.ctx.measureText(testLine);
+ var testWidth = metrics.width;
+
+ if(testWidth > this.width)
+ {
+ line = words[i] + " ";
+ tmpYloc += this.lineHeight;
+ this.height += this.lineHeight;
+ }
+ else
+ {
+ line = testLine;
+ }
+ }
+ }
}
-TextObject.prototype.drawLargeShadow = function()
+TextObject.prototype.drawLargeShadow = function()
{
- var origX = this.shadowOffsetX;
- var origY = this.shadowOffsetY;
-
- this.shadowOffsetX = this.largeShadow;
- this.shadowOffsetY = 0;
- this.drawObj();
- this.shadowOffsetY = this.largeShadow;
- this.drawObj();
- this.shadowOffsetX = 0;
- this.drawObj();
- this.shadowOffsetX = -this.largeShadow;
- this.drawObj();
- this.shadowOffsetY = 0;
- this.drawObj();
- this.shadowOffsetY = -this.largeShadow;
- this.drawObj();
- this.shadowOffsetX = -0;
- this.drawObj();
- this.shadowOffsetX = -this.largeShadow;
- this.drawObj();
-
- this.shadowOffsetX = origX;
- this.shadowOffsetY = origY;
+ var origX = this.shadowOffsetX;
+ var origY = this.shadowOffsetY;
+
+ this.shadowOffsetX = this.largeShadow;
+ this.shadowOffsetY = 0;
+ this.drawObj();
+ this.shadowOffsetY = this.largeShadow;
+ this.drawObj();
+ this.shadowOffsetX = 0;
+ this.drawObj();
+ this.shadowOffsetX = -this.largeShadow;
+ this.drawObj();
+ this.shadowOffsetY = 0;
+ this.drawObj();
+ this.shadowOffsetY = -this.largeShadow;
+ this.drawObj();
+ this.shadowOffsetX = -0;
+ this.drawObj();
+ this.shadowOffsetX = -this.largeShadow;
+ this.drawObj();
+
+ this.shadowOffsetX = origX;
+ this.shadowOffsetY = origY;
}
TextObject.prototype.drawNoShadow = function()
{
this.ctx.save();
-
- this.ctx.shadowOffsetX = 0;
- this.ctx.shadowOffsetY = 0;
- this.ctx.shadowBlur = 0;
-
- if (this.strokeStyle)
- this.ctx.strokeText(this.text, this.xLoc, this.yLoc);
-
- if (this.fillStyle)
- this.ctx.fillText(this.text, this.xLoc, this.yLoc);
-
- this.ctx.restore();
-
+
+ this.ctx.shadowOffsetX = 0;
+ this.ctx.shadowOffsetY = 0;
+ this.ctx.shadowBlur = 0;
+
+ if (this.strokeStyle)
+ this.ctx.strokeText(this.text, this.xLoc, this.yLoc);
+
+ if (this.fillStyle)
+ this.ctx.fillText(this.text, this.xLoc, this.yLoc);
+
+ this.ctx.restore();
+
}
TextObject.prototype.wrapText = function()
this.ctx.lineWidth = this.lineWidth ;
this.ctx.strokeStyle = this.strokeStyle;
this.ctx.textAlign = this.textAlign;
- this.ctx.textBaseline = this.textBaseline;
- this.ctx.shadowOffsetX = this.shadowOffsetX;
- this.ctx.shadowOffsetY = this.shadowOffsetY;
- this.ctx.shadowBlur = this.shadowBlur;
- this.ctx.shadowColor = this.shadowColor;
+ this.ctx.textBaseline = this.textBaseline;
+ this.ctx.shadowOffsetX = this.shadowOffsetX;
+ this.ctx.shadowOffsetY = this.shadowOffsetY;
+ this.ctx.shadowBlur = this.shadowBlur;
+ this.ctx.shadowColor = this.shadowColor;
this.height = this.lineHeight;
-
- var words = this.text.split(" ");
- var line = "";
- var tmpYloc = this.yLoc;
-
- for(var i = 0; i < words.length; i++)
- {
+
+ var words = this.text.split(" ");
+ var line = "";
+ var tmpYloc = this.yLoc;
+
+ for(var i = 0; i < words.length; i++)
+ {
var testLine = line + words[i] + " ";
var metrics = this.ctx.measureText(testLine);
var testWidth = metrics.width;
-
- if(testWidth > this.width)
- {
- if (this.strokeStyle)
- this.ctx.strokeText(line, this.xLoc, tmpYloc);
-
- if (this.fillStyle)
- this.ctx.fillText(line, this.xLoc, tmpYloc);
-
- line = words[i] + " ";
- tmpYloc += this.lineHeight;
- this.height += this.lineHeight;
- }
- else
+
+ if(testWidth > this.width)
+ {
+ if (this.strokeStyle)
+ this.ctx.strokeText(line, this.xLoc, tmpYloc);
+
+ if (this.fillStyle)
+ this.ctx.fillText(line, this.xLoc, tmpYloc);
+
+ line = words[i] + " ";
+ tmpYloc += this.lineHeight;
+ this.height += this.lineHeight;
+ }
+ else
{
- line = testLine;
- }
- }
-
-
- if (this.strokeStyle)
- this.ctx.strokeText(line, this.xLoc, tmpYloc);
-
- if (this.fillStyle)
- this.ctx.fillText(line, this.xLoc, tmpYloc);
-
- this.ctx.restore();
+ line = testLine;
+ }
+ }
+
+
+ if (this.strokeStyle)
+ this.ctx.strokeText(line, this.xLoc, tmpYloc);
+
+ if (this.fillStyle)
+ this.ctx.fillText(line, this.xLoc, tmpYloc);
+
+ this.ctx.restore();
}
function shadowFlicker(obj, min, max, interval)
{
- var tmpObj = obj;
-
- if (cancelShadowFlickerInterval)
- clearInterval(cancelShadowFlickerInterval);
-
- cancelShadowFlickerInterval = setInterval(
-
- function(){
-
- if (tmpObj.largeShadow)
- var shadowOffset = tmpObj.largeShadow;
- else
- var shadowOffset = tmpObj.shadowOffsetX;
-
- if (shadowOffset > max)
- shadowOffset -= Math.floor(Math.random()*interval) + 1;
- else if (shadowOffset <= min)
- shadowOffset += Math.floor(Math.random()*interval) + 1;
- else
- {
- if (Math.floor(Math.random()*1))
- shadowOffset += Math.floor(Math.random()*interval) + 1;
- else
- shadowOffset -= Math.floor(Math.random()*interval) + 1;
- }
-
- if (shadowOffset < 1)
- shadowOffset = 1;
-
- tmpObj.ctx.clearRect(0,0,500,500);
-
-
- if (!tmpObj.largeShadow)
- {
- tmpObj.shadowOffsetX = shadowOffset;
- tmpObj.shadowOffsetY = shadowOffset;
- tmpObj.drawObj();
- tmpObj.largeShadow = shadowOffset;
- tmpObj.drawLargeShadow();
- }
- else
- {
- tmpObj.largeShadow = shadowOffset;
- tmpObj.drawLargeShadow();
- }
-
- }, 100);
+ var tmpObj = obj;
+
+ if (cancelShadowFlickerInterval)
+ clearInterval(cancelShadowFlickerInterval);
+
+ cancelShadowFlickerInterval = setInterval(
+
+ function(){
+
+ if (tmpObj.largeShadow)
+ var shadowOffset = tmpObj.largeShadow;
+ else
+ var shadowOffset = tmpObj.shadowOffsetX;
+
+ if (shadowOffset > max)
+ shadowOffset -= Math.floor(Math.random()*interval) + 1;
+ else if (shadowOffset <= min)
+ shadowOffset += Math.floor(Math.random()*interval) + 1;
+ else
+ {
+ if (Math.floor(Math.random()*1))
+ shadowOffset += Math.floor(Math.random()*interval) + 1;
+ else
+ shadowOffset -= Math.floor(Math.random()*interval) + 1;
+ }
+
+ if (shadowOffset < 1)
+ shadowOffset = 1;
+
+ tmpObj.ctx.clearRect(0,0,500,500);
+
+
+ if (!tmpObj.largeShadow)
+ {
+ tmpObj.shadowOffsetX = shadowOffset;
+ tmpObj.shadowOffsetY = shadowOffset;
+ tmpObj.drawObj();
+ tmpObj.largeShadow = shadowOffset;
+ tmpObj.drawLargeShadow();
+ }
+ else
+ {
+ tmpObj.largeShadow = shadowOffset;
+ tmpObj.drawLargeShadow();
+ }
+
+ }, 100);
}
function shadowGlow(obj, min, max, speed)
{
- var tmpObj = obj;
-
- if (cancelShadowFlickerInterval)
- clearInterval(cancelShadowFlickerInterval);
- var direction = "OUT";
- cancelShadowFlickerInterval = setInterval(
-
- function(){
-
-
- if (tmpObj.largeShadow)
- var shadowOffset = tmpObj.largeShadow;
- else
- var shadowOffset = tmpObj.shadowOffsetX;
-
- if (shadowOffset > max)
- direction = "IN";
- else if (shadowOffset <= min)
- direction = "OUT";
-
- if (direction === "OUT")
- shadowOffset += 1;
- else
- shadowOffset -= 1;
-
- if (shadowOffset < 1)
- shadowOffset = 1;
-
- tmpObj.ctx.clearRect(0,0,500,500);
-
-
- if (!tmpObj.largeShadow)
- {
- tmpObj.shadowOffsetX = shadowOffset;
- tmpObj.shadowOffsetY = shadowOffset;
- tmpObj.drawObj();
- tmpObj.largeShadow = shadowOffset;
- tmpObj.drawLargeShadow();
- }
- else
- {
- tmpObj.largeShadow = shadowOffset;
- tmpObj.drawLargeShadow();
- }
-
- }, 100);
+ var tmpObj = obj;
+
+ if (cancelShadowFlickerInterval)
+ clearInterval(cancelShadowFlickerInterval);
+
+ var direction = "OUT";
+ cancelShadowFlickerInterval = setInterval(
+
+ function(){
+
+
+ if (tmpObj.largeShadow)
+ var shadowOffset = tmpObj.largeShadow;
+ else
+ var shadowOffset = tmpObj.shadowOffsetX;
+
+ if (shadowOffset > max)
+ direction = "IN";
+ else if (shadowOffset <= min)
+ direction = "OUT";
+
+ if (direction === "OUT")
+ shadowOffset += 1;
+ else
+ shadowOffset -= 1;
+
+ if (shadowOffset < 1)
+ shadowOffset = 1;
+
+ tmpObj.ctx.clearRect(0,0,500,500);
+
+
+ if (!tmpObj.largeShadow)
+ {
+ tmpObj.shadowOffsetX = shadowOffset;
+ tmpObj.shadowOffsetY = shadowOffset;
+ tmpObj.drawObj();
+ tmpObj.largeShadow = shadowOffset;
+ tmpObj.drawLargeShadow();
+ }
+ else
+ {
+ tmpObj.largeShadow = shadowOffset;
+ tmpObj.drawLargeShadow();
+ }
+
+ }, 100);
}
projects / profile / ivi / MediaPlayer.git / commitdiff