squareline-howtos/README.md

# squareline-howtos

## Arduino Board

![](pico-embed.png)

## Squareline - Arduino Verknüpfung

Namen in Squareline benutzt man in Arduino mit dem Vorsatz ui_.

Squareline: LabelTemp  
Arduino: ui_LabelTemp

Um den Text in einem Label zu aktualisieren ruft man eine Funktion auf.

```cpp

// Text
lv_label_set_text(ui_LabelTemp, "Hallo Welt!");

// Numerische Werte
lv_label_set_text(ui_LabelTemp, String(25).c_str());

// Numerische Werte aus Variable
int temperature = bme.readTemperature();
lv_label_set_text(ui_LabelTemp, String(temperature).c_str());


```

Welche Funktion man nutzen muss findet man hier: https://docs.lvgl.io/master/widgets/index.html

Es gibt für jedes Widget eine eigene Funktion.

## Objekte sichtbar / unsichtbar machen

```cpp

/*Hide an object*/
lv_obj_add_flag(ui_Image1, LV_OBJ_FLAG_HIDDEN);

/*Show an object*/
lv_obj_remove_flag(ui_Image1, LV_OBJ_FLAG_HIDDEN);

```

Alle Flags: https://docs.lvgl.io/master/widgets/obj.html#flags

### Sichtbar / unsichtbar nach Sensorwert

```cpp

int temp = bme.readTemperature();

/*Show an object when threshold is met*/
if(temp > 30) {
    lv_obj_remove_flag(ui_ImageTempTooHot, LV_OBJ_FLAG_HIDDEN); // HIDDEN wird removed, also wird Image sichtbar
    lv_obj_add_flag(ui_ImageTempOk, LV_OBJ_FLAG_HIDDEN); // HIDDEN wird hinzugefügt, also wird Image unsichtbar
}

```

## Screens automatisch wechseln lassen

Diese Methode wird sehr langsam, wenn man einen Lichtsensor benutzt. Eine bessere Alternative folgt.

```cpp

int counter = 0;

void loop ()
{
    if(counter == 500) lv_screen_load_anim(ui_Screen2, LV_SCR_LOAD_ANIM_MOVE_LEFT, 100, 1000, false);
    if(counter == 1000) lv_screen_load_anim(ui_Screen3, LV_SCR_LOAD_ANIM_MOVE_LEFT, 100, 1000, false);
    if(counter == 1500) lv_screen_load_anim(ui_Screen1, LV_SCR_LOAD_ANIM_MOVE_LEFT, 100, 1000, false);
    
    if(counter == 1500) counter = 0;

    counter++;
 }

```

## Screenshots

![alt text](<Screenshot 2024-06-27 171325.png>)

![alt text](<Screenshot 2024-06-27 171525.png>)

![alt text](<Screenshot 2024-06-27 173433.png>)

## Snippets

### BME280 / BMP280

```cpp
// BME280: Suche in Arduino Libraries nach BME280 und installiere Adafruit BME280
// BMP280: Suche in Arduino Libraries nach BMP280 und installiere Adafruit BMP280

// kopiere in die jeweils entsprechenden Funktionen in ui.ino

#include <Wire.h>
#include <SPI.h>
#include <Adafruit_Sensor.h>
#include <Adafruit_BME280.h>

#define SEALEVELPRESSURE_HPA (1013.25)

Adafruit_BME280 bme; // BME280
//Adafruit_BMP280 bmp; // BMP280

void setup() {
    bme.begin(0x76);
    //bmp.begin(0x76);
}

void loop() { 
    int temp = bme.readTemperature();
    int pressure = bme.readPressure() / 100.0F;
    int humidity = bme.readHumidity();

    //int temp = bmp.readTemperature();
    //int pressure = bmp.readPressure() / 100.0F;

    // Label (oder andere Text-Elemente)
    lv_label_set_text(ui_Label1, String(pressure).c_str());

    // Bar / Arc (alles mit Werten)
    lv_bar_set_value(ui_Bar1, humidity, LV_ANIM_ON); // oder LV_ANIM_OFF
}

```

### TSL2591(1)

```cpp

// Suche in Arduino Libraries nach TSL2591 und installiere Adafruit TSL2591
// kopiere in die jeweils entsprechenden Funktionen in ui.ino

#include <Wire.h>
#include <Adafruit_Sensor.h>
#include "Adafruit_TSL2591.h"

Adafruit_TSL2591 tsl = Adafruit_TSL2591(2591);

void setup(){
    tsl.begin();
    tsl.setGain(TSL2591_GAIN_MED);
    tsl.setTiming(TSL2591_INTEGRATIONTIME_100MS);
}

void loop(){
    int lux = tsl.getLuminosity(TSL2591_VISIBLE);

    // Label (oder andere Text-Elemente)
    lv_label_set_text(ui_Label1, String(lux).c_str());

    // Bar / Arc (alles mit Werten)
    lv_bar_set_value(ui_Bar1, lux, LV_ANIM_ON); // oder LV_ANIM_OFF
}


```

### Soil Moisture Sensor

```cpp

// kopiere in die jeweils entsprechenden Funktionen in ui.ino
// um analogRead benutzen zu können, muss man das Board "Pico (Arduino MBED)" auswählen

void setup(){
}

void loop(){
    int moisture_raw = analogRead(A0);
    int moisture_mapped = map(moisture_raw, 800, 300, 0, 100);
    int moisture = constrain(moisture_mapped, 0, 100);

    // Label (oder andere Text-Elemente)
    lv_label_set_text(ui_Label1, String(moisture).c_str());

    // Bar / Arc (alles mit Werten)
    lv_bar_set_value(ui_Bar1, moisture, LV_ANIM_ON); // oder LV_ANIM_OFF
}

```