How to add name label in Indoor location map?

Hi,

Coding for iOS App:
I am integrating Indoor location estimote functionality. I am able to configure 4 beacons and get the indoor location positioning JSON and added in the code. I am able to display the indoor positioning path when I want on the beacons placed. In the indoor location map path, I can see the beacon icons, further I want to add a beacon name near to the beacon icon. My question is, How to add a name label in the indoor location map path?

Thank you in advance!

You can use the drawObjectInBackground:withPosition:identifier: method.

The “object” parameter can by any UIView, e.g., UILabel.

And for the “position” parameter: you can retrieve a list of the beacons + their positions in the location via ESTLocation's beacons property. It returns an array of ESTPositionedBeacon objects, and ESTPositionedBeacon has a position property which you can pass to the drawObject method.

Lastly, the “identifier” parameter is there in case you want to later remove the label via the removeObjectWithIdentifier: method, or move it. Should be unique per each object.

(The “drawObject InTheBackground” part means that the avatar will be drawn “on top” of the label. You can also use “drawObject InTheForeground” if that fits your app better.)

Thank you for the reply. I have another doubt. Can we get this position from JSON we exported and use for labeling , since this JSON already contains the beacon positions ? Will that work as well?

Sure! The easiest way to do that would be probably to create the ESTLocation from the JSON file, via the ESTLocationBuilder parseFromJSON: method. The Examples bundled with the Indoor SDK show exactly how to do that.

Once you have the ESTLocation, you can use the beacons property like I mentioned in the previous post.

Hi heyplotr,

I am trying to keep labels for every beacon on the ESTBeaconViewController.

But I am getting run time error. Kindly help me. I have posted my code here.

NSArray *beaconsArray = self.location.beacons; 
ESTPositionedBeacon *estPB = beaconsArray[0]; 
ESTOrientedPoint *estOrientedPointorentation = estPB.position; 
[self.locationView drawObjectInBackground:self.locationView withPosition:estOrientedPointorentation identifier:@"sdb"];

Kindly clarify my doubts below.

  1. For identifier “sdb” is literal string I have given, do we need to set this identifier at any where in the code or storyboard.

  2. I tried to place labels at each beacon in the ESTBeaconViewControl

    UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(estPB.position.x, estPB.position.y ,150,40)];
    label.text = roomNames[3];
    
    [self.locationView addSubview:label];
    

But all labels are place at same place i.e overlapping each other.

As my original post says, I want to place labels at each beacon on the view without overlapping and right coordinates.
Please advice.

Hi heyplotr,

I am working on the same project as Martin worked.

I am following this post and trying to keep lables for every beacon on the ESTBeaconViewController.
But I am getting run time error. Kindly help me. I have posted my code here.

NSArray *beaconsArray = self.location.beacons;
ESTPositionedBeacon *estPB = beaconsArray[0];
ESTOrientedPoint *estOrientedPointorentation = estPB.position;
[self.locationView drawObjectInBackground:self.locationView withPosition:estOrientedPointorentation identifier:@"sdb"];

Please clarify my doubts below.

  1. “sdb” is a static string I have given. Do we need to set this identifier any where in the code?

  2. I tried to place a labels by the following code

    UILabel *lable1 = [[UILabel alloc] initWithFrame:CGRectMake(- estPB.position.x, estPB.position.y, 150,40)];
    lable1.text = roomNames[0];
    [ self.locationView addSubview:lable1];
    

But its placed all the labels at the top of the view not at the place of beacon in the view.

What should we do to place name of the beacons beside each beacon on the view?

The problem is here:

[self.locationView drawObjectInBackground:self.locationView withPosition:estOrientedPointorentation identifier:@"sdb"];

The object passed to the drawObject method should be the UI element you want to draw inside the location view (e.g., a UILabel), and not the location view itself. It should be something like this instead:

// this label will be 150 points wide and 40 points high
UILabel *label1 = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 150, 40)];
label1.text = roomNames[0];

[self.locationView drawObjectInBackground:label1 withPosition:estOrientedPointorentation identifier:@"sdb"];

As for your questions:

(1) The identifier string can be anything, but should be unique for each object you’ll be drawing via the “drawObject” methods. It’s only use if you later want to remove the object from the location view, or move it to some other place.

(2) See the code above. You should not use the [self.locationView addSubview:lable1];, and instead add the label to the location view via the “drawObject” method.

This is working. Thank you very much!

Hi heyplotr,

Thanks for your reply its working…

we had got one problem, while placing labels besides the beacons on the wall of the view. The label text is placed on the wall and unable to read the text.

Is there any possibility to change position of the label just beneath the wall of the view?

PFA for the reference.

Hi heyplotr,
yes facing the similar issue as mentioned by soujanya. Label is overlapping and no way to move at the correct positions. Changing x or y axis, doesn’t change the label position at all. Could you please advise please?

for(int iloop = 0; iloop< beaconsArray.count ; iloop++) // for 4 beacons placed    
    {
    ESTPositionedBeacon *estPositionedBeacons = beaconsArray[iloop];

      ESTOrientedPoint *estOrientedPoint = estPositionedBeacons.position;
        // trying to add + 50 in the x and y axis, but there is no change happening
        CGRect frame = CGRectMake((estOrientedPoint.x) + 50.0, (estOrientedPoint.y) + 50.0,  200.0, 40.0);
        
        UILabel *lable = [[UILabel alloc] initWithFrame:frame];
        lable.text = appdelegate.roomNameArray[iloop];
        lable.font = [UIFont fontWithName:@"Arial" size:9.0];
        [self.locationView drawObjectInBackground:lable withPosition:estOrientedPoint identifier:appdelegate.roomNameArray[iloop]];
        
    }

This:

CGRect frame = CGRectMake((estOrientedPoint.x) + 50.0, (estOrientedPoint.y) + 50.0,  200.0, 40.0);

… only changes the label itself, not its position, and the first two arguments are ignored by the location view anyway. What you actually need to change is the estOrientedPoint, i.e.:

ESTOrientedPoint *estOrientedPoint = estPositionedBeacons.position;
ESTOrientedPoint *estOrientedPoint2 = [ESTOrientedPoint
    pointWithX:estOrientedPoint.x + 50.0
             y:estOrientedPoint.y + 50.0
   orientation:estOrientedPoint.orientation];
CGRect frame = CGRectMake(0, 0,  200.0, 40.0);
// ...
[self.locationView drawObjectInBackground:lable
                             withPosition:estOrientedPoint2
                               identifier:appdelegate.roomNameArray[iloop]];

Hi Heyplotr,

Thank you so much we got it. We have another doubt please look it.

We need to change the colour of the beacons on the view with the physical colour of the beacons in the room

Is it possible to change the colour of the beacons on the location view, if possible please suggest the approach to follow

Technically, it’s not possible to change the color directly, but there’s a slight trick which should work:

  1. Upload the location you’ve built to the Estimote Cloud:

    http://estimote.github.io/iOS-Indoor-SDK/Classes/ESTIndoorLocationManager.html#//api/name/addNewLocation:success:failure:

  2. The, fetch it back from the cloud:

    http://estimote.github.io/iOS-Indoor-SDK/Classes/ESTIndoorLocationManager.html#//api/name/fetchUserLocationsWithSuccess:failure:

The location that comes back should have colors assigned to the beacons.