

The images should download in a zip file. The preferred method is to download the arc layers separately. The double and triple arcs images can optionally be merged to have all the arc layers combined into a single image. Enter the filename prefix of your choice and click on Continue. Once you have modified each arc to your preference, click the Generate Images button to generate each permutation of images for the given arc structure. You may also select the text color and the units of the subtext. Note: the current value has no effect on the output of the images - it is merely there to see how the arc would look at a given value.įor the single arc, you may select if text should appear in the center.
H&M GENERATOR FULL
In order to see how this looks, choose the current value to be equal to the max value to see the full arc gradient. If you would like a gradient color scheme, choose three different colors for the foreground start, mid, and end colors. Go to or open index.html (Chrome and Firefox recommended).ĭecide on whether you need a single, double, or triple arc radial chart.Ĭhoose the max value or the capacity of the appropriate arc.ĭecide the color scheme for each appropriate arc. The RadialChartImageGenerator is a very simple tool that saves so much time with minimal effort. The alternative is to create these images manually in an image editor program like Photoshop, which would require a lot of effort and time.

H&M GENERATOR ZIP FILE
The generator will finally generate every permutation of the radial progress chart and download a zip file with all the images. With a few clicks, you can select whether you want a single, double, or triple arc radial chart (images shown above), customize the colors and text, and choose how many values or capacity the chart should have. The RadialChartImageGenerator comes in to the rescue. So, good luck creating hundreds of images by yourself. The reason for this is that drawing pixels or shapes would require a lot of computation and drain the battery of the watch. In fact, Apple's own WatchKit sample app called Lister does animations of this radial progress chart using 360 different static images of the chart. The way Apple WatchKit SDK allows animations or visualizations is to use a sequence of static images ( WatchKit Design Guidelines). The Apple WatchKit SDK does not have a built-in tool or library to create these charts or any visualization. That's why it makes a lot of sense to use them on a watch. We as humans have been trained to read radial progress charts from a very young age - clocks. Radial charts are just the right way to display a large amount of data on such a small screen size. Overview Why care about radial progress charts?Ĭlearly, Apple likes radial progress charts which are used in their activity monitor health watch app ( Apple Health & Fitness Watch App). The charts are referred to as rings, dials, radials or circles. A simple tool that generates images for animating radial or circular progress charts for the Apple Watch and WatchKit.
