I have profile photo of users stored in Firebase and I want to know how I can create a marker with the user's profile photo with an orange border.
I tried some code from the internet and it works but the measurements seem to be wrong and I don't know what I'm doing wrong.
The code I used:
fun setMarkerPhoto(user:User, location: Location){
var bitmapFinal : Bitmap?
if(hasProfilePhoto){
/*val options = RequestOptions()
options.centerCrop()*/
Glide.with(this)
.asBitmap()
/*.apply(options)*/
.centerCrop()
.load(user.image)
.into(object : CustomTarget<Bitmap>(){
override fun onResourceReady(resource: Bitmap, transition: com.bumptech.glide.request.transition.Transition<in Bitmap>?) {
bitmapFinal = createUserBitmapFinal(resource)
markerOptions
.position(LatLng(location!!.latitude, location!!.longitude))
.title("Current Location")
.snippet(address)
.icon(BitmapDescriptorFactory.fromBitmap(bitmapFinal))
mCurrentMarker = googleMap.addMarker(markerOptions)
}
override fun onLoadCleared(placeholder: Drawable?) {
TODO("Not yet implemented")
}
})
}else{
markerOptions
.position(LatLng(mLastLocation!!.latitude, mLastLocation!!.longitude))
.title("Current Location")
.snippet(address)
.icon(BitmapDescriptorFactory.fromBitmap(smallMarker))
mCurrentMarker = googleMap.addMarker(markerOptions)
}
}
private fun createUserBitmapFinal(bitmapInicial: Bitmap?): Bitmap? {
var result: Bitmap? = null
try {
result = Bitmap.createBitmap(150,150, Bitmap.Config.ARGB_8888) //change the size of the placeholder
result.eraseColor(Color.TRANSPARENT)
val canvas = Canvas(result)
val drawable: Drawable = resources.getDrawable(R.drawable.ic_pickup)
drawable.setBounds(0, 0, 150,150) //change the size of the placeholder, but you need to maintain the same proportion of the first line
drawable.draw(canvas)
val roundPaint = Paint(Paint.ANTI_ALIAS_FLAG)
val bitmapRect = RectF()
canvas.save()
if (bitmapInicial != null) {
val shader =
BitmapShader(bitmapInicial, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP)
val matrix = Matrix()
val scale: Float = 200 / bitmapInicial.width.toFloat() //reduce or augment here change the size of the original bitmap inside the placehoder.
// But you need to adjust the line bitmapRect with the same proportion
matrix.postTranslate(5f, 5f)
matrix.postScale(scale, scale)
roundPaint.shader = shader
shader.setLocalMatrix(matrix)
bitmapRect[10f, 10f, 104f+10f]=104f+10f //change here too to change the size
canvas.drawRoundRect(bitmapRect, 56f, 56f, roundPaint)
}
I didn't really understand how to perfectly fit the bitmap image inside the placeholder. My marker looked like this:
also the image wasn't being center cropped even though I mentioned that it should be in the code, where it says Glide.centerCrop()
Also, I'm using GeoFire to display markers of users in a specified radius of the user and for now I can display a simple marker but I want the marker to have that user's profile photo too! How can I do it?
GeoFire Code:
val geoQuery: GeoQuery = geoFire.queryAtLocation(GeoLocation(location.latitude, location.longitude), 0.5)
geoQuery.addGeoQueryEventListener(object : GeoQueryEventListener {
override fun onKeyEntered(key: String, location: GeoLocation) {
println(String.format("Key %s entered the search area at [%f,%f]", key, location.latitude, location.longitude))
Log.i("key entered","User found around you")
val aroundYou = LatLng(location.latitude, location.longitude)
if (markerList != null) {
for (marker in markerList) {
marker.remove()
}
}
otherMarkerOptions
.position(aroundYou)
.title("Current Location")
//.snippet(address)
.icon(BitmapDescriptorFactory.fromBitmap(smallMarker)) //This is a simple marker but i want it to have the user's profile photo
markerList.add(googleMap.addMarker(otherMarkerOptions))
//}
}
Thank you in advance
Edit:
In the line: val drawable: Drawable = resources.getDrawable(R.drawable.ic_pickup)
It's this png:
I want to insert the profile photo of the user on that drawable file and if the user doesn't have a profile photo then only the drawable photo will be visible.
You get the code to transform the bitmap from my code in another question in StrackOverflow. As I mentioned there, I can´t teste the code because i´m only working with flutter right now.
But looking ate your code I might try this:
Add this function:
fun dp(value: Float): Int {
return if (value == 0f) {
0
} else Math.ceil(resources.displayMetrics.density * value.toDouble()).toInt()
}
in your lines:
result = Bitmap.createBitmap(150,150, Bitmap.Config.ARGB_8888);
drawable.setBounds(0, 0, 150,150);
change to:
result = Bitmap.createBitmap(dp(62f), dp(76f), Bitmap.Config.ARGB_8888);
drawable.setBounds(0, 0, dp(150f), dp(150f)) ;
let me know the results.
I am looking at Xamarin Forms capabilities for handling screen interaction at the highest level possible - ideally 1 set of code for both iOS and Andoid. I created a new XF app (Multiplatform -> App in F#, no XAML) and I added this to the default template:
type App() =
inherit Application()
let stack = StackLayout(VerticalOptions = LayoutOptions.Center)
let label = Label(XAlign = TextAlignment.Center, Text = "Welcome to F# Xamarin.Forms!")
do
let tapRecognizer = new TapGestureRecognizer()
let handleTapEvent (sender:Object) (args:EventArgs) =
label.Text <- "Tapped at " + DateTime.Now.ToString()
()
let tapEventHandler = new EventHandler(handleTapEvent)
tapRecognizer.Tapped.AddHandler(tapEventHandler)
label.GestureRecognizers.Add(tapRecognizer)
let doubleTapRecognizer = new TapGestureRecognizer()
doubleTapRecognizer.NumberOfTapsRequired <- 2
let handleDoubleTapEvent (sender:Object) (args:EventArgs) =
label.Text <- "Double Tapped at " + DateTime.Now.ToString()
()
let doubleTapEventHandler = new EventHandler(handleDoubleTapEvent)
doubleTapRecognizer.Tapped.AddHandler(doubleTapEventHandler)
label.GestureRecognizers.Add(doubleTapRecognizer)
stack.Children.Add(label)
base.MainPage <- ContentPage(Content = stack)
The problem is that the tap still happens as part of the double tap. Is there a way to recognize a tap or a double tap (versus tap and double tap)?
Thanks in advance
im trying to change the marker or pin image to the one i download from firebase with alamofireimage. Please i need help
this is my code:
let coordinates = CLLocationCoordinate2D(latitude: milatitud!, longitude: milongitud!)
let annotation = MKPointAnnotation()
annotation.coordinate = coordinates
annotation.title = "JuanJo"
self.map.addAnnotation(annotation)
//print ("4444444444")
for annotation: MKAnnotation in self.map.annotations {
let anView = self.map.view(for: annotation)
if (anView != nil)
{
let url = URL(string: link!)
self.imagen.af_setImage(withURL: url!, placeholderImage: UIImage(named: "usuarioprevia.jpeg"), filter: CircleFilter(), imageTransition: .crossDissolve(0.5), runImageTransitionIfCached: true, completion: nil)
anView?.image = "image downloaded from firebase with alamofireimage"
}
i dont know the last part how to set it = for displaying the image, also i need to resize it. Please help
This is how I setup my UIsearchController
private func setupSearchController() {
let searchResultsController = storyboard!.instantiateViewControllerWithIdentifier(DBSearchOptionControllerIdentifier) as! DBSearchOptionController
searchController = UISearchController(searchResultsController: searchResultsController)
let frame = searchController.searchBar.frame
searchController.searchBar.frame = CGRectMake(0, 50, view.bounds.size.width, 44.0)
searchController.searchResultsUpdater = self
view.addSubview(searchController.searchBar)
searchController.searchBar.text = "mmm"
view.bringSubviewToFront(searchController.searchBar)
searchController.searchBar.bringSubviewToFront(view)
}
This is how it looks after I initialise UISearchController:
This is how it looks when I start typing in UISearchBar:
Why my search bar disappear?
This is very interesting, because now when I stop the app, you can see, that it is there, indeed:-) So why it is not visible?
I made some testing and found a way:
UISearchBar definitely must be inserted into wrapper:
#IBOutlet weak var wrapperView: UIView!
...
wrapperView.addSubview(searchController.searchBar)
The result is following:
I have a loop that goes through data from a book and displays it. The book is not consistent in it's layout so I am trying to display it in two different ways. First way(works fine) is to load the text from that section in to a panel and display it. The second way is to create a new panel (panel creates fine) and then add collapsable panels(nested) to that panel. Here is the code from the else loop.
else if (newPanel == false){
// simpleData is just for the title bar of the new panel
// otherwise the panel has no content
var simpleData:Section = new Section;
simpleData.section_letter = item.section_letter;
simpleData.letter_title = item.letter_title;
simpleData.section_id = item.section_id;
simpleData.title = item.title;
simpleData.bookmark = item.bookmark;
simpleData.read_section = item.read_section;
var display2:readPanel02 = new readPanel02;
//item is all the data for the new text
display2.id = "panel"+item.section_id;
//trace(display2.name);//trace works fine
// set vars is how I pass in the data to the panel
display2.setVars(simpleData);
studyArea.addElement(display2); // displays fine
newPanel = true;
//this is where it fails
var ssPanel:subSectionPanel = new subSectionPanel;
//function to pass in the vars to the new panel
ssPanel.setSSVars(item);
//this.studyArea[newPanelName].addElement(ssPanel);
this["panel"+item.section_id].addElement(ssPanel);
The error I get is: ReferenceError: Error #1069: Property panel4.4 not found on components.readTest and there is no default value.
I have tried setting the "name" property instead of the "id" property. Any help would be greatly appreciated. I am stumped. Thanks.
So here is the solution I came up with. I made the new readPanel create the sub panels. I added the else statement to help it make more sense. The readPanel creates the first sub panel, and for every subsequent need of a sub panel it references the other panel by name and calls the public function in the panel that creates the new sub panel. Here's the code to create the main panel:
else if (newPanel == false){
var display2:readPanel02 = new readPanel02;
studyArea.addElement(display2);
display2.name = "panel"+item.section_id;
display2.setVars(item);
newPanel = true;
}
else{
var myPanel:readPanel02 = studyArea.getChildByName("panel"+item.section_id) as readPanel02;
myPanel.addSubSection(item);
}
And here is the functions in the panel:
public function setVars(data:Section):void
{
myS = data;
textLetter = myS.section_letter;
textLetterTitle = myS.letter_title;
textSection = myS.section_id;
textTitle = myS.title;
myS.bookmark == 0 ? bookmarked = false : bookmarked = true;
myS.read_section == 0 ? doneRead = false : doneRead = true;
showTagIcon();
showReadIcon();
addSubSection(myS);
}
public function addSubSection(data:Section):void{
var ssPanel:subSectionPanel = new subSectionPanel;
ssPanel.setSSVars(data);
myContentGroup.addElementAt(ssPanel, i);
i++;
}