Border (outline) for custom widget with image and image-button

[Shoumik Das]

Hi, I am building a simple Kivy app with a custom widget consisting of a horizontal box layout with an image and an image-button placed side-by-side. I am also trying to draw a line around each widget (image, image-button) to create borders. However, nothing is getting rendered on the screen. Can you please advise where I am going wrong?

Kivy Code

<ImageButton>:

keep_ratio: True

<CustomActionButton>:

size_hint_x: 0.05

size_hint_min_x: '96dp'

<p3Page>:

orientation: 'horizontal'

size_hint_x: 0.95

size_hint_y: None

pos_hint: {'center_x':0.5}

height: '192dp'

canvas.after:

Color:

rgba: 255/255, 255/255, 255/255, 1

Line:

width: dp(1)

rectangle: (*self.pos, self.width, self.height)

Image:

source: 'images/picture-96.png'

ImageButton:

size_hint_x: 0.4

source: {'normal': 'images/trash-96.png', 'down': 'images/trashgreen-96.png'} [self.state]

#on_release: root.delete_page()

<p3MainScreen>:

name: 'p3main'

canvas.before:

Color:

rgba: 255/255, 255/255, 255/255, 1

Rectangle:

pos: self.pos

size: self.size

BoxLayout:

id: p3_layout

orientation: 'vertical'

BoxLayout:

id: actionbar_layout

size_hint_y: None

height: '96dp'

ActionBar:

id: p3_actionbar

pos_hint: {'top': 1}

size_hint_y: 1 # Fill up the available space for the action bar.

background_image: ''

background_color: 195/255, 60/255, 35/255, 1

ActionView:

use_separator: True

ActionPrevious:

title: 'P3'

with_previous: False

ActionOverflow:

CustomActionButton:

id: about-button

important: True

source: {'normal': 'images/info-96.png', 'down': 'images/infogreen-96.png'} [self.state]

#on_release: root.to_statusscreen()

BoxLayout:

id: display_layout

ScrollView:

do_scroll_x: False

do_scroll_y: True

scroll_type: ['bars', 'content']

bar_width: '15dp'

BoxLayout:

id: page_content

orientation: 'vertical'

height: self.minimum_height

size_hint_y: None

p3Page:

BoxLayout:

id: bottombar_layout

size_hint_y: None

height: '96dp'

orientation: 'horizontal'

ImageButton:

id: p3_add

size_hint_x: 0.05

size_hint_min_x: '96dp'

source: {'normal': 'images/plus-96.png', 'down': 'images/plusblue-96.png'} [self.state]

#on_release: root.add_image()

Label:

ImageButton:

id: p3_save

size_hint_x: 0.05

size_hint_min_x: '96dp'

source: {'normal': 'images/save-96.png', 'down': 'images/save-close-96.png'} [self.state]

#on_release: root.save_file()

Python Code

import kivy

from kivy.core.window import Window

from kivy.config import Config

Config.set('graphics', 'resizable', True)

from kivy.app import App

from kivy.uix.boxlayout import BoxLayout

from kivy.uix.screenmanager import Screen

from kivy.uix.button import Button

from kivy.uix.behaviors import ButtonBehavior

from kivy.uix.image import Image

from kivy.uix.label import Label

from kivy.uix.actionbar import ActionBar, ActionItem

from kivy.uix.textinput import TextInput

from kivy.uix.popup import Popup

from kivy.uix.scrollview import ScrollView

import datetime

from PIL import Image as p3Image

class ImageButton(ButtonBehavior, Image):

pass

class CustomActionButton(ImageButton, ActionItem):

pass

class p3Page(BoxLayout):

pass

class p3MainScreen(Screen):

pass

class silp3App(App):

def build(self):

p3obj=p3MainScreen()

return p3obj

if __name__ == '__main__':

silp3App().run()

Thanks

[Elliot Garbus]

Use the canvas of each widget to draw the border. You are using the enclosing layout, so there will only be one rectangle where you want two. 

Sent from my iPad

On Dec 27, 2020, at 9:53 AM, Shoumik Das <shoum...@gmail.com> wrote:

Hi, I am building a simple Kivy app with a custom widget consisting of a horizontal box layout with an image and an image-button placed side-by-side. I am also trying to draw a line around each widget (image, image-button) to create borders. However, nothing is getting rendered on the screen. Can you please advise where I am going wrong?

--
You received this message because you are subscribed to the Google Groups "Kivy users support" group.
To unsubscribe from this group and stop receiving emails from it, send an email to kivy-users+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/kivy-users/f8d93ebc-b01b-4222-9ce3-0d4ce7350616n%40googlegroups.com.

[Shoumik Das]

Hi Elliot, I used the canvas on each widget but I still do not get any border. Does there have to be a line color? I am also not able to view the image and image-button that I defined in the widget (p3Page). I get a blank white screen. I am placing the custom widget inside a scrollview. Here is a screenshot. The updated kivy code is also shared.

Current Kivy Code

<ImageButton>:

keep_ratio: True

<CustomActionButton>:

size_hint_x: 0.05

size_hint_min_x: '96dp'

<p3Page>:

orientation: 'horizontal'

size_hint_x: 0.95

size_hint_y: None

pos_hint: {'center_x':0.5}

height: '96dp'

canvas.after:

Color:

rgba: 255/255, 255/255, 255/255, 1

Line:

width: dp(1)

rectangle: (*self.pos, self.width, self.height)

Image:

source: 'images/picture-96.png'

keep_ratio: True

canvas.after:

Color:

rgba: 128/255, 128/255, 128/255, 1

Line:

width: dp(1)

rectangle: (*self.pos, self.width, self.height)

#on_release: root.about_info()

[Shoumik Das]

I can't see the screenshot embedded in my reply. Hence, re-attaching the file.

[Elliot Garbus]

Code attached below.  I made some changes to the canvas – but I think the issue was the name of some of the objects.

The python convention is that classes are in CamelCase.  I have had issues where screens do not behave correctly if not in the CamelCase.

When I changed the names things appeared.

 

 

 

from kivy.config import Config
Config.set('graphics', 'resizable', True)
from kivy.app import App

from kivy.lang import Builder

from kivy.uix.boxlayout import BoxLayout
from kivy.uix.screenmanager import Screen

from kivy.uix.behaviors import ButtonBehavior
from kivy.uix.image import Image

from kivy.uix.actionbar import ActionBar, ActionItem

kv = """

<ImageButton>:
    keep_ratio: True


<CustomActionButton>:
    size_hint_x: 0.05
    size_hint_min_x: '96dp'

<P3Page>:

    orientation: 'horizontal'
    size_hint_x: 0.95
    size_hint_y: None
    pos_hint: {'center_x':0.5}
    height: '96dp'

    # canvas.after:
    #     Color:
    #         rgba: 0,0,0,1 # 255/255, 255/255, 255/255, 1
    #     Line:
    #         width: dp(1)
    #         rectangle: (*self.pos, *self.size)
    Label:
        # source: 'images/picture-96.png'
        # keep_ratio: True
        text: 'The Image'
        color: 1, 0, 0, 1

        canvas.after:
            Color:
                rgba: 128/255, 128/255, 128/255, 1
            Line:

                width: dp(2)
                rectangle: (*self.pos, *self.size)
    Label:
        size_hint_x: 0.4
        text: 'The Image Button'
        color: 1, 0, 0, 1
        #source: {'normal': 'images/trash-96.png', 'down': 'images/trashgreen-96.png'} [self.state]
        #on_release: root.delete_page()

        canvas.after:
            Color:
                rgba: 128/255, 128/255, 128/255, 1
            Line:

                width: dp(2)
                rectangle: (*self.pos, *self.size)


<P3MainScreen>:

                    P3Page:
                    P3Page:
                    P3Page:

        BoxLayout:
            id: bottombar_layout
            size_hint_y: None
            height: '96dp'
            orientation: 'horizontal'
            ImageButton:
                id: p3_add
                size_hint_x: 0.05
                size_hint_min_x: '96dp'
                source: {'normal': 'images/plus-96.png', 'down': 'images/plusblue-96.png'} [self.state]
                #on_release: root.add_image()
            Label:
            ImageButton:
                id: p3_save
                size_hint_x: 0.05
                size_hint_min_x: '96dp'
                source: {'normal': 'images/save-96.png', 'down': 'images/save-close-96.png'} [self.state]
                #on_release: root.save_file()

P3MainScreen:
"""

class ImageButton(ButtonBehavior, Image):
    pass


class CustomActionButton(ImageButton, ActionItem):
    

pass


class P3Page(BoxLayout):
    pass


class P3MainScreen(Screen):
    pass


class Silp3App(App):
    def build(self):
        return Builder.load_string(kv)


Silp3App().run()

 

 

 

 

From: Shoumik Das
Sent: Sunday, December 27, 2020 9:54 PM
To: Kivy users support
Subject: Re: [kivy-users] Border (outline) for custom widget with image and image-button

 

I can't see the screenshot embedded in my reply. Hence, re-attaching the file.

On Monday, December 28, 2020 at 10:20:49 AM UTC+5:30 Shoumik Das wrote:

Hi Elliot, I used the canvas on each widget but I still do not get any border. Does there have to be a line color? I am also not able to view the image and image-button that I defined in the widget (p3Page). I get a blank white screen. I am placing the custom widget inside a scrollview. Here is a screenshot. The updated kivy code is also shared.

 

 

Current Kivy Code

To view this discussion on the web visit https://groups.google.com/d/msgid/kivy-users/b65d3c7f-5ba4-486a-a8e4-92861431b89cn%40googlegroups.com.

 

[Shoumik Das]

You are correct, Elliot! Camel Case did the trick. The first starting letter had to be in upper case. Thank you very much.

[Shoumik Das]

One last question, though not related to the border. The action bar title seems to have a default font size. Is there a way to increase it?

To view this discussion on the web visit https://groups.google.com/d/msgid/kivy-users/90982787-428f-4fa2-be3b-2f9b10c49163n%40googlegroups.com.

[Elliot Garbus]

There is not a mechanism built in.  You can see the kv code used to create the default widgets in kivy/data/style.kv

Looking at the kv code, I created the code below.  Use at your own risk.  The kv code is unlikely to change – but I am using an undocumented id, to adjust the font size.

 

 

from kivy.app import App
from kivy.lang import Builder

from kivy.uix.actionbar import ActionPrevious
from kivy.properties import NumericProperty

kv = """
BoxLayout:
    orientation: 'vertical'
    canvas:
        Color:
            rgb: .3, .3, .3
        Rectangle:
            size: self.size
            pos: self.pos
    ActionBar:
        id: status_actionbar
        ActionView:
            use_separator: True
            FSActionPrevious:
                title: 'Action'
                with_previous: False
                font_size: 40
            ActionOverflow:
            ActionButton:
                id: status-button
                important: True
                text: 'One'
            ActionButton:
                id: accounts-button
                important: True
                text: 'two'
            ActionButton:
                id: bot-button
                important: True
                text: 'three'
                    
    Label:
        text: 'Action Bar Test'
    Label:
        text: 'height ' + str(status_actionbar.height)


"""


class FSActionPrevious(ActionPrevious):
    font_size = NumericProperty(15)

    def on_kv_post(self, base_widget):
        self.ids.title.font_size = self.font_size


class ActionBarTestApp(App):
    def build(self):
        return Builder.load_string(kv)

ActionBarTestApp().run()

On Monday, December 28, 2020 at 10:20:49 AM UTC+5:30 Shoumik Das wrote:

To view this discussion on the web visit https://groups.google.com/d/msgid/kivy-users/CAH1Ve%3DS8602it9v1SFSHdzg1y7gh_2mh2_%3DOi8A%2B2YDESpu%3DGg%40mail.gmail.com.

 

[Shoumik Das]

That helped. Thanks a lot!!