Sticky Notes

Sticky Notes

Sticky notes, or often called post-it notes can be useful in workshops and as a versatile editing item. They support HTML and CSS formatting.

Visit an example space https://app.learnbrite.com/dashboard/spaces/visit/spc4ec40bd620cd635bf401c0 

Sticky Notes

Interacting with Notes

How to add Sticky Notes

How to change the visual look of Sticky Notes

How to use UI icons in Sticky Notes and Dialogue

Adding Images to Sticky Notes

Using Notes as Signs (disabling interaction)

Interacting with Notes

Click and hold a note for 1 second to pick it up, then drag the note around to the desired location and click again to drop the note there.

How to add Sticky Notes

Click the top right toolbar icon Pencil+ > Add note

A note will appear floating in front of you. Add your note text and drag it to your desired location in edit mode.

How to change the visual look of Sticky Notes

Click the settings icon for a note

Change innerHTML is the text that appears on the note and can include html tags eg. <img>

Change style using CSS rules, see below for some useful examples including changing the size

Example: notes with no background

Transparent background (great for notes with images)

backgroundcolor:transparent

Example: notes with black background

Black background with white text

background-color:#000000;color:white

Example: notes with a gradient background

Gradient background. Also supports Hex codes for specific colors.

background-image: linear-gradient(to bottom right, red, white);

background-image: linear-gradient(to bottom right, #82b93f, #5ea85e);

Example: notes with a border

Border requires both style and innerHTML settings.

style settings:

width:400px; height:400px; background-color: green;

innerHTML settings:

<div style="width:380px; height:380px; margin:0px; border: 10px solid #000000;"><h1 style="font-family: Arial, Helvetica, sans-serif;color:#000000;padding:10px;">This is a note. You can edit this text in edit mode</h1></div>

Example: notes with semi-transparent grey with white text label size

background:rgba(1,1,1,0.5);height:70px;min-height:70px;color:white

Example: change size of a note

background-color:#ffff6d; font-size:20px; width:800px; height:50px;min-height:50px

How to use UI icons in Sticky Notes and Dialogue

Example: Laser Pointer

<i class="fa fa-bullseye fa-stack-1.5x fa-lg" aria-hidden="true"></i>

Example: Hotspot Marker

<i class="fa fa-map-marker fa-1_5x fa-lg fa-fw fa-stack-1.5x" style="color:007bff;"></i>

A full list of available icons can be found here on the FontAwesome website. You can also get creative with rotating and stacking icons (see https://fontawesome.com/v4.7.0/examples/ )

Adding Images to Sticky Notes

The HTML <img> tag is supported. There are two things you need to add to image tags so they appear in the 3d scene and the popup correctly.

Eg. Change your original image tag

<img height="40" width="139" src="https://cache.learnbrite.com/_assets_/img/japan.jpg">

To include the following two changes, add crossorigin="anonymous" and prepend your url with https://hurl.learnbrite.com/pr/ which will help avoid CORS loading errors.

<img crossorigin="anonymous" height="40" width="139" src="https://hurl.learnbrite.com/pr/https://platform.slack-edge.com/img/add_to_slack.png">

Using Notes as Signs (disabling interaction)

Often Notes can be used as text and signs in spaces as they offer a wide range of CSS styling options. But you don’t want people to interact with them, so a design decision was made to not allow that when sceneryStatic property is set to true.

How useful was this article?

Click on a star to rate it!

We are sorry that this article was not useful for you!

Let us improve this article!

Tell us how we can improve this article?