OH 3.1: HTTP Binding HomeBOT vacuum cleaner

Add-ons Bindings
1

Dear all,

i am currently trying to integrate my HomeBOT vacuum cleaner to my OpenHAB system.
The cleaner is flashed with a custom firmware and can be controller over an internal webpage over the local network.

System:

  • RPI 3b+
  • OpenHABian 3.1
  • OpenHAB 3.1

I setup the http binding in the following way:

UID: http:url:83b7c64163
label: HTTP URL Thing
thingTypeUID: http:url
configuration:
  authMode: BASIC
  ignoreSSLErrors: false
  baseURL: http://192.168.0.30:6260/
  delay: 0
  stateMethod: GET
  refresh: 30
  commandMethod: GET
  contentType: text/html
  timeout: 10000
  bufferSize: 2048
channels:
  - id: HomeBot_Status
    channelTypeUID: http:string
    label: HomeBot Status
    description: ""
    configuration: {}

The channel HomeBot_Status is linked to a new string item in order to get the current status of the device.

This is the website which should be connected:

image
image992×912 135 KB

This is the source code by google chrome browser:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
	<head>
		<title>HOMBOT's Control Center</title>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
		<link rel="shortcut icon" href="favicon.ico" />
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<script type="text/javascript" src="javascript/jquery-2.1.1.min.js"></script>
		<script type="text/javascript" src="javascript/functions.js"></script>
		<script type="text/javascript" src="javascript/snapshot.js"></script>
	</head>
	<body onload="drawSnapshot()">
		<div id="container">
			<div id="header">
				<div id="title">
					<a href="index.html">
						<span>HOMBOT's</span><br />
						Control Center
					</a>
				</div>
				<div id="datetime"></div>
				<div id="navigation">
					<ul>
						<li><a class="active" href="index.html">Home</a></li>
						<li><a class="link" href="sites/schedule.html">Schedule</a></li>
						<li><a class="link" href="sites/information.html">Information</a></li>
						<li><a class="link" href="sites/statistic.html">Statistic</a></li>
						<li><a class="link" href="sites/maps.html">Maps</a></li>
						<li><a class="link" href="sites/service.html">Service</a></li>
						<li><a class="link" href="sites/mailcfg.html">Mail</a></li>
					</ul>
				</div>
			</div>
			<div id="content">
				<h2>Status</h2>
				<div id="loadhere"></div>
				<br /><br />

				<h2>Control</h2>
				<div id="cam"><canvas id="cam_canvas" width="320" height="240" /></div>

				<table cellpadding="0" cellspacing="0" class="control" border="0">
					<tr>
						<td><input type="button" id="start" value="START CLEANING" /></td>
						<td><input type="button" id="pause" value="PAUSE" /></td>
						<td><input type="button" id="homing" value="GO HOME" /></td>
					</tr>
					<tr>
						<td><input type="button" id="mode" value="Mode"/></td>
						<td><input type="button" id="turbo" value="Turbo"/></td>
						<td><input type="button" id="repeat" value="Repeat"/></td>
					</tr>
				</table>
			</div>
			<div class="clear"></div>
		</div>
	</body>
</html>

So it seems like the Status: STANDBY is hidden somewhere here:

<h2>Status</h2>
				<div id="loadhere"></div>

I checked the “Analyse tool” in google chrome and found this:

image
image1689×854 99.4 KB

I digged deeper (in the meantime the cleaner went to CHARGING:

<div id="loadhere"><div class="dummy">
	<table cellpadding="0" cellspacing="0" width="100%" class="info" border="0">
		<tbody><tr>
			<th>Status:</th><td><div class="state"><div class="CHARGING"></div></div>CHARGING</td>
			<th>Mode:</th><td>ZZ</td>
		</tr>
		<tr>
			<th>Repeat:</th><td class="capital"><div class="checkbox"><div class="false"></div></div>false</td>
			<th>Firmware:</th><td>16552</td>
		</tr>
		<tr>
			<th>Turbo:</th><td class="capital"><div class="checkbox"><div class="false"></div></div>false</td>
			<th>Nickname:</th><td>HOMBOT</td>
		</tr>
		<tr>
			<th>CPU Idle:</th>
			<td colspan="3">
				<div class="barframe">
					<div class="bar" style="width: 84.37%"></div>
					<div class="val">84.37%</div>
				</div>
			</td>
		</tr>
		<tr>
			<th>Battery:</th>
			<td colspan="3">
				<div class="barframe">
					<div class="bar" style="width: 80%"></div>
					<div class="val">80%</div>
				</div>
			</td>
		</tr>
	</tbody></table>
</div></div>

So the information seems to be in

<div id="loadhere"><div class="dummy">
	<table>
		<tbody><tr>
			<td><div class="state"><div class="CHARGING"></div></div>CHARGING</td>

However, the linked string item only shows the source code of the website:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> <head> <title>HOMBOT's Control Center</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <link rel="shortcut icon" href="favicon.ico" /> <link rel="stylesheet" type="text/css" href="css/style.css" /> <script type="text/javascript" src="javascript/jquery-2.1.1.min.js"></script> <script type="text/javascript" src="javascript/functions.js"></script> <script type="text/javascript" src="javascript/snapshot.js"></script> </head> <body onload="drawSnapshot()"> <div id="container"> <div id="header"> <div id="title"> <a href="index.html"> <span>HOMBOT's</span><br /> Control Center </a> </div> <div id="datetime"></div> <div id="navigation"> <ul> <li><a class="active" href="index.html">Home</a></li> <li><a class="link" href="sites/schedule.html">Schedule</a></li> <li><a class="link" href="sites/information.html">Information</a></li> <li><a class="link" href="sites/statistic.html">Statistic</a></li> <li><a class="link" href="sites/maps.html">Maps</a></li> <li><a class="link" href="sites/service.html">Service</a></li> <li><a class="link" href="sites/mailcfg.html">Mail</a></li> </ul> </div> </div> <div id="content"> <h2>Status</h2> <div id="loadhere"></div> <br /><br /> <h2>Control</h2> <div id="cam"><canvas id="cam_canvas" width="320" height="240" /></div> <table cellpadding="0" cellspacing="0" class="control" border="0"> <tr> <td><input type="button" id="start" value="START CLEANING" /></td> <td><input type="button" id="pause" value="PAUSE" /></td> <td><input type="button" id="homing" value="GO HOME" /></td> </tr> <tr> <td><input type="button" id="mode" value="Mode"/></td> <td><input type="button" id="turbo" value="Turbo"/></td> <td><input type="button" id="repeat" value="Repeat"/></td> </tr> </table> </div> <div class="clear"></div> </div> </body> </html>

I already tried to set the Thing config to State Method to POST or PUT.
And the Content Type text/html or text/plain.
But this didnt change the content of the string item.

Is this even possible?

Thank you for any hint ! :slight_smile:

Edit: Also the “easier” task, sending a command to the html buttons i am not able to figure out how to do it. I only see example where an “…?value=number” or similar is transferred to OpenHAB. I can not detect this in my case …

2

I am not an expert of the http binding but as far as I understand the status value that you are looking for is updated by a javascript during runtime / loading time of the webpage. This means it is done by the browsers engine. The http binding only sees the source code.
You may try to analyze the javascript there must be a function that provides the value. Knowing that function it might be possible to query that value from the page’s server.
In case that does not work you may have a look at selenium. Selenium is a plugin to e.g. do browser regression tests. With selenium you can remote control a ( headless- ) browser. This means you even get access to a rendered webpage. Doing that may be a bit overhead but you can get access to the page.

With regard to the button presses. E.g. for firefox there is a plugin that is called “HTTP Header Live”. You can use it to see what action is being executed when you press a button on a page.