From 098a458c4aa701ee27c59daed50b85c84b0ff2ef Mon Sep 17 00:00:00 2001
From: Georgi Gerganov <ggerganov@gmail.com>
Date: Mon, 2 May 2022 19:08:07 +0300
Subject: [PATCH] Add "buttons" example

Simple web page to test talking buttons
---
 examples/CMakeLists.txt          |   1 +
 examples/buttons/CMakeLists.txt  |   4 +
 examples/buttons/README.md       |   3 +
 examples/buttons/index-tmpl.html | 232 +++++++++++++++++++++++++++++++
 4 files changed, 240 insertions(+)
 create mode 100644 examples/buttons/CMakeLists.txt
 create mode 100644 examples/buttons/README.md
 create mode 100644 examples/buttons/index-tmpl.html
diff --git a/examples/CMakeLists.txt b/examples/CMakeLists.txt
index b20b2e1..5cb7c09 100644
--- a/examples/CMakeLists.txt
+++ b/examples/CMakeLists.txt
@@ -83,6 +83,7 @@ endif()
 
 if (EMSCRIPTEN)
     add_subdirectory(ggwave-js)
+    add_subdirectory(buttons)
 else()
     add_subdirectory(ggwave-to-file)
 endif()
diff --git a/examples/buttons/CMakeLists.txt b/examples/buttons/CMakeLists.txt
new file mode 100644
index 0000000..64500c4
--- /dev/null
+++ b/examples/buttons/CMakeLists.txt
@@ -0,0 +1,4 @@
+set(TARGET buttons)
+
+configure_file(${CMAKE_CURRENT_SOURCE_DIR}/index-tmpl.html       ${CMAKE_RUNTIME_OUTPUT_DIRECTORY}/${TARGET}/index.html @ONLY)
+configure_file(${CMAKE_SOURCE_DIR}/bindings/javascript/ggwave.js ${CMAKE_RUNTIME_OUTPUT_DIRECTORY}/${TARGET}/ggwave.js COPYONLY)
diff --git a/examples/buttons/README.md b/examples/buttons/README.md
new file mode 100644
index 0000000..65d0e90
--- /dev/null
+++ b/examples/buttons/README.md
@@ -0,0 +1,3 @@
+# buttons
+
+Live demo: https://buttons.ggerganov.com
diff --git a/examples/buttons/index-tmpl.html b/examples/buttons/index-tmpl.html
new file mode 100644
index 0000000..99dc7f3
--- /dev/null
+++ b/examples/buttons/index-tmpl.html
@@ -0,0 +1,232 @@
+<!doctype html>
+<html lang="en-us">
+    <head>
+        <title>ggwave : buttons</title>
+    </head>
+    <body>
+        <div id="main-container">
+            Talking buttons tester:
+
+            <br><br>
+
+            <button onclick="onSend('RRR');">Red</button>
+            <button onclick="onSend('GGG');">Green</button>
+            <button onclick="onSend('BBB');">Blue</button>
+
+            <br><br>
+
+            <i>If you have Fluent Pet talking buttons, enable this option during the recording:</i><br><br>
+            <input type="checkbox" id="checkbox-fp">Fluent Pet</input>
+
+            <br>
+
+            <textarea name="textarea" id="rxData" style="width:300px;height:100px;" disabled hidden></textarea><br>
+
+            <button id="captureStart">Start capturing</button>
+            <button id="captureStop" hidden>Stop capturing</button>
+
+            <br><br>
+
+            <div class="cell-version">
+                <span>
+                    |
+                    Build time: <span class="nav-link">@GIT_DATE@</span> |
+                    Commit hash: <a class="nav-link" href="https://github.com/ggerganov/ggwave/commit/@GIT_SHA1@">@GIT_SHA1@</a> |
+                    Commit subject: <span class="nav-link">@GIT_COMMIT_SUBJECT@</span> |
+                    <a class="nav-link" href="https://github.com/ggerganov/ggwave/tree/master/examples/ggwave-js">Source Code</a> |
+                </span>
+            </div>
+        </div>
+
+        <script type="text/javascript" src="ggwave.js"></script>
+        <script type='text/javascript'>
+            window.AudioContext = window.AudioContext || window.webkitAudioContext;
+            window.OfflineAudioContext = window.OfflineAudioContext || window.webkitOfflineAudioContext;
+
+            var context = null;
+            var recorder = null;
+
+            // the ggwave module instance
+            var ggwave = null;
+            var ggwave_FluentPet = null;
+            var parameters = null;
+            var instance = null;
+
+            const kPayloadLength = 3;
+
+            var kDSSMagic = [
+                0x96, 0x9f, 0xb4, 0xaf, 0x1b, 0x91, 0xde, 0xc5, 0x45, 0x75, 0xe8, 0x2e, 0x0f, 0x32, 0x4a, 0x5f,
+                0xb4, 0x56, 0x95, 0xcb, 0x7f, 0x6a, 0x54, 0x6a, 0x48, 0xf2, 0x0b, 0x7b, 0xcd, 0xfb, 0x93, 0x6d,
+                0x3c, 0x77, 0x5e, 0xc3, 0x33, 0x47, 0xc0, 0xf1, 0x71, 0x32, 0x33, 0x27, 0x35, 0x68, 0x47, 0x1f,
+                0x4e, 0xac, 0x23, 0x42, 0x5f, 0x00, 0x37, 0xa4, 0x50, 0x6d, 0x48, 0x24, 0x91, 0x7c, 0xa1, 0x4e,
+            ];
+
+            // instantiate the ggwave instance
+            // ggwave_factory comes from the ggwave.js module
+            ggwave_factory().then(function(obj) {
+                ggwave = obj;
+            });
+
+            // instantiate a second instance specific for the Fluent Pet talking buttons
+            ggwave_factory().then(function(obj) {
+                ggwave_FluentPet = obj;
+            });
+
+            var txData = document.getElementById("txData");
+            var rxData = document.getElementById("rxData");
+            var captureStart = document.getElementById("captureStart");
+            var captureStop = document.getElementById("captureStop");
+
+            // helper function
+            function convertTypedArray(src, type) {
+                var buffer = new ArrayBuffer(src.byteLength);
+                var baseView = new src.constructor(buffer).set(src);
+                return new type(buffer);
+            }
+
+            // initialize audio context and ggwave
+            function init() {
+                if (!context) {
+                    context = new AudioContext({sampleRate: 48000});
+
+                    parameters = ggwave.getDefaultParameters();
+                    parameters.payloadLength = kPayloadLength;
+                    parameters.sampleRateInp = context.sampleRate;
+                    parameters.sampleRateOut = context.sampleRate;
+                    instance = ggwave.init(parameters);
+
+                    parameters = ggwave_FluentPet.getDefaultParameters();
+                    parameters.payloadLength = kPayloadLength;
+                    parameters.sampleRateInp = context.sampleRate;
+                    parameters.sampleRateOut = context.sampleRate - 512;
+                    instance = ggwave_FluentPet.init(parameters);
+                }
+            }
+
+            //
+            // Tx
+            //
+
+            function onSend(text) {
+                init();
+
+                // DSS : xor the text with the magic numbers
+                var payload = new Uint8Array(text.length);
+                for (var i = 0; i < text.length; i++) {
+                    payload[i] = text.charCodeAt(i) ^ kDSSMagic[i];
+                }
+
+                // generate audio waveform
+                var waveform = null;
+                if (document.getElementById("checkbox-fp").checked) {
+                    waveform = ggwave_FluentPet.encode(instance, payload, ggwave_FluentPet.TxProtocolId.GGWAVE_TX_PROTOCOL_DT_FAST, 25)
+                } else {
+                    waveform = ggwave.encode(instance, payload, ggwave.TxProtocolId.GGWAVE_TX_PROTOCOL_DT_FAST, 25)
+                }
+
+                // play audio
+                var buf = convertTypedArray(waveform, Float32Array);
+                var buffer = context.createBuffer(1, buf.length, context.sampleRate);
+                buffer.getChannelData(0).set(buf);
+                var source = context.createBufferSource();
+                source.buffer = buffer;
+                source.connect(context.destination);
+                source.start(0);
+            }
+
+            //
+            // Rx
+            //
+
+            captureStart.addEventListener("click", function () {
+                init();
+
+                let constraints = {
+                    audio: {
+                        // not sure if these are necessary to have
+                        echoCancellation: false,
+                        autoGainControl: false,
+                        noiseSuppression: false
+                    }
+                };
+
+                navigator.mediaDevices.getUserMedia(constraints).then(function (e) {
+                    mediaStream = context.createMediaStreamSource(e);
+
+                    var bufferSize = 1024;
+                    var numberOfInputChannels = 1;
+                    var numberOfOutputChannels = 1;
+
+                    if (context.createScriptProcessor) {
+                        recorder = context.createScriptProcessor(
+                                bufferSize,
+                                numberOfInputChannels,
+                                numberOfOutputChannels);
+                    } else {
+                        recorder = context.createJavaScriptNode(
+                                bufferSize,
+                                numberOfInputChannels,
+                                numberOfOutputChannels);
+                    }
+
+                    recorder.onaudioprocess = function (e) {
+                        var source = e.inputBuffer;
+                        var res = ggwave.decode(instance, convertTypedArray(new Float32Array(source.getChannelData(0)), Int8Array));
+                        if (res && res.length == kPayloadLength) {
+                            // DSS
+                            var payload = "";
+                            res8 = convertTypedArray(res, Uint8Array);
+                            for (var i = 0; i < 3; i++) {
+                                payload += String.fromCharCode(res8[i] ^ kDSSMagic[i]);
+                            }
+
+                            if (payload == 'RRR' || payload == 'GGG' || payload == 'BBB') {
+                                rxData.value = payload;
+
+                                // change page background color
+                                switch (payload) {
+                                    case 'RRR':
+                                        document.body.style.backgroundColor = '#ff0000';
+                                        break;
+                                    case 'GGG':
+                                        document.body.style.backgroundColor = '#00ff00';
+                                        break;
+                                    case 'BBB':
+                                        document.body.style.backgroundColor = '#0000ff';
+                                        break;
+                                }
+
+                                setTimeout(function () {
+                                    document.body.style.backgroundColor = '#ffffff';
+                                }, 1000);
+                            }
+                        }
+                    }
+
+                    mediaStream.connect(recorder);
+                    recorder.connect(context.destination);
+                }).catch(function (e) {
+                    console.error(e);
+                });
+
+                rxData.value = 'Listening ...';
+                captureStart.hidden = true;
+                captureStop.hidden = false;
+            });
+
+            captureStop.addEventListener("click", function () {
+                if (recorder) {
+                    recorder.disconnect(context.destination);
+                    mediaStream.disconnect(recorder);
+                    recorder = null;
+                }
+
+                rxData.value = 'Audio capture is paused! Press the "Start capturing" button to analyze audio from the microphone';
+                captureStart.hidden = false;
+                captureStop.hidden = true;
+            });
+
+            captureStop.click();
+        </script>
+    </body>
+</html>
