From 295357981537c457a0bb82071d7c59e6dda2dfec Mon Sep 17 00:00:00 2001 From: "Melvin. L. Abraham" Date: Tue, 13 Nov 2018 00:31:18 +0530 Subject: [PATCH] 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 --- .gitignore | 1 + assets/img/color.svg | 1 + assets/img/reset.svg | 1 + assets/img/turtle.svg | 42 ++++++++++++++++++++ assets/tests.json | 4 +- command.js | 1 - index.html | 52 ++++++++++++++++++------ sketch.js | 88 +++++++++++++++++++++++++++-------------- style.css | 92 +++++++++++++++++++++++++++++++++++++++++++ 9 files changed, 236 insertions(+), 46 deletions(-) create mode 100644 .gitignore create mode 100644 assets/img/color.svg create mode 100644 assets/img/reset.svg create mode 100644 assets/img/turtle.svg create mode 100644 style.css diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..3da86d7 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +ScreenCapture.png diff --git a/assets/img/color.svg b/assets/img/color.svg new file mode 100644 index 0000000..3a1ff25 --- /dev/null +++ b/assets/img/color.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/img/reset.svg b/assets/img/reset.svg new file mode 100644 index 0000000..7caebed --- /dev/null +++ b/assets/img/reset.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/img/turtle.svg b/assets/img/turtle.svg new file mode 100644 index 0000000..0a22935 --- /dev/null +++ b/assets/img/turtle.svg @@ -0,0 +1,42 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/assets/tests.json b/assets/tests.json index b4c3e77..375524a 100644 --- 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 index f965134..e37871f 100644 --- a/command.js +++ b/command.js @@ -193,4 +193,3 @@ class CommandLookUp { return item; } } - diff --git a/index.html b/index.html index e4ebb8a..dc41def 100644 --- a/index.html +++ b/index.html @@ -1,6 +1,6 @@ - + @@ -13,17 +13,43 @@ - - - - - - - -
- -
- - + + + + + + + + + +
+ + + + + + + Icons made by Turtle from www.flaticon.com is licensed by CC 3.0 BY + + + + + + + diff --git a/sketch.js b/sketch.js index a1cd97f..1b758a5 100644 --- 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,13 +27,47 @@ 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; @@ -36,7 +75,7 @@ function setup() { editor.input(goTurtle); goTurtle(); } - + function scaleToFitBoundingBox(boundingBox) { startX = 0; startY = 0; @@ -44,8 +83,6 @@ function scaleToFitBoundingBox(boundingBox) { 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 new file mode 100644 index 0000000..027e3c3 --- /dev/null +++ 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; +}