Assets
OBR.assets
The assets API allows you to interact with the current users storage.
Reference
Methods
uploadImages
async uploadImages(images, typeHint)
Open a folder picker to allow a user to upload the given images
.
Parameters
NAME | TYPE | DESCRIPTION |
---|---|---|
images | ImageUpload[] | The images to upload |
typeHint | ImageAssetType | An optional hint for which image type to use when uploading |
Example
Upload images from a HTMLInputElement element using the ImageUploadBuilder
import OBR, { buildImageUpload } from "@owlbear-rodeo/sdk";
<input
type="file"
onChange={async (e) => {
const files = e.target.files;
if (files) {
const uploads = [];
for (const file of files) {
// Note: we need to create a new file from the contents of the input file.
// This needs to be done due to browser security policies for sharing files
const data = await file.arrayBuffer();
const newFile = new File([data], file.name, { type: file.type });
uploads.push(buildImageUpload(newFile).build());
}
await OBR.assets.uploadImages(uploads);
}
}}
/>;
uploadScenes
async uploadScenes(scenes, disableShowScenes)
Open a folder picker to allow a user to upload the given scenes
.
Parameters
NAME | TYPE | DESCRIPTION |
---|---|---|
scenes | SceneUpload[] | The scenes to upload |
disableShowScenes | boolean | An optional flag to disable showing the Atlas after uploading the new scenes |
Examples
Upload a new empty scene with a hexagon grid using the SceneUploadBuilder
import OBR, { buildSceneUpload } from "@owlbear-rodeo/sdk";
const scene = buildSceneUpload()
.gridType("HEX_HORIZONTAL")
.name("Hex Scene")
.build();
OBR.assets.uploadScenes([scene]);
Upload a new scene with a map from a HTMLInputElement
import OBR, { buildSceneUpload, buildImageUpload } from "@owlbear-rodeo/sdk";
<input
type="file"
onChange={async (e) => {
const files = e.target.files;
if (files) {
const file = files[0];
// Note: we need to create a new file from the contents of the input file.
// This needs to be done due to browser security policies for sharing files
const data = await file.arrayBuffer();
const newFile = new File([data], file.name, { type: file.type });
const image = buildImageUpload(newFile).build();
const scene = buildSceneUpload()
.baseMap(image)
.name("Image Scene")
.build();
await OBR.assets.uploadScenes([scene]);
}
}}
/>;
downloadImages
async downloadImages(multiple, defaultSearch, typeHint)
Open an image picker to allow a user to share images with the extension.
Returns an array of ImageDownloads
Parameters
NAME | TYPE | DESCRIPTION |
---|---|---|
multiple | boolean | An optional boolean, if true the user can pick multiple images |
defaultSearch | string | An optional default value for the search input in the image picker |
typeHint | ImageAssetType | An optional hint for which image type to select |
downloadScenes
async downloadScenes(multiple, defaultSearch)
Open a scene picker to allow a user to share scenes with the extension.
Returns an array of SceneDownloads
Parameters
NAME | TYPE | DESCRIPTION |
---|---|---|
multiple | boolean | An optional boolean, if true the user can pick multiple scenes |
defaultSearch | string | An optional default value for the search input in the scene picker |
Type Definitions
ImageUpload
TYPE |
---|
object |
Properties
NAME | TYPE | DESCRIPTION |
---|---|---|
file | File | Blob | The image file to upload |
name | string | The name of the new image, if left blank and a File input is used the file.name property will be used |
grid | ImageGrid | The default grid settings for this image |
rotation | number | The default rotation for this image in degrees |
scale | Vector2 | The default scale for this image |
text | TextContent | The text displayed over the image |
textItemType | "LABEL" | "TEXT" | The type of text to use for this image. The "LABEL" option will display the text as a label on the bottom of the image. The "TEXT" option will display the text over the top of the image. |
visible | boolean | The default visible settings for this image |
locked | boolean | The default locked settings for this image |
description | string | An optional description of the item used by assistive technology |
SceneUpload
TYPE |
---|
object |
Properties
NAME | TYPE | DESCRIPTION |
---|---|---|
name | string | The name of the scene |
grid | Grid | The grid for the scene |
fog | Fog | The fog settings for the scene |
items | Item[] | The default items for the scene |
baseMap | ImageUpload | An optional map image that will be used as the base for this scene |
thumbnail | File | Blob | An optional image file to use as the initial thumbnail for the scene |
ImageDownload
TYPE |
---|
object |
Properties
NAME | TYPE | DESCRIPTION |
---|---|---|
name | string | The name of the image |
image | ImageContent | The image contents |
grid | ImageGrid | The grid settings for this image |
rotation | number | The rotation for this image in degrees |
scale | Vector2 | The scale for this image |
text | TextContent | The text displayed over the image |
textItemType | "LABEL" | "TEXT" | The type of text to use for this image. The "LABEL" option will display the text as a label on the bottom of the image. The "TEXT" option will display the text over the top of the image. |
visible | boolean | The visible settings for this image |
locked | boolean | The locked settings for this image |
description | string | An optional description of the item used by assistive technology |
type | ImageAssetType | The type of this image |
SceneDownload
TYPE |
---|
object |
Properties
NAME | TYPE | DESCRIPTION |
---|---|---|
name | string | The name of the scene |
grid | Grid | The grid for the scene |
fog | Fog | The fog settings for the scene |
items | Item[] | The items for the scene |
ImageAssetType
TYPE | values |
---|---|
string | "MAP" | "PROP" | "MOUNT" | "CHARACTER" | "ATTACHMENT" | "NOTE" |