diapos iniciales

front/controllers/uploadCtrl.js

@@ -3,6 +3,65 @@ app.controller('uploadCtrl', function ($scope, $http,video,notify) {
 	$scope.texto1="";
 	$scope.texto2="";
 	$scope.video = video; 
+	$scope.diapos = [];
+	var canvas = document.getElementById('c');
+	var container = canvas.parentNode;
+	var ctx = canvas.getContext('2d');
+	var dpr = window.devicePixelRatio || 1;
+	var img = new Image();
+	var diapos = [];
+
+	img.src="https://curso.especificosba.com.ar/diapo/EBA/1.png"; //Cargo la imagen inicial, a espera de informacion
+	img.onload=function(){ //Cuando una imagen carga en mi obj imagen, quiero que se dibuje en canvas
+		ctx.drawImage(img,0,0,canvas.width, canvas.height);
+	}
+	$scope.updateDiapos = function(d) {
+		diapos = JSON.parse(d);
+		parseMessage(diapos[0]);
+	}
+	function respondCanvas(){
+		canvas.setAttribute('width', container.offsetWidth);
+		canvas.setAttribute('height', container.offsetWidth/4*3);
+	}
+	
+	respondCanvas();
+
+	if (!String.prototype.format) {
+		String.prototype.format = function() {
+		var args = arguments;
+		    return this.replace(/{(\d+)}/g, function(match, number) { 
+		      return
+				( typeof args[number] != 'undefined' ? args[number] : match );
+		    });
+		};
+	}
+
+	function parseMessage(msg){
+		if (msg==undefined)
+			return;
+		switch(msg.type){
+			case "draw":
+				drawOnCanvas(msg.points,msg.color);
+				break;
+			case "clean":
+				ctx.drawImage(img,0,0,canvas.width, canvas.height);
+				break;
+			case "diapo":
+				img.src="https://curso.especificosba.com.ar/diapo/{0}/{1}.png".format(msg.PDF,msg.slide);
+				break;
+		}
+	}
+	function drawOnCanvas(points,color) {
+		if(points.length==0) return;
+		ctx.strokeStyle = color;
+		ctx.beginPath();
+		ctx.moveTo(points[0].x, points[0].y);
+		 
+		for(var i=1; i<points.length; i++) {
+			ctx.lineTo(points[i].x, points[i].y);
+		}
+		ctx.stroke();
+	}
 
 	$scope.post = function() {
 		var data = {

front/views/upload.html

@@ -10,29 +10,37 @@
 			</video>
 		</div>
 		<div class="col-md-6">
-
-			<div class="row">
-				<div class="col-md-6">
-					<div class="form-group">
-					    <label>Profesor</label>
-					    <input type="text" class="form-control" ng-model="profesor">
-					</div>
-				</div>
-				<div class="col-md-6">
-					<div class="form-group">
-					    <label>Texto1</label>
-					    <input type="text" class="form-control" ng-model="texto1">
-					</div>
-				</div>
+			<canvas id="c" width="100%"></canvas>
+		</div>
+	</div>
+	<div class="row">
+		<div class="col-md-6">
+		</div>
+		<div class="col-md-6">
+			<textarea ng-model="diapos" style="width:100%; display:block;"></textarea>
+			<input type="button" ng-click="updateDiapos(diapos)" value="Diapos"></input>
+		</div>
+	</div>
+	<div class="row">
+		<div class="col-md-6">
+			<div class="form-group">
+			    <label>Profesor</label>
+			    <input type="text" class="form-control" ng-model="profesor">
+			</div>
+		</div>
+		<div class="col-md-6">
+			<div class="form-group">
+			    <label>Texto1</label>
+			    <input type="text" class="form-control" ng-model="texto1">
 			</div>
-		
-			<div class="row">
-				<div class="col-md-6">
-					<div class="form-group">
-					    <label>Texto2</label>
-					    <input type="text" class="form-control" ng-model="texto2">
-					</div>
-				</div>
+		</div>
+	</div>
+	
+	<div class="row">
+		<div class="col-md-6">
+			<div class="form-group">
+			    <label>Texto2</label>
+			    <input type="text" class="form-control" ng-model="texto2">
 			</div>
 		</div>
 	</div>