Best way to show many mini versions of painted InkCanvas in UWP - image

I have a problem to depict many mini-versions of my InkCanvas. In my app it is possible to write or draw on a InkCanvas. Now I want to depict all created InkCanvas in a GridView.
But with mini versions in this GridView i can not create enough mini versions.
I tested it with 36 mini versions and after I show one and navigate back, the App crashs everytime by rendering the same mini InkCanvas with the error: Insufficient Memory. So I searched an found this post:
Insufficient memory to continue the execution of the program when trying to initialize array of InkCanvas in UWP
I checked the Memory workload:
var AppUsageLevel = MemoryManager.AppMemoryUsageLevel;
var AppMemoryLimit = MemoryManager.AppMemoryUsageLimit;
and the memory has enough free space. (is this a bug?)
So I tried to render a image from my grid with a InkCanvas but the strokes were not rendered and all pictures were empty. ( can I save Memory this way?)
So now my question is:
Can someone tell me how to solve this problem? And what is the best way?
Thank you very much in advance!
Agredo

If you want to preview your drawings, better way is to render them to bitmap and show this bitmaps in grid instead of multiple complex controls InkCanvas is.
Here is some code to render inks to bitmap from another SO Answer:
CanvasDevice device = CanvasDevice.GetSharedDevice();
CanvasRenderTarget renderTarget = new CanvasRenderTarget(device, (int)inkCanvas.ActualWidth, (int)inkCanvas.ActualHeight, 96);
using (var ds = renderTarget.CreateDrawingSession())
{
ds.Clear(Colors.White);
ds.DrawInk(inkCanvas.InkPresenter.StrokeContainer.GetStrokes());
}
using (var fileStream = await file.OpenAsync(FileAccessMode.ReadWrite))
await renderTarget.SaveAsync(fileStream, CanvasBitmapFileFormat.Jpeg, 1f);
You also need to add Win2D.uwp nuget package to your project.

Related

Mapbox android load Time based tiles

I have a time based tile server with radar data. I want to show this in mapbox.
The only way I get this working is this. Remove Source and layer and create a new source and layer.
mapboxMap.RemoveLayer("layer");
mapboxMap.RemoveSource("source");
RasterSource source = new RasterSource("source", tileset, 256);
mapboxMap.AddSource(source);
RasterLayer layer = new RasterLayer("layer", "source");
mapboxMap.AddLayer(layer);
This is working, bur the problem is that it is flickering. Is there another way to do this. I'm using Naxam.Mapbox.Droid version for Xamarin.
Thanks
Jelle

Xamarin Forms: How to switch images without "flicker"?

[I found this question asked once before on SO about a year ago on but it went unanswered so I am asking again (wasn't sure whether best practice was to create a new question or "bump" the existing one).]
I have a Xamarin Forms application which is receiving a stream of JPEGs over HTTP and I want to keep updating a single Image placeholder with their contents. The frame rate at which I receive the images is very slow by design (maybe 5 fps at most) as this is for a time-lapse photography project. I want to be able to show the stills as an animation (think: taking a photo of a plant once per hour and then "playing" all of the stills to create a lively animation of said plant).
The problem I am having is with "flicker" while swapping one image out for the next. I've tried a variety of approaches, including having two Images (one visible at a time) and only changing the visibility once I'm done loading the latest image (I think this is maybe a naive form of double-buffering?). Have also looked into Motion JPEG, HTTP Keep-Alive, and even using a WebView (I have a valid Motion JPEG endpoint that I can read from). Anyway, nothing that I've found so far has helped reduce the flicker and therefore the "animation" of the stills remains very "jerky" for lack of a better way to put it, with a momentary blank (white) pane between stills. Frankly speaking, it looks like crap.
Here is the gist of the code which fetches the next "frame" and updates the "player" image:
var url = $"{API_BASE_URL}/{SET_ID}/{_filenames[_currentFilenameIndex]}";
var imageBytes = await Task.Run(() => _httpClient.GetByteArrayAsync(url));
var imageBytesStream = new MemoryStream(imageBytes);
var timeComponents = _filenames[_currentFilenameIndex].Split('T')[1].Split('.')[0].Split('-');
var timeText = $"{timeComponents[0]}:{timeComponents[1]}:{timeComponents[2]}";
Device.BeginInvokeOnMainThread(
() =>
{
TimePlaceholder.Text = $"{timeText} (Image {_currentFilenameIndex + 1}/{_filenames.Count})";
ImagePlaceholder.Source = ImageSource.FromStream(() => imageBytesStream);
});
Any suggestions would be greatly appreciated.

Thumbnail of Video recorded using mediacapture throwing exception in winrt phone 8.1

Issue which i am facing is OS takes time to generate thumbnail, if i try to access the thumbnail it is throwing error. Any workaround for this? Can't specify Task.Delay as timings could be different for different phones. I want to show the thumbnail instantaneously.
You can't really speed up processes that take a while to complete. You're at the mercy of the OS to provide you with the thumbnail when it can, but do make sure that you kick off the request as soon as you can.
Make sure all your processes are asynchronous, and the UI will remain responsive during this call. While it processes, you should be showing some sort of an activity indicator to the user, possibly in the form of a TextBlock with the word "Loading..." near a ProgressRing that has its IsActive property set to true.
Home it will help someone. The below code will generate thumb image for video file
var recordedFile =//get StorageFile
var clip = await MediaClip.CreateFromFileAsync(recordedFile);
var comp = new MediaComposition();
comp.Clips.Add(clip);
var thumbstream = await comp.GetThumbnailAsync(TimeSpan.Zero, 320, 240, VideoFramePrecision.NearestKeyFrame);
See this link to get more info about MediaComposition class.

Alternatives to using a MovieClip or BitmapData for an image?

I've been trying for two days to find an alternative to loading an image into my current project. I am using Adobe Flash Professional CS6 as my IDE and Animation program. I would like to be able to display an image in my application. What I am trying to do is have the image display onto the screen, the user enters the PLU associated with the image, and if the PLU is right then they receive a point. I have everything else already to go, but I just can't find an efficient way to deal with loading the image.
Right now I'm using this to accomplish getting my image on the display:
var myDisp:Layer0 = new Layer0();
var bmp:Bitmap = new Bitmap(myDisp);
spDispBox.addChild(bmp);
The above code works just find, but the limitation I can't get around is that I'm going to have to import each image into the library and then consecutively code each part in. I wanted to stick to OOP and streamline this process, I just don't know where I should turn to in order to accomplish my project goal. I'm more than happy to give more information. Thanks in advance, everyone.
July, 26, 2014 - Update: I agree, now, that XML is the way to go. I'm just having a hard time getting the grasp of loading an external XML file. I'm following along, but still not quite getting the idea. I understand about creating a new XML data object, Loader, and URLRequest. It's just loading the picture. I've been able to get output by using trace in the function to see that the XML is loaded, but when I go to add the XML data object to the stage I'm getting a null object reference.
I'm going to try a few more things, I just wanted to update the situation. Thanks again everyone.
it seems like these images are in your FLA library. To simplify your code you can make a singleton class which you can name ImageFactory (factory design pattern) and call that when needing an image which will return a Sprite (lighter than a MovieClip)
spDispBox.addChild( ImageFactory.getImageA() ); // returns a Sprite with your image
and in your ImageFactory
public function getImageA():DisplayObject {
var image:Layer0 = new Layer0(); // image from the FLA library
var holder:Sprite = new Sprite();
holder.addChild( new Bitmap( image ) );
return holder;
}
also recommend using a more descriptive name than Layer0

Best practis for handling bitmaps in android with mono droid / xamarin.android

I am having some memory issues with our android app when handling bitmaps (duh!).
We are having multiple activities loading images from a server, this could be a background image for the activity.
This background image could be the same for multiple activities, and right now each activity is loading its own background image.
This means if the flow is ac1->ac2->ac3->ac4 the same image will be loaded 4 times and using 4x memory.
How do I optimize imagehandling for this scenario? Do I create an image cache where the image is stored and then each activity ask the cache first for images. If this is the case, how do I know when to garbage collect the image from the cache?
Any suggestions, link to good tutorials or similar is highly appreciated.
Regards
EDIT:
When downloading images for the device the exact sizes is used, meaning that if the ui element needs an 100x100 pixel image it gets that size and therefore no need for scaling. So i am not sure about downscaling the image when loading it into the memory. Maybe it is needed to unload images in the activity when moving on the the next and then reload when going back.
One thing you might want to try is scaling down your bitmaps (make a thumbnail) to a size that is more appropriate to your device. It's pretty easy to quickly use up all the RAM on an Android device with a bitmap if you don't scale it down. This recipe shows how to do so on the fly. You could adapt this to save the images to disk.
You could also create your own implementation of the LRUCache to cache the images for your app.
After ready your update I will give you an other tip then.
I can still post the patch too if people want that..
What you need to do with those bitmaps is call them with a using block. That way Android will unload the bitmap as soon as that block is executed.
Example:
using(Bitmap usedBitmap = new Bitmap()){
//Do stuff with the Bitmap here
//You can call usedBitmap.Dispose() but it's not really needed
}
With this code your app shouldn't keep all the used bitmaps in memory.

Resources