added sketchpad

gradio/static/css/gradio.css

@@ -57,7 +57,7 @@
 }
 
 /*.flag:focus {
-  background-color: pink !important; 
+  background-color: pink !important;
 }
 */
 .input_text, .output_text {
@@ -139,3 +139,42 @@
 .confidence_intervals > * {
   vertical-align: bottom;
 }
+
+.sketchpad canvas {
+  background-color: white;
+}
+.sketch_tools {
+  flex: 0 1 auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 16px;
+}
+.brush {
+  border-radius: 50%;
+  background-color: #AAA;
+  margin: 0px 20px;
+  cursor: pointer;
+}
+.brush.selected, .brush:hover {
+  background-color: black;
+}
+#brush_1 {
+  height: 8px;
+  width: 8px;
+}
+#brush_2 {
+  height: 16px;
+  width: 16px;
+}
+#brush_3 {
+  height: 24px;
+  width: 24px;
+}
+.canvas_holder {
+  flex: 1 1 auto;
+  text-align: center;
+}
+canvas {
+  border: solid 1px black;
+}

gradio/static/js/sketchpad-input.js

@@ -1,100 +1,26 @@
-var canvas = document.getElementById('canvas');
+var dimension = Math.min($(".canvas_holder").width(),
+    $(".canvas_holder").height()) - 2 // minimum dimension - border
+var sketchpad = new Sketchpad({
+  element: '.canvas_holder canvas',
+  width: dimension,
+  height: dimension
+});
+sketchpad.penSize = $(".brush.selected").attr("size");
+canvas = $('.canvas_holder canvas')[0]
 context = canvas.getContext("2d");
-context.fillStyle = "black";
-context.fillRect(0, 0, 400, 400);
-
-
-function notifyError(error) {
-      $.notify({
-          // options
-          message: 'Not able to communicate with model (is python code still running?)'
-      },{
-          // settings
-          type: 'danger',
-          animate: {
-              enter: 'animated fadeInDown',
-              exit: 'animated fadeOutUp'
-          },
-          placement: {
-              from: "bottom",
-              align: "right"
-          },
-          delay: 5000
-
-      });
- }
-
-
-$('#canvas').mousedown(function(e){
-  var mouseX = e.pageX - this.getBoundingClientRect().left + document.documentElement.scrollLeft;
-  var mouseY = e.pageY - this.getBoundingClientRect().top + document.documentElement.scrollTop
-;
-
-  paint = true;
-  addClick(mouseX, mouseY);
-  redraw();
-});
-$('#canvas').mousemove(function(e){
-  if(paint){
-    addClick(e.pageX - this.getBoundingClientRect().left + document.documentElement.scrollLeft, e.pageY - this.getBoundingClientRect().top + document.documentElement.scrollTop, true);
-    redraw();
-  }
-});
-$('#canvas').mouseup(function(e){
-  paint = false;
-});
-$('#canvas').mouseleave(function(e){
-  paint = false;
-});
-var clickX = new Array();
-var clickY = new Array();
-var clickDrag = new Array();
-var paint;
-
-function addClick(x, y, dragging)
-{
-  clickX.push(x);
-  clickY.push(y);
-  clickDrag.push(dragging);
-}
-function redraw(){
-  context.clearRect(0, 0, context.canvas.width, context.canvas.height); // Clears the canvas
-  context.fillStyle = "black";
-  context.fillRect(0, 0, 400, 400);
-
-  context.strokeStyle = "#FFF";
-  context.lineJoin = "round";
-  context.lineWidth = 25;
-
-  for(var i=0; i < clickX.length; i++) {
-    context.beginPath();
-    if(clickDrag[i] && i){
-      context.moveTo(clickX[i-1], clickY[i-1]);
-     }else{
-       context.moveTo(clickX[i]-1, clickY[i]);
-     }
-     context.lineTo(clickX[i], clickY[i]);
-     context.closePath();
-     context.stroke();
-  }
-}
-
-$('#clear-button').click(function(e){
-    context.clearRect(0, 0, context.canvas.width, context.canvas.height); // Clears the canvas
-    clickX = new Array();
-    clickY = new Array();
-    clickDrag = new Array();
-    context.fillStyle = "black";
-    context.fillRect(0, 0, 400, 400);
-    ctx.clearRect(0, 0, context.canvas.width, context.canvas.height); // Clears the canvas
+$(".brush").click(function (e) {
+  $(".brush").removeClass("selected")
+  $(this).addClass("selected")
+  sketchpad.penSize = $(this).attr("size")
 })
-
-
-$('#submit-button').click(function(e){
+$('body').on('click', '.clear', function(e) {
+    context.clearRect(0, 0, context.canvas.width, context.canvas.height);
+})
+$('body').on('click', '.submit', function(e) {
     var dataURL = canvas.toDataURL("image/png");
+    console.log(dataURL)
     ws.send(dataURL, function(e){
-      notifyError(e)  
+      notifyError(e)
     });
 
 })
-

gradio/templates/sketchpad_input.html

@@ -0,0 +1,13 @@
+<div class="gradio input sketchpad">
+  <div class="role">Input</div>
+  <div class="sketch_tools">
+    <div id="brush_1" size="8" class="brush"></div>
+    <div id="brush_2" size="16" class="brush selected"></div>
+    <div id="brush_3" size="24" class="brush"></div>
+  </div>
+  <div class="canvas_holder">
+    <canvas id="canvas"></canvas>
+  </div>
+</div>
+<script src="http://yiom.github.io/sketchpad/javascripts/sketchpad.js"></script>
+<script src="../static/js/sketchpad-input.js"></script>