-
-
Notifications
You must be signed in to change notification settings - Fork 689
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
WinForms background_color
Transparency Fixes
#2484
Conversation
Regarding the new test, I have added the missing canvas image data test, but since the internal method to patch for testing are platform specific, hence the test is on the probe (Also, on android,
which you had previously told me to avoid. But, I think that using |
background_color
Transparency Fixes
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Your proposed interpretation of background color matches what I would expect.
Your proposal to change the default background color also largely makes sense; it's been proposed as a fix for at least 2 issues; see #767 and #2425. However, it will likely have a widespread impact, so we need to be very careful making this change.
As noted inline, the mock-based approach is a non starter; I suspect once that has been removed, the issue about the new test becomes a non-issue.
While implementing this PR, I discovered a bug in the WinForms Divider widget. I have corrected the WinForms Divider implementation to use a The previous implementation did not produce any visual results when background color was set. This is because it was producing the Divider widget by squeezing the borders of the The reason why it was passing tests was because it was setting the background color of the |
Also, discovered another bug in Label widget transparent background_color on WinForms.
But it only works if the label is inside/above a PictureBox and not for other cases. So, the best bet for transparency is to make label background color same as the container inside which the widget is present. The other way would be to mark Label as |
Unless I'm misunderstanding, this is what #2425 is describing.
If
Is it setting the background to white, or "default background"? We need to be very careful that we're differentiating between those two cases, especially given that background has been getting closer and closer to white over time. I think the solution may be actually halfway between the two answers you've suggested. My read of #767 and #2425 is that the current In the case of widgets like Button, we also need to be careful about the use of background - are we describing the button background color, or are we describing the color of the padding around the button. |
Apologies for the delayed response. So, I researched more and did more tests, and found that WinForms doesn't actually support true transparency. The important bit for setting up transparency is:
WinForms actually just copies the BackColor of the widget's parent to the widget. Which means, every time the widget's parent changes, we need to reapply background color to copy the new parent's BackColor to the widget. However, if we use the above code, then the behavior becomes highly inconsistent, and even glitches out when the parent is changed. Most of the time transparency works like a fluke. I also tried to use a I have found that manually setting a widget's BackColor same as that of the parent widget works most stably, and that is what I have opted to implement. With it, I have fixed #2425(the bug were non transparent Label and Box widgets). Another bug I have noticed is that when a button's background_color is manually set to another color, like in the above image, then a white border appears. Maybe it is not clearly visible in a white background, but if we change the background to a contrasting color, then it becomes apparent. The only way to remove it seems to be to change the button's FlatStyle to Flat:
![]() But then, it doesn't look like a native button anymore. As for the new failing canvas tests:
They are somehow connected to the new |
What happens if I:
My read of this code is that the child will end up with a red background. Don't we also need to propagate any background color to all children? Also - what about alpha blending? The approach you've described will only work for a true TRANSPARENT color. If I set my background to "50% gray, 50% alpha", and my parent is red, then my background shouldn't be red - it should be a 50% blend of gray and red. This last case is definitely more complex to handle (although, interestingly, a blend with TRANSPARENT should be a redundant case of blending with any parent color...). Unless you can find an easy way to implement it, I'd be OK with noting this as an edge case in the docs.
A red background doesn't look very native either :-) There's an argument to be made that the border is desirable specifically because it ensures the button edge is visually distinct. If I have a red background and a red button, how do I know the extent of the button's pressable surface?
Well sure - you're messing around with transpareny, so the tests of transparency are breaking. My guess will be either the expected results are incorrect once you correctly handle transparency, or the canvas probe isn't correctly introspecting transparency. |
Apologies for the delayed response - I had gotten busy with my university assignments. I've addressed background color and transparency issues across all widgets, eliminating the need of Additionally, I've ensured proper handling of ![]()
The WebView HTML file can be found https://proneon267.github.io/proneon267-tests/transparency-test.html. Please try out the sample app and let me know if you encounter any inconsistencies. Based on this, it's evident that the expected reference image of the canvas is incorrect and requires updating. I haven't made |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The core of the Winforms transparency changes make sense; I've flagged a couple of issues inline.
It doesn't surprise me that the reference image needs to be changed. When the test fails locally, it will save a copy of the "actual" image. The log of the test failure should provide the image that's been generated; the image generated in CI is also uploaded as an artefact attached to the CI run.
The biggest issue at this point is the new android "warning" branch, and the test that you've added to get coverage - the approach you've taken seems to be the "make the test be quiet" approach, rather than actually attempting to understand what is going on, and why that branch isn't being covered (and, more importantly - why it was covered before).
There's also an issue with the way you've implemented the background color probe; details inline.
I've identified the cause of the missing coverage on the Android canvas: The missing coverage surfaced after I had made the following change: toga/android/src/toga_android/widgets/base.py Lines 138 to 142 in a9f9716
to: toga/android/src/toga_android/widgets/base.py Lines 138 to 144 in c767a5b
The missing coverage was reported for the lines 245->247: toga/android/src/toga_android/widgets/canvas.py Lines 244 to 247 in a9f9716
It seemed that a test was setting the widget's background to The test that is covering the case of direct jump to toga/testbed/tests/widgets/test_canvas.py Lines 283 to 303 in a9f9716
At the end of this test, we do: toga/testbed/tests/widgets/test_canvas.py Line 303 in a9f9716
And in assert_reference we do:toga/testbed/tests/widgets/test_canvas.py Lines 241 to 244 in a9f9716
So, for a canvas widget, it calls get_image() =>get_image_data() and in Canvas.get_image_date() :toga/android/src/toga_android/widgets/canvas.py Lines 244 to 247 in a9f9716
Here, background = self.native.getBackground() returned None and it directly jumped to line 247
I have also identified that, in toga/android/src/toga_android/widgets/base.py Line 139 in a9f9716
Here, self.native.getBackground() returned None since there was no background previously set on the widget.
So, to account for the missing coverage of the background color being set to |
background_color
Transparency Fixesbackground_color
Transparency Fixes
Here is the current state: Example source:import toga
from toga.style import Pack
from toga.style.pack import COLUMN
class HelloWorld(toga.App):
def reset_to_native_default_background_color(self, widget, **kwargs):
for widget in self.widgets:
del widget.style.background_color
self.content.refresh()
def startup(self):
"""Construct and show the Toga application.
Usually, you would add your application to a main content box.
We then create a main window (with a name matching the app), and
show the main window.
"""
self.content = toga.Box(
style=Pack(
background_color="#87CEFA",
direction=COLUMN,
flex=1,
),
children=[
toga.Box(style=Pack(flex=1.5)),
toga.Button(
text="Reset to native default background color",
on_press=self.reset_to_native_default_background_color,
),
toga.Box(style=Pack(flex=1.5)),
toga.ImageView(
toga.Image(self.paths.app / "resources/imageview.png"),
),
toga.Box(style=Pack(flex=1.5)),
toga.Label(text="Label"),
toga.Box(style=Pack(flex=1.5)),
toga.ProgressBar(max=100, value=50),
toga.Box(style=Pack(flex=1.5)),
toga.Selection(items=["Alice", "Bob", "Charlie"]),
toga.Box(style=Pack(flex=1.5)),
toga.Slider(min=-5, max=10, value=7),
toga.Box(style=Pack(flex=1.5)),
toga.NumberInput(value=8908),
toga.Box(style=Pack(flex=1.5)),
toga.MultilineTextInput(
value="Some text.\nIt can be multiple lines of text."
),
toga.Box(style=Pack(flex=1.5)),
toga.TextInput(value="Jane Developer"),
toga.Box(style=Pack(flex=1.5)),
toga.Switch(text="Switch"),
toga.Box(style=Pack(flex=1.5)),
toga.DetailedList(
data=[
{
"icon": toga.Icon("icons/arthur"),
"title": "Arthur Dent",
"subtitle": "Where's the tea?",
},
{
"icon": toga.Icon("icons/ford"),
"title": "Ford Prefect",
"subtitle": "Do you know where my towel is?",
},
{
"icon": toga.Icon("icons/tricia"),
"title": "Tricia McMillan",
"subtitle": "What planet are you from?",
},
],
),
toga.Box(style=Pack(flex=1.5)),
toga.DateInput(),
toga.Box(style=Pack(flex=1.5)),
toga.TimeInput(),
],
)
self.main_window = toga.MainWindow(title=self.formal_name)
self.main_window.content = toga.ScrollContainer(content=self.content)
self.main_window.show()
def main():
return HelloWorld() |
I'm not sure if this was intended for review - but the background colors here look inconsistent. Some of the widgets (selection, dateinput, timeinput) are using a white background; some are using a transparent background (table, textinput, numberinput), and progress bar appears transparent... but to the base of the window, not the box. |
Also - could I ask you to audit the |
For Selection: For DateInput and TimeInput: Winforms ignores
I am not sure if I understood what you meant, but here is what it looks like without other widgets: self.content = toga.Box(
style=Pack(
background_color="#87CEFA",
direction=COLUMN,
flex=1,
),
children=[
toga.Box(style=Pack(flex=1.5)),
toga.ProgressBar(max=100, value=50),
toga.Box(style=Pack(flex=1.5)),
],
)
I have updated the ticket description and removed any mentions of unrelated backends. Since, the linked issues: #767, #2425, #2430, are all related to winforms' |
The features supported by the widget isn't the point of contention. It's that the background colors aren't consistent with "default" behavior. The default appearance on a TextInput should match the default background on a DateInput, since they're both "text fields".
What I'm saying is that the "non active" region of the progress bar is the same light grey color as the background that is now being used by TextInput etc - which doesn't appear consistent with other widgets.
That definitely doesn't look correct as a default. The fact that DateInput doesn't honor the background color change suggests to me that whatever color it is using (presumably some sort of "default input background" color), that is what the default should be. The thing to keep in mind in all of this - the default Toga colors should be identical to what is generated if you make no manual changes to color at all. A user who is manually changing colors in their app is almost certainly making a mistake from an app design perspective. Toga supports
#767 is most definitely not a winforms specific issue. It was originally reported on winforms, but it's tagged Android/macOS/Linux/Windows, and until a week or so ago, was tagged iOS as well - because the issue is transparency handling on Box. It's arguable whether #2425 is - it's definitely framed as a Winforms bug, but it could be a duplicate of #767. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Getting closer; a few notes inline. Also drawing your attention to ensuring that all previous review comments have been addressed before asking for another review.
Co-authored-by: Russell Keith-Magee <[email protected]>
I have gone through the previous reviews but couldn't find any non-outdated review questions that I haven't answered yet. If I have missed any question, could you please ping the question, so I can answer it? Also, I have removed the usage of previous alpha blending functions on winforms, and replaced them with Here is the current status of this PR:
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
A couple of clarifications to comments and the change notes; but otherwise, I think this is good to go. Thanks for the PR!
changes/2425.bugfix.1.rst
Outdated
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Refs #767, Fixes #2425, Fixes #2430
This PR fixes transparency issues and
rgba()
interpretation ofbackground_color
on winforms.On the backends, there are 3 different possible values for
set_background_color()/set_background_color_simple()
- None, TRANSPARENT, color(Actual color). I want to propose the following interpretation for them(for the internal backend calls):Also, as per: https://developer.mozilla.org/en-US/docs/Web/CSS/background-color#formal_definition, the initial value for background_color is transparent, so I also propose to make TRANSPARENT the initial value for background_color.
Status of transparency tests: #3015