Custom hotspot navigation icons

[dkirkby]

The default up-arrow icon is confusing when some hotspots "go back" while others "go deeper".

Next steps:

• [x] How customizable are these icons?
• [x] What should they be?

[dkirkby]

I can customize the icon by adding the following scene hotspot argument:

  "cssClass": "nav-hotspot move-icon"

with corresponding CSS:

    .nav-hotspot {
        height: 48px;
        width: 48px;
        border: 4px solid #f00;
        border-radius: 8px;
        background-color: #fff;
        background-image: url(img/nav-icons.svg);
    }
    ...
    .move-icon {
        background-position: 0 -48px;
    }

For efficiency, use SVG icons and combine them into a single asset using background-position for indexing.

[dkirkby]

Here are the actual icons, contained in docs/img/nav-icons.svg:

[dkirkby]

I am using Google material icons from https://fonts.google.com/icons?icon.style=Rounded (with weight 700 and size 48 px)

[SamuelBrieden]

Very nice! Sometimes the popup of the Help button is displayed below the Move the robots button, which then covers part of the text. Maybe this can be handled by including "z-index" in the css?

[dkirkby]

Thanks, I will try to reproduce that so I can then experiment with z-index.

[dkirkby]

I was not able to reproduce text below an icon with chrome just now @SamuelBrieden:

Can you give a bit more details on what conditions led to this?

[SamuelBrieden]

Yes, I forgot to say I was using Safari. I confirm that this is not an issue in Chrome, but in Safari it is displayed as

I was using Safari, as Chrome gave me an error initially that it would not support WebGL. However, this can be fixed by ticking "Use hardware acceleration when available" in Chrome system preferences.

[dkirkby]

Thanks @SamuelBrieden. I see now Safari on iOS has the same problem.

[dkirkby]

Ok, I think this is fixed now, for Mac + iOS Safari at least.