I made this template for my tv-computer. It displays the movie info by category. The template is a hta file (not html) because i wanted to get rid of the explorer topbar and i plan to add support for launching a movie player from within the template.
If you want to test the template export full and save as a *.hta file.
The file wil not hava an icon but you can launch it by double-clicking on it.
I have IE6 installed I don't know if it will work with any other versions.
I mean hta (Hyper text application i think). Basically it is like a html file but without security restrictions. It lets you write to disk, open application and that sort of stuff. A hta file works like an ordinary application so you don't need to start it from ie. But i think the hta file uses ie's capabilities.
Hello!
I've made a new version with improved graphics for television use and also support for launching the movies right from the html application. The player support is very limited and not general. But I thought I might post it anyways (it should be pretty easy to modify). This version also loads the pictures on-the-fly (less memory).
Bascially it works like this:
You browse to a movie and Click the play button. A dialog will pop up:
Please insert (media type) with movie # (movie number) (media label)
You insert the right cd and press ok
The program will launch the first avi file on the disc.
For any of this to work you have to modify the "user variables" in the script: cdDriveLetter and playerPath.
Important: This is a hta template. Choose export, html but when you are prompted to enter a file name type: filename.hta! Otherwise it will not work at all.
<html>
<head>
<!-- Template by Willspo -->
<hta:application border="none" singleinstance="yes" windowstate="maximize" scroll="no" caption="no" innerborder="no">
</hta:application>
<style>
body {
background: black;
color: white;
font-family: Tahoma, Arial, Verdana;
}
h1 { /* Title */
font-size: 21px;
}
p {
font-size: 16px;
line-height: 125%;
}
td {
font-size: 16px;
}
#picture {
width: 333px;
height: 475px;
overflow: hidden;
border: 2px solid #666666;
}
.button { /* Next / Prev and category buttons */
height: 15px;
padding-left: 18px;
padding-right: 18px;
border: 2px solid #666666;
font-weight: bold;
cursor: hand;
}
#exit {
color: #FF6666;
}
#play {
color: #99FF00;
}
#counter { /* Movie number between next and prev */
width: 100px;
height: 15px;
font-weight: bold;
text-align: center;
}
#contentDiv { /* The area that contains the movies */
height: 479px;
overflow: hidden;
margin-top: 20px;
margin-bottom: 20px;
}
#playDialog {
position: absolute;
visibility: hidden;
background: black;
padding: 10px;
border: 2px solid #666666;
}
</style>
<script language="javaScript">
/* User variables */
var playerPath = "D:\\Progra~1\\BSPlayer\\bplay.exe";
var cdDriveLetter = "f";
/* System variables */
var movies = new Array();
var category = ""; // Current category
var movie = null; // Current movie
var categoryButton = null; // Active category button
var index = 0; // Current movie number in this category
var isReady = true; // Is ready for input from user
/*
* Gets called by body onload.
* Organizes all div elements with the attribute category in different arrays
* depending on category.
*/
function init() {
var elements = document.body.getElementsByTagName("div");
var catArray = null;
movies["All"] = new Array();
createCategory("All");
for (var i = 0; i < elements.length; i++) {
category = elements[i].category;
if (category != null && category != "") {
catArray = movies[category];
if (catArray == null) {
catArray = new Array();
movies[category] = catArray;
catArray[0] = elements[i];
createCategory(category);
} else {
catArray[catArray.length] = elements[i];
}
movies["All"][movies["All"].length] = elements[i];
}
}
category = "All";
showMovie(0);
}
/*
* Called by init()
* Writes the html code for a category button with given name
*/
function createCategory(name) {
html = "<span class='button' onclick='setCategory(\"" + name + "\")'>" + name + "</span>";
document.all.categoryDiv.innerHTML += html;
}
/*
* Called when the user presses a category button.
* Sets the category to the given value.
*/
function setCategory(name) {
if (!isReady) return;
category = name;
index = 0;
showMovie(index);
// Changes apperance of the pressed category button
if (categoryButton != null) {
categoryButton.style.borderColor = "#666666";
categoryButton.style.color = "white";
}
categoryButton = window.event.srcElement;
categoryButton.style.borderColor = "99FF00";
categoryButton.style.color = "99FF00";
}
/*
* Gets called when user presses next button
* Switches to the next movie in this category
*/
function next() {
if (!isReady) return;
index++;
if (index >= movies[category].length)
index = 0;
showMovie(index);
}
/*
* Gets called when user presses prev button
* Switches to the previous movie in this category
*/
function prev() {
if (!isReady) return;
index--;
if (index < 0)
index = movies[category].length - 1;
showMovie(index);
}
/*
* Called by functions next and prev.
* Shows the movie with specified number in this category.
* Also responsible for loading and displaying the picture for this movie
*/
function showMovie(i) {
if (movie != null) {
movie.style.display = "none";
}
movie = movies[category][i];
movie.style.display = "inline";
document.all.picture.src = movie.img;
document.all.counter.innerHTML = (i + 1) + "/" + movies[category].length;
}
/*
* Gets called when the user presses the exit button.
* Closes the program.
*/
function exit() {
window.close();
}
/*
* Gets called when the user presses the play button.
* Initializes the play dialog: "Insert CD_ROM with movie #... label"
*/
function play() {
if (movie != null) {
var playDialog = document.all.playDialog;
var type = (movie.media == "") ? "CD-ROM" : movie.media;
isReady = false;
html = "<table cellpadding='10' cellspacing='0' border='0'><tr><td align='center'>";
html += "Insert " + type + " with movie #" + movie.nr + " " + movie.media;
html += "</td></tr><tr><td align='center'>";
html += "<span id='ok' class='button' onclick='ok()'>Ok</span>";
html += "<span id='cancel' class='button' onclick='cancel()'>Cancel</span>";
html += "</td></tr></table>";
playDialog.innerHTML = html;
// Center th eplay dialog on screen
var posX = screen.availWidth / 2 - playDialog.offsetWidth / 2;
var posY = screen.availHeight / 2 - playDialog.offsetHeight / 2;
playDialog.style.posTop = posY;
playDialog.style.posLeft = posX;
playDialog.style.visibility = "visible";
}
}
/* Gets called when the user presses the ok button in the play dialog
* Searches the specified cd drive for the first avi file.
* Launches the specified player with the avi file as argument.
* Hopefully the player will start the movie.
*/
function ok() {
document.all.playDialog.style.visibility = "hidden";
var wScript = new ActiveXObject("Wscript.Shell");
var fso = new ActiveXObject("Scripting.FileSystemObject");
var folder = fso.GetFolder(cdDriveLetter + ":");
var fc = new Enumerator(folder.files);
var file = null;
for (; !fc.atEnd(); fc.moveNext()){
if ( fc.item().Name.indexOf(".avi") != -1 ) {
file = fc.item().ShortPath;
break;
}
}
if (file != null) {
wScript.run(playerPath + " " + file);
} else {
alert("Could not find any avi file on " + cdDriveLetter + "!");
}
isReady = true;
}
/* Gets called when the user presses the cancel button in the play dialog */
function cancel() {
document.all.playDialog.style.visibility = "hidden";
isReady = true;
}
</script>
</head>
<body onLoad="init()" topmargin="5" leftmargin="15">
<table width="100%" height="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td align="center">
<table width="780" height="600" cellspacing="0" cellpadding="0" border="0">
<tr>
<td valign="top" align="center">
<div id="categoryDiv">
</div>
<div id="contentDiv">
<table class="$$ITEM_CATEGORY" cellspacing="0" cellpadding="0" border="0" width="100%" >
<tr>
<td width="350" valign="top">
<img src="" id="picture">
</td>
<td valign="top">
$$ITEM_BEGIN
<div category="$$ITEM_CATEGORY" style="display: none" nr="$$ITEM_NUMBER" type="$$ITEM_TYPE" media="$$ITEM_MEDIA" img="$$ITEM_PICTUREFILENAME">
<h1>$$ITEM_FORMATTEDTITLE2 $$ITEM_APPRECIATION</h1>
<table cellspacing="0" cellpadding="0">
<tr>
<td><b>Category: </b>
</td>
<td>$$ITEM_CATEGORY
</td>
</tr>
<tr>
<td><b>Year:</b>
</td>
<td>$$ITEM_YEAR
</td>
</tr>
<tr>
<td><b>Director:</b>
</td>
<td>$$ITEM_DIRECTOR
</td>
</tr>
<tr>
<td><b>Length:</b>
</td>
<td>$$ITEM_LENGTH
</td>
</tr>
</table>
<br>
<p>
<b>Description:</b>
<br>
$$ITEM_DESCRIPTION
</p>
</div>
$$ITEM_END
</td>
</tr>
</table>
</div>
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td width="200">
</td>
<td align="center">
<span id="prev" class="button" onClick="prev()">
Prev
</span>
<span id="counter">
</span>
<span id="next" class="button" onClick="next()">
Next
</span>
</td>
<td width="200" align="right">
<span id="play" class="button" onClick="play()">
Play
</span>
<span id="exit" class="button" onClick="exit()">
Exit
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<div id="playDialog">
</div>
</body>
</html>
would be nice if it supported playing files on the HDD too thou, but would require using a field as the link to it. Then I could set it up to play something in my network shares, so without even thinking I could play a movie from any room in the house.
Also with categories, there's a mod to the main IMDB script on this board that downloads all the categories and separates then with a " / ", I tried playing round with this, but my java script isnt good enough to figure out how to parse strings (normally in java I use StringTokenizer, don't seem to be in javascript) then they could be in multiple categories too. (as at the moment it makes about 20-30 categories with lots of slashes in them and usually only a few per group.
If you don't mind I might take some of your code and add it to my template. Which should hopefully speed my one up.
I know it would be nice if you could start movies from the hdd as well. If they add a field for file path (import from file) it would be really good. But until then i think it's a little messy to use another field for file-path info and manually type it in for every movie.
Anyways about the Stringtokenizer. Ther is a string function called split which does the work. The code looks like this:
var stringArray = category.split("/");
for (var i = 0; i < stringArray.length; i++) {
//do something
}
Where category is the full category string.
With this maybe you can implement multiple-categories?
Here is a link to a good javascript reference: msdn.microsoft.com/library Web Development / Scripting / Documentation / Windows Script technólogies / JScript / Reference
Willspo wrote: If they add a field for file path (import from file) it would be really good. But until then i think it's a little messy to use another field for file-path info and manually type it in for every movie.
I may add an option to use the "URL" field for filename (when importing info from file)
In version 4 there will be customizable fields (I hope) so it will probably be possible to add this in a more elegant way.
Here's my modification to add multiple category ability. Doesn't quite work properly was wondering if you(anyone) could help me. Item pictures aren't displayed in 'ALL' although it has the correct movie count the information simply isn't displayed. Other categories work (cept the occasional problem of a category being split in two, I think one has a space at the end, is there a trim() function hmmm) they display the movie picture/info correctly but the category buttons dissapear. I'm really confused as I didn't change much and not sure what's going on.
Well I fixed it, but forgot to bring it with me =( (don't have internet on my home computer at the moment). I also added another button called bookmark, which lets you add movies to a group called bookmark (created when the first item is added) it's good for when you're looking for a movie, but are have a long list and can't remember that movie you were thinking about at the beginning, if a movie takes your fancy click bookmark, then you can see them all again by visiting the group. Group is destroyed on refresh/close of page.
<html>
<head>
<!-- Template by Willspo -->
<hta:application border="none" singleinstance="yes" windowstate="maximize" scroll="no" caption="no" innerborder="no">
</hta:application>
<style>
body {
background: black;
color: white;
font-family: Tahoma, Arial, Verdana;
}
h1 { /* Title */
font-size: 21px;
}
p {
font-size: 16px;
line-height: 125%;
}
td {
font-size: 16px;
}
#picture {
width: 333px;
height: 475px;
overflow: hidden;
border: 2px solid #666666;
}
.button { /* Next / Prev and category buttons */
height: 15px;
padding-left: 18px;
padding-right: 18px;
border: 2px solid #666666;
font-weight: bold;
cursor: hand;
}
#exit {
color: #FF6666;
}
#play {
color: #99FF00;
}
#counter { /* Movie number between next and prev */
width: 100px;
height: 15px;
font-weight: bold;
text-align: center;
}
#contentDiv { /* The area that contains the movies */
height: 479px;
overflow: hidden;
margin-top: 20px;
margin-bottom: 20px;
}
#playDialog {
position: absolute;
visibility: hidden;
background: black;
padding: 10px;
border: 2px solid #666666;
}
</style>
<script language="javaScript">
/* User variables */
var playerPath = "e:\\MultiMedia\\Video\\Zoom Player\\zplayer.exe";
var cdDriveLetter = "k";
/* System variables */
var movies = new Array();
var category = ""; // Current category
var movie = null; // Current movie
var categoryButton = null; // Active category button
var index = 0; // Current movie number in this category
var isReady = true; // Is ready for input from user
String.prototype.trim = function()
{
// Use a regular expression to replace leading and trailing
// spaces with the empty string
return this.replace(/(^\s*)|(\s*$)/g, "");
}
/*
* Gets called by body onload.
* Organizes all div elements with the attribute category in different arrays
* depending on category.
*/
function init() {
var elements = document.body.getElementsByTagName("div");
var catArray = null;
var cArray = null;
movies["All"] = new Array();
createCategory("All");
for (var i = 0; i < elements.length; i++) {
category = elements[i].category;
cArray = new String(elements[i].category).split(" / ");
for (var j = 0; j < cArray.length;j++){
category = cArray[j].trim();
if (category != null && category != "" && category != "undefined"){
catArray = movies[category];
if (catArray == null) {
catArray = new Array();
movies[category] = catArray;
catArray[0] = elements[i];
createCategory(category);
} else {
catArray[catArray.length] = elements[i];
}
}
}
if (cArray != null && cArray[0] != ""&& category != "undefined"){
movies["All"][movies["All"].length] = elements[i];
}
}
category = "All";
showMovie(0);
}
/*
* Called by init()
* Writes the html code for a category button with given name
*/
function createCategory(name) {
html = "<span class='button' onclick='setCategory(\"" + name + "\")'>" + name + "</span>";
document.all.categoryDiv.innerHTML += html;
}
/*
* Called when the user presses a category button.
* Sets the category to the given value.
*/
function setCategory(name) {
if (!isReady) return;
category = name;
index = 0;
showMovie(index);
// Changes apperance of the pressed category button
if (categoryButton != null) {
categoryButton.style.borderColor = "#666666";
categoryButton.style.color = "white";
}
categoryButton = window.event.srcElement;
categoryButton.style.borderColor = "99FF00";
categoryButton.style.color = "99FF00";
}
/*
* Gets called when user presses next button
* Switches to the next movie in this category
*/
function next() {
if (!isReady) return;
index++;
if (index >= movies[category].length)
index = 0;
showMovie(index);
}
/*
* Gets called when user presses prev button
* Switches to the previous movie in this category
*/
function prev() {
if (!isReady) return;
index--;
if (index < 0)
index = movies[category].length - 1;
showMovie(index);
}
/*
* Called by functions next and prev.
* Shows the movie with specified number in this category.
* Also responsible for loading and displaying the picture for this movie
*/
function showMovie(i) {
if (movie != null) {
movie.style.display = "none";
}
movie = movies[category][i];
movie.style.display = "inline";
document.all.picture.src = movie.img;
document.all.counter.innerHTML = (i + 1) + "/" + movies[category].length;
}
/*
* Gets called when the user presses the exit button.
* Closes the program.
*/
function exit() {
window.close();
}
/*
* Gets called when the user presses the play button.
* Initializes the play dialog: "Insert CD_ROM with movie #... label"
*/
function play() {
if (movie != null) {
var playDialog = document.all.playDialog;
var type = (movie.media == "") ? "CD-ROM" : movie.media;
isReady = false;
html = "<table cellpadding='10' cellspacing='0' border='0'><tr><td align='center'>";
html += "Insert " + type + " with movie #" + movie.nr + " " + movie.media;
html += "</td></tr><tr><td align='center'>";
html += "<span id='ok' class='button' onclick='ok()'>Ok</span>";
html += "<span id='cancel' class='button' onclick='cancel()'>Cancel</span>";
html += "</td></tr></table>";
playDialog.innerHTML = html;
// Center th eplay dialog on screen
var posX = screen.availWidth / 2 - playDialog.offsetWidth / 2;
var posY = screen.availHeight / 2 - playDialog.offsetHeight / 2;
playDialog.style.posTop = posY;
playDialog.style.posLeft = posX;
playDialog.style.visibility = "visible";
}
}
function bookmark() {
if (movie != null) {
var catArray = null;
catArray = movies["BookMarked"];
if(catArray == null){
catArray = new Array();
movies["BookMarked"] = catArray;
createCategory("BookMarked");
movies["BookMarked"][0] = movie;
}else{
movies["BookMarked"][movies["BookMarked"].length] = movie;
}
}
}
/* Gets called when the user presses the ok button in the play dialog
* Searches the specified cd drive for the first avi file.
* Launches the specified player with the avi file as argument.
* Hopefully the player will start the movie.
*/
function ok() {
document.all.playDialog.style.visibility = "hidden";
var wScript = new ActiveXObject("Wscript.Shell");
var fso = new ActiveXObject("Scripting.FileSystemObject");
var folder = fso.GetFolder(cdDriveLetter + ":");
var fc = new Enumerator(folder.files);
var file = null;
for (; !fc.atEnd(); fc.moveNext()){
if ( fc.item().Name.indexOf(".avi") != -1 ) {
file = fc.item().ShortPath;
break;
}
}
if (file != null) {
wScript.run(playerPath + " " + file);
} else {
alert("Could not find any avi file on " + cdDriveLetter + "!");
}
isReady = true;
}
/* Gets called when the user presses the cancel button in the play dialog */
function cancel() {
document.all.playDialog.style.visibility = "hidden";
isReady = true;
}
</script>
</head>
<body onLoad="init()" topmargin="5" leftmargin="15">
<table width="100%" height="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td align="center">
<table width="780" height="600" cellspacing="0" cellpadding="0" border="0">
<tr>
<td valign="top" align="center">
<div id="categoryDiv">
</div>
<div id="contentDiv">
<table class="$$ITEM_CATEGORY" cellspacing="0" cellpadding="0" border="0" width="100%" >
<tr>
<td width="350" valign="top">
<img src="" id="picture">
</td>
<td valign="top">
$$ITEM_BEGIN
<div category="$$ITEM_CATEGORY" style="display: none" nr="$$ITEM_NUMBER"
type="$$ITEM_TYPE" media="$$ITEM_MEDIA" img="$$ITEM_PICTUREFILENAME">
<h1>$$ITEM_FORMATTEDTITLE2 $$ITEM_APPRECIATION</h1>
<table cellspacing="0" cellpadding="0">
<tr>
<td><b>Category: </b>
</td>
<td>$$ITEM_CATEGORY
</td>
</tr>
<tr>
<td><b>Year:</b>
</td>
<td>$$ITEM_YEAR
</td>
</tr>
<tr>
<td><b>Director:</b>
</td>
<td>$$ITEM_DIRECTOR
</td>
</tr>
<tr>
<td><b>Length:</b>
</td>
<td>$$ITEM_LENGTH
</td>
</tr>
</table>
<br>
<p>
<b>Description:</b>
<br>
$$ITEM_DESCRIPTION
</p>
</div>
$$ITEM_END
</td>
</tr>
</table>
</div>
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td width="200">
</td>
<td align="center">
<span id="prev" class="button" onClick="prev()">
Prev
</span>
<span id="counter">
</span>
<span id="next" class="button" onClick="next()">
Next
</span>
</td>
<td width="300" align="right">
<span id="book" class="button" onClick="bookmark()">
BookMark
</span>
<span id="play" class="button" onClick="play()">
Play
</span>
<span id="exit" class="button" onClick="exit()">
Exit
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<div id="playDialog">
</div>
</body>
</html>
Hi all, please be patient as I am a total newb at all this. I love your script however I am having all small issue with it. I copied over the entire directory that it made and burnt it onto to CD so I could show a friend. Problem is once burnt onto CD it will not link the cd covers. I mean the copy does not link even when installed in the same directory as its original. I am sure it is something that needs to be renamed in the code. Can anybody help out here
Yes all worked fine ( Basically anyway ). I run Nortons anti virus and when i hit the Play button Norton thinks it is a maliscious script,but that is easily fixed. I then goes on to say their is an error in line 257. But i am not concerned with the play function ( would like to know how to remove it and replace it with a find button )
The script is perfect for what i want as it would become a web/networked based inventory for my 340+ movies.
As i have such a large collection I wouldnt want it to play movies from the HDD but would love it to tell me where they are filed. The only adjustment i made was putting a title in with Frontpage.
I am just confused as to how copying it corrupts it.
As i said i am a total noob when it comes to this
I would suggest u take the code to search from my new template, but I presume you don't know how?. Maybe I will look at it in a day or so, shouldn't be hard as mine is based on similar ideas to this one.
did you call the file html or hta?, aparently it makes a difference (should be called file.hta) do you direct link to the pictures or include them in the database? that may make a difference when exporting although I'm unsure. Guess looking at the html would show. if you can't figure it out email me the exported html/hta file (Twinkman666@hotmail.com) I'll have a quick look
okay thanks, i will have a little play again and see what i come up with. As for your question I used the export function from tha Ant catalogue and saved it in a sperate directory within the catalogue section. I did both html and hta. I then opened with frontpage and added a heading thats all. Anyway as i said i will have a look again and see if i cant find my anomaly, if not i may take you up on your email offer. Once again many thanks.
