High resolution image with Mapnik - scale

I use Mapnik 2.2.0 to render a map from my Java library using the Mapnik JNI. This is working fine with no issues. I am now trying to make the map available in high resolution.
I changed the image size in my code from 256x256 to 512x512. This caused Mapnik to change the effective zoom level, because the scale has changed. For example, when rendering 15/5000/10000, I see a 512x512 image with my zoom 16 styling.
What I want to have is an image of the same coordinates as my original 256x256 image, with the same styling, only 512x512.
I found a possible parameter that could be related:
<Parameter name="scale">2</Parameter>
where 2 should be the factor I need. However it did not have any effect on the rendered image, so I may be looking the wrong direction.

Turns out that the Mapnik JNI renderAgg signature that I was using:
renderAgg(MapDefinition map, Image image)
sets the scale factor to 1.0. When I changed to this signature:
renderAgg(MapDefinition map, Image image, double scaleFactor, int offsetX, int offsetY)
The scale factor took effect

Related

QPainter drawImage becomes very pixelated

I use QPainter and the function drawImage to draw an airplane on a map. The image and redrawn each time the position of the airplane changes. The problem is, after some time, the image becomes extremely pixelated. I have tried to use a high quality .svg and that did not help either.
Below is my code. Can somebody spot where the error is or what has caused the image to be so pixelated?
// Load .svg image
airplane->load("AirplaneTopDown.svg");
// Downsize image
airplaneSmall = airplane->scaled(120, 120,Qt::KeepAspectRatio);
// Rotate image by trans
airplaneSmall = airplaneSmall.transformed(trans);
// Draw image and center at a certain screen position
painter.drawImage(airplaneX-airplaneSmall.width()/2,airplaneY-airplaneSmall.height()/2,airplaneSmall);
Below are the images of the drawn airplanes. One taken as screenshot at the beginning of the program runtime another one taken after a couple of minutes.
Airplane
Airplane-pixelated
One of your problems is that you first rescale the image and then rotate it.
The rotation needs to interpolate new pixels from the old ones. The higher the resolution of the input, the better the quality of the interpolation. The quality of your SVG is completely lost after the rescale operation.
The second problem you are facing is that you use the "fast" (default) transformation method. This method does not antialias. So instead of interpolating from several input pixels, it will only take one best fit. Calling transformed() with the second argument Qt::SmoothTransformation and scaled() with the sceond argument Qt::SmoothTransformation |Qt::KeepAspectRatio` will greatly improve your results.
However it is also slower, as is performing the rotation on the image in its original, higher resolution.
The arguably best solution to your problem is to take on a different approach. Instead of loading the SVG into a QImage, which is a raster-based image, you should work with the vector graphics. So the SVG is rendered in the right orientation and scale in the first place. A good starting point is the SVG Viewer Example: http://doc.qt.io/qt-5/qtsvg-svgviewer-example.html

Qt - drawing image on image using another image as a mask

Here's the issue at hand. I need to be able to pick a background (an image showing an object, let's say, a starship model). I want to be able to apply various previously prepared textures to various areas on it, as some kind of a "colour your own object" app, but without the need to prepare dozens of individual segments.
Ok, so this is one, newbie way to do it. We have those images:
Two kind of different versions, an original photo and a quickly Photoshopped one. Let's say we only want the Borg-ish green deflector and warp nacelle from the second picture, without the odd pink hull. You have to have a mask, basicly an image of an equal resolution (or at least the same aspect ratio, which you can reliably scale to image's resolution), with the area filled with color (or whatever else), and transparent area everywhere else. As the mask, I've used a few strokes of brush on an empty layer, set to overlay mode, and then saved as PNG, with transparency. And this is how the code went:
First, import images.
QPixmap background("orig.png"); //import base image
//import alt version/texture/whatever you want, anything will work with a good mask
QPixmap element("alt.png");
QPixmap mask("deflector.png"); //mask. Just nacelles and deflector.
Then, isolate the area that interests us from alt version
QPainter painter(&element);
painter.setCompositionMode(QPainter::CompositionMode_DestinationIn);
painter.drawPixmap(0, 0, mask.width(), mask.height(), mask);
And finally draw it onto the target object.
QPainter inter(&background);
inter.drawPixmap(0, 0, element);
ui->label->setPixmap(background);
The result:
This method respects any and all transparency you could've done in Photoshop or another image editing software.
Simple, but an effective solution, for when your app has to work with graphics prepared by someone else, elsewhere.

SCNNode material scale

I have an SCNNode that has its geometry populated from a collada file (.dae) and displays correctly on screen. I can apply materials to the geometry easily enough, however I'd like to change the scale of the material.
I currently populate it with
nodeArray[0].geometry?.firstMaterial!.diffuse.contents="wood.png"
but the scale of the material is too small. While I can edit the png in GIMP or something similar and import it as wood2.png is there any way I can set the material scale programatically?
what do you mean by "too small" ?
Geometries are made of different sources such as the vertices' positions, but also their texture coordinates. These texture coordinates (they belong in [0,1]x[0,1]) are specified per vertex and indicate where to look in the texture.
In your 3D modeler please check that your texture coordinates match what you want (i.e. they cover the whole image i.e. they go from 0 to 1 in very direction), and make sure that your image has no extra transparent margin or other wasted space.
You can have a look at SCNMaterialProperty's contentsTransform property. But please check your model and texture before using it.
You need to open your UV snapshot in an image editing software like Photoshop, scale the wood texture in Photoshop over your UV's, then resave your PNG/JPG, move PNG/JPG back to Xcode

how to draw filled polygon in Google Maps SDK for iOS

I would like draw a filled polygon on iPhone with Google map (Version 1.1.1, the last one).
Anyone knows how to do like that on ios :
(My code on Android)
mMap.addPolygon(new PolygonOptions()
.addAll(latLngList)
.fillColor(Color.BLUE)
.strokeColor(Color.RED)
.strokeWidth(3));
Regards,
PS : If you have many solutions, keep in mind that I have many Polygon to draw.
The SDK currently doesn't support filled polygons, however there is a feature request to add them here:
https://code.google.com/p/gmaps-api-issues/issues/detail?id=5070
In the meantime, one option could be to draw your polygons into an image, and then add them as a ground overlay. This would be very limiting, but might work as a temporary workaround.
Another option is to add another view over the top of the map view and draw the polygons into it, and then update them whenever the map view moves. It isn't possible to perfectly synchronize another view with the map view, so your polygons will lag behind a bit as you pan/zoom around, but this might also be okay for you as a temporary workaround.
UPDATE
These are just some random ideas to try for the ground overlay approach, I'm not sure if they would work, but they might get you started:
I would suggest converting the lat/lon corners of the rectangle into MKMapPoint (using MKMapPointForCoordinate). These are equivalent to Google's coordinate system at zoom level 20.
You can then use the aspect ratio of the width/height of the rectangle in MKMapPoint coordinates to determine the aspect ratio of your ground overlay UIImage. Once you have the aspect ratio, you'll just need to experiment with actual sizes (ie guess a width, calculate the height from the aspect ratio) to find one which looks okay. The bigger it is, the finer the detail of your rectangle will be, but the more memory it will use, and probably the slower the performance will be. Also you might hit a hard limit at some size - I'm guessing the UIImage gets converted by the Google Maps SDK into a texture, and textures have a max size of 2048x2048 on iPhone 3GS+.
Then, use something similar to How to setRegion with google maps sdk for iOS? to calculate a zoom level and centre lat/lon. Instead of the map view width/height you would use your UIImage width/height, and you'd use the bounds of your rectangle instead of the bounds of the desired view. You also wouldn't need to calculate the scale from both the width and height (as the scale should be the same) - so just use one of them. Instead of creating a camera with the zoom level and centre lat/lon, set them on the GMSGroundOverlayOptions. Also set the ground overlay's anchor to the centre of the image (ie 0.5, 0.5).
The above describes how to add one GroundOverlay per rectangle. If you have lots of overlapping or nearby rectangles you could probably combine them into a single UIImage, but that would be a bit more complicated.

How to anti-alias an image in Flex?

I have a Flex component with a background image. The image is sharp in the beginning, but is jagged whenever I scale the component using scaleX and scaleY. How would I make the image anti-alias so that, it it's scaled to 0.75, the lines are smooth, not jaggedy?
Here is the image
Here is the scaled version
And the unscaled (good) one
If you load the image with an Image component, you can cast the content property of the component to a Bitmap and then set smoothing to true. Unfortunately, the image component doesn't provide this functionality out of the box. However, it's rather easy to hack in.
Here is a tutorial to show you how to create such a component:
http://www.adobe.com/cfusion/communityengine/index.cfm?event=showdetails&productId=2&postId=4001
However, if this is set using the backgroundImage style of a component, you just might be out of luck unless you override updateDisplayList and perform the drawing of the bitmap yourself by using Graphics.beginBitmapFill (which does provide smoothing support).
Why smoothing of images doesn't have better support (such as different interpolation methods) in Flex (and subsequently, Flash) boggles my mind. At least pixel bender filters will help a bit by letting us implement such filters ourselves.
If the dimensions of your Bitmap are both either n^2 or n^8, then the Flash player will automatically use a technique called mip-mapping that will dramatically improve the look (and performance) of scaled bitmap images.

Resources