Loading files into Tatami

Tatami Engine has it's own storage and memory. All the assets we want to use must be uploaded to Tatami before they can be used. There is one generic utility script for uploading anything we need. tatami.utils.loadAsset.

tatami.utils.loadAsset(props)

Target options

Examples

Start over with new image

tatami.utils.loadAsset({
  src: 'https://sumopaint.com/icon.png',
  target: 'reset'
})

Load image as a new Layer

tatami.utils.loadAsset({
  src: 'https://cdn.sumo.app/images/icon.png',
  target: 'new-layer'
})

If you want to load image as a new layer and also apply auto crop, you can use target new-layer-autocrop

Replace existing layer with loaded image

// Let's create new layer (so we will have two)
tatami.api.addLayer()
// Replace top layer with icon.png
tatami.utils.loadAsset({
  src: 'https://cdn.sumo.app/images/icon.png',
  target: 'layer-update 2'
})

Load image as a new coloring template

When image is loaded with coloring target the image will be processed. Tatami will find closed segments which can be filled by tapping on the segments. Also we can brush inside the segments and Tatami makes sure stroke cannot cross over the outline of segments.

tatami.utils.loadAsset({
  src: 'https://url-to-some-black-and-white-photo',
  target: 'coloring'
})

Load project file (.sumo)

tatami.utils.loadAsset({
  src: 'https://url-to-your-project.sumo-or-lzma',
  target: 'project'
})

Load image as a brushtip

Mask is transparent BW image that make parts of the paper appear transparent. For example in the Spinner mode there is mask image to make paper to be a circle.

tatami.utils.loadAsset({
  src: 'https://cdn.sumo.app/brushes/basic/comb.png',
  target: 'brush-tip'
})

Load brush package

Brush package is .lzma file that contains all the data for one brush. In Sumopaint all brush presets are these package files.

// Load the package
tatami.utils.loadAsset({
  src: 'https://cdn.sumo.app/brush_packages/multicolor/sunflower.lzma',
  target: 'brush-package'
})
// Because we loaded multicolor brush package, we want to use white brush color 
// Because brush color modifies the multicolor brushtip image 
tatami.api.setColor('#ffffff')

PS. To create a brush package you can use await tatami.api.getBrushPackage()

Load image as a mask

Mask is transparent BW image that make parts of the paper appear transparent. For example in the Spinner mode there is mask image to make paper to be a circle.

tatami.utils.loadAsset({
  src: 'https://cdn.sumo.app/images/icon.png',
  target: 'new-layer'
})

Loading LUT filter images

Tatami supports standard LUT (Look Up Table) filters. The filter applies to entire image composition and there can be only one LUT active at the time.

const loadFilter = () => {
  // URL to LUT image file
  const lut_src = 'https://cdn.sumo.app/images/filters/lut_gourmet_v1.png'
  tatami.utils.loadAsset({
    src: lut_src, 
    target: 'filter'
  })
}
loadFilter();

Analyzing color palette used in an image

When using analyzer target Tatami is analyze the image and return an array of color codes. To catch the results you need to be listening Tatami messages. Following example creates event listener and then triggers the analyzer.

// Set up listener
window.addEventListener("message", (e) => {
  if (e.data.command = 'analyzer_result' && e.data.params) {
    console.log('Colors found', e.data.params.palette)
  }
});
// Send image to be analyzed
tatami.utils.loadAsset({
  src: 'https://cdn.sumo.app/images/icon.png',
  target: 'analyzer'
})

Using Custom Fonts

Tatami supports custom fonts for the Text tool. For this we need to upload font file into Tatami's internal storage, where text tool can load it from. Any folder in Tatami's storage can be used as loading target.

Let's list storage files first to see what's there.

tatami.api.listStorage()

Let me guess, it was empty?

Now try to upload this font.

tatami.utils.loadAsset({
  src: 'https://cdn.sumo.app/fonts/Barlow-SemiBold.ttf',
  target: 'store drawing/fonts/Barlow-SemiBold.ttf'
})

Then try to list files again and you should see item?

If the file is there we can now use the font.

// Add some text
cmd("text-add:Hello Universe")
// Select Move tool
cmd("tool-move")

Now click on the added text object so that it will become selected, then continue with this

commands.updateText('Now with Barlow', {
  font_face: 'drawing/fonts/Barlow-SemiBold.ttf'
})