EatersLab by PoohLabs

name: inverse
layout: true
class: center, middle, inverse
---
#EatersLab

by PoohLabs
.footnote[Visit [project site](https://github.com/pooh-labs/eaterslab)]
---
## What is it and why should you use it?
---
layout: false
.left-column[
  ## Project
  ### Problem
]
.right-column[
<img height="300px" src="img/cafeteria.jpg" />

Cafeterias customers wonder:

* are there free seats?

* what is served in their favourite place today?

* are today dishes tasty?
]
---
layout: false
.left-column[
  ## Project
  ### Problem
  ### Solution
]
.right-column[

<div style="text-align: center;">
  <img src="img/eaters_icon_background.svg" height="200px" />
  <h2 style="margin-top: 0;">EatersLab</h2>
</div>

System for automatic canteen occupancy data management

* automatic counting of people inside

* live data access via mobile app

* menu listings and reviews

]
---
layout: false
.left-column[
  ## Project
  ### Problem
  ### Solution
  ### Benefits
]
.right-column[

For customers:

* Data available before visiting in person

* Sharing the opinion about dishes

* Data available also for foreigners

For canteen owners:

* Help in managing traffic spikes

* Availability of historical statistics

* Ability to export data to social channels

]
---
layout: false
.left-column[
  ## Project
  ### Problem
  ### Solution
  ### Benefits
  ### System architecture
]
.right-column[

]
---
template: inverse

## How does it work then?
short introduction to the system
---
name: how

.left-column[
  ## How it works?
  ### - Devices - cameras
]
.right-column[

**Architecture goals:**

* compact design

* reasonable computing power

* hardware availability and low price

**Design goals:**

* performing basic data analysis

* sharing the analyzed data

* ensuring anonymity of users

* take part of the load from the server
]

---
.left-column[
  ## How it works?
  ### - Devices - cameras
  ### - Server
]
.right-column[

**Basic technical assumptions:**

* low maintenance costs initially (before the system grows)

* relatively easy possibility to introduce new elements thanks to community support

* easy access to the production environment for developers

**Set goals:**

* sharing the basic API publicly

* good documentation of the created API (a small amount of work)

* pisanie kodu zgodnie z zasadami DRY oraz KISS

* system preparation for high loads
]

---

.left-column[
  ## How it works?
  ### - Devices - cameras
  ### - Server
  ### - Client app
]
.right-column[

**Basic technical assumptions:**

* creating an Android client application

* using the offical Android language - Kotlin

* creating asynchronous Kotlin coroutines for connections management

**Set goals:**

* developing an app which can be used on the most of the devices

* creating an application with a user-friendly interface

* presenting data to the user in a clear way
]

---
template: inverse

## RaspberryPi **camera devices**
---
.left-column[
  ## Camera
  ### What it does
]
.right-column[

** What is the role of cameras? **

* Load video data from a source (USB camera, RPi Camera Module, video file).

* Recognize single person on frames

* Batch and send events to the server
      * `person_entered`
      * `person_left`
      * `monitoring_started`
      * `monitoring_ended`

* Save local stats in device storage
]
---

.left-column[
  ## Camera
  ### What it does
  ### How it works
]
.right-column[

* Track people in frames.

* Check from which direction person crosses the line

<img src="./img/opencv_people_counter_result01.gif" alt="people on GIF" style="height: 400px;" />
]
---

.left-column[
   ## Camera
  ### What it does
  ### How it works
  #### Step 1
]
.right-column[
### Step 1: People recognition

* Run pre-trained neural network on a single frame (`cv2.dnn`)

* Neural network returns coordinates for each person (`(startX, startY, endX, endY)`)

* Calculate the centroid and mark it as the person position

These computations can take a long time so it's done relatively rarely (every 30 frames).

]
---

.left-column[
  ## Camera
  ### What it does
  ### How it works
  #### Step 1
  #### Step 2
]
.right-column[
### Step 2: Following the people

* Every object can be followed separately

* Passing centroids to another algorithm (from `dlib` library)

* Algorithm returns new positions of objects

* Assign the nearest new position to old one

* When the object crosses the line - person enters/leaves the room
]

---

.left-column[
  ## Camera
  ### What it does
  ### How it works
  #### Step 1
  #### Step 2
  ### Technologies
]
.right-column[

* Python

* Used also on the server

* Good support for RaspberryPi

* Automatic generator of API client

* Rich support for machine learning

* OpenCV, `dlib`

* Pre-implementated algorithms save developer time

* Using two different algorithms = one fast + one precise

]
---

template: inverse

## Data server **Django**
---
.left-column[
  ## Django
  ### Tasks
]
.right-column[

** What's the role of the server **

* [Admin page](https://eaterslab.herokuapp.com/admin/) that allows to manage data which is defined based on models specification.

* Sharing the document with interface of the [API](https://eaterslab.herokuapp.com/doc).

* Managing the database stored data (and gives the  ability to model the objects in code with no SQL).

Model example:

```python
class Cafeteria(models.Model):
    name = models.CharField(max_length=128)
    description = models.CharField(max_length=256)
    sub_description = models.CharField(max_length=512)
    latitude = models.FloatField(validators=[MinValueValidator(-90.0), MaxValueValidator(90.0)])
    longitude = models.FloatField(validators=[MinValueValidator(-180.0), MaxValueValidator(180.0)])
    capacity = models.IntegerField(validators=[MinValueValidator(1)])
    logo_url = models.CharField(max_length=2048, validators=[URLValidator])
    address = models.CharField(max_length=256)
    opened_from = models.TimeField()
    opened_to = models.TimeField()

```

]
---

.left-column[
  ## Django
  ### Tasks
  ### API
]
.right-column[

** [API](https://eaterslab.herokuapp.com/doc): **

* serving canteens data for mobile clients

* receiving data from camera's devices

]

---

.left-column[
  ## Django
  ### Tasks
  ### API
  ### Database
]
.right-column[

** Database: PostgreSQL **

* It can easily manage huge amounts of data in asynchronous way.

* It is fully compatible with Django.

]

---

.left-column[
  ## Django
  ### Tasks
  ### API
  ### Database
  ### Addons
]
.right-column[

** Addons **

* [Django REST framework](https://www.django-rest-framework.org/)

Defining the API – data serialization, API views, authentification.

* [drf-yasg](https://github.com/axnsan12/drf-yasg) – API document generation

]

---

.left-column[
  ## Django
  ### Tasks
  ### API
  ### Database
  ### Addons
  ### - Heroku
]
.right-column[

** Heroku **

* is a hosting of the application in the cloud

[production](https://eaterslab.herokuapp.com/) – [dev](https://eaterslab-dev.herokuapp.com/)

* configured as the workflow - after every push to repository

- App server is built

- App tests are executed

* the ability to interoperate with the PostgreSQL database in the cloud

* has the SSL certificate (HTTPS protocol is forced in the app)

]

---
template: inverse

## Mobile client - **Android**
---
.left-column[
  ## Base parts
]
.right-column[

The app should allow users to easily access the data which is stored on server and exposed via public API.

There are a few functionalities in the app:

- welcome screen

- searching the place on the map

- searching the place by text

- access to data of selected place

* podstawowego widoku wybranego miejsca

* statistics

* fixed menu

- settings

Each functionality is implemented as the separate activity in the app what can be useful in app future development and cooperation with other apps.

]

---
.left-column[
  ## Base parts
  ## Data management
]
.right-column[
Process of data management in app:

- mapping data to app format

- keeping cached data

- informing user about every connection error

Communiation with data server:

- using the code generated using API definition file
        
- asynchronous requests to data server

- light background tasks thanks to coroutines
]
---
.left-column[
    ## Welcome
]
.right-column[

.text-content[

Two base use cases of app

- searching places on map

- searching places by text with filters (**WIP**)

]

.image-content[
<img src="./img/hello_light.jpg" alt="hello" height="400px"/>
]
]
---
.left-column[
  ## Welcome
  ## Map
]
.right-column[

.text-content[

The ability to search on map:

- base information about places

- access to places localisation

- using GPS provider to search nearby places

]

.image-content[
<img src="./img/map_light.jpg" alt="map" height="400px"/>
]
]
---
.left-column[
  ## Welcome
  ## Map
  ## Main data screen
]
.right-column[

.text-content[

Presentation of base data fetched from server:

- simple and readable data presentation

- independent content loading

- current occupancy data view

]

.image-content[
<img src="./img/details_light.jpg" alt="details" height="400px"/>
]
]
---
.left-column[
    ## Welcome
  ## Map
  ## Main data screen
  ## Statistics
]
.right-column[

.text-content[

Setting up all needed libraries to present stats data:

- ready linear and bar plots

- fetching real stats data from server (**WIP**)

-  changing the stats ranges and views (**WIP**)

]

.image-content[
<img src="./img/stats_light.jpg" alt="stats" height="400px"/>
]
]
---
.left-column[
  ## Welcome
  ## Map
  ## Main data screen
  ## Statistics
  ## Menu
]
.right-column[

.text-content[

Fixed menu of selected place presentation:

- names, prices and reviews of deishes

- the ability to add your own review for dish (**WIP**)

]

.image-content[
<img src="./img/food_light.jpg" alt="food" height="400px"/>
]
]
---
.left-column[
  ## Welcome
  ## Map
  ## Main data screen
  ## Statistics
  ## Menu
  ## Settings
]
.right-column[

.text-content[

MThe ability to change the application settings:

- two app's languages - Polish and English

- two app's themes - standard and dark

- current app version as an entry to *dev mode* (**WIP**)

- setting username for meals reviews posting (**WIP**)

]

.image-content[
<img src="./img/settings_light.jpg" alt="settings" height="400px"/>
]
]
---
.left-column[
  ## Dark app theme
]
.right-column[
<img src="./img/hello_dark.jpg" alt="stats" height="300px"/>
<img src="./img/map_dark.jpg" alt="stats" height="300px"/>
<img src="./img/details_dark.jpg" alt="stats" height="300px"/>
<img src="./img/menu_dark.jpg" alt="stats" height="300px"/>
<img src="./img/food_dark.jpg" alt="stats" height="300px"/>
<img src="./img/gps_dark.jpg" alt="stats" height="300px"/>
]
---
name: last-page
template: inverse

## That's all - **thank you**!