how to rotate UI segmented control - objective-c

hey all i want to know rotate the UI Segmented control to be in a vertical look
cheer
BOB

You can do in this way.
#define degreesToRadians(x) (M_PI * x / 180.0)
[...]
segControl.transform =
CGAffineTransformRotate(segControl.transform, degreesToRadians(90));
if you want set correct position, remember that it consider the center of segControl!
ex:
segControl.frame = CGRectMake(-125, 220, 320, 30);
hope this helps.

I haven't done something like that before but I think one approach could be to subclass UISegmented control and use Affine Transforms related functions inside the Core Graphics framework, there you use for example CGContextRotateCTM() to give a 90 degrees rotation.
Hope this helps.

Related

libgdx camera position using viewport

I am rather experiences libgdx developer but I struggle with one issue for some time so I decided to ask here.
I use FillViewport, TiledMap, Scene2d and OrtographicCamera. I want the camera to follow my player instance but there are bounds defined (equal to mapsize). It means that camera will never ever leave outside of map, so when player comes to an end of the map camera stops following and he goes to the edge of the screen itself. Maybe sounds complicated but it's simple and I am sure that you know what I mean, it's used in every game.
I calculated 4 values:
minCameraX = camera.viewportWidth / 2;
minCameraY = camera.viewportHeight / 2;
maxCameraX = mapSize.x camera.viewportWidth / 2;
maxCameraY = mapSize.y - camera.viewportHeight / 2;
I removed not necessary stuff like unit conversion, camera.zoom etc. Then I set the camera position like this:
camera.position.set(Math.min(maxCameraX, Math.max(posX, minCameraX)), Math.min(maxCameraY, Math.max(posY, minCameraY)), 0);
(posX, posY is player position) which is basically setting camera to player position but if it's to high or too low it sets it to max or min defined before in right axis. (I also tries MathUtils.clamp() and it works the same.
Everything is perfect until now. Problem occures when aspect ratio changes. By default I use 1280x768 but my phone has 1280x720. Because of that bottom and top edges of the screen are cut off because of the way how FillViewport works. Because of that part of my map is cut off.
I tried to modify maximums and minimums, calculate differences in ratio and adding them to calculations, changing camera size, different viewports and some other stuff but without success.
Can you guys help?
Thanks
I tried solution of noone and Tenfour04 from comments above. Both are not perfect but I am satisified enough i guess:
noone:
camera.position.x = MathUtils.clamp(camera.position.x, screenWidth/2 + leftGutter, UnitConverter.toBox2dUnits(mapSize.x) - screenWidth/2 + rightGutter);
camera.position.y = MathUtils.clamp(camera.position.y, screenHeight/2 + bottomGutter, UnitConverter.toBox2dUnits(mapSize.y) - screenHeight/2 - topGutter);
It worked however only for small spectrum of resolutions. For strange resolutions where aspect ratio is much different than default one I've seen white stripes after border. It means that whole border was printer and some part of the world outside of border. I don't know why
Tenfour04:
I changed viewport to ExtendViewport. Nothing is cut off but in different aspect ratios I also can see world outside of borders.
Solution for both is to clear screen with same color as the border is and background of level separatly which gave satisfying effect in both cases.
It stil has some limitations. As border is part of the world (tiled blocks) it's ok when it has same color. In case border has different colors, rendering one color outside of borders won't be a solution.
Thanks noone and Tenfour04 and I am still opened for suggestions:)
Here are some screenshots:
https://www.dropbox.com/sh/00h947wkzo73zxa/AAADHehAF4WI8aJ8bu4YzB9Va?dl=0
Why don't you use FitViewport instead of FullViewport? That way it won't cut off your screen, right?
It is a little bit late, but I have a solution for you without compromises!
Here width and height are world size in pixels. I use this code with FillViewport and everything works excellent!
float playerX = player.getBody().getPosition().x*PPM;
float playerY = player.getBody().getPosition().y*PPM;
float visibleW = viewport.getWorldWidth()/2 + (float)viewport.getScreenX()/(float)viewport.getScreenWidth()*viewport.getWorldWidth();//half of world visible
float visibleH = viewport.getWorldHeight()/2 + (float)viewport.getScreenY()/(float)viewport.getScreenHeight()*viewport.getWorldHeight();
float cameraPosx=0;
float cameraPosy=0;
if(playerX<visibleW){
cameraPosx = visibleW;
}
else if(playerX>width-visibleW){
cameraPosx = width-visibleW;
}
else{
cameraPosx = playerX;
}
if(playerY<visibleH){
cameraPosy = visibleH;
}
else if(playerY>height-visibleH){
cameraPosy = height-visibleH;
}
else{
cameraPosy = playerY;
}
camera.position.set(cameraPosx,cameraPosy,0);
camera.update();

how to make objects appear from one side when I rotate them in iOS ? (code + gif ) inside

how to make objects appear from (one side only), when I rotate them in iOS ?
What I want to happen, (as you can see i can add another face to my UITableview cell)
What is happening, i can't even add another face since the previous one is showing up again
The Code I'm using
func animate()
{
var id = CATransform3DIdentity
id.m34 = -1.0 / 1000
var transformAnim = CAKeyframeAnimation(keyPath:"transform")
transformAnim.values = [
NSValue(CATransform3D: CATransform3DRotate(id, 0 * CGFloat(-M_PI_2), 0, 1.0, 0)),
NSValue(CATransform3D: CATransform3DRotate(id, 1 * CGFloat(-M_PI_2), 0, 1.0, 0)),
NSValue(CATransform3D: CATransform3DRotate(id, 0 * CGFloat(-M_PI_2), 0, 1.0, 0))
]
transformAnim.keyTimes = [0, 0.5, 1.0]
transformAnim.duration = 0.7
self.imageViewLogo.layoutIfNeeded()
self.imageViewLogo.layer.addAnimation(transformAnim, forKey: "transform")
}
If you know a feature called [force 2 sided] in 3ds max for example, I want it turned of here, but it seems that iOS has no feature like this.
This is an advanced question, I wish an expert answers me.
Thanks.
EDIT
if you are still not sure what I'm asking, I mean this :
how to make an object to show only from one side when i rotate it ?
That is a standard flip transition. Take a look at the UIView method +transitionFromView:toView:duration:options:completion:, specifically the UIViewAnimationOptionTransitionFlipFromLeft and UIViewAnimationOptionTransitionFlipFromRight settings.
There is also a view controller transition if you want to do a flip transition to a different view controller.
If you want to build this animation yourself it's much more work.
What you have to do is create 2 separate animations, one for the front face and one for the back face:
First, you animate the front face rotating to 90 degrees, at which point it disappears because you are viewing it edge-on. At that point you add your back half view/layer, but facing the other way. Then in the second animation you rotate the new view 90 degrees, which leaves it flat and face-up. It's possible to get a seamless animation that gives you exactly the effect you want, but it's difficult, fussy code to write.
the solution was a simple statement that I never heard of before
imageViewLogo.layer.doubleSided = false
from apple's website :-
A Boolean indicating whether the layer displays its content when
facing away from the viewer. Animatable.

How to zoom a pdf to the mouse position in javafx 2

I have to zoom a pdf-file thats inside of a ScrollPane.
The ScrollPane itself is inside of a StackPane.
In the beginning I scale my pdf to fit the width of my ScrollPane. As a result of that the pdf-height doesn't fit the ScrollPanes height.
I already managed to zoom, by changing my scaleFactor when using the mousewheel. Unfortunately I can't zoom into a specific point.
I guess I have to change the ScrollPanes values depending on the mouse coordinates, but I just can't find the correct calculation. Can somebody please help me?
For example I tried
scrollPane.setVvalue(e.getY() / scrollPane.getHeight())
With this line of code my view just jumps up or down, depending on whether I click on the upper bound or the lower bound of my viewport.
I also understand that it has to behave like that, but I can't figure it out what has to be added/changed.
I use Jpedal to display my pdf
Hope you understand what I am looking for.
Tell me if you need more information.
Edit:
Here is a snipped of how I managed to drag.
eventRegion.addEventFilter(MouseEvent.MOUSE_PRESSED, e -> {
dragStartX = e.getX();
dragStartY = e.getY();
});
eventRegion.addEventFilter(MouseEvent.MOUSE_DRAGGED, e -> {
double deltaX = dragStartX - e.getX();
double deltaY = dragStartY - e.getY();
scrollPane.setHvalue(Math.min(scrollPane.getHvalue() + deltaX / scrollPane.getWidth(), scrollPane.getHmax()));
scrollPane.setVvalue(Math.min(scrollPane.getVvalue() + deltaY / scrollPane.getHeight(), scrollPane.getVmax()));
e.consume();
});
I think zooming to the mouse position could be done in a similar way, by just setting the Hvalue and Vvalue.
Any ideas how I can calculate these values?
This example has JavaFX 8 code for a zoomable, pannable ScrollPane with zoom to mouse pointer, reset zoom and fit to width of a rectangle which can really be any Node. Be sure to check out the answer to the question to get fitWidth() to work correctly. I am using this solution for an ImageView now, and it is slick.
just for all related questions about "zooming where the mouse is".
I had the same problem and I came up with the following code snippet.
public void setZoom(final double x, final double y, final double factor) {
// save the point before scaling
final Point2D sceneToLocalPointBefore = this.sceneToLocal(x, y);
// do scale
this.setScaleX(factor);
this.setScaleY(factor);
// save the point after scaling
final Point2D sceneToLocalPointAfter = this.sceneToLocal(x, y);
// calculate the difference of before and after the scale
final Point2D diffMousePoint = sceneToLocalPointBefore.subtract(sceneToLocalPointAfter);
// translate the pane in order to point where the mouse is
this.setTranslateX(this.getTranslateX() - diffMousePoint.getX() * this.getScaleX());
this.setTranslateY(this.getTranslateY() - diffMousePoint.getY() * this.getScaleY());
}
The basic idea is to move the underlying Pane to that point where it was before scaling. Important is the fact, that we calculate the mouse position to the local coordinate system of the Pane. After scale we do this just another time and calculate the difference. Once we know the difference we are able to move back the Pane. I think this solution is very easy and straightforward.
My setup in JavaFX is following: I have a javafx.scene.layout.BorderPane as root for my javafx.scene.Scene. In the center I put a Pane. This will be the Pane where I act on (i.e. put other Nodes in..zoom, move..etc.) If anyone is interested in how I actually did it, just mail me.
Good programming!

physicsBody rotation limitation

I've got the following node set as follow.
box.physicsBody.allowsRotation = YES;
No mater what force applies to this box, I want it to never fall down or rotate more than a certain angle, just like a tree or a spring that might bend all the way down but has a tendency to go back to it's initial angle or position.
Is there a any trick or method to that?
I was thinking maybe joining an invisible un-rotatable physics body under the box and use a joint spring method for that which I have no Idea how that works!
Or, maybe there be a trick to play with the pivot. Any idea?
In the update: method you will have to continuously check the desired node's properties. In your case it is going to be the zRotation property of your node.
Add this code in your update: method:
if(yourNode.zRotation > 0.5)
yourNode.zRotation = 0.5;
if(yourNode.zRotation < -0.5)
yourNode.zRotation = -0.5;
Change the 0.5 value to your desired value or replace it with a static const float.

How to correctly paint a huge image

I'm fairly new to wxWidgets so please bear with me. Let's say I have a 10Kx10K image and my wxScrolledWindow has a size of 640x480. I load the whole image into a wxBitmap which I use in my paint function.
Now in my OnPaint function I just say
wxPaintDC dc(this);
dc.DrawBitmap(_Bitmap, 0, 0 );
This somewhat works for the first few paints but soon the Window content is out order and artifacts appear. This happens very fast when I move a scroll bar back and forth very quickly.
I use the latest wxWidgets on a Windows 7 machine.
So, how can I improve my painting code?
Many thanks,
Christian
Using a 10000x10000 wxBitmap is a bad idea on its own, it may simply fail to be created on an older system (that's 400MiB of video RAM!). Drawing it entirely is sheer madness.
I don't know where does your data come from but in a typical case of e.g. a map to be shown on screen, you should break it into tiles, convert the tiles that are currently visible on screen to wxBitmap (or several of them) and draw only those.
Then you may optimize your drawing by using double buffering (which is relatively useless under Windows 7 that double buffers everything on its own) and otherwise, but you should be using a reasonably-sized backing store bitmap.
This sounds like something that might be helped by using double buffering.
The first thing to start trying is to replace wxPaintDC with wxBufferedPaintDC
For more suggestions, here is a wiki article on the subject: http://wiki.wxwidgets.org/Flicker-Free_Drawing
As Ravenspoint kindly pointed out, there is an article on wxWidgets' wiki. So according to that article two things need to happen. First override the EVT_ERASE_BACKGROUND with an empty function.
void Canvas::EraseBackground( wxEraseEvent& WXUNUSED(event))
{
}
And second to implement a basic double buffering scheme. Here is how I did it.
void Canvas::OnPaint(wxPaintEvent& WXUNUSED(event))
{
int x, y;
GetViewStart(&x, &y);
wxRect Client_Area = GetClientRect();
int width = Client_Area.width;
int height = Client_Area.height;
wxBitmap Current = _Bitmap.GetSubBitmap(wxRect( x * 10, y * 10, width, height ));
wxPaintDC dc(this);
dc.DrawBitmap(Current, 0, 0, false );
}
My scroll rate for both x and y is set to 10. That's why I multiply the view start coordinates.
Any more insight is very welcome.
Thanks,
Christian