KivyMD
KivyMD copied to clipboard
WIP - Do Not Merge - BackgroundColorBehavior Layer fix
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
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
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 Let me check it out tomorrow...
@podraco Your changes break the display of other widgets:
@podraco
@podraco Your changes break the display of other widgets:
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.
@podraco
@podraco
true i forgot there is a clear instruction.
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 It's a good news!
@podraco What changes have occurred? What do your new commits fix/add? Or is this PR still in development?
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 If this PR fixes the current problems, then that's a good thing.
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.
it's still a work in progress
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.
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
https://user-images.githubusercontent.com/16930280/135929172-cbf3d06b-7918-4175-b5ff-16948b0b2c5c.mov
@podraco
This PR:
Current state:
@podraco
@podraco
@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()
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.
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.
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.
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...
i'll merge them with the branch latter today or tomorrow.
i'll merge them with the branch latter today or tomorrow.
Also in this branch the demo application has been removed.
as a heads up, the pull request i'm making for kivy's master branch, allows us to do the following:
both are rounded buttons, jusct changed the segment value to 1,2 or 12 for rounded corners.
still workikng on some issues i found.
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 We can mark the minimal version of Kivy in the dependencies.
Deprecated