# Any ideas on how to build this?

Hello I don’t know how to build this in composer pro, any ideas?

I need to show items on a circle shape, which represents the reproduction cycle of dairy cows. The first picture shows what I mean by reproduction cycle. The second picture is what I would like to build in composer pro. The 4-digit numbers represent the unique identifiction-numbers of the cows (the ear tag numbers).
The position of the numbers on the cycle, depend on which stage they’re in and for how long they’ve been in that stage. I am thinking of working with the radius of a circle. But I don’t know how to build this in composer pro. Any ideas?

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.

1 Like

Okay, my curiosity got the best of me. I tried doing a Repeat With on one Paragraph component and it worked!

Created a variable called Groups that is a list of objects, with each object having a label (text) and age (number).

Then set the control to Repeat With the variable “Groups”
Set Content = current.label
Change position formulas a bit for the repeating list:

Top = systemVars.dimensions.viewport.width/2 - COS(repeated.current.age * 2 * PI()/pageVars.period) * pageVars.radius
Left = (systemVars.dimensions.viewport.width-90)/2 + SIN(repeated.current.age * 2 * PI()/pageVars.period) * pageVars.radius

Bravo AppGyver for handling this like a champ!

Here’s a still after I entered a few of your example values into the list. You can see a couple that have collided as I mentioned earlier.

1 Like

Wow, I didn’t expect anyone to actually try to build this. This saves me a lot of time. Thank you very much for putting so much effort in trying to help me.
I will try your solution out in the next coming days. I will update you with the finished product.
Again, thanks a lot.

How could I be able to draw a line from 2 points? (startpoint = middle of circle & endpoint = position on cirlce edge) @Marty_Flickinger do you have an idea?
example:

Horizontal and vertical lines I know how to do – use of border on a rectangular container. But I don’t know of any general line drawing ability and don’t know of any way to rotate objects that could result in a line such as you’ve described.

You could render a bunch of graphics with the line in various positions and make the background image with a formula to pick the line position you want. Not very practical, though.

Yes, this is probably what I will do untill this functionality of drawing lines will be put in composer pro