Html - Creating buttons to make api calls that also reflect their status

Question

I’m hoping someone can help me with this, as I’m pretty new to html etc.

I’m trying to create two buttons that can turn a remote light ON and OFF , but also reflect their status.

To either turn on or off, the light has two specific http API calls..

Turn On = http://192.168.102.22:3480/data_request?id=action&output_format=xml&DeviceNum=110&serviceId=urn:upnp-org:serviceId:SwitchPower1&action=SetTarget&newTargetValue=1

Turn Off = http://192.168.102.22:3480/data_request?id=action&output_format=xml&DeviceNum=110&serviceId=urn:upnp-org:serviceId:SwitchPower1&action=SetTarget&newTargetValue=0

I tried the following, but was unsuccessful..

<button type="button"><iframe src="192.168.102.22:3480/data_request?id=action&output_format=xml&DeviceNum=110&serviceId=urn:upnp-org:serviceId:SwitchPower1&action=SetTarget&newTargetValue=1" style="visibility:hidden;display:none"></iframe>On</button>
<button type="button"><iframe src="192.168.102.22:3480/data_request?id=action&output_format=xml&DeviceNum=110&serviceId=urn:upnp-org:serviceId:SwitchPower1&action=SetTarget&newTargetValue=0" style="visibility:hidden;display:none"></iframe>Off</button>

And then to confirm the status of the light, (if ON 1 is returned, if OFF 0 is returned) and the API call for that is.

Status = http://192.168.102.22:3480/data_request?id=variableget&DeviceNum=110&serviceId=urn:upnp-org:serviceId:SwitchPower1&Variable=Status

The challenge is I don’t want any of the api urls to be called and a new web page opened, all of this should really occurs behind the scenes.

In addition to that, I’m looking to generate these buttons dynamically via a Lua script, so I need to be able to write the on/off button code via a loop into a cell of a table, incrementing the DeviceNum=110 value as I go. (I think I can do the Lua part, but not the html aspects)

All help/advice is appreciated..

UPDATE:

Here’s my progress so far, just keep in mind that this code will be created via a Lua script , so where possible things need to be consistent so I can create much of it via a loop call against a table. If there’s an easier route someone can think of, please let me know..

<html>
  <head>
    <title>Home Energy Usage</title>
  </head>
  <script>
function loadDoc11a() {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        var response = xhttp.responseText;
        console.log("ok"+response);
    }
};
xhttp.open("GET", "http://192.168.102.22:3480/data_request?id=action&output_format=xml&DeviceNum=11&serviceId=urn:upnp-org:serviceId:SwitchPower1&action=SetTarget&newTargetValue=1", true);
xhttp.send();
}

function loadDoc11b() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML = this.responseText;
    }
  };
  xhttp.open("POST", "http://192.168.102.22:3480/data_request?id=action&output_format=xml&DeviceNum=11&serviceId=urn:upnp-org:serviceId:SwitchPower1&action=SetTarget&newTargetValue=0", true);
  xhttp.send();
}

function loadDoc113a() {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        var response = xhttp.responseText;
        console.log("ok"+response);
    }
};
xhttp.open("GET", "http://192.168.102.22:3480/data_request?id=action&output_format=xml&DeviceNum=113&serviceId=urn:upnp-org:serviceId:SwitchPower1&action=SetTarget&newTargetValue=1", true);
xhttp.send();
}

function loadDoc113b() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML = this.responseText;
    }
  };
  xhttp.open("POST", "http://192.168.102.22:3480/data_request?id=action&output_format=xml&DeviceNum=113&serviceId=urn:upnp-org:serviceId:SwitchPower1&action=SetTarget&newTargetValue=0", true);
  xhttp.send();
}

function loadDoc231a() {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        var response = xhttp.responseText;
        console.log("ok"+response);
    }
};
xhttp.open("GET", "http://192.168.102.22:3480/data_request?id=action&output_format=xml&DeviceNum=113&serviceId=urn:upnp-org:serviceId:SwitchPower1&action=SetTarget&newTargetValue=1", true);
xhttp.send();
}

function loadDoc231b() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML = this.responseText;
    }
  };
  xhttp.open("POST", "http://192.168.102.22:3480/data_request?id=action&output_format=xml&DeviceNum=110&serviceId=urn:upnp-org:serviceId:SwitchPower1&action=SetTarget&newTargetValue=0", true);
  xhttp.send();
}
</script>
  <body>
    <table class=custom>
      <tr class=custom>
        <th class=custom>Energy Sensor</th>
        <th class=custom>Wattage</th>
        <th class=custom>Control</th>
        <th class=custom>Status</th>
      </tr>
      <br/>
<tr class=custom>
    <td class=custom>Living Room Media</td>
    <td class=custom>54.1</td>
    <td class=custom>
        <button type="button" onclick="loadDoc11a()">On</button>
        <button type="button" onclick="loadDoc11b()">Off</button></td>
    <td class=custom>0</td>
        </tr>
<tr class=custom>
    <td class=custom>Kitchen Energy</td>
    <td class=custom>31.4</td>
    <td class=custom>
        <button type="button" onclick="loadDoc113a()">On</button>
        <button type="button" onclick="loadDoc113b()">Off</button></td>
    <td class=custom>1</td> 
        </tr>
<tr class=custom>
    <td class=custom>Office Energy</td>
    <td class=custom>11.1</td>
    <td class=custom>
        <button type="button" onclick="loadDoc231a()">On</button>
        <button type="button" onclick="loadDoc231b()">Off</button></td>
    <td class=custom>1</td> 
        </tr>
  </body>

score 0 · Answer 1 · answered Mar 03 '22 at 10:10

0

You need to use JavaScript to send a request to the backend API. this article may help with your problem.

Good luck! :D

answered Mar 03 '22 at 10:10

Jay Morelli

97
6

Mike V. · Answer 2 · 2022-03-06T05:49:39.570

try to take this code as a basis:

<!DOCTYPE html>
<html>
<head>
   <title>Test</title>
   <meta charset="UTF-8" />
</head>
<script type="text/javascript">
     
function httpGetAsync(theUrl, mode)
{
    var xhr = new XMLHttpRequest();
    
    xhr.open('GET', theUrl , true);
    xhr.send();
    xhr.onreadystatechange = function() { 
      if (xhr.readyState != 4) return;
    
      request_status.innerHTML = 'ready';
    
      if (xhr.status != 200) {
        request_status.innerHTML = xhr.status + ': ' + xhr.statusText;
      } else {
        if (mode == 1)  {
             request_status.innerHTML = xhr.responseText; 
          }
        else {
           request_status.innerHTML = xhr.statusText;
           light_status.innerHTML = xhr.responseText;
           /*
           Light.cheched = .... ; // analyse .responseText
            */
        }
      }

}
request_status.innerHTML = 'send...';

}
    
 function open_url(checked)
 {  
var v = checked?1:0;
httpGetAsync("http://192.168.102.22:3480/data_request?id=action&output_format=xml&DeviceNum=110&serviceId=urn:upnp-org:serviceId:SwitchPower1&action=SetTarget&newTargetValue="+v, 1);
 }
function get_status()
{
httpGetAsync("http://192.168.102.22:3480/data_request?id=variableget&DeviceNum=110&serviceId=urn:upnp-org:serviceId:SwitchPower1&Variable=Status", 2)

}    
 
</script>     

<body>   
<div style="height: 50px;">
    <div id="request_status"></div>
    <div id="light_status"></div>
</div>
<div>
    <span>Remote light:</span>
    <input id="Light" type="checkbox" onclick="open_url(this.checked); "   />
</div>
<br/>
<button onclick="get_status(); ">Get status of Light!</button>


</body>  
</html>

Thanks @Mike V. I’ve tried your code, but unfortunately I can’t get it to work? The open_url does not seem to work (if I add 1 or 0 to the end it does), also the get_status url does not seem to reflect any changes even when I turn the light on/off at source? Any ideas? — nodecentral, Mar 03 '22 at 19:55

bvdb · Answer 3 · 2022-08-01T06:20:19.157

Personally, I would go for a framework like Angular, React or Vue. They make it easier to re-render your page (or parts of it) after each HTTP request.

These frameworks are component-driven. Simply put, each component gets its own HTML and typescript (which basically is javascript with optional typing). Each component has inputs and outputs. And it's like you're creating your own reusable set of HTML-tags.

Angular ships with its own built-in http client module. While (afaik) for React and Vue you would then install "axios".

To make your UI prettier you could add bootstrap, but angular also has its own UI library (Material). Mostly a matter of taste.

The main advantage of all of this, is that it will be so much easier to maintain and to scale once you make this step towards a real framework.

You really can learn the basics of angular in a couple of hours, simply by following their "Tour of Heroes" tutorial.

Html - Creating buttons to make api calls that also reflect their status

3 Answers3