Tutorial – Grid Creation

A while ago someone was asking to see how I had made something in Axure, which I promptly forgot to make.  But I was recently challenging myself / inspired to make something and thought I would give this as payment.

What is This and Why:

This is a procedurally generated grid.  It can be any size between 2×2 and 5×5.  You can also resize the panel in 100px increments between 400-800px.  There is also a text field to enter text on the first box.  I made this as a test, this whole thing, to see if I could, to see if it was possible.  There was something I wanted to do with it but that is actually *impossible* with Axure.

Click Me For Example

Disclaimer:

  • This is not a practical thing, it is a proof of concept and comments explaining the absurdity should not be mentioned
  • This is not user friendly, was just playing around
  • The underneath “code” is not the most readable; I worked on this before I realized that I would show it and cannot be bothered to go and update it, my most sincere apologies.
  • Enjoy!

Details:

The Dynamic Panel: I ended up burying the grid within a dynamic panel.  The reason for this has to do with the calculations in choosing columns and rows.  I’ll try not to be confusing but if you chose columns then rows then columns, you can have leftover cells, just hanging around with how the math works.  I explored a bit of trying to fix this procedurally (not using static solutions) and then came to the conclusion that the fix would be a huge time sink and what would it bring to the project?  So I hid it with a dynamic panel.  A cheat.

The Text:  The boxes are labeled for a debug mode of sorts, there is the ability to change the first box’s text but that is as far it goes.  Having this ability for all boxes runs into the same problem that the dynamic panel fixes.

Could You?

  • Resize the grid based on window size as it changes? – Probably.
  • Make it a madlib or one of those games from gradeschool to find out how many pools I’d own? – Yeah, could do that.
  • Use it as a teaching tool for math? – Yah but didn’t feel like it, work to reward levels.
  • Write cleaner code? – Next time I do this, I will.
  • If you have some crazy idea for a use and want to talk about it, send me a message.
  • Write a real tutorial for this kind of thing?  – Sure, send me a message.

The Future:

Where can we go from here?  There are things you could put on top of this…  it is just there is also the concern that when you add more and more on top of Axure, the work doubles or triples.  It isn’t really ‘designed’ to do things like this.  There are limits and constraints in the software.  For instance, I originally had a nicer transition on the resizing dynamic panel but then you run into timing multiple elements to all work at the same time and that is…  extremely difficult.

The File:

Tutorial – grid_v5.rp

Leave a Reply

Your email address will not be published. Required fields are marked *