Giter Club home page Giter Club logo

dit113mqttworkshop's Introduction

DIT113MqttWorkshop

Purpose

The goal of the workshop is to give student practical knowledge and deeper understanding on how to work with MQTT. Ensuring that they can get familiar with how to create MQTT topics and use them while publishing and subscribing. Moreover, the students gain a general understanding of how to handle incomming messages from the broker.

Description

The Android app has a basic voice recognition that identifies different color commands which are then send to the Wio Terminal using MQTT.

ezgif com-resize

System diagrams

Android class diagram

[ADD PICTURE]

MQTT communication between Components

[ADD PICTURE]

Tools

Eclipse Mosquitto broker
Download here

Arduino IDE
WINDOWS, MAC, LINUX

Wio terminal
Get started. Set up your wio terminal.
In addition download the following libraries: rpcWiFi and PubSubClient by Nick O'Leary's

Android studio
Download here

Setup Guide

โš ๏ธ Doesn't work with iPhone's shared WiFi or eduroam

Description Command/Clarification
Create a header file. See instructions #define SSID "<WiFi name>"
#define PASSWORD "<the WiFi password>"
#define my_IPv4 "<ipv4>"
To find your IP for my_IPv4, open a terminal run the command and select the IP "Wireless LAN adapter Wi-Fi: IPv4 Address" Windows: ipconfig
MacOS: /sbin/ifconfig
Go to the mosquitto folder and open mosquitto.config file in your computer, below "General configuration" add: listener 1883 0.0.0.0
allow_anonymous true
Open terminal and navigate to mosquitto root folder Windows: mosquitto -c mosquitto.conf -v
MacOS: brew services start mosquitto
In Android Studio, go to Device manager and download an emulator Use API 30 or API 31.
How to download an Emulator?
Activate the microphone Open Extended Controls and activate the microphone settings

ezgif com-video-to-gif

Common Errors

Common Errors With Mosquitto

How to get started without Android Studio - Video

Live Demo + Common issues with Android Studio - Video

Tasks

Remember to create different issues, use labels and use feature branches. The more you practice the better you get at it. ๐Ÿ˜„
A few implementation are missing and your job is to implement them, they are mark with a TODO in the code.

  • Add the header file to gitignore. You dont want your personal data out.

Android studio

โ€ผ๏ธโš ๏ธ NOTE: You don't need to understand how Android Studio or the voice recognition works, you should focus on understanding the MQTT connection. I have added comments and additional documentation for those that may be interested. We will cover Android Studio during the Android Studio lecture.
Before moving to the implementation of the missing parts in the past, start with the first task here. That will provide you a better understanding of the code that you need to use in Android Studio.

  • Create a class diagram for the Android class in "com.quinstedt.speechtotext" folder.
    You should only include the 4 classes in that folder
  • Add a picture to the README.md
  • BrokerConnection class - define a subscription topic and subscribe to the connection message
  • MainActivity class - define a publish topic for the color commands and publish the color command

Arduino IDE/Wio Terminal

  • Add the topics for publish and subscribe
  • Complete the implemention of the setColorAndPrintMessage(String message) function, for the color red, black and blue this should be done by using the incomming messages.

Introducing a new color with its own topic

โ€ผ๏ธโ›” IMPORTANT: Don't do this task before completing the previous task.
Now that you can change the color of your Wio terminal using the voice commands in your Android App ๐Ÿ˜Ž๐Ÿ‘, we are going to introduce at least one more color. The new color MUST have its own topic (It cannot be the exact same topic as you use for the previous colors).

  • Add the new color in the Colors enum class
  • Refactor the publishColor method so that it now can send the previous colors command AND the new color using it's own topic.
  • Refactor the callback function in the your Arduino code, so that it can handle the two different topics for the changes in the display color.

Final README update

  • Create a simple digram that shows the MQTT communication between components.
    Clarification: create a diagram that shows all three components and the topic that they subscribe and publish to.
  • Add a picture to the README

Contributors

.. add your team members

dit113mqttworkshop's People

Contributors

quinstedt avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.