Guys this is kinda awkward, probably a very simple math question but school was a long time ago, or I have a blackout right now but I feel stupid - YES!
I'm creating a WordPress plugin to display your Apple Watch / iPhone app activity circles at your blog.
The only problem I run into is the 'move' circle, this isn't a fixed number by default like other circles, this value gets defined by your preset calories to burn each day. Based on this setting, for example 300 calories you get a full circle as soon as you hit 300. I think everyone here knows how it works I guess.
What I have created..
I took each circle a part and divided/sliced it into the fixed number of slides ( I call them steps ) till you reach 100% or better said a full circle.
The 'stand' activity circle ( blue ) has a fixed number of 24 hours but your goal is only 12 till you reach 100%. To limit the amount of images included in a web page I only sliced 12 steps of the blue circle not 24 - because - as soon as we reach number 12 till 24 I want to use circle number 12 ( full circle ) and rotate it X degree clockwise. In the end, this prevents your web page from being bullied with lots of images to load and getting slower. In the example below you see three blue circle but on the page it's just a single blue circle being rotated based on the amount of of stand-ups.
For the green ( Exercise ) circle it's the same thing, only instead of 24 steps and 12 slices you have 30 slices ( 30 minutes ) to complete a full circle.
Okay the green and blue circles in the image are completed and they match 100% my progress that day. But the red circle is a different story. This circle doesn't have a fixed number - it does includes 100 slices as it should with progress charts. You always work towards 100% and even if your calories to burn are set to 300 or to 800 this circle is being calculated step by step towards 100%.
The red circle is kinda killing me right now, I have already sliced it into 100 pieces and it will work kinda the same as other circles, as soon as we go over the 100% limit we start rotating slice/image number 100.
I just would like to know how I would calculate which slice/image to use.
For example:
X day I have burned 486 calories but my preset goal was to only burn 300 calories a day. That 300 calories is a variable and will change each week/month so it all have to reflect back on the full circle.
How does this dynamically calculate back to that 100% number without mattering the variable '300' calories to burn? I have burned 186 calories too much in this example, so in this case I should use slice/image number 100 ( full percent ) and rotated it around a bit - but how much. I think, I first have to calculate the variable to each slide without reaching 100%..
I feel so stupid right now..
I'm creating a WordPress plugin to display your Apple Watch / iPhone app activity circles at your blog.
The only problem I run into is the 'move' circle, this isn't a fixed number by default like other circles, this value gets defined by your preset calories to burn each day. Based on this setting, for example 300 calories you get a full circle as soon as you hit 300. I think everyone here knows how it works I guess.
What I have created..
I took each circle a part and divided/sliced it into the fixed number of slides ( I call them steps ) till you reach 100% or better said a full circle.
The 'stand' activity circle ( blue ) has a fixed number of 24 hours but your goal is only 12 till you reach 100%. To limit the amount of images included in a web page I only sliced 12 steps of the blue circle not 24 - because - as soon as we reach number 12 till 24 I want to use circle number 12 ( full circle ) and rotate it X degree clockwise. In the end, this prevents your web page from being bullied with lots of images to load and getting slower. In the example below you see three blue circle but on the page it's just a single blue circle being rotated based on the amount of of stand-ups.
For the green ( Exercise ) circle it's the same thing, only instead of 24 steps and 12 slices you have 30 slices ( 30 minutes ) to complete a full circle.
Okay the green and blue circles in the image are completed and they match 100% my progress that day. But the red circle is a different story. This circle doesn't have a fixed number - it does includes 100 slices as it should with progress charts. You always work towards 100% and even if your calories to burn are set to 300 or to 800 this circle is being calculated step by step towards 100%.
The red circle is kinda killing me right now, I have already sliced it into 100 pieces and it will work kinda the same as other circles, as soon as we go over the 100% limit we start rotating slice/image number 100.
I just would like to know how I would calculate which slice/image to use.
For example:
X day I have burned 486 calories but my preset goal was to only burn 300 calories a day. That 300 calories is a variable and will change each week/month so it all have to reflect back on the full circle.
How does this dynamically calculate back to that 100% number without mattering the variable '300' calories to burn? I have burned 186 calories too much in this example, so in this case I should use slice/image number 100 ( full percent ) and rotated it around a bit - but how much. I think, I first have to calculate the variable to each slide without reaching 100%..
I feel so stupid right now..
