Input field for number/free text for openHAB UIs

THX Mark Herwege
i use it to Input Channels and Commands for my TV :slight_smile:

Is this still working for everyone?

Mostly works for me, but it doesn’t actually execute commands. Like it’s doing a postUpdate instead of a sendCommand (in openHAB rule jargon). The value changes, but the events don’t fire off. I’m guessing it’s because the API changed in 2.3 or prior. I don’t see documentation for the way this uses the API. I’ll try to make some changes.

Edit:
I changed post to put and then removed this from the url under sendValue, and it seems to work fine now.

+ "/state"

Seems that it was programmed to just update the state. Maybe the API didn’t change ¯_(ツ)_/¯

Hi guys

do someone find a way to make it accesible from the wan not only from the local network?

G

Hello!

I haven’t tried it in this case, but I’m using Tasker to update some items via RESTful API, and it is working outside the local network in format:

https://username:password@myopenhab.org/rest/items/

So, I guess it should work in this case too. It doesn’t even matter username has @ in the e-mail address.

Best regards,
Davor

I’ve just tried it, and it works, but you have to change address to this one in webview too (https://username:password@myopenhab.org/static…). There are two downsides though - first, it is really slow while loading webviews, and second, this will not work if you access Basic UI (not sure about HABdroid, since I’m not at home - accessing local network via VPN right now) within LAN (it acts the same as accessing it from WAN when you have local addresses in .html and webview).

Best regards,
Davor

1 Like

I am trying this way

The submit change the value but it do not triggered the postcommand

Any ways to trigger it?

This widget code by Jürgen Baginski works perfectly in HabPanel for me.

Just change “VoiceCommand” for whichever item you want to push the text into.

  <div class="form-group">

    <input type="text" class="form-control" no-snap-drag="true"

           ng-model="myvalue" ng-value="itemValue('VoiceCommand')"></input>

    <button type="button" class="btn btn-primary"

           ng-click="sendCmd('VoiceCommand', myvalue)">Send </button>

  </div>

Could you please tell me how you made it work in habpanel and which code you use?
I need a simple textbox to write a todo list in Habpanel

Did anyone get the webview solution working on the iOS version of the Openhab app? it does work on the Android one (at least on the Beta one)

You need to use VPN tunnel or make some NAT in your internet router.

Hi,
thanks Mark, all works perfect in OH2. Is it possible to extend the code for only four digit input (PIN number) and delete the input filed after putting 4 keypad inputs ?
Can you supress AJAX values, that no last values are displayed ?
Thanks.

Well,

This is a hack I am using. It is not the cleanest approach, but at least does the trick for me, so sharing in case it is useful for others.

I use a mix of text items, rules, and sitemap entries to simulate a “keypad” and a “input text item” on the android app (but it should work in other UIs also).

What you need:

  • A text item (of course, to receive the input)
  • A text item to be used (or mis-used :slight_smile:) to receive “key strokes”
  • Some sitemap entries to build the keypad
  • A rule to make it work

How it works:

  • An item is used to receive keystrokes. This item must be in the “TextInput” group for the rule to use it. The target text item name is specified in the Label for this keypad item (not the best use of labels either)
  • The sitemap uses a map to send text “keystrokes” to the keypad item
  • The rule updates the target item on each keystoke (there is a cursor implemented to edit the existing input)
  • When the user presses “done”, a command with the text is sent to the target item.

Benefits:

  • No unauthenticated rest api calls
  • Works wherever the sitemap is available (local, remote, etc)

Drawbacks:

  • The sitemap has to contain a full keypad map for every item needing this (copy & paste)
  • If the keypad is too wide, it will not fit on a portrait orientation screen (as in the snapshot above)
  • Concurrency: the item is not meant to be edited from two devices at the same time (for obvious reasons…)

The rule ("rules/textinput.rules"):

import org.eclipse.smarthome.model.script.ScriptServiceUtil

var registry = ScriptServiceUtil.getItemRegistry()

rule "Text Input"
when
    Member of TextInput received update
then
    var update = triggeringItem.state.toString()
    if (update == "") return;

    logDebug("TextInput", "{}: {}", triggeringItem.name, update)

    var target = registry.get(triggeringItem.label)

    if (target !== null) {
        var text = target.state.toString()
        if (text == "" || text == "NULL") text = "_"
        else if (!text.contains("_")) text += "_"

        if (update.length() == 1) {
                text = text.replaceFirst("_", update + "_")
        }
        else if (update == "RIGHT") {
                text = text.replaceFirst("_(.)", "$1_")
        }
        else if (update == "LEFT") {
                text = text.replaceFirst("(.)_", "_$1")
        }
        else if (update == "DELETE") {
                text = text.replaceFirst("._", "_")
        }
        else if (update == "DONE") {
                text = text.replaceFirst("_", "")
        }

        text = text.substring(0, 1).toUpperCase() + text.substring(1).toLowerCase().replace("  ", " ").split(" ").reduce([capitalized, word | capitalized + " " + word.substring(0, 1).toUpperCase() + word.substring(1)])

        if (text.contains("_")) target.postUpdate(text)
        else target.sendCommand(text.trim())
    }

    triggeringItem.postUpdate("")
end

A group (“items/textinput.items”):

// Group used in rule
Group TextInput

Some text items (“items/test.items”):

String TestText "[%s]"
String TestText_Input "TestText" <empty> (TextInput)

In the sitemap:

        Text item=TestText
        Switch item=TestText_Input label="" mappings=[1="1",2="2",3="3",4="4",5="5",6="6",7="7",8="8",9="9",0="0",DELETE="Del"]
        Switch item=TestText_Input label="" mappings=[Q="Q",W="W",E="E",R="R",T="T",Y="Y",U="U",I="I",O="O",P="P","'"="'"]
        Switch item=TestText_Input label="" mappings=[A="A",S="S",D="D",F="F",G="G",H="H",J="J",K="K",L="L","Ñ"="Ñ",DONE="Done"]
        Switch item=TestText_Input label="" mappings=[LEFT="<",Z="Z",X="X",C="C",V="V",B="B",N="N",M="M",RIGHT=">"," "=" "," "=" "]

PS: the rule is using the item registry to get item objects directly from the item name, without these items needing to be in a specific, known group. This is not a pretty much documented or known feature, but I find it quite useful in my rules.

2 Likes

Jozef,
I can’t help you. It may be possible, but I don’t know Javascript. I just managed to make this work from the starting point provided eirlier in the thread.

OK thanks.

I encountered a problem in OpenHab 2.4 stable with this nice trick. I have been using it to input an email address into String in BasicUI, see original post. Since 2.4 the formatting has changed and messes up the html view. I think this is due to the changes in Webview, which now adds an icon and text title AND it adds a new ‘div’ with is 2 columns. It stopped as well showing the Icon. See attached screenshot.


My html knowledge isn’t good enough to fix this. Any hints ?

1 Like

Hi Mark,
I’m beginner, I see your example very well, but I haven’t comprehend how to configure “PVEmeter1” and “PVEmeter2” items.
Can you explain this?
Thanks.

This workaround is great and gives me the ability to do many things with it in the future. Thanks for the implementation, it works great!
One thing though, I have set mine up to look like a number pad. The # and * symbols on the phone pad are replaced with del and done. If I enter the number 1 and hit done, the sent value is 1_, until I hit done one more time.

How would you go about having the _ removed? I cannot just have spaces because of the replacement code you have. I am not familiar enough to figure it out. Would it be possible to only have the leading _ if nothing is in the field? How would you substitute whatever number or letter is currently in the field for the _ after the first entry?

thanks for any help. This is a pretty great workaround.

Hi Mark,
I have implemented your script and it works without problems. Changed to input field from type “text” to “password” - so it will mask the input.
Your are suing several style sheets like “…/basicui/mdl/material.min.css” - I don’t find them in my installation. Could you please provide them?
Thanks for your reply
Georg

1 Like

Got mine working as below
Screenshot from 2020-01-13 22-18-39