KivyMD icon indicating copy to clipboard operation
KivyMD copied to clipboard

WIP - Do Not Merge - BackgroundColorBehavior Layer fix

Open podraco opened this issue 3 years ago • 27 comments

Fix for specific background behavior.

This fix ensures that the background layer is drawn before the active content of the widget..

Description of the problem

At some point during development, the background color layer was moved from the bottom layer to the middle layer, where most widgets with texture draw their data, since this behavior is stackable, it will be drawn after the previous behavior, in the case of the MDLabel, the background layer is drawn over the text texture layer.

Reproducing the problem

from kivy.lang.builder import Builder
from kivymd.app import MDApp


kv="""
FloatLayout:
    MDLabel:
        halign: "center"
        valign: "center"
        md_bg_color: (1,0,0,0.5)
        size: 120,64
        size_hint: None,None
        pos_hint: {"center": [0.5, 0.5]}
        text: "this is visible text"
        text_size: self.size
"""

class app(MDApp):
    def build(self, *dt):
        return Builder.load_string(kv)

app().run()

Screenshots of the problem

image here, we can se that the background color is drawn over the text layer, which means that the text will be hidden behind the texture if the alpha channel is 1.

Description of Changes

changed the layer where the background color is drawn, moved from canvas to canvas,before. Describe what changes you create to solve the problem.

Screenshots of the solution to the problem

image in this image, we set the alpha channel of the md_bg_color to 1 instead of the 0.5 that is on the example code.

Attach screenshots that demonstrate that your changes solved the problem.

podraco avatar Sep 29 '21 16:09 podraco

@podraco Let me check it out tomorrow...

HeaTTheatR avatar Sep 29 '21 17:09 HeaTTheatR

@podraco Your changes break the display of other widgets:

Снимок экрана 2021-09-30 в 14 20 18

HeaTTheatR avatar Sep 30 '21 11:09 HeaTTheatR

@podraco Снимок экрана 2021-09-30 в 14 22 13

HeaTTheatR avatar Sep 30 '21 11:09 HeaTTheatR

@podraco Your changes break the display of other widgets:

Снимок экрана 2021-09-30 в 14 20 18

if you read the buttons kv code, you can see that the code is broken for those, they should be drawing inside the "before" layer of the cnavas, not the "current."

all tho i'm not sure how the canvas change broke the chips, i don't see them working before or after the change, it might be something else, as its the exact same image you sent me. this is done from the master.zip file. image

podraco avatar Sep 30 '21 17:09 podraco

@podraco Снимок экрана 2021-09-30 в 20 04 06

HeaTTheatR avatar Sep 30 '21 17:09 HeaTTheatR

@podraco Снимок экрана 2021-09-30 в 20 04 06

true i forgot there is a clear instruction.

podraco avatar Sep 30 '21 17:09 podraco

ok i'm doing some deep research and so far i can see that the color behavior is not respected across the app, instead, there are multiple individual instances of the same "standard" behavior. so i'm updating most of the widgets i see with the issue.

This merge request will be set to WIP on the meantime,

As I debug and check, whatever breaks.

This merge request will only concern about the color management behavior.

podraco avatar Sep 30 '21 21:09 podraco

@podraco It's a good news!

HeaTTheatR avatar Sep 30 '21 21:09 HeaTTheatR

@podraco What changes have occurred? What do your new commits fix/add? Or is this PR still in development?

HeaTTheatR avatar Oct 01 '21 20:10 HeaTTheatR

this PR is still in development, i'm still checking that the widgets are not broken so far i removed canvas instructions from the bacground color behavior as most of the widgets in the lib use the Clear insturction to remove them, i'm thinking of letting a small call that adds the instructions after the instance is created that is by deffault True. what do you think?

podraco avatar Oct 03 '21 21:10 podraco

@podraco If this PR fixes the current problems, then that's a good thing.

HeaTTheatR avatar Oct 03 '21 21:10 HeaTTheatR

this fixes every widget because the color behavior draws over the current layer, and widgets such as buttons, text and others, are affected by this. specially MDLabel and MDIcon are affected by this, hiding the text texture below the background texture.

podraco avatar Oct 04 '21 14:10 podraco

it's still a work in progress

podraco avatar Oct 04 '21 14:10 podraco

Ok, so far, the current Color management issue is now fixed, I reviewed all the Kitchen sink demo and i didn't find anything out of the usual. The same issues that were present and were not about the color management are still present, except for the backdrop layout, i updated it, so it would show the canvas properly.

For some reason, the canvas instruction from the front layer color was set to [0,0,0,0] whenever the theme changed, i'm not sure why.

Besides that, it looks ready to be merged, the current conflict is about the same commit we did, it removed the binding method to a deprecated and removed property.

i would appreciate if you could review this, so we can polish the remaining details.

podraco avatar Oct 04 '21 20:10 podraco

Ok, so far, the current Color management issue is now fixed, I reviewed all the Kitchen sink demo and i didn't find anything out of the usual. The same issues that were present and were not about the color management are still present, except for the backdrop layout, i updated it, so it would show the canvas properly.

For some reason, the canvas instruction from the front layer color was set to [0,0,0,0] whenever the theme changed, i'm not sure why.

Besides that, it looks ready to be merged, the current conflict is about the same commit we did, it removed the binding method to a deprecated and removed property.

i would appreciate if you could review this, so we can polish the remaining details.

podraco avatar Oct 04 '21 20:10 podraco

@podraco

https://user-images.githubusercontent.com/16930280/135929172-cbf3d06b-7918-4175-b5ff-16948b0b2c5c.mov

HeaTTheatR avatar Oct 04 '21 21:10 HeaTTheatR

@podraco

This PR:

Снимок экрана 2021-10-05 в 00 28 03

Current state:

Снимок экрана 2021-10-05 в 00 27 43

HeaTTheatR avatar Oct 04 '21 21:10 HeaTTheatR

@podraco

Снимок экрана 2021-10-05 в 00 29 02

HeaTTheatR avatar Oct 04 '21 21:10 HeaTTheatR

@podraco

Снимок экрана 2021-10-05 в 00 49 42

HeaTTheatR avatar Oct 04 '21 21:10 HeaTTheatR

@podraco Also, since your local changes are older, I was unable to test the MDDataTable widget with new row color features:

from kivy.metrics import dp
from kivy.uix.anchorlayout import AnchorLayout
from kivy.utils import get_color_from_hex

from kivymd.app import MDApp
from kivymd.uix.datatables import MDDataTable


class Example(MDApp):
    def build(self):
        layout = AnchorLayout()
        data_tables = MDDataTable(
            background_color_header=get_color_from_hex("#65275d"),
            background_color_cell=get_color_from_hex("#451938"),
            background_color_selected_cell=get_color_from_hex("e4514f"),
            size_hint=(0.9, 0.6),
            use_pagination=True,
            column_data=[
                ("No.", dp(30)),
                ("Column 1", dp(30)),
                ("Column 2", dp(30)),
                ("Column 3", dp(30)),
                ("Column 4", dp(30)),
                ("Column 5", dp(30)),
            ],
            row_data=[
                (f"{i + 1}", "1", "2", "3", "4", "5") for i in range(50)
            ],
        )
        layout.add_widget(data_tables)
        return layout


Example().run()

HeaTTheatR avatar Oct 04 '21 21:10 HeaTTheatR

As an update on this Merge request, I created a branch on my repo, that i'm working right now, i'm checking the buttons so it doesn't create multiple canvas instructions and added some color functions.

image In this image, you can see a grid of buttons that maps only the color definition palete (by column) and their wheights (by row), the square in the center is the new mehtod that process it's contrast and decides either white or black text is required.

  • added a method that can compute the proper text color based on the YIQ color space of a defined color.

  • And added 2 new palettes to the color definition: "background_dark", "background_light"; this aims to increase contrast between the current theming.bg_* properties. you can see them in the image, the last 2 columns of hte image.

  • Added some logic to allow buttons to auto-calculate their text_color or use the developer's provided one (front end property: obj.text_color, backend one: obj._text_color) these methods are stored inside the Theming class.

  • Made that the call to self.theme_cls goes thought a proxy instead of creating a hard link to the app's property, works exactly as before, but it's lighter, since now, it's just a "pointer" to that object and can avoid some gc errors and memory leaks.

  • The bg_dark, bg_light, bg_normal and bg_darker are now linked to the A700,A400, A200, A100 weights on the new color palettes added.

  • So far, made somewhat lighter the MDFLatButton and some basebutton classes, just keeping the necessary data management to each class and adding the canvas to the end button or the base_behavior class that is shared. so, deleting any canvas instruction that is not required or configurable by the button class.

i'm still doing some cleanup and testing. So far, the MDFlatButton and base button doesn't have the issue where if you changed theme, the custom values were deleted and replaced by the theme colors.

once i have that branch ready, i'm gonna merge it with my master and continue with the next classes that require a review. this way it's easier to maintain and revert anything that doesn't work properly.

podraco avatar Oct 07 '21 23:10 podraco

As an update on this Merge request, I created a branch on my repo, that i'm working right now, i'm checking the buttons so it doesn't create multiple canvas instructions and added some color functions.

image In this image, you can see a grid of buttons that maps only the color definition palete (by column) and their wheights (by row), the square in the center is the new mehtod that process it's contrast and decides either white or black text is required.

  • added a method that can compute the proper text color based on the YIQ color space of a defined color.
  • And added 2 new palettes to the color definition: "background_dark", "background_light"; this aims to increase contrast between the current theming.bg_* properties. you can see them in the image, the last 2 columns of hte image.
  • Added some logic to allow buttons to auto-calculate their text_color or use the developer's provided one (front end property: obj.text_color, backend one: obj._text_color) these methods are stored inside the Theming class.
  • Made that the call to self.theme_cls goes thought a proxy instead of creating a hard link to the app's property, works exactly as before, but it's lighter, since now, it's just a "pointer" to that object and can avoid some gc errors and memory leaks.
  • The bg_dark, bg_light, bg_normal and bg_darker are now linked to the A700,A400, A200, A100 weights on the new color palettes added.
  • So far, made somewhat lighter the MDFLatButton and some basebutton classes, just keeping the necessary data management to each class and adding the canvas to the end button or the base_behavior class that is shared. so, deleting any canvas instruction that is not required or configurable by the button class.

i'm still doing some cleanup and testing. So far, the MDFlatButton and base button doesn't have the issue where if you changed theme, the custom values were deleted and replaced by the theme colors.

once i have that branch ready, i'm gonna merge it with my master and continue with the next classes that require a review. this way it's easier to maintain and revert anything that doesn't work properly.

It sounds good! Please note the changes in the MDBottomNavigation class:

https://github.com/kivymd/KivyMD/commit/57f1aa9232e236bbd4eb658eb20273ce4cc06c3b https://github.com/kivymd/KivyMD/commit/3aa9ad7004a2199bd1c59f9f0f17c039776e86ed

This is the kitchen_sink branch. I shouldn't have made these commits as I'm working on a new demo app on this branch and shouldn't have touched library modules directly...

HeaTTheatR avatar Oct 07 '21 23:10 HeaTTheatR

i'll merge them with the branch latter today or tomorrow.

podraco avatar Oct 07 '21 23:10 podraco

i'll merge them with the branch latter today or tomorrow.

Also in this branch the demo application has been removed.

HeaTTheatR avatar Oct 08 '21 00:10 HeaTTheatR

as a heads up, the pull request i'm making for kivy's master branch, allows us to do the following:

UJ0sWTXa1C both are rounded buttons, jusct changed the segment value to 1,2 or 12 for rounded corners. still workikng on some issues i found.

podraco avatar Oct 13 '21 22:10 podraco

This merge request is meant for kivy's master after https://github.com/kivy/kivy/pull/7660 is merged within the master branch.

This means that It might display bugs in older versions of kivy. Because of how kivy's vertex_instruction_line managed the rounded_rectangle line instruction before.

podraco avatar Oct 16 '21 22:10 podraco

@podraco We can mark the minimal version of Kivy in the dependencies.

HeaTTheatR avatar Oct 17 '21 01:10 HeaTTheatR

Deprecated

HeaTTheatR avatar Mar 28 '23 06:03 HeaTTheatR