+ Added track progress bar to the control screen. The javascript is untested in Pocket IE.

- Removed spurious styles.css file in the root directory.

config/config.inc.php

@@ -6,7 +6,7 @@
 
 	/* Config relating to the display of CD covers */
 	/* music_directory must match you MPD music_directory config */
-	$_CONFIG['music_directory'] = '/home/media/data/audio';
+	$_CONFIG['music_directory'] = '/home/danbee/Music';
 	$_CONFIG['album_cover_name'] = 'folder.jpg';
 	$_CONFIG['album_cover_size'] = 130;
 

lib/javascript.js

@@ -0,0 +1,31 @@
+
+	song_length = {$song_length};
+	song_position = {$song_position};
+	
+	mpd_state = '{$mpd_state}';
+		
+	{literal}
+	
+	function update_progress() {
+	
+		progressbar = document.getElementById('progressbar');
+		
+		new_margin = Math.round(200 - ((song_position / song_length) * 200));
+		
+		new_margin_string = new_margin + 'px';
+		
+		progressbar.style.marginRight = new_margin_string;
+		
+		//alert(progressbar.style.marginRight + ' - ' + new_margin_string);
+		
+		if (song_position < song_length) {
+			song_position = song_position + 1;
+		}
+		
+	}
+	
+	if (mpd_state == 'play') {
+		update_int = setInterval('update_progress()', 1000);
+	}
+	
+	{/literal}

lib/page.php

@@ -25,6 +25,9 @@
 			$smarty->assign('current_album', $current_track['Album']);
 			$smarty->assign('current_artist', $current_track['Artist']);
 			$smarty->assign('current_file', $current_track['file']);
+			$smarty->assign('song_length', $mympd->current_track_length);
+			$smarty->assign('song_position', $mympd->current_track_position);
+			$smarty->assign('mpd_state', $mympd->state);
 			
 			$cover_link = $_CONFIG['music_directory'] . '/'
 						. substr($current_track['file'], 0, strrpos($current_track['file'], '/') + 1) 
@@ -37,6 +40,10 @@
 			
 			$time_left = (($mympd->current_track_length - $mympd->current_track_position) + 2) * 1000;
 			
+			$initialprogress = round(200 - (($mympd->current_track_position / $mympd->current_track_length) * 200));
+			
+			$smarty->assign('initialprogress', $initialprogress);
+			
 			//echo $time_left / 1000;
 			
 			if ($mympd->state == MPD_STATE_PLAYING) {

styles.css

@@ -1,59 +0,0 @@
-{literal}
-* {
-	margin: 0px;
-	padding: 0px;
-}
-img {
-	border: 0;
-}
-a {
-	text-decoration: none;
-	color: #fff;
-}
-body {
-	background: #000;
-	color: #fff;
-	font: 10px verdana,sans-serif;
-}
-#menu {
-	background: #000;
-	/* position: fixed; */
-	width: 219px;
-	padding: 2px;
-	z-index: 1;
-}
-#menu a {
-	background: #444;
-	padding: 1px 0px 3px;
-	float: left;
-	margin-left: 2px;
-	display: block;
-	width: 32%;
-	text-align: center;
-	font-weight: bold;
-}
-#menu a:hover {
-	background: #666;
-}
-#menu a:active {
-	background: #ccc;
-	color: #000;
-}
-#page {
-	position: absolute;
-	top: 15px;
-	padding: 10px;
-	clear: left;
-}
-#page ul {
-	list-style-type: none;
-	width: 200px;
-}
-#page ul li {
-	padding: 0px 1px 1px;
-	border-bottom: 1px solid #666;
-}
-#page ul img {
-	margin: 2px 2px -1px 2px;
-}
-{/literal}

templates/default/control.html

@@ -1,5 +1,8 @@
 		<div id="song_display">{if $current_title}<span class="pos">{$current_track_no+1|string_format:"%02d"}.</span> <span class="title">{$current_title}</span><br /><span class="artist">{$current_artist}</span> {if $current_album}<!--<span class="album">({$current_album})</span>-->{/if}{elseif $current_file}{$current_file}{else}<br />[Nothing playing]{/if}</div>
 		
-		{if $coverimage}<div id="cover_image"><img id="cover" src="lib/image.php?file={$coverimage}&size={$coversize}"></div>{/if}
+		{if $coverimage}<div id="cover_image"><img id="cover" src="lib/image.php?file={$coverimage}&size={$coversize}" /></div>{/if}
+		
+		
+		<div id="progress"><div id="progressbar" style="margin-right: {$initialprogress}px;">&nbsp;</div></div>
 
 		<div id="controls"><a href="index.php?action=prev"><img src="images/prev_button.gif" Alt="Previous" /></a><a href="index.php?action=play"><img src="images/play_button.gif" Alt="Play" /></a><a href="index.php?action=pause"><img src="images/pause_button.gif" Alt="Pause" /></a><a href="index.php?action=stop"><img src="images/stop_button.gif" Alt="Stop" /></a><a href="index.php?action=next"><img src="images/next_button.gif" Alt="Next" /></a></div>

templates/default/index.html

@@ -3,19 +3,21 @@
 <html>
 
 	<head>
-		<title>Neo MPC {$version}</title>
+		<title>NeoMPC {$version}</title>
 		<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
 
 		<style>
 			{include file="default/styles.css"}
-		</style>
-		
+		</style>
+		
 	</head>
 
 	<body>
 
-		{$refresh}
-
+		<script type="text/javascript">
+			{include file="../lib/javascript.js"}
+		</script>
+		
 		{include file="default/menu.html"}
 
 		<div id="page">
@@ -24,6 +26,8 @@
 
 		</div>
 
+		{$refresh}
+
 	</body>
 
 </html>

templates/default/styles.css

@@ -134,6 +134,23 @@ img.button {
 }
 li.playing {
 	background: #444;
+}
+#progress {
+	border: 1px solid #666;
+	padding: 2px;
+	width: 200px;
+	height: 6px;
+	margin-top: 3px;
+	margin-left: auto;
+	margin-right: auto;
+	text-align: left;
+}
+#progressbar {
+	font-size: 1px;
+	background: #ddd;
+	height: 6px;
+	margin: 0px;
+	padding: 0px;
 }
 img#cover {
 	border: 1px solid #666;