Code structure

Directory structure#

On the file explorer on the left panel of VS Code, you will see that the basic directory structure of our hello PIO project looks like this:

├─ .pio/
│  └──build/esp32dev/
│     ├──firmware.bin
│  └──libdeps/esp32dev/
│     ├──TFT_eSPI
│     ├──KGFX
│     ├──OTAServer
├─ .vscode/
├─ src/
│  └──main.cpp
├─ .gitignore/
├─ platformio.ini

Let’s go over them.

.pio

Everything in this folder is auto-generated by compiling the code. All compiled binaries go to .pio/build. firmware.bin was generated by the krate build command, and represents the krate that we want to flash to kublet.

.pio/libdeps contains all the dependencies of our project. All dependencies of the project are declared in the platformio.ini file.

.vscode

VS configs. No reason to touch these.

src

main.cpp contains the entry point of the firmware.

All .cpp and .h files go here.

.gitignore

You only need to track src/ and platformio.ini.

platformio.ini

This file contains the configurations and dependencies of your project. You can edit this file accordingly.

platformio.ini is a configuration file that lets you set up your development environment with declarations. In your platformio.ini file, you will see that 3 dependencies are declared:

lib_deps = 
  bodmer/TFT_eSPI@^2.5.0
  kublet/KGFX@^0.0.22
  kublet/OTAServer@^1.0.1

We use KGFX, our graphics library for handling displays. KGFX provides wrapper functions for common UI patterns on kublet. It is based on the TFT_eSPI library. We also need to install our OTAServer library for enabling flashing code during the development process.

Code structure#

Every Arduino code has a basic code structure that looks like this:

#include <Arduino.h>

void setup() {
  // do something
}

void loop() {
  // continue doing something
  delay(1);
}

Let’s go over what we’ve added in main.cpp.

On the file explorer on the left column of VS Code, open src/main.cpp.

#include <Arduino.h>
#include <otaserver.h>
#include <kgfx.h>

OTAServer otaserver;
KGFX ui;

void setup() {
  Serial.begin(460800);
  Serial.println("Starting app");

  otaserver.connectWiFi(); // DO NOT EDIT.
  otaserver.run(); // DO NOT EDIT

  ui.init();
  ui.clear();
  ui.drawText("hello", Arial_28, TFT_YELLOW, 0, 0);
}

void loop() {
  if((WiFi.status() == WL_CONNECTED)) {
    otaserver.handle(); // DO NOT EDIT
  }
  delay(1);
}

We won’t go over the basics of writing Arduino code here. If you’re just getting started with Arduino development, it would be helpful to refer to resources online to get up to speed on basics. If you feel stuck at any time, feel free to leave a question on our Discord channel.

Our code in main.cpp is the entry point of the firmware. We’ve added code for enabling flashing firmware during development and displaying text on the kublet screen.

Flashing firmware#

There are 3 lines in the code marked DO NOT EDIT.

In void setup()

otaserver.connectWiFi();
otaserver.run();

and in void loop()

otaserver.handle();

These 3 lines of code are essential for a continued development process. Since our firmware is flashed over WiFi, the first part of the code ensures that we’re connected to WiFi before we enable kublet to listen for firmware updates.

If you wish to be able to develop and flash code to kublet during the development process, do not touch any part of the code that is marked as DO NOT EDIT.

Font#

Our default font is Arial. Our KGFX library comes bundled with support for Arial fonts. Comes in bold and regular types.

Display#

Our KGFX library provides common display functions for display text, numbers, and graphs. Try changing the text, color, and position on the kublet like this. Go to main.cpp, replace

ui.drawText("World", 7, TFT_VIOLET, 0, 75);

Then build, and flash the firmware again. You should see changes on the screen.