Upload files to 'scripts'

Dibuja el circulo y controla el cambio de imagenes

scripts/draw-circle.js

@@ -0,0 +1,231 @@
+function paint_canvas(){
+	var c = document.getElementById("back-canvas");
+    var ctx = c.getContext("2d");
+    var img = document.getElementById("oller");
+    ctx.drawImage(img, 0, 0);
+    var imgData = ctx.getImageData(0, 0, c.width, c.height);
+    ctx.putImageData(imgData, 0, 0);
+}
+
+$(document).ready(function() {
+    $("#pointer_div").on("mousemove", function(event) {
+        var x = event.pageX - this.offsetLeft;
+        var y = event.pageY - this.offsetTop;
+		draw_circle(x,y);
+	});
+});
+
+function draw_circle(x,y){
+	var c = document.getElementById("back-canvas");
+    var ctx = c.getContext("2d");
+    var img = document.getElementById("oller");
+    ctx.drawImage(img, 0, 0);
+    var width = x;//x
+    var height = y;//y center of circle
+    var radius = 100;// radius of circle
+    var x1,y1;
+    var x_bitmap = [];
+    var y_bitmap = [];
+
+	for(x1 = 0; x1 < radius; x1 += 1){
+        for(y1 = 0; y1 < radius; y1 += 1){
+        	if(((x1-(radius/2))**2 + (y1-(radius/2))**2) < (radius/2)**2){
+            	x_bitmap.push(x1);//every x coordinate for circle
+            	y_bitmap.push(y1);// every y coordinate for circle
+            	// I need to convert this bitmap into the circle...       
+            }
+    	}
+	}
+	var imgData = ctx.getImageData(x-(radius*4.25), y-(radius), radius, radius);
+	var x2,y2,index;
+	var a = [];
+	for(x2 = 0; x2 < x_bitmap.length; x2 += 1){
+        index = (4 * x_bitmap[x2]) + (y_bitmap[x2] * 4 * radius);
+		imgData.data[3 + index] = 0;
+
+	}
+	ctx.putImageData(imgData, x-(radius*4.25), y-(radius));
+}
+
+function clear_radios(){
+	var fradio = document.getElementsByName('front-radio');
+	var bradio = document.getElementsByName('back-radio');
+	var length = fradio.length;
+	for(var index = 0; index < length; index ++){
+		if(fradio[index].checked){
+			fradio[index].checked = false;
+			bradio[index].disabled = false;
+		}
+		else if(bradio[index].checked){
+			bradio[index].checked = false;
+			fradio[index].disabled = false;
+
+		}
+	}
+}
+
+function front(){
+	var radios = document.getElementsByName('front-radio');
+	var length = radios.length;
+	for(var index = 0; index < length; index ++){
+		if(radios[index].checked){
+			switch(radios[index].value){
+    			case "visual":
+    				document.getElementById("oller").src = "images/paisaje-frances.png";
+    				var radio = document.getElementsByName('back-radio');
+    				var disabled;
+    				for(disabled = 0; disabled < length; disabled ++){
+    					if(disabled == index){
+		    				radio[disabled].checked = false;
+		    				radio[disabled].disabled = true;
+    					}
+    					else{
+    						if(radio[disabled].value == "ultraviolet" ||
+    						   radio[disabled].value == "x-ray"){
+	    						radio[disabled].disabled = true;
+    						}
+    						else{
+	    						radio[disabled].disabled = false;
+    						}
+    					}
+    				}
+			        break;
+			    case "infrared":
+    				document.getElementById("oller").src = "images/paisaje-frances-infrared.png";
+    				var radio = document.getElementsByName('back-radio');
+    				var disabled;
+    				for(disabled = 0; disabled < length; disabled ++){
+    					if(disabled == index){
+		    				radio[disabled].checked = false;
+		    				radio[disabled].disabled = true;
+    					}
+    					else{
+    						if(radio[disabled].value == "ultraviolet" ||
+    						   radio[disabled].value == "x-ray"){
+	    						radio[disabled].disabled = true;
+    						}
+    						else{
+	    						radio[disabled].disabled = false;
+    						}
+    					}
+    				}
+			        break;
+			    case "ultraviolet":
+    				document.getElementById("oller").src = "images/paisaje-frances.png";
+    				var radio = document.getElementsByName('back-radio');
+    				var disabled;
+    				for(disabled = 0; disabled < length; disabled ++){
+    					if(disabled == index){
+		    				radio[disabled].disabled = true;
+    					}
+    					else{
+    						radio[disabled].disabled = false;
+    					}
+    				}
+			        break;
+			    case "x-ray":
+    				document.getElementById("oller").src = "images/paisaje-frances.png";
+    				var radio = document.getElementsByName('back-radio');
+    				var disabled;
+    				for(disabled = 0; disabled < length; disabled ++){
+    					if(disabled == index){
+		    				radio[disabled].disabled = true;
+    					}
+    					else{
+    						radio[disabled].disabled = false;
+    					}
+    				}
+			        break;
+			    default:
+			}
+			break;
+ 		}
+	}
+}
+
+function back(){
+	var radios = document.getElementsByName('back-radio');
+	var length = radios.length;
+	for(var index = 0; index < length; index ++){
+		if(radios[index].checked){
+			switch(radios[index].value) {
+    			case "visual":
+    				document.getElementById("back-canvas").style.backgroundImage = "url('images/paisaje-frances.png')";
+    				var radio = document.getElementsByName('front-radio');
+    				var disabled;
+    				for(disabled = 0; disabled < length; disabled ++){
+        				if(disabled == index){
+		    				radio[disabled].checked = false;
+		    				radio[disabled].disabled = true;
+    					}
+    					else{
+    						if(radio[disabled].value == "ultraviolet" ||
+    						   radio[disabled].value == "x-ray"){
+	    						radio[disabled].disabled = true;
+    						}
+    						else{
+	    						radio[disabled].disabled = false;
+    						}
+    					}
+    				}
+			        break;
+			    case "infrared":
+    				document.getElementById("back-canvas").style.backgroundImage = "url('images/paisaje-frances-infrared.png')";
+    				var radio = document.getElementsByName('front-radio');
+    				var disabled;
+    				for(disabled = 0; disabled < length; disabled ++){
+    					if(disabled == index){
+		    				radio[disabled].checked = false;
+		    				radio[disabled].disabled = true;
+    					}
+    					else{
+    						if(radio[disabled].value == "ultraviolet" ||
+    						   radio[disabled].value == "x-ray"){
+	    						radio[disabled].disabled = true;
+    						}
+    						else{
+	    						radio[disabled].disabled = false;
+    						}
+    					}
+    				}
+			        break;
+			    case "ultraviolet":
+    				document.getElementById("back-canvas").style.backgroundImage = "url('images/paisaje-frances.png')";
+    				var radio = document.getElementsByName('front-radio');
+    				var disabled;
+    				for(disabled = 0; disabled < length; disabled ++){
+    					if(disabled == index){
+		    				radio[disabled].disabled = true;
+    					}
+    					else{
+    						radio[disabled].disabled = false;
+    					}
+    				}
+			        break;
+			    case "x-ray":
+    				document.getElementById("back-canvas").style.backgroundImage = "url('images/paisaje-frances.png')";
+    				var radio = document.getElementsByName('front-radio');
+    				var disabled;
+    				for(disabled = 0; disabled < length; disabled ++){
+    					if(disabled == index){
+		    				radio[disabled].disabled = true;
+    					}
+    					else{
+    						radio[disabled].disabled = false;
+    					}
+    				}
+			        break;
+			    default:
+			}
+			break;
+ 		}
+	}
+}
+
+function openNav() {
+    document.getElementById("sidebar").style.width = "200px";
+}
+
+function closeNav() {
+    document.getElementById("sidebar").style.width = "0";
+}