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
How to change the visual look of Sticky Notes
How to use UI icons in Sticky Notes and Dialogue
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)
background–color: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.
