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)

All
Other
defect

Tracking

(blocking-basecamp:-)

VERIFIED FIXED
blocking-basecamp -

People

(Reporter: pla, Assigned: iliu)

References

Details

(Keywords: polish, Whiteboard: visual design)

Attachments

(1 file)

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.
Priority: -- → P2
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. :)
(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: pla → iliu
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: pla → iliu
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: pla → iliu
[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)
(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 on attachment 676515 [details]
Fix analog clock face banding issue

r+ for the css/style-only changes.
Attachment #676515 - Flags: review?(rlu) → review+
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+
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.
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
Depends on: 809077
Fixed with https://github.com/mozilla-b2g/gaia/pull/6082 merged.
Status: NEW → RESOLVED
Closed: 12 years ago
Resolution: --- → FIXED
blocking-basecamp: ? → -
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
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.

Attachment

General

Created:
Updated:
Size: