[openLuup] Multiple lines in variables

[therealdb]

Hey @akboer I'm working on a new feature for the virtual HTTP device plug-in and I noticed that variables are cut in UI if very long and multi-line values are not supported.

Plus, RGB are missing a dedicated way to set color and temperature.

[akbooer]

Variable values should be able to be as long as you like. For some display and logging purposes they are truncated.

Not sure I understand your RGB question, though.

[therealdb]

Yes, but I cannot add or edit values with multiple lines.

Regarding rgb, it’s missing the color picker.

[akbooer]

Not input from the UI, and control characters are wrapped to spaces for display.

But this code works as expected:

luup.variable_set("foo","bar",[[garp
  foo
  bung]],2)

x = luup.variable_get("foo","bar",2)

print(x)

giving as output:

garp
  foo
  bung

[therealdb]

@akbooer I know

I was suggesting a skinned textarea instead of an input. With auto height and fixex non-height it will wrap automatically and provide room for new lines as well.

[akbooer]

For what? Device variable fields?

[therealdb]

@akbooer yes!

[akbooer]

AFAIK, the resizable text area doesn't work in a table, which is how the variables are rendered. At least, when I tried it, it didn't.

[akbooer]

Seems like the right solution would be to write a proper UI for your plugin?

[therealdb]

@akbooer I might do that, in the future. I might also submit a PR to support this in the device pages. It's a couple of CSS lines, after all.

[akbooer]

@therealdb said in [openLuup] Multiple lines in variables:

I might also submit a PR to support this in the device pages. It's a couple of CSS lines, after all.

I should like to see those, because I tried and it didn't work (because it's a table element.)

Probably my ineptitude with CSS.

[therealdb]

@akbooer
Just use this

textarea {
	height: 20px;
	min-height: 20px;
	max-height: 400px;
	width: 100%;
	min-width: 100%;
	max-width: 200px;
}

Perfectly fine on Chrome.

Since you have size=28 on the input, just set <textarea cols="28" /> to have the same layout.

I'll probably just force both textarea and input with a special CSS style to have them stop at 200px with max-width. Height on the textarea is still resizable.

[akbooer]

Super, thanks. I'll give it a go. I was trying to do it within the confines of the W3.CSS framework.

[therealdb]

@akbooer feel free to ping when you'll need a CSS. I'm working with these things since '95, so I definitely have more skills here than in LUA's coding. And it's a pleasure for me to give back, since you've gifted us with so many things

[akbooer]

Thanks so much.

I'm starting to look at this as we speak...

...currently I have a resizable text box, but the current values don't appear!

Early days, but I"m sure I"ll need help.

[therealdb]

@akbooer said in [openLuup] Multiple lines in variables:

...currently I have a resizable text box, but the current values don't appear!

that's because HTML is weird

<textarea>value</textarea>

instead of

<input value="value" />

[akbooer]

Yup, just found that out for myself.

I think I can set this up as a particular class of textbox (rather than all?)

[therealdb]

Yep, you can. Better not be aggresive.

[akbooer]

Making some progress.

The down-side is, of course, that <RETURN> doesn't now complete entry of data, which is quite a change for the user experience.

Another problem I am running into is that the height of the box is not correctly adjusted for multi-line data, so you only see the first line.

I could put a version into the testing branch if necessary, for others to try out.

[PerH]

In general, i'd prefer that the whole table could be edited, and only saved (with luup reload) with a SAVE button at the bottom. Same with Attributes page..