Logo UI Redesign (#51)

* Visual Redesign * Commits from Base Repo * Completely Redesigned UI for Logo Web... * - Bug Fixes - Code Cleanup - Added new UI Support * Added SVG assets * Bug Fixes
CodingTrain · Nov 12, 2018 · 2953579 · 2953579
1 parent 9289167
commit 2953579
Show file tree

Hide file tree

Showing 9 changed files with 236 additions and 46 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+ScreenCapture.png
diff --git a/assets/img/color.svg b/assets/img/color.svg
diff --git a/assets/img/reset.svg b/assets/img/reset.svg
diff --git a/assets/img/turtle.svg b/assets/img/turtle.svg
diff --git a/assets/tests.json b/assets/tests.json
@@ -1,14 +1,14 @@
 [
   {
     "name": "Color Test Hex",
-    "code": "color #9659A7 repeat 36 [lt 10 pu fd 1 pd repeat 120 [fd 2 rt 3]]",
+    "code": "color #ffaba9 repeat 36 [lt 10 pu fd 1 pd repeat 120 [fd 2 rt 3]]",
     "author": "TODO",
     "width": 200,
     "height": 200
   },
   {
     "name": "Color Test RGB",
-    "code": "colorrgb [150 89 167] repeat 36 [lt 10 pu fd 1 pd repeat 120 [fd 2 rt 3]]",
+    "code": "colorrgb [255 171 169] repeat 36 [lt 10 pu fd 1 pd repeat 120 [fd 2 rt 3]]",
     "author": "TODO",
     "width": 200,
     "height": 200

diff --git a/command.js b/command.js
@@ -193,4 +193,3 @@ class CommandLookUp {
     return item;
   }
 }
-
diff --git a/index.html b/index.html
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <html>
-  <head>
+<head>
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -13,17 +13,43 @@
     <script src="expression.js"></script>
     <script src="parser.js"></script>
     <script src="command.js"></script>
-    <script src="commandList.js"></script>
     <script src="bounding_box.js"></script>
-    <script src="sketch.js"></script>
-  </head>
-
-  <body>
-    <select id="testdata" style="width: 150px;"></select>
-    <button id="button_autofit">Autofit</button>
-    <br />
-    <textarea id="code" cols="40" rows="5" autocomplete="false" spellcheck="false" autofocus></textarea>
-	<br />
-  </body>
-
+
+    <link rel="stylesheet" href="./style.css">
+    <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
+</head>
+
+<body>
+	<div id="banner">
+		<img src="./assets/img/turtle.svg" style="width: 40px; height: 40px;" alt="">
+		<span style="padding-top: 10px;">LOGO</span>
+        <select id="testdata" style="width: 150px;"></select>
+
+        <span class="ico_btn_dark" id="recentre" style="padding-top: 2px;" tooltip="Recentre">
+            <img src="./assets/img/reset.svg" style="width: 30px; height: 30px; padding: 2px;" alt="">
+        </span>
+
+        <span class="ico_btn_dark" id="bgcolor" style="padding-top: 2px;" tooltip="Random Background Color">
+            <img src="./assets/img/color.svg" style="width: 30px; height: 30px; padding: 2px;" alt="">
+        </span>
+	</div>
+
+	<!-- Canvas div -->
+	<div id="logo-canvas"></div>
+
+	<!-- Editor -->
+	<textarea id="code" cols="40" rows="4" autocomplete="false" spellcheck="false" autofocus></textarea>
+
+	<!-- Icon Copyright info -->
+	<small style="color: white; font-family: 'Montserrat'; padding-top: 10px;">
+		Icons made by <a href="https://www.flaticon.com/authors/freepik" title="Turtle">Turtle</a> from <a href="https://www.flaticon.com/"     title="Flaticon">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/"     title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a>
+	</small>
+
+	<script>
+		document.querySelector("#code").value = "pu lt 90 fd 100 lt 90 fd 250 rt 90 rt 90 pd fd 500 rt 90 fd 150 rt 90 fd 500 rt 90 fd 150";
+	</script>
+
+	<script src="sketch.js"></script>
+</body>
+
 </html>
diff --git a/sketch.js b/sketch.js
@@ -1,13 +1,18 @@
 // Coding Challenge 121: Logo
 // https://youtu.be/i-k04yzfMpw
 
+let canvas;
 let editor;
 let turtle;
+let recentreBtn;
+let bgcolorBtn;
+
 let xOffset = 0;
 let yOffset = 0;
 let startX = 100;
 let startY = 100;
 let allCases;
+let bgcolor = "#6040e6";
 
 // Used for scaling drawings to fit the canvas
 let canvasScrollX = 0;
@@ -22,30 +27,62 @@ function preload() {
 }
 
 function setup() {
-  createCanvas(200, 200);
+  canvas = createCanvas(windowWidth - 10, windowHeight - 220);
+  div = document.querySelector("#logo-canvas");
+
+	div.appendChild(canvas.elt);
+
   angleMode(DEGREES);
-  background(0);
+  background(bgcolor);
+
+  canvas.mousePressed(function () {
+    xOffset = mouseX-startX;
+    yOffset = mouseY-startY;
+  });
 
-  select("#button_autofit").mousePressed(() => {
-    scaleToFitBoundingBox(drawing_bounds);
-  })
+  canvas.mouseMoved(function () {
+    if (mouseIsPressed) {
+      startX = mouseX-xOffset;
+      startY = mouseY-yOffset;
+      goTurtle();
+    }
+  });
+
+  recentreBtn = document.querySelector("#recentre");
+  bgcolorBtn = document.querySelector("#bgcolor");
+
+  recentreBtn.onclick = function () {
+    startX = width/2;
+    startY = height/2;
+    goTurtle();
+  }
+
+  bgcolorBtn.onclick = function () {
+    let r = floor(random(0, 255));
+    let g = floor(random(0, 255));
+    let b = floor(random(0, 255));
+
+    let col = `#${r.toString(16)}${g.toString(16)}${b.toString(16)}`;
+    bgcolor = col;
+    goTurtle();
+
+    console.log(bgcolor);
+  }
 
   startX = width/2;
   startY = height/2;
   editor = select("#code");
   editor.input(goTurtle);
   goTurtle();
 }
-
+  
 function scaleToFitBoundingBox(boundingBox) {
   startX = 0;
   startY = 0;
   goTurtle();
 
   let scale = Math.min((width - drawingPadding) / (boundingBox.width), (height - drawingPadding) / (boundingBox.height));
   canvasScaleX = canvasScaleY = scale;
-  // canvasScrollX = (drawing_bounds.x * scale - width * .5);
-  // canvasScrollY = (drawing_bounds.y * scale - height * .5);
   canvasScrollX = (drawing_bounds.x * scale - width * .5);
   canvasScrollY = (drawing_bounds.y * scale - height * .5);
   goTurtle();
@@ -59,8 +96,8 @@ function afterCommandExecuted() {
 
 function goTurtle() {
   console.log({startX:startX,startY:startY});
-  turtle = new Turtle(startX, startY, 0);
-  background(0);
+  turtle = new Turtle(startX / canvasScaleX, startY / canvasScaleY, 0);
+  background(bgcolor);
 
   push();
   translate(-canvasScrollX, -canvasScrollY);
@@ -83,7 +120,7 @@ function createTestDataView(cases) {
   let selector = select("#testdata");
   allCases = cases;
 
-  selector.option("Select Test Data", -1);
+  selector.option("Logo Default", -1);
 
   for (i = 0; i < cases.length; i++) {
     selector.option(cases[i].name, i);
@@ -93,22 +130,24 @@ function createTestDataView(cases) {
   selector.changed(function() {
     let val = parseInt(selector.value());
     if (val < 0) {
-      resizeCanvas(200, 200);
       turtle.strokeColor = 255;
       turtle.dir = 0;
       turtle.x = width / 2;
       turtle.y = height / 2;
-      editor.value(""); // Empty this on "-1" select
-
+      xOffset = 0;
+      yOffset = 0;
+      startX = 100;
+      startY = 100;
+      canvasScrollX = 0;
+      canvasScrollY = 0;
+      canvasScaleX = 1;
+      canvasScaleY = 1;
+
+      goTurtle();
       return;
     }
 
     editor.value(allCases[val].code);
-    if(allCases[val].width && allCases[val].height) {
-      resizeCanvas(allCases[val].width, allCases[val].height);
-    } else {
-      resizeCanvas(200, 200);
-    }
 
     turtle.strokeColor = 255;
     turtle.dir = 0;
@@ -119,14 +158,3 @@ function createTestDataView(cases) {
     scaleToFitBoundingBox(drawing_bounds);
   });
 }
-
-function mousePressed() {
-  xOffset = mouseX-startX;
-  yOffset = mouseY-startX;
-}
-
-function mouseDragged() {
-  startX = mouseX-xOffset;
-  startY = mouseY-yOffset;
-  goTurtle();
-}
diff --git a/style.css b/style.css
@@ -0,0 +1,92 @@
+body {
+    padding: 0;
+    margin: 0 5px 5px 5px;
+    background: rgba(0, 0, 0, 0.7);
+    overflow: hidden;
+}
+
+#banner {    
+    background: #F5F5F5;
+    width: 100%;
+    height: 20px;
+    padding: 10px 0 35px 20px;
+    margin-left: -5px;
+    font-weight: 800;
+    display: grid;
+    grid-template-columns: 1.5fr 18fr 3.5fr 1fr 1.4fr;
+    font-size: 20px;
+    font-family: 'Montserrat', 'Open Sans';
+    /* position: absolute; */
+}
+
+span[tooltip]::before {
+    content: '';
+    opacity: 0;
+}
+
+span[tooltip]:hover::before {
+    content: attr(tooltip);
+    opacity: 1;
+    position: absolute;
+    top: 60px;
+    right: 2%;
+    background: rgba(0, 0, 0, .7);
+    color: #ffffff;
+    font-size: 15px;
+    padding: 5px 10px;
+    border-radius: 10px;
+
+    transition: opacity 1ms ease-in-out;
+}
+
+.ico_btn_dark img {
+    border-radius: 100px;
+    transition: all .2s ease-in;
+}
+
+.ico_btn_dark img:hover {
+    background: #00000013;
+}
+
+.ico_btn_dark img:active {
+    background: #00000038;
+}
+
+select {
+    border: 2px solid #ad9bf8;
+    border-radius: 10px;
+    outline: none;
+}
+
+a {
+    color: #ad9bf8;
+    text-decoration: none;
+}
+
+#code {
+    font-size: 20px;
+    width: 99%;
+    outline: none;
+    border: 3px solid rgba(83, 81, 81, 0.6);
+    border-radius: 10px;
+    padding: 5px 0 0 10px;
+    box-shadow: 0px 5px 8px 1px rgba(0, 0, 0, .3);
+    background: #1f2223;
+    color: #ffffff;
+
+    transition: all 250ms ease-in;
+}
+
+canvas {
+    border-radius: 10px;
+    box-shadow: 0px 5px 8px 1px rgba(0, 0, 0, .3);
+}
+
+#code:focus {
+    border: 3px solid rgba(11, 44, 230, 0.5);
+}
+
+#logo-canvas {
+    margin: 5px 5px 5px 0;
+    cursor: -webkit-grab;
+}
Original file line number	Diff line number	Diff line change
Expand Up		@@ -193,4 +193,3 @@ class CommandLookUp {
		return item;
		}
		}