Plugin to WebBrowserComponent interaction, and visa-versa


#1

Hello everyone!
Rookie developer here… :stuck_out_tongue: (This might be a very silly question but bare with me please)

I’m pretty sure this is possible with now-a-days technology, but have never tried it before.
Well pretty much I want to interact between my program and the webBrowserComponent. Like JS injection or something like that.
I make a simple layout and if I can get any interaction working I can role from there.

In my AudioPlugin project I have a simple Button and Label. On the local HTML WebPage I also just have a Button and Label.
What I want to do is when clicking the button from the plugin change the text of the label (or anything really) on the page, and visa-versa, page button clicks effect the Label on the plugin.

Is this possible?
If yes, could you can give me an as detailed response as possible with code examples? I would really appreciate it! :smiley:

Here is my code. (Nothing you couldn’t have figured just by looking at the layout :p)

Plugin (header):

#pragma once

#include "../JuceLibraryCode/JuceHeader.h"
#include "PluginProcessor.h"

class WebBrowserInteractionAudioProcessorEditor : public AudioProcessorEditor, Button::Listener
{
public:
	WebBrowserInteractionAudioProcessorEditor (WebBrowserInteractionAudioProcessor&);
	~WebBrowserInteractionAudioProcessorEditor();

	ScopedPointer<Label> thisLable = new Label("label", "A Label ...");
	ScopedPointer<TextButton> thisButton = new TextButton("textButton");
	ScopedPointer<WebBrowserComponent> thisWebBrowserComponent = new WebBrowserComponent(false);

	void WebBrowserInteractionAudioProcessorEditor::buttonClicked(Button* buttonThatWasClicked) override;

	void paint (Graphics&) override;
	void resized() override;

private:
	WebBrowserInteractionAudioProcessor& processor;

	JUCE_DECLARE_NON_COPYABLE_WITH_LEAK_DETECTOR (WebBrowserInteractionAudioProcessorEditor)
};

Plugin (CPP):

#include "PluginProcessor.h"
#include "PluginEditor.h"

WebBrowserInteractionAudioProcessorEditor::WebBrowserInteractionAudioProcessorEditor (WebBrowserInteractionAudioProcessor& p)
	: AudioProcessorEditor (&p), processor (p)
{
	addAndMakeVisible(thisWebBrowserComponent);
	thisWebBrowserComponent->goToURL("file://C:/JUCE/examples/WebBrowserInteraction/index.html");

	addAndMakeVisible(thisLable);

	addAndMakeVisible(thisButton);
	thisButton->addListener(this);

	setSize (400, 300);
}

WebBrowserInteractionAudioProcessorEditor::~WebBrowserInteractionAudioProcessorEditor() { }

void WebBrowserInteractionAudioProcessorEditor::buttonClicked(Button* buttonThatWasClicked)
{
	if (buttonThatWasClicked == thisButton)
	{
		// do stuff
	}
}

void WebBrowserInteractionAudioProcessorEditor::paint (Graphics& g)
{
	g.fillAll (getLookAndFeel().findColour (ResizableWindow::backgroundColourId));
}

void WebBrowserInteractionAudioProcessorEditor::resized()
{
	auto r = getLocalBounds();
	auto leftBounds = r.removeFromLeft(100);

	thisLable->setBounds(leftBounds.removeFromTop(leftBounds.getHeight() / 2));
	thisButton->setBounds(leftBounds);
	thisWebBrowserComponent->setBounds(r);

}

Web Page:

<html>
<body>
	<label id="lab1">A Label ...</label>
	<br>
	<button id="btn1">A Button ... </button>
</body>
</html>

#2

Bump :slight_smile:


#3

Bumping will not help here on the forum (especially bumping after your original post is not even a day old).

You should look at the source code (jucer_LicenseThread.h and jucer_LicenseWebview.h) of the Projucer which needs to solve a similar situation: there the main window content is a WebBrowserComponent but the top header is a JUCE component.

To send data to the WebBrowserComponent you simply pass some URL parameters and call WebBrowserComponent::goToURL(). You’re webpage will need to decode the url parameters and do something with them (such as change the label on the button etc.).

Getting data/callbacks from the WebBrowserComponent to the app is a bit more involved. When you are ready to send data to JUCE, your webpage needs to re-direct your html page to a url with a custom scheme (for example, the projucer uses projucer://here-comes-all-my-data). As you’re JUCE webview gets a WebBrowserComponent::pageAboutToLoad callback everytime the page tries to load a new page, you can catch any redirect to the projucer URL scheme. You can then use the rest of the url as data and do something with it (such as change the label of a JUCE button). If you return false from pageAboutToLoad then the WebBrowserComponent won’t actually navigate to that url.

I hope this helps.


#4

All you can really do is to intercept the URL that the user is trying to go to when they click. But by doing that you can actually achieve quite a lot.


#5

Thanks a million! I’ll look into that :slight_smile:
Douglas


#6

Hi again!

On my web page I’m not going to be refreshing, when i click the button on my webpage i change the URL adding some parameters. On the plugin I want to get the URL(my-site.html), and do stuff accordingly …

When I click the button it adds my-site.html?projucer://id=1&val=A%Button%...

So for example, on the plugin i want to get that the URL was changed and change the label(in the plugin) to “Button id:1, value:A Button …”

Sorry for the noob questions :confused:


#7

Never mind! :smile:
Just remembered i can use WebBrowserComponent::goToURL(My-site.html#parameters-here) to sent the url but not refresh :slight_smile:
I’ll share the code in the end for the next person that wants to get something similar working.

Douglas