What is the proper way to remove the grey background that covers the entire screen, the recompile button, and the default libGDX load and/or load splash in a HTML build of my game?
Note: This answer applies only to the gdx-setup tool as of late 2022. The gdx-liftoff tool is similar but has a slightly less boneheaded configuration out of the box. Additionally, I would like to get some of libGDX's HTML backend reworked one day, as there is no point in the padding and it's applied unevenly, plus less obvious things like the way it creates a table for layout.
Grey background
The background colour can be customised by changing background: #222222 in html/webapp/styles.css to some other colour. Or apply it directly to the body in index.html and delete styles.css (plus the link to it) as it doesn't contain anything important once the superdev button has been removed.
Grey border
The border around the game can be removed by editing HtmlLauncher like so:
#Override
public GwtApplicationConfiguration getConfig () {
GwtApplicationConfiguration config = new GwtApplicationConfiguration(true);
config.padHorizontal = 0;
config.padVertical = 0;
return config;
}
Separating GwtApplicationConfiguration into a config variable brings it in line with the other launchers (desktop, Android, iOS) and setting the padding to 0 is self-explanatory. While we're here, passing true into the app config's constructor tells it to render at native resolution on high-DPI/"retina" displays instead of upscaling.
Recompile button
Or the superdev button, as I call it. Just remove the <a class="superdev"... line from html/webapp/index.html. If you need access to it during development, it's recommended you add its link to your bookmark bar. Visibility of the bookmark bar can be toggled using Ctrl+Shift+B in Chrome and Firefox.
Load/splash screen
You're probably best referring to https://libgdx.com/wiki/html5-backend-and-gwt-specifics#changing-the-load-screen-progress-bar for this (which may not have existed when the question was asked). In short, getPreloaderCallback() and adjustMeterPanel() can be overridden in HtmlLauncher. I typically just overwrite logo.png after building instead of using the recommended method for changing the logo.
Other changes
Things you might want to change before a final release:
styles.css isn't very important beyond changing the background colour, as noted earlier.
In index.html, a comma should be added to between device-width and initial-scale for it to be valid HTML.
In index.html, applying align="center" to a div is deprecated behaviour. Probably best remove that alignment. If you need it, apply via CSS instead.
In index.html, handleMouseDown() and handleMouseUp() are completely pointless, as far as I can see. I don't use them for my own projects and have had no complaints.
html/build/dist/assets/assets.txt references some files that may not be necessary. The default font (arial or lsans, depending on libGDX version) is only needed if you use it and the vertex/fragment shaders are only needed if you do 3D stuff, I believe. Removing these can remove load times ever so slightly, especially on HTTP/1.1 connections. But I don't have an automated way to remove those lines (except on Linux - head -n -8).
Setting an asset filter as seen at https://libgdx.com/wiki/html5-backend-and-gwt-specifics#speeding-up-preload-process is an easy way to reduce your load times. I return false for music files to reduce load times greatly - it ends up streaming music instead of preloading it (if using Music, not AssetManager).
Related
I want to change the title bar color of the Google Create shortcut window.
The left is the basic state, and the right is the appearance of adding functions through elements.
From How to change Chrome App Caption Bar color in Windows 10
I changed the title color by referring to the link above. Answer at the bottom.
I want to keep this state from when I turn it on, but it doesn't work without dev tools.
I wanted to keep this state, so I looked for a way, but this was the only hopeful comment.
How can I use 'Custom JavaScript for Websites 2' to keep title bar color without dev tools?
You should use an extension like this or this and inject CSS like:
body {
background-color: #131722;
}
If you want to change the top bar in the image you posted, that's Google Chrome. Try Dark Mode.
The problem has been resolved.
You can use this extension.
https://chrome.google.com/webstore/detail/permanent-inspect-element/alfgclaljdbleenfjjnkefddlgbknl
After editing the element, you can save it.
But the downside is that the site is too slow. The evaluation is also complex. I think it will be a good tool for some. For me, this tool is too inconvenient. I'm looking for a better way.
I am porting my Android app to iOS and I am using Codename One for that.
In my app an EditText can contain icons mixed with text. It is accomplished with instructions like these:
MyImageSpan iconSpan=new MyImageSpan(activity, R.drawable.icon);
editText.getText().insert(caretPosition,CHAR);
editText.getText().setSpan(iconSpan,caretPosition,caretPosition+1,Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
then in other parts, spans have to be detected, if present, and it is performed like this:
Editable editable = editText.getText();
for (int i = 0; i < editable.length(); i = next) {
// find the next span transition
next = editable.nextSpanTransition(i, editable.length(), MyImageSpan.class);
// get all spans in this range
MImageSpan[] tempSpans = editable.getSpans(i, next, MyImageSpan.class);
...
...
//In my app that becomes really complex
...
...
...
...
}
I tried to use this online tool:
http://fontello.com/
to manage icons like font glyphs, as it seems to be adviced by Codename One documentation.
In fact I do not understand if it is possible to have spans with different fonts in an TextField in Codename One, and I do not know if I could find and manage them inside the TextField.
But the most important thing is that the online tool to create fonts out of svg files did not work for me because some icons are reverted, others are broken or confused, others are tiny, depending on the saving format (eventually I saved in pure SVG format to avoid issues but it's the same).
What I am asking is how to handle the spans in the TextField in Codename One.
It has not to be the same "way" but the result has to be the same.
This won't work. Rich text edit is something that's just too different between platforms and isn't universally available. Since the edit component is implemented using native widgets it's very hard to consistently abstract something like this and effectively impossible.
However, web tools solved that problem already and include some cross platform rich edit tools that work. You can just use one of those tools and embed a BrowserComponent in your app. Then perform the rich editing within the browser component.
Back in the day we did it with CK editor, but this library is pretty out of date by now so I'm not sure how well it works. It should be relatively easy to create something like this though.
Good evening all.
I've created an app using AIDE, which I'll ultimately get set up with google to sell on the play store.
I'm presently working through the differences between portrait and landscape/horizontal.
Presently, my app's main page doesn't allow the whole page to show when I rotate the phone to horizontal. It only shows a single line. And if I try to scroll, it doesn't allow that (not entirely a surprise, because I didn't set it up for scrolling).
My header/intro line is set to sp=30. My subsequent lines are set to sp=20.
I've been looking at how to deal with this issue. I.e., I want the text to resize when the orientation is changed from portrait to landscape. I have already found the androidmanifest screenOrientation="fullUser" code to allow for full rotation. This however does not deal with my real issue--- screen resizing, and text resizing, based on orientation.
I've been reading some older posts on here discussing
get textview()
but my lack of experience in coding is now asking--- where am I suppose to place those code snippets? Would they go on mainActivity.java, and main.xml or new/different pages?
And with newer API's, is there a better/more-efficient way to do this? The articles I'm reading are 3 years old at the newest.
TYIA.
SteveB.
I want the text to resize when the orientation is changed from portrait to landscape
You're looking for how resource quantifiers work.
You can make a res/layout-land or res/values-land folder explicitly defining landscape resources.
Your options include
use number or #dimen or #style in layout xml files for android:textSize
use number or #dimen to define #style in styles.xml over a TextAppearance parent style's textSize
define #dimen value in dimens.xml
Using SVG icons has a lot of advantages over png/gif icons. As a result, I would like to implement a svg button class to act as a gwt widget. Is there already something existing in GXT 3? Or what would be the best option to implement such a widget? Thanks.
More Details:
I need a pure clickable svg icon act like a button widget. It needs to have mouse click handler and the ability to apply different css in three states: normal, hover, disabled. I do not want a button with a svg icon inside.
In browsers that support them, SVG can be used as if it was an image file (png/jpg/etc). GXT/GWT shouldn't make a difference, you just have to apply the image.
Rather than building your own widget (which is, of course, an option), you can use built-in widgets that can be told to use any image or css class (depending on the widget).
For example, GXT's TextButton has a setIcon method which takes an ImageResource. Typically these are created in a ClientBundle, but the code generation for GWT's ClientBundle doesn't know what SVG is.
The ImageResource interface has an implementation built in to GWT, ImageResourcePrototype, allowing you to specify all of the parameters required. The second parameter is a url, the path to an image, which will be rendered as long as the browser supports it. So, we need to get the SVG file you want to use into the ImageResourcePrototype.
ImageResource icon = new ImageResourcePrototype("icon", UriUtils.fromSafeConstant("/path/to/my.svg"), 0, 0, 20, 20, false, false);
TextButton button = new TextButton("square", icon);
RootPanel.get().add(button);
Now, you can do this by just passing in a normal URL, but then we're no better than a normal image, since we still need a round trip to the server - most icon buttons are only a few kb, but the overhead of an HTTP call can be that bad, so your SVG will be just as bad. Thankfully all built-in ImageResources in GWT are already bundled into the app, so no HTTP calls are needed. It turns out we can also bundle our svg file, though we need to get it just right for the browser to handle it.
Put the SVG file in your source with your Java, and we'll make a bundle out of it. I put this very boring icon into a file called icon.svg:
<svg width="50" height="50" version="1.1" xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
</svg>
Next, use it in our app. I made an entrypoint that just grabs this icon and puts it into a button. We use DataResource here to refer to the file as a data url from inside our app, but we need to specify the mime-type correctly for the browser to understand that it is an image:
public class SampleIconEntryPoint implements EntryPoint {
interface Bundle extends ClientBundle {
#Source("icon.svg")
#MimeType("image/svg+xml")
DataResource icon();
}
#Override
public void onModuleLoad() {
Bundle bundle = GWT.create(Bundle.class);
ImageResource icon = new ImageResourcePrototype("icon", bundle.icon().getSafeUri(), 0, 0, 50, 50, false, false);
TextButton button = new TextButton("square", icon);
RootPanel.get().add(button);
}
}
This could be made easier by adding support for .svg files to the ImageResourceGenerator in GWT, but this turns out to not be a very common use case.
Okay, so what does SVG have over raster images? For large images, a lot! They can be much smaller for the same level of detail since they stretch nicely, but for small icons, it can be hit or miss. It is easier to change some details about them on the fly, but that's really outside the scope of a question addressing how to use SVG in gwt (see GXT's chart/draw library for lots of easy SVG render tools), and doesn't often matter for a single image on a button. Icon images are small, and saving a few bytes here and there is probably not an efficient use of time - plus, SVG takes more time to render in the browser than much-simpler images (though again, the difference will be minimal for very small browsers).
Edit, trying to address the question edit instead of the original point.
SVG elements are nearly normal dom elements, though check what browsers you need to support to ensure that they will work correctly. https://developer.mozilla.org/en-US/docs/SVG_In_HTML_Introduction gives a quick introduction on how the elements need to be built to correct namespace them so that the browser will work with them correctly. Beyond that, they behave roughly as normal dom elements in GWT. I would generally suggest that you treat them like normal dom elements in GWT, and so your widget should not attach handlers to child elements but just use addDomHandler as normal on each widget. Given the ability of svg elements to overlap each other (based on order in the dom), you might consider other ways of seeing which element is on top of others if you need to know exactly what the mouse is over (though for a button, this shouldn't matter).
As mentioned above, GXT's draw tools provide a DrawComponent class which can use SVG and let you get events that happen to each drawn sprite, plus normalize for different browser issues (support canvas if possible, or VML if necessary).
I'm creating an app for use by pilots. It mostly uses TextView, EditText, Button, etc. In other words, not very graphics-heavy.
When used at night, I'd like for the user to be able to switch to a "night mode" where everything on screen is red and black... like the Google Sky Map app. (This is important for pilots because the color red does not destroy the eye's natural night vision adaptation as other colors do.)
What's the best way to do this? I found APIs like ColorFilter, etc. but I'm not sure how I'd apply these app-wide.
If you're simply talking about changing the colours of the various views within the layout and not the structure of the layout itself, then I'd suggest you simply do this using styles.
i.e. Define two sets of styles for the various views which make up your layout - one set for night mode and one for day mode. In your activity, it then becomes a case of calling setStyle() on each of your views to toggle it between night and day.
Coming up with a sensible naming convention and parentage scheme for your styles will make your life a lot easier. e.g. MyText.Large vs MyText.Large.Night.
The Android developer doc on Themes and Style is a good starting point.
Creating a day and night theme and setting it programmatically would work. But it also requires you to duplicate your styles, just to specify different drawables/colors.
Instead, you can maintain one style and use Android's built in day/night mode support. Just as you can have multiple variations of a single layout (for landscape or portrait screen orientations,) drawable (for different pixel densities) and string (for different locales,) you can also have day and night versions of your drawables and colors. The specifiers are "-night" and "-notnight" but you will probably want to use "-night" or nothing, making your day version the default. For example:
res/drawable/fancy-button-background.9.png
res/drawable-night/fancy-button-background.9.png
Android should be able to switch the day/night mode automatically but the details on how and when that happens are a little unclear to me. To change the mode yourself, you can use UiModeManager#setNightMode(). Just make sure car mode is enabled first, using enableCarMode(0).