Merged develop into master

andre0xFF · Feb 19, 2017 · 312557b · 312557b
2 parents af9f3e5 + 11feada
commit 312557b
Show file tree

Hide file tree

Showing 21 changed files with 14,910 additions and 3 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,9 +1,9 @@
 /Enunciados_e_relatorios/
-*.pdf
 *jpg
-/Materia/
-/Exames/
+/Slides/
+/Exams/
 *.txt
 /Aulas/
 /2015/
 /T01_aux/
+*.dwg
diff --git a/P01/.gitignore b/P01/.gitignore
@@ -0,0 +1 @@
+/Images/*
diff --git a/P01/2ºProjeto.pdf b/P01/2ºProjeto.pdf
diff --git a/P01/VSearch.html b/P01/VSearch.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+	  <meta charset="UTF-8">
+	  <meta name="description" content="PCM Final Project - Visual Search">
+	  <meta name="keywords" content="HTML5, CSS, JavaScript">
+	  <meta name="author" content="Rui Jesus">
+	  <meta charset="UTF-8">
+	  <title>Visual Search</title>
+	  <link rel="stylesheet" href="css/VSearchStyle.css">
+	  <script src="js/Image_Processing.js"></script>
+	  <script src="js/XML_Database.js"></script>
+	  <script src="js/ISearchEngine.js"></script>
+	  <script src="js/ISearchEngine_Manager.js"></script>
+	  <script src="js/images_engine.js"></script>
+	  <script src="js/colorizer.js"></script>
+	</head>
+
+	<body>
+		<section id="visualizacao"  >
+		    <canvas id="canvas" width="1100" height="1100" style="display: none;">
+		        Your browser doesn't recognize the canvas element
+		    </canvas>
+		</section>
+	</body>
+</html>
diff --git a/P01/css/responsive.css b/P01/css/responsive.css
@@ -0,0 +1,17 @@
+#images_container {
+	display: -webkit-flex;
+	display: flex;
+	flex-wrap: wrap;
+	-webkit-flex-direction: row;
+	flex-direction: row;
+	-webkit-align-items: center;
+	align-items: center;
+	-webkit-justify-content: space-between;
+	justify-content: space-between;
+}
+
+#images_container img {
+	height: 200px;
+	margin: 5px;
+	margin-top: 20px;
+}
diff --git a/P01/css/structure.css b/P01/css/structure.css
@@ -0,0 +1,36 @@
+.container-header {
+  max-height: 200px;
+  min-height: 60px;
+  height: 10%;
+  background: url('../backgrounds/stock-photo-147024847.jpg') center / cover;
+}
+.mdl-textfield__input {
+  min-height: 20px;
+  background-color: white;
+  color: black;
+  border-radius: 5px;
+  padding: 5px;
+}
+.mdl-layout__header-row {
+  justify-content: center;
+}
+.content_simulation {
+  height: 2000px;
+}
+.search-bar {
+  position: relative;
+}
+.search-bar__camera {
+  position: absolute;
+  top: 20px;
+  right: 0px;
+  padding: 0px;
+  min-width: 0px;
+}
+.search-bar__colorlens {
+  position: absolute;
+  top: 20px;
+  right: 30px;
+  padding: 0px;
+  min-width: 0px;
+}
diff --git a/P01/index.html b/P01/index.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+    <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.blue-teal.min.css">
+    <link rel="stylesheet" href="./css/responsive.css">
+    <link rel="stylesheet" href="./css/structure.css">
+    <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
+		<script defer src="./js/images_engine.js"></script>
+		<script defer src="./js/XML_Database.js"></script>
+		<script defer src="./js/Image_Processing.js"></script>
+		<script defer src="./js/colorizer.js"></script>
+    <script defer src="./js/ui.js"></script>
+    <title></title>
+  </head>
+  <body>
+    <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
+
+      <header class="mdl-layout__header container-header">
+        <div class="mdl-layout__header-row">
+
+          <div class="mdl-textfield mdl-js-textfield search-bar" style="min-width:40%;">
+            <input class="mdl-textfield__input mdl-shadow--8dp" id="user-input" type="text" onchange="handle_textfield_onChange()" oninput="handle_textfield_onInput()">
+            <div class="mdl-tooltip mdl-tooltip--large" for="user-input" id="user-input__tooltip" style="display: none;"></div>
+
+            <button class="mdl-button mdl-js-button search-bar__camera">
+              <label class="material-icons" for="file-input">photo_camera</label>
+              <input type="file" id="file-input" style="display: none;" onchange="handle_image_onChange()">
+            </button>
+
+            <button class="mdl-button mdl-js-button search-bar__colorlens">
+              <label class="material-icons" for="color-picker">color_lens</label>
+              <input type="color" id="color-picker" style="display: none;" oninput="handle_color_onInput()" list="colors" data-changed="false">
+							<datalist id="colors"></datalist>
+            </button>
+
+          </div>
+        </div>
+      </header>
+
+      <div class="mdl-layout__drawer">
+        <span class="mdl-layout-title">PCM Images</span>
+        <nav class="mdl-navigation">
+          <a class="mdl-navigation__link" href="./load.html">Reload data</a>
+          <label class="mdl-navigation__link" href="#" for="file-input">Upload image</label>
+          <label class="mdl-navigation__link" href="#" for="color-picker">Pick color</label>
+          <a class="mdl-navigation__link" href="#">Quiz</a>
+        </nav>
+      </div>
+
+      <main class="mdl-layout__content">
+				<section id="images_container">
+
+				</section>
+      </main>
+
+      <div id="toast" class="mdl-js-snackbar mdl-snackbar">
+        <div class="mdl-snackbar__text"></div>
+        <button class="mdl-snackbar__action" type="button"></button>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/P01/js/Image_Processing.js b/P01/js/Image_Processing.js
@@ -0,0 +1,123 @@
+// This code is not of my authority. It was provided to develop the rest of the website
+class Picture {
+
+  constructor(px, py, w, h, impath, cat) {
+    this.posx = px;
+    this.posy = py;
+    this.w = w;
+    this.h = h;
+
+    this.impath = impath;
+    this.imgobj = new Image();
+    this.imgobj.src = this.impath;
+
+    this.original_w = this.imgobj.width;
+    this.original_h = this.imgobj.height;
+    this.category = cat;
+
+		this.histogram = new ColorHistogram()
+		this.moments = new ColorMoments()
+  }
+
+	get_path() {
+		return this.imgobj.src
+	}
+
+	get_category() {
+		return this.category
+	}
+
+  setPosition(px, py) {
+    this.posx = px;
+    this.posy = py;
+  }
+
+  draw(cnv) {
+    let ctx = cnv.getContext("2d");
+
+    if (this.imgobj.complete) {
+      ctx.drawImage(this.imgobj, this.posx, this.posy, this.w, this.h);
+      console.log("Debug: N Time");
+
+    } else {
+      console.log("Debug: First Time");
+      let self = this;
+      this.imgobj.addEventListener('load', function () {
+        ctx.drawImage(self.imgobj, self.posx, self.posy, self.w, self.h);
+      }, false);
+    }
+  }
+
+	process(canvas, eventP) {
+		let ctx = canvas.getContext('2d')
+		let self = this
+
+		this.imgobj.addEventListener('load', function() {
+			ctx.drawImage(self.imgobj, 0, 0, self.imgobj.width, self.imgobj.height)
+			let pixels = ctx.getImageData(0, 0, self.imgobj.width, self.imgobj.height)
+			self.histogram.compute(pixels)
+			self.moments.compute(self.imgobj, canvas)
+			document.dispatchEvent(eventP)
+		}, false)
+	}
+
+  //method to apply the algorithms to the image.
+  //Because the image have to be loaded from the server, the same strategy used in the method draw()
+  //is used here to access the image pixels. We do not know exactly when the image is loaded and computed.
+  //For this reason the event "processed_picture" was created to alert the application (ISearchEngine)
+  computation(cnv, histcol, colorMom, eventP) {
+    let ctx = cnv.getContext("2d");
+
+    if (this.imgobj.complete) {
+      console.log("Debug: N Time");
+      ctx.drawImage(this.imgobj, 0, 0, this.imgobj.width, this.imgobj.height);
+      let pixels = ctx.getImageData(0, 0, this.imgobj.width, this.imgobj.height);
+      // let pixels = Generate_Image(cnv);
+      this.hist = histcol.count_Pixels(pixels);
+      // this.build_Color_Rect(cnv, this.hist, histcol.redColor, histcol.greenColor, histcol.blueColor);
+      // this.color_moments = colorMom.moments(this.imgobj, cnv);
+      document.dispatchEvent(eventP);
+
+    } else {
+      console.log("Debug: First Time");
+      let self = this;
+      this.imgobj.addEventListener('load', function () {
+        ctx.drawImage(self.imgobj, 0, 0, self.imgobj.width, self.imgobj.height);
+        let pixels = ctx.getImageData(0, 0, self.imgobj.width, self.imgobj.height);
+        // let pixels = Generate_Image(cnv);
+        self.hist = histcol.count_Pixels(pixels);
+        self.build_Color_Rect(cnv, self.hist, histcol.redColor, histcol.greenColor, histcol.blueColor);
+        //self.color_moments = colorMom.moments(self.imgobj, cnv);
+        document.dispatchEvent(eventP);
+      }, false);
+    }
+
+    // this method should be completed by the students
+
+  }
+
+  // Method used to debug. It shows the color and the correspondent number of pixels of the histogram
+  build_Color_Rect(cnv, hist, redColor, greenColor, blueColor) {
+    let ctx = canvas.getContext("2d");
+    let text_y = 390;
+    let rect_y = 400;
+    let hor_space = 80;
+
+    ctx.font = "12px Arial";
+    for (let c = 0; c < redColor.length; c++) {
+      ctx.fillStyle = "rgb(" + redColor[c] + "," + greenColor[c] + "," + blueColor[c] + ")";
+      ctx.fillRect(c * hor_space, rect_y, 50, 50);
+      if (c === 8) {
+        ctx.fillStyle = "black";
+      }
+      ctx.fillText(hist[c], c * hor_space, text_y);
+    }
+  }
+
+  mouseOver(mx, my) {
+    if ((mx >= this.posx) && (mx <= (this.posx + this.w)) && (my >= this.posy) && (my <= (this.posy + this.h))) {
+      return true;
+    }
+    return false;
+  }
+}
diff --git a/P01/js/XML_Database.js b/P01/js/XML_Database.js
@@ -0,0 +1,65 @@
+class XML_Database {
+  constructor() {}
+	// loads and returns an XML file
+  loadXMLfile(filename) {
+    let xmlhttp = {};
+    let xmlDoc = {};
+
+    if (window.XMLHttpRequest) {
+      xmlhttp = new XMLHttpRequest();
+    }
+    xmlhttp.open("GET", filename, false);
+    xmlhttp.send();
+    xmlDoc = xmlhttp.responseXML;
+    return xmlDoc;
+  }
+	// searches for a class of an element in xmlDoc and returns path element child node
+  SearchXML(query, xmlDoc, num_Img) {
+    let Images_path = [];
+    let x = xmlDoc.getElementsByClassName(query);
+    if (num_Img > x.length) {
+      num_Img = x.length;
+    }
+
+    for (let i = 0; i < num_Img; i++) {
+      for (let j = 0; j < x[i].childNodes.length; j++) {
+        if (x[i].childNodes[j].nodeName == "path") {
+          Images_path.push(x[i].childNodes[j].textContent);
+          break;
+        }
+      }
+    }
+    return Images_path;
+  }
+}
+
+class LocalStorageXML {
+
+  constructor() {}
+	// writes to localstorage keyname : xmlRowString
+  saveLS_XML(keyname, xmlRowString) {
+    if (typeof(localStorage) == 'undefined')
+      alert('Your browser does not support HTML5 localStorage. Try upgrading.');
+    else {
+      try {
+        localStorage.setItem(keyname, xmlRowString);
+      } catch (e) {
+        alert("save failed!");
+        if (e == QUOTA_EXCEEDED_ERR)
+          alert('Quota exceeded!');
+        }
+      }
+  }
+	// reads keyname from localstorage and returns the string parsed as XML type
+  readLS_XML(keyname) {
+    let localStorageRow = localStorage.getItem(keyname);
+    let xmlDoc = null;
+
+    if (window.DOMParser) {
+      let parser = new DOMParser();
+      return xmlDoc = parser.parseFromString(localStorageRow, "text/xml");
+    } else
+      throw new TypeError("LocalStorageXML-readLS_XML: Error with DOMParser");
+    }
+
+}