Group Details Private

administrators

Member List

  • RE: How to add a delay

    Hello,

    you can create both widgets with one invisible (or opacity set to 0):

    VIS:0 or OPA:0

    Then you delay on the microcontroller side and send the VIS:1 or OPA:1 command when the delay expires. This will then show the widget to the user.

    Hope this helps.
    Best regards.

    posted in Frequently Asked Questions (FAQ)
  • GUI-O Concept Video

    posted in Video Tutorials
  • GUI-O Promo Video

    posted in Video Tutorials
  • Arduino & HC-06 - Basic Bluetooth

    Comin soon...

    posted in Video Tutorials
  • Arduino & ESP32 - Basic MQTT

    GUI-O + Arduino + ESP32

    Developer manual: https://www.gui-o.com/assets/gui-o_developer_manual.pdf


    A DEMO project to help you quickly get started with GUI-O and MQTT using Esp32 board. You can expand the example for your specific project.

    Download BasicMQTT.ino sketch from (or see code snippet below):
    https://drive.google.com/file/d/17vnYJrMzHJLfSP1q8YAOLSVYZG0xI9rW/view?usp=sharing

    Additional Boards Manager URLs:
    https://raw.githubusercontent.com/espressif/arduino-esp32/gh-pages/package_esp32_index.json

    /*
     * GUI-O Basic MQTT example 
     *
     * Copyright (C) 2021, GUI-O Team
     *
     * SPDX-License-Identifier: BSD-3-Clause
     */
    
    #include <WiFi.h>
    #include <PubSubClient.h>
    
    namespace led {
      static const uint8_t LED_BUILTIN = 2;
      static const uint8_t LED_CHANNEL = 0;
      static const double LED_FREQ = 5000.0;
      static const uint8_t LED_BITS = 8;
    } // namespace led
    
    static const char *ssid = "<ssid>"; // router name
    static const char *pass = "<pass>"; // router password
    
    static const char *mqttServer = "mqtt.gui-o.com";   // host name
    static const char *mqttUser = "gui-o-mqtt-generic"; // user name
    static const char *mqttPass = "lqXeZpv5VJyv0XBT";   // password
    
    static const char *Out = "<Out>"; // GUI-O app publish topic
    static const char *In = "<In>";  // GUI-O app subscribe topic
    
    // mqtt client
    WiFiClient wiFiClient;
    PubSubClient mqttClient(wiFiClient);
    
    // forward declare functions for mqtt messages handling
    void mqttCallback(char* topic, byte* message, unsigned int length);
    void parseGuioMsg(const String &msg);
    
    void setup() {
      // debug output
      Serial.begin(115200);
    
      // setup builtin led
      ledcSetup(led::LED_CHANNEL, led::LED_FREQ, led::LED_BITS); // channel, freq, resolution_bits
      ledcAttachPin(led::LED_BUILTIN, led::LED_CHANNEL);
      
      // connect WiFi (keep trying...)
      Serial.print("Connecting to ");
      Serial.println(ssid);
      
      WiFi.begin(ssid, pass);
      while(WiFi.status() != WL_CONNECTED) { 
        Serial.print(".");
        delay(500); 
      }
      
      Serial.println("WiFi connected!"); 
      
      // setup mqtt
      mqttClient.setServer(mqttServer, 1883);
      mqttClient.setCallback(mqttCallback);
    }
    
    void loop() {
      while(!mqttClient.connected()) {
        Serial.println("MQTT connecting...");
    
        if(mqttClient.connect("", mqttUser, mqttPass)) {
          Serial.println("MQTT connected!");
          mqttClient.subscribe(&Out[0]);
        }
        else {
          Serial.print("MQTT connection failed (");
          Serial.print(mqttClient.state());
          Serial.println(")! Retrying...");      
          delay(2500);
        }
      }
      mqttClient.loop();
    }
    
    // mqtt callback function
    void mqttCallback(char* topic, byte* message, unsigned int length) {
      // build message string
      String msg;
      for(int i = 0; i < length; i++) {
        msg += (char) message[i];
      }
      // parse message string
      parseGuioMsg(msg);
    }
    
    /***************************/
    /* IMPLEMENT YOUR GUI HERE */
    /***************************/
    void parseGuioMsg(const String &msg) {
      if(msg.startsWith("@init")) {
        Serial.println("GUI-O app is requesting INITIALIZATION!");
    
        // clear screen and set background
        mqttClient.publish(&In[0], "@cls\r\n");
        mqttClient.publish(&In[0], "@guis BGC:#FFFFFF\r\n");
        delay(100);
    
        // initialize simple example GUI
        mqttClient.publish(&In[0], "|LB UID:title X:50 Y:15 TXT:\"Simple light switch\" FFA:\"font8\" FSZ:3.5\r\n");
        mqttClient.publish(&In[0], "|LB UID:tap_me X:50 Y:70 TXT:\"TAP ME!\" FFA:\"font8\" FSZ:3 FFA:\"font5\"\r\n");
        mqttClient.publish(&In[0], "|CB UID:brightness X:50 Y:50 W:90 BTH:5 HAH:8 HAW:8 VIS:0 STA:135 ENA:45 FGC:#000000 SFGC:#FFFF00 BGC:#CBCBCB\r\n");
        mqttClient.publish(&In[0], "|IM UID:light_off X:50 Y:50 IP:\"https://i.imgur.com/3VbsS0Z.png\" VIS:1\r\n");
        mqttClient.publish(&In[0], "|IM UID:light_on X:50 Y:50 IP:\"https://i.imgur.com/gNdck9A.png\" VIS:0\r\n");
      }
      else if(msg.startsWith("@light_off")) {
        Serial.println("GUI-O app is requesting LIGHT ON!");
    
        // "drive GUI-O app"
        mqttClient.publish(&In[0], "@light_off VIS:0\r\n");
        mqttClient.publish(&In[0], "@light_on VIS:1\r\n");
        mqttClient.publish(&In[0], "@brightness VIS:1 VAL:100\r\n");
    
        // led enable
        ledcWrite(led::LED_CHANNEL, 255);
      }
      else if(msg.startsWith("@light_on")) {
        Serial.println("GUI-O app is requesting LIGHT OFF!");
    
        // "drive GUI-O app"
        mqttClient.publish(&In[0], "@light_off VIS:1\r\n");
        mqttClient.publish(&In[0], "@light_on VIS:0\r\n");
        mqttClient.publish(&In[0], "@brightness VIS:0 VAL:0\r\n");
    
        // led disable
        ledcWrite(led::LED_CHANNEL, 0);
      }
      else if(msg.startsWith("@brightness")) {
        const int idx = msg.indexOf(' ');
        
        if(idx > 0) {
          const int val = msg.substring(idx + 1).toInt();
          
          if(val >= 0 && val <= 100) {
            Serial.print("GUI-O app is requesting LIGHT BRIGHTNESS: ");
            Serial.println(val);
    
            // led drive
            ledcWrite(led::LED_CHANNEL, static_cast<uint8_t>(val * 2.55));
          }            
        }    
      }  
    }
    
    posted in Video Tutorials
  • RE: Add touch area to image widget

    Implemented in v0.11.4 (already available).

    Added touch response to image and video widgets. Touching the image (video) widget now sends the message in the following format: @<uid>, where <uid> denotes the widget's unique identifier set by the UID: parameter.

    posted in Wishlist
  • RE: Price

    @sato Hello!

    The final price depends on the country (due to VAT), but it is roughly 8€ for PRO license. You can check your local price here:

    https://play.google.com/store/apps/details?id=com.guio.guioapp

    This is the easisest way to purchase a single license.

    Alternatively, for multiple licenses we offer different purchasing options (not via the Google Store).

    I hope this answers your question.

    Best regards.

    posted in Comments & Feedback
  • Automatic plant watering

    Hello and welcome to the GUI-O "Automatic plant watering" example!

    NOTE: All images are copyrighted and should not be used for commercial purposes!

    This example shows how to control plant watering device. The example is applicable for all connection types supported by the GUI-O application (i.e., Bluetooth, Bluetooth LE, IoT and Usb).

    The final result is shown below. During the example, you can always consult the GUI-O developer manual for more information.

    result.jpg

    First, the following images must be copied onto your Android device under /Android/data/com.guio.guioapp/files/Pictures

    NoConnB.jpg
    Soil1.jpg
    waterx.gif
    ZCloudy.jpg
    ZSunny_Cloudy.jpg
    ZSunny.jpg
    ZRainy.jpg
    ZNight_Rainy.jpg
    ZNight.jpg

    Alternatively, the images can be loaded during run-time within the GUI-O application by specifying the corresponding url path in the parameter list (see comments in the code example below).

    NOTE: Since Android 11, the /Android/data/com.guio.guioapp/files/Pictures path is no longer accessible directly from the device due to Google's security restrictions. You can, however, access the path by connecting the Android device to a PC and transfer the images.

    The GUI initialization procedure is shown in the following code block:

    // set ASR (aspect ratio) parameter of the "development" device (see "Developer mode" section in the manual)
    @guis BGC:#000000 ASR:0.449671
    
    // show load screen - hide GUI, clear widgets and hardware instances and set display settings
    @sls
    @cls
    @clh
    
    // create widgets specifying custom parameters
    // |IM - image
    // |LB - label
    // |BSL - basic line
    // |SI - status indicator
    // |CB - circular bar
    // |TG - toggle
    // |BT - button
    // |TI - text input
    // |CH - chart
    |IM UID:im1 X:50 Y:15 W:100 H:100 ROT:0 SHE:0 IP:"soil1.jpg"
    
    |LB UID:lb1m X:5 Y:27.5 ALP:1 SHE:1 ROT:0 FGC:#FFFFFF FSZ:4.5 FFA:"font6" TXT:"Plant waterer"
    
    |IM UID:imx X:50 Y:54 W:100 H:100 ROT:0 SHE:0 VIS:1 OPA:0.3 PLS:1 IP:"waterx.gif"
    
    |BSL UID:bsl1 X:0 Y:41 FGC:#78AB46 LEN:100 BTH:0.5
    
    |LB UID:lbsec1 X:5 Y:47 ALP:1 SHE:1 ROT:0 FGC:#FFFFFF FSZ:3.5 FFA:"font6" TXT:"Section-1"
    
    |SI UID:si11 X:40 Y:47 W:6 VIS:1 SHE:1 BGC:#B0C4DE FGC:#990000 EN:1
    
    |SI UID:si12 X:65 Y:47 W:6 VIS:1 SHE:1 BGC:#B0C4DE FGC:#990000 EN:1
    
    |SI UID:si13 X:90 Y:47 W:6 VIS:1 SHE:1 BGC:#B0C4DE FGC:#990000 EN:0
    
    |BT UID:bt11 X:40 Y:47 W:8 H:3 BGC:#0030302d SBGC:#006e5b5b FGC:#00FFFFFF LOR:1 TXT:" " BTH:0 FSZ:2 FFA:"font6"
    
    |BT UID:bt12 X:65 Y:47 W:8 H:3 BGC:#0030302d SBGC:#006e5b5b FGC:#00FFFFFF LOR:1 TXT:" " BTH:0 FSZ:2 FFA:"font6"
    
    |BT UID:bt13 X:90 Y:47 W:8 H:3 BGC:#0030302d SBGC:#006e5b5b FGC:#00FFFFFF LOR:1 TXT:" " BTH:0 FSZ:2 FFA:"font6"
    
    |LB UID:lb11 X:40 Y:44 ALP:0 SHE:1 ROT:0 FGC:#FFFFFF FSZ:3 VIS:1 FFA:"font6" TXT:"25"
    
    |LB UID:lb12 X:65 Y:44 ALP:0 SHE:1 ROT:0 FGC:#FFFFFF FSZ:3 VIS:1 FFA:"font6" TXT:"25"
    
    |LB UID:lb13 X:90 Y:44 ALP:0 SHE:1 ROT:0 FGC:#FFFFFF FSZ:3 VIS:0 FFA:"font6" TXT:""
    
    |LB UID:lbsec2 X:5 Y:55 ALP:1 SHE:1 ROT:0 FGC:#FFFFFF FSZ:3.5 FFA:"font6" TXT:"Section-2"
    
    |SI UID:si21 X:40 Y:55 W:6 VIS:1 SHE:1 BGC:#B0C4DE FGC:#990000 EN:0
    
    |SI UID:si22 X:65 Y:55 W:6 VIS:1 SHE:1 BGC:#B0C4DE FGC:#990000 EN:0
    
    |SI UID:si23 X:90 Y:55 W:6 VIS:1 SHE:1 BGC:#B0C4DE FGC:#990000 EN:0
             
    |BT UID:bt21 X:40 Y:55 W:8 H:3 BGC:#0030302d SBGC:#006e5b5b FGC:#00FFFFFF LOR:1 TXT:" " BTH:0 FSZ:2 FFA:"font6"
    
    |BT UID:bt22 X:65 Y:55 W:8 H:3 BGC:#0030302d SBGC:#006e5b5b FGC:#00FFFFFF LOR:1 TXT:" " BTH:0 FSZ:2 FFA:"font6"
    
    |BT UID:bt23 X:90 Y:55 W:8 H:3 BGC:#0030302d SBGC:#006e5b5b FGC:#00FFFFFF LOR:1 TXT:" " BTH:0 FSZ:2 FFA:"font6"
    
    |LB UID:lb21 X:40 Y:52 ALP:0 SHE:1 ROT:0 FGC:#FFFFFF FSZ:3 VIS:0 FFA:"font6" TXT:"-"
    
    |LB UID:lb22 X:65 Y:52 ALP:0 SHE:1 ROT:0 FGC:#FFFFFF FSZ:3 VIS:0 FFA:"font6" TXT:"-"
    
    |LB UID:lb23 X:90 Y:52 ALP:0 SHE:1 ROT:0 FGC:#FFFFFF FSZ:3 VIS:0 FFA:"font6" TXT:"-"
    
    |LB UID:lbsec3 X:5 Y:63 ALP:1 SHE:1 ROT:0 FGC:#FFFFFF FSZ:3.5 FFA:"font6" TXT:"Section-3"
    
    |SI UID:si31 X:40 Y:63 W:6 VIS:1 SHE:1 BGC:#B0C4DE FGC:#990000 EN:0
    
    |SI UID:si32 X:65 Y:63 W:6 VIS:1 SHE:1 BGC:#B0C4DE FGC:#990000 EN:0
    
    |SI UID:si33 X:90 Y:63 W:6 VIS:1 SHE:1 BGC:#B0C4DE FGC:#990000 EN:0
    
    |BT UID:bt31 X:40 Y:63 W:8 H:3 BGC:#0030302d SBGC:#006e5b5b FGC:#00FFFFFF LOR:1 TXT:" " BTH:0 FSZ:2 FFA:"font6"
    
    |BT UID:bt32 X:65 Y:63 W:8 H:3 BGC:#0030302d SBGC:#006e5b5b FGC:#00FFFFFF LOR:1 TXT:" " BTH:0 FSZ:2 FFA:"font6"
    
    |BT UID:bt33 X:90 Y:63 W:8 H:3 BGC:#0030302d SBGC:#006e5b5b FGC:#00FFFFFF LOR:1 TXT:" " BTH:0 FSZ:2 FFA:"font6"
    
    |LB UID:lb31 X:40 Y:60 ALP:0 SHE:1 ROT:0 FGC:#FFFFFF FSZ:3 VIS:0 FFA:"font6" TXT:"-"
    
    |LB UID:lb32 X:65 Y:60 ALP:0 SHE:1 ROT:0 FGC:#FFFFFF FSZ:3 VIS:0 FFA:"font6" TXT:"-"
    
    |LB UID:lb33 X:90 Y:60 ALP:0 SHE:1 ROT:0 FGC:#FFFFFF FSZ:3 VIS:0 FFA:"font6" TXT:"-"
    
    BSL UID:bsl2 X:0 Y:67 FGC:#78AB46 LEN:100 BTH:0.5
    
    |SL UID:sltim1 X:69 Y:35 W:55 H:0.8 RAD:0.5 HAH:6 HAW:6 VAL:25 FGC:#78AB46 SFGC:#FFFF00 LVAL:1 HVAL:60
    
    |LB UID:lbtim1 X:5 Y:35 ALP:1 SHE:1 ROT:0 FGC:#FFFFFF FSZ:3.5 FFA:"font6" TXT:"Timer"
    
    |LB UID:lbtimv1 X:20 Y:35 ALP:1 SHE:1 ROT:0 FGC:#FFFFFF FSZ:3 FFA:"font6" TXT:"25"
    
    |LB UID:lbtimt1 X:27 Y:35 ALP:1 SHE:1 ROT:0 FGC:#FFFFFF FSZ:3 FFA:"font6" TXT:"min"
    
    |IM UID:imnight X:50 Y:92 W:25 H:25 ROT:0 SHE:0 IP:"Znight.jpg" VIS:1
    
    |BSL UID:bsl3 X:0 Y:82 FGC:#78AB46 LEN:100 BTH:0.5
     
    |TI UID:ti1 X:40 Y:74.5 W:75 ROT:0 SHE:1 VIS:0 BGC:#30302d FGC:#FFFFFF SHE:1 FSZ:5 FFA:"font6" RAD:1 BTH:0.5 TXT:"1112,2123,3234,2"
    
    |BT UID:btcoff X:90 Y:74.5 W:20 H:5 VIS:0 BGC:#30302d SBGC:#6e5b5b FGC:#FFFFFF LOR:1 TXT:"ON/OFF" BTH:0 FFA:"font6" FSZ:3.5
    
    |BT UID:btcycle X:50 Y:74.5 W:35 H:6 BGC:#30302d SBGC:#6e5b5b FGC:#FFFFFF LOR:1 TXT:"Cycle" BTH:0 FFA:"font6" FSZ:3.5
    
    |CB UID:temp_indicator X:18 Y:92 W:25 CE:0 HAW:0 FGC:#cd1e2c SFGC:#FFFF00 BGC:#35444d  BTH:2 LVAL:15 HVAL:40 VAL:24
    
    |CB UID:hum_indicator X:82 Y:92 W:25 CE:0 HAW:0 SFGC:#3063A5 BGC:#35444d BTH:2 LVAL:0 HVAL:100 VAL:25
    
    |LB UID:temp_value X:18 Y:92  FSZ:4 FFA:"font6" TXT:"22°C" FGC:#cd1e2c
    
    |LB UID:hum_value X:82 Y:92  FSZ:4 FFA:"font6" TXT:"55%" FGC:#80c5de
    
    |CH UID:temp_chart X:50 Y:74.5 W:99 H:15 VIS:0 BTH:0 XMA:6 YMA:3 XTC:4 YTC:5 YHI:50 BGC:#454546 FGC:#FFFFFF RAD:1 CHN:"Temperature(°C)" FFA:"font0" FSZ:1.2
    
    |CH UID:hum_chart X:50 Y:74.5 W:99 H:15 VIS:0 BTH:0 XMA:6 YMA:3 XTC:4 YTC:5 YHI:100 BGC:#454546 FGC:#FFFFFF RAD:1 CHN:"Humidity(%)" FFA:"font0" FSZ:1.2
    
    |BT UID:bttemp X:18 Y:92 BGC:#0030302d SBGC:#006e5b5b FGC:#00FFFFFF LOR:1 TXT:"Temp" BTH:0 FFA:"font6" FSZ:2.5
    
    |BT UID:bthum X:82 Y:92 BGC:#0030302d SBGC:#006e5b5b FGC:#00FFFFFF LOR:1 TXT:"Hum" BTH:0 FFA:"font6" FSZ:2.5
    
    // hide load screen (show GUI)
    @hls 250
    

    Note that the images can also be loaded at run-time (within the GUI-O application) from the specified url. For example:

    |IM UID:im1 X:50 Y:15 W:100 H:100 ROT:0 SHE:0 IP:"https://i.imgur.com/3Bk5WxR.jpg"
    

    This invokes the GUI-O application downloader and displays the image after successful transfer. Downloaded images are saved locally. All subsequent initialization requests trigger loading such images from the local resource, even if the image path is specified as an url.

    Drawing chart data, reacting to user input and updating widgets is thoroughly described in the GUI-O developer manual in the "Widgets API" section.

    Feel free to leave any questions or comments below.

    posted in Examples
  • Access control example

    Hello and welcome to the GUI-O "Access control" example!

    NOTE: All images are copyrighted and should not be used for commercial purposes!

    This example shows how to control access to a (secure) physical location. The example is applicable for all connection types supported by the GUI-O application (i.e., Bluetooth, Bluetooth LE, IoT and Usb).

    The final result is shown below. During the example, you can always consult the GUI-O developer manual for more information.

    result.jpg

    First, the following image must be copied onto your Android device under /Android/data/com.guio.guioapp/files/Pictures

    RFID5.png

    Alternatively, the image can be loaded during run-time within the GUI-O application by specifying the corresponding url path in the parameter list (see the code example below).

    NOTE: Since Android 11, the /Android/data/com.guio.guioapp/files/Pictures path is no longer accessible directly from the device due to Google's security restrictions. You can, however, access the path by connecting the Android device to a PC and transfer the image.

    The GUI initialization procedure is shown in the following code block:

    // set ASR (aspect ratio) parameter of the "development" device (see "Developer mode" section in the manual)
    @guis BGC:#051029 ASR:0.449671
    
    // show load screen - hide GUI, clear widgets and hardware objects and set display settings
    @sls
    @cls                                          
    @clh
    
    // create widgets and hardware instances specifying custom parameters
    // |IM - image
    // |LB - label
    // |BT - button
    // |SI - status indicator
    // |RTC - real time clock
    // |EXTF - external file writer
    |IM UID:imx X:50 Y:28 W:95 H:50 ROT:0 SHE:0 VIS:1 OPA:1 SCM:3 IP:"RFID5.png"
    
    |LB UID:lb1 X:10 Y:6 ALP:1 ROT:0 SHE:1 FGC:#FFFFFF FSZ:5 FFA:"font6" TXT:"ACCESS"
    
    |LB UID:lb2 X:75 Y:6 ROT:0 SHE:1 FGC:#FFFFFF FSZ:5 FFA:"font6" TXT:"CONTROL"
     
    |BT UID:bt3 X:75 Y:91 W:35 H:8 ROT:0 RAD:2 BGC:#3c3939 FGC:#11a8d0 FSZ:5 FFA:"font6" TXT:"Open"
    
    |LB UID:lb3 X:50 Y:78 ROT:0 SHE:1 FGC:#FFFFFF FSZ:2.5 TXT:"543212345123" FFA:"font5"
    
    |LB UID:lb4 X:50 Y:61 ROT:0 SHE:1 FGC:#FFFF00 ALP:0 FSZ:7 FFA:"font6" TXT:"James"
    
    |LB UID:lb5 X:53 Y:50 ROT:0 SHE:1 FGC:#FFFFFF ALP:1 FSZ:3 FFA:"font6" TXT:"2021-03-25"
    
    |LB UID:lb6 X:77 Y:50 ROT:0 SHE:1 FGC:#FFFFFF ALP:1 FSZ:3 FFA:"font6" TXT:"21:35:59"
    
    |LB UID:lb7 X:75 Y:78 ROT:0 SHE:1 FGC:#FFFFFF FSZ:2.5 TXT:"24" FFA:"font5"
    
    |RTC UID:rtc1 HID:rtc RTCR:0.1 RTCE:1 RTCF:"yy-MM-dd hh:mm:ss"
    
    |SI UID:si1 X:50 Y:70 W:5 BGC:#B0C4DE FGC:#009900 EN:0
    
    |LB UID:lbpis X:50 Y:55 ROT:0 SHE:1 FGC:#FFFFFF FSZ:4 TXT:"My home door" FFA:"font6"
    
    |EXTF UID:extf1 HID:extf FAC:0 FNA:"RFID-1.CSV"
    
    // hide load screen (show GUI)
     @hls 250
    

    Note that the image can also be loaded at run-time (within the GUI-O application) from the specified url. For example:

    |IM UID:imx X:50 Y:28 W:95 H:50 ROT:0 SHE:0 VIS:1 OPA:1 SCM:3 IP:"https://i.imgur.com/5R57tKc.png"
    

    This invokes the GUI-O application downloader and displays the image after successful transfer. Downloaded images are saved locally. All subsequent initialization requests trigger loading such images from the local resource, even if the image path is specified as an url.

    Reacting to user input and updating widgets (and hardware objects) is thoroughly described in the GUI-O developer manual in the "Widgets API" section.

    Feel free to leave any questions or comments below.

    posted in Examples
  • Central heating example

    Hello and welcome to the GUI-O "Central heating" example!

    NOTE: All images are copyrighted and should not be used for commercial purposes!

    This example shows how to control and monitor temperature of your central heating system. The example is applicable for all connection types supported by the GUI-O application (i.e., Bluetooth, Bluetooth LE, IoT and Usb).

    The final result is shown below. During the example, you can always consult the GUI-O developer manual for more information.

    result.jpg

    First, the following image must be copied onto your Android device under /Android/data/com.guio.guioapp/files/Pictures

    CentHeat.jpg

    Alternatively, the image can be loaded during run-time within the GUI-O application by specifying the corresponding url path in the parameter list (see the code example below).

    NOTE: Since Android 11, the /Android/data/com.guio.guioapp/files/Pictures path is no longer accessible directly from the device due to Google's security restrictions. You can, however, access the path by connecting the Android device to a PC and transfer the image.

    The GUI initialization procedure is shown in the following code block:

    // set ASR (aspect ratio) parameter of the "development" device (see "Developer mode" section in the manual)
    @guis BGC:#000000 ASR:0.449671
    
    // show load screen - hide GUI, clear widgets and hardware instances and set display settings
    @sls
    @cls    
    @clh
    
    // create widgets specifying custom parameters
    // |IM - image
    // |LB - label
    // |CB - circular bar
    // |TG - toggle
    // |SL - slider
    |IM UID:im1 X:50 Y:17 W:100 H:100 ROT:0 SHE:0 IP:"CentHeat.jpg"
    
    |LB UID:lb1 X:40 Y:31 ROT:0 SHE:1 FGC:#FFFFFF FSZ:4 ALP:1 FFA:"font6" TXT:"Central Heating System"
    
    |CB UID:cb1 X:50 Y:82 W:50 ROT:0 SHE:1 BGC:#585A60 FGC:#6D9DC5 VAL:25 LVAL:1 HVAL:200 STA:-245 ENA:65 BTH:4 SHN:0 NC:#A0A0A4 NT:0.3 CE:1 SHT:0 XTC:10 FSZ:0.1 UD:1 HAW:7 HAH:7
    
    |TG UID:tgt X:50 Y:72 W:15 H:1.5 ROT:270 SHE:1 BGC:#585A60 FGC:#6D9DC5 EN:1 HAW:7 HAH:7 RAD:0.7
    
    |LB UID:lbsl X:50 Y:82 SHE:1 ROT:0 SHE:1 FGC:#FFFFFF FSZ:3.5 FFA:"font6" TXT:"Timer"
    
    |LB UID:lbtim X:50 Y:85 SHE:1 ROT:0 SHE:1 FGC:#FFFFFF FSZ:3.5 FFA:"font6" TXT:"35" 
    
    |LB UID:lbst X:5 Y:7 SHE:1 ROT:0 SHE:1 ALP:1 FGC:#FFFFFF FSZ:4 FFA:"font6" TXT:"Temperature" 
    
    |LB UID:lbstn X:50 Y:7 SHE:1 ROT:0 SHE:1 ALP:1 FGC:#FFFFFF FSZ:4 FFA:"font6" TXT:"40°"
    
    |TG UID:tg1 X:80 Y:40 W:15 H:1.8 ROT:180 SHE:1 BGC:#585A60 FGC:#148F77 EN:1 HAW:6 HAH:6 RAD:1
    
    |TG UID:tg2 X:80 Y:50 W:15 H:1.8 ROT:180 SHE:1 BGC:#585A60 FGC:#148F77 EN:1 HAW:6 HAH:6 RAD:1
    
    |TG UID:tg3 X:80 Y:60 W:15 H:1.8 ROT:180 SHE:1 BGC:#585A60 FGC:#148F77 EN:1 HAW:6 HAH:6 RAD:1
    
    |SL UID:sltemp X:20 Y:50 W:60 H:10 RAD:0 ROT:270 HAH:0 HAW:0 VAL:35 FGC:#751601 SFGC:#FFFF00 LVAL:1 HVAL:60
    
    |LB UID:lbstn1 X:20 Y:50 SHE:1 ROT:0 SHE:1 ALP:0 FGC:#FFFFFF FSZ:4 FFA:"font6" TXT:"40°"
    
    |SI UID:si1 X:65 Y:40 W:5 VIS:1 ROT:0 BGC:#585A60 FGC:#922B21 SHE:1 EN:1
    
    |SI UID:si2 X:65 Y:50 W:5 VIS:1 ROT:0 BGC:#585A60 FGC:#922B21 SHE:1 EN:1
    
    |SI UID:si3 X:65 Y:60 W:5 VIS:1 ROT:0 BGC:#585A60 FGC:#922B21 SHE:1 EN:1
    
    |LB UID:lbs1 X:50 Y:40 SHE:1 ROT:0 SHE:1 FGC:#FFFFFF FSZ:3.5 FFA:"font6" TXT:"Oven"
    
    |LB UID:lbs2 X:50 Y:50 SHE:1 ROT:0 SHE:1 FGC:#FFFFFF FSZ:3.5 FFA:"font6" TXT:"Pump"
    
    |LB UID:lbs3 X:50 Y:60 SHE:1 ROT:0 SHE:1 FGC:#FFFFFF FSZ:3.5 FFA:"font6" TXT:"Floor"
    
    |LB UID:lbt1 X:20 Y:32 ROT:0 ALP:0 SHE:1 VIS:0 FGC:#FFFFFF FSZ:1.8 TXT:"--"
    
    // hide load screen (show GUI)
    @hls 250
    

    Note that the image can also be loaded at run-time (within the GUI-O application) from the specified url. For example:

    |IM UID:im1 X:50 Y:17 W:100 H:100 ROT:0 SHE:0 IP:"https://i.imgur.com/xq5fJQq.jpg"
    

    This invokes the GUI-O application downloader and displays the image after successful transfer. Downloaded images are saved locally. All subsequent initialization requests trigger loading such images from the local resource, even if the image path is specified as an url.

    Reacting to user input and updating widgets is thoroughly described in the GUI-O developer manual in the "Widgets API" section.

    Feel free to leave any questions or comments below.

    posted in Examples