SoifGo Complete Guide — HTML Bluetooth & Sensors Integration with WebView

📱 HTML Bluetooth & Sensors with SoifGo

🤖 Build Your Custom App Without Hard Coding!

Don't stress! You don't need to be an HTML or JavaScript expert to use this golden feature. Just copy this entire guide page (the text you're reading right now) and paste it into an AI assistant like DeepSeek or any other AI. Then, simply describe what you want in plain English, for example: "Create an HTML page with 4 directional buttons to control a robot, and display ultrasonic sensor data received via Bluetooth." The AI will generate the complete code for you!

📋 How to use it in SoifGo:

In SoifGo, create a new button, set its Behavior to Web, select Web Offline HTML, and tap Create.
Tap the Edit button, then choose Play.
In the Play screen, tap the button you just created, then open the left‑hand menu (top‑left) and select Edit.
You are now in the edit screen. You can manually Select All, delete everything, and Paste your code, or simply use the "Select All and Paste" option from the menu to do it all in one step. Wait a moment for the syntax highlighting to appear.
Wait until the code changes from solid black to colored (syntax highlighting has finished loading). Once it's ready, tap the Close (×) icon to exit the editor and see your custom app in action!

🎯 That's it! Ask the AI to build any app you want and run it inside SoifGo instantly.

SoifGo is the B4A bridge that handles Bluetooth communication and sensor data. The HTML pages inside WebView act as the B4A interface.

This guide explains how to:

✅ Send and receive Bluetooth data
✅ Activate and read sensors (Light, Movement, Magneto)
✅ Create custom UI with full control

🔵 1. Bluetooth - Send Data (WebView → SoifGo → Bluetooth)

This page allows the user to enter text and send it via Bluetooth. The data goes from the WebView to SoifGo, then to the connected Bluetooth device.

📄 html_bluetooth_send.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Send Command</title>

  <script type="text/javascript">
    function send_bluetooth() {
      var txt = document.getElementById("txt").value;
      // Call SoifGo Sub: html_bluetooth_rx(txt)
      window.soifgo.CallSub('html_bluetooth_rx', true, txt);
    }
  </script>
</head>

<body style="text-align:center; margin-top:50px; font-family:sans-serif;">
  <h3>📤 Send Command to Bluetooth</h3>
  <input type="text" id="txt" placeholder="Enter text...">
  <br><br>
  <button onclick="send_bluetooth()" style="padding:10px 30px; font-size:16px; background:#2196f3; color:white; border:none; border-radius:6px; cursor:pointer;">
    Send
  </button>
</body>
</html>

✅ How it works:

User types text in the input box.
Clicks the Send button.
JavaScript calls window.soifgo.CallSub('html_bluetooth_rx', true, txt).
SoifGo receives the text in its html_bluetooth_rx() Sub.
SoifGo sends the text to the connected Bluetooth device.

🔵 2. Bluetooth - Receive Data (Bluetooth → SoifGo → WebView)

This page displays data received from Bluetooth. SoifGo forwards incoming data to the WebView using JavaScript functions.

📄 html_bluetooth_recive.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <div id="output" style="font-size:20px;color:white;background:black;padding:20px;min-height:100vh;">
        waiting for data...
    </div>

    <script>
        // This function is called by SoifGo when Bluetooth data arrives
        function html_bluetooth_tx(data) {
            document.getElementById('output').innerHTML = data;
        }
        window.html_bluetooth_tx = html_bluetooth_tx;
    </script>
</body>
</html>

✅ How it works:

Bluetooth device sends data to SoifGo.
SoifGo calls html_bluetooth_tx(data) in the WebView.
JavaScript updates the page with the received data.

🟢 3. Sensor Data - Receive (Sensors → SoifGo → WebView)

This page displays data from 3 sensors:

Light - Light intensity sensor
Move X/Y - Movement/acceleration sensor (X and Y axis)
Magneto - Magnetic field sensor

⚠️ IMPORTANT: To activate sensors, you must call ALL THREE commands:

window.soifgo.CallSub('sensor_light');   // Activate light sensor
window.soifgo.CallSub('sensor_move');    // Activate movement sensor
window.soifgo.CallSub('sensor_magno');   // Activate magneto sensor

These 3 commands are called inside window.onload to auto-start sensors when page loads.

📄 html_sensor_recive.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <div id="light" style="font-size:20px;color:white;background:#333;padding:15px;margin:5px;border-radius:8px;">
        Light: waiting...
    </div>
    <div id="movex" style="font-size:20px;color:white;background:#444;padding:15px;margin:5px;border-radius:8px;">
        Move X: waiting...
    </div>
    <div id="movey" style="font-size:20px;color:white;background:#555;padding:15px;margin:5px;border-radius:8px;">
        Move Y: waiting...
    </div>
    <div id="magno" style="font-size:20px;color:white;background:#666;padding:15px;margin:5px;border-radius:8px;">
        Magneto: waiting...
    </div>

    <script>
        // Receiver functions - called by SoifGo when sensor data arrives
        function html_sensor_light(data) {
            document.getElementById('light').innerHTML = 'Light: ' + data;
        }
        function html_sensor_movex(data) {
            document.getElementById('movex').innerHTML = 'Move X: ' + data;
        }
        function html_sensor_movey(data) {
            document.getElementById('movey').innerHTML = 'Move Y: ' + data;
        }
        function html_sensor_magno(data) {
            document.getElementById('magno').innerHTML = 'Magneto: ' + data;
        }

        // Register functions to window so SoifGo can call them
        window.html_sensor_light = html_sensor_light;
        window.html_sensor_movex = html_sensor_movex;
        window.html_sensor_movey = html_sensor_movey;
        window.html_sensor_magno = html_sensor_magno;

        // Start sensors automatically when page loads
        window.onload = function() {
            if (window.soifgo) {
                // ✅ ALL THREE activation commands
                window.soifgo.CallSub('sensor_light');
                window.soifgo.CallSub('sensor_move');
                window.soifgo.CallSub('sensor_magno');
            }
        }
    </script>
</body>
</html>

✅ How it works:

3 activation commands in window.onload:
- window.soifgo.CallSub('sensor_light')
- window.soifgo.CallSub('sensor_move')
- window.soifgo.CallSub('sensor_magno')
These activate all three sensors when the page loads.
4 receiver functions registered in window:
- html_sensor_light(data) — receives light data
- html_sensor_movex(data) — receives move X data
- html_sensor_movey(data) — receives move Y data
- html_sensor_magno(data) — receives magneto data
SoifGo calls these functions when new sensor data arrives.
UI updates automatically — each function updates its corresponding div.

⬅ Back to Home