changeset 216:d3eba28c26e5

Some launcher / UI improvements.
author Matti Hamalainen <ccr@tnsp.org>
date Tue, 04 Sep 2018 15:29:10 +0300
parents 280d95196265
children ebf6c189b433 ed594b3e3f45
files compiled/index.html files.pde index.html mpui.js multipaint.pde style.css
diffstat 6 files changed, 49 insertions(+), 13 deletions(-) [+]
line wrap: on
line diff
--- a/compiled/index.html	Mon Sep 03 14:33:14 2018 +0300
+++ b/compiled/index.html	Tue Sep 04 15:29:10 2018 +0300
@@ -11,7 +11,7 @@
 <body>
 <canvas id="mpCanvas"></canvas>
 <div id="mpUI"></div>
-<div id="mpNote"></div>
+<div id="mpUI2"></div>
 <script>
 
 function mpRunSketch(canvas)
--- a/files.pde	Mon Sep 03 14:33:14 2018 +0300
+++ b/files.pde	Tue Sep 04 15:29:10 2018 +0300
@@ -18,12 +18,10 @@
 
 function mpLoadFileSelector(fmtname, fmtexts, fcallback)
 {
-    var mpUI = stGE("mpUI");
+    var mpUI = mpDisplayGUI();
     if (mpUI)
     {
         stClearChildren(mpUI);
-        mpUI.style.background = "red";
-        mpUI.style.padding = "0.5em";
 
         mobj = stCE("input", "mpFileSelector");
         mobj.type = "file";
@@ -47,12 +45,21 @@
 
                     freader.readAsArrayBuffer(files[0]);
                 }
-                stClearChildren(mpUI);
-                mpUI.style.background = null;
+
+                mpHideGUI();
             });
 
         mpUI.appendChild(mobj);
 
+        mobj = stCE("button", "mpFileSelectorCancel");
+        mobj.textContent = "Cancel";
+        stAddEventOb(mobj.name, mobj, "click",
+            function(evt)
+            {
+                mpHideGUI();
+            });
+        mpUI.appendChild(mobj);
+
         mobj = stCE("span", "mpFileInfo");
         mobj.innerHTML = "Load / import an '<b>"+ fmtname +"</b>' file.";
         mpUI.appendChild(mobj);
@@ -121,7 +128,7 @@
     }
 
     var alink = stCE("a");
-    var mpUI = stGE("mpUI");
+    var mpUI = stGE("mpUI2");
     stClearChildren(mpUI);
     mpUI.appendChild(alink);
 
--- a/index.html	Mon Sep 03 14:33:14 2018 +0300
+++ b/index.html	Tue Sep 04 15:29:10 2018 +0300
@@ -10,7 +10,7 @@
 <body>
 <canvas id="mpCanvas"></canvas>
 <div id="mpUI"></div>
-<div id="mpNote"></div>
+<div id="mpUI2"></div>
 <script>
 
 function mpRunSketch(canvas)
--- a/mpui.js	Mon Sep 03 14:33:14 2018 +0300
+++ b/mpui.js	Tue Sep 04 15:29:10 2018 +0300
@@ -252,7 +252,9 @@
     "<li>The preview window seems to be buggy for wide-pixel (e.g. c64 multicolor) bitmaps.</li>"+
     "<li>There may be other bugs .. though I've also fixed few bugs that exist in original Multipaint.</li>"+
     "</ul>"+
-    "<p>You can also view the <a href=\"https://tnsp.org/hg/forks/multipaint-js/\">Mercurial repository for this project</a>.</p>";
+    "<p>You can also view the <a href=\"https://tnsp.org/hg/forks/multipaint-js/\">Mercurial repository for this project</a>.</p>"+
+    "<div id=\"mpNote\"><a href=\"http://multipaint.kameli.net/\">Multipaint</a> (C) 2016-2018 <b>Tero 'Dr. TerrorZ' Heikkinen</b>, "+
+    "ProcessingJS port and modifications by <b>Matti 'ccr' Hämäläinen</b> (2018)</div>";
 
   mpUI.appendChild(mobj);
 }
@@ -296,10 +298,6 @@
 
 function mpStart()
 {
-  stGE("mpNote").innerHTML =
-    "<a href=\"http://multipaint.kameli.net/\">Multipaint</a> (C) 2016-2018 <b>Tero 'Dr. TerrorZ' Heikkinen</b>, "+
-    "ProcessingJS port and modifications by <b>Matti 'ccr' Hämäläinen</b> (2018)";
-
   // Check for URL parameters
   var slink = window.location.href;
   var spos, found = false;
--- a/multipaint.pde	Mon Sep 03 14:33:14 2018 +0300
+++ b/multipaint.pde	Tue Sep 04 15:29:10 2018 +0300
@@ -114,6 +114,8 @@
     g_forced_palette = mpUIPalette ? mpUIPalette : "";
     g_animspeed = 1;
 
+    mpHideGUI();
+
     //normi
     g_magpix[0] = 3;
     g_magpix[1] = 8;
@@ -282,6 +284,33 @@
 
 }
 
+
+function mpDisplayGUI()
+{
+    var velem = stGE("mpUI");
+    if (velem)
+    {
+        stClearChildren(velem);
+        velem.style.display = "block";
+        velem.style.background = "red";
+        velem.focus();
+    }
+    return velem;
+}
+
+
+function mpHideGUI()
+{
+    var velem = stGE("mpUI");
+    if (velem)
+    {
+        velem.style.display = "none";
+        stClearChildren(velem);
+    }
+    return velem;
+}
+
+
 void mpSetTitle(String str)
 {
     console.log("TITLE: '" + str + "'");
--- a/style.css	Mon Sep 03 14:33:14 2018 +0300
+++ b/style.css	Tue Sep 04 15:29:10 2018 +0300
@@ -10,6 +10,8 @@
 	color: #666;
 }
 
+#mpCanvas {
+}
 
 #mpUI {
 	padding-left: 0.5em;