Home Explore Help
Sign In
ptkato
/
ihistology
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

Improving the UX

Patrick Augusto 3 years ago
parent
31c93cd840
commit
646d8e3dfa
3 changed files with 63 additions and 21 deletions
Unified View Show Diff Stats
  1. 20 9
      Pixel.css
  2. 32 3
      Pixel.html
  3. 11 9
      Pixel.js

+ 20 - 9
Pixel.css
View File 

@@ -1,19 +1,30 @@
 
 html, body {
 
 html, body {
 
-    margin: 0;
 
+    overflow: hidden;
 
     width: 100vw;
 
     width: 100vw;
 
     height: 100vh;
 
     height: 100vh;
 
-    background-color: darkgreen;
 
+    font-family: 'Roboto Mono', monospace;
 
+}
 
+
 
+header {
 
+    font-size: 30px;
 
+    margin: 0 auto 10px auto;
 
+    width: 180px;
 
+}
 
+
 
+#canvas-box {
 
+    min-height: 500px;
 
 }
 
 }
 
 
 
 #canvas {
 
 #canvas {
 
     background-color: palevioletred;
 
     background-color: palevioletred;
 
 }
 
 }
 
 
 
-#level {
 
-    position: fixed;
 
-    left: 5px;
 
-    bottom: 5px;
 
-    font-size: 30;
 
-    color: black;
 
-    font-weight: 800;
 
+#meta > div {
 
+    margin-bottom: 10px;
 
+}
 
+
 
+#minimap {
 
+    border: 1px solid palevioletred;
 
+    width: 100px;
 
+    height: 100px;
 
 }
 
 }

+ 32 - 3
Pixel.html
View File 

@@ -2,12 +2,41 @@
 
 <html>
 
 <html>
 
     <head>
 
     <head>
 
         <meta charset="UTF-8">
 
         <meta charset="UTF-8">
 
+        <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet"> 
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flexboxgrid/6.3.1/flexboxgrid.min.css" type="text/css" >
 
         <link rel="stylesheet" href="Pixel.css">
 
         <link rel="stylesheet" href="Pixel.css">
 
         <script src="Pixel.js"></script>
 
         <script src="Pixel.js"></script>
 
     </head>
 
     </head>
 
-    <body>
 
-        <canvas id="canvas" tabindex="0"></canvas>
 
-        <span id="level">0</span>
 
+    <body class="container">
 
+        <div class="row">
 
+            <div class="col-xs-7">
 
+                <div class="box">
 
+                    <header>iHistology</header>
 
+                </div>
 
+            </div>
 
+        </div>
 
+        <div class="row">
 
+            <div class="col-xs-7">
 
+                <div id="canvas-box" class="box">
 
+                    <canvas id="canvas" tabindex="0"></canvas>
 
+                </div>
 
+            </div>
 
+            <div class="col-xs-5">
 
+                <div class="box">
 
+                    <div id="meta" class="row">
 
+                        <div class="col-xs-12">
 
+                            <div id="minimap" class="box"></div>
 
+                        </div>
 
+                        <div class="col-xs-12">
 
+                            <div class="box">You are at level <span id="level">0</span></div>
 
+                        </div>
 
+                        <div class="col-xs-12">
 
+                            <div class="box"><span>Use the mouse-wheel to change the zoom level, click and drag on the image to navigate through it.</span></div>
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+        </div>
 
         <script>main();</script>
 
         <script>main();</script>
 
     </body>
 
     </body>
 
 </html>
 
 </html>

+ 11 - 9
Pixel.js
View File 

@@ -75,13 +75,12 @@ const mouse = {
 
 const draw = function(ctx, csize, isize, url, level, images, coords) {
 
 const draw = function(ctx, csize, isize, url, level, images, coords) {
 
     ctx.clearRect(0, 0, csize.width, csize.height);
 
     ctx.clearRect(0, 0, csize.width, csize.height);
 
 
 
-    const seedImage = images[Math.floor((images.length - 1) / 2)] || {image: {src: "0".repeat((level + 1) * 2)}};
 
-    const seedCoord = images[Math.floor((images.length - 1) / 2)]
 
-        ? {x : seedImage.x + coords.x - coords.prevX, y: seedImage.y + coords.y - coords.prevY} : coords;
 
+    const seedCoord = images[0] ? {x : coords.x - coords.prevX, y: coords.y - coords.prevY} : coords;
 
+    const seedImage = images[0] ? images.find((i) => isInsideSquare({x: seedCoord.x + i.x, y: seedCoord.y + i.y}, canvas.vertices, isize)) || {pos: [1,1], x: 0, y: 0} : {pos: [1,1], x: 0, y: 0};
 
 
 
     return draw_(ctx, isize, url, level, images.map((i) => {
 
     return draw_(ctx, isize, url, level, images.map((i) => {
 
         return Object.assign(i, {drawn: false});
 
         return Object.assign(i, {drawn: false});
 
-    }), [1,1], seedCoord);
 
+    }), seedImage.pos, {x: seedCoord.x + seedImage.x, y: seedCoord.y + seedImage.y});
 
 }
 
 }
 
 
 
 const draw_ = function(ctx, isize, url, level, images, pos, coords) {
 
 const draw_ = function(ctx, isize, url, level, images, pos, coords) {
 
@@ -114,7 +113,8 @@ const draw_ = function(ctx, isize, url, level, images, pos, coords) {
 
                     image: target.image,
 
                     image: target.image,
 
                     x: coords.x,
 
                     x: coords.x,
 
                     y: coords.y,
 
                     y: coords.y,
 
-                    drawn: true
 
+                    drawn: true,
 
+                    pos: pos
 
                 });
 
                 });
 
                 images.splice(index);
 
                 images.splice(index);
 
             }
 
             }
 
@@ -127,10 +127,11 @@ const draw_ = function(ctx, isize, url, level, images, pos, coords) {
 
                 image: image,
 
                 image: image,
 
                 x: coords.x,
 
                 x: coords.x,
 
                 y: coords.y,
 
                 y: coords.y,
 
-                drawn: true
 
+                drawn: true,
 
+                pos: pos
 
             });
 
             });
 
         }
 
         }
 
-        console.log(pos);
 
+
 
         images = draw_(ctx, isize, url, level, images, [pos[0] - 1, pos[1]], { x: coords.x,               y: coords.y - isize.height });
 
         images = draw_(ctx, isize, url, level, images, [pos[0] - 1, pos[1]], { x: coords.x,               y: coords.y - isize.height });
 
         images = draw_(ctx, isize, url, level, images, [pos[0], pos[1] + 1], { x: coords.x + isize.width, y: coords.y                });
 
         images = draw_(ctx, isize, url, level, images, [pos[0], pos[1] + 1], { x: coords.x + isize.width, y: coords.y                });
 
         images = draw_(ctx, isize, url, level, images, [pos[0] + 1, pos[1]], { x: coords.x,               y: coords.y + isize.height });
 
         images = draw_(ctx, isize, url, level, images, [pos[0] + 1, pos[1]], { x: coords.x,               y: coords.y + isize.height });
 
@@ -153,9 +154,10 @@ const init = function(c) {
 
 }
 
 }
 
 
 
 const main = function() {
 
 const main = function() {
 
+    const cbox = document.getElementById("canvas-box");
 
     const c = document.getElementById("canvas");
 
     const c = document.getElementById("canvas");
 
-    c.setAttribute("width",  window.getComputedStyle(document.body).getPropertyValue("width"));
 
-    c.setAttribute("height", window.getComputedStyle(document.body).getPropertyValue("height"));
 
+    c.setAttribute("width",  window.getComputedStyle(cbox).getPropertyValue("width"));
 
+    c.setAttribute("height", window.getComputedStyle(cbox).getPropertyValue("height"));
 
 
 
     document.addEventListener("mousedown", (e) => {
 
     document.addEventListener("mousedown", (e) => {
 
         if (c === document.activeElement && e.button === 0) {
 
         if (c === document.activeElement && e.button === 0) {