Custom Onscreen Keyboard

[andrewjfox]

Hi,

I'm working on a system that will have a small touchscreen (6.5" 640 x 480) and have the problem of how to get user data. I've started by having custom popups with onscreen keys in the popups, since the built in keyboard is impractical at the screen size being used. The number of popups is growing and I would like to use a generic data input.

In practice I would like to use the built in edit box and System.EntryDialog for some user input. When the user selects the box then the custom keyboard appears. As the user presses the keys the data goes straight to the edit box, the same as if the built in screen keyboard was in use.

Is it possible to build a custom onscreen keyboard that feeds input directly to the standard EntryDialog and edit boxes? If yes how to do it.

I'm guessing that these are Windows components so would have to somehow hook into the stdio stream, but am hoping for a simple solution.

Regards

A

[AzeoTech]

You can't create your own keyboard that attaches to the EntryDialog. As for edit boxes, that you can do, though please see the blog entry about using Edit boxes on main screens. I typically have a button press, that pops up a window with the keyboard and an edit box where the new value can be entered.

Here's the short of how to do it generically for numeric entry:

1) declare a string variable where you'll put the variable to be edited by the popup. For example:

global string popupVariable = ""

2) create a page for the popup with whatever graphics you want, called, say "keyboardPopup". You'll want a clear and enter button of course, and an edit box so the person can see what they are typing. Give the edit box a name so you can access it programmatically. For example, name it popupEditBox

3) In each of the "keys" you create, you'll need to change the strContents variable of the editbox appropriately. So, if the key is "1", you'd do: component.popupEditBox.strContents += "1"

4) for the Enter key, use this quick sequence:

execute(popupVariable + " = " + strtoDouble(component.popupEditBox.strContents))

page.keyboardPopup.closePopup()

5) create a sequence to popup the keyboard, say "popupKeyboard". It should be a sequence function that takes one parameter, the variable the popup should edit. Something like:

function popupKeyboard(string variable)
   popupVariable = variable
   // if you want the edit box to be populated with the current contents of the variable:
   component.popupEditBox.strContents = doubletoStr(evaluate(popupVariable))
   page.keyboardPopup.popupModal()

6) create a button to display the keyboard. It will have a quick sequence like:

popupKeyboard("myVariable")

[andrewjfox]

Thanks, and yes I did read and agree with comments on use of edit boxes.

I have been doing something similar to what you suggest, however your solution is a bit more elegant and reusable.

I was also interested in comments in blog regarding variable data and making it look like an edit box. I have been using the variable display with panel background to get the effect of a fixed size variable entry box. Works well although I would recommend making it into a user component to make it easier to reuse, otherwise you have to readjust the panel background to fit around the variable display every time you move the component, which is frequently during early layout development. Would love to see this built in to the variable component in future versions.

Regards

A

[AzeoTech]

Have you tried just using a variable value control with background color and border? Then use the Align parameter (which is only available from the Properties side window, not the main component properties) and set it to 1, 2 or 3. The default of 0 means auto and causes it to autosize. If any other are specified, you can manually size the component which is nice when you have backgrounds.

[andrewjfox]

Yes, I do use variable value components for some but

a) It's not possible to set a 3d border like a panel component to give that distinctive edit box look

I can't set the border to a different color than background

Using a panel as background is not that big a deal, it's only really a problem at design time when you're moving things a lot and trying out different layouts. Grouping helps but then need to ungroup to change settings etc.