I have just coded a simple example of using a scrolling pane in JavaFX. Just one ScrollPane placed in the Scene, and the ScrollPane holds a Label component with a large text. Using gradle I have uploaded the app on a Nexus 4 android device. As you can see from the video I have uploaded, the scrolling is way too slow. I am sure others have experienced this. Any suggestion of how this can be changed to the native speed scroll is really much appreciated.
Source code of the app can be downloaded from here.
AndroidFX.java
public class AndroidFX extends Application{
public static void main(String[] args) {
launch(args);
}
#Override
public void start(Stage primaryStage) throws Exception {
Parent mySearchListFXML = getFXMLPane("/fxml/ScrollPaneWithLabel.fxml");
primaryStage.setScene(new Scene(mySearchListFXML));
primaryStage.setWidth(Screen.getPrimary().getVisualBounds().getWidth()); primaryStage.setHeight(Screen.getPrimary().getVisualBounds().getHeight());
primaryStage.show();
}
public static Parent getFXMLPane(String url) throws IOException {
URL location = AndroidFX.class.getResource(url);
FXMLLoader fxmlLoader = new FXMLLoader();
fxmlLoader.setLocation(location);
Parent pane = fxmlLoader.load();
return pane;
}
}
ScrollPaneWithLabel.fxml
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import java.lang.*?>
<?import javafx.scene.layout.*?>
<ScrollPane fx:id="scrollPane" fitToWidth="true" hbarPolicy="NEVER" pannable="true" style="-fx-background: white;" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">
<content>
<Label text="<VERY LARGE TEXT HERE>" wrapText="true" />
</content>
</ScrollPane>
Faced similar issues. The problem is worse on hidpi devices, disabling the hipdpi setting in the properties file helps but you will have to do any scaling your self for hidpi screens.
Another thing that might help is caching the fonts. I believe the end result of a javafx ported application is more like a big image with hot spots. Scrolling I think is just telling the application to redraw the whole image every time. Just a theory really. Caching does help but can make your text look kinda fuzzy. Although I had some success in scaling the font large, setting the cache to true and then scale down, normally x2 and .5 gives pretty good results. Using em for the fonts helps the fuzzy text too.
If you need to show a huge amount of text and it must be scrolled, you will probably get much better results displaying it through a webview. I haven't ever really used it to be honest, but I would imagine that it is replaced when ported with the native browser window so performance should be pretty good I think. I guess it is possible they wrote a html renderer in javafx and then you would run into the same pitfalls.
http://www.gluonhq.com is offering something called the charm, down, and connect package that is supposed to mimic native apps. It sounds promising and I am currently trying to get more info to see if they have solutions to these types of issues. I will add to the post if I receive any more info about charm.
Related
Perhaps a typical and well-trodden question on first glance. But all other answers I've looked at (there are many) have consistently suggested (almost always) changing the user-agent of a WebView to a desktop string. Consistently, people have responded that this does not work for them. Myself included.
As a web design novice, from what digging I have done it seems that at some point in the last few years "responsive design" became the recommended and most widely used web design implementation philosophy of choice to determine how to deliver/display a site.
Which is why I believe changing a user-agent of a WebView is having no effect, as the site seems to be determining how to deliver content based on the meta tag "viewport", for example:
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
Has anyone else overcome this yet? Would my (layman) analysis of the issue be correct?
As far as my understanding, i think this seems like the below situation
Please look into this answer Showing the desktop version of a fully responsive website on tablets
So I think I may have found a solution, in part due to #hussnain-muavia answer, though there was slightly more I had to expand which I thought would warrant its own response.
WebView Settings
The WebView will need to be able to execute JavaScript:
WebSettings settings = _webView.getSettings();
settings.setJavaScriptEnabled(true);
In order for the site to be completely zoomed-out (i.e. displaying the full site and without scrollbars) additional settings will have to be applied to the WebView:
settings.setUseWideViewPort(true);
settings.setInitialScale(1);
settings.setLoadWithOverviewMode(true);
Achieving a Desktop Layout
Ultimately the thing that will result in a desktop view is the following JavaScript:
function desktopMode() {
var viewPort = document.getElementsByName("viewport");
if (viewPort != null) {
viewPort = viewPort[0];
}
else if ((viewPort = document.getElementById("viewport")) == null) {
return;
}
viewPort.setAttribute("content", "width=" + (screen.width + 1) + "; initial-scale=0.5");
}
As I mention in my question, I am a web design novice. Though one thing I notice is inconsistency (sorry web devs?) so I've intentionally built in a check by name and ID. We should expect only one tag, hence why name assumes the zeroth element.
Further to this solution I found I was getting a desktop layout but not quite the complete thing. So I modified the calculation thusly:
getViewport.setAttribute("content", "width=" + (screen.width * 4) + "; initial-scale=0.5");
I don't like it. But it works. My suspicion is there probably is some better calculation or constant for this.
It's probably worth mentioning, it's still worthwhile changing the user-agent string, in case the site does not use a responsive design. But this is an unrelated topic.
A major drawback of this solution is that it will result in some hideous UI, where the user can see the site being resized. As I put the JS in onPageStarted, but of course the functionality gets overridden. So I put it after the super onPageStarted call or in onPageFinished and this results in the same result of the user seeing the resize happening. Any ideas out there?
thanks for checking my question out!
I'm currently working on a project using Qt C++, which is designed to be multi-platform. I'm a bit of a newcoming to it, so I've been asked to set up the ability to take screenshots from within the menu structure, and I'm having issues with the Android version of the companion app.
As a quick overview, it's a bit of software that send the content of a host PC's screen to our app, and I've been able to take screenshots on the Windows version just fine, using QScreen and QPixmap, like so:
overlaywindow.cpp
{
QPixmap screenSnapData = screenGrab->currentBackground();
}
screenGrabber.cpp
{
QScreen *screen = QGuiApplication::primaryScreen();
return screen->grabWindow( QApplication::desktop()->winId() );
}
Unfortunately, Android seems to reject QScreen, and with most suggestions from past Google searches suggesting the now-deprecated QPixmap::grab(), I've gotten a little stuck.
What luck I have had is within the code for the menu itself, and QWidget, but that isn't without issue, of course!
QFile doubleCheckFile("/storage/emulated/0/Pictures/Testing/checking.png");
doubleCheckFile.open(QIODevice::ReadWrite);
QPixmap checkingPixmap = QWidget::grab();
checkingPixmap.save(&doubleCheckFile);
doubleCheckFile.close();
This code does take a screenshot, but only of the button strip currently implemented, and not for the whole screen. I've also taken a 'screenshot' of just a white box with the screen's dimensions by using:
QDesktopWidget dw;
QWidget *screen=dw.screen();
QPixmap checkingPixmap = screen->grab();
Would anyone know of whether there was an alternative to using QScreen to take a screenshot in Android, or whether there's a specific way to get it working as compared to Windows? Or would QWidget be the right track? Any help's greatly appreciated!
as i can read in Qt doc : In your screenGrabber.cpp :
QScreen *screen = QGuiApplication::primaryScreen();
return screen->grabWindow( QApplication::desktop()->winId() );
replace with :
QScreen *screen = QGuiApplication::primaryScreen();
return screen->grabWindow( 0 ); // as 0 is the id of main screen
If you want to take a screenshot of your own widget, you can use the method QWidget::render (Qt Doc):
QPixmap pixmap(widget->size());
widget->render(&pixmap);
If you want to take a screenshot of another app/widget than your app, you should use the Android API...
I'm using Xamarin Forms to produce a TabbedPage consisting of more ContentPages. This is the part of code causing trouble:
public void launchMainDesign(object s, EventArgs e) {
MainPage = new TabbedPage {
Children = {
new ContentPage {
Title = "Login",
Content = pages.loginContent,
BackgroundImage = "bgmain.jpg"
},
new ContentPage {
Title = "Sign Up",
Content = pages.signUpContent,
BackgroundImage = "bgmain.jpg"
}
}
};
}
It seems absolutely fine. I have both the images in my Drawable directory, with the build action set to "AndroidResource".
Whenever the launchMainDesign() function is fired by pressing a button, the app crashes immediately, both in emulator and a build version of the app on a tablet. Unfortunately, I can't test on iOS and WP.
I even tried putting the whole inside part of the function in a try/catch block and print out the exception, but the app just crashes nevertheless.
I am desperately trying to solve this simple problem for about a week now. No one seems to be having exactly the same issue as me. Weirdest thing is, I have a different app where I use exactly the same method and it works just fine. Can the Android Theme be causing this (I'm using Holo, in the working app, there's no theme specified)? That seems to be the only difference.
I also don't think this is caused by RAM struggles, as the image is only about 700 kilobytes (1080x1920) - for this example, I've only used one image.
It could be a memory issue, because even do the size is not big depending on the device resolution it might be trying to scale the image to the device dimensions.
Try checking this README:
https://github.com/xamarin/customer-success/blob/master/samples/Xamarin.Forms/SliderView/README.md
Explains Xamarin.Forms Android Image Memory Management so could help you get around the issue you might be having.
I am experiencing a strange bug in PhoneGap on Android 4.4, for which I couldn't find any solution online. In my app, I am loading a lot of different images from a remote server, and as the user navigates back and forth, new images are loaded on each page (4 at a time, to be specific, through jQuery-generated html). After having navigated back and forth for a little while, some images will randomly not show up and instead show the typical "broken image" icon.
Now, here comes the strange part: I have been following the instructions at jQuery/JavaScript to replace broken images and done a few tests of my own. In conclusion, the naturalWidth and naturalHeight parameters report the right sizes of the images, and complete reports true for all images. Therefore, the solutions mentioned in the above SO thread don't work at all. Changing the image src doesn't help, either with or without a setTimeout (I tried adding the current timestamp as a parameter to the image path as well).
Did anyone else encounter this issue at all, or am I going crazy here? :)
EDIT: By the way, no error is ever reported. Therefore, no error handler is called when loading the image, making it useless to solve the problem with the already suggested methods (see the link above).
This is how i handle error images,
<img src="images/imageName.jpg" onError="onErrorFunc(this);" alt=" " />
function onErrorFunc(elem){
var imgUrl = "https://alternative-image";
elem.onerror = function (){
elem.src='images/noimage.jpg';
}
elem.src=imgUrl;
}
Hope it helps!
I'm porting a simple tetris-like XNA app to Android, using Mono For Android and MonoGame; I have followed the suggested steps in this link and so far, everything compiles well, and no relevant warnings fire up. However, upon loading the contents, a null parameter exception breaks the program at the point below in my program:
protected override void LoadContent() {
// ...
_font = Content.Load<Microsoft.Xna.Framework.Graphics.SpriteFont>("SpriteFont1");
// ...
}
The content root directory is set in the game constructor class:
public Game2 (){
Content.RootDirectory = "Content";
Content.RootDirectory = "Assets/Content"; // TEST.
//...}
And I have tried several combinations, all to no avail.
I have also tried setting the xnb files as Content as well as Android Assets in the Build Action property; having the linked, copied always, copied only if newer... etc.
Either way, my problem is that I don't really understand WHY and HOW should I do this. I'm rather new to the platform and to XNA as well, so this may very well be a newbie question, but the truth is after several hours banging my head and fists against the monitor/keyboard I feel stuck and need your help.
I have a library that supports variable-width fonts (generated by BMFont) on MonoGame. Unfortunately it is a renderer and so has other code around it. However, the basic idea is very simple. You can take a look at the loader here and the mesh builder (given a string) here. This builder supports fonts that spread characters across multiple pages, too.
Hope this helps!
MonoGame (2.5.1) throws NotImplementedException in ContentManager.Load for SpriteFont type. Have the same not resolved problem. I'm trying not to use DrawString.
For loading textures in Win32 application I use:
Content.RootDirectory = #"../../Content";
var sampleTexture = Content.Load<Texture2D>("Sample.png");
You even must not add it to solution.
For Andoind (MonoDroid) application you must add "Content" folder to your solution and set "Andtoid Asset" in "Sample.png" properties.
Content.RootDirectory = "Content";
var sampleTexture = Content.Load<Texture2D>("Sample.png");
See also:
http://monogame.codeplex.com/discussions/360468
http://monogame.codeplex.com/discussions/267900