I'm having issues getting images to show on the tab bar.
I have a project in MonoTouch that uses a UITabBarController as the host of the app. For each tab item I have a UINavigationController.
In ViewDidLoad of my UITabBarController class:
ViewControllers = new UIViewControllers[]
{
myNavController1,
myNavController2,
myNavController3
};
ViewControllers[0].TabBarItem =
new UITabBarItem (UITabBarSystemItem.Search, 1);
ViewControllers[1].TabBarItem =
new UITabBarItem ("Foo", UIImage.FromFile ("Resources/foo.png"), 2);
ViewControllers[2].TabBarItem =
new UITabBarItem ("Foo", UIImage.FromFile ("Resources/foo.png"), 3);
The first tab bar item works fine, it says Search and you see the system image for search. However, the other two only show the title and not the image. What do I need to do to get the image to correctly load?
Thanks.
Seems I found the answer surprisingly fast after posting this... >_<
I was loading the image from the Resources folder originally, this seems to be the issue. Having created a new folder called Images I then added a PNG file to this folder and tried loading the UIImage image from there, everything works.
The build action is still "BundleResource" and it does not copy to the output dir (exactly the same property settings as the image in Resources folder).
So simply moving the image to a new folder and calling:
ViewControllers[1].TabBarItem =
new UITabBarItem ("Foo", UIImage.FromFile ("Images/foo.png"), 2);
Hope this helps someone, though most likely you'll just figure it out yourself haha
I had the same problem.
Images must be monochrome and you should have three versions in different sizes.
30x30 = image.png 60x60 = image#2x.png 90x90 = image#3x.png
Related
I'm currently working with JavaFX' Text and TextFlow layout, and I need to figure out how to center the Text node inside a TextFlow.
As you see in the picture below, I've added some ImageView's, to simulate emoticons which I want to add.
The problem is, that they are aligned differently. While the emoticons are centered, the text stays at the bottom.
The green border line represents the TextFlow's border, the blue border line the Text's one.
I've already tried out to set the Text's textOrigin property to CENTER, but it doesn't change anything in my case. Setting textAlignment to CENTER won't work either.
Here's my code excerpt:
public CChatMessage(String senderName, String messageText)
{
this.sender = new Label(senderName);
this.sender.setTextAlignment(TextAlignment.CENTER);
this.sender.setFont(Font.font("Verdana", FontWeight.EXTRA_BOLD, 14));
this.message = new Text(messageText);
this.message.setTextAlignment(TextAlignment.CENTER);
this.message.setTextOrigin(VPos.CENTER);
this.setEffect(new DropShadow());
this.setAlignment(Pos.CENTER);
this.setPadding(new Insets(0, 10, 10, 10));
TextFlow messagePane = new TextFlow();
messagePane.setStyle("-fx-border-color: green");
messagePane.setTextAlignment(TextAlignment.CENTER);
Image smileyImage = new Image("/resources/smiley.png");
messagePane.getChildren().addAll(this.message, new ImageView(smileyImage), new ImageView(smileyImage), new ImageView(smileyImage),
new ImageView(smileyImage), new ImageView(smileyImage), new ImageView(smileyImage));
if(!senderName.equals(""))
{
CChatMessage.setMargin(messagePane, new Insets(10, 0, 0, 0));
this.message.setFont(Font.font("Calibri", FontWeight.SEMI_BOLD, 18));
this.getChildren().addAll(this.sender, messagePane);
}
else
{
this.setPadding(new Insets(5, 5, 5, 5));
message.setFont(Font.font("Verdana", FontWeight.EXTRA_BOLD, 11));
this.getChildren().add(messagePane);
}
}
Edit: I think this is the answer you're looking for: https://bugs.openjdk.java.net/browse/JDK-8098128
Edit 2:
It appears the solution I've given below has a problem. The words in the Text node don't stay within the HBox. So far, I haven't figured out how to fix that. But it does stay inside when the Text nodes are inside a TextFlow container.
A solution to the problem has been given there. I don't fully understand it but I hope you do.
I'll just leave my original answer since it contains the way I'm dealing with the issue.
This solution might work. After failing to center the Text node like that, I've come to this workaround: Rather than using the TextFlow, I've used an HBox. It gets the job done for me. The behaviour is similar enough and I'm able to align the Text nodes whichever way I want.
But a word of caution, I'm just a newbie. So there may be issues that would pop up if you used this method. I don't know about the properties of TextFlow and HBox enough to confidently answer. But I just thought I'd tell you my solution since that's what I'm using for my project now. (Edit: As you can read above at Edit 2, I ran into one problem. There might be more.) :)
Happy coding.
I have been playing with custom filters in Fabric JS. But I just don't know how to undo anything done. Seems the pixels get overwritten by the process, which is fine, but how do I go back to the orginal? The code project starter is here:
https://github.com/pixolith/fabricjs-async-web-worker-filters
So, in the custom filter, the results are placed into the canvas as follows:
imageDataArray.forEach( function( data ) {
cacheCtx.putImageData( data.data, 0, data.blocks );
} );
That shows the processed image in the render. But I don't understand how to "get back" the original. I have tried this before the processing:
var obj = canvas.getActiveObject();
var originalSource = obj._originalElement.currentSrc; // restore the original since filters trash the canvas
obj.filters[index] = filter;
obj.applyFilters(canvas.renderAll.bind(canvas));
But it does not "get it back". I really don't wish to reload the image each time as they can be large at times. Any help appreciated.
As you noted obj._originalElement is the ORIGINAL element of the image you first loaded. No reason to reload it at all, you have it there. Ready to be smashed on canvas.
So just do obj.element = obj._originalElement and you are back to original after a canvas.renderAll();
I generate pdf file from a HTML-page via jspdf plugin addHTML.
It works but the rendered text / font is really blurry, the original HTML page is not. Rendered images are fine, only text is the problem (see attached images).
original_image: http://111900.test-my-website.de/stackoverflow/orig.jpg
blurry_image: http://111900.test-my-website.de/stackoverflow/blurry.jpg
I read all google results the last three days - maybe I am the only person in the world I have exact this problem?!?! :/
I added the following scripts in my code:
spdf.js
jspdf.plugin.from_html.js
jspdf.plugin.split_text_to_size.js
jspdf.plugin.standard_fonts_metrics.js
pdf generation code:
pdf.addHTML(document.getElementById("container"),10,15,function() {
var string = pdf.save(filename);
});
Is there a quality option in jspdf I missed?
How can I render the font?
Thanks for reply,
Thomas
I found that when creating a PDF and the text was blurred when using addHtml this was because of the width of the web page. Try using it with the browser not maximised as a test.
My solution was to add some styles to adjust the width before calling addHTML with a width parameter that matches the styles I added. I then remove the additional styles in the function that runs after addHTML.
I had the same problem and I resolved it.
Actually, the main issue here is to specify the 'dpi' to avoid having a blurred image. In addition to that, try to avoid any 'smoothening' features beacuse it may make it worse. I have taken a look around the API and other discussion about it and I came back with the following solution:
1- update your version of html2canvas : many blurring issues have been fixed after the 1.0.0-alpha release.
2- use the following properties :
const context = canvas.getContext('2d');
context.scale(2, 2);
context['dpi'] = 144;
context['imageSmoothingEnabled'] = false;
context['mozImageSmoothingEnabled'] = false;
context['oImageSmoothingEnabled'] = false;
context['webkitImageSmoothingEnabled'] = false;
context['msImageSmoothingEnabled'] = false;
I've managed to make a WritableImage using
WritableImage snapshot = obj.getScene().snapshot(null);
Now I would like to output this screenshot on a pdf file. I've already managed to output text to a pdf using Apache pdfbox library using the following code:
PDDocument doc = null;
PDPage page = null;
try{
doc = new PDDocument();
page = new PDPage();
doc.addPage(page);
PDFont font = PDType1Font.HELVETICA_BOLD;
PDPageContentStream content = new PDPageContentStream(doc, page);
content.beginText();
content.setFont( font, 12 );
content.moveTextPositionByAmount( 100, 700 );
content.drawString("Hello World");
content.endText();
content.close();
doc.save("PDFWithText.pdf");
doc.close();
} catch (Exception e){
System.out.println(e);
}
How can I do this when using WritableImage rather that using basic String texts?
Also, how can I take a screenshot of certain nodes within a scene?
Thanks
Taking a screenshot of a scene
You already have working code for this in your question.
WritableImage snapshot = stage.getScene().snapshot(null);
Taking a screenshot of a . . . portion of a scene in JavaFx 2.2
Taking a snapshot of Node is similar to taking snapshot of a Scene, you just use the snapshot methods on the Node rather than the scene. First place your Node in a Scene, and then snapshot the Node.
WritableImage snapshot = node.snapshot(null, null);
The first parameter which may be passed to the node.snapshot call is some configuration for SnapshotParameters (which you probably don't need, but you can investigate them to see if they are required or useful for your case).
Now I would like to output this screenshot on a pdf file. How can I do this when using WritableImage rather that using basic String texts?
I have not used the pdfbox toolkit you reference in your question. Likely the toolkit works with awt based images rather than JavaFX images, so you will need to convert your JavaFX snapshot image to an awt buffered image using SwingFXUtils.fromFXImage.
To actually get the awt encoded image into a pdf file, consult the documentation for your pdfbox toolkit. Kasas's answer to Add BufferedImage to PDFBox document would seem to provide a code snippet for this operation. Looks like the relevant code (and I haven't tried this) is:
PDPageContentStream content = new PDPageContentStream(doc, page);
PDXObjectImage ximage = new PDJpeg(doc, bufferedImage);
content.drawImage(ximage, x, y);
In an iOS app, I need to provide image filters based on their size (width/height), think of something similar to "Large, Medium, Small" in Google images search. Opening each image and reading its dimensions when creating the list would be very performance intensive. Is there a way to get this info without opening the image itself?
Damien DeVille answered the question below, based on his suggestion, I am now using the following code:
NSURL *imageURL = [NSURL fileURLWithPath:imagePath];
if (imageURL == nil)
return;
CGImageSourceRef imageSourceRef = CGImageSourceCreateWithURL((CFURLRef)imageURL, NULL);
if(imageSourceRef == NULL)
return;
CFDictionaryRef props = CGImageSourceCopyPropertiesAtIndex(imageSourceRef, 0, NULL);
CFRelease(imageSourceRef);
NSLog(#"%#", (NSDictionary *)props);
CFRelease(props);
You can use ImageIO to achieve that.
If you have your image URL (or from a file path create a URL with +fileURLWithPath on NSURL) you can then create an image source with CGImageSourceCreateWithURL (you will have to bridge cast the URL to CFURLRef).
Once you have the image source, you can get a CFDictionaryRef of properties of the image (that you can again bridge cast to NSDictionary) by calling CGImageSourceCopyPropertiesAtIndex. What you get is a dictionary with plenty of properties about the image including the pixelHeight and pixelWidth.
You can pass 0 as the index. The index is because some images might have various embedded images (such as a thumbnail, or multiple frame like in a gif).
Note that by using an image source, the full image won't have to be loaded into memory but you will still be able to access its properties.
Make you you import and add the framework to your project.
Just one addition:
if you want to use web-url like http://www.example.com/image.jpg you should use then
[NSURL URLWithString:imagePath] instead [NSURL fileURLWithPath:imagePath].