I tried a little experiment as this sounded like an interesting layout challenge.
Here’s what I did that works (sort of, there’s some challenges you’ll still need to solve):
On page load, set a page variable “radius” to the formula: systemVars.dimensions.viewport.width * 0.35
This will determine the radius of your circle, sized to fit within your device’s viewport. Why x 0.35 instead of 0.5? If the circle was as large as the viewport that would leave no room for the text about its point. So the text would often go off-screen.
I also created a page variable “period” representing how many days a full cycle should take. Just for this test, I set this to 100.
Finally, I created a paragraph component with the content of “1251”.
Under style tab, set Position = absolute, then use the following formulas for position:
Top = systemVars.dimensions.viewport.width/2 - COS(pageVars.group1251 * 2 * PI()/pageVars.period) * pageVars.radius
Left = (systemVars.dimensions.viewport.width-90)/2 + SIN(pageVars.group1251 * 2 * PI()/pageVars.period) * pageVars.radius
Those formulas assume that the beginning of the cycle (0 days) is at the top of the circle.
The -90 is a fudge to account for the fact that the text renders starting at the calculated point and then goes to the right. So the circle center must be offset left by a bit to make the text stay on-screen at all points. This value will need adjusted based on the size of your font used. There’s probably a better way to center the text about this point with layout, but nothing I tried worked.
I automated the stage1251 variable to sequence from 0 to 99 and then repeat to see that the text moved in a circle as desired. Then I added another of these just like described above for group 7485, but automated it at a different rate. Here’s a still from that.
You could probably use the “Repeat with” to make a single control like this draw the positions of many cattle groups from a list that you provide. Cool if that will work – I’ve never tried a repeating list component with absolute positioning.
There is one problem with the proposed solution, which is that the text from two or more groups can overlap. There is nothing in the formulas to prevent that. In your example, someone consciously staggered the text so they didn’t collide. Coding your app to do this staggering would add a fair bit of complexity. A brute force idea would be to try place the text for each group first using the ideal radius. If it collides with text already laid down, then adjust the radius up or down a bit and try again. All these points would probably have to be precalculated and then only displayed when everything was ready. Otherwise, you’d see the text dancing around trying to find a spot that it can land.
Hope this gets you going with this interesting app. Best of luck.
