improved styling of the demo

kalwalt · kalwalt · commit 7034b681f84a · 2022-02-18T00:09:16.000+01:00
diff --git a/example/css/style.css b/example/css/style.css
@@ -0,0 +1,42 @@
+body {
+    background-color: #eee;
+    font-family: sans-serif;
+    height: 100%;
+    width: 100%;
+    color: #026168;
+}
+
+.container {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: 100%;
+    align-items: center;
+}
+
+.bt {
+    color: white;
+    border-radius: 6px;
+    width: 10em;
+    margin-top: 0.5em;
+    cursor: pointer;
+    padding: 0.25em;
+    font-size: 2em;
+    outline: inherit;
+    background-color: #026168;
+}
+
+.bt[disabled] {
+    opacity: 0.5;
+    cursor: default;
+}
+
+canvas {
+    display: block;
+    padding: 0;
+    margin-top: 3em;
+    margin-bottom: auto;
+    margin-left: auto;
+    margin-right: auto;
+    width: auto;
+}
diff --git a/example/demo.html b/example/demo.html
@@ -5,6 +5,7 @@
 <head>
     <meta charset="utf-8">
     <title>A simple example for displaying a Feature Set file</title>
+    <link rel="stylesheet" href="css/style.css">
 </head>
 
 <body>
@@ -13,17 +14,16 @@ <h1>FeatureSET-Display</h1>
         <p>Displaying .iset .fset .fset3 files</p>
         <p>Feature points: light green circles</p>
         <p>FeatureSet3 points: tiny red circles</p>
+        <input type="file" id="imageLoader" name="imageLoader" style="display: none;" multiple />
+        <button class="bt" id="uploadBt" onclick="document.getElementById('imageLoader').click();">Upload Image</button>
     </div>
-    <input class="input is-hidden" type="file" id="imageLoader" name="imageLoader" multiple />
-    <button class="button is-primary is-outlined is-fullwidth" id="uploadBt"
-        onclick="document.getElementById('imageLoader').click();">Upload Image</button>
+
     <script type="text/javascript" src="../dist/ARFset.js"></script>
 
     <script>
         var ar = new ARFset.ARFset();
         var imageLoader = document.getElementById('imageLoader');
         imageLoader.addEventListener('change', handleImage, false);
-        
 
         function handleImage(e) {
             nameWithExt = e.target.files[0].name;
@@ -48,7 +48,6 @@ <h1>FeatureSET-Display</h1>
             var ar = new ARFset.ARFset();
             ar.initialize()
                 .then((e) => {
-                    console.log(e);
                     ar.loadNFTMarkerBlob(url, (nft) => {
                     });
                     document.addEventListener('nftMarker', (ev) => {
@@ -58,18 +57,14 @@ <h1>FeatureSET-Display</h1>
         }
 
         function fileReader(ev) {
-            var dataURLs= [];
-            for (var i=0; i < 3; i++){
+            var dataURLs = [];
+            for (var i = 0; i < 3; i++) {
                 let reader = new FileReader();
-                
-                reader.onload = function (event) {          
+                reader.onload = function (event) {
                     var dataURL = event.target.result;
-                    console.log(dataURL);
                     dataURLs.push(dataURL);
                 };
                 reader.readAsDataURL(ev.target.files[i]);
-                console.log(dataURLs);
-                
             }
             loadFset(dataURLs)
         }
