messaging from cpp -> web ui

MYK · MYK · commit 0379cb1828f6 · 2025-03-22T16:41:30.000Z
diff --git a/README.md b/README.md
@@ -25,5 +25,5 @@ The embedded web server is the header-only cpp-httplib by Yuji Hirose from here:
 # TODO
 
 * [DONE] web interface  -> cpp comms
-* cpp -> web interface comms
+* [DONE except annoying assert] cpp -> web interface comms
 * test on mac and windows
diff --git a/src/HTTPServer.cpp b/src/HTTPServer.cpp
@@ -45,10 +45,10 @@ void HttpServerThread::initAPI()
 
     // 'live' responders for button presses - call to the pluginprocessor 
     svr.Get("/button1", [this](const httplib::Request& req, httplib::Response& res) {
-        this->pluginProc.api_sendMessage("Button 1 clicked");
+        this->pluginProc.messageReceivedFromWebAPI("Button 1 clicked");
     });
     svr.Get("/button2", [this](const httplib::Request& req, httplib::Response& res) {
-        this->pluginProc.api_sendMessage("Button 2 clicked");
+        this->pluginProc.messageReceivedFromWebAPI("Button 2 clicked");
     });
 
     
diff --git a/src/PluginEditor.cpp b/src/PluginEditor.cpp
@@ -5,6 +5,7 @@
 PluginEditor::PluginEditor (PluginProcessor& p)
     : AudioProcessorEditor (&p), processorRef (p), 
     webView{
+        // no idea if this stuff is needed... but it looks useful
         juce::WebBrowserComponent::Options{}
         .withBackend(juce::WebBrowserComponent::Options::Backend::webview2)
         .withWinWebView2Options(juce::WebBrowserComponent::Options::WinWebView2{}
@@ -42,3 +43,19 @@ void PluginEditor::resized()
 {
     webView.setBounds(getLocalBounds()); // Make web view fill entire UI
 }
+
+
+void PluginEditor::updateUIFromProcessor(const juce::String& msg)
+{  
+    // create an object and convert it to a json string 
+    juce::DynamicObject::Ptr obj = new juce::DynamicObject();
+    obj->setProperty("msg", msg);
+    juce::var data(obj);
+    juce::String json = juce::JSON::toString(data);
+    
+    webView.evaluateJavascript("handleCppMessage(" + json + ");", nullptr);
+    
+    // std::string msg_as_json = "{\"msg\":\""+ msg + "\"}";
+    // juce::JSON::toString({"msg":msg});
+    // webView.evaluateJavascript("backendCall('"+msg_as_json+"')");
+}
diff --git a/src/PluginEditor.h b/src/PluginEditor.h
@@ -15,6 +15,8 @@ class PluginEditor final : public juce::AudioProcessorEditor
     void paint (juce::Graphics&) override;
     void resized() override;
 
+    void updateUIFromProcessor(const juce::String& msg);
+
 private:
     // This reference is provided as a quick way for your editor to
     // access the processor object that created it.
diff --git a/src/PluginProcessor.cpp b/src/PluginProcessor.cpp
@@ -193,8 +193,12 @@ juce::AudioProcessor* JUCE_CALLTYPE createPluginFilter()
 
 
 
-void PluginProcessor::api_sendMessage(std::string msg)
+void PluginProcessor::messageReceivedFromWebAPI(std::string msg)
 {
     DBG("PluginProcess received a message " << msg);
+    if (auto* editor = dynamic_cast<PluginEditor*>(getActiveEditor()))
+    {
+        editor->updateUIFromProcessor("Got your message " + msg);
+    }
 }
 
diff --git a/src/PluginProcessor.h b/src/PluginProcessor.h
@@ -50,7 +50,7 @@ class PluginProcessor final : public juce::AudioProcessor
     // things for the api server to call
     // really you should make an 'interface' for this 
     // but for simplicity in this demo
-    void api_sendMessage(std::string msg);
+    void messageReceivedFromWebAPI(std::string msg);
 
 private:
     HttpServerThread apiServer;
diff --git a/src/ui/index.html b/src/ui/index.html
@@ -1,16 +1,33 @@
+<!DOCTYPE html>
 <html>
 
 <body>
 
 <h1>I am served</h1>
 <button onclick="callAPI('button1')">Hit me</button>
 <button onclick="callAPI('button2')">and me</button>
+<div id="messages"></div>
+
 <script>
 
+// the cpp back end will send us messages
+function handleCppMessage(data){
+  // data = JSON.parse(json_string);
+  console.log(data["msg"])
+  msg_div = document.getElementById("messages");
+  msg_div.innerText = data.msg;
+
+    // Optional: send dummy result back so C++ doesn't assert
+      if (window.__JUCE__?.emitResult)
+        window.__JUCE__.emitResult("ok");
+} 
 
+// the buttons call this function to send messages
+// to the API server hosted in the PluginProcessor - direct comms to the pluginprocessor :) 
 function callAPI(endpoint){
    fetch("/" + endpoint)
         .then(response => {
+          console.log("Web UI: response from API " + endpoint)
           console.log(response.toString())
         })
         .catch(error => {

Original file line number	Diff line number	Diff line change
`@@ -193,8 +193,12 @@ juce::AudioProcessor* JUCE_CALLTYPE createPluginFilter()`
`193`	`193`
`194`	`194`
`195`	`195`
`196`		`-void PluginProcessor::api_sendMessage(std::string msg)`
	`196`	`+void PluginProcessor::messageReceivedFromWebAPI(std::string msg)`
`197`	`197`	`{`
`198`	`198`	`DBG("PluginProcess received a message " << msg);`
	`199`	`+ if (auto* editor = dynamic_cast<PluginEditor*>(getActiveEditor()))`
	`200`	`+ {`
	`201`	`+ editor->updateUIFromProcessor("Got your message " + msg);`
	`202`	`+ }`
`199`	`203`	`}`
`200`	`204`