Tweak styles

habbes · May 7, 2018 · 8d2ec1c · 8d2ec1c
1 parent 401bcd3
commit 8d2ec1c
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 29 deletions.
diff --git a/app/app.css b/app/app.css
@@ -17,10 +17,10 @@ body {
     justify-content: space-between;
     align-items: center;
     height: 50px;
-    background-color: #201F88;
+    background-color: #0B4E4D;
     padding-right: 20px;
     padding-left: 20px;
-    color: #BBD5ED;
+    color: #73B970;
 }
 
 #status {
@@ -39,7 +39,7 @@ body {
 
 #editorHeader {
     height: 50px;
-    background-color: #0077CC;
+    background-color: #116174;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -48,6 +48,15 @@ body {
 #runButton {
     padding: 10px 15px;
     background-color: #00DFBC;
+    border: none;
+}
+
+#runButton:hover {
+    border: 2px solid #40956C;
+}
+
+#runButton:active {
+    background-color: #40956C;
 }
 
 #ioContainer {
@@ -59,18 +68,20 @@ body {
     display: flex;
     align-items: center;
     justify-content: center;
+    background-color: #131313;
 }
 
-#imageViewer canvas {
+#imageViewer .canvas {
     max-width: 100%;
     max-height: 100%;
     box-sizing: border-box;
-    background-color: #CCFFCB;
+    background-color: #131313;
 }
 
 #imageSource {
     padding: 20px;
     height: 120px;
+    background-color: #f7f7f7;
 }
 
 #imageSource img {

diff --git a/app/app.js b/app/app.js
@@ -3,6 +3,28 @@
  */
 
 
+const INITIAL_CODE = `
+// Xaval is a playground for experimenting with computer vision using OpenCv
+
+// To get started, import an image from the bottom-left
+// Use \`imsource.read()\` to load the imported image into an OpenCV array
+const img = imsource.read();
+// Do some image processing and manipulation using OpenCV
+cv.cvtColor(img, img, cv.COLOR_RGBA2GRAY, 0);
+// to display an image, use \`imviewer.show()\`
+imviewer.show(img);
+
+// don't forget to clean up the memory
+img.delete();
+
+// When you're ready, click the "Run" button
+
+// To learn more about OpenCV for JS,
+// check out the tutorials at
+// https://docs.opencv.org/3.4.1/d5/d10/tutorial_js_root.html
+`;
+
+
 function init () {
     const editor = new Editor(document.querySelector('#editorContainer'));
     const imageViewer = new ImageViewer(document.querySelector('#imageViewer'));
@@ -35,6 +57,8 @@ class App {
             const res = this.runCode(source);
             console.log('Code result', res);
         });
+
+        this.editor.editor.focus();
     }
 
     /**
@@ -62,10 +86,14 @@ class Editor {
      */
     constructor (el) {
         this.container = el;
-        // this.editor = el.querySelector('#editor');
-        this.editor = ace.edit("editor");
+
+        this.editorEl = el.querySelector('#editor');
+        this.editor = ace.edit(this.editorEl);
+        this.editor.setValue(INITIAL_CODE);
         this.editor.setTheme("ace/theme/monokai");
         this.editor.session.setMode("ace/mode/javascript");
+        this.editor.setShowPrintMargin(false);
+        this.editor.clearSelection();
         this.runBtn = el.querySelector('button');
         this.run = this.run.bind(this);
         this.runBtn.addEventListener('click', this.run);
@@ -99,7 +127,7 @@ class ImageViewer {
      */
     constructor (el) {
         this.el = el;
-        this.canvas = el.querySelector('canvas');
+        this.canvas = el.querySelector('.canvas');
         this.canvas.id = `canvas${ImageViewer.nextId()}`;
     }
 

diff --git a/app/index.html b/app/index.html
@@ -18,30 +18,11 @@
             <div id="editorHeader">
                 <button id="runButton"><i class="fas fa-play"></i> Run</button>
             </div>
-            <div id="editor">
-// Xaval is a playground for experimenting with computer vision using OpenCv
-
-// To get started, import an image from the bottom-left
-// Use `imsource.read()` to load the imported image into an OpenCV array
-const img = imsource.read();
-// Do some image processing and manipulation using OpenCV
-cv.cvtColor(img, img, cv.COLOR_RGBA2GRAY, 0);
-// the following will display the image on the image viewer on the left
-imviewer.show(img);
-
-// don't forget to clean up the memory
-img.delete();
-
-// When you're ready, click the "Run" button
-
-// To learn more about OpenCV for JS,
-// check out the tutorials at
-// https://docs.opencv.org/3.4.1/d5/d10/tutorial_js_root.html
-            </div>
+            <div id="editor"></div>
         </div>
         <div id="ioContainer">
             <div id="imageViewer" class="io">
-                <canvas></canvas>
+                <canvas class="canvas"></canvas>
             </div>
             <div id="imageSource" class="io">
                 <img alt="No Image selected" />