Forum Archive

ScrollView pythonista-anchors

DavinE

Hey Guys,

I have an Problem with my ScrollView in Combination with anchors..
This is my Code Example:


l1 = size_to_fit(ui.Label(name='test', text='Anzahl aller eingelsenen Daten', background_color=accent_color, font=('Arial Rounded MT Bold', 12)))

text = ui.TextView(name='test', text='kjlsadfjlkabsd')

ScrollView = ui.ScrollView(name='ScrollViewTest', content_size=(1000,500), frame=(0,0,400,200), bg_color='yellow')
dock(l1).top_left(ScrollView)
attach(l2).right_of(l1)

attach(text).below(l1)

dock(ScrollView).top_left(align_area)

dock(l3).center(align_area)

My Problem is i can scroll... but my content stay be there...

When i use this code example without anchors it works....
I Hope anyone See my issue ;)

Best greetings

mikael

@DavinE, couple of things here.

First, in order to get scrolling, the scroll view has to:

  • have content_size bigger than the visible area
  • have a background color to get touches

Second, the scroll view is a complex thing where the ”outer” part is not the scrolling part, so if you anchor things to the scroll view, they will only move if the scroll view moves, not with the ”inner” scrolling area as you would like. The scrolling area is not conveniently available as a target for the anchors.

Thus we need to first add another view to the scroll view, then use that for the anchors, as in the example below:


import ui
from anchors import dock, attach

# Must have bg color to get touches
sv = ui.ScrollView(background_color='black')

# Big enough to need scrolling
sv.content_size = ui.get_screen_size() * 2

v = ui.View()
v.width, v.height = sv.content_size
sv.add_subview(v)

label1 = ui.Label(
    text='One',
    background_color='white',
    alignment=ui.ALIGN_CENTER,
)
label2 = ui.Label(
    text='Two',
    background_color='white',
    alignment=ui.ALIGN_CENTER,
)
dock(label1).top_left(sv)
attach(label2).below(label1)

sv.present('fullscreen')
DavinE

hey @mikael ;)
What did i do without you :D ^^

This helps me a lot to find my solution on the ScrollView Perfect :D

DavinE

@mikael

i don't know is it okay to post this Question here....
maybe i need a new Topic ?

i Have This MYSQL Code here.

self.cur.execute("SELECT `manufacturer`, SUM(`count`) FROM `datanorm` GROUP BY `manufacturer`")
for counterLoop, arrayManufacturerTemp in enumerate(self.cur, start=1):
    print(f'counterLoop -- {counterLoop}')
    print(f'arrayManufacturerTemp[0] - manufacturer -- {arrayManufacturerTemp[0]}')
    print(f'arrayManufacturerTemp[1] - manufacturerCount -- {arrayManufacturerTemp[1]}')

this give me that output:

counterLoop -- 13
arrayManufacturerTemp[0] - manufacturer -- Kaiser GmbH & Co. KG
arrayManufacturerTemp[1] - manufacturerCount -- 1

i don't know is it possible to do that about what im thinking..
but here is my example what i want...:

            counterLoop=13
            labelcounterLoop = size_to_fit(ui.Label(
                text=arrayManufacturerTemp[0],
                #background_color='white',
                alignment=ui.ALIGN_LEFT,
                text_color='white',
            ))
            counterLoop=14
            labelcounterLoop = size_to_fit(ui.Label(
                text=arrayManufacturerTemp[1],
                #background_color='white',
                alignment=ui.ALIGN_LEFT,
                text_color='white',
            ))
            counterLoop=15
            labelcounterLoop = size_to_fit(ui.Label(
                text=arrayManufacturerTemp[0],
                #background_color='white',
                alignment=ui.ALIGN_LEFT,
                text_color='white',
            ))
            counterLoop=16
            labelcounterLoop = size_to_fit(ui.Label(
                text=arrayManufacturerTemp[1],
                #background_color='white',
                alignment=ui.ALIGN_LEFT,
                text_color='white',
            ))

            attach(labelcounterLoop).below(labelcounterLoop)
            attach(labelcounterLoop).right_of(labelcounterLoop)
            attach(labelcounterLoop).below(labelcounterLoop)
            attach(labelcounterLoop).right_of(labelcounterLoop)

so my Querry gives me some content what i will display with attach....
the fist Label is my Name (Names are below each other)
the Second Label is my Count (Counts are right_of Names for each other)

I dont have an Idea to get this in an For loop.... (see above to MYSQL Query)

i hope you Guys understand what i want to say :D
thanks again and greetings

ccc

for i, name, count in enumerate(self.cur, start=1):

DavinE

@ccc said:

for i, name, count in enumerate(self.cur, start=1):

I think you dont get me Right ?

Or can i use i as Variable ?

i = size_to_fit (xxxxx)

I dont think so...

ccc

Let's assume that you have the following function to reduce the boilerplate code:
```
def make_label(text: str) -> ui.Label:
return size_to_fit(ui.Label(
text=text,
#background_color='white',
alignment=ui.ALIGN_LEFT,
text_color='white',
))
````
Now, rewrite the rest of your code to use that function and your question will become clearer.

JonB

@DavinE have you used TableViews before? It really seems like you are trying to make a tableview by yourself by using. Scrollview and labels.

Tableview takes care of most of the hard positioning bits, and you just need to handle each cell.

DavinE

@ccc said:

Let's assume that you have the following function to reduce the boilerplate code:
```
def make_label(text: str) -> ui.Label:
return size_to_fit(ui.Label(
text=text,
#background_color='white',
alignment=ui.ALIGN_LEFT,
text_color='white',
))
````
Now, rewrite the rest of your code to use that function and your question will become clearer.

ahh i think i know what do you mean @ccc but that's not really my issue...
My Issue is how can i combine my code above with the attach Function....
attach need once the Label Name Label1 and for the below() the Label Name above...
and when i use my for Loop from MYSQL.... i don't have fix Variable to call the attach.... that i do not understand right..

or im on the wrong way ?

ccc

It is easier to debug Python code than it is to debug English prose.

DavinE

@JonB said:

@DavinE have you used TableViews before? It really seems like you are trying to make a tableview by yourself by using. Scrollview and labels.

Tableview takes care of most of the hard positioning bits, and you just need to handle each cell.

My ScrollView need i because its a lot of rows....
TabelViews have only one column or ? so far i know..

DavinE

@ccc said:

It is easier to debug Python code than it is to debug English prose.

sry i don't can explain it better......

ccc
def make_label(text):
    return f"label({text})"

data_from_mysql = (("Acme", 11), ("Bart's", 22), ("Carls's", 33))
labels = []
for name, count in data_from_mysql:
    labels.append(make_label(name))
    labels.append(make_label(count))

print(labels)

['label(Acme)', 'label(11)', "label(Bart's)", 'label(22)', "label(Carls's)", 'label(33)']

OK... So now we have a list of six labels... What is the question?

cvp

@DavinE said:

TabelViews have only one column or ? so far i know

I also think that a TableView would be better and there are in this forum some topics where you can find how to support multiple columns, like this one

JonB

it sounds like you don't even need multiple columns, you just need a title and a subtitle. more complex cells you can design yourself, using the content_view.

This example shows the four cell styles -- value1, value2, subtitle, and default. For bonus points, you would have the tableview_cell_for_row , etc, actually look up durectly from your sql database .

import ui,sys

PY3 = sys.version_info[0] >= 3
if PY3:
    basestring = str

class DetailTextDataSource(ui.ListDataSource):
    def __init__(self, items, style):
        self.style=style
        ui.ListDataSource.__init__(self,items)
    def tableview_cell_for_row(self,tv,section,row):
        item = self.items[row]
        cell = ui.TableViewCell(self.style)
        cell.text_label.number_of_lines = self.number_of_lines
        if isinstance(item, dict):
            cell.text_label.text = item.get('title', '')
            try:
                cell.detail_text_label.text = item.get('subtitle', '')
            except AttributeError:
                pass
            img = item.get('image', None)
            if img:
                try:
                    if isinstance(img, basestring):
                        cell.image_view.image = ui.Image.named(img)
                    elif isinstance(img, ui.Image):
                        cell.image_view.image = img
                except AttributeError:
                    pass
            accessory = item.get('accessory_type', 'none')
            cell.accessory_type = accessory
        elif isinstance(item,tuple):
            cell.text_label.text = str(item[0])
            cell.detail_text_label.text = str(item[1])
        else:
            cell.text_label.text = str(item)
        if self.text_color:
            cell.text_label.text_color = self.text_color
        if self.highlight_color:
            bg_view = ui.View(background_color=self.highlight_color)
            cell.selected_background_view = bg_view
        if self.font:
            cell.text_label.font = self.font
        return cell

items=[{'title':'Strawberries','subtitle':'3.99','image':'plf:Enemy_Ladybug'},
        {'title':'Blueberries','subtitle':'2.99','image':'plf:Enemy_Snail_shell'},
        {'title':'Honey','subtitle':'4.50','image':'plf:Enemy_Bee'},
        {'title':'Fresh fish','subtitle':'6/lb','image':'plf:Enemy_FishGreen'},
]

mainview=ui.View(frame=(0,0,1024,768))
S1=DetailTextDataSource(items,'value1')
t=ui.TableView(frame=(0,0,300,600))
t.data_source=S1
t.delegate=S1
mainview.add_subview(t)

S2=DetailTextDataSource(items,'value2')
t2=ui.TableView(frame=(310,0,200,600))
t2.data_source=S2
t2.delegate=S2
mainview.add_subview(t2)

S3=DetailTextDataSource(items,'subtitle')
t3=ui.TableView(frame=(520,0,200,600))
t3.data_source=S3
t3.delegate=S3
mainview.add_subview(t3)

S4=DetailTextDataSource(items,'default')
t4=ui.TableView(frame=(740,0,200,600))
t4.data_source=S4
t4.delegate=S4
mainview.add_subview(t4)

mainview.present()
DavinE

@JonB, @cvp

Thanks for your Help ;)
I found my Solution
greetings