flask server with image reading

lab5/README.md

 # lab5 - IHM
 
-Ce répertoire contient l'énoncé du **lab5** du cours IHM sous le dossier `doc`
-
-------
-
-* Exécutez la commande suivante : `git pull base master` dans votre dépôt local sur votre machine de travail, où vous avez fait les **lab1**, **lab2**, **lab3** et **lab4**
-
-  >Avant de faire ça, assurez vous que vous avez bien défini ce dépôt comme deuxième dépôt distant en exécutant la commande suivante :
-  >
-  >```shell
-  >git remote -v
-  >```
-  >
-  >La sortie de cette commande doit contenir la ligne suivante :
-  >
-  >```
-  >base ssh://git@ssh.hesge.ch:10572/cours-ihm/labs_ihm_2019_preparation.git
-  >```
-  >
-  >Dans le cas contraire, exécutez cette ligne de commande :
-  >
-  >```bash
-  >git remote add base ssh://git@ssh.hesge.ch:10572/cours-ihm/labs_ihm_2019.git
-  >```
-
-#### La suite est destinée à ceux qui vont travailler en binôme :
-
-Dans chaque groupe, un des membres doit ajouter sont partenaire en tant que **Developer** ou **Maintainer** dans son projet git. 
-
-***Attention*** ! Cette opération doit être effectuer une seule fois par groupe pour éviter les conflits au moment de la correction de votre travail.
-
-**En cas de non-respect de ces consignes, des pénalités seront encourues !**
-

lab5/src/README.md

+# Festival - restfull API module
+
+## Installation
+
+### Setting up a virtual environment for the REST API
+
+1. Install `virtualenv` package and create a new environment in the `src` folder project
+
+    On Linux and macOS :
+
+    ```
+    python3 -m virtualenv env
+    ```
+
+    On Windows :
+
+    ```
+    python -m virtualenv env
+    ```
+
+2. Activate the virtual environment with : 
+
+    On Linux and macOS :
+
+    ```
+    source env/bin/activate
+    ```
+
+   On Windows :
+
+    ```
+    .\env\Scripts\activate
+    ```
+
+3. Then install all packages dependencies in `requirements.txt` :
+
+    ```
+    pip install -r requirements.txt
+    ```
+
+4. Define environment variable
+
+    On Linux and macOS :
+    
+    ```
+    export FLASK_ENV=development
+    export FLASK_APP=app.py
+    ```
+    
+    On Windows :
+    
+    ```
+    set FLASK_ENV=development
+    set FLASK_APP=app.py
+    ```
+    
+## Starting the web server (REST API)
+
+    python -m flask run
+
+## Starting the web client
+
+    http://localhost:5000/
+
+## Documentation
+
+### Installation
+
+1. Install nodejs on your system
+
+    On Linux and macOS :
+
+    ```
+    sudo apt-get install curl
+    curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -
+    sudo apt-get install nodejs
+    sudo apt-get install npm
+    ```
+
+    On Windows : 
+
+    Dowload nodejs installer and install it with npm package manager, then reboot your computer
+    https://nodejs.org/en/download/
+
+2. Then install APIDOC tool
+
+    On Linux and macOS :
+
+    ```
+    sudo npm install apidoc -g
+    ```
+
+    On Windows :
+
+    ```
+    npm install apidoc -g
+    ```
+
+### Generating documentation
+
+1. Run these command on the folder project
+
+    On Linux and macOS :
+
+    ```
+    apidoc -i src/ -o doc/apidoc
+    ```
+
+    On Windows :
+
+    ```
+    apidoc -i src\ -o doc\apidoc
+    ```
+
+### Printing documentation
+
+Go into the /doc/apidoc directory and open the index.html file
\ No newline at end of file

lab5/src/app.py

+from flask import Flask, render_template
+import os
+import mapManager
+import json
+
+app = Flask(__name__)
+
+@app.route('/') 
+def root():
+    return render_template("index.html")
+
+
+@app.route('/get/map/<id>/')
+def getMap(id):
+    content = mapManager.loadImage(mapManager.getPathOfMapFile('map'+id+'.png'))
+    return json.dumps(content)
+
+@app.route('/get/maps/')
+def getMaps():
+    return 'todo'

lab5/src/mapManager.py

+from PIL import Image
+import os 
+
+SIZE = 21
+
+
+
+def getPathOfMapFile(fileName):
+    return  os.path.abspath('maps/' + fileName)
+
+
+
+def loadImage(filepath):
+    #if (exist(filepath)):
+    #    return 'Error 404, file not found'
+
+    im = Image.open(filepath) # Can be many different formats.
+    content = []
+    pix = im.load()
+
+    width, height = im.size  # Get the width and hight of the image for iterating over
+    if (width != SIZE & height != SIZE):
+        return 'Error , file is not at the right size. Must by 21x21 pixels.'
+
+    for y in range(SIZE):
+        for x in range(SIZE):
+            r, g, b, a = pix[x,y] # get rgba color of pixel
+            
+            if (r == 0) & (g == 0) & (b == 255): # blue pixel - wall
+                content.append('WALL')
+            
+            elif (r == 0) & (g == 255) & (b == 0): # green pixel - food
+                content.append('FOOD')
+            
+            elif (r == 255) & (g == 0) & (b == 0): # red pixel - spawn zone
+                content.append('SPAWN_E')
+            
+            elif (r == 0) & (g == 0) & (b == 0): # black pixel - nothing
+                content.append('')
+            
+            elif (r == 255) & (g == 255) & (b == 255): # white pixel - special food
+                content.append('S_FOOD')
+            
+            elif (r == 255) & (g == 255) & (b == 0): # yellow pixel - special food
+                content.append('SPAWN_P')
+
+    return content
\ No newline at end of file

lab5/src/requirements.txt

+flask==1.1.1
+Pillow==6.2.1
\ No newline at end of file

lab5/src/GameManager.js → lab5/src/static/js/GameManager.js

@@ -33,7 +33,7 @@ var mapGenerator
 function main() {
 	mapGenerator = new MapGenerator();
 
-	mapGenerator.generateMap("maps/map1.png");
+	//mapGenerator.generateMap("maps/map1.png");
 
 	// init scene
 	scene = new THREE.Scene();
@@ -54,10 +54,11 @@ function main() {
 	scene.add(camera);
 	scene.add(cube);
 	scene.add(cube2);
-	scene.add(mapGenerator.generateMap("maps/map1.png"));
-	camera.position.z = 13;
+	scene.add(mapGenerator.generateMap(1));
+	camera.position.z = 10;
 	camera.position.x = 0;
-	camera.position.y = 0;
+	/*camera.position.y = -10;
+	camera.rotation.x = 0.5;*/ 
 
 	cube.position.x = 0;
 	cube.position.x = 2;
@@ -71,7 +72,7 @@ function main() {
 	scene.add(sphere);
 	player =  new Player(0,2,sphere);
 
-	console.log(sphere.position);
+	//console.log(sphere.position);
 	
 	function render(){
 		checkCollision();
@@ -100,10 +101,21 @@ function checkCollision() {
 		var localVertex = playerObj.geometry.vertices[vertexIndex].clone();
 		var globalVertex = localVertex.applyMatrix4(playerObj.matrix);
 		var directionVector = globalVertex.sub(playerObj.position);
+
+		// check collision with walls 
 		var ray = new THREE.Raycaster(originPointFastForward, directionVector.clone().normalize());
 		var collisionResults = ray.intersectObjects(walls);
 		if (collisionResults.length > 0 && collisionResults[0].distance < directionVector.length()) {
-			console.log(collisionResults);
+			player.setDirection(DIRECTION.NONE);
+			
+			/*collisionResults[0].object.material.transparent = true;
+			collisionResults[0].object.material.opacity = 0.4;*/
+		}
+
+		ray = new THREE.Raycaster(originPoint, directionVector.clone().normalize());
+		collisionResults = ray.intersectObjects(enemies);
+		if (collisionResults.length > 0 && collisionResults[0].distance < directionVector.length()) {
+			alert('Game Over');
 			player.setDirection(DIRECTION.NONE);
 			
 			/*collisionResults[0].object.material.transparent = true;

lab5/src/MapGenerator.js → lab5/src/static/js/MapGenerator.js

@@ -2,26 +2,23 @@ class MapGenerator {
     constructor() {
         this.size = 21;
     }
-    generateMap(filePath) {
+    generateMap(id) {
         var map;
-        /*var img = new Image(21,21);
-        img.src = filePath;
-        var canvas = document.createElement('canvas');
-        var context = canvas.getContext('2d');
-        context.drawImage(img, 0, 0, img.width, img.height);
-        
-        console.log(img);
-        console.log(img.width);
-        console.log(img.height);
-        console.log(canvas);
-        document.body.appendChild(img);
-        document.body.appendChild(canvas);
 
-        for(var x = 0; x < img.width; x++){
-            for(var y = 0; y < img.height; y++){
-                console.log(context.getImageData(x, y, 1, 1).data);
-            }
-        }*/
+        //
+        fetch("/get/map/"+id+"/", { headers: { "Content-Type": "text/plain; charset=utf-8" }})
+            .then(res => res.json()) // parse response as JSON
+            .then(response => {
+
+                console.log("RESPONSE !!!!!!!!!!!!!!!!");
+                console.log(response);
+            })
+            .catch(err => {
+                // hide the modal
+                console.log(err);
+                alert("Sorry, there are no results for your search");
+            });
+
 
         // create ground
         var geometry = new THREE.PlaneGeometry( this.size, this.size );

lab5/src/lab5.html → lab5/src/templates/index.html

@@ -3,18 +3,20 @@
 <html lang="en">
 	<head>
 	<meta charset="UTF-8">
-		<title>Lab 5</title>
+		<title>Lab 5 - Pac Man</title>
 		<style type="text/css">
 			body { margin: 0; }
 			canvas { width: 100%; height: 100% }
 		</style>
+		<script src="{{ url_for('static', filename="js/Player.js")}}"></script>
+		<script src="{{ url_for('static', filename="js/MapGenerator.js")}}"></script>
+		<script src="{{ url_for('static', filename="js/GameManager.js")}}"></script>
+		<script src="{{ url_for('static', filename="js/lib/three.js")}}"></script>
+		<script src="{{ url_for('static', filename="js/lib/jquery-3.4.1.slim.min.js")}}"></script>
 	</head>
 	<body onload="main()">
 		<div id="main">
 		</div>
-		<script src="lib/three.js"></script>
-		<script src="GameManager.js"></script>
-		<script src="MapGenerator.js"></script>
-		<script src="Player.js"></script>
+		
 	</body>
 </html>
\ No newline at end of file