Active Topics
-
Sailfish OS for the Motorola Moto G7 Power (XT1955-5) - (ocean) (9)
to SailfishOS by biketool - 9 hrs, 14 mins ago -
[Announce] coderus unrestricted system-ui (297)
to MeeGo / Harmattan by nieldk - 6 days, 14 hrs ago - more...
| The Following User Says Thank You to rob_kouw For This Useful Post: | ||
|
2020-01-05
, 20:59
|
|
Posts: 301 |
Thanked: 531 times |
Joined on Aug 2010
@ The Netherlands
|
#62
|
I am struggling with some icons, shown in the PhotoDelegate. Do you have experience with the behaviour of icons in light Ambiences vs. dark Ambiences?
Thanks, Rob
Below: the problem.
Bottom layer is a rectangle. With a light Ambience, the rectangle must be darker to show a nice photo. Works properly.
On top of this rectangle is the photo, works fine too.
Then in the upper right corner I show the logo of the broadcasting company as an IconButton. For dark Ambiences, it works fine. But for light Ambiences, something strange happens. Basically, I want to show the same logo. But a svg file with a white image, 0.40 opacity, will be shown as very dark grey, so like the inverse of the normal svg.
Other tests performed: a logo of black with 1.0 opacity goes black. A logo of white with 1.0 opacity goes black. A logo with some red in it will show as grey.
As a workaround I could work with rectangle, mousearea and image, I guess...
Thanks, Rob
Below: the problem.
Bottom layer is a rectangle. With a light Ambience, the rectangle must be darker to show a nice photo. Works properly.
Code:
Rectangle {
id: photoRect
anchors {
fill: parent
}
color: "black"
opacity: Theme.colorScheme == 0 ? 0.65 : 0.9
}
Then in the upper right corner I show the logo of the broadcasting company as an IconButton. For dark Ambiences, it works fine. But for light Ambiences, something strange happens. Basically, I want to show the same logo. But a svg file with a white image, 0.40 opacity, will be shown as very dark grey, so like the inverse of the normal svg.
Code:
IconButton {
id: showBroadcast
icon.source: (site === "NOS")
? ( Theme.colorScheme == 0 ? Qt.resolvedUrl("images/icon-nos.svg") : Qt.resolvedUrl("images/icon-nos-light.svg") )
: ( Theme.colorScheme == 0 ? Qt.resolvedUrl("images/icon-the-guardian.svg") : Qt.resolvedUrl("images/icon-the-guardian-light.svg") )
anchors {
top: parent.top
right: parent.right
}
onClicked: ExternalLinks.browse(link)
}
As a workaround I could work with rectangle, mousearea and image, I guess...
__________________
Palm Treo -> N900 -> N9 -> Jolla -> SailfishX -> XA2
Developer mode novice, and enjoying it
Palm Treo -> N900 -> N9 -> Jolla -> SailfishX -> XA2
Developer mode novice, and enjoying it
 |
|
2020-01-05
, 21:03
|
|
Posts: 6,436 |
Thanked: 12,701 times |
Joined on Nov 2011
@ Ängelholm, Sweden
|
#63
|
Nowadays Icon* stuff in sfos using HighlightImage magic underneath to properly adjust monochrome icons for dark/light ambiences. Try using just monochrome white image and check if it magically convert to black in light ambience?
|
|
2020-01-09
, 21:41
|
|
Posts: 301 |
Thanked: 531 times |
Joined on Aug 2010
@ The Netherlands
|
#65
|
Might be somewhere in Theme...
Theme.colorScheme == 0 stands for a dark Ambience.
Theme.colorScheme == 0 stands for a dark Ambience.
__________________
Palm Treo -> N900 -> N9 -> Jolla -> SailfishX -> XA2
Developer mode novice, and enjoying it
Palm Treo -> N900 -> N9 -> Jolla -> SailfishX -> XA2
Developer mode novice, and enjoying it
|
|
2020-01-09
, 21:45
|
|
Posts: 6,436 |
Thanked: 12,701 times |
Joined on Nov 2011
@ Ängelholm, Sweden
|
#66
|
Originally Posted by rob_kouw
there are constants available:
Might be somewhere in Theme...
Theme.colorScheme == 0 stands for a dark Ambience.
Code:
Theme.LightOnDark Theme.DarkOnLight
But if initial question was about actual ambience change, there is an example in sailfish code: https://github.com/CODeRUS/better-sa...indow.qml#L225
|
|
2020-01-10
, 07:37
|
|
Posts: 34 |
Thanked: 30 times |
Joined on Nov 2011
|
#67
|
coderus: yes exactly, I have found that colorScheme is defined, only the reaction to that I had not found. Thanks a lot, I will look at it 
EDIT: Thanks a lot, works
Last edited by bobsikus; 2020-01-10 at 09:40.
EDIT: Thanks a lot, works
Code:
import Sailfish.Silica.private 1.0
ThemeTransaction {
onAmbienceAboutToChange: doStuff() ;
}
Last edited by bobsikus; 2020-01-10 at 09:40.
|
|
2020-01-10
, 09:14
|
|
Posts: 6,436 |
Thanked: 12,701 times |
Joined on Nov 2011
@ Ängelholm, Sweden
|
#68
|
Originally Posted by bobsikus
if you want to detect color scheme change then bind it to property and watch onPropertyChanged
coderus: yes exactly, I have found that colorScheme is defined, only the reaction to that I had not found. Thanks a lot, I will look at it
|
|
2020-01-10
, 09:33
|
|
Posts: 34 |
Thanked: 30 times |
Joined on Nov 2011
|
#69
|
Originally Posted by coderus
I needed reaction of ambience change to do stuff I need it to do (change some colors based on if the ambience is actually dark or light, because buttons and text to buttons were based on that), If I will do it by binding, it would probably be a little bit less needy for system resources (don't do it everytime, do it only if this changes), so good point
if you want to detect color scheme change then bind it to property and watch onPropertyChanged
EDIT: works!
Code:
property real themeType: Theme.colorScheme
onThemeTypeChanged: console.log ("AmbienceChange");
Last edited by bobsikus; 2020-01-10 at 09:40.
|
|
2020-01-10
, 13:19
|
|
Posts: 301 |
Thanked: 531 times |
Joined on Aug 2010
@ The Netherlands
|
#70
|
Originally Posted by coderus
Ooh, nice. Thanks, it will clarify my code some more.
there are constants available:
https://github.com/CODeRUS/better-sa...qmltypes#L1472Code:Theme.LightOnDark Theme.DarkOnLight
__________________
Palm Treo -> N900 -> N9 -> Jolla -> SailfishX -> XA2
Developer mode novice, and enjoying it
Palm Treo -> N900 -> N9 -> Jolla -> SailfishX -> XA2
Developer mode novice, and enjoying it
Thanks for the help!
Palm Treo -> N900 -> N9 -> Jolla -> SailfishX -> XA2
Developer mode novice, and enjoying it