chjj
Question regarding auto positioning/layout
Does blessed have an auto position feature already, i.e. I'd give it
{ top: 'auto', left: 'auto', shrink: 'flex' }
for multiple items within a screen and it would auto position them.
If this is not a blessed feature I'm looking for some feedback on how to implement this i.e. in a blessed-layout module like:
- how do I get actual width/height of a child (in percents of the screen)
- is there a way to suppress flicker on overlap
- would the best way to do layout to group items or to create a grid (rows/columns)
Blessed does not have an auto-position feature. It's very tough to decide exact behavior. Blessed could implement some very primitive auto positioning easy enough, but it wouldn't be anything as complex as the box model positioning in css. It would be more like position: inline for everything probably. I'll leave this open because it's a feature I've considered for a while.
Hi, Blessed is great stuff!
I was thinking about something similar. Essentially, one could build a "packer" for layouts once the elements been rendered. I saw some note that you build the UI from bottom up, children first. I really like the "shrink: true" option, that seems to do some autosizing of basic widgets. However, there is no "packer" widget/container. I was looking at what would be needed for this, but was not able to ascertain the size of any UI element even after it's been rendered.
I made three checkboxes, rendered in various sizes and content and positions (changed test/widget-form.js)
var i = 3; function makeRadio(name) { var radio1 = blessed.radiobutton({ parent: form, mouse: true, keys: true, shrink: true, style: { bg: 'white' }, height: i-2, left: i-3, top: (i++)*3-6, name: name, content: name, }); return radio1; }
var x = makeRadio('AAAA'); var y = makeRadio('BBBBB'); var z = makeRadio('CCCCCC');
top, bottom, width,height, left, right, content
3, 37, 91, 1 0, 0 "AAAA" 6, 33, 90, 2 1, 0 "BBBBB" 9, 29, 89, 3 2, 0 "CCCCCC"
I cannot interpret the values, the bigger widget have smaller values, none of them related to actual width size, length. The only values that makes sense are "top" and "left".
I've read the docs and it says some values are calculated but I can't interpret them.
Source code reading next I guess!
I'm not sure what your question is. Without seeing the dimensions and position of form, I can't tell you if those values are correct or not. Could you explain more?
cc @secrettriangle, @yaronn, @mscdex
I whipped up a Layout element last night when I couldn't sleep. The first real auto-positioning feature for blessed. It's very dynamic: anyone can provide their own positioning callback. The default positions elements similar to inline-block.
- https://github.com/chjj/blessed#layout-from-element
- https://github.com/chjj/blessed/blob/master/lib/widgets/layout.js
Thoughts?
Definitely think we need something like this. Doing something kind of silly here so maybe this will make it cleaner. I'll try it out soon.
I'm thinking of dropping the Layout element and just adding the renderer option to all elements, along with builtin layout options: grid, and inline.
Is there a way to place two boxes on a parent box, and put box 2 at the bottom of box 1 even if box 1 has 'shrink' height?
Hello, what about a paragraph that takes one line on desktop but two on mobile ? The next element below won't automatically preserve the padding. Thanks
