Cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 

Smooth hand graphics in Fitbit Light clock face

ANSWERED

I found out that hands on Fitbit Light are rendered smooth on the watch:

IMG_4269.jpg

I tried to imitate similar hands by the rectangle and 2 circles on the ends, and it renders fine in Emulator, although on the device they look like this:

IMG_6041.JPG 2018-05-10 12-48-04.png 

I wonder how they're done in Fitbit's clock face?

Best Answer
0 Votes
1 BEST ANSWER

Accepted Solutions

Because Fitbit only supports a subset of the SVG featureset that doesn't include rounded rectangles or linecaps I am fairly certain these are just rotated images.

View best answer in original post

Best Answer
0 Votes
7 REPLIES 7

Because Fitbit only supports a subset of the SVG featureset that doesn't include rounded rectangles or linecaps I am fairly certain these are just rotated images.

Best Answer
0 Votes

Have just tried this and actually result look worse than the SVG-way. PNG is rendered with rough edges when hands are at certain angles. Cannot make a photo to make it visible. So, still looking for the solution

Best Answer
0 Votes

Are you doing the "grayscale magic" as outlined in the css guide? 

Best Answer
0 Votes

Not sure. Could you pinpoint?

 

It just rendered without any "smoothing", pixelated, you know? Looks even uglier than uneven SVG circles.

Best Answer
0 Votes

I just tried to use bitmaps of actuals sizes and those look pretty decent. Agree with your suggestion 🙂

Best Answer
0 Votes

I am also facing same problem

Best Answer
0 Votes

Either do this in your index.gui file:

 

<line stroke-linecap="round" />

 

Or put this line in your styles.css file:

 

line {stroke-linecap: round}

Best Answer