2 files changed, 140 insertions, 27 deletions

diff --git a/html/favicon.ico b/html/favicon.ico
new file mode 100644
index 0000000..e8cbddb
--- /dev/null
+++ b/html/favicon.ico
diff --git a/html/index.html b/html/index.html
index b6daf8c..e3235f9 100644
--- a/html/index.html
+++ b/html/index.html
@@ -4,36 +4,144 @@
 		<title>MIDIPLAY</title>
 
 <style>
+:root{
+  background-color:#000000;
+  color:#FFFFFF;
+  font-family: "sans-serif";
+}
+
+body {
+  /*
+  background-color:#808080;
+  */
+}
+
+#headline{
+  color:#808080;
+  text-align: center;
+  font-size: 12pt;
+}
+
+#statusdiv{
+  color:#808080;
+  text-align: center;
+}
+
 .button{
-	width: 200px;
-	height: 150px;
-	font-size: 20px;
+  width: 200px;
+  height: 150px;
+
+  background-color: #04AA04;
+  border: none;
+  color: white;
+  padding: 20px 50px;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  margin: 4px 2px;
+  border-radius: 8px;
+}
+
+#buttoncontainer{
+  text-align: center;
+  width: 100%;
 }
 
 .selected{
   color: #FF8080;
   cursor: pointer;
+  font-size: 300%;
 }
 
 .normal{
-  color: #000000;
+  color: #FFFFFF;
   cursor: pointer;
+  font-size: 300%;
 }
 
 #songlist{
-  height:400px;
-  overflow:auto;
+  height: 1000px;
+  overflow: auto;
 }
 
 </style>
 <script type="text/javascript">
-  var symbol_play = "&#x23F5;";
-  var symbol_stop = "&#x23F9;";
-
   var play_state = "stopped";
 
   var songs = ["a", "b", "c"];
 
+  function draw_play()
+  {
+    var canvas = document.getElementById("playcanvas");
+
+    var height = canvas.height;
+    var width = canvas.width;
+
+    var c = canvas.getContext("2d");
+
+    c.clearRect(0, 0, width, height);
+    c.fillStyle = "#FFFFFF";
+    c.beginPath();
+    c.moveTo(30,30);
+    c.lineTo(70,50);
+    c.lineTo(30,70);
+    c.lineTo(30,30);
+    c.fill();
+  }
+
+  function draw_stop()
+  {
+    var canvas = document.getElementById("stopcanvas");
+
+    var height = canvas.height;
+    var width = canvas.width;
+
+    var c = canvas.getContext("2d");
+
+    c.clearRect(0, 0, width, height);
+    c.fillStyle = "#FFFFFF";
+    c.beginPath();
+    c.moveTo(30,30);
+    c.lineTo(70,30);
+    c.lineTo(70,70);
+    c.lineTo(30,70);
+    c.lineTo(30,30);
+    c.fill();
+  }
+
+  function draw_symbols()
+  {
+    draw_play();
+    draw_stop();
+  }
+
+  function show_play()
+  {
+    document.getElementById("playcanvas").style.display = 'block';
+    document.getElementById("stopcanvas").style.display = 'none';
+  }
+
+  function show_stop()
+  {
+    document.getElementById("stopcanvas").style.display = 'block';
+    document.getElementById("playcanvas").style.display = 'none';
+  }
+
+  function show_status(text) {
+    document.getElementById("status").innerHTML = text;
+  }
+
+  function remove_extension(filename)
+  {
+    if (filename.endsWith(".midi")) {
+      return filename.substring(0, filename.length - 5);
+    }
+    if (filename.endsWith(".mid")) {
+      return filename.substring(0, filename.length - 4);
+    }
+    return filename;
+  }
+
   function get_filelist(){
     var xhr = new XMLHttpRequest();
 
@@ -42,7 +150,7 @@
         return;
       }
       if (this.status != 200) {
-        document.getElementById("status").innerHTML = "HTTP error";
+        show_status("HTTP error");
       } else {
         var xml = xhr.responseXML;
         var selected_file = xml.getElementsByTagName("selected")[0].childNodes[0].nodeValue;
@@ -52,11 +160,13 @@
         var value = "";
         for (var i = 0; i < n; ++i) {
           var filename = list[i].childNodes[0].nodeValue;
-          value += "<span class=\"" + (filename == selected_file ? "selected" : "normal") + "\" onclick=\"songlist_clicked(" + i + ")\">" + filename + "</span><br/>";
 	  songs[i] = filename;
+	  var display_filename = remove_extension(filename);
+          value += "<span class=\"" + (filename == selected_file ? "selected" : "normal") + "\" onclick=\"songlist_clicked(" + i + ")\">" + display_filename + "</span><br/>";
         }
 
         document.getElementById("songlist").innerHTML = value;
+        show_status("OK");
       }
     }
 
@@ -70,10 +180,10 @@
     var action = "start";
     var element = document.getElementById("playbutton");
     if (play_state == "stopped") {
-      element.innerHTML = symbol_stop;
+      show_stop();
       play_state = "playing";
     } else {
-      element.innerHTML = symbol_play;
+      show_play();
       play_state = "stopped";
       action = "stop";
     }
@@ -85,12 +195,12 @@
         return;
       }
       if (this.status != 200) {
-        document.getElementById("status").innerHTML = "HTTP error";
+        show_status("HTTP error");
       } else {
         var xml = xhr.responseXML;
         var message = xml.getElementsByTagName("message")[0].childNodes[0].nodeValue;
 
-        document.getElementById("status").innerHTML = message;
+        show_status(message);
       }
     }
 
@@ -108,12 +218,12 @@
         return;
       }
       if (this.status != 200) {
-        document.getElementById("status").innerHTML = "HTTP error";
+        show_status("HTTP error");
       } else {
         var xml = xhr.responseXML;
         var message = xml.getElementsByTagName("message")[0].childNodes[0].nodeValue;
 
-        document.getElementById("status").innerHTML = message;
+        show_status(message);
 
         get_filelist(); // trigger reload
       }
@@ -125,29 +235,32 @@
   }
 
   function startup() {
+    draw_symbols();
     document.getElementById("playbutton").onclick = playbutton_clicked;
-    document.getElementById("playbutton").innerHTML = symbol_play;
+    show_play();
 
     get_filelist();
   }
 
 </script>
-	</head>
-	<body onload="startup();">
-MIDIPLAY
+</head>
+<body onload="startup();">
+  <div id="headline">MIDIPLAY</div>
 
 <br/>
-<br/>
 <div id="songlist">
 (Loading Songlist...)
 </div>
 <br/>
+<div id="buttoncontainer">
+<button id="playbutton" class="button">
+<canvas id="playcanvas" width="100" height="100"></canvas>
+<canvas id="stopcanvas" width="100" height="100"></canvas>
+</button>
+</div>
 <br/>
-<button id="playbutton" class="button"></button>
-
-<br/>
-<div>
-  Status: <span id="status">ok</span>
+<div id="statusdiv">
+  Status: <span id="status">(unknown)</span>
 </div>
 
 	</body>