Skip to content
Browse files

HTML Setup: front page speedup, channel icon downloading.

Reorder the front page loading a little bit to give a perceived speed
increase.

Add a 'search' button to the channel editor to query the services.mythtv.org
channel icon database.  Found icons are listed in a grid and an icon may
be downloaded and installed by clicking on the preview.  The preview image
on the main channel detail editor screen still has an aspect ratio issue,
but it is displayed.  This is a manual downloader, we hope to automatically
select the icon for the user, but this manual override may still exist after
that.
  • Loading branch information...
1 parent 2ce9fa7 commit 2843519c9854169cb78c827f62bb9520c4ea719f @cpinkham cpinkham committed Apr 25, 2011
View
24 mythtv/html/css/setup.css
@@ -110,11 +110,35 @@
#fileBrowser
{
+ position: absolute;
+ top: 10px;
+ left: 10px;
width: 310px;
height: 400px;
border:2px #555555;
color:#FFF;
background-color:#2D2D2D;
overflow: scroll;
+ float: left;
+ }
+
+ #iconBrowser
+ {
+ overflow: auto;
+ }
+
+ td.iconGridCell
+ {
+ height: 200px;
+ width: 200px;
+ text-align: center;
+ vertical-align: middle;
+ }
+
+ img.iconGridIcon
+ {
+ background: url(/images/checkerboard_100x100.png);
+ background-repeat: repeat;
+ border: 0;
}
View
BIN mythtv/html/images/blank.gif
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN mythtv/html/images/checkerboard_100x100.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
11 mythtv/html/index.html
@@ -23,12 +23,12 @@
<script language="JavaScript" type="text/javascript">
$(document).ready(function() {
- loadDiv("menu-bg", "/menu.qsp");
- loadContent("/misc/overview.qsp");
- showHostName();
- $('.menu').initMenu();
$('#header_status').hide();
$('#header_error').hide();
+ loadDiv("menu-bg", "/menu.qsp");
+ $('.menu').initMenu();
+ showHostName();
+ loadContent("/misc/overview.qsp");
});
</script>
@@ -65,6 +65,9 @@
<div id='edit' title='Setup Wizard'>
</div>
+<div id='iconBrowser' title='Channel Icon Browser'>
+</div>
+
<div id='helpWindow' title='Help'>
</div>
View
3 mythtv/html/setup/channeleditor-channeldetail.html
@@ -16,10 +16,11 @@
<td>XMLTV ID:</td><td style="text-align:right;"><input id='channelDetailSettingXMLTVID' /></td>
</tr>
<tr>
- <td>Icon File:</td><td style="text-align:right;"><input id='channelDetailSettingIconURL' />&nbsp;<input type=button onClick='javascript:browseForNewChanIcon()' value='Browse'></td>
+ <td>Icon File:</td><td style="text-align:right;"><input id='channelDetailSettingIconURL' />&nbsp;<input type=button onClick='javascript:searchChannelIcon()' value='Search'>&nbsp;<input type=button onClick='javascript:browseForNewChanIcon()' value='Browse'></td>
</tr>
<tr>
<td width="100%"><input id='channelDetailSettingVisible' type='checkbox'/> Make this channel visible</td>
+ <td rowspan=2><img id='channelDetailSettingIconPreview' src='/images/blank.gif' width=100 height=100 onLoad='resizeChannelIcon("channelDetailSettingIconPreview", 100, 100)' /></td>
</tr>
<tr>
<td width="100%"><input id='channelDetailSettingUseEIT' type='checkbox'/> Use Over-the-air guide data for this channel</td>
View
142 mythtv/html/setup/js/channeleditor.js
@@ -137,6 +137,16 @@ function editSelectedChannel() {
$("#channelDetailSettingCallSign").val(rowdata.CallSign);
$("#channelDetailSettingXMLTVID").val(rowdata.XMLTVID);
$("#channelDetailSettingIconURL").val(rowdata.IconURL);
+ var preview = $("#channelDetailSettingIconPreview");
+ if ((rowdata.IconURL.length > 0) &&
+ (rowdata.IconURL.substring(0,1) != "/")) {
+ preview.attr('src',
+ '/Content/GetFile?StorageGroup=ChannelIcons&FileName=' +
+ rowdata.IconURL);
+ }
+ else
+ preview.attr('src', '/images/blank.gif');
+
if (rowdata.Visible == "Yes") {
$("#channelDetailSettingVisible").attr('checked', true);
}
@@ -443,10 +453,140 @@ function initVideoMultiplexSelect(sourceid) {
return result;
}
+function choseNewChanIcon(url) {
+ $("#channelDetailSettingIconURL").val(url);
+ $("#channelDetailSettingIconPreview").attr('src',
+ '/Content/GetFile?StorageGroup=ChannelIcons&FileName=' +
+ basename(url));
+}
+
function browseForNewChanIcon() {
- openStorageGroupBrowser("Channel Icon", "channelDetailSettingIconURL",
+ openStorageGroupBrowser("Channel Icon", choseNewChanIcon,
"ChannelIcons");
}
+function downloadChannelIcon(url) {
+ $.post("/Content/DownloadFile",
+ { URL: url, StorageGroup: "ChannelIcons" },
+ function(data) {
+ $("#channelDetailSettingIconPreview").attr('src',
+ '/Content/GetFile?StorageGroup=ChannelIcons&FileName=' +
+ basename(url));
+ setStatusMessage("Channel Icon download succeeded!");
+ }, "json").error(function() {
+ setErrorMessage("Channel Icon download failed!");
+ });
+}
+
+function selectChannelIcon(url) {
+ $("#channelDetailSettingIconPreview").attr('src', '/images/blank.gif');
+ downloadChannelIcon(url);
+ $("#channelDetailSettingIconURL").val(basename(url));
+ $("#iconBrowser").dialog("close");
+}
+
+var iconCount = 0;
+var iconRow = "";
+function channelIconLink(url) {
+ return "<td class='iconGridCell'><a href='#' " +
+ "onClick='javascript:selectChannelIcon(\"" + url + "\")'><img src='" +
+ url + "' id='channelIcon_" + iconCount + "' class='iconGridIcon'" +
+ " onLoad='resizeChannelIcon(\"channelIcon_" + iconCount + "\")'></a>" +
+ "<br><div id='channelIcon_" + iconCount + "_size'></div></td>";
+}
+
+function addChannelIconToGrid(url) {
+ var result = "";
+ if (url.substring(0,5).toLowerCase() == "error")
+ return;
+
+ iconRow = "row_" + parseInt(iconCount / 3);
+
+ if (iconCount == 0) {
+ $("#iconBrowser").html(
+ "<table id='iconGallery' border=0 cellpadding=0 cellspacing=1>" +
+ "<tr><td class='xinvisible'>" +
+ "<img src='/images/blank.gif' width=200 height=0></td>" +
+ "<td class='xinvisible'>" +
+ "<img src='/images/blank.gif' width=200 height=0></td>" +
+ "<td class='xinvisible'>" +
+ "<img src='/images/blank.gif' width=200 height=0></td></tr>" +
+ "<tr id='" + iconRow + "'>" + channelIconLink(url) +
+ "</tr></table>");
+ } else if (((iconCount % 3) == 0)) {
+ $("#iconGallery").append("<tr id='" + iconRow + "'>" +
+ channelIconLink(url) + "</tr>");
+ } else {
+ $("#" + iconRow).append(channelIconLink(url));
+ }
+
+ iconCount++;
+}
+
+function resizeChannelIcon(id, maxWidth, maxHeight) {
+ var ratio = 0;
+ var icon = $("#" + id);
+ var width = icon.width();
+ var height = icon.height();
+
+ if (maxWidth == undefined)
+ maxWidth = 200;
+ if (maxHeight == undefined)
+ maxHeight = 200;
+
+ $("#" + id + "_size").html("Size: " + width + "x" + height);
+
+ if (width > maxWidth) {
+ ratio = maxWidth / width;
+ icon.attr("width", maxWidth);
+ icon.attr("height", height * ratio);
+ height = height * ratio;
+ width = width * ratio;
+ }
+
+ if (height > maxHeight) {
+ ratio = maxHeight / height;
+ icon.attr("height", maxHeight);
+ icon.attr("width", width * ratio);
+ width = width * ratio;
+ }
+}
+
+function searchChannelIcon() {
+ var iconsSeen = [];
+ iconCount = 0;
+
+ var iconBrowser = $("#iconBrowser");
+ iconBrowser.dialog({
+ modal: true,
+ width: 680,
+ height: 340,
+ 'title': 'Channel Icon Download',
+ closeOnEscape: false,
+ autoOpen: false,
+ buttons: {
+ 'Cancel': function() { $(this).dialog('close'); }
+ }});
+
+ iconBrowser.html("");
+ $.getJSON("http://services.mythtv.org/channel-icon/lookup?jsoncallback=?",
+ { callsign: $("#channelDetailSettingCallSign").val() },
+ function(data) {
+ $.each(data.urls, function(i, url) {
+ addChannelIconToGrid(url);
+ });
+ });
+
+ $.getJSON("http://services.mythtv.org/channel-icon/lookup?jsoncallback=?",
+ { xmltvid: $("#channelDetailSettingXMLTVID").val() },
+ function(data) {
+ $.each(data.urls, function(i, url) {
+ addChannelIconToGrid(url);
+ });
+ });
+
+ iconBrowser.dialog("open");
+}
+
initSourceList();
initChannelEditor();
View
17 mythtv/html/setup/js/setup.js
@@ -263,10 +263,17 @@ function fileBrowserEntryInfoCallback(file) {
/* do nothing here for now */
}
-function openFileBrowserWindow(title, dirs, callback, onlyDirs, storageGroup) {
+function openFileBrowserWindow(title, dirs, saveCallback, onlyDirs, storageGroup) {
+ var fileBrowserWidth = 330;
+ var rootPath = "/";
+ if (storageGroup != undefined && storageGroup != "") {
+ rootPath = "myth://" + storageGroup + "@" + getHostName() + ":"
+ + location.port + "/";
+ }
+
$("#fileBrowserWindow").dialog({
modal: true,
- width: 340,
+ width: fileBrowserWidth,
height: 515,
'title': title,
closeOnEscape: false,
@@ -282,11 +289,7 @@ function openFileBrowserWindow(title, dirs, callback, onlyDirs, storageGroup) {
$.getScript("/js/jqueryFileTree/jqueryFileTree.js");
}
$.ajaxSetup({ async: true });
- fileBrowserCallback = callback;
- rootPath = "/";
- if (storageGroup != undefined && storageGroup != "")
- rootPath = "myth://" + storageGroup + "@" + getHostName() + ":"
- + location.port + "/";
+ fileBrowserCallback = saveCallback;
$('#fileBrowser').fileTree(
{ root: rootPath,

0 comments on commit 2843519

Please sign in to comment.
Something went wrong with that request. Please try again.