Connected Stopwatch

About: I am a student in graduate engineering school of computer science and electronics

Hello!
In this tutorial you will found out how to connect any Arduino compatible device, equiped with WiFi, to REST APIs ! This use the GitKraken Glo Board webapp to create boards, columns & cards to organize things!

Some knowledge of how public API works is needed.
This project is meant to use GitKraken Glo's API to track the time you spend on tasks on your To Do lists.

For example, you have got to do this tasks:

- Drink Coffee

You press start when you start, when your done, you press Done, and voilà, the time you spend gets commented.

Step 1: Build

To build, you can think of anything. A small stopwatch would be great, but I didn't anything small laying around.

So cardboard and arcade push buttons was the way to go!

The board I used is an ESP8266 WeMos D1 Mini. This is cheaper than an Arduino, and has WiFi onboard!

The screen is a Nokia 5110 LCD.


Parts list on AliExpress:

But you can basically found it anywhere or on other websites like Amazon or eBay.

Overall bill: 5€86

Pins connections:

ESP8266 WeMos D1 Mini ↔ Nokia 5110 LCD

  • D2 (GPIO4) ↔ 0 RST
  • D1 (GPIO5) ↔ 1 CE
  • D6 (GPIO12) ↔ 2 DC
  • D7 (GPIO13) ↔ 3 DIN
  • D5 (GPIO14) ↔ 4 CLK
  • 3V3 ↔ 5 VCC
  • D0 (GPIO16) ↔ 6 BL
  • G (GND) ↔ 7 GND

ESP8266 WeMos D1 Mini ↔ Arcade Buttons

  • D3 (GPI18) ↔ Left Button
  • D4 (GPI17) ↔ Right Button

The button's other pin being connected to ground (GND).

Step 2: Code

Just give me the code!

You can find the full source code here:

https://github.com/antoinech/glo-stopwatch

To make it work for you, you will need to change these variables:

//Put your WiFi credentials here
const char* ssid = "--your--ssid--"; const char* password = "--your--password--"; //Put your Personal Access Token (https://support.gitkraken.com/developers/pats/) const char *bearer = "Bearer XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX";

You will also need 2 Adafruit libraries:

https://github.com/adafruit/Adafruit-GFX-Library

https://github.com/adafruit/Adafruit-PCD8544-Nokia...

And this awesome Arduino Json:

https://arduinojson.org/

Explanations

In the source code you will find out:

  • how to connect to a HTTPS endpoint
  • how to make a POST or a GET request
  • how to serialize a JSON response to get objects and arrays
  • how to display text and pictures in a Nokia 5110 LCD

If you want to learn more about this API:

https://support.gitkraken.com/developers/overview/

These request could work with remotely any API that uses POST and GET requests :)

Step 3: Connect to a HTTPS Website

This pseudo-code explains you how to connect to an HTTPS website.
Its the first steps are the same as with a

WiFiClient client 

but with a verification step. You need to go to the API endpoint you want to verify, and check the certificate's SHA1 fingerprint. Copy paste it as a string in your code and call client.verify(fingerprint,hosturl).

   WiFiClientSecure client;

  //Connect to WiFi<br>  WiFi.mode(WIFI_STA);
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  
  if (!client.connect(host, httpsPort)) {
    Serial.println("connection failed");
    return;
  }

  if (client.verify(fingerprint, host)) {
    Serial.println("certificate matches");
  } else {
    Serial.println("certificate doesn't match");
  }	

Step 4: Make POST / GET Requests

POST

This is the syntax to make a POST request:

String PostData = "{";<br>  PostData +="\"text\":\"my message\"";
  PostData += "}";
  
  Serial.print(PostData);
  
  client.print(String("POST ") + url + " HTTP/1.1\r\n" +
               "Host: " + host + "\r\n" +
               "Authorization: " + bearer + "\r\n" +
               "User-Agent: BuildFailureDetectorESP8266\r\n" +
               "cache-control: no-cache\r\n" +
               "Content-Type: application/json \r\n" +
               "Content-Length: " + PostData.length() + "\r\n" +
               "\r\n" + PostData + "\n");
               
  Serial.println("request sent");

the PostData is the data you send as JSON, in this case:

{
	"text": "my message"
}<br>

The url variable is the endpoint's url, host, the website's url, bearer is the API access token.

GET

This is the pseudo-code for a GET request:

client.print(String("GET ") + url + " HTTP/1.1\r\n" +<br>               "Host: " + host + "\r\n" +
               "Authorization: " + bearer + "\r\n" +
               "User-Agent: BuildFailureDetectorESP8266\r\n" +
               "Connection: keep-alive\r\n\r\n");

  Serial.println("request sent");
  while (client.connected()) {
    String line = client.readStringUntil('\n');
    if (line == "\r") {
      Serial.println("headers received");
      break;
    }
  }
  String line = client.readStringUntil('\n');

The result of this command will be stored in the line variable.

Step 5: JSON & NOKIA LCD

To achieve a similar project, you will need to display images, texts and symbols to the Nokia 5110 LCD.
You can look at this In Depth Tutorial from lastminuteengineers.

To handle JSON in Arduino C++, use the ArduinoJson website that will tell you all about it!

Don't hesitate to post questions if you have any, or post what you made with this source code / tutorial.

Share

    Recommendations

    • Arduino Contest 2019

      Arduino Contest 2019
    • Trash to Treasure

      Trash to Treasure
    • Tape Contest

      Tape Contest

    2 Discussions

    0
    None
    randofo

    27 days ago

    I see you had to look very far for your enclosure. ;)

    1 reply
    0
    None
    Exempledenomrandofo

    Reply 26 days ago

    Has it turns out, it's way easier to cable than a existing stopwatch :D