CODEWITHSUNDEEP
archilogic3d.io
Bogdan Hoyaux
Bogdan Hoyaux

Reputation: 11

Adding floor plan button

I have a pretty basic request regarding archilogic with the 3d.io appeditor.

I need to add the floor plan button in the lower left corner to this space:

https://spaces.archilogic.com/model/Panoraman/hvaj2t1s?modelResourceId=375c42b6-dd27-4e13-94f9-a822b4d31f15

Does anybody know I must add for the button to appear and how to set the view point?

Much appreciated.

Upvotes: 1

Views: 126

Answers (1)

Jessie Koffi
Jessie Koffi

Reputation: 176

It looks like that particular icon is not in the default appcreator css. You can add it by customizing the camera mode menu a little bit, e.g. like this:

 <div class="camera-mode">
    <div class="btn camera active"
         onclick="document.querySelector('.waypoints').classList.toggle('hide'), this.classList.toggle('active')">
    </div>
    <div class="btn bird"
         id="btn-bird"
         onclick="document.querySelector('[camera]').components['tour'].updateViewPoint({position:{y:7}, rotation:{x:-60}}),document.querySelectorAll('.camera-mode .btn:not(.camera)').forEach(function(e){e.classList.remove('active')}),  this.classList.add('active')">
    </div>
    <div class="btn person active"
         id="btn-person"
         onclick="document.querySelector('[camera]').components['tour'].updateViewPoint({position:{y:1.6}, rotation:{x:0}}),document.querySelectorAll('.camera-mode .btn:not(.camera)').forEach(function(e){e.classList.remove('active')}), this.classList.add('active')">
    </div>
    <div class="btn floorplan"
         id="btn-floorplan"
         onclick="document.querySelector('[camera]').components['tour'].updateViewPoint({position:{y:10}, rotation:{x:-90}}),document.querySelectorAll('.camera-mode .btn:not(.camera)').forEach(function(e){e.classList.remove('active')}),  this.classList.add('active')">
    </div>
  </div>
</div>

and adding some css for an SVG icon

.btn.floorplan {
  background-image:url(https://spaces-static.archilogic.com/build/180201-164834-458aa7c/e3d/ui/icon-floorplan-black.svg)
}
.btn.floorplan.active {
  background-image:url(https://spaces-static.archilogic.com/build/180201-164834-458aa7c/e3d/ui/icon-floorplan-blue.svg)
}

Demo here

For optimal results, adjust the position parameter to your model and host the icon-floorplan-black.svg and icon-floorplan-blue.svg icons somewhere, that link might not stay up forever

Upvotes: 1

Related Questions