I am trying to create basically a puzzle in Flex Builder 3. I display images from an array onto a canvas that can be dragged and dropped around the canvas. My problem is that I don't want the images to be able to overlap each other. Any ideas on how to prevent this??
They can overlap as you drag but not when dropped, they need to "snap" to the nearest point that is not already occupied by another image.
I did something similar to this. What you do is onDrop add the target (x,x + object.width) and (y,y + object.height) to an array. Prior to this, if array is not null, check to see if your new object's x or y value is within an existing range in the array. If so, do not allow drop else allow the drop. All images, regardless of "picture" are square/rectangles so this would prevent the overlapping. However, if you have complex pictures (i.e. circles/hexagons) and are trying to butt the edges together, then this method will not work.
Related
I am trying to create a specific solution for weeks now and I have tried many things but I am just not sure if it is possible at all to achieve. I need your opinions and point me in direction o a correct approach. Following what I am trying to create:
Initially there is a tile layout in which a certain number of cards (say 12) are placed in 4x3 grid:
Now, if user clicks on a tile (Box 3), the state changes to following:
Selected tile is expanded and other tiles get aligned one below another on the right side:
Challenge is that I want to create a transition from every tile's initial state to the state where every tile is aligned one below another on the right. At the same time, when a tile is clicked it is expanded in place.
Note - there are no sudden change in positions, no reload of page and preferably no JS (I wanted to write a CSS-only solution). Everything smoothly animates to new position. From the second screen if a different tile is selected (from right), then the expanded item will shrink and go in to the right hand stack while the selected item will expand and take place of the currently expanded (B3).
If you could just point me to correct direction it would be great help.
thanks.
You should check css flexbox.
Using the "order" proprety, you could asign order of every box from 2 to 8,
and each time a box is selected, you change it's order to 1 and you also change its size and colour.
However, I don't think you can use 'click' actions with css only.
I would recommend using JS for what you are trying to achieve.
Hope it helps
I have identical buttons on the same page and I want Sikuli to click only one of those but it ends up clicking the other name sake button. Unfortunately, the button names cannot be changed. Any suggestions on how I could handle this situation?
Thanks!
You can tell Sikuli to operate on a particular region on the screen relative to a given image/screenshot object. This is called TargetOffset. Refer here assuming you are asking about using sikuli programmatically. From Sikuli IDE, double click on the screenshot image and it brings up a window where you can set accuracy and targetOffset.
If the two icons are close together, and will always appear the same way, and the space between them will always appear the same, then a
click(imageOfTwoIcons).targetOffset(x,y)
is probably the simplest way to go. But, if there is anything that would make this method unreliable (anything between the two icons ever appears differently than when you are making your screen capture of them)--
You could also use the python sorted() function to sort the images by their position. For example, if one image is always above the other, then you could find both images and sort them by their y coordinate, like so:
#a little prep for the sorted function to get the y coord of the icon
def byY(icon):
return icon.y
#findAll() on your two identical icons and make them into a list
bothIcons = list([x for x in findAll(icon)])
#then sort them
sortedIcons = sorted(bothIcons, key=byY)
iconOnTop = sortedIcons[0]
iconOnBottom = sortedIcons[1]
#then click on the one you want
click(iconOnTop) #or save a line and say: click(sortedIcons[0])
The same can be done if you know that the icon of interest is always left or right of its twin:
def byX(yourTwoImages):
return image.x
bothIcons = list([x for x in findAll(icon)])
sortedIcons = sorted(bothIcons, key=byX)
click(sortedIcons[0]) #for the image on the left
I like this better than working with regions if the two icons are very close together on the screen, or if it's possible for the icons' placement to ever change.
you can enlarge the buttons image, so that the image will include more than just the image, but also the background around it (if you can be sure that the background is not changing) but remember that sikuli clicks on the center of the image, so make sure that the button is in the center.
another option is to click using offset (http://doc.sikuli.org/tutorials/checkone/checkone.html)
use something like this:
this.offset = 15;
org.sikuli.script.Region reg = screen.find("image").left(this.offset);
screen.click(reg);
I'm working on a simple widget system, and I'm implementing some containers right now.
Here's the situation I find myself in:
I have a Widget base class, a Container class, which is a widget that can contain other widgets, and several widget sub classes like Button.
I have two types of container: Container itself, which positions children absolutely, and Box, which will stack widgets next to each other, either horizontally or vertically.
Each widget draws itself at x=0, y=0. Therefore, containers need to add an offset to the drawing context before the widgets are told to draw themselves.
Each widget does its own hit testing based on its x/y position.
So far, it works fine. But it falls apart now that I'm implementing Box: What I do is that I overwrite the drawfunction inherited from Container to draw them all in next to each other, instead of based on their x/y position. Quite simple.
But event handling is totally off now, as the widget's x/y position has become meaningless.
I think I have two options:
Have the widget do hit testing at position x=0, y=0, like drawing. Then recalculate the mouse position to match that in Container.
Make each layout set x/y for its children, and make children draw themselves at their x/y position again. No more offsets for the drawing context
The first one is a bit ugly, I think. The second one is pretty complicated to implement, since I need to react to position changes in widgets.
How to other widget systems like Qt, Gtk and wxWidgets generally tackle this? I've looked at the source of some of these, but can't quite figure that out, it's too sophisticated. I don't have any resizing or packing issues to consider.
You are trying to implement your own layout system. You should expect it to be difficult.
I would advise against the first method. The x,y coordinates of a widget are not only used by the widgets themselves, but by anyone outside of the container who wants to do something with the widget.
The second solution is what I've chosen to implement custom widgets made of several smaller widgets and it's not that hard to put together if you don't want too many features.
Just get the widgets when they are added to your container, set their position to the current free spot, and move on to the next.
Hi i'm trying to get a photoshop-like behaviour for my QGraphicsScene
The grid in the background should not resize with the call of scale. And I must be able to save the picture with QPixmap::grabWidget(view) but without the background grid. I can probably do it with removing the background layer just before saving the picture, but i'm not sure if its cleanest way to do it.
Any ideas ?
thx.
Question 1
The grid in the background should not resize with the call of scale.
Use the QGraphicsItem::ItemIgnoresTransformations flag.
The item ignores inherited transformations (i.e., its position is
still anchored to its parent, but the parent or view rotation, zoom or
shear transformations are ignored). This flag is useful for keeping
text label items horizontal and unscaled, so they will still be
readable if the view is transformed. When set, the item's view
geometry and scene geometry will be maintained separately.
In order to set this flag use the setFlag function when creating the grid item.
Question 2
I must be able to save the picture with QPixmap::grabWidget(view) but without the
background grid.
Call the hide function on the grid item before calling the grabWidget. After you have grabbed it you show it again by calling the show function.
If I have an object in a layout in Flex what is a good way to 'break it out' of that layout to be able to animate it.
For instance I have an image and a caption arranged at an angle. I want to make the image 'zoom out' slightly when the mouse rolls over it. Since its in a layout container is active if I were to resize it then obviously it would move around everything else.
I dont think I can achieve what I want by just setting includeinlayout=false.
Any experience with best practices on this?
My best idea I'm wondering about is making the image invisible and creating another image at the same location by using the screen coordinate conversion functions. This jsut semes clumsy
Wrap your object in a fixed size Canvas so that the layout upstream will remain the same. Then position the object manually within that container and then set its includeInLayout to false. At that point, you could do whatever you wanted with the interior object. Oh, also set clipContent to false. This should work whether you want it to grow or shrink.
If this is an itemrenderer or something that you've wrapped into a class, you could handle all of this in the class definition and make it transparent to consumers of the object. You'd also be able to write a mouseOver function that did what you wanted with the interior object that should zoom.