CODEWITHSUNDEEP
angularaframear.js
Michael Von Bargen
Michael Von Bargen

Reputation: 132

Databinding with A-Frame

I'm building a WebAR with AR.js (A-Frame) and Angular. We have an array of data and want to present the data when the marker with a specific id is shown. Hence we need to set up an A-scene with a-marker and further we want to present an a-entity. 

{
  "id": 6,
  "name": "Hammer",
  "lWartung": "2019-11-30T00:00:00.000Z",
  "nWartung": "2019-11-30T00:00:00.000Z"
}

I tried to set the value attribute of a-marker to maschine.id but that didnt work out. This also didn't work for the entity either.

<a-scene id='scene1' embedded arjs='sourceType: webcam; debugUIEnabled: true; detectionMode: mono_and_matrix; matrixCodeType: 3x3;'>
                <ng-container *ngIf="maschinen.length > 0">
                   <ng-container *ngFor="let maschine of maschinen" > 
                                <pre>
                                   {{maschine | json}}
                                </pre>
                        <a-marker [id] =  "'M'+ maschine.id" type='barcode' >
                                <a-entity [id] = "'E'+ maschine.id"
                                geometry="primitive: plane; width: auto; height: auto"
                                material="color: #213d4a"
                                 >
                            </a-entity>
                        </a-marker>
                    </ng-container>
                </ng-container>

Neither can I set attributes of multi-property components as text for example.

entity.setAttribute('text',{value: '...'})

Upvotes: 0

Views: 364

Answers (2)

Dan
Dan

Reputation: 2705

Few things to consider:

There is a delay between the data-binding and when id is read by a-frame. A-Frame will attempt to read from the id before data-binding happens. The other option is that id was not bound.

Try the following:

<a-marker
  id="placeholder_id"
  [attr.id]="my_id"
</a-marker>

You might only need the attr.id for binding, but if the id is required attribute for the tag, then it must be be in the DOM at runtime. So put a placeholder there and replace it after through attr.id data-binding. The placeholder id will then be overwritten.

Upvotes: 1

Michael Von Bargen
Michael Von Bargen

Reputation: 132

For anyone interested. I found aframe-typescript-toolkit. Wich lets me sets all attributes.

Upvotes: 0

Related Questions