I would like to add labels to my map.
I have a bunch of polygons on a map mapping out orchards (using Xamarin forms with Android and iOS custom renders) and would like to add a few labels to each with details. I have tried the below method where you make a custom pin with text used as the marker but this is not ideal as I would like a few lines of text in each and do not need it clickable. I also need this to work in iOS and Android.
Any help would be appreciated.
public Marker AddText(Context context, GoogleMap map, LatLng location, string text, int fontSize, Polygon polygon)
{
try
{
if (text == null)
throw new ArgumentNullException(nameof(text));
if (location == null)
throw new ArgumentNullException(nameof(location));
if (map == null)
throw new ArgumentNullException(nameof(map));
if (context == null)
throw new ArgumentNullException(nameof(context));
if (fontSize <= 0)
throw new ArgumentOutOfRangeException(nameof(fontSize));
var textView = new TextView(context);
textView.Text = text;
textView.TextSize = fontSize;
var paintText = textView.Paint;
var boundsText = new Rect();
paintText.GetTextBounds(text, 0, textView.Length(), boundsText);
paintText.TextAlign = Paint.Align.Center;
paintText.Color = Android.Graphics.Color.White;
paintText.FakeBoldText = true;
var bmpText = Bitmap.CreateBitmap(boundsText.Width() + 10, boundsText.Height(), Bitmap.Config.Argb8888);
var canvasText = new Canvas(bmpText);
canvasText.DrawText(text, canvasText.Width / 2, canvasText.Height - boundsText.Bottom, paintText);
var markerOptions = new MarkerOptions();
markerOptions.SetPosition(location);
markerOptions.SetIcon(BitmapDescriptorFactory.FromBitmap(bmpText));
markerOptions.Anchor(0.5f, 0.5f);
//markerOptions.SetTitle(text);
Marker marker = map.AddMarker(markerOptions);
Constants.markerPolygons.Add(markerOptions.Position.ToString(), polygon);
lstText.Add(marker);
return marker;
}
I think what you are looking for is SkiaSharp.
https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/graphics/skiasharp/
I would also recommend that you consider Xamarin.Forms.GoogleMaps for multiple polygons
https://github.com/amay077/Xamarin.Forms.GoogleMaps
Related
I am trying to read the text from a QRcode image on my mobile app. I am using Xamarin.Forms with ZXing NuGet package.
I have been able to get the file using Xamarin.Essentials FilePicker. But I don't know how to actually read the barcode. I have looked at some stackoverflow solutions and they all seem to be Xamarin.Android based (using BinaryBitmap objects). I need a solution that can work for iOS and UWP as well. Here is what I have so far:
string file = "";
var filePickerOptions = new PickOptions
{
PickerTitle = "Select Barcode Image",
FileTypes = FilePickerFileType.Images
};
var result = await FilePicker.PickAsync(filePickerOptions);
if (result != null)
{
file = result.FullPath;
var res = Decode(file, BarcodeFormat.QR_CODE);
Console.WriteLine(res.Text);
}
public Result Decode(string file, BarcodeFormat? format = null, KeyValuePair<DecodeHintType, object>[] aditionalHints = null)
{
var r = GetReader(format, aditionalHints);
/* I need some function here that will allow me to get the BinaryBitmap from the image file path or something along those lines.*/
var image = GetBinaryBitmap(file);
var result = r.decode(image);
return result;
}
MultiFormatReader GetReader(BarcodeFormat? format, KeyValuePair<DecodeHintType, object>[] aditionalHints)
{
var reader = new MultiFormatReader();
var hints = new Dictionary<DecodeHintType, object>();
if (format.HasValue)
{
hints.Add(DecodeHintType.POSSIBLE_FORMATS, new List<BarcodeFormat>() { format.Value });
}
if (aditionalHints != null)
{
foreach (var ah in aditionalHints)
{
hints.Add(ah.Key, ah.Value);
}
}
reader.Hints = hints;
return reader;
}
https://github.com/Redth/ZXing.Net.Mobile/issues/981. This thread solved it for me. Credit to #jason for this response.
I have a list with objects. Those objects all have properties. I loop through this list in the code behind. Based on a specific property of each item, I decide what view I should create.
That can be a button, picker etc.. At this moment I have reached from server to UI. But right now I need to go back from UI to server, I think that I need binding for that but I am unable to accomplish that. How can I achieve this?
My code:
var stack = new StackLayout()
{
Orientation = StackOrientation.Vertical,
Padding = 5
};
for (int i = 0; i < (BindingContext as CheckListEditViewModel).CheckListItems.Count; i++)
{
var item = (BindingContext as CheckListEditViewModel).CheckListItems[i];
var description = new Label();
description.Text = item.Description;
stack.Children.Add(description);
if ((item.ChecklistItemType == Domain.ChecklistItemType.Number))
{
var numerEntry = new Entry();
numerEntry.Keyboard = Keyboard.Numeric;
stack.Children.Add(numerEntry);
}
}
Content = stack;
I am using Subgurim Map for Setting Marker based on inputed Address. Using GMarker, I am able to load it into Map.
Now this address might be wrong or nearby actual address. So that I am giving opportunity to customer to set actual address with different Marker ( which is bubbled when a button called "Pick Bubble" button )
like,
StringBuilder sb = new StringBuilder();
sb.Append(txtAddress.Text.Trim());
sb.AppendFormat(", {0}", txtCity.Text.Trim());
sb.AppendFormat("- {0}", txtZipcode.Text.Trim());
sb.Append(", Gujarat");
sb.AppendFormat(", {0}", txtCountry.Text.Trim());
GetAddressCordinates googleCordinate = new GetAddressCordinates(Constants.APP_SETTINGS.GoogleMapAPIKey);
Coordinate cordinate = googleCordinate.GetCoordinates(sb.ToString());
GLatLng gLatLng = new GLatLng();
{
gLatLng.lat = double.Parse(cordinate.Latitude.ToString());
gLatLng.lng = double.Parse(cordinate.Longitude.ToString());
}
if (gLatLng != null)
{
GMarker gMarker;
GIcon gIcon = new GIcon();
gIcon.image = ResolveUrl(string.Format("~/Images/ActualFlag.png"));
gIcon.shadow = ResolveUrl(string.Format("~/Images/Shadow.png"));
gIcon.shadowSize = new GSize(30, 30);
gIcon.iconSize = new GSize(24, 24);
GMarkerOptions mOpts = new GMarkerOptions();
mOpts.draggable = true;
mOpts.RaiseOnDrag = true;
mOpts.Animation = GMarkerOptions.AnimationType.Bounce;
mOpts.icon = gIcon;
gMarker = new GMarker(gLatLng, mOpts);
GInfoWindow infoWindow = new GInfoWindow(gMarker, "", false);
GMap1.addInfoWindow(infoWindow);
//GMap1.addGMarker(gMarker);
string jsFunction = string.Format("function(){{ var ev = new serverEvent('dragend', 0); ev.addArg({0}.getPoint().lat()); ev.addArg({0}.getPoint().lng()); ev.send(); }}", gMarker.ID);
GListener listener = new GListener(gMarker.ID, GListener.Event.dragend, "alertame");
GMap1.Add(listener);
GMap1.setCenter(gLatLng);
}
Now I want this two marker position into Button called "NEXT" for manipulate.
How I will get Marker positions ?
Have you tried to put it into GinfoWindow ?
As a string as follows:
dir= "<input type='button' name='next'>"
into:
GInfoWindow infoWindow = new GInfoWindow(gMarker, dir, false);
Hey people, I've this huge problem loading a symbol from a swf file in the application at runtime. I want to load it and pass it as a argument to another class where it could be used further. The symbol name is passed on from the array collection from the "o" object. Can anybody please tell me what's the right way to go about it.. Thanks in advance..!!
Following is the code for reference..
public override function Show(o:ObjectProxy):void
{
var _this:Weather;
var _super:ContentItem;
var item:WeatherItem;
var items:ArrayCollection;
var widgetCount:Number;
var headlineFontSize:int;
var conditionsIconThemeLoader:Loader;
this.m_weatherWidgetContainer = new HBox();
super.Show(o);
_this = this;
_super = super;
(undefined == o["HeadlineFontSize"]) ? headlineFontSize = 20 : headlineFontSize = o["HeadlineFontSize"];
if (undefined != o["direction"])
this.m_textDirection = o["direction"];
if (o.LargeUrl.Forecast is ArrayCollection)
items = ArrayCollection(o.LargeUrl.Forecast);
else
items = new ArrayCollection([o.LargeUrl.Forecast]);
widgetCount = this.m_computeWidgetSpace(items.length);
conditionsIconThemeLoader = new Loader();
conditionsIconThemeLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, function(e:Event):void
{
for(var i:uint = 0; i < widgetCount; i++)
{
var symbolClass:Class = e.currentTarget.loader.contentLoaderInfo.applicationDomain.currentDomain.getDefinition(int(items[i].condition)) as Class;
var symbolInstance:Sprite = new symbolClass();
item = new WeatherItem();
item.Show(items[i], headlineFontSize, symbolInstance, widgetCount);
_this.m_weatherWidgetContainer.addChild(item);
}
});
conditionsIconThemeLoader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, function(e:IOErrorEvent):void
{
Alert.show("Failure loading " + WidgetStylesheet.instance.Weather_Widget_Theme + ".swf");
});
// Attempt to load theme weather icon file
conditionsIconThemeLoader.load(new URLRequest("assets/animation/" + WidgetStylesheet.instance.Weather_Widget_Theme + ".swf"));
super.media.addChild(this.m_weatherWidgetContainer);
}
Heres the answer
public override function Show(o:ObjectProxy):void
{
var _this:Weather;
var _super:ContentItem;
var conditionsIconThemeLoader:Loader;
var loaderContext:LoaderContext;
this.m_weatherWidgetContainer = new HBox();
this.m_weatherWidgetContainer.percentHeight = 100;
this.m_weatherWidgetContainer.percentWidth = 100;
super.Show(o);
_this = this;
(undefined == o["HeadlineFontSize"]) ? this.m_headlineFontSize = 20 : this.m_headlineFontSize = o["HeadlineFontSize"];
if (undefined != o["direction"])
this.m_textDirection = o["direction"];
if (o.LargeUrl.Forecast is ArrayCollection)
this.m_items = o.LargeUrl.Forecast;
else
this.m_items = new ArrayCollection([o.LargeUrl.Forecast]);
conditionsIconThemeLoader = new Loader();
loaderContext = new LoaderContext(false, ApplicationDomain.currentDomain);
conditionsIconThemeLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, this.m_loaderSuccess);
conditionsIconThemeLoader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, this.m_loaderFail);
// Attempt to load theme weather icon file
conditionsIconThemeLoader.load(new URLRequest("assets/animation/" + WidgetStylesheet.instance.Weather_Widget_Theme + ".swf"), loaderContext);
this.m_weatherWidgetContainer.addEventListener(FlexEvent.CREATION_COMPLETE, this.m_drawHorizontalLine);
super.media.addChild(this.m_weatherWidgetContainer);
}
I am creating this "drawing application", where the user can click "preview" and it will take what they made, draw a bitmap, and then I want to split that bitmap into left and right images. I create the first bitmap, encode it as a jpeg, and then use that to cut the left and right out using copypixels. I then reform the images together with a space inbetween in one canvas, and draw that canvas. Everything works fine up there.
When I go to encode the new bitmap, and then offer it to save out, the saved image is blank. I have tested everything up to that point and it all works fine. I see the images on screen, I can save out the first bitmap fine.. but the second one is always blank. Here is some sample code, possibly someone can help me out.
_mainBmd = new BitmapData(_jacketWidth, _jacketHeight);
_mainBmd.draw(_imageHolder);
startEncode(_mainBmd);
private function startEncode(imageBitmapData:BitmapData):void
{
var encoder:JPEGAsyncEncoder = new JPEGAsyncEncoder(100);
encoder.PixelsPerIteration = 150;
encoder.addEventListener(JPEGAsyncCompleteEvent.JPEGASYNC_COMPLETE, encodeDone);
encoder.encode(imageBitmapData);
}
private function encodeDone(event:JPEGAsyncCompleteEvent):void
{
_leftBmd = new BitmapData(sideWidth, sideHeight);
var lRect:Rectangle = new Rectangle(0,0, sideWidth, sideHeight);
var lPoint:Point = new Point(0,0);
_leftBmd.copyPixels(_mainBmd, lRect, lPoint);
_rightBmd = new BitmapData(sideWidth, sideHeight);
var bWidth:Number = 200;
var sWidth:Number = 111;
var rRectWidth:Number = (bWidth/2 + sWidth) * Constants.print_dpi;
var rRect:Rectangle = new Rectangle(rRectWidth, 0, sideWidth, sideHeight);
var rPoint:Point = new Point(0, 0);
_rightBmd.copyPixels(_mainBmd, rRect, rPoint);
var lbm:Bitmap = new Bitmap(_leftBmd);
var rbm:Bitmap = new Bitmap(_rightBmd);
//now combine the two images into one holder with a space in the middle
//left Image
var l_Image:Image = new Image();
l_Image.source = lbm;
//right image
var r_Image:Image = new Image();
r_Image.source = rbm;
var newRender:Canvas = new Canvas();
newRender.clipContent = false;
newRender.minHeight = 0;
newRender.minWidth = 0;
newRender.addChild(l_Image);
r_Image.x = 500;
newRender.addChild(r_Image);
fcBMD = new BitmapData(renderW, renderH);
fcBMD.draw(newRender);
startEncode2(fcBMD);
}
private function startEncode2(imageBitmapData:BitmapData):void
{
var encoder:JPEGAsyncEncoder = new JPEGAsyncEncoder(100);
encoder.PixelsPerIteration = 150;
encoder.addEventListener(JPEGAsyncCompleteEvent.JPEGASYNC_COMPLETE, encode2Done);
encoder.encode(imageBitmapData);
}
private function encode2Done(event:JPEGAsyncCompleteEvent):void
{
_data = event.ImageData;
}
private function onSaveRenderClick(e:MouseEvent):void //save button listener
{
var fileRef:FileReference = new FileReference();
fileRef.addEventListener(Event.SELECT, onSaveComplete);
fileRef.save(_data, 'testImage.jpg');
}
Is there a special reason why you go trough all the loops of creating a Canvas holder and adding Images?
Why not use copyPixels directly on the final BitmapData that you want to encode:
var backgroundColor:uint = 0xffffff;
fcBMD = new BitmapData(renderW, renderH, false, backgroundColor);
var lPoint:Point = new Point(0,0);
var lRect:Rectangle = new Rectangle(0,0, sideWidth, sideHeight);
fcBMD.copyPixels(_mainBmd, lRect, lPoint);
var rRect:Rectangle = new Rectangle(rRectWidth, 0, sideWidth, sideHeight);
var rPoint:Point = new Point(renderW - sideWidth, 0);
fcBMD.copyPixels(_mainBmd, rRect, rPoint);
startEncode2(fcBMD);