Closed
Bug 799711
Opened 12 years ago
Closed 12 years ago
[Clock] Update analog clock face background to avoid banding issues and UI flashing
Categories
(Firefox OS Graveyard :: Gaia, defect, P2)
Tracking
(blocking-basecamp:-)
VERIFIED
FIXED
blocking-basecamp | - |
People
(Reporter: pla, Assigned: iliu)
References
Details
(Keywords: polish, Whiteboard: visual design)
Attachments
(1 file)
185 bytes,
text/html
|
rudyl
:
review+
vingtetun
:
approval-gaia-v1+
|
Details |
The analog clock face background has banding issues on-device. Particularly with the circular gradient effect. Create an updated design that does not rely on gradients so heavily to avoid banding. This is a transfer of Github Issue #4521.
Hi Ian, Can you try these new background images when you get a chance? https://www.dropbox.com/sh/puartbn9l6vfzjs/Grrqluvm0X analog_clock_background1.png analog_clock_background2.png analog_clock_background3.png analog_clock_background4.png They are device res (320x480) and saved as png-8, which has the same memory footprint as the ones you currently use (~100k each). Let me know when you have a chance to try it, but this should fix the banding problem. Also, do you want to take bug #799711? (https://bugzilla.mozilla.org/show_bug.cgi?id=799711) Peter.
Sorry, the above was cut-and-paste from an email. Ignore the part about referencing this bug. :)
Assignee | ||
Comment 3•12 years ago
|
||
(In reply to Peter La from comment #1) > Hi Ian, > > Can you try these new background images when you get a chance? > > https://www.dropbox.com/sh/puartbn9l6vfzjs/Grrqluvm0X > > analog_clock_background1.png > analog_clock_background2.png > analog_clock_background3.png > analog_clock_background4.png > > They are device res (320x480) and saved as png-8, which has the same memory > footprint as the ones you currently use (~100k each). Hi Peter, By the way, do we need to keep previous image for other high resolution device?(Such as S2) > > Let me know when you have a chance to try it, but this should fix the > banding problem. Also, do you want to take bug #799711? > (https://bugzilla.mozilla.org/show_bug.cgi?id=799711) > > Peter. I will take it over. Thank you.
Assignee | ||
Updated•12 years ago
|
Assignee: pla → iliu
Assignee | ||
Comment 4•12 years ago
|
||
Hi Peter, Could you provide the source image(.psd) for the 4-size analog clock back ground? I got it from https://www.dropbox.com/sh/21nqnck3udu10f3/jRdXfdj5DG/_Source/Revised%2020121001?lst#f:B2GClockAnalog-Revised_20121001.psd I will need the other three size to crop and extract to fit with central point by myself. Thank you.
Assignee: iliu → pla
Hi Ian, I updated the _Export folder with the high-res 640x480 background images (4 of them - with the @2x suffix). https://www.dropbox.com/sh/puartbn9l6vfzjs/Grrqluvm0X But for the normal res (320x480) please use the 4 images I already provided. There is no reason you need to save them out yourself from the PSD. I also put the PSDs here, but please do not re-save them out with transparency like you did before - that was a BIG reason for the banding problem. (images are called Size1.psd, ..., Size4.psd) https://www.dropbox.com/sh/ge39zfemvzo45af/r199shq4X0
Assignee | ||
Comment 6•12 years ago
|
||
Hi Peter, Thank for your help. A) But there is still some twinkle issue when we change the background image(size 1-4 including of metaled texture). User will see the no background during add/delete alarms(changing background image). It will spend a little time even if the size of image is quite small. B) For changing digital/analog clock mode, we will feel the huge twinkle issue if we use different metaled background image. It will let user feel uncomfortable. C) In other side, the metaled background will hover the date info. and new-alarm button. I should set z-index and page control to handle it for some effort. In order to skip these issues, I prefer to use the non-background image with transparency only. I always keep a metaled background image there. That's why I did before. Could you provide the image according my request? 1. We change the transparency and clock face only without the metaled background.(You could see these image "analog_clock_background1.png" in the repository.) 2. Resolution size: low -> 320x460 high -> 640x920 (Don't use 320x480, 640x920. The 20 pixels is kept for the status bar. It will let me hard to align to the central point of clock face.) If you have any suggestion or my wrong concept, please feel free to let me know. Thanks.
Assignee: iliu → pla
Hi Ian, I will be providing a new digital clock background soon. This has been on my plate for a while, so any transition from Analog to Digital clock doesn't concern me too much. I've already removed the metal texture from the Analog clock face background in my latest images. I still don't quite understand why you need transparency. It is the main cause of 'banding', and in my opinion we shouldn't need to use transparency. I feel that we need to discuss this over Vidyo, because I can't quite understand your written English (my apologies) and it would help if I could get you to explain in more detail. I can provide the 320x460 and 640x920 images, but I want to make sure we understand eachother first. Peter.
Assignee | ||
Updated•12 years ago
|
Assignee: pla → iliu
Assignee | ||
Comment 8•12 years ago
|
||
[Approval Request Comment] Bug caused by (feature/regressing bug #): Polish User impact if declined: Current UI not shippable Testing completed: Risk to taking this patch (and alternatives if risky): None
Attachment #676515 -
Flags: review?(rlu)
Attachment #676515 -
Flags: approval-gaia-master?(21)
Assignee | ||
Comment 9•12 years ago
|
||
(In reply to Peter La from comment #7) > Hi Ian, > > I will be providing a new digital clock background soon. This has been on > my plate for a while, so any transition from Analog to Digital clock doesn't > concern me too much. I've already removed the metal texture from the Analog > clock face background in my latest images. > > I still don't quite understand why you need transparency. It is the main > cause of 'banding', and in my opinion we shouldn't need to use transparency. > > I feel that we need to discuss this over Vidyo, because I can't quite > understand your written English (my apologies) and it would help if I could > get you to explain in more detail. > > I can provide the 320x460 and 640x920 images, but I want to make sure we > understand eachother first. > > Peter. Hi Peter, According previous discuss on Vidyo, I will use your solution to fix the issue. Thanks for your help.
Comment 10•12 years ago
|
||
Comment on attachment 676515 [details]
Fix analog clock face banding issue
r+ for the css/style-only changes.
Attachment #676515 -
Flags: review?(rlu) → review+
Comment 11•12 years ago
|
||
Comment on attachment 676515 [details]
Fix analog clock face banding issue
I will approve it but you better want to spend time on blocking-basecamp+ :)
Attachment #676515 -
Flags: approval-gaia-master?(21) → approval-gaia-master+
Comment 12•12 years ago
|
||
Hi Vivien, The original implementation of clock background images would cause serious UI flashing issue, so we also worked on this to make Clock app. look better right now. Sorry about not marking block-basecamp? for this.
Updated•12 years ago
|
blocking-basecamp: --- → ?
Summary: [Clock] Update analog clock face background to avoid banding issues → [Clock] Update analog clock face background to avoid banding issues and UI flashing
Comment 13•12 years ago
|
||
Fixed with https://github.com/mozilla-b2g/gaia/pull/6082 merged.
Status: NEW → RESOLVED
Closed: 12 years ago
Resolution: --- → FIXED
Updated•12 years ago
|
blocking-basecamp: ? → -
Assignee | ||
Comment 14•12 years ago
|
||
Even if we have improved loading time and let UI flashing issue be rare, we still should trace the root cause from the issue. https://bugzilla.mozilla.org/show_bug.cgi?id=809077
Comment 15•11 years ago
|
||
Verified Fixed in Unagi Build 20130103070201 The Clock Background is now gradient free and no longer has a metalic color.
Status: RESOLVED → VERIFIED
You need to log in
before you can comment on or make changes to this bug.
Description
•