Screenshot doesn't match coordinates and size of element for iOS app - testing

I'm using a Appium methods to take a screenshot and crop a perticular part of that screenshot according to coordinates and size of an element.
The way I do this:
Take a screenshot
This is done with getScreenShotAs() method
Crop out the part of that image
This is done
image.getSubimage(getElementCoordinateX(element),
getElementCoordinateY(element),
getElementWidth(element),getElementHeight(element));
public static int getElementWidth(MobileElement element) {
return element.getSize().getWidth();
}
public static int getElementHeight(MobileElement element) {
return element.getSize().getHeight();
}
public static int getElementCoordinateX(MobileElement element) {
return element.getLocation().getX();
}
public static int getElementCoordinateY(MobileElement element) {
return element.getLocation().getY();
}
I tested this approach on Android and it works as intended, but on iOS it crops out totally different part of the screenshot and I'm sure that it's the right element that's being located.
Developers told me that iOS apps work with frames and that I'm probably getting the bounds coordinates and not the frame's coordinates. I didn't find a way to interact with them using Appium. Is there a way to make this work as intended?

you can get screenshot of element directly using:
Ruby:
element = driver.find_element(:predicate, "type == 'XCUIElementTypeSlider'")
screenshot = driver.element_screenshot_as(element ,:base64)
This should crop the screenshot automatically and correctly...

Related

howTo get Image Resource of a ImageButton in kotlin

i want change the ImageResource of a ImageButton that i have find by id.
Motivation
a ImageButton(bottom) works as a reminder/backup of the last click of a ImageButton(top) .
setup:
some ImageButton (at the top of the app).
a ImageButton (at the bottom of the app).
example without errors, but don't find ImageResource of idR1
findViewById<ImageButton>(idR1).setOnClickListener {
findViewById<ImageButton>(idR5_oppCiv).setImageResource(R.drawable.athen_cavalry_swordsman);
not working examples
findViewById<ImageButton>(idR1).setOnClickListener {
findViewById<ImageButton>(idR5_oppCiv).setImageResource(it.resources.getDrawable());
findViewById<ImageButton>(idR1).setOnClickListener {
findViewById<ImageButton>(idR5_oppCiv).setImageResource(it.getImageResource());
try to get and set Drawable
following causes the app to crash when i click on an ImageButton.
Here i use a defType "res" to get the resource (the image hopefully).
val resR1: Int = resources.getIdentifier("r1col$i", "res", this.packageName)
findViewById<ImageButton>(idR1).setOnClickListener {
findViewById<ImageButton>(idR5_oppCiv).setImageDrawable(getDrawable(resR1))
How could i get this image resource of it ? And use it for the other ImageButton?
You should be setting the image like using setImageDrawable like this.
val image = findViewById<ImageButton>(R.id.your_view_id)
image.setOnClickListener {
findViewById<ImageButton>(idR5_oppCiv).setImageDrawable(image.drawable)
}

Creating a flexible UI contianer for an image and a label

I thought this would be like pretty simple task to do, but now I have tried for hours and cant figure out how to get around this.
I have a list of friends which should be displayed in a scrollable list. Each friend have a profile image and a name associated to him, so each item in the list should display the image and the name.
The problem is that I cant figure out how to make a flexible container that contains both the image and the name label. I want to be able to change the width and height dynamically so that the image and the text will scale and move accordingly.
I am using Unity 5 and Unity UI.
I want to achieve the following for the container:
The width and height of the container should be flexible
The image is a child of the container and should be left aligned, the height should fill the container height and should keep its aspect ratio.
The name label is a child of the contianer and should be left aligned to the image with 15 px left padding. The width of the text should fill the rest of the space in the container.
Hope this is illustrated well in the following attached image:
I asked the same question here on Unity Answers, but no answers so far. Is it really possible that such a simple task is not doable in Unity UI without using code?
Thanks a lot for your time!
Looks like can be achieved with layout components.
The image is a child of the container and should be left aligned, the height should fill the container height and should keep its aspect ratio.
For this try to add Aspect Ratio Fitter Component with Aspect mode - Width Controls Height
The name label is a child of the container and should be left aligned to the image with 15 px left padding. The width of the text should fill the rest of the space in the container.
For this you can simply anchor and stretch your label to the container size and use BestFit option on the Text component
We never found a way to do this without code. I am very unsatisfied that such a simple task cannot be done in the current UI system.
We did create the following layout script that does the trick (tanks to Angry Ant for helping us out). The script is attached to the text label:
using UnityEngine;
using UnityEngine.EventSystems;
[RequireComponent (typeof (RectTransform))]
public class IndentByHeightFitter : UIBehaviour, UnityEngine.UI.ILayoutSelfController
{
public enum Edge
{
Left,
Right
}
[SerializeField] Edge m_Edge = Edge.Left;
[SerializeField] float border;
public virtual void SetLayoutHorizontal ()
{
UpdateRect ();
}
public virtual void SetLayoutVertical() {}
#if UNITY_EDITOR
protected override void OnValidate ()
{
UpdateRect ();
}
#endif
protected override void OnRectTransformDimensionsChange ()
{
UpdateRect ();
}
Vector2 GetParentSize ()
{
RectTransform parent = transform.parent as RectTransform;
return parent == null ? Vector2.zero : parent.rect.size;
}
RectTransform.Edge IndentEdgeToRectEdge (Edge edge)
{
return edge == Edge.Left ? RectTransform.Edge.Left : RectTransform.Edge.Right;
}
void UpdateRect ()
{
RectTransform rect = (RectTransform)transform;
Vector2 parentSize = GetParentSize ();
rect.SetInsetAndSizeFromParentEdge (IndentEdgeToRectEdge (m_Edge), parentSize.y + border, parentSize.x - parentSize.y);
}
}

Resizing desktop application with ligdx issues

I'm trying to make an app using libgdx. When I first launch it on my desktop, my map print well. But if I resize the window, the map is no longer completely in the screen.
But if I change the size on the beginning, the map print well. So there might be an issue with my resizing function.
In my GameScreen class I've got :
public void resize(int width, int height)
{
renderer.setSize(width, height);
}
And my renderer got this :
public void setSize (int w, int h)
{
ppuX = (float)w / (float)world.getWidth();
ppuY = (float)h / (float)world.getHeight();
}
For example, if I reduce my window, the map is too small for the window. If I extend it, the map doesn't in it.
If you have a fixed viewport, which is the case most of the time. You don't need to do anything in your resize method. The camera will fill the window to draw everything even if you resize it at runtime.
I, myself, never put anything on resize.

Change JavaFX TabPane background

I'm developing an application in javaFx and I'm using TabPane to organise content. My problem is that when I put a node as the content of a tab, and then set the background of that same node, the background color gets kind of blurry, as you can see in the image, the background color was defined in a css file.
If anyone knows how to resolve this, would really appreciate the help.
http://i.stack.imgur.com/h3gNH.png
I think you are a victim of this issue:
JavaFX Image (PNG) transparency crispness being lost when rendering
It will likely be fixed in a forthcoming (i.e. Java 8) release.
For now, you may be able to use the work-around documented in the linked question's answer.
To do this, place your image in a CenteredRegion and use that as the first element of a StackPane placed in your tab. Then layer the rest of the tab content over the image by adding the content to the StackPane. It's a bit awkward and there may be a more straight-forward solution for your particular case.
class CenteredRegion extends Region {
private Node content;
CenteredRegion(Node content) {
this.content = content;
getChildren().add(content);
}
#Override protected void layoutChildren() {
content.relocate(
Math.round(getWidth() / 2 - content.prefWidth(USE_PREF_SIZE) / 2),
Math.round(getHeight() / 2 - content.prefHeight(USE_PREF_SIZE) / 2)
);
}
public Node getContent() {
return content;
}
}

Nested Grid in GWT

I need to develop a control which is similar to the Nested Grid in the Smart GWT.
User will be having a column for expansion images, when user clicking on the image in a particular row, a sub grid has to be opened there itself. Here all remaining rows needs to move down.
How can i achieve that functionality? Can anybody give me some clues so that i can proceed.
I have already a grid which is a celltable with custom header(with search functionality implemented).
Thanks,
Saritha.
Create your nested widget (myNestedWidget) that you want to show. It should have a CSS style "position: absolute", unless your grid is added to the LayoutPanel (or similar), in which case you can position your widget directly. Let's call the parent widget of your grid gridParentWidget.
In your CellTable add the following handler:
myTable.addCellPreviewHandler(new Handler<myObject>() {
#Override
public void onCellPreview(CellPreviewEvent<myObject> event) {
if ("click".equals(event.getNativeEvent().getType())) {
if (event.getColumn() == 0) {
int top = myTable.getRowElement(event.getIndex()).getAbsoluteBottom();
int left = myTable.getRowElement(event.getIndex()).getAbsoluteLeft();
myNestedWidget.getElement().getStyle().setTop(top, Unit.PX);
myNestedWidget.getElement().getStyle().setLeft(left, Unit.PX);
gridParentWidget.add(myNestedWidget);
Scheduler.get().scheduleDeferred(new ScheduledCommand() {
#Override
public void execute() {
int height = myNestedWidget.getOffsetHeight();
myTable.getRowElement(event.getIndex()).getStyle().setHeight(height + "px");
]
});
}
}
});
}
This is obviously an outline of the solution. The details of the implementation may vary slightly depending on which widgets you use for your parent widget and your nested widget. If you change z-indexes somewhere, you have to take it into account too. You also need to make sure that your nested widget fits into the width of your grid, or you'll need to wrap it in a ScrollPanel and set a width to it explicitly.