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

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..

CodePudding user response：

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

Good luck! :D

CodePudding user response：

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)
 {  
   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=" checked, 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>