Adds UI, magazine visualisation and forklift

This commit adds the prototype of user interface, canvas on which magazine is drawn and forklift class.

SZI1/settings.py

@@ -37,6 +37,7 @@ INSTALLED_APPS = [
     'django.contrib.sessions',
     'django.contrib.messages',
     'django.contrib.staticfiles',
+    'magazine'
 ]
 
 MIDDLEWARE = [
@@ -116,5 +117,9 @@ USE_TZ = True
 
 # Static files (CSS, JavaScript, Images)
 # https://docs.djangoproject.com/en/2.1/howto/static-files/
+STATICFILES_DIRS = [
+    os.path.join(BASE_DIR, "static"),
+    os.path.join(BASE_DIR, "magazine/static/")
+]
 
 STATIC_URL = '/static/'

magazine/models.py

@@ -1,3 +0,0 @@
-from django.db import models
-
-# Create your models here.

magazine/static/magazine/forklift.js

@@ -0,0 +1,53 @@
+class Forklift {
+    constructor(x, y) {
+        this.positoin = createVector(x, y);
+        this.speed = 5;
+        this.path = [];
+        this.currentTarget = '';
+        this.targetId = 0;
+        this.velocity = createVector(0, 0);
+        this.direction = createVector(0, 0);
+        this.end = false;
+    }
+
+    draw() {
+        fill(225, 255, 0);
+        ellipse(this.positoin.x, this.positoin.y, 20);
+    }
+
+    setPath(path) {
+        this.path = path;
+        this.currentTarget = this.path[this.targetId];
+        this.setVelocity();
+    }
+
+    nextTarget() {
+        this.targetId += 1;
+        if (this.targetId < this.path.length) {
+            this.currentTarget = this.path[this.targetId];
+        } else {
+            this.end = true;
+        }
+    }
+
+    targetReached() {
+        return this.end;
+    }
+
+    setVelocity() {
+        this.direction = p5.Vector.sub(
+            sections[this.currentTarget],
+            this.positoin
+        );
+        this.velocity = this.direction.setMag(this.speed);
+    }
+
+    move() {
+        this.positoin = p5.Vector.add(this.positoin, this.velocity);
+        debugger;
+        if (this.positoin.equals(sections[this.currentTarget])) {
+            this.nextTarget();
+            this.setVelocity();
+        }
+    }
+}

magazine/static/magazine/sketch.js

@@ -0,0 +1,86 @@
+let sections;
+let roads;
+let packageClaim;
+let going = false;
+let forklift;
+
+function setup() {
+    createCanvas(500, 500).parent('canvas');
+    frameRate(30);
+
+    createMagazineLayout();
+
+    select('#button').mousePressed(deliver);
+
+    forklift = new Forklift(sections['START'].x, sections['START'].y);
+}
+
+function draw() {
+    background(64);
+    drawMagazine();
+    forklift.draw();
+    if (going) {
+        if (forklift.targetReached()) {
+            going = false;
+        } else {
+            forklift.move();
+        }
+    }
+}
+
+function drawMagazine() {
+    noFill();
+    stroke(220);
+    strokeWeight(10);
+    for (let road of roads) {
+        line(
+            sections[road[0]].x,
+            sections[road[0]].y,
+            sections[road[1]].x,
+            sections[road[1]].y
+        );
+    }
+    noStroke();
+    textAlign(CENTER, CENTER);
+    for (let section of Object.keys(sections)) {
+        if (section === 'START') {
+            fill(80);
+            rect(sections[section].x - 15, sections[section].y, 30, 30);
+        } else {
+            fill(30);
+            ellipse(sections[section].x, sections[section].y, 30);
+            fill(255);
+            text(section, sections[section].x, sections[section].y);
+        }
+    }
+}
+
+function deliver() {
+    path = ['B', 'A', 'D', 'E', 'F'];
+    forklift.setPath(path);
+    going = true;
+}
+
+function createMagazineLayout() {
+    unit = width / 5;
+
+    sections = {
+        START: { x: unit * 2, y: 0 },
+        A: createVector(unit, unit),
+        B: createVector(2 * unit, unit),
+        C: createVector(2 * unit, 2 * unit),
+        D: createVector(unit, 2 * unit),
+        E: createVector(unit, 3 * unit),
+        F: createVector(2 * unit, 3 * unit)
+    };
+    roads = [
+        ['START', 'B'],
+        ['A', 'B'],
+        ['A', 'E'],
+        ['E', 'D'],
+        ['E', 'F'],
+        ['D', 'C'],
+        ['B', 'C'],
+        ['C', 'F']
+    ];
+}

magazine/static/magazine/style.css

@@ -0,0 +1,3 @@
+body {
+    background-color: rgb(109, 61, 61);
+}

magazine/templates/magazine/index.html

@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<head>
+{% load static %}
+<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/addons/p5.dom.min.js"></script>
+<script src="{% static 'magazine/forklift.js' %}"></script>
+<script src="{% static 'magazine/sketch.js' %}"></script>
+<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
+<style>
+    body { 
+        font-family: 'Montserrat', sans-serif;
+        background-color: #374A67; 
+    }
+    input {
+        border-radius: 4px;
+        background-color: rgb(230, 230, 230);
+    }
+    .container { display: flex; justify-content: center;}
+    .package, .legend { 
+        display: flex;
+        flex-direction: column;
+        color: white; 
+        margin: 10px; 
+        background-color: rgb(46, 45, 51); 
+        border-radius: 4px;
+        padding: 10px;
+    }
+    .package label {
+        margin-top: 5px;
+    }
+    button {
+        margin-top: auto;
+        padding: 10px;
+        background-color: #374A67;
+        border: none;
+        border-radius: 3px;
+    }
+</style>
+</head>
+<body>
+    <div class="container">
+        <div class="package">
+            <h3 style="margin-top: 0;">Package description</h1>
+            <label for="width">Max Width</label>
+            <input type="number" name="width">
+            <label for="topWidth">Top Width</label>
+            <input type="number" name="topWidth">
+            <label for="botWidth">Bottom Width</label>
+            <input type="number" name="botWidth">
+            <label for="height">Max Height</label>
+            <input type="number" name="height">
+            <label for="topHeight">Top Height</label>
+            <input type="number" name="topHeight">
+            <label for="botHeight">Bottom Height</label>
+            <input type="number" name="botHeight">
+            <label for="depth">Max Depth</label>
+            <input type="number" name="depth">
+            <div style="margin-top: 5px">
+                <input type="radio" name="material"> Hard
+                <input type="radio" name="material"> Soft
+            </div>
+            <button id="button">Send Package</button>
+        </div>
+        <div id="canvas" style="margin: 10px;"></div>
+        <div class="legend">
+            <h3 style="margin-top: 0">Sections</h3>
+            <p>A - Cartons</p>
+            <p>B - Barrels</p>
+            <p>C - Plastic boxes</p>
+            <p>D - ______</p>
+            <p>E - ______</p>
+            <p>F - ______</p>
+            <p>G - ______</p>
+        </div>
+    </div>
+</body>
+</html>

magazine/urls.py

@@ -1,6 +1,8 @@
 from django.urls import path
+from django.views.generic import TemplateView
 from . import views
 
 urlpatterns = [
-    path('', views.index, name='index')
+    path('', TemplateView.as_view(template_name='magazine/index.html')),
+    path('classify', views.classify, name='classify'),
 ]

magazine/views.py

@@ -1,8 +1,16 @@
 from django.shortcuts import render
 from django.http import HttpResponse
+from django.views.decorators.csrf import csrf_exempt
+
+import json
 
 # Create your views here.
 
 
 def index(request):
     return HttpResponse('It lives!')
+
+
+@csrf_exempt
+def classify(request):
+    return HttpResponse(json.load(request))