add tools palet WIP #5

Jheronymus · Feb 16, 2016 · b039645 · b039645
1 parent b63fd42
commit b039645
Show file tree

Hide file tree

Showing 2 changed files with 136 additions and 5 deletions.
diff --git a/modules/videopaint.js b/modules/videopaint.js
@@ -1,6 +1,14 @@
 displaySystem.registerModule({
     name: 'videopaint',
     template: multiline(function() {/*
+        <ul id="videopainttools" class="hidden">
+            <li><a href="#">Tools</a>
+            <ul class="videotoolspalet">
+                <li><a href="#" id="videotools_clear">clear</a></li>
+                <li><a href="#" id="videotools_yellow">yellow</a></li>
+                <li><a href="#" id="videotools_red">red</a></li>
+            </ul></li>
+        </ul>
         <canvas id="videopaint" width="1500" height="800"></canvas>
     */}),
     style: multiline(function() {/*
@@ -16,6 +24,13 @@ displaySystem.registerModule({
         #videopaint.hidden {
             opacity: 0;
         }
+        #videopainttools {
+            position: absolute;
+            bottom: 0.5em;
+            right: 0.5em;
+            color: white;
+            font-size: 24px;
+        }
     */}),
     factory: function(config, onMessage, sendMessage) {
         var el;
@@ -28,17 +43,22 @@ displaySystem.registerModule({
         function getElement() {
             return document.getElementById('videopaint');
         }
+        function getTools(){
+            return document.getElementById('videopainttools');
+        }
         function setLocal() {
             local = true;
         }
         function show() {
             visible = true;
             getElement().classList.remove('hidden');
+            getTools().classList.remove('hidden');
             addEvents();
         }
         function hide() {
             visible = false;
             getElement().classList.add('hidden');
+            getTools().classList.add('hidden');
             removeEvents();
         }
         function addEvents(){
@@ -55,10 +75,37 @@ displaySystem.registerModule({
             } else if (type === "drag") {
                 ctx.lineTo(x, y);
                 return ctx.stroke();
+            } else if (type === "dragend"){
+                return ctx.closePath();
+            } else if (type === "clearcanvas"){
+                ctx.clearRect(0,0, 1500, 800); // todo canvas size issues
+            } else if (type === "setbrushyellow") {
+                ctx.fillStyle = "solid";
+                ctx.strokeStyle = "#ECD018";
+                ctx.lineWidth = 5;
+                ctx.lineCap = "round"; 
+            } else if (type === "setbrushred") {
+                ctx.fillStyle = "solid";
+                ctx.strokeStyle = "#DC143C";
+                ctx.lineWidth = 5;
+                ctx.lineCap = "round"; 
             } else {
                 return ctx.closePath();
             }
         }
+        function clearCanvas(){
+            console.log("clear Canvas");
+            if (local){
+                draw(0,0, "clearcanvas");
+            } else {
+                data = {
+                    'x': 0,
+                    'y': 0,
+                    'type': 'clearcanvas'
+                };
+                system.ws.sendMessage({name:'videopaint'}, 'draw', data)
+            } 
+        }
         function dragEvent(e){
             var offset, type, x, y;
             type = e.handleObj.type;
@@ -79,14 +126,42 @@ displaySystem.registerModule({
                 system.ws.sendMessage({name:'videopaint'}, 'draw', data)
             }
         }
+        function setBrushYellow(){
+            console.log("set Brush to Yellow");
+            if (local){
+                draw(0,0, "setbrushyellow");
+            } else {
+                data = {
+                    'x': 0,
+                    'y': 0,
+                    'type': 'setbrushyellow'
+                };
+                system.ws.sendMessage({name:'videopaint'}, 'draw', data)
+            } 
+        }
+        function setBrushRed(){
+            console.log("set Brush to Red");
+            if (local){
+                draw(0,0, "setbrushred");
+            } else {
+                data = {
+                    'x': 0,
+                    'y': 0,
+                    'type': 'setbrushred'
+                };
+                system.ws.sendMessage({name:'videopaint'}, 'draw', data)
+            } 
+        }
         function init(){
             console.log("init");
             ctx = getElement().getContext("2d");
             console.log(ctx);
-            ctx.fillStyle = "solid";
-            ctx.strokeStyle = "#ECD018";
-            ctx.lineWidth = 5;
-            ctx.lineCap = "round";
+            draw(0,0, "setbrushyellow");
+
+            $('#videotools_clear').click(clearCanvas);
+            $('#videotools_yellow').click(setBrushYellow);
+            $('#videotools_red').click(setBrushRed);
+
         }
 
         onMessage('draw', function(msg) {

diff --git a/themes/rednblue.css b/themes/rednblue.css
@@ -251,4 +251,60 @@ body {
 }
 
 #twitter .message {
-}
+}
+
+/* videopaint */
+#videopainttools {
+    right: 0;
+    background-color: darkblue;
+    color: white;
+    transition: transform 0.3s;
+    height: 5vh;
+    line-height: 5vh;
+    padding-right: 3vh;
+    text-align: right;
+}
+
+#videopainttools::before {
+    content: '';
+    width: 2.5vh;
+    display: block;
+    height: 5vh;
+    position: absolute;
+    left: -2.5vh;
+    top: 0;
+    border: 2px solid black;
+    box-sizing: border-box;
+    border-width: 0 0 5vh 1.25vh;
+    border-color: darkblue transparent;
+}
+
+#videopainttools.hidden {
+    transform: translate(120%);
+}
+
+ul#videopainttools                         {  list-style: none;}
+ul#videopainttools li                      { float: left; background: darkblue; padding-right: 3vh;}
+ul#videopainttools a:hover                 { color: #fff; }
+ul#videopainttools a:active                { color: #fff; }
+ul#videopainttools li a                    { display: block; color: #fff; text-decoration: none !important;}
+ul#videopainttools li:last-child a         { border-right: none; } /* Doesn't work in IE */
+ul#videopainttools li.hover,
+ul#videopainttools li:hover                { background: crimson; color: #fff; position: relative; }
+ul#videopainttools li.hover a              { color: black; }
+
+
+/* 
+    LEVEL TWO
+*/
+ul#videopainttools ul                      { visibility: hidden; position: absolute; bottom: 100%; right: 0; list-style: none;}
+ul#videopainttools ul li                   { background: darkblue; color: #fff; float: none; }
+
+                                    /* IE 6 & 7 Needs Inline Block */
+ul#videopainttools ul li a                 { width: 100%; display: inline-block; text-decoration: none !important;} 
+
+/* 
+    LEVEL THREE
+*/
+ul#videopainttools ul ul                   { left: 100%; top: 0; list-style: none;}
+ul#videopainttools li:hover > ul           { visibility: visible; }