View switch code modification

Customization
1

Hi @jan,

I’m thinking of using your code (GitHub - shapespark/shapespark-viewer-api: JavaScript API for interacting with the Shapespark 3D scene.)

#banner {
position: absolute;
top: 30px;
text-align: center;
font-size: 2em;
color: #000000;
width: 100%;
z-index: 10;
}
.fadeout {
visibility: hidden;
opacity: 0;
transition: visibility 0s 3s, opacity 1s linear;
}



to label art paintings in Art galleries.

Is it possible:

  • 'Switching to 'set only during the transition
  • viewName visible until the next transition
  • viewName divided into 2 lines: Name of the Author and title of the Artwork

This would greatly reduce the sticking of texts (bitmaps) on the walls.

Maybe you have some other suggestion?

2

Hi @Vladan. It seems like these would require only small modifications to the code.
Start by replacing the function

function hideBanner(viewName) {
    document.getElementById('banner').classList.add('fadeout')
}

With something like:

function modifyBanner(viewName) {
    var bannerElement = document.getElementById('banner');
    bannerElement.textContent = viewName;
}

To break the line, you can set .innerHtml instead of .textContent and use for example <br /> tag.

3

Thanks for your time and feedback @jan,

In the scene, I plan to link each object with an art painting to the html extension “Change view”. Extending the time to 6 s for fading gives a more elegant solution, in case the visitor continues to move freely. When he clicks on the object (art picture) again, it will be positioned again in front of that picture and the caption of the picture (view) will be visible.

I think I need further explanation for

or a link where I can read more about it.

4

I’m sorry, the forum formatting removed the <br /> tag from my post. What I meant is something like this:

 bannerElement.innerHtml= 'Author name<br />Picture name';
1 Like