Skip to main content
M
morgatronix
New Participant
October 17, 2020
Answered

XML Http Request issue

  • October 17, 2020
  • 1 reply
  • 947 views

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

 

    This topic has been closed for replies.
    Correct answer ClayUUID

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

    1 reply

    C
    ClayUUID
    Braniac
    October 17, 2020

    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.

    M
    morgatronixAuthor
    New Participant
    October 17, 2020

    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;
    }

     

    C
    ClayUUID
    Braniac
    October 18, 2020

    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?


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

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices