I have a Composite which I will place in an Absolute Panel, I want to be able to specify the location coordinates of the composite and place it at that location in the absolute panel.
Also, at run time, sometime I will have to change the location coordinates of the Composite and move it.
I could have use a grid or other panel but while moving the composit, I want to place a move animation, that's why I'm using an absolute panel.
How to specify the coordinates of the composite before placing it in the absolute panel?
the composite:
public class SlotView extends Composite
{
...
}
AbsolutePanel.setWidgetPosition() will change the location of a Widget displayed inside of an AbsolutePanel. This is limited only to using pixel-based offsets.
A more robust solution is to use a LayoutPanel, which supports the use of font- or box-relative positions. LayoutPanel also has support for animating transitions.
Related
I am trying to spread out the instantiated objects to fill up the grey area in a grid layout. So far I am stuck at this point where I have all the objects stacked on eachother. I did try a few things but they would make the object not visible. Here is the code I have and two pictures. One of the scene and one of the hierarchy. scene picture hierarchy picture
public class stockSpawner : MonoBehaviour
{
[SerializeField] GameObject stockPrefab;
int x;
void Start()
{
x = Mathf.RoundToInt(scene2Calc.nS);
}
void Update()
{
if (x >= 1)
{
Instantiate(stockPrefab, transform);
x--;
}
else { Debug.Log(x + "this is x value");}
}
}
It seems all of your assets are UI. If you want to create a grid, normally I would say to instantiate the objects and change the transform at which they spawn in a double loop. In one loop you would iterate the horizontal axis of spawning while the other moves the vertical. However, as your setup is all UI, you can use some nifty components to do all the heavy lifting for you.
Attach a grid layout group to the parent object of where you want to spawn all of these UI objects. I would recommend attaching this component to the Panel in your screenshot. I would also recommend changing your installation code slightly as you are working with UI objects. To assure anchoring, rescaling, etc. work, you will want to use Instantiate(stockPrefab, transform, false);. That last parameter is instantiateInWorldSpace, which from the docs,
When you assign a parent Object, pass true to position the new object
directly in world space. Pass false to set the Object’s position
relative to its new parent..
Now getting back to the main portion of your question. If you added the grid layout component to your panel, the objects will now be aligned into a grid. There are various different fields on this component you can change. They are on the docs, but I will also list them here for clarity.
Padding The padding inside the edges of the layout group.
Cell Size The size to use for each layout element in the group.
Spacing The spacing between the layout elements.
Start Corner The corner where the first element is located.
Start Axis Which primary axis to place elements along. Horizontal will fill an entire row before a new row is started. Vertical will fill an entire column before a new column is started.
Child Alignment The alignment to use for the layout elements if they don't fill out all the available space.
Constraint Constraint the grid to a fixed number of rows or columns to aid the auto layout system.
If you properly fill out all of these fields, your UI objects when spawned and childed to the Panel object that has this grid layout component will now not be on top of each other, but will form a grid.
AEM offers a plugin to create image maps for its internal inplace editor. After configuration the given values are stored into follow forrmat:
[rect(89,92,356,368)"/content/sites/we-retail/us"|"_blank"|"fdfdfdfdf"|(0.2,0.2004,0.8,0.8017)]
The first paratheses are defines the coordinates of choosen shape.
The content within the first quotaion signs defines the target site, within the second how to open it the browser. In the third pair of quotations sign contains an alternative Text for non images display.
What I don't know are the values in second paratheses. Does someone know for what these values stands for?
From the WCM core components Image model, they are called relative coordinates.
They are not standard HTML attributes and are instead populated as data attributes of the area tag within the image component.
See code below:
<area shape="${area.shape}" coords="${area.coordinates}" href="${area.href}"
target="${area.target}" alt="${area.alt}" data-cmp-hook-image="area"
data-cmp-relcoords="${area.relativeCoordinates}">
Since the map coordinates are fixed coordinates and do not change when the image scales in or not based on screen sizes, the image component’s JavaScript uses this relative coordinates data to adjust the coordinates of the map area whenever the image size is adjusted. This is handled by the resizeAreas() function within the component’s clientlib.
I need a simple image viewer widget to display a Pixbuf, with a zoom factor that can be changed using the scroll wheel (integer factors only, nearest neighbor interpolation), zooming in should adjust the scroll position such that the current center or mouse position will be the origin. Clicking and dragging the mouse should move the surface accordingly; basically what eog or evince do.
There was once an external gtk-image-viewer component for GTK2, but I haven't found anything else…
So I tried implementing my own and this is how far I came:
struct ZoomableImage : public Gtk::Scrollable, public Gtk::DrawingArea {
ZoomableImage() {
auto h = get_hadjustment();
}
};
Which leads to a warning
gtk_scrollable_get_hadjustment: assertion `GTK_IS_SCROLLABLE (scrollable)' failed
I couldn't find any proper documentation about how to inherit interfaces in GTKmm, the headers hide a constructor from doxygen which is supposed to be called with the result of a base class's init() function?! Some examples initialize Glib::ObjectBase(typeid(ZoomableImage)), which only adds more errors.
(My idea was to put my ZoomableImage in a ScrolledWindow which should provide me with H/V-adjustments, these range from 0 to the image's real height/width, in on_draw, I would read the adjustment's value, apply the zoom factor and draw the Pixbuf accordingly. Would this make sense?)
I drew a class diagram of the type 'UML static structure' with Visio 2013. Now I would like to reduce the width of the class shapes in the diagram. I removed the size protection in the developer tools section and also tried to set the width in the corresponding shape sheet but nothing worked.
Does someone know how to do this?
In Visio 2013, you can change class width using a control point (yellow dot), just drag it:
The class shape is composed of a group of objects. You should drag your mouse over it to select not only the external shape, but also all the elements inside it such as the ClassName text and any possibly existing members, etc.
Now, if you remove the size protection as you mentioned, this will apply to all the elements, and then you can change the size using "Size & Position" task pane. (Ribbon --> View --> Show --> Task Panes)
I am using gwt with gwt-dnd and I want to do the following:
1. Select rectangle area by dragging the mouse
2. Select all the elements that are in this area
3. drag all selected elements.
Is there any idea?
On MouseDownEvent record the coordinates of the pointer (event.getClientX() and eventGetClientY()).
On MouseUpEvent do the same. If coordinates are different, you have a selected rectangular.
Get the widget which contains all the widgets or elements that are selectable. Loop through its children.
Compare coordinates of each widget with your rectangular (use getAbsoluteTop(), getAbdoluteLeft(), getOffsetHeight(), and getOffsetWidth()). Select widgets that are totally or partially inside the selected area.
I would add to Andrei's answer that if you to provide feedback by displaying the rectangle during selection that what we do is display the rectangle as an instance of com.google.gwt.user.client.ui.HTML with a style that displays the borders. This is updated using onMouseMove using setPixelSize and setWidgetPosition.
The library gwtquery-plugins offers a MultiSelect feature, so I will give it a try.
gwtquery-plugins