Wifi and http modules bangle2

[MiguelIrusta]

Dear all,

Firstly if this topic is already anwered, sorry, but I have not found anything related. I would like to connect my bangle2 to my wifi network to send from my backend app messages to my bangle app via MQTT. I need this to make them be in the same net and be able to communicate with topics.
Any suggestion? Any other app that install those modules?

Many many thanks.
Miguel.

[gfwilliams]

Hi,

The Bangle.js 2 doesn't support Wifi so you're not going to be able to connect directly.

There are three options really:

• If you're using Gadgetbridge on your phone to push messages to Bangle.js, that provides the ability to do HTTP requests via your phone: https://banglejs.com/apps/?id=android&readme
• If you've got Home Assistant running at home, you can use BTHome to get data/messages from the Bangle to it really easily: https://www.espruino.com/BTHome (there are apps for it too)
• I did make a tool for a raspberry pi/etc a while back to allow you to get Bluetooth Espruino devices on MQTT: https://github.com/espruino/EspruinoHub (however it hasn't been maintained in a while and honestly BTHome is just much smoother and better supported now if that'll work for you)

[MiguelIrusta]

Many Thanks for your response!
Since then I have continued working just to write again when I have an improvement and not bothering all. I have developed a kotlin app to be installed in a mobile to work as a gateway with MQTT via WiFi. my first app run always in front and I saw the messages going and arriving to my backend in my computer, so it worked fine in that way. Then I tried to send a message from my back to the bangle, translating it in the app and the app running in background (and opens when a messages arrives). The part of going background worked, but it never arrives a message. I have tested and the function onGB never works, is like the events are not working, can anyone help me? My code is below:

let lastMessage = "";
let isAppVisible = false; // Track if app is currently visible
let originalApp = null; // Store the original app to return to

function showInitialPopup() {
  g.clear();
  g.setColor(0, 0, 0.8); // Fondo azul oscuro
  g.fillRect(0, 0, 176, 176);
  
  g.setColor(1, 1, 1); // Texto blanco
  g.setFont("6x8", 2);
  
  let text1 = "Pleez will run in";
  let text2 = "back plain now";
  let w1 = g.stringWidth(text1);
  let w2 = g.stringWidth(text2);
  
  g.drawString(text1, (176 - w1) / 2, 70);
  g.drawString(text2, (176 - w2) / 2, 90);
  
  g.flip();
  
  setTimeout(function() {
    goToBackground();
  }, 3000);
}

function goToBackground() {
  isAppVisible = false;
  if (originalApp) {
    load(originalApp);
  } else {
    load(); // Cargar la app por defecto (reloj)
  }
}

function showApp() {
  isAppVisible = true;
  redrawScreen();
}

function onGB(event) {
  let parsedEvent;
  
  if (typeof event === 'string') {
    try {
      parsedEvent = JSON.parse(event);
      console.log("JSON parseado:", parsedEvent);
    } catch (e) {
      console.log("Error parseando JSON:", e);
      console.log("Mensaje recibido:", event);
      return;
    }
  } else {
    parsedEvent = event;
  }
  
  if (parsedEvent.t === "notify") {
    lastMessage = parsedEvent.msg;
    console.log("Mensaje procesado:", parsedEvent.msg);
    
    if (parsedEvent.msg === "FinTimer") {
      console.log("FinTimer recibido, ocultando app");
      goToBackground();
      return;
    }
    
    console.log("Mostrando app, isAppVisible:", isAppVisible);
    if (!isAppVisible) {
      showApp();
    } else {
      redrawScreen(); // Si ya está visible, solo redibujar
    }
  }
}

function redrawScreen() {
  g.clear(); // Limpiar la pantalla
  g.setColor(0, 0, 1); // Fondo azul
  g.fillRect(0, 0, 176, 176);
  
  g.setColor(1, 1, 1); 
  g.setFont("6x8", 2);
  g.drawString("Señal: " + lastMessage, 10, 10);
  
  // Botón 1: Ok (verde)
  g.setColor(0, 1, 0); // Fondo verde
  g.fillRect(10, 80, 86, 166); // 88 píxeles de ancho
  
  // Botón 2: Postpone (rojo)
  g.setColor(1, 0, 0); // Fondo rojo
  g.fillRect(90, 80, 166, 166);
  
  g.setColor(1, 1, 1); // Texto blanco
  g.setFont("6x8", 3); // Fuente clara para los botones
  g.drawString("Ok", 20, 110); // Centrado en el botón
  g.drawString("Post", 95, 110); // Centrado en el botón
  
  g.flip(); // Actualizar pantalla
}

function buttonFeedback(x1, x2, y1, y2, isOkButton) {
  g.setColor(isOkButton ? 0 : 0.5, isOkButton ? 0.5 : 0, 0); 
  g.fillRect(x1, y1, x2, y2);
  g.setColor(1, 1, 1); // Texto blanco
  g.setFont("6x8", 3);
  g.drawString(isOkButton ? "Ok" : "Post", x1 + 10, y1 + 30);
  g.flip();
}

Bangle.on("touch", function (button, xy) {
  if (!isAppVisible) return;
  
  console.log("Toque en: x=" + xy.x + ", y=" + xy.y);
  
  if (xy.y >= 80 && xy.y <= 166) {
    let message;
    let isOkButton = false;
    
    if (xy.x >= 10 && xy.x <= 86) {
      message = "Ok";
      isOkButton = true;
    } else if (xy.x >= 90 && xy.x <= 166) {
      message = "Postpone";
    }
    
    if (message) {
      console.log("Botón pulsado:", message);
      
      buttonFeedback(
        isOkButton ? 10 : 90,
        isOkButton ? 86 : 166,
        80,
        166,
        isOkButton
      );
      
      setTimeout(function () {
        Bluetooth.println(JSON.stringify({ t: "notify", msg: message }));
        
        setTimeout(function() {
          goToBackground();
        }, 500);
        
      }, 200);
      
    } else {
      console.log("Toque fuera de los botones"); 
    }
  } else {
    console.log("Toque fuera del área de los botones"); 
    // Si tocan fuera de los botones, también ocultar la app
    goToBackground();
  }
});

if (typeof global.currentApp !== 'undefined') {
  originalApp = global.currentApp;
}

// Inicializar el manejador de eventos
GB = onGB; // Registrar el manejador de eventos

// Mostrar popup inicial al arrancar
showInitialPopup();

NRF.setAdvertising({}, { connectable: true });

// FIXED: Properly disable activity tracking to avoid interference
// Only use valid Bangle.setOptions parameters
Bangle.setOptions({ 
  hrmPollInterval: 0  // Disable heart rate monitoring
});

// Stop step counting and other activity tracking
if (Bangle.setStepCount) Bangle.setStepCount(0);

// Remove any existing activity event listeners to prevent interference
Bangle.removeAllListeners('step');
Bangle.removeAllListeners('health');
Bangle.removeAllListeners('HRM'); 

[gfwilliams]

Maybe you could try pasting the GB command you're trying to send into the Web IDE and then you could see if any errors/messages are written to the console? Maybe you could give an example of the GB command?

I've got to say though I'm not entirely sure how this app is supposed to automatically start itself? Do you have some separate boot code you haven't pasted up?

Also just so you know, if you highlight your code and press the <> code formatting button above the edit box, your code will be formatted properly so it's easier to read

[MiguelIrusta]

No no, the app is started manually the first time, and then run until disconnected. The main problem is that if I connect the webIDE I cannot send the command via app because connects also by Bluetooth. I send messages with t=notify and the text is the message. Sorry for the code style, it is terrific. Thanks again, I have tried a lot and not achieving the last step is frustrating! El mar, 3 jun 2025, 13:46, Gordon Williams ***@***.***> escribió:

…

Maybe you could try pasting the GB command you're trying to send into the Web IDE and then you could see if any errors/messages are written to the console? Maybe you could give an example of the GB command? I've got to say though I'm not entirely sure how this app is supposed to automatically start itself? Do you have some separate boot code you haven't pasted up? Also just so you know, if you highlight your code and press the <> code formatting button above the edit box, your code will be formatted properly so it's easier to read — Reply to this email directly, view it on GitHub <#7757 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AKNROH5GCQ2QA77DJV7C2FL3BWDKZAVCNFSM6AAAAAB5JPAIZKVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTGMZVGQ4DONI> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[gfwilliams]

My point is that if you know what command your app is sending, you should be able to paste that exact same command in to the REPL on the Web IDE and so mirror what your app is sending - and maybe that will help somehow?

So for instance if I send GB({t:"notify",msg:"test"}) it should do something?

As far as I can see when running your code I get a Pleez will run in back plain now message and 3 secs later it reloads the clock (and so your code won't be running), because of:

setTimeout(function() {
    goToBackground();
  }, 3000);

If I load the code and send GB({t:"notify",msg:"test"}) within those 3 seconds your message is displayed - but always after 3 seconds it reloads the main clock?

A few things:

• You can use E.showMessage to show messages
• For center alignment, you can just use g.setFontAlign(0,0)
• in your onGB function you shouldn't need the if (typeof event === 'string') part - unless your code that sends it is encasing the data in a string, which it shouldn't really as it'll cause errors when running normal Gadgetbridge stuff

[MiguelIrusta]

Hello again. I have been working based in what you suggested me and you were right, going background was disabling the GB. I have developed a new version that buzzes when a message arrives and puts a simple clock while waiting. It is not important, but I would like to share my code just in case someone wants to run an app in background.

let lastMessage = "";
let isAppVisible = false;
let hideTimeout = null;
let clockInterval = null; // Single declaration at the top

function showInitialPopup() {
  g.clear();
  g.setColor(0, 0, 0.8); // Fondo azul oscuro
  g.fillRect(0, 0, 176, 176);
  
  g.setColor(1, 1, 1); // Texto blanco
  g.setFont("6x8", 2);
  g.setFontAlign(0, 0); // Centrar automáticamente
  
  g.drawString("App ready", 88, 80);
  g.drawString("Waiting for signals...", 88, 100);
  
  g.flip();
  
  setTimeout(function() {
    hideApp();
  }, 2000);
}

function hideApp() {
  isAppVisible = false;
  showClock();
  console.log("App hidden but still active");
}

function showClock() {
  if (clockInterval) {
    clearInterval(clockInterval);
    clockInterval = null;
  }
  
  function updateClock() {
    if (isAppVisible) {
      if (clockInterval) {
        clearInterval(clockInterval);
        clockInterval = null;
      }
      return; // No actualizar si la app está visible
    }
    
    let now = new Date();
    let hours = now.getHours().toString();
    if (hours.length < 2) hours = "0" + hours;
    let minutes = now.getMinutes().toString();
    if (minutes.length < 2) minutes = "0" + minutes;
    let seconds = now.getSeconds().toString();
    if (seconds.length < 2) seconds = "0" + seconds;
    
    g.clear();
    g.setColor(0, 0, 0); // Fondo negro
    g.fillRect(0, 0, 176, 176);
    
    // Hora principal
    g.setColor(1, 1, 1);
    g.setFont("Vector", 30);
    g.setFontAlign(0, 0);
    g.drawString(hours + ":" + minutes, 88, 70);
    
    g.setFont("Vector", 18);
    g.drawString(seconds, 88, 100);
    
    g.setColor(0, 0.5, 1);
    g.setFont("6x8", 1);
    g.drawString("App Active", 88, 140);
    
    g.flip();
  }
  
  updateClock();
  
  clockInterval = setInterval(updateClock, 1000);
}

function showApp() {
  isAppVisible = true;
  
  if (clockInterval) {
    clearInterval(clockInterval);
    clockInterval = null;
  }
  
  if (hideTimeout) {
    clearTimeout(hideTimeout);
    hideTimeout = null;
  }
  
  // CRITICAL: Ensure screen is unlocked and touchable
  Bangle.setLocked(false);
  
  redrawScreen();
  console.log("App shown - buttons available until pressed or FinTimer");
  
  // NO auto-hide timer - app stays visible until button pressed or FinTimer
}

function scheduleAutoHide(delay) {
  if (typeof delay === 'undefined') delay = 20000;
  
  if (hideTimeout) {
    clearTimeout(hideTimeout);
    hideTimeout = null;
  }
  
  hideTimeout = setTimeout(function() {
    if (isAppVisible) {
      hideApp();
    }
  }, delay);
}

function onGB(event) {
  console.log("GB event received:", event);
  
  if (event.t === "notify") {
    lastMessage = event.msg;
    console.log("Mensaje procesado:", event.msg);
    
    if (event.msg === "FinTimer") {
      console.log("FinTimer recibido, ocultando app");
      hideApp();
      return;
    }
    )
    try {
      Bangle.buzz(500);
      console.log("Vibration sent");
    } catch (e) {
      console.log("Vibration error:", e);
    }
    
    showApp();
  }
}

function redrawScreen() {
  // Force unlock before drawing
  Bangle.setLocked(false);
  
  g.clear();
  g.setColor(0, 0, 1); // Fondo azul
  g.fillRect(0, 0, 176, 176);
  

  g.setColor(1, 1, 1);
  g.setFont("6x8", 2);
  g.setFontAlign(-1, -1);
  

  let displayMsg = "Señal: " + lastMessage;
  if (g.stringWidth(displayMsg) > 156) {
    displayMsg = "Señal:\n" + lastMessage;
  }
  g.drawString(displayMsg, 10, 10);
  
  drawButtons();
  
  g.flip();
}

function drawButtons() {
  g.setColor(0, 0.8, 0);
  g.fillRect(10, 100, 86, 150);
  
  g.setColor(0.8, 0, 0);
  g.fillRect(90, 100, 166, 150);
  

  g.setColor(1, 1, 1);
  g.setFont("6x8", 3);
  g.setFontAlign(0, 0);
  g.drawString("OK", 48, 125);
  g.drawString("WAIT", 128, 125);
}

function buttonFeedback(isOkButton) {
  let x1 = isOkButton ? 10 : 90;
  let x2 = isOkButton ? 86 : 166;
  
  g.setColor(1, 1, 1); // Color blanco para feedback
  g.fillRect(x1, 100, x2, 150);
  
  g.setColor(0, 0, 0); 
  g.setFont("6x8", 3);
  g.setFontAlign(0, 0);
  g.drawString(isOkButton ? "OK" : "WAIT", isOkButton ? 48 : 128, 125);
  g.flip();
}


Bangle.on("touch", function (button, xy) {
  if (!isAppVisible) {
    console.log("App hidden - touch ignored");
    return;
  }
  
  console.log("Touch detected at: x=" + xy.x + ", y=" + xy.y);
  
  if (xy.y >= 100 && xy.y <= 150) {
    let message = null;
    let isOkButton = false;
    
    if (xy.x >= 10 && xy.x <= 86) {
      message = "Ok";
      isOkButton = true;
      console.log("OK button pressed!");
    } 

    else if (xy.x >= 90 && xy.x <= 166) {
      message = "Postpone";
      isOkButton = false;
      console.log("WAIT button pressed!");
    }
    
    if (message) {
      console.log("Sending message:", message);
      
      buttonFeedback(isOkButton);
      
      try {
        Bluetooth.println(JSON.stringify({ t: "notify", msg: message }));
        console.log("Bluetooth message sent successfully:", message);
        
        setTimeout(function() {
          console.log("Hiding app after button press");
          hideApp();
        }, 500);
        
      } catch (e) {
        console.log("Error sending Bluetooth message:", e);
      }
    } else {
      console.log("Touch outside button areas");
    }
  } else {
    console.log("Touch outside button area (y=" + xy.y + ")");
  }
});

setWatch(function() {
  if (isAppVisible) {
    hideApp();
  } else {
    showApp();
  }
}, BTN, { repeat: true, edge: "falling" });

GB = onGB;

NRF.setAdvertising({}, { connectable: true });

Bangle.setOptions({ 
  hrmPollInterval: 0,
  wakeOnBTN1: false, 
  wakeOnBTN2: true, 
  wakeOnBTN3: false,
  wakeOnTouch: true, 
  lockTimeout: 0,    
  backlightTimeout: 0,
  lcdPowerTimeout: 0  
});

Bangle.setLocked(false);

if (Bangle.setStepCount) Bangle.setStepCount(0);
Bangle.removeAllListeners('step');
Bangle.removeAllListeners('health');
Bangle.removeAllListeners('HRM');


console.log("App started");
showInitialPopup();`

Many thanks to Gordon Williams for his support. Have the chance to connect and have really useful help is just amazing!
Regards,
Miguel.