Input field for number/free text for openHAB UIs

Setup, Configuration and Use Items & Sitemaps
6

I had another go at this, building from previous posts, to try to make this work in BasicUI and have a look and feel that fits in.

There is still a lot of room for improvement, but I am no Javascript and HTML developer at all, so this is how far I get. I use the REST API, and not the methods through ClassicUI. The limitation is that the values only update when the screen is refreshed. I don’t know how to do all the plumbing or leverage BasicUI functions to make automatic updates work. For my purpose, this is just fine.
The html file below is called from a webview element in the sitemap with 2 parameters, item (for the item to show and update) and label (a label to put in front of the input box). That looks like this:

Frame label="Meterstanden groene stroom" {
	Webview url="http://192.168.0.10:8080/static/textinput.html?item=PVEmeter1&label=GS1"
	Webview url="http://192.168.0.10:8080/static/textinput.html?item=PVEmeter2&label=GS2"
}

My sitemap then looks like this:

And here is the html file:

<html class="ui-icons-enabled">
<script>
    var openHabianPI = "192.168.0.10"
    function getParam(param)
    {
        var qs = (function(a) {
            if (a == "") return {};
            var b = {};
            for (var i = 0; i < a.length; ++i) {
                var p=a[i].split('=', 2);
                if (p.length == 1)
                    b[p[0]] = "";
                else
                    b[p[0]] = decodeURIComponent(p[1].replace(/\+/g, " "));
            }
            return b;
        })(window.location.search.substr(1).split('&'));       
        return qs[param]
    }
    function httpGet(theUrl)
    {
        var xmlHttp = new XMLHttpRequest();
        xmlHttp.onreadystatechange = function() {
    		if (this.readyState == 4 && this.status == 200) {
		    	document.getElementById('textInput').value = xmlHttp.responseText;
		    }
		};
        xmlHttp.open("GET", theUrl, true);
        xmlHttp.setRequestHeader("Accept", "text/plain");
        xmlHttp.send();
        return 
    }
    function httpPut(theUrl, theValue)
    {
        var xmlHttp = new XMLHttpRequest();
        xmlHttp.open("PUT", theUrl, true);
        xmlHttp.setRequestHeader("Content-type", "text/plain");
        xmlHttp.setRequestHeader("Accept", "application/json");
        xmlHttp.send(theValue)
    }
	function sendValue()
	{
        url = "http://" + openHabianPI + ":8080/rest/items/" + getParam('item') + "/state";
        httpPut(url, document.getElementById('textInput').value)
    }
	function getValue()
	{
        url = "http://" + openHabianPI + ":8080/rest/items/" + getParam('item') + "/state";
        httpGet(url)
    }
</script>
<head>

	<link rel="stylesheet" type="text/css" href="../basicui/mdl/material.min.css" />
	<link rel="stylesheet" type="text/css" href="../basicui/material-icons.css" />
	<link rel="stylesheet" type="text/css" href="../basicui/roboto.css" />
	<link rel="stylesheet" type="text/css" href="../basicui/smarthome.css" />
	<script src="../basicui/mdl/material.min.js"></script>
	
	<style>
		form {
			margin-bottom: 0;
		}
		.mdl-form__row {
			border-bottom-style: none;
			height: auto;
			padding-top: 0;
			padding-right: 0;
			padding-bottom: 0;
			padding-left: 0;
		}
	</style>
</head>
<body class="mdl-color-text--grey-700" data-icon-type="svg">
	<form action="JavaScript:sendValue()">
		<div class="mdl-form__row mdl-cell mdl-cell--6-col mdl-cell--8-col-tablet">
			<span class="mdl-form__icon">
				<img data-icon="text" src="../icon/text?format=svg" />
			</span>
			<div class="mdl-form__label" id=label>
			</div>
			<div>
				<input type="text" name="textInput" id="textInput">
			</div>
			<div>
				<input type="submit" value="Submit">
			</div>
		</div>
		<script>
			document.getElementById('label').innerHTML = getParam('label');
			document.getElementById('textInput').value = getValue()
		</script>
	</form>
</body>
</html>

I would definitely like to see something like this being picked up and included in the standard functionality of the UI’s. Unfortunately, I don’t know enough about it to be able to do it myself.

8 Likes