I've tried :
graphics().setSize(800, 600);
But it has no effects (at least with java and html).
And it seems this method is deprecated. What is the best way to set up the game size ?
This method was deprecated in version 1.5 of PlayN, the size of your game view on Android/iOS is dictated by the device. The size on Java is configured via JavaPlatform.Config. The size in HTML is configured by the size of your playn-root div.
For example on the java backend:
public class GameJava {
public static void main(String[] args) {
//Setting the size of the Java Backend
Config config = new Config();
config.width = 800;
config.height = 480;
JavaPlatform platform = JavaPlatform.register(config);
platform.assets().setPathPrefix("your/package/resources");
PlayN.run(new Game());
}
}
for HTML do something like this:
<style>
#playn-root {
width: 640px;
height: 480px;
}
</style>
....
<div id="playn-root"></div>
<body>
<script src="game/game.nocache.js"></script>
</body>
Related
I have the following template component for a dialog message to display a "full-screen" gallery of a few images (with varying resolutions).
<MudDialog Style="max-width: 95vw; max-height: 90vh;">
<DialogContent>
<MudCarousel Style="THIS SHOULD BE DYNAMIC" Class="mud-width-full" ShowArrows="#(ShowControls && Images.Count > 1)" ShowBullets=false TData="object">
#foreach (var image in Images)
{
<MudCarouselItem>
<MudImage Src="#("data:image/png;base64," + image)" Style="max-height: 80vh;" ObjectFit="ObjectFit.Contain" Elevation="5" Fluid />
</MudCarouselItem>
}
</MudCarousel>
</DialogContent>
</MudDialog>
Images is a Base64 List<string> parameter. The problem here is that I can't properly resize both the dialog and carousel containers to fit the images resolution without specifying fixed Width and Height properties in the Style parameter of the carousel component. Using 100% for either doesn't work as expected and the content size is ignored ending up with a 0x0 div.
I'm not sure if this is a CSS/MudBlazor issue or perhaps just wrong implementation on my part but I hope I explained the problem clearly enough.
Edit: Following the static logic and having access to an Image model containing resolution properties, this is what I'm trying now. It works but has some caveats, one being that images larger than 95vw or 90vh (max dialog size) will incorrectly expand the dialog in that axis and shrink down because of the object-fit attribute, so the problem is that the resizing values are set to the natural size and not the rendered size, some images might scaled down.
I mean, is this the best approach? This code makes me want to take a bath after touching it...
#inject ImageService ImageService
<div>
<MudDialog Style="max-width: 95vw; max-height: 90vh;">
<DialogContent>
<MudCarousel Class="mud-width-full" Style=#($"width: {_width}px; height: {_height}px;") ShowArrows="#(Images.Count > 1)" ShowBullets=false TData="object" AutoCycle=false>
#foreach (var image in Images)
{
<MudCarouselItem Style=#($"width: {image.Width}px; height: {image.Height}px; max-width: 85vw; max-height: 80vh; margin: 1rem 0;") Transition="Transition.Fade">
<MudImage Src="#("data:image/png;base64," + LoadCardImage(image.Path))" Style="width: 100%; height: 100%;" ObjectFit="ObjectFit.Contain" Elevation="0" Fluid />
</MudCarouselItem>
}
</MudCarousel>
</DialogContent>
</MudDialog>
</div>
#code {
[CascadingParameter]
public MudDialogInstance MudDialog { get; set; }
[Parameter]
public List<Image> Images { get; set; }
private int _width;
private int _height;
protected override void OnInitialized()
{
ResizeCarousel();
}
private void ResizeCarousel()
{
if (Images == null || Images.Count == 0) return;
if(Images.Count == 1)
{
_width = Images[0].Width;
_height = Images[0].Height;
}
else
{
_width = Images.Max(i => i.Width);
_height = Images.Max(i => i.Height);
}
}
private string LoadCardImage(string path) => ImageService.LoadImage(path);
}
I'am using XamarinForms and I wanna know if I can set the backgroundColor using the configuration of the app.xaml, I'm using styles and themes that can be change at runtime, it is possible?
I'm using styles and themes that can be change at runtime, it is possible?
If you want to change status bar background at runtime, I suggest you can use DependencyService to change status bar background in Android platform.
Add this code to your Xamarin.Forms project(shared code project)
public interface IStatusBarPlatformSpecific
{
void SetStatusBarColor(Xamarin.Forms.Color color);
}
Implement the interface on Android platform. don't forget to register the platform implementations.
[assembly: Dependency(typeof(ChangeStatusbar))]
namespace FormsSample.Droid
{
public class ChangeStatusbar : IStatusBarPlatformSpecific
{
public void SetStatusBarColor(Xamarin.Forms.Color color)
{
// The SetStatusBarcolor is new since API 21
if (Build.VERSION.SdkInt >= BuildVersionCodes.Lollipop)
{
var androidColor = color.AddLuminosity(-0.1).ToAndroid();
//Just use the plugin
Xamarin.Essentials.Platform.CurrentActivity.Window.SetStatusBarColor(androidColor);
}
else
{
// Here you will just have to set your
// color in styles.xml file as shown below.
}
}
}
}
Now, you can change status bar background by calling the Get method to resolve the IStatusBarPlatformSpecific interface
private void btn1_Clicked(object sender, EventArgs e)
{
var statusbar = DependencyService.Get<IStatusBarPlatformSpecific>();
statusbar.SetStatusBarColor(Color.Green);
}
The screenshot:
The status bar should go the same colour as the navigation bar. You can set that to anything you like. I use styles to set this in a ContentPage as follows.
protected override void OnAppearing()
{
(this.Parent as NavigationPage).Style = (Style)Application.Current.Resources["NavBarColour"];
base.OnAppearing();
}
];
For Android modify Resources/Values/Styles.xml file as
<style name="MainTheme" parent="MainTheme.Base">
<item name="android:statusBarColor">#ffffff</item>
<item name="android:navigationBarColor">#ffffff</item>
</style>
Some versions of Vaadin offered FontAwesome built-in. Later Vaadin came with its own collection of icons.
How can I use either of those in Vaadin 8?
With the new emphasis on Vaadin Flow (Vaadin 10+) and re-implementing with Web Components, I have not been able to find any documentation on how to use either of those Vaadin 8 compatible font sources.
How can I conveniently get some large icons displayed as widgets within my Vaadin 8 layout?
There is some 8.x documentation regarding font icons and VaadinIcons, as well as creating your own font icons.
Using them is as simple as new Button("Add", VaadinIcons.PLUS);, but you mentioned something about some large icons which you don't get out of the box AFAIK.
However, based on the above doc, the quick and dirty solution is using a label and some styles:
Theme:
.big-icon .v-icon{
font-size: 300px;
}
Code:
public class Icon extends VerticalLayout {
public Icon() {
Label image = new Label();
image.setContentMode(ContentMode.HTML);
image.setValue(VaadinIcons.EYE.getHtml());
image.addStyleName("big-icon");
addComponent(image);
}
}
Result:
Obviously you can proceed with the madness, and create a slightly more flexible label of your own that does not require modifying the styles, and can be updated at runtim. Something along the lines of:
public class Icon extends Label {
private static final String CONTENT = "<span class=\"v-icon v-icon-%s\" style=\"font-family: %s; color: %s; font-size: %spx;\">&#x%s;</span>";
private Color color;
private int size;
private VaadinIcons icon;
public Icon(VaadinIcons icon) {
this(icon, Color.BLACK, 16);
}
public Icon(VaadinIcons icon, Color color, int size) {
this.icon = icon;
this.color = color;
this.size = size;
setContentMode(ContentMode.HTML);
updateIcon();
}
public void setIcon(VaadinIcons icon) {
this.icon = icon;
updateIcon();
}
public void setSize(int size) {
this.size = size;
updateIcon();
}
private void updateIcon() {
setValue(String.format(CONTENT,
icon.name(),
icon.getFontFamily(),
color.name(),
size,
Integer.toHexString(icon.getCodepoint())));
}
public void setColor(Color color) {
this.color = color;
}
public enum Color {
BLACK, GREEN
}
}
Where myLayout.addComponents(new Icon(VaadinIcons.PLUS), new Icon(VaadinIcons.INFO, Icon.Color.GREEN, 200)); results in:
There could be more elegant solutions, but this is as far as I went brainstorming because I didn't have such a need so far. I always used regular sized icons with buttons and labels. Anyhow, hopefully this should get you started.
I search but I can't find if it's possible to change the StatusBar color for each platform, from my portable code? (for Android, iOS & WinPhone 8.1)
public App()
{
// Change the StatusBar color
MainPage = new MainPageUser();
}
I believe you would be better off writing a little bit of platform-specific code:
For Android:
On your MainActivity.cs on the Droid project, right after
LoadApplication(new App());
of the overriden OnCreate method, add:
Window.SetStatusBarColor(Android.Graphics.Color.Argb(255, 0, 0, 0));
Like so:
protected override void OnCreate(Bundle bundle)
{
TabLayoutResource = Resource.Layout.Tabbar;
ToolbarResource = Resource.Layout.Toolbar;
base.OnCreate(bundle);
global::Xamarin.Forms.Forms.Init(this, bundle);
LoadApplication(new App());
Window.SetStatusBarColor(Android.Graphics.Color.Argb(255, 0, 0, 0)); //here
}
I'm coming back to this answer years later to fix it because my answer had been wrong even though it had been accepted as the correct answer. I have now fixed it.
I had misread the question to want to change the navigation bar or that it worked differently in Android at that time.
I think at least this is a much better answer and should be better help to change the color of the navigationbar in Android and iOS.
Add this code to your Xamarin.Forms project
public interface IStatusBarPlatformSpecific
{
void SetStatusBarColor(Color color);
}
add this class to your Android project
[assembly: Dependency(typeof(MyDemo.Droid.CustomRenderers.Statusbar))]
namespace MyDemo.Droid.CustomRenderers
{
public class Statusbar : IStatusBarPlatformSpecific
{
public Statusbar()
{
}
public void SetStatusBarColor(Color color)
{
// The SetStatusBarcolor is new since API 21
if (Build.VERSION.SdkInt >= BuildVersionCodes.Lollipop)
{
var androidColor = color.AddLuminosity(-0.1).ToAndroid();
//Just use the plugin
CrossCurrentActivity.Current.Activity.Window.SetStatusBarColor(androidColor);
}
else
{
// Here you will just have to set your
// color in styles.xml file as shown below.
}
}
}
}
Add this CurrentActivityPlugin to your projects
Now you can change the color in your Forms project like this
var statusbar = DependencyService.Get<IStatusBarPlatformSpecific>();
statusbar.SetStatusBarColor(Color.Green);
Note the else statement above. If you are using an older buildversion than 21 you will need to hard-code your color to the styles.xml in your Android project like this
<?xml version="1.0" encoding="utf-8" ?>
<resources>
<style name="MainTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="android:statusBarColor">#544054</item>
</style>
</resources>
For iOS its similar
add this to your Info.plist (more docs here)
<key>UIStatusBarStyle</key>
<string>UIStatusBarStyleLightContent</string>
<key>UIViewControllerBasedStatusBarAppearance</key>
<false/>
and add this code to your SetStatusBarColor ethod in the iOS version of the StatusBar class
UIView statusBar = UIApplication.SharedApplication.ValueForKey(
new NSString("statusBar")) as UIView;
if (statusBar != null && statusBar.RespondsToSelector(
new ObjCRuntime.Selector("setBackgroundColor:")))
{
// change to your desired color
statusBar.BackgroundColor = Color.FromHex("#7f6550").ToUIColor();
}
I wrote a more detailed blog post on how to set the color of the statusbar from Xamarin.Forms if somebody is interested. It does only talk about Android and iOS but should give you an idea what to do with other platforms.
Another option for Android: change the color in the file \Resources\values\styles.xml (Android project).
<item name="colorPrimaryDark">#00FF00</item>
Using this approach you can change it on every page.
Application.Current.MainPage.SetValue(NavigationPage.BarBackgroundColorProperty, Color.Black);
Maybe I'm not understanding the question, but I hope this helps.
After searching around quite a bit trying to find out how to change the iPhoneX status bar color (the bit behind the notch), I found out that it automatically sets itself based on the BackroundColorproperty of the root ContentPage.
So in Xaml it's as easy as this:
<ContentPage.BackgroundColor>
<OnPlatform x:TypeArguments="Color"
iOS="Navy"
Android="Yellow"
/>
</ContentPage.BackgroundColor>
I'm basically using the approach described in one of the answers here: https://stackoverflow.com/a/46199029/960691, but modifying it a little by giving you a code snippet that I've focused for your individual question (at least I think!)
On the latest versions of Xamarin you no longer need sketchy plugins and can instead do the following on Android:
var androidColor = color.ToAndroid();
Xamarin.Essentials.Platform.CurrentActivity.Window.SetStatusBarColor(androidColor);
So a complete dependency example in Android:
using System;
using Android.OS;
using WikiSpiv.Droid.Extras;
using WikiSpiv.Extras;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;
[assembly: Dependency(typeof(Statusbar))]
namespace WikiSpiv.Droid.Extras
{
public class Statusbar : IStatusBarPlatformSpecific
{
public Statusbar()
{
}
public void SetStatusBarColor(Color color)
{
if (Build.VERSION.SdkInt >= BuildVersionCodes.Lollipop)
{
var androidColor = color.ToAndroid();
Xamarin.Essentials.Platform.CurrentActivity.Window.SetStatusBarColor(androidColor);
}
}
}
}
In Forms:
using System;
using Xamarin.Forms;
namespace WikiSpiv.Extras
{
public interface IStatusBarPlatformSpecific
{
public void SetStatusBarColor(Color color);
}
}
And it can be called like this:
var statusbar = DependencyService.Get<IStatusBarPlatformSpecific>();
statusbar.SetStatusBarColor(Color.Green);
Step 1. Add interface in shared class
public interface IStatusBarColor
{
void changestatuscolor(string color);
}
Step 2. on main activity inject dependency and implement the interface
[assembly: Dependency(typeof(ETCrewReport.Droid.MainActivity))]
public class MainActivity : FormsAppCompatActivity, IStatusBarColor
{
......
...
public static Context context;
protected override void OnCreate(Bundle bundle)
{
}
public void changestatuscolor(string color)
{
try
{
if (Build.VERSION.SdkInt >= BuildVersionCodes.Lollipop)
{
var c = MainActivity.context as FormsAppCompatActivity;
c?.RunOnUiThread(() => c.Window.SetStatusBarColor(Android.Graphics.Color.ParseColor(color)));
}
}
catch (Exception ex)
{
}
}
Step 3. get the dependency in the required xaml.cs file on OnAppearing method
protected async override void OnAppearing()
{
try
{
DependencyService.Get<IStatusBarColor>().changestatuscolor(Color.Black.ToHex());
}
catch (Exception ex)
{
throw;
}
}
in your android
MainActivity.cs
after the
LoadApplication(new App());
add this line
Window.SetStatusBarColor(Android.Graphics.Color.Argb(255, 62, 102,
226));
the color code is Argb format (Alpha,Red,Green,Blue)
You can change your intensity with the alpha percentage from 0-255
below mentioned may help you with opacity of your alpha color
for black with 50% alpha use
Window.SetStatusBarColor(Android.Graphics.Color.Argb(80, 0, 0, 0));
100% - FF
95% - F2
90% - E6
85% - D9
80% - CC
75% - BF
70% - B3
65% - A6
60% - 99
55% - 8C
50% - 80
45% - 73
40% - 66
35% - 59
30% - 4D
25% - 40
20% - 33
15% - 26
10% - 1A
5% - 0D
0% - 00
For android:
protected override void OnCreate(Bundle savedInstanceState)
{
AppCompatDelegate.DefaultNightMode = AppCompatDelegate.ModeNightNo;
TabLayoutResource = Resource.Layout.Tabbar;
ToolbarResource = Resource.Layout.Toolbar;
this.SetStatusBarColor(Color.FromHex("#8EC5FC").ToAndroid());
base.OnCreate(savedInstanceState);
Xamarin.Essentials.Platform.Init(this, savedInstanceState);
global::Xamarin.Forms.Forms.Init(this, savedInstanceState);
LoadApplication(new App());
}
This works for me.
In the App.xaml
<Color x:Key="navBarRed">#AA0000</Color>
<Color x:Key="navBarBlue">#F4721C</Color>
<Color x:Key="navBarColour">#F4721C</Color>
<Style TargetType="NavigationPage">
<Setter Property="BarBackgroundColor" Value="{DynamicResource navBarColour}"/>
</Style>
Then when you want to change the colour:
if (Condition == true)
App.Current.Resources["navBarColour"] = App.Current.Resources["navBarBlue"];
else
App.Current.Resources["navBarColour"] = App.Current.Resources["navBarRed"];
I want to use the canvas.drawText() method to draw some text frame after frame. When I run my game in Java, everything is fine. But when I run in html, the behaviour is different. I isolated the code (see below) and I get the same result.
package textbug.core;
import static playn.core.PlayN.*;
import playn.core.Canvas;
import playn.core.CanvasImage;
import playn.core.Game;
import playn.core.Image;
import playn.core.ImageLayer;
public class TextBugIsolated implements Game {
Canvas canvas;
int x = 20;
#Override
public void init() {
// create and add background image layer
Image bgImage = assetManager().getImage("images/bg.png");
ImageLayer bgLayer = graphics().createImageLayer(bgImage);
graphics().rootLayer().add(bgLayer);
CanvasImage canvasImage = graphics().createImage(graphics().width(), graphics().height());
ImageLayer imageLayer = graphics().createImageLayer();
imageLayer.setImage(canvasImage);
graphics().rootLayer().add(imageLayer);
canvas = canvasImage.canvas();
}
#Override
public void paint(float alpha) {
canvas.clear();
canvas.drawText("PlayN is cool!", x++, 20);
canvas.drawText("Hello World", 20, 100);
}
#Override
public void update(float delta) {
}
#Override
public int updateRate() {
return 25;
}
}
I would expect the text "PlayN is cool!" to move horizontally like in Java but it is not. I tried to debug but I cannot step in the native code.
Anyone has a clue? Am I trying something prohibited?
This is a known issue, as documented here. It only affects the HTML backend. That seems to be exactly what you're seeing.
Your code looks fine to me.
Do you wait for the image to load, because the case in safari is maybe it loads after the drawText and paints over it.. and in java probably the loading is fast enough so it loads fine.
care for the done() callback ... so it sets the text update after the image is loaded