on_touch_down problems with dynamic created widgets in kivy - kivy

I'm new to kivy and need some assistance with the following problem. I adding numbers/operators as widgets (labels) dynamically and at a random position to a layout(FloatLayout). The idea is that when I clicked on a number/operator it will draw a circle around the number/operator. I get some very strange behaviour. Does not matter what number/operator I click the selection circle is only drawn around the last added label. Then to confuse me even more the other number/operator is circled if I press on some random point on the screen
following is the core of my code:
class SelectedObject(Label):
selected = BooleanProperty()
refresh = BooleanProperty()
def __init__(self, **kwargs):
super(SelectedObject, self).__init__(**kwargs)
self.center_x = randint(0, Window.width/2)
self.center_y = randint(0, Window.height/2)
self.bind( refresh = self.redraw )
def redraw(self, *args):
#print('Redraw for: ' + self)
self.canvas.after.clear()
if self.selected:
with self.canvas.after:
Line(circle=(self.center_x, self.center_y, 20))
self.canvas.ask_update()
def on_touch_down(self, touch):
print("touch#: " + str(touch))
if not self.collide_point(touch.x, touch.y):
return False
print("yip: " + self)
self.selected = not self.selected
self.refresh = not self.refresh # force a redraw
return True
class GameNumber(SelectedObject):
pass
class Operator(SelectedObject):
pass
class GameApp(App):
numberArr = ListProperty([])
operatorArr = ListProperty([])
def build(self):
f = FloatLayout()
#populate numberArr and operatorArr
self.buildLevel()
for number in self.numberArr:
numberItem = GameNumber(text = str(number))
f.add_widget(numberItem)
for operator in self.operatorArr:
f.add_widget(Operator(text = operator))
return f

The problem here is that you have not set sizes to the labels. So each label takes up as much space as it can and the last label being on top, it gets the circle.
You need to pass each GameNumber and Operator some sort of size_hint and/or size. For example, if you want each label to be 10 by 10, you can do something like this: numberItem = GameNumber(text=str(number), size_hint=(None, None), size=(10, 10)). You can set their size relative to the window size by for example setting size_hint=(0.1, 0.1).
Remember that size_hint is always (1, 1) by default, so you need to change it something else if you want your widgets to be smaller than the space of the container and set size_hint=(None, None) if you want to set a fixed size yourself.
If you want to position the labels randomly around the screen, take a look at pos_hint, which is more convenient than playing with the size of the window directly. Also, remember that there's a chance that multiple labels might get on top of each other or at the very borders of the window or even outside if you are not careful.
EDIT: To help you find the source of these kind of problems (that usually relate to layout issues), take a look at Kivy Widget Area Display

Related

resize listbox in PySimpleGui based on length of list

I'm trying to update the Listbox in PySimpleGUI to resize based on length of list but the update(size=len(mylist) says that size is not an allowed argument. Any work around to this?
I've seen some people try to make the window/layout into a function but I'm not sure if that's the right approach.
Thanks in advance.
Basically, the height or the width of a Listbox element should not be revised after initialized, or the size of window will be also changed and maybe out of screen.
There's no option provided to change the height or the width of the Listbox element in PySimpleGUI, but you can do it by tkinter code, element.Widget.configure(height=height, width=width).
Example Code
import PySimpleGUI as sg
name_list = sorted(['James', 'Robert', 'John', 'Michael', 'David', 'William', 'Richard', 'Joseph', 'Thomas', 'Charles'])
layout = [
[sg.Input('', key='Name'), sg.Button('Add')],
[sg.Listbox(name_list, size=(20, len(name_list)), expand_x=True, key='Names')],
]
window = sg.Window('Title', layout, finalize=True)
window['Name'].bind('<Return>', ' Return')
while True:
event, values = window.read()
if event == sg.WINDOW_CLOSED:
break
elif event in ('Add', 'Name Return'):
name = values['Name']
if name and name not in name_list:
name_list = sorted(name_list+[name])
window['Names'].Widget.configure(height=len(name_list))
window['Names'].update(values=name_list)
window.move_to_center()
window.close()

Jetpack Compose - Row Clipping Children When Width Increases

Here on the right , I have a list of items in a composable , Every item is inside a row , All the items are inside a column
All the children of the are getting clipped to fit the screen which I don't want , I want these items to render completely even if outside of screen since I have a zoomable container above them
As you can see how text in the text field is all in one line vertically rather than expanding the width , This is the problem
Code :
Row(
modifier = modifier.zIndex(3f),
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.Center,
) {
SimpleNodesList(
modifier = Modifier.padding(8.dp),
parentNode = state.center,
nodes = state.center.left,
renderRight = false,
)
SimpleNode(node = state.center, parentNode = null)
SimpleNodesList(
modifier = Modifier.padding(8.dp),
parentNode = state.center,
nodes = state.center.right,
renderLeft = false
)
}
Simple Nodes List is a column of rows , I have one column on left and one on the right , If the width of the left column increases , right row get's clipped by the screen
Using this modifier does the job for the row , In my case I also needed this layout modifier , wrapContentSize(unbounded = true) was working but children weren't clickable for some reason outside the bounds of the zoom container !
I also had to create a modifier zoomable rather than use a zoomable box , so the zoomable touch events would be dispatched on the this composable rather than the parent !
modifier = Modifier
.layout { measurable, constraints ->
val r =
measurable.measure(constraints = constraints.copy(maxWidth = Constraints.Infinity))
layout(r.measuredWidth, r.measuredHeight, placementBlock = {
r.placeWithLayer(0, 0, 0f) {
}
})
}
.wrapContentSize(unbounded = true)
If you are using hard-coded width for the text, applying Modifier.wrapContentSize() on every container might do the job
Use SimpleFlowRow in place of Row. It will fix the clipping issue.

How to align data points in shinobichart based on bars frame in iOS

I'm developing an iOS application and using shinobichart for iOS to display data. But I'm stuck with positioning the datapoints outside or inside the bar based on the bar frame.
I'm stuck in positioning the data point labels inside the bar or outside the bar based on bar frame. If bar is big enough to accommodate the data point I need to position the data point inside bar or else outside the bar as in the below image
In - (void)sChart:(ShinobiChart *)chart alterDataPointLabel:(SChartDataPointLabel *)label forDataPoint:(SChartDataPoint *)dataPoint inSeries:(SChartSeries *)series we need to update data points if we wish as per shinobi documentation. But what logic can help to solve such an alignment of data points.
Also I tried to with the following official shinobi example to align data point aside https://www.shinobicontrols.com/blog/customizable-datapoint-labels
But unable to modify for the requirement.
Please help to solve this riddle.
The best way for you to achieve this is to use the alterDataPointLabel method as you have mentioned. I would do something like this:
func sChart(chart: ShinobiChart!, alterDataPointLabel label: SChartDataPointLabel!, forDataPoint dataPoint: SChartDataPoint!, inSeries series: SChartSeries!) {
if Int(label.text!) > [YOUR CUT OFF VALUE]
{
label.frame.origin.y += 15
label.textColor = UIColor.whiteColor()
}
else
{
label.frame.origin.y -= 15
label.textColor = UIColor.blackColor()
}
}
This works best if you know the values your chart is going to be displayed. However as a more generic way of achieving it I would recommend comparing the y value of the data label's origin against y value of the chart canvas. Then for example you could set the it so it appears within the column if it the series was 90% of the canvas?

How to set element positions with dart_web_toolkit?

im new to dart and need to create a dynamic dom structure.
At the moment i use the dart_web_toolkit but im missing a position function for elements.
You can set the width and height but no position(top, left) for the element.
Am i missing something there, or can someone give me a solution for this?
Edit:
I have a Label with 2 Buttons in it and i can edit the Buttons size with "setPixelSize"
but i need something like "b1.setPosition" and i cant find this method to position my elements (in this example buttons).
At the moment they are just put after another in relation to the Label.
final el = querySelector('#body');
ui.Label rootLabel = new ui.Label();
rootLabel.addStyleName("root-style");
ui.RootPanel.get().addWidget(rootLabel, el);
final el1 = querySelector('.root-style');
ui.Button b1 = new ui.Button();
b1.text = "Button 1";
b1.addStyleName("b1");
b1.setPixelSize(30, 50);
ui.RootPanel.get().addWidget(b1, el1);
ui.Button b2 = new ui.Button();
b2.text = "Button 2";
b2.addStyleName("b2");
b1.setPixelSize(60,60);
ui.RootPanel.get().addWidget(b2, el1);
I just looked a bit thought the code of https://github.com/akserg/dart_web_toolkit/blob/afac7aac09e3bcd9d3e1f926815eb85040e46e07/lib/src/ui/button_base.dart
and it seems you should get the Element instance by calling b1.getElement() which should allow to access all elements properties like
b1.getElement().style
..position = 'absolute'
..top = '10px'
..left = '25px';
not tested though.

awesome wm taglist size

Can't find any manual about changing width of taglist element size.
Taglist element is wider than icons I had set. It looks really awful =(
Screenshot: http://s12.postimg.org/fkva7xywd/Screenshot_16_02_2014_16_04_07.png
Taglist element consist of icon, text and gap between them. This gap defined in awful.widget.common.list_update function in line
m = wibox.layout.margin(tb, 4, 4)
Despite you have no text, double gap is still here. To solve this problem you can copy list_update function to your rc file, fix it and send as fifth(!) argument in awful.widget.taglist.
just tell your imagebox not to be resizable, example:
wibox.widget.imagebox(beautiful.clock, false)
or you can even resize you wibox:
mywibox[s] = awful.wibox({ position = "top", screen = s, height = 32 })
you just need to modify height value
or another method using wibox.layout.constraint:
clock_icon = wibox.widget.imagebox(beautiful.clock, true)
local const = wibox.layout.constraint()
const:set_widget(clock_icon)
const:set_strategy("exact")
const:set_height(16)
then, instead of adding your icon to the layout, just add the constraint.

Resources