webbluetoothcg / demos Goto Github PK

View Code? Open in Web Editor NEW

607.0 607.0 184.0 24.68 MB

Demo applications showing off Web Bluetooth

Home Page: https://webbluetoothcg.github.io/demos/

License: Apache License 2.0

HTML 69.55% JavaScript 25.82% CSS 4.63%

demos's People

Contributors

Stargazers

Watchers

Forkers

beaufortfrancois scheib norulesjustfeels sowbug nimbleape why-not-sky toyoshim umaar jyasskin x343734282 tkybpp unhooked niallroche danhklein andogro katdiese apeltz msadakov cwilso digideskio itsmattshull aristotle-labs duvitech-llc fun-alex-alex2006hw harrisonpham f138150 michirusu henderorlando kfundarek ragingwind wonism emeth- lislis farsight-beijing akllka logan-lu 2947721120 quadrasaur 360fun yangchengwork janamsdn repoarchiver ifa6 esteblock boralad56 neetjn vallicgrr caiki cfree2000 mbuendia allenchen123 689 cyan-at honorforlee fritexvz vincega tmossi magneval sudiptochy riksilvap abruti geeky6 vaginessa abhisheksarmah ninnka manojsankey r6047736 skmsd98 luisvinicius167 itstalha shashwatsahay nputhiyadath jguiraud johnmaclaine triamri roemly me-mark alexandriamahaleo enyachoke cstratton alcloud meprasobh rrahar vinh84 loongchao josuebustos coinext czimerk kishansar abdurraufahmad kiichisugihara qutaojiao fernyang dominicmatthewteo msawired mayankja1n jeffkko wanfuckerbt alexlevy0 claudesoft

demos's Issues

Demos should link to their source

It'd be nice if https://webbluetoothcg.github.io/demos/playbulb-candle/ linked back to https://github.com/WebBluetoothCG/demos/tree/gh-pages/playbulb-candle so folks could find the source. Maybe we should use the Fork me on GitHub ribbons.

Can't connect to Dotti

I just purchased a Dotti and following instructions bluetooth-led-display but not able to connect to Dotti. Can you tell me what I'm doing wrong?

How to change the font style?

Can I adjust the font-style? Like bold, italic, underline, align-left and right, larger font size?

BT printer does not work properly

Hello @ALL,
I have organized this printer and would like to print receipts from my website.

The graphic printing does not work. I commented out the function sendImageData(), otherwise no printout will take place.
I can print normal letters but as soon as I use another character, e.g. a colon or several equal signs one after the other, the print will be interrupted or it will not be printed.

Does anyone have the problem, or has it already solved?

thanks

Christian

Not search BT devices

Demos not search BT devices but other WEB BT tests, on https://googlechrome.github.io/samples/web-bluetooth/device-info.html?allDevices=true
and chrome://bluetooth-internals/#adapter it's good.
video test https://youtube.com/shorts/8x7DELyqoJA

heart-rate-sensor demo don't work with Miband

Miband can act as heart-rate-sensor: enable 3rd party HR access in Gadgetbridge (or MiFit)

I got it to work:
start an Activity on the band
first connect Gadgetbridge (maybe MiFit also works, untested)
then connect web app in chrome android (click Scan button)

can't print a qrcode

Hi,

I'm trying to print a QRCode modifiying your Web Bluetooth Printer demo in: https://github.com/WebBluetoothCG/demos/tree/gh-pages/bluetooth-printer

I'm using script qrious from https://github.com/neocotic/qrious to generate a canvas with QRCODE.
Attach my html file:

<!DOCTYPE html>
<html>
<head>
    <title>QrCode Print Via Bluetooth</title>
    <script src="/qrious.min.js"></script>

</head>
<body>
    <canvas id="qr"></canvas>
    <br />
    <button onclick="onButtonClick()" style="height: 200px; width: 400px;">Imprimir por Bluetooth</button>

    <script>
        (function () {
            var qr = new QRious({
                element: document.getElementById('qr'),
                value: 'https://www.centauro.net'
            });
        })();

        var canvas = document.getElementById("qr");
        var context = canvas.getContext("2d");

        let imageData = context.getImageData(0, 0, canvas.width, canvas.height).data;

        var printCharacteristic;
        let index = 0;
        let data;

        async function connectToPrinter() {
            return new Promise(function (resolve) {
                navigator.bluetooth.requestDevice({
                    filters: [{ //Mostrar solo los dispositivos bluetooth que puedan imprimir.//000018f0 00001101
                        services: ['000018f0-0000-1000-8000-00805f9b34fb']
                    }]
                })
                    .then(device => {
                        //console.log('> Found ' + device.name);
                        //alert('Connecting to GATT Server...');
                        return device.gatt.connect();
                    })
                    .then(server => server.getPrimaryService("000018f0-0000-1000-8000-00805f9b34fb"))
                    .then(service => service.getCharacteristic("00002af1-0000-1000-8000-00805f9b34fb"))
                    .then(characteristic => {
                        // Cache the characteristic
                        printCharacteristic = characteristic; //Guardamos en la variable para poder imprimir de nuevo sin pedir autorización.
                    })
                    .then(() => { resolve() })
                    .catch(handleError);
            });
        }
        //****************************

        function getDarkPixel(x, y) {
            // Return the pixels that will be printed black
            let red = imageData[((canvas.width * y) + x) * 4];
            let green = imageData[((canvas.width * y) + x) * 4 + 1];
            let blue = imageData[((canvas.width * y) + x) * 4 + 2];
            return (red + green + blue) > 0 ? 1 : 0;
        }
        function getImagePrintData() {
            if (imageData == null) {
                alert('No image to print!');
                return new Uint8Array([]);
            }
            // Each 8 pixels in a row is represented by a byte
            let printData = new Uint8Array(canvas.width / 8 * canvas.height + 8);
            let offset = 0;
            // Set the header bytes for printing the image
            printData[0] = 29;  // Print raster bitmap
            printData[1] = 118; // Print raster bitmap
            printData[2] = 48; // Print raster bitmap
            printData[3] = 0;  // Normal 203.2 DPI
            printData[4] = canvas.width / 8; // Number of horizontal data bits (LSB)
            printData[5] = 0; // Number of horizontal data bits (MSB)
            printData[6] = canvas.height % 256; // Number of vertical data bits (LSB)
            printData[7] = canvas.height / 256;  // Number of vertical data bits (MSB)
            offset = 7;
            // Loop through image rows in bytes
            for (let i = 0; i < canvas.height; ++i) {
                for (let k = 0; k < canvas.width / 8; ++k) {
                    let k8 = k * 8;
                    
                    //  Pixel to bit position mapping
                    printData[++offset] = getDarkPixel(k8 + 0, i) * 128 + getDarkPixel(k8 + 1, i) * 64 +
                        getDarkPixel(k8 + 2, i) * 32 + getDarkPixel(k8 + 3, i) * 16 +
                        getDarkPixel(k8 + 4, i) * 8 + getDarkPixel(k8 + 5, i) * 4 +
                        getDarkPixel(k8 + 6, i) * 2 + getDarkPixel(k8 + 7, i);
                }
            }
            return printData;
        }
       
        String.prototype.toBytes = function () {
            var arr = []
            for (var i = 0; i < this.length; i++) {
                arr.push(this[i].charCodeAt(0))
            }
            return arr
        }
        //FIN ****************************
        function handleError(error) {
            alert(error);
        }

        function sendNextImageDataBatch(resolve, reject) {
            //alert("12312");
            // Can only write 512 bytes at a time to the characteristic
            // Need to send the image data in 512 byte batches
            if (index + 512 < data.length) {
                printCharacteristic.writeValue(data.slice(index, index + 512)).then(() => {
                    index += 512;
                    sendNextImageDataBatch(resolve, reject);
                })
                    .catch(error => reject(error));
            } else {
                // Send the last bytes
                if (index < data.length) {
                    printCharacteristic.writeValue(data.slice(index, data.length) + '\u000A\u000D').then(() => {
                        resolve();
                    })
                        .catch(error => reject(error));
                } else {
                    resolve();
                }
            }
        }
        function sendImageData() {
            index = 0;
            data = getImagePrintData();
            //alert(data);
            return new Promise(function (resolve, reject) {
                sendNextImageDataBatch(resolve, reject);
            });
        }
        async function onButtonClick() {
            if (printCharacteristic == null) {
                await connectToPrinter();
                sendImageData();
            }
            else {
                //impreme cuando ya tiene la impresora vinculada.
                sendImageData();
                
            }
        };
    </script>

</body>
</html>

When I call to printCharacteristic.writeValue in function sendNextImageDataBatch nothing happens in my printer that is the same than https://www.amazon.com/Version-AGPtek%C2%AE-Portable-Bluetooth-Wireless/dp/B00XL3DY2E
Soo many days frustated with it. I use your example to print text and don't have any issue.
Aslo try to print with this manual http://reliance-escpos-commands.readthedocs.io/en/latest/imaging.html for generate and print a QRCode with esc/pos native (not use a qrcode in canvas) but not works.

But also I want to create a canvas with my company site to print it for this reason wants to print a canvas and not use Esc/Pos codes.

Attach screen captures from my printer:

Thanks for your help in advance

Playbulb Demo Not Working

I grabbed a playbulb candle and tried the demo here on github but I keep receiving that there are no bluetooth devices around. I've tried it on my macbook and I've tried it on a nexus 7. Are there any steps I'm missing to get the demo to work?

Cache the characteristic

Pairing screen is showing at each entry to the page. Is there anything else about cashing?

bitwise operations

I'm confused about the bitwise operation happening here -> https://github.com/WebBluetoothCG/demos/blob/gh-pages/bluetooth-toy-bb8/index.html#L254.

Can you give just a brief summary. Thanks!

bluetooth-toy-plane blocked due to blacklisted service

bluetooth-toy-plane demo uses <platinum-bluetooth-device services-filter='["f000ffc0-0451-4000-b000-000000000000"]' but that UUID is blacklisted as # TI's Over-the-Air Download service.

This results in the page showing the error dialog "Could not connect to bluetooth device!"

Possible actions:

Does the toy advertize another UUID, or can we search by name instead? (I don't have a device)
Take down demo.

Device can't be found.

I got the airplane and set everything up, event with to the github demo page provided in the ReadMe, but my chromebook can't find the device. I've updated chromeOS and made sure web bluetooth is on. I'm able to pair with and play the bluetooth candle demo just fine. I keep getting the error DOMException: User cancelled the requestDevice() chooser.

Any help? Thanks!

Webusb version?

Hi! thank you for this project. Is there any chance the bluetooth-printer can work with webusb chrome api instead of bluetooth?

BLE Peripheral Simulator (android) source

Would it be possible to add the source to your BLE Peripheral Simulator for Android to the source tree?

Image not printing correctly on Android Chrome

Hello, the demo here works fine on chrome desktop. But when from Android it got mess up. And appear some random strings. Tested on Android 10 and 12. Search but cannot find a solution.

https://webbluetoothcg.github.io/demos/bluetooth-printer/

Bluetooth.js + SBrick.js

If you like you can add my project too: http://sbrick.360fun.net/ ;)

Link to https://github.com/monteslu/coolbeans

Probably in the README.

Demo for Eddystone configuration tool

Could you create demo for Eddystone configuration tool?

Like this service

https://github.com/ragingwind/node-eddystone-beacon-config

playbulb demo does not find the playbulb

Hi!

I tried the playbulb demo on my android Smartphone with Chrome, but it does not find any ble devices.

I also tried the nRf Connect App and could find the playbulb and the corresponding UUIDs to change the color. So it seems that the problem is somewhere in the code of the demo.

Any suggestions or ideas how to solve that?

Thank you!
Andreas

Printer not working

Hi guys

Just tested Bluetooth demo with the printer and it doesn't work.

I have enabled chrome experimental web platform feature
.
chrome://flags/#enable-experimental-web-platform-features

No device in list to pair when I tap print button.

Any advice?

Thank you

demos/playbulb-candle/sw.js doesn't update cache

Cache is set at install time and updates to web site are not then re-cached.

DOTTI is not available anymore. A DIY replacement is available

I like the LED Display demo. But the necessary display doesn't seem to be available anymore. So I built a cheap replacement for this webbluetooth demo:

https://github.com/harbaum/dotlite

Feel free to link to this from the demo.

Suggest renaming repo to something more distinctive

My usual pattern for cloning GitHub repos is this:

cd ~/Dropbox/src
git clone url-of-repo

In the case of this repo, this ends up putting demos among a set of distinctively named repositories. Yet demos is not distinctive.

How about web-bluetooth-demos instead?

Add myo-web-bluetooth.js

https://github.com/charliegerard/myo-web-bluetooth.js
https://twitter.com/Charlie__Gerard/status/861325838217879552

How to find which is the service UUID

Hello,

I am having troubles on understanding from where you got the service UUID:
services: ['000018f0-0000-1000-8000-00805f9b34fb']

As 0x18F0 is not listed on the https://www.bluetooth.com/specifications/assigned-numbers/service-discovery.

I would appreciate any thoughts on this.
Regards,

it not showing while scanning printer device in Chrome android mobile

This is for sample example ( https://dineshvasan.github.io/test/)
i have written for connecting bluetooth device for printing the text but it is not working. kindly check it whether i have made mistake in that code . kindly give me working solution for web bluetooth using service worker. i have referred all the website but it not working properly.

As per my requirement to access the web bluetooth print the text using service worker.
Kindly do the Needful
Printer Name : Epson
Printer Model : Epson TM-P20
`

Add ability to control intensity

I have a candle that I use for testing. Because it's usually on the battery runs out very fast. Could we add the ability to control the intensity so that the battery lasts longer?

@beaufortfrancois

Dotti API

Hi!

Thanks for the bluetooth-led-display Web Bluetooth demo. I recently bought a Dotti on eBay and was able to successfully use the code in the repo to connect to it. Great work! 👍

I'm creating this issue to ask for the API referenced at

demos/bluetooth-led-display/index.html

Line 410 in 7b7397d

* See http://wittidesign.com/en/developer/ for API.

Before creating this Issue, I reached out to Witti Design to request the API doc over a month ago, and have heard nothing. I also looked for the doc at archive.org and it is unavailable there too. This is my last hope to obtain the API doc. Do you happen to have a copy of the doc? If so, would it be possible to commit it to the repo so I can reference it as I extended the demo?

Thanks!

Oro

Add ability to change the name

Now that we know we can change the name using Characteristic 0xffff we should make use of it on the webpage!