How to handle cutout area by compose? - kotlin

I'm a Android development beginner .
How to handle cutout area by compose?
As far as I know...
WindowManager doesn't provide information about cutout area.
and LayoutInDisplayCutoutMode can be set in xml file.
I ask for your advice, please.

In Compose 1.2.* you can get it like this:
// get value:
WindowInsets.displayCutout
// apply padding modifier:
Modifier.displayCutoutPadding()
In earlier versions you can use Accompanist Insets library:
// get value:
LocalWindowInsets.current.displayCutout
// apply padding modifier:
Modifier.cutoutPadding()

Related

Jetpack Compose Desktop – MaterialTheme.colors.background Not Working

Setting MaterialTheme.colors
I'm trying to make a very basic window in Jetpack Compose for Desktop (not mobile), but I'm having some difficulties with changing the colors of the window. I've looked at some tutorials and examples, but maybe I don't quite understand how color themes are correctly implemented.
The code that I wrote should create a window with a dark background, but the window when the program runs is white.
Please provide any insights you can as to what I am doing wrong.
Code (Kotlin)
import androidx.compose.desktop.*
import androidx.compose.material.*
import androidx.compose.ui.unit.*
fun main() = Window(
title = "Window",
resizable = false,
size = IntSize(1200, 800),
) {
MaterialTheme(colors = darkColors()) {
}
}
Window
Other Info
macOS Big Sur
IntelliJ 2021.2
Jetpack Compose 0.4.0
The MaterialTheme only provides colors for all views inside the container, it does not create or render the view.
Most Material components will use these colors as default values, but you can also use these colors in your views using, for example, MaterialTheme.colors.background.
You need to put some view inside, size it and apply some background color, for example:
MaterialTheme(colors = darkColors()) {
Box(Modifier.fillMaxSize().background(MaterialTheme.colors.background))
}
You can use Scaffold to see changes.
In your example:
...
MaterialTheme(colors = darkColors()) {
Scaffold {
// your content
}
}
...
You can read about it:
https://developer.android.com/jetpack/compose/layouts/material
or here:
https://metanit.com/kotlin/jetpack/4.11.php

Vis.js Gap between Node and its border

Using Vis.js I want to Generate something where in there is a gap between the Circular image and the Node border
Sample:
I cannot find anything at the Vis.js documentation for such a modification, can anyone guide me for it?
vis.js GitHub issue report
There's no way to achieve this unfortunelly. The color option only accepts one border and you can't make use of CSS since Vis is built using canvas, not SVG.
What you can do to achieve this is crop your image in a circular shape with some transparent padding to make the gap. And then vis would add the black border for you.
yes you can do that.do not add border option in node.you can add circular border in afterDrawing event.
network.on("afterDrawing", function (ctx) {
var imageSize= 21;
var nodeId = 1;
var nodePosition = network.getPositions([nodeId]);
ctx.strokeStyle = '#006bb3';
ctx.lineWidth = 4;
ctx.circle(nodePosition[nodeId].x, nodePosition[nodeId].y, imageSize+5);
ctx.stroke();
})

Animating UIVisualEffectView Blur Radius?

As the title says it, is there a way to animate a UIVisualEffectView's blur radius? I have a dynamic background behind the view so the ImageEffects addition can't be used... The only thing that can do this as far as I know is to animate the opacity but iOS complains saying that doing that breaks the EffectView so it definitely seems like a bad idea... Any help would be gladly appreciated.
The answer is yes. Here's an example for animating from no blur -> blur:
// When creating your view...
let blurView = UIVisualEffectView()
// Later, when you want to animate...
UIView.animateWithDuration(1.0) { () -> Void in
blurView.effect = UIBlurEffect(style: .Dark)
}
This will animate the blur radius from zero (totally transparent, or rather - no blur effect at all) to the default radius (fully blurred) over the duration of one second. And to do the reverse animation:
UIView.animateWithDuration(1.0) { () -> Void in
blurView.effect = nil
}
The resulting animations transform the blur radius smoothly, even though you're actually adding/removing the blur effect entirely - UIKit just knows what to do behind the scenes.
Note that this wasn't always possible: Until recently (not sure when), a UIVisualEffectView had to be initialized with a UIVisualEffect, and the effect property was read-only. Now, effect is both optional and read/write (though the documentation isn't updated...), and UIVisualEffectView includes an empty initializer, enabling us to perform these animations.
The only restriction is that you cannot manually assign a custom blur radius to a UIVisualEffectView - you can only animate between 'no blur' and 'fully blurred'.
EDIT: In case anybody is interested, I've created a subclass of UIVisualEffectView that gives you full control over blur radius. The caveat is that it uses a private UIKit API, so you probably shouldn't submit apps for review using it. However, it's still interesting and useful for prototypes or internal applications:
https://github.com/collinhundley/APCustomBlurView

Dojo unmovable stencil

I am drawing stencils using Dojo and I need to make some of the stencils "unmovable" - that is, when a user clicks on the stencil, it is not able to be dragged around the screen.
I guess there's not a lot of code to post here as I'm struggling with the Dojo docs to see if this is possible. I'm adding my stencil using the following line of code:
dojoDrawing.addStencil("rect", {
x : someXVal,
y : someYVal,
width : someWidth,
height : someHeight
});
Any guidance is much appreciated.
Although it doesn't seem ideal, I was able to accomplish what I wanted by making the stencil disabled:
var stencil = dojoDrawing.addStencil("rect", {
x : someXVal,
y : someYVal,
width : someWidth,
height : someHeight
});
stencil.disable();
This changes the stencil colors to the disabled state and makes it not selectable and therefore not movable.

How to enable antialiasing (4X MSAA) for AndroidGameView?

I have a simple OpenGL application which I'm trying to enable antialiasing (4x MSAA) for. I can't seem to figure out how to do this using AndroidGameView.
So far I've been forcing 4x MSAA through the Developer Settings menu as a short term solution but I'd like to be able to do this programmatically. Can anyone shed some light on this?
Turns out that the way to do this programmatically is to set the GraphicsMode property in the CreateFrameBuffer() override of your class inheriting from AndroidGameView:
protected override void CreateFrameBuffer()
{
// Create a graphics context for OpenGL ES 2.0
ContextRenderingApi = GLVersion.ES2;
// Set the graphics mode to use 32bpp colour format, 24bpp depth, 8bpp stencil and 4x MSAA
GraphicsMode = new GraphicsMode(new ColorFormat(32), 24, 8, 4);
// Create the frame buffer itself by calling the base class method
base.CreateFrameBuffer();
// Custom initialization code here
}
Thanks to Cheesebaron for leading me down the path of looking into the GraphicsMode property of AndroidGameView.