How to display clear background image on Android Wear notification? - wear-os

As far as I can work out, there are two ways to set the background image for a notification in Android Wear. For the record, both start with:
Bitmap bitmap;
Notification.Builder bob = new Notification.Builder(this)
.setContentTitle(title)
...and so on to set up the notification. Also assume that bitmap has been initialized to an appropriately-sized image (though that's another issue).
Method 1:
bob.setLargeIcon(bitmap);
This works, but AFAICT bitmap is always blurred-out in the background of the notification, regardless of its size.
Method 2:
bob.setStyle(new Notification.BigPictureStyle().bigPicture(bitmap));
This clears up the bitmap, but has the unfortunate side effect of inserting an extra "page" on the wearable, a page that is blank except for the bitmap. I suppose the thinking here is that you're trying to show the image to the user - but I'm not, I just want a non-blurry background.
Is there a way to accomplish this?

Please use setBackground(Bitmap) method from WearableExtender instead of setLargeIcon(Bitmap). It will set the background bitmap that won't be blurred.
Notification.Builder wearableBuilder = new Notification.Builder(context)
...
.extend(new WearableExtender().setBackground(bitmap));

Related

Common Controls on a Transparent Window?

While there are lots of variations of the question, there doesn't seem to be a specific answer to a simple case of wanting to use built-in common controls on a transparent window using Win32. I don't want the controls to be transparent, I just want the border around it to be transparent. I can't believe MS didn't update the .dll's to handle transparency when they added it, but I guess they forgot? Is there a specific method that works. A button can get close with WS_EX_TRANSPARENT, but flaky where it works most of the time but at times part of the border shows up. Edit controls, change depending on when get focus or not.
So the question is simply:
Is there a way to make common controls on transparent window so there is no white border around them?
If not, is there a good replacement library that does it via owner draw?
If some, which ones and what is the method?
Seems silly to reinvent the wheel just because of the area around the control.
TIA!!
If I am not mistaken, you can take the following steps to achieve this effect.
1.Create a GDI+ Bitmap object with the PixelFormat32bppPARGB pixel format.
2.Create a Graphics object to draw in this Bitmap object.
3.Do all your drawing into this object using GDI+.
4.Destroy the Graphics object created in step 2.
5.Call the GetHBITMAP method on the Bitmap object to get a Windows HBITMAP.
6.Destroy the Bitmap object.
7.Create a memory DC using CreateCompatibleDC and select the HBITMAP from step 5 into it.
8.Call UpdateLayeredWindow using the memory DC as a source.
9.Select previous bitmap and delete the memory DC.
10.Destroy the HBITMAP created in step 5.
This method should allow you to control the alpha channel of everything that is drawn: transparent for the background, opaque for the button.
A similar discussion: Transparent window containing opaque text and buttons

JavaFX animations are flickering

I have a window displaying a video stream with a twitter feed as an overlay.
When a new tweet is displayed, the current tweet animates out using a rotate animation and the next tweet is rotated into view. The animations are performed using a RotateTransition.
The app also switches between different cameras to display different streams. To give an indication of when the app switches to the next camera, I have a progressbar that fills using a Timeline object.
This works well, until I resize the window. The rotate animations start to flicker, along with the progressbars as they gradually fill.
As a test, I disabled the video stream, to see what's happening. The 'artifact' doesn't occur then and I can resize as much as I want. If I play the stream and don't resize, everything works well.
The video player is based on VLCJ, but the actual pixels are drawn on a WritableImage in an Imageview.
See the following images that illustrate the problem.
At the bottom right you can see 2 different progress bars (a ProgresBar and a ProgressIndicator).
A part of the flickering result is still visible below the second image. It somehow stays visible, probably because the area doesn't get redrawn.
Any idea what makes the flickering happen? Is there anything I can do to fix or avoid this?
I tried some VM options in IntelliJ: -Dsun.java2d.d3d=true -Dprism.forceGPU=true to somehow enable hardware acceleration, but that doesn't seem to help.
Disabling the progressbar fill animation doesn't help either.
I had a similar problem with some arcs and shapes that would flicker when its attributes / sizes were changed.
The solution to my problem was to make sure that the methods used to change the shapes were called from inside the JavaFX thread.
Platform.runLater(() -> {
arc.setStartAngle(30);
arc.setLength(45);
}

Mixing Quartz and OpenGL?

I am trying to find out what actually happens in background when we do this (please see the image)
As you can see in image I have added few buttons and have checked Content View from Interface builder for window.
Now as we know it will make use of core animation or say will create layers. (Please correct me if I am wrong. Still studying...)
I want to know how does these buttons are drawn?
My assumption is when we tick Content View, these buttons are drawn from CGBitmapContextRef and bitmap created from it are handed over to Core Animation (OpenGL). But I am not being able to prove it so far. How do I prove it?
Any example or some approach idea would be great?
Thing I am sure of is buttons created from CGBitmapContextRef. But what happens to those button images is unknown.
Can anyone explain how is that integration possible? How those image would have got on screen?
Edit:
To add some more information on same topic, please check the image below for layers of OpenGL. I think I am targeting common OpenGL Framework layer.
I would start by making a tight loop that re-draws your buttons forever. Then, while it's running, use Activity Monitor to do a sample trace of your process. You'll see all the code paths it's taking to draw the buttons. You should be able to see what's happening from there from the names of the routines in the drawing stack. If you can't make sense of it, post the relevant bits and here and we could take a look.
Buttons are draw on CGBitmapContextRef.
Lets say, we have CGBitmapContextRef objected created using
CGContextRef CGBitmapContextCreate (
void *data,
size_t width,
size_t height,
size_t bitsPerComponent,
size_t bytesPerRow,
CGColorSpaceRef colorspace,
CGBitmapInfo bitmapInfo
);
Here void *data, is a pointer to the destination in memory where the drawing is to be rendered.
CGContext API can be then used to perform various operation on data. Thus buttons and background can be draw on it.
Once done we can release the CGContextRef but data is still in memory which can be passed to OpenGLContext(CGLContextObj).
I still do not know how it uploads data to CGLContextObj. Must be using some private api.

WP7 background blur effect

I need to know, which is the best way to blur the background of the Windows Phone 7 app to concentrate the user's attention on a "always on top" popup window.
My idea is:
Make an in-memory screenshot of the background grid (by turning it into a freezable or something).
Add an image that overlaps the background grid, but is below (with the z-index) the popup.
Still I doubt I will be able to overlap the application bar.
At this point, if you have a solution, please advise.
A few pointers for you ...
Unfortunately the Silverlight BlurEffect and other Bitmap effects didn't make it into Window Phone 7, so you will have to implement the blur yourself. This is actually pretty simple, just use a Gaussian Convolution Filter.
To achieve this effect you can capture the visuals of your application into a WriteableBitmap, manipulate the image to create your blur, then overlay this image over your application using a PopUp. I did something similar in a blog post I wrote about fly-out text animations here:
http://www.scottlogic.co.uk/blog/colin/2011/04/metro-in-motion-3-flying-titles/
Find your root visual as follows:
var rootElement = Application.Current.RootVisual as FrameworkElement;
Add a copy of this UI into a popup as follows:
_backgroundMask = new Rectangle()
{
Fill = new SolidColorBrush(Colors.Black),
Opacity = 0.0,
Width = rootElement.ActualWidth,
Height = rootElement.ActualHeight
};
_popupCanvas.Children.Add(_backgroundMask);
_targetElementClone = new Image()
{
Source = new WriteableBitmap(element, null)
};
_popupCanvas.Children.Add(_targetElementClone);
And show it:
_popup.IsOpen = true;
I'll leave you to work out how to blur the background!
As an aside, your will not be able to overlay or capture the application bar visuals. Hide it before performing this transformation.
Finally, blurring the background isn't really very 'Metro'. Are you sure you want to do this?
Instead of blurring just use a semi transparent layer over the top of the page.
You should hide the application bar before trying to create such an effect as you won't be able to place anything on top of it.

How to make an image as transparent in BlackBerry?

I am new to BlackBerry Java application development. My scenario is: In my application a gallery list of images will be displayed in a small icons. If I click on any image it will display in a large mode. Here I need to provide controls like front and back buttons. On clicking on those buttons the background image should change. In addition to that those buttons should be highlighted and the back ground large image should be transparent. How to do this?
Please guide me.
You can use Graphics.setGlobalAlpha() on paint() or to modify bitmap before preview.
Don't forget to set back normal global alpha value after bitmap drawing.

Resources