Add option buttons for aligning overlay images

[sviplab]

there should be some options buttons to align overlay image in browser window. something like It will help to adjust overlay image in browser window by align to left, center, right also top, middle, bottom. It will be a big help for developer.

viplab

[janodvarko]

I like the idea.

Any tips how the UI should look like?

Honza

[mbuckley]

@janodvarko Previously this was done with a direction pad. So the user would drag the image close to where it needed to be and then move it the last few pixels with the direction controls (up down left right) like an old school nintendo controller.

My vote would be to change the current x/y inputs into a read-only label and add the direction controls to under opacity somewhere..

[mbuckley]

Also each direction would only move the overlay 1px at a time. We could label it as "Fine Adjustment" or something..

[mbuckley]

@janodvarko Something like this would satisfy a few other issues as well

• https://github.com/firebug/pixel-perfect/issues/9
• https://github.com/firebug/pixel-perfect/issues/8

[mbuckley]

so primary icons would go left of the overlay and secondary actions would flow into the right details pane..thoughts?

[aliuk2012]

I like it except it needs a option to position the image at specific co-ordinates and/or display the pictures current co-ordinates.

[mbuckley]

+1 for specific coordinates. Either make the x y inputs or move the x/y above the adjust section on the right and leave as inputs so user can do both wide and fine adjustments.

[aliuk2012]

+1 for x/y inputs above the adjust. could those adjust section also have keyboard shortcuts triggered by the directions arrows on the keyboard to "nudge" the image?

[mbuckley]

Updated the mock to include x/y inputs plus a help text block for keyboard shortcuts.

[nt1m]

I find the mockups a bit too complicated, I would just keep it simple. Maybe dragging to an edge of the window could show a visual indicator that would align the layer, kinda like google docs image dragging

[sviplab]

According to my concept, I have also drawn a UI for pixel-perfect

My idea is to add "align controls" for overlaying images in browser window view-port. It is like simple align tools present in designing software. the red mark buttons will be align controls, the work of these controls are simple just to align overlay image in browser window. for instance if the first left top corner align button is clicked then overlay image will be align to left top corner of the browser view-port. if center align button is clicked then overlay image will be align to center in browser view-port. and so on. Most of website is center and top align like this github site. so developers need to move overlay images in center top of browser as website to check pixel-perfect. using the quick alignment control to overlay images, will be very helpful.

@ibuck according to your nudging concept, i have also drawn an concept the four red mark buttons will be for nudging. In nudge input box set default value 1px, when ever the nudge buttons are clicked it moves overlay image by 1px in its respective direction. Let's say if user sets value 10px in nudge input box then overlay image will move by 10px in respective direction when nudge button is pressed. similarly key boards arrow key will also work as nudge button.

[mbuckley]

@sviplab Thanks for the input!

@janodvarko I'm thinking we should move this discussion to it's own issue or a chat channel for "UX/Design Updates" so we can keep track and be on the same page when it comes to the ui controls.

[janodvarko]

Sure, we can also use Firebug Working Group newsgroup (internal, but public for FWG members) https://groups.google.com/forum/#!forum/firebug-working-group

(btw. chat isn't much persistent for this kind of discussion)

Honza