cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Highlighted
tianaranjo
Level 8

Gallery Challenge - X,Y coordinates

I'm pretty sure I know the answer to this question but wanted to throw it out there in case I'm unaware of a possible solution. Can a gallery be used to place the following (circle) shapes in the same way they are placed in the screenshot.  

image.png

3 ACCEPTED SOLUTIONS

Accepted Solutions
Super User
Super User

Re: Gallery Challenge - X,Y coordinates

Inspired by @h-nagao's work, I decided to throw my hat in the ring. I have exported and attached my attempt at generalizing the design. It will resize the gallery template height, circle shapes, and font size based on the number of items in the gallery and the height of the gallery itself. I used the tablet form factor to give myself more room to experiment but it could easily be translated to the phone form factor. The function used to generate the y-values could use some tweaking as the first and last items are a bit farther to the right that I like, but other than that I think it turned out okay.

 

Again, great challenge @tianaranjo! It was a lot of fun working on this.


2018-12-28.pngGeneral look2018-12-28 (1).pngX-coordinate calculation

h-nagao
Level 10

Re: Gallery Challenge - X,Y coordinates

Great work @wyotim!! Here is another solution for this challenge, beased on polar coordinates.

(Result is almost same)

I attached msapp just in case.

Thank you @tianaranjo, for providing nice oppotunity!

circle.PNG

Super User
Super User

Re: Gallery Challenge - X,Y coordinates

My attempt at fully generalizing @h-nagao's method:

2018-12-29.png

 

And some notes on how superior his method is compared to what I was trying: whereas I was trying to fit the icons in the gallery, assuming uniform y-coordinates due to the uniform gallery template heights, he kept the angles between icons uniform and fit the icons in by breaking the boundaries of the gallery templates(!!!). Such a great approach! And much nicer looking as well.

 

In the attached app, I generalized his approach, keeping the resizing tweaks from my previous attempt. What I think would be a fun extension of this would be working on animating this (perhaps a vertical slide in where the icons follow the curve until they reach their stopping point?) as well as variations on the theme (quarter circle, horizontal half, etc.). Super fun stuff!

11 REPLIES 11
KickingApps
Level 8

Re: Gallery Challenge - X,Y coordinates

 

Huge shout out to @mofumofu_dance (twitter handle) for this solution.  His use of algorithms in apps is amazing and definitly one to follow and learn from.

 

 

image.png

Super User
Super User

Re: Gallery Challenge - X,Y coordinates

I was just getting started on this challenge but it looks like it is already solved! Great work @h-nagao!

 

While this place doesn't usually get too math-y, I must say that a good understanding of the polar coordinate system and circular geometry can go a long way, as this challenge and awesome solution both show.

 

Thanks for sharing the solution @KickingApps and for the challenge @tianaranjo!

Super User
Super User

Re: Gallery Challenge - X,Y coordinates

Inspired by @h-nagao's work, I decided to throw my hat in the ring. I have exported and attached my attempt at generalizing the design. It will resize the gallery template height, circle shapes, and font size based on the number of items in the gallery and the height of the gallery itself. I used the tablet form factor to give myself more room to experiment but it could easily be translated to the phone form factor. The function used to generate the y-values could use some tweaking as the first and last items are a bit farther to the right that I like, but other than that I think it turned out okay.

 

Again, great challenge @tianaranjo! It was a lot of fun working on this.


2018-12-28.pngGeneral look2018-12-28 (1).pngX-coordinate calculation

tianaranjo
Level 8

Re: Gallery Challenge - X,Y coordinates

@wyotim Nice work!  I have just been diving into integrating calculations into my apps and learning these techniques for the first time; it's been so exciting.  I have another gallery challenge; if I cannot resolve it, I'll be throwing it out here and onto the twitter forum again with the hopes of generating the same curiosity.

Thanks for your solution.  I've downloaded and will begin dissecting.  

Super User
Super User

Re: Gallery Challenge - X,Y coordinates

@tianaranjoAwesome! While I hope you are able to resolve your issue, I am also quite happy to investingate a good challenge. If anything in the app I attached needs further clarification, feel free to message me here or on twitter (@ShortForTim). It was a pretty sparse and quick build so I didn't comment too much of my approach.

And thanks again for posting!

tianaranjo
Level 8

Re: Gallery Challenge - X,Y coordinates

@wyotim Following you now -- and I will reach out with questions if necessary. Thanks again!

h-nagao
Level 10

Re: Gallery Challenge - X,Y coordinates

Great work @wyotim!! Here is another solution for this challenge, beased on polar coordinates.

(Result is almost same)

I attached msapp just in case.

Thank you @tianaranjo, for providing nice oppotunity!

circle.PNG

KickingApps
Level 8

Re: Gallery Challenge - X,Y coordinates

@h-nagao - awesome contribution; thanks! I’ve been following you and learning from you for awhile. Amazing things your doing here. Appreciate the time y’all put into helping me find a solution. As mentioned earlier, another gallery challenge on the way if you’re up for it. I’ll tag you and @wyotim when I post details.
Super User
Super User

Re: Gallery Challenge - X,Y coordinates

@h-nagaoThat is awesome! Way better than my humble attempt. Thanks for attaching the file. I have learned so much from seeing what you do but getting to see how you do it is increadibly helpful!

Helpful resources

Announcements
firstImage

PowerApps Monthly Community Call!

Join us next Wednesday for our Demo Extravaganza, October 16, 2019 8am PDT.

firstImage

Microsoft Business Applications Virtual Launch Event

Join us for an in-depth look at the new innovations across Dynamics 365 and the Microsoft Power Platform.

firstImage

Watch Sessions On Demand!

Continue your learning in our online communities.

Power Platform 2019 release wave 2 plan

Power Platform 2019 release wave 2 plan

Features releasing from October 2019 through March 2020

FirstImage

Power Platform World Tour

Coming to a city near you

thirdimage

PowerApps Community User Group Member Badge

Fill out a quick form to claim your user group badge now!

FourthImage

Join PowerApps User Group!!

Connect, share, and learn with your peers year-round

SecondImage

Power Platform Summit North America

Register by September 5 to save $200

Top Kudoed Authors
Users Online
Currently online: 194 members 4,437 guests
Please welcome our newest community members: