Chalkboard Added features

README.md

@@ -1,18 +1,19 @@
-# Chalkboard
+# Chalkboard :woman_teacher:
 
-Fullscreen Javascript canvas implementation of a chalkboard with a realistic chalk effect and touch support.
+### :loudspeaker: Hola Professoras!! It's time to make your online classes more interesting, engaging and fun with this simple application. Get the classroom feel with a realistic chalkboard, chalk and the duster. You can write notes too now!! <br/><br/>
 
-**Demo:** [http://mmoustafa.com/experiments/chalk/](http://mmoustafa.com/experiments/chalk "Chalkboard")
+> ***Download the repo, get handy with the application, and go on to schedule your next class!! <br/>Your students won't miss your classes from now. <br/> And, please do not forget to flaunt off in front of other teachers*** 
 
-**Instructions:** 
-- Left click and drag to draw
-- Right click and drag to erase
-- Press space bar to clear the chalkboard
-- Click save then download to save a copy of the chalboard
+<br/>Existing Repo presented a fullscreen Javascript canvas implementation of a chalkboard with a realistic chalk effect and touch support.
 
-**License:**
-MIT licensed. Copyright (C) 2015 Mohamed Moustafa, [http://mmoustafa.com](http://mmoustafa.com)
+In my work, I have introduced display of subject and topic name, today's date, a clear board button to clear the whole canvas, and a collapsible notes box.
 
-Adapted into a [reveal.js plugin](http://courses.telematique.eu/reveal.js-plugins/chalkboard-demo.html#/ "Plugin") by Asvin Goel.
+**Instructions for use:** 
+- Left click and drag to draw
+- Right click and drag to erase
+- Press space bar or click on clear board button to clear the chalkboard
+- Click save then download to save a copy of the chalboard (not functions in all systems because os security issues)
+- Hold and drag the notes container to move it around.
+- Click on 'click here to expand/collapse' for adding notes.
 
 

css/chalk.css

@@ -28,6 +28,7 @@ html,body{
 	cursor:none;
 	z-index:2;
 	}
+
 .eraser{
 	width: 50px;
 	height: 100px;
@@ -48,7 +49,74 @@ html,body{
 	left:0;
 	z-index:5;
 }
-.panel a{
+
+.draggable{
+	position: absolute;
+	width: 100%;
+	bottom:120px;
+	right:0;
+}
+
+.panel2{
+	display: block;
+	font-size: 18px;
+	color: #333;
+	font-family: sans-serif;
+	position:absolute;
+	margin:1em;
+	bottom:0;
+	left:100px;
+	z-index:5;
+}
+
+.date{
+	display: block;
+	font-size: 18px;
+	color: #ccc;
+	font-family: sans-serif;
+	position:absolute;
+	margin:1em;
+	bottom:0;
+	right:0;
+	top:0;
+	z-index:5;
+}
+
+.subject{
+	display: block;
+	font-size: 18px;
+	color: #ccc;
+	font-family: sans-serif;
+	position:absolute;
+	margin:1em;
+	left:0;
+	top:0;
+	z-index:5;
+}
+
+.topic{
+	display: block;
+	font-size: 18px;
+	color: #ccc;
+	font-family: sans-serif;
+	position:absolute;
+	margin:1em;
+	left:0;
+	top:30px;
+	z-index:5;
+}
+
+label {
+    text-align: right;
+    clear: both;
+    float:left;
+    margin-right:15px;
+	font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serifs;
+	font-style: italic;
+}
+
+
+.panel a, .panel2 a{
 	display: inline-block;
 	padding: 0.5em 1em;
 	background:#ccc;
@@ -57,6 +125,67 @@ html,body{
 	opacity: 0.8;
 	margin-right: 0.5em;
 }
-.panel a:hover{
+
+.panel a:hover, .panel2 a:hover{
 	opacity: 1;
-}
+}
+
+input{
+	background-color: #333;
+	color: #ccc;
+	border-bottom: 2px white solid;
+	border-left: transparent 4px solid;
+	cursor: pointer;
+	font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serifs;
+	font-style: italic;
+	width: 200px;
+}
+
+#mydiv {
+	position: absolute;
+	z-index: 9;
+	background-color: #f1f1f1;
+	border: 3px solid #d3d3d3;
+	text-align: center;
+	width: 40%;
+  }
+
+  #mydivheader {
+	padding: 10px;
+	cursor: move;
+	z-index: 10;
+	background-color: #333;
+	color: #fff;
+  }
+
+  .collapsible {
+	  background-color: #999;
+	color: #444;
+	cursor: pointer;
+	padding-left: 18px;
+	height: 2px;
+	resize: vertical;
+	width: 100%;
+	border: none;
+	text-align: left;
+	outline: none;
+	font-size: 15px;
+  }
+
+  .active, .collapsible:hover {
+	background-color: #ccc;
+  }
+
+  .content {
+	  height: 180px;
+	padding: 0 18px;
+	display: none;
+	overflow: hidden;
+	background-color: #f1f1f1;
+  }
+
+  #textbox{
+	  width: 100%;
+	  height: 90%;
+	  resize: vertical;
+  }

js/chalk.js

@@ -1,9 +1,16 @@
 $(document).ready(chalkboard);
 
 function chalkboard(){
+
 	$('#chalkboard').remove();
 	$('.chalk').remove();
 	$('body').prepend('<div class="panel"><a class="link" target="_blank">Save</a></div>');
+	$('body').prepend('<div class="panel2"><a onClick="window.location.reload()">Clear Board</a></div>');
+	var dt = new Date();
+	$('body').prepend('<div class="date">' + dt.toLocaleDateString() + '</div>');
+	$('body').prepend('<div class="subject"><form> <label for="subject">Subject Name:</label><input type="text" id="subject" name="subject"></form> </div>');
+	$('body').prepend('<div class="topic"><form> <label for="topic">Topic Name:  </label><input type="text" id="topic" name="topic"></form> </div>');
+	$('body').prepend('<div class="draggable"><div id="mydiv"><div id="mydivheader">Notes (Drag to Move)</div><button type="button" class="collapsible">Click to expand / collapse</button><div class="content"><textarea id = "textbox" > </textarea></div></div></div>');
 	$('body').prepend('<img src="img/bg.png" id="pattern" width=50 height=50>');
 	$('body').prepend('<canvas id="chalkboard"></canvas>');
 	$('body').prepend('<div class="chalk"></div>');
@@ -45,7 +52,6 @@ function chalkboard(){
             evt.preventDefault();
             $('.chalk').css('left', mouseX + 'px');
             $('.chalk').css('top', mouseY + 'px');
-            //$('.chalk').css('display', 'none');
             if (mouseD) {
                 draw(mouseX, mouseY);
             }
@@ -156,10 +162,11 @@ function chalkboard(){
 
 		$('.download').remove();
 
+
+
 		var imgCanvas = document.createElement('canvas');
 		var imgCtx = imgCanvas.getContext("2d");
 		var pattern = imgCtx.createPattern(patImg,'repeat');
-
 		imgCanvas.width = width;
 		imgCanvas.height = height;
 
@@ -174,7 +181,8 @@ function chalkboard(){
 		setTimeout(function(){
 
 			imgCtx.drawImage(layimage,0,0);
-
+			imgCanvas.crossOrigin = 'Anonymous';
+			imgCanvas.allowTaint = false;
 			var compimage = imgCanvas.toDataURL("image/png");//.replace('image/png','image/octet-stream');
 
 			$('.panel').append('<a href="'+compimage+'" download="chalkboard.png" class="download">Download</a>');
@@ -190,12 +198,70 @@ function chalkboard(){
 	function IEsave(ctximage){
 		setTimeout(function(){
 			var win = window.open();
-			$(win.document.body).html('<img src="'+ctximage+'" name="chalkboard.png">');
+			$(win.document.body).html('<img src="'+ctximage+'" crossorigin name="chalkboard.png">');
 		},500);
 	}
 
 	$(window).resize(function(){
 		// chalkboard();
 	});
 
-} 
+	dragElement(document.getElementById("mydiv"));
+
+function dragElement(elmnt) {
+  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
+  if (document.getElementById(elmnt.id + "header")) {
+    // if present, the header is where you move the DIV from:
+    document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
+  } else {
+    // otherwise, move the DIV from anywhere inside the DIV:
+    elmnt.onmousedown = dragMouseDown;
+  }
+
+  function dragMouseDown(e) {
+    e = e || window.event;
+    e.preventDefault();
+    // get the mouse cursor position at startup:
+    pos3 = e.clientX;
+    pos4 = e.clientY;
+    document.onmouseup = closeDragElement;
+    // call a function whenever the cursor moves:
+    document.onmousemove = elementDrag;
+  }
+
+  function elementDrag(e) {
+    e = e || window.event;
+    e.preventDefault();
+    // calculate the new cursor position:
+    pos1 = pos3 - e.clientX;
+    pos2 = pos4 - e.clientY;
+    pos3 = e.clientX;
+    pos4 = e.clientY;
+    // set the element's new position:
+    elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
+    elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
+  }
+
+  function closeDragElement() {
+    // stop moving when mouse button is released:
+    document.onmouseup = null;
+    document.onmousemove = null;
+  }
+}
+
+var coll = document.getElementsByClassName("collapsible");
+var i;
+
+for (i = 0; i < coll.length; i++) {
+  coll[i].addEventListener("click", function() {
+    this.classList.toggle("active");
+    var content = this.nextElementSibling;
+    if (content.style.display === "block") {
+      content.style.display = "none";
+    } else {
+      content.style.display = "block";
+    }
+  });
+}
+
+}