Highlighted

XML Http Request issue

New Here ,
Oct 16, 2020

Copy link to clipboard

Copied

Hi all,

first time here.

 

I am building a web page that connects to Vmix live video streaming software through IP and port on local network, once connected buttons on web page can trigger functions inside Vmix.

 

The issue i'm having is I cannot get the button to work properly from Animate CC Canvas as it triggers the function upon loading in browser and button does nothing.

It works as it should from basic .HTML with some javascript (code below) that I made in a text editor.

 

I am wondering what am I doing wrong inside animate? 

(please bear with me as I am a beginner and only know basic javascript)

 

WORKING .html CODE:

<html>
<body>

<button onclick="httpGet('http://192.168.x.xxx:8088/api/?Function=OverlayInput2&Input=5')">Overlay 2</button>

<p id="demo"></p>

<script>
function httpGet(theUrl)
{

var xmlHttp = new XMLHttpRequest();
xmlHttp.open("GET", theUrl, false); // false for synchronous request
xmlHttp.send(null);
return xmlHttp.responseText;
}
</script>

</body>
</html>

 

 

ANIMATE CC CODE: (button not working)

 

this.btn.onclick = httpGet('http://192.168.x.xxx:8088/api/?Function=Fade&Duration=1000');

function httpGet(theUrl) {

var xmlHttp = new XMLHttpRequest();

xmlHttp.open("GET", theUrl, false); // false for synchronous request
xmlHttp.send(null);
return xmlHttp.responseText;
}

 

 

link to the vmix api info: https://www.vmix.com/help19/index.htm?DeveloperAPI.html

 

Adobe Community Professional
Correct answer by ClayUUID | Adobe Community Professional

Yeah, it's running immediately because you're not passing addEventListener a reference to httpGet, you're passing it the return value from httpGet.

Views

69

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

XML Http Request issue

New Here ,
Oct 16, 2020

Copy link to clipboard

Copied

Hi all,

first time here.

 

I am building a web page that connects to Vmix live video streaming software through IP and port on local network, once connected buttons on web page can trigger functions inside Vmix.

 

The issue i'm having is I cannot get the button to work properly from Animate CC Canvas as it triggers the function upon loading in browser and button does nothing.

It works as it should from basic .HTML with some javascript (code below) that I made in a text editor.

 

I am wondering what am I doing wrong inside animate? 

(please bear with me as I am a beginner and only know basic javascript)

 

WORKING .html CODE:

<html>
<body>

<button onclick="httpGet('http://192.168.x.xxx:8088/api/?Function=OverlayInput2&Input=5')">Overlay 2</button>

<p id="demo"></p>

<script>
function httpGet(theUrl)
{

var xmlHttp = new XMLHttpRequest();
xmlHttp.open("GET", theUrl, false); // false for synchronous request
xmlHttp.send(null);
return xmlHttp.responseText;
}
</script>

</body>
</html>

 

 

ANIMATE CC CODE: (button not working)

 

this.btn.onclick = httpGet('http://192.168.x.xxx:8088/api/?Function=Fade&Duration=1000');

function httpGet(theUrl) {

var xmlHttp = new XMLHttpRequest();

xmlHttp.open("GET", theUrl, false); // false for synchronous request
xmlHttp.send(null);
return xmlHttp.responseText;
}

 

 

link to the vmix api info: https://www.vmix.com/help19/index.htm?DeveloperAPI.html

 

Adobe Community Professional
Correct answer by ClayUUID | Adobe Community Professional

Yeah, it's running immediately because you're not passing addEventListener a reference to httpGet, you're passing it the return value from httpGet.

Views

70

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Oct 16, 2020 0
Adobe Community Professional ,
Oct 16, 2020

Copy link to clipboard

Copied

Your button code is completely wrong. You can't just guess how things might work and hope you guessed right.

 

Use the Code Snippets feature to see how to write click actions.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 16, 2020 0
New Here ,
Oct 16, 2020

Copy link to clipboard

Copied

Thanks for the quick reply. 

 

I have tried with addEventListener and it has the same result.

It connects to Vmix and executes the function when page loads as opposed to waiting for button click to execute function.

 

Here is the code I used this time:

 

this.btn.addEventListener("click", httpGet('http://192.168.x.xxx:8088/api/?Function=Fade&Duration=1000').bind(this));

function httpGet(theUrl) {

var xmlHttp = new XMLHttpRequest();

xmlHttp.open("GET", theUrl, true); // false for synchronous request
xmlHttp.send(null);
return xmlHttp.responseText;
}

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 16, 2020 0
Adobe Community Professional ,
Oct 17, 2020

Copy link to clipboard

Copied

Yeah, it's running immediately because you're not passing addEventListener a reference to httpGet, you're passing it the return value from httpGet.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 17, 2020 0
New Here ,
Oct 17, 2020

Copy link to clipboard

Copied

Would I use an event to to reference the function? An example or snippet would be appreciated. Thanks

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 17, 2020 0
New Here ,
Oct 17, 2020

Copy link to clipboard

Copied

Thanks for the tip, its pretty basic stuff but at times confusing for a beginner like myself.

Got it working with the following code: 

 

this.btn.addEventListener("click", function () {
httpGet("http://192.168.x.xxx:8088/api/?Function=Fade&Duration=1000");
});

function httpGet(theUrl) {

var xmlHttp = new XMLHttpRequest();

xmlHttp.open("GET", theUrl, true); // false for synchronous request
xmlHttp.send(null);
return xmlHttp.responseText;
}

 

 

Thanks again, but I would like to know the reason why the basic Html and Javascript code doesn't encounter this problem?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 17, 2020 0
Advisor ,
Oct 18, 2020

Copy link to clipboard

Copied

be aware to test your javascript code on all JS interpreter (blink, gecko, webkit at least)

as there are various behaviors and slitghly different properties.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 18, 2020 0
ClayUUID LATEST
Adobe Community Professional ,
Oct 18, 2020

Copy link to clipboard

Copied

Because HTML onclick doesn't take a function reference, it takes an arbitrary string of JavaScript code that's executed when clicked.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 18, 2020 0