Hi there, first time IF user so I thought I might reach out for any expert tips and best practices on how to approach my particular design.
I need to build an interactive grid, made up rows and columns of round buttons. When a button is touched, it expands over the top of an entire column and presents some info (image/video/text), like so:
How would you experts approach this? Asset collections? Asset flows? Any tips and pointers would be much appreciated.
Cheers!
Hi, I think the best approach is line these buttons up like this and place triggers over each. For the part that appears when a button is touched, if its all using a common template (where only image changes) you can use one template and just have the respective button change to its own image/ text before making it visible over the others.
Even in you put these buttons into an asset grid , you will still have to trigger them individually
Thanks so much for your reply.
I was thinking that each button will have a touched state, which is the
large version you see in the design. Each button will also have a disabled
state, as I need to disable all other buttons in that column.
How would you implement the ādisablingā of all other buttons in the column?
Will binding help me here āwhen button with index x is pressed, then change
all buttons with index > x and index < x to disabledā? Can I do that with
bindings?
Hi, the easiest way would be to set all of these all toggle buttons & add them to a set (a new property setting), which allows you only one selection at a time. Each toggle will have the trigger set that makes it show its specific content. So at a time only one button can be pressed, you would not need to add additional uncheck state triggers to each button, as the toggle set does it for you.
Thanks again, thats an awesome tip!
I was playing around with Asset Flow and Asset Grid collections today to
set up my columns. Asset Grid seems perfect except each column will need to
"snap" back into row alignment after it has been dragged up or down. Have
you got any suggestions on implementing this?
I was playing with Asset Flow (Iāve shifted it 90 degrees) and tried to
"flatten it" into a column (shifter 90 degrees) but struggling to make the
buttons line up with equal space.
If your buttons are the same size, you should not have any problem with them, can you send me the graphic for one button, I can check it
I donāt think itās the images that are the problem but lining them up in a evenly spaced vertical column using Asset Flow, by setting Curtain Aperture and Wingspan properties, is next to impossible. I need to have 10 of these showing, each can be tapped (so they all need to have focus).
Here is a test image Iām working with (final image sizes may vary).
You will not be able to achieve the grid layout you requested with an asset flow, you will need as asset grid, as far as positioning is concerned, you can adjust where you want the enlarged button to show, when you click on a specific button
I was afraid thatās the case. The problem with the Asset Grid is that it doesnāt snap back into place after itās been scrolled and will look misaligned next to other columns. Have you got any suggestions to address that?
Iām not sure what you mean by snap back, the way you can accomplish that is have a group template that is hidden that contains your enlarged button image& text, etc. That remains hidden. Depending on what button is touched, you get the group to be positioned accordingly and content changed and displayed.
@goran.spuzic
Personally, I would explore putting all of your content into Excel, and use the Asset Grid to display all the images in a scrollable grid format. Use a data template that includes a hidden button that overlays over each image within the grid. Then create a Flip-Board that would be the large view of the object, and set it to be hidden. The flip board should be tied to the same exact Excel document data.
Have the overlay button for all the items in your asset grid āshowā the flip board, AND scroll it to the same item number that was touched from the asset grid using a binding. Iāve done this many times with many variations and it works great.
Imagine a few people scrolling a few different columns. If each column was an Asset Grid a button can stop anywhere and will result in misaligned rows with buttons all over the place. With an Asset Flow, this wonāt happen as Asset Flow ensures that a button always snaps back into position (a button canāt be scrolled anywhere).
Thanks for the reply! This sounds good. Yes I am exploring how to use Excel, I was going to set up one Excel data sheet per column.
Sorry, what is a Flip-Board? I canāt find that in the doco.
Do you think the data overlay template needs to sit over the entire grid (so on a 10X10 grid I would need 1 overlay with 100 buttons in total) or just over the top of every column (so 10 overlays with 10 buttons each).
Hey there, I created a video for you. I apologize itās around 9 min long, but I think I found a way for you to accomplish what you need.
Also, after I made this video, I realized a slightly more efficient way would be to set the first text item that is bound to the scroll offset to have a ācustomā converter which contains (INPUT/300)+1ā¦where 300 is the height of each item in the asset grid. Then another text item would bind to that value, and would be a number converter set to 00, like the video shows.
Hereās the video below, hope this helps!
Wow, thank you so much for helping me out here, the video makes perfect sense. The collection scroll offset was the missing piece of the puzzle for me. That solves a few of my problems such as making sure the pop up displays over the top of the button that was tapped!
Just on that, I havenāt been able to find a way to simply get the X and Y coords of a touch event on the screen. Is this possible? Surely Iām just missing it.
Very grateful for the amount of effort you put in here!
Whatās a little surprising is that I canāt bind to the X,Y coordinates of an item in a collection i.e there really should be an X,Y value here:
ah, now I understand, this is still achievable, iām a bit confused here, I kept the initial layout in your first post in mind. what you mention now is something different. Both are different concepts, the initial layout is the plain toggle set thing with a bound show/ hide details screen which can be done with a normal layout/ asset grid.
The asset flow you mention above definitely lets you scroll to item in focus & binds the details section via an excel sheet, not to hard.
I doubt youād be able to bind X, Y for a single item within a collection, the collection picks up the X, Y from the main asset. I have put together a quick video based on you first post. I was under the impression you wanted something like that. I could not load the video directly, so zipped it upProduce.zip (239.5 KB)
Youāre very welcome, good luck to you. To answer your questions - there isnāt a way to read or trigger a touch at a specific point on the screen. I actually asked this a while ago in a previous topic and it seems to be a difficult thing to program.
In terms of getting the X,Y value of an asset in a collection - this can only be done in a Pinboard collection. @melvyn_br is right about the other collections, I donāt think thereās any positioning you can set besides the index in focus and scroll offset.
Thank you @melvyn_br, and thank you for the video. Iāve learned a lot watching these. I did not make it clear that each column would need to scroll independently in my first post. Makes things a lot trickier. Weāll be going back and reviewing the design concepts now that the limitations are clearer. Thanks again for your help.
