Latest posts made by VNB

VNB

@VNB For what it is worth in the original code (above) if I replace the incomplete/incorrect instruction

sendMsg("@brightness VIS:1 VAL:val\r\n");

with the following

sendMsg("@brightness VIS:1 VAL:"+ String(val) + "\r\n");

then everything works and the CB knob does NOT jump back to 100% and all is well.

VNB

@gammda Hi gammda,

I’m not sure what you mean. There is nothing listed under “Try this”
but thank you.
Vince

VNB

@kl3m3n
Here are the test results you requested. Everything looks normal to me and there does not appear to be any reason for the CB control to snap back to 100% but it always does.

1.) Reset Nano, and serial prints:
Bluetooth device active, waiting for connections...

2.) Start GUI on phone and serial prints:
Connected!

3.) Click large center connect button of GUI on phone and serial prints:
Parsing . . .
GUI-O app is requesting INITIALIZATION!
and phone displays the Light Off image

4.) Click TAP ME! and serial prints:
Parsing . . .
GUI-O app is requesting LIGHT ON!
Just set CB to 100%
and phone displays Light On image and CB control at 100%.

5.) Tap near the center of CB control and when release the serial prints:
Parsing . . .
GUI-O app requesting Brightness change!
GUI-O app is requesting LIGHT BRIGHTNESS: 45
and the phone displays the CB control at 45% as long as I hold it but when I
release it the LED reduces brightness like it should but the CB control snaps back to 100%.

6.) Trying a 2nd time, tap lower on CB control and when release the serial prints:
Parsing . . .
GUI-O app requesting Brightness change!
GUI-O app is requesting LIGHT BRIGHTNESS: 16
and the phone displays the CB control at 16% as long as I hold it but
when I release it the LED reduces brightness but the CB control snaps back to 100%.

7.) Trying a 3rd time, tap low on CB control and when release the serial prints:
Parsing . . .
GUI-O app requesting Brightness change!
GUI-O app is requesting LIGHT BRIGHTNESS: 5
and the phone displays the CB control at 5% as long as I hold it but
when I release it the LED reduces brightness but the CB control snaps back to 100%.

8.) Exit the GUI on the phone and serial prints:
Disconnected!

9.) Using PC Explorer open in_messages.log file to get:

[2023-09-20T09:13:57.992] @init
[2023-09-20T09:13:57.996] @cls
[2023-09-20T09:13:58.023] @guis BGC:#FFFFFF
[2023-09-20T09:13:58.180] |LB UID:title X:50 Y:15 TXT:"Simple light switch" FFA:"font8" FSZ:3.5
[2023-09-20T09:13:58.239] |LB UID:tap_me X:50 Y:70 TXT:"TAP ME!" FFA:"font8" FSZ:3 FFA:"font5"
[2023-09-20T09:13:58.295] |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
[2023-09-20T09:13:58.340] |IM UID:light_off X:50 Y:50 IP:"https://i.imgur.com/3VbsS0Z.png" VIS:1
[2023-09-20T09:13:58.395] |IM UID:light_on X:50 Y:50 IP:"https://i.imgur.com/gNdck9A.png" VIS:0
[2023-09-20T09:14:05.913] @light_off 1
[2023-09-20T09:14:05.913] @light_off VIS:0
[2023-09-20T09:14:05.943] @light_on VIS:1
[2023-09-20T09:14:06.004] @brightness VIS:1 VAL:100
[2023-09-20T09:14:12.333] @brightness 45.8
[2023-09-20T09:14:15.932] @brightness 16.7
[2023-09-20T09:14:19.772] @brightness 5.4

To me the Log shows everything is working correctly but the CB control on the phone always jumps back to 100%.
I have 14 sec video of above but it won't let me upload it (too big).

Hope this helps
Vince

VNB

I agree something strange is happening. As suggested I added a bunch of Serial prints but the program flow looks correct to me.

For example I added code to print “Just set CB to 100%” as shown below:
sendMsg("@light_off VIS:0\r\n");
sendMsg("@light_on VIS:1\r\n");
sendMsg("@brightness VIS:1 VAL:100\r\n");
Serial.println("Just set CB to 100%");
which like you said is the only instruction where the CB slider gets set back to 100.

However when I touch CB (at 50% for example) it changes the brightness and prints
GUI-O app requesting Brightness change!
GUI-O app is requesting LIGHT BRIGHTNESS: 50
just like it should but it never prints
Just set CB to 100%
even though the CB knob instantly jumps back to 100 when I release it.

When I toggle the LED off it prints:
GUI-O app is requesting LIGHT OFF!
and when I toggle the LED back on it prints:
GUI-O app is requesting LIGHT ON!
Just set CB to 100%
just like it should. The problem persists and is puzzling.

Here is another symptom which may help. When I add the “fix” instruction
sendMsg("@brightness VIS:1 VAL:val\r\n");
then the first time I change the brightness the CB knob always jumps back to 100 but from then on it works correctly and the knob remains at the position I select. If I toggle the LED off and back on then again the first time I use the CB control the knob always jumps back to 100 but from then on it works correctly.

CONCLUSION: When the CB knob incorrectly jumps back to 100 the only instruction that sets CB back to 100 never gets executed. Is there any “hidden” code that gets executed, maybe parts of the Event Handlers or something?

Let me know if there is a specific test you would like me to try.

Thank you, Vince

VNB

YES, it works. Thank you so much!

There were two minor problems.
1.) The Slider Control knob always stayed at 100% even if it is set to a low brightness. That was fixed by adding the following instruction in the "led drive" section.
sendMsg("@brightness VIS:1 VAL:val\r\n");

2.) Once the brightness is adjusted then the Nano Yellow LED STAYS on at the selected brightness even though the "on" and "off" light bulb image toggles okay and Serial Monitor correctly displays "GUI-O app is requesting LIGHT ON!" and "GUI-O app is requesting LIGHT OFF!". That was fixed by always keeping the 'ledPin' in the 'analog' mode by changing digitalWrite(ledPin, HIGH); to analogWrite(ledPin, 0); and digitalWrite(ledPin, LOW); to analogWrite(ledPin, 255);

The modified code is below.

Thanks again for GREAT service!
Vince

/*
  GUI-O BLE example (Nano 33 BLE) original file is "ButtonLED_GUI-O.ino"
  The 'Button LED' example found in 'File-Examples-ArdunioBLE-Peripheral-ButtonLED' was
  modified by kl3m3n to work with the Nano 33 BLE Sense board and ArduinoBLE.h library.
  
  Operation:
    * Click TAP HERE to toggle Nano 33 Yellow LED On/Off.
    * When the LED is ON a Slider control is displayed and will adjust the Brightness of LED. 
    * Brightness is not remembered so toggling the LED Off and back On will always select 100% brightness.
*/

#include <ArduinoBLE.h>

const int ledPin = LED_BUILTIN; // set ledPin to on-board LED
const int maxMsgLength{256};

BLEService guioService("0000FFE0-0000-1000-8000-00805F9B34FB"); // create service

// create gui-o (string) characteristic and allow remote device to read and write
BLEStringCharacteristic guioCharacteristic("0000FFE1-0000-1000-8000-00805F9B34FB", BLERead | BLEWrite | BLENotify | BLEIndicate, maxMsgLength);

void setup() {
  Serial.begin(9600);
  while (!Serial);

  pinMode(ledPin, OUTPUT); // use the LED as an output

  // begin initialization
  if (!BLE.begin()) {
    Serial.println("starting Bluetooth® Low Energy module failed!");

    while (1);
  }

  // set the local name peripheral advertises
  BLE.setLocalName("GUI-O_BLE");
  // set the UUID for the service this peripheral advertises:
  BLE.setAdvertisedService(guioService);

  // add the characteristics to the service
  guioService.addCharacteristic(guioCharacteristic);

  // add the service
  BLE.addService(guioService);

  // assign event handlers for connected, disconnected to peripheral
  BLE.setEventHandler(BLEConnected, [](BLEDevice central) -> void {
    Serial.println("Connected!");
  });
  BLE.setEventHandler(BLEDisconnected, [](BLEDevice central) -> void {
    Serial.println("Disconnected!");
  });

  // assign event handlers for characteristic
  guioCharacteristic.setEventHandler(BLEWritten, parseGuioMsg);

  // start advertising
  BLE.advertise();

  Serial.println("Bluetooth® device active, waiting for connections...");
}

void loop() {
  // poll for Bluetooth® Low Energy events
  BLE.poll();
}

/***************************/
/* IMPLEMENT YOUR GUI HERE */
/***************************/
void sendMsg(const String &msg) {
  guioCharacteristic.writeValue(msg);
  delay(50);
}

void parseGuioMsg(BLEDevice central, BLECharacteristic characteristic) {
  const uint8_t* value = characteristic.value();
  const int length = characteristic.valueLength();

  const String msg(reinterpret_cast<const char*>(value), length);

  if(msg.startsWith("@init")) {
    Serial.println("GUI-O app is requesting INITIALIZATION!");

    // clear screen and set background
    sendMsg("@cls\r\n");
    sendMsg("@guis BGC:#FFFFFF\r\n");
    delay(100);

    // initialize simple example GUI
    sendMsg("|LB UID:title X:50 Y:15 TXT:\"Simple light switch\" FFA:\"font8\" FSZ:3.5\r\n");
    sendMsg("|LB UID:tap_me X:50 Y:70 TXT:\"TAP ME!\" FFA:\"font8\" FSZ:3 FFA:\"font5\"\r\n");
    sendMsg("|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");
    sendMsg("|IM UID:light_off X:50 Y:50 IP:\"https://i.imgur.com/3VbsS0Z.png\" VIS:1\r\n");
    sendMsg("|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"
    sendMsg("@light_off VIS:0\r\n");
    sendMsg("@light_on VIS:1\r\n");
    sendMsg("@brightness VIS:1 VAL:100\r\n");

    // led enable
    analogWrite(ledPin, 255);
  }
  else if(msg.startsWith("@light_on")) {
    Serial.println("GUI-O app is requesting LIGHT OFF!");

    // "drive GUI-O app"
    sendMsg("@light_off VIS:1\r\n");
    sendMsg("@light_on VIS:0\r\n");
    sendMsg("@brightness VIS:0 VAL:0\r\n");

    // led disable
    analogWrite(ledPin, 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
        analogWrite(ledPin, static_cast<uint8_t>(val * 2.55));
        sendMsg("@brightness VIS:1 VAL:val\r\n");                 // Added to make CB show where I adjust brightness
      }            
    }    
  }  
}
``

VNB

Does anyone have example code using GUI-O with a Nano 33 BLE and the associated ArduinoBLE library?
The nineteen GUI-O Tutorials all use the ESP32 and different libraries and as a beginner I’m struggling to convert.

To get started I have successfully implemented the Arduino ButtonLED.ino example that uses the ArduinoBLE library.
https://github.com/arduino-libraries/ArduinoBLE/blob/master/examples/Peripheral/ButtonLED/ButtonLED.ino
And I can successfully send and receive info between the Nano 33 BLE board and my android phone using the “nRF Connect” app but now I want to use GUI-O app.

Per the GUI-O Manual I know I have to:
1.) detect when GUI-O sends the “@int” command.
2.) then send the GUI-O commands to create the desired widgets.
3.) then send and receive updates.

It is easy to create the desired interface using GUI-O Designer but how do I modify ButtonLED.ino to include the above steps using the ArduinoBLE library? I have tried many ways but keep getting compile errors with no clear explanation. No doubt I’m missing something simple.

Thank you in advance.

VNB

Your changes work great! THANK YOU for the quick response and new parameters in CB

VNB

Where can I find more details or examples using the CB widget? I have tried the Manual, Videos and Forms. I have questions like:

1.) The default CB specifies an IP: qrc:///gui/graphics/handle_icon.svg
but I can’t find that svg file anywhere on the internet. I assume it generates the round “knob” located on arc of the CB widget correct?

2.) Per the manual it is the “Handle image file” correct?

3.) Can I use “any” image file including png files if I’m not concerned about scaling?

4.) The HAW and HAH change the size of the knob but why doesn’t HAR do anything? It can even be set to zero with no affect.

5.) If I don’t want that “knob” just setting HAW or HAH to zero seems to work but is it better to set both to zero?

6.) If I make the Needle visible (SHN:1) and set the Needle Thickness to 3 (NT:3) the needle size is correct for my application but it has a very large center circle (where it pivots). Can I eliminate that circle or at least make it smaller?