Centering the canvas

It's tricky but can be done anyway. First group everything you have in your screen inside a dynamic panel (right click -> group in dynamic panel). Then do the same in the template. Select the background in the screen and look for the 'layout' properties. There select 'vertical layout' and horizontal alignment 'center'. Then do the same with the template's background. You'll see how the big dynamic panel centers in the screen. The tricky thing is the dynamic panel in the template and the ones in the screens must have the same width. Then everything will be centered correctly. From then on you will have to draw the content of the template and screens inside their 'main' dynamic panel. You can change the size of that panel to fit all your content just be sure to have the same width in all of them.

I know that's not the perfect way to do it but we are still working on a more easy way to do so.

I had this same question. I'm glad you guys are working on better canvas controls. That was one of the reasons that almost kept me from purchasing the tool.

Wow, I didn't think that could be a reason to not buy Prototyper. Could you tell me why is so crucial to your work please?

As a designer I need complete control over everything in the designs I do. The canvas is one of the most important functions. Can you imagine using Adobe Photoshop or Illustrator and not being able to control the canvas. The reason I bought your software is the online functionality and the testing options (by the way you need some real world tutorials on deploying those through your software). You guys for me versus the 20+ apps I tested are the easiest to get up and running on and offer a lot of robust features.

The canvas from my opinion is an essential to have control of.

Hope that's helpful.

Ok, it's planned for the June release. Thanks.

My pleasure.

I totally agree with Anthony. The zoom controls leave much to be desired. I find it a contant pain to zoom in and out on the things I need to focus on.

Could you tell me why you don't like the zoom as it is now please?

Abel can give you his but I'll also give you mine.

1. Unless I can't find it there are no keyboard shortcuts for zoom in/zoom out.

2. When you use the pull down to zoom the item you have selected to zoom in on is not the focus, the app zooms to center of canvas not the object with focus.

3. If I tweak and object and them switch to simulate mode and want to see how it looks, the simulate mode is zoomed as well. I think that I should see the whole canvas.

4. I also find the the other zoom options, width, height, and page a re buggy. In using those I could never get them to do what I was expecting. an in several cases, content on the page disappeared. By disappear I mean was deleted. I thought it was a redraw issue but when I zoomed back it was actually gone. I had to close the app to get it back. And in those cases the app actually crashed. There fore I don't use those.

On another note, this app has quickly moved into my arsenal.

What ever I can do to help you guys expand the the feature set, let me know. Happy to help.

Victor,

I actually have a few other questions that aren't for the board, do you have an email address or contact info where I can send you a message?

Thanks so much Anthony, you can send me an email to victor dot conesa at justinmind dot com

Our UX team is currently reviewing tools to purchase. I hope i am on topic however I can not get past the canvas controls, no panning?... the canvas is locked to the top-left and it bothers rather alot. Even Microsoft Word centers its document. I do come from a photoshop/illustrator background and I have quite a large screen so positioning the canvas is very important to me.

Also, if you click on the canvas anywhere it comes up with template properties and it looks as if i can change the position and size of the canvas ... this is very misleading. I have gone through your documentation & googled "justinmind editing canvas preferences" and ended up here.

I have only used this application for 15mins and its a massive frustration. I will try to build one thing. But its likely i will give up.

Hi Emily,

I will try to answer one thing at a time. First you don't need to position the canvas anyway, the canvas is 'infinite', in fact the grey lines with the resolution are just guides to help you on your design. Many tools work that way, specially the drawing software such as graffle and visio. Microsoft Word centers the document because you are writing a document.

When you click on the canvas it doesn't comes up with template properties but with the screen properties where one of them is the associated template. It's true that someone could think that the size and position can be changed even when these properties are disabled. We will remove them to avoid misunderstandings.

I'm sorry you feel frustrated, maybe you could help us by detailing what did you cause the frustration.

Thanks for your help

I havent used those tools although I aware of them so I must be used to different software that doesn't restrict the canvas and I can pan. Such as photoshop hold the spacebar down and then click and move the cavas around dispite it going into "negative" space. And zoom using my middle mouse scroll wheel.

Even if I could just move the resolution "guides" to start at position 10x & 10y or even turn them off and use our standard design grids that would be prefered. Turning off guides & snapping to grid with keyboard short cuts would also be very useful as I flick between them quite often.

Some bugs I have come across since i am here:

When i accidently clicked on horizontal align I couldn't undo.

Using Ctrl + x on text ... to cut .. it seems to cut the text out it but i can't get out of editing that object unless i switch tabs.

Thanks Emily for all your feedback. That really helps. But I'm surprised because there is actually pan and zoom with mouse wheel but for some reason you didn't discovered it. That must be some usability problem for sure.

You can pan the same way as you do in Photoshop but only if you are not seeing all the screen content in the canvas already. Sometimes you need to click on any element in the canvas to make the pan work. Same happens with zoom with mouse wheel.

I'm very intrigued about what you call 'our standard design grids'. Could you tell me how would you like to have them in Prototyper? The keyboard shortcuts for turning of guides and snapping are great suggestions. Just a tip, when you move a widget, if you press the alt key while moving the snap to grid don't apply.

Now the bugs. When you say 'clicked on horizontal align' you mean in text or in the components alignment?

When you say that you can't get out of editing, you can't even if you click in another place in the screen?

I really appreciate your help. At first when I saw your comment I thought :oh no, a UX mad with the little details, but I must say that I've never met a UX who complaint about some detail in an application and don't purpose a solution. So even when that comments hurts in our mind as developers I must say the feedback coming from UX users have been the most useful one. So thanks so much and we are really sorry to make you feel frustrated but we are working hard to make the application smoother and yet powerful every day and you guys helps us a lot to do it.

Thanks for listening. I do think some of the frustration comes from learning new software and slightly different approach to work flow (which is a good thing but you just feel clumsy the first few times you do it).

For all our new websites its 960 - 12 column (i know there is a extra download for this but i couldn't seem to move the 12 columns around so i created my own). With existing websites there is a range of widths. I divide all widths, including 960, into 1/2, 1/3's, golden ratio as a reference.

To do this I just create little blocks at the top of the document with these portions and follow down using the gride lines. I hope that makes sense.

When I clicked horizontal align the layout tool one ... I had two elements selected (a shape and text box) and my entire document change. Looking at it now I can see i clicked the layout button but if i have two elements selected I assumed it would align based on the icons being clickable. Even if my assumption was incorrect i could at least reverse this but i couldn't :(

Apologies if my post doesn't make much sense, its monday morning here!

Solved in 4.3

Thanks emily, I report to the development team the issue about the layout. And thanks so much for your help.

I have downloaded the trial version of 4.3.1, and have been unable to center the website's content. Looking at the above instructions, I'm unable to "select the background in the screen". Pls clarify.

If I am unable to center align prototypes, I will not buy this software.

To select the screen's background just click on the background in the canvas and the properties panel at the left will show you the screen's properties.

OK, I was just writing out a support question about this very issue and Justinmind's Community took me to this question. Will it be resolved soon? I just want my whole prototype to be centered when I click Simulate.

followed this and works for what we need it to do.

Right now that's the only way to center the screen but we are already working in a much better and intuitive way to do it. We plan to have it at 1st quarter 2012

Glad to hear you are working on the canvas controls and zoom/pan cababilities. Hopefully keyboard shortcuts will be a big part of it. Spacebar to pan, cmd+[+/-] to zoom? Will it work w/ a trackpad (MacBook Pro)?

Can we throw in keyboard shortcuts to switch tools too?

There is pan already in the current version. You just have to select the background, then press the Spacebar and the cursor turns into a 'hand'. Then, without releasing the Spacebar, click and drag.

The shortcuts for zoom are + and - keys (without the cmd).

We have some macs with trackpads in our offices and we are willing to add the gestures to Prototyper but you will have to be patience. We would start with the 'zoom' gesture.

I don't understand what you mean by 'switch tools'. Could you explain it a little further please?

Thanks Victor.

Nice on the pan feature! Maybe I didn't have the BG selected when trying this before.

For the zoom feature, does that only work for number pad "+" and "-" keys? It's not working on my MBP keyboard (which doesn't have a number pad).

In terms of switching tools, it would be nice to have keyboard shortcuts to switch between tools instead of having to mouse up to the tool bar. E.G.: activate the zoom tool w/ the "Z" key and jump back to the Select tool w/ the "S" key.

Yes, it works with the number pad only... we should fix that. The thing about switch tools with keyboard is a good suggestion too.

I don't understand how to do this... when I put the canvas or dyanmic panel to center horizontal it won't let me stack images on top of one another. forces them side by side... what am I missing?

The structure must be this: canvas with vertical layout and center aligned. Inside the canvas a big dynamic panel with free layout. Then you draw the elements in your screen inside the dynamic panel.

Hello there, I am having the same issue with centering content. This is a deal breaker for me. Has this been resolved yet? Thanks!

I'm afraid you will have to wait a little longer, but it's one of our top priority features to add in Prototyper.

I had to come back to this old issue and share my view on it.

A couple of days ago I too was thinking that the canvas because it is not centering is a huge issue. Now my feeling about this has changed.

The current implementation may not be perfect but it gets the job done and it is not difficult at all. And it centers the content.

First you just click any empty space in your canvas, then modify the canvas/screen properties so that the Layout is set to Vertical and the sub-settings are horizontal middle and vertical top.

Then you DRAW YOUR CANVAS by adding a Dynamic Panel on the screen.

So the Dynamic Panel IS your canvas. You can size it any way you like, you can also add a background image to this panel e.g one that has a drop shadow on both sides.

Then you put your content into this Dynamic Panel that is actually your canvas.

You can even make "dynamic" pages with this method because you can add more than one Dynamic Panel to your canvas - not nested but as in the same stack level. Put one DP there to hold your header content. Put a Data Grid to act as the "dynamic" content or several DP's that you hide/show. Then put last DP to be your footer.

They all stay in the center and what's best - the footer follows your content's length.

So all I'm asking is; what is the problem here? Is there something I may not understand?

In fact the only issue I see here is that the Resolution Guides don't follow the centering.

They stay anchored to the top left corner. But you can switch them off so they won't bother you.

Well, there is an issue. If you have content in a template you need to do the same in the template. And make sure both 'fake canvases' have the same size. That's not a big deal but as you will have a dynamic panel in the screen that panel will block any event that is below that panel in the template. Anyway there should be even easier to configure the screen's content as 'centered'

Ok, point taken.

I'm not using content in my template so I did not notice this.

Thanks for pointing this out for me.

Since a year ago, still planning! This is not good at all! My license won't have any support again by July. Their is no value in this software if this is the way its going to be supported. Then why taking ideas if you are not going to integrate for more than a year. Yet you just release an update.

It will be UI design if prototypes can be centred on the page.

This reply was created from a merged topic originally titled Centre prototype to browser.

We apologize, we'd like to build all the client suggestions + fixing bugs + the new features + what competitors are including in their products faster but I'm afraid sometimes we have to delay some features to be able to do others. We know this is one of the features many users need but you have to understand there are others too. It's hard to decide what to do in every update. The only thing I can say is we've already planned this for the next update but it will depend on how hard is to have it and how long it will take us to include it in the Product.

Any idea when the next update will be, which will make it easy to center the canvas? I'm constantly apologizing to clients when I show them my left-aligned wireframe, which kind of makes me look bad. In the meantime, could you make a quick screen-recording video of the work-around? The written instructions are overwhelming.

Thank you!

Here you go https://vimeo.com/justinmind

Awesome - thanks for the fast work on that!

You're welcome. It's the last we can do before fixing this issue. We are already finishing the technical design for this and now we need to plan how long will it take us to include it in the product.

Hi again,

Is there any update on when this will be available? I'm waiting to upgrade until I know whether this will be resolved soon. Otherwise, I'm afraid I'll have to use another tool :-(

I tried the work-around with the dynamic panels but the elements jiggle all over the canvas. Here's a 10-second screencast: http://screencast.com/t/tqPD4qyUa

Is that normal? If not, how can I get rid of that?

Thank you,

That option will be available next week, with the new 5.0 version. You can try a beta version.

Great news! I'll look forward to that release (I might even hold off showing my current wireframes to my client until I can center the canvas, depending on exactly when it gets released).

Looks like some good stuff in version 5!

Thank you!

WE FINALLY DID IT! Now version 5.0 has an option in the Properties panel of the screen to center the content automatically. There is even an option under the menu Edit to center all the pages of your prototype.

That's awesome. Downloading now to check this out. Thanks for all the work you guys are doing and thanks for being active in this forum.

You're welcome! I hope you like it.

I'm getting a license message. Do I need to which I do not understand. Is this upgrade not part of the license I purchased?

Disregard. I didn't realize I needed to do a yearly maintenance fee. That seems odd to me as I thought once I purchased it was good to go and all I would pay for is Usernote.

Just sent you email.

Fantastic - it works beautifully. Thank you!

Would you mind to send us your prototype (or an example of what you're trying to accomplish) to us? That way I think we will understand where the problem is.

Thank you guys!!

It was really my fault. I put some hours aside, read both PDF’s (the user’s guide and manual) and got it to do exactly what I wanted.

Thank you for your help!

Jorge

I must be missing something - I've got it set to be centered in both the screen properties and in the "all pages" option in the edit menu. When I simulate, it's always flush to the left of the browser. This is using Safari.

To center by default, look to Justinmind preferences, and then the User Interface section. You'll find an option to center alignment.

To center on a particular screen, select the base screen (icon that looks like a monitor) and then look to the Properties palette. You'll see an option to center the screen's content.