-
Notifications
You must be signed in to change notification settings - Fork 0
4 Messages
Antti Järvinen edited this page Nov 14, 2023
·
54 revisions
Our app sends messages.
You can listen for messages like this:
function message(e) {
console.log(e.data.m, e.data.d); // "app-ready" etc.
}
window.addEventListener("message", message);Minimal example: https://github.com/sumo-apps/messages-example
Messages for adjustments.
{
'adjustment-b': { value:float }, // yellow-blue value changed - value is from -1 to 1
'adjustment-brightness': { value:float }, // brightness value changed - value is from -1 to 1
'adjustment-contrast': { value:float }, // contrast value changed - value is from -1 to 1
'adjustment-exposure': { value:float }, // exposure value changed - value is from -1 to 1
'adjustment-g': { value:float }, // magenta-green value changed - value is from -1 to 1
'adjustment-hue': { value:float }, // hue value changed - value is from -1 to 1
'adjustment-r': { value:float }, // cyan-red value changed - value is from -1 to 1
'adjustment-saturation': { value:float }, // saturation value changed - value is from -1 to 1
'adjustment-temperature': { value:float }, // temperature value changed - value is from -1 to 1
'adjustment-tint': { value:float }, // tint value changed - value is from -1 to 1
'adjustment-vibrance': { value:float } // vibrance value changed - value is from -1 to 1
}Messages for AI.
{
'ai-create': { prompt:string }, // create mode selected
'ai-fix-face': {}, // AI fix face command applied
'ai-generate': { mode:string }, // AI generate button pressed
'ai-instruct': { prompt:string }, // AI instruct mode changed
'ai-prompt': { prompt:string }, // AI prompt was changed via command
'ai-prompt-negative': { prompt:string }, // AI negative prompt was changed via command
'ai-prompt-randomize': {}, // AI prompt was randomised
'ai-prompt-strength': { value:int }, // AI prompt strength was modified
'ai-reimagine': { prompt:string }, // // AI reimagine mode changed
'ai-remove-background': {}, // AI remove background command was performed
'ai-scale-and-enhance': {}, // AI scale and enhance command was performed
'ai-scale-up': {} // AI scale up command was performed
}Messages for API.
{
'api-data': apiObject, // API saving was competed
'api-save': {} // API saving was initiated via command
}Messages for app.
{
'app-alert': { message:string }, // alert notification was created
'app-fullscreen': { enabled:boolean }, // app is set to fullscreen or not
'app-guest': {}, // user is not logged in when checking at start
'app-install': {}, // link for app install was clicked from the modal
'app-language': { language:string }, // language was changed
'app-login': {}, // login attempt was started
'app-login-2fa': {}, // login attempt was started with 2fa
'app-logout': {}, // logout action was performed
'app-message': {}, // message was displayed via commands
'app-notification-all': {}, // all notifications was marked seen
'app-notification-see': { id:string }, // notification was marked as seen
'app-ready': { app:string, mode:string }, // app was initiated
'app-reset': {}, // app was reseted to query parameter defaults
'app-reset-user-data': {}, // user ui data in cloud was cleared
'app-robot': { element:string, action:string }, // automated action was performed
'app-shortcut': { id:string, command:sting }, // shortcut action was performed
'app-start': { parameters:string, defaults:kimonoObject }, // app was started
'app-style': { element:string, parameter:string, value:string }, // element style was updated
'app-user': userData, // user data received from sumo
'app-view-toggle': {}, // app view was toggled between canvas and 3d - requires 3d object
'app-work': workObject, // work loaded from sumo
'app-work-name': { name:string }, // work name updated
'app-work-status': { status:int }, // work status updated
'app-work-delete': workObject // work deleted
}Messages for brush.
{
'brush-angle-random': { value:int }, // brush angle random value was modified - value is from 0 to 100
'brush-color': { hex:hex, rgb:rgbObject }, // main (brush) color was changed
'brush-color-random': { value:int }, // brush color random value was modified - value is from 0 to 100
'brush-color-shortcut': { hex:hex, rgb:rgbObject }, // brush color shortcut added
'brush-drawing-assist': {}, // drawing assist was opened via command
'brush-dynamics': { value:int }, // brush dynamics value was modified - value is from -100 to 100
'brush-dynamics-scale': { value:int }, // brush dynamics scale value was modified - value is from 0 to 100
'brush-fade-in': { value:int }, // brush fade in value was modified - value is from 0 to 512
'brush-fade-out': { value:int }, // brush fade out value was modified - value is from 0 to 512
'brush-gravity': { enabled:boolean }, // brush gravity drawing assist was enabled or disabled
'brush-hue': { value:degrees }, // brush hue was modified - value is from 0 to 360
'brush-ink-fade': { value:int }, // brush ink fade value was modified - value is from 0 to 100
'brush-jitter': { value:int }, // brush jitter value was modified - value is from 0 to 30
'brush-light': { value:int }, // brush lightness was modified - value is from 0 to 30
'brush-livestroke': { enabled:boolean }, // brush live stroke drawing assist was enabled or disabled
'brush-load': { brush:int }, // brush loaded via command - brush is an id of the brush (for ex. 1002)
'brush-opacity': { value:int }, // brush opacity value was modified - value is from 0 to 100
'brush-perspective': { enabled:boolean }, // brush perspective drawing assist was enabled or disabled
'brush-preset': { brushObject }, // brush preset was changed
'brush-preset-delete': { brushObject }, // custom brush preset was deleted
'brush-preset-save': { brushObject }, // custom brush preset was saved
'brush-pressure': { value:int }, // brush pressure value was modified - value is from 0 to 200
'brush-rotate': { value:int }, // brush rotate value was modified - value is from 0 to 100
'brush-saturation': { value:int }, // brush saturation value was modified - value is from 0 to 100
'brush-scale-random': { value:int }, // brush scale random value was modified - value is from 0 to 100
'brush-size': { value:int }, // brush size value was modified - value is from 0 to 256/512
'brush-spacing': { value:int }, // brush spacing value was modified - value is from 0 to 200
'brush-spinner': { enabled:boolean }, // brush spinner drawing assist was enabled or disabled
'brush-symmetry': { points:int }, // brush symmetry drawing assist was modified (amount of points)
}Messages for canvas.
{
'canvas-click': { click:clickObject, layer:layerObject }, // canvas was clicked
'canvas-drop-image': {}, // image was dropped to canvas
'canvas-drop-pdf': {}, // pdf was dropped to canvas
'canvas-drop-zip': {}, // 3d model (zip) was dropped to canvas
'canvas-new': { width:int, height:int, bg:hex } // new canvas was created
}Messages for file.
{
'file-backup': {}, // backup action was perfomed
'file-download': { format:string }, // file was downloaded - format is 'png' or 'jpg'
'file-export-project': { name:string }, // project was exported
'file-import-brush-pack': {}, // brush pack was imported as zip package
'file-import-coloring': {}, // coloring template was imported
'file-import-font-pack': {}, // font pack was imported as zip
'file-import-object': {}, // 3d object was imported as zip
'file-import-image': { type:string }, // image was imported - type is the mime type
'file-import-pdf': {}, // pdf was imported
'file-import-sumo': {}, // sumo zip was imported
'file-load': { file:file, target:string }, // new image file was loaded
'file-new': { width:int, height:int, bg:hex, layers:int }, // new image was created
'file-open-from-device': { file:file }, // file was selected from device
'file-open-object': { url:url }, // 3d object was loaded from url
'file-open-pricing': {}, // pricing link has been clicked
'file-open-url': { url:url }, // image was opened from url
'file-open-work': { slug:string, snapshot:int }, // work is requested from the cloud
'file-open-work-page': { slug:string }, // work page was opened
'file-restore': {}, // work was restored from the latest backup
'file-save-to-cloud': { name:string, status:int, host:string } // work was saved to cloud
}Messages for gradient.
{
'gradient-randomize': {}, // gradient randomize button was pressed
'gradient-reverse': {} // gradient reverse button was pressed
}Messages for image.
{
'image-canvas': { width:int, height:int }, // canvas was resized
'image-convert-to-coloring': {}, // image was converted to coloring
'image-copy': {}, // image copied from all the layers
'image-copy-selection': {}, // image copied from all the layers
'image-create-coloring-project': {}, // coloring project created
'image-crop': { left:int, top:int, right:int, bottom:int }, // image was cropped
'image-export': {}, // image exported via command (3d preview or file download)
'image-export-preview': {}, // preview exported from 3d object
'image-flatten': {}, // image was flattened (all layers put to one)
'image-flip-horizontal': {}, // image was flipped horizontal
'image-flip-vertical': {}, // image was flipped vertical
'image-layer-from-selection': {}, // new layer from selection (merged)
'image-redo': {}, // undo action was performed
'image-reset': {}, // image was reseted to query defaults
'image-rotate-180': {}, // image was rotated 180 degrees
'image-rotate-90': {}, // image was rotated 90 degrees
'image-rotate-90-ccw': {}, // image was rotated 90 degrees counter clockwise
'image-size': { width:int, height:int }, // image was resized
'image-undo': {} // undo action was performed
}Messages for layer.
{
'layer-add': {}, // new layer was added
'layer-add-color': { color:hex }, // new color layer was added
'layer-analyze-colors': {}, // colors was analysed from the layer
'layer-blending-mode': { mode:text }, // blending mode for layer was changed
'layer-brush-texture': {}, // layer was converted into texture brush
'layer-brush-tip': {}, // layer was converted into brush tip
'layer-center': {}, // layer was centered
'layer-clear': {}, // layer content was cleared
'layer-copy': {}, // layer content was copied
'layer-copy-selection': {}, // selection was copied from the layer
'layer-crop-auto': {}, // layer was cropped to content automatically
'layer-cut': {}, // layer content was cut
'layer-delete': {}, // layer was deleted
'layer-duplicate': {}, // layer was duplicated
'layer-export': {}, // layer was exported
'layer-export-all': {}, // all layers were exported
'layer-flip-horizontal': {}, // layer was flipped horizontal
'layer-flip-vertical': {}, // layer was flipped vertical
'layer-generate': {}, // layer list was generated
'layer-hide': { id:int, index:int }, // layer was hided
'layer-import': {}, // image import for layer was initiated
'layer-import-mask': {}, // mask was imported to layer
'layer-import-url': { url:url }, // image was imported from url to layer
'layer-invert-colors': {}, // layer colors were inverted
'layer-lock': { layers: layersObject }, // layer was locked
'layer-merge-down': {}, // layer was merged down
'layer-name': {}, // layer name was changed
'layer-move': {}, // layer was moved via commands
'layer-opacity': { value:int }, // layer opacity was modified
'layer-paste': {}, // clipboard was pasted to layer
'layer-rotate-180': {}, // layer was rotated 180 degrees
'layer-rotate-90': {}, // layer was rotated 90 degrees clockwise
'layer-rotate-90-ccw': {}, // layer was rotated 90 degrees counter clockwise
'layer-scale-to-cover': {}, // layer was scaled to cover the canvas
'layer-scale-to-fit': {}, // layer was scaled to fit inside the canvas
'layer-select': { id:int, layers:layersObject }, // layer was selected
'layer-show': { id:int, index:int }, // layer was made visible
'layer-toggle': {}, // layer was toggled (show/hide) via command
'layer-toggle-lock': {}, // layer was toggled (lock) via command
'layer-unlock': {} // layer was unlocked via command
}Messages for lens.
{
'lens-burn': {}, // lenses was burnt to layer
'lens-clarity': {}, // clarity lens was activated
'lens-clear': {}, // clear lens was activated
'lens-cmyk-halftone': {}, // cmyk halftone lens was activated
'lens-difference-of-gaussian': {}, // difference of gaussian lens was activated
'lens-directional-blur': {}, // directional blur lens was activated
'lens-displace': {}, // displace lens was activated
'lens-hexallate': {}, // hexallate lens was activated
'lens-kaleidoscope': {}, // kaleidoscope lens was activated
'lens-pixelate': {}, // pixelate lens was activated
'lens-spin-blur': {}, // spin blur lens was activated
'lens-update': lensObject // lens was modified
}Messages for modal.
{
'modal-about': {}, // about modal was opened
'modal-adjust-colors': {}, // adjust colors modal was opened
'modal-ai-fix-face': {}, // AI fix face modal was opened
'modal-ai-images-browser': {}, // AI images browser modal was opened
'modal-analyze-colors': {}, // analyze colors modal was opened
'modal-brush-preset-delete': {}, // brush preset modal was opened
'modal-canvas-size': {}, // canvas size modal was opened
'modal-convert-to-coloring': {}, // convert to coloring modal was opened
'modal-image-size': {}, // install image size was opened
'modal-import-coloring': {}, // import coloring modal was opened
'modal-import-mask': {}, // import mask modal was opened
'modal-import-object': {}, // import object modal was opened
'modal-install': {}, // install modal was opened
'modal-lenses': {}, // lenses modal was opened
'modal-login': {}, // login modal was opened
'modal-new': {}, // new modal was opened
'modal-new-coloring': {}, // new coloring modal was opened
'modal-object-browser': {}, // object browser modal was opened
'modal-open-from-cloud': {}, // open from cloud modal was opened
'modal-open-from-device': {}, // open from device modal was opened
'modal-open-from-url': {}, // open from url modal was opened
'modal-photo': {}, // photo modal was opened
'modal-save-to-cloud': {}, // save to cloud modal was opened
'modal-save-to-device': {}, // save to device modal was opened
'modal-share': {}, // share modal was opened
'modal-two-factor-auth': {} // two factor auth modal was opened
}Messages for object.
{
'object-mesh': {}, // mesh was updated via command
'object-ready': {} // object was loaded and generated
}Messages for panel.
{
'panel-close': { panel:string }, // panel was closed via command
'panel-info': { visible:boolean }, // info panel was opened or closed
'panel-layers': { visible:boolean }, // layer panel was opened or closed
'panel-user': { visible:boolean } // user panel was opened or closed
}Messages for select.
{
'select-all': {}, // all pixels was selected
'select-alpha': {}, // all transparent pixels was selected
'select-area': areaObject, // selection was made
'select-deselect': {}, // selection was deselected
'select-duplicate': {}, // content inside selection was duplicated
'select-erase': {}, // content inside selection was deleted
'select-invert': {}, // selection was inverted
'select-magic-fill': {}, // magic fill was performed for selection
'select-mode-color': {}, // tool changed to select, and mode to color
'select-mode-ellipsoid': {}, // tool changed to select, and mode to ellipsoid
'select-mode-lasso': {}, // tool changed to select, and mode to lasso
'select-mode-polygon': {}, // tool changed to select, and mode to polygon
'select-mode-rectangle': {} // tool changed to select, and mode to rectangle
}Messages from shapes.
{
'shape-bring-to-front': {}, // shape was brought to front
'shape-delete': {}, // shape or form was deleted
'shape-send-to-back': {} // shape was sent to back
}Messages for text.
{
'text-add': textObject, // new text was added - see Objects section from the bottom
'text-align-bottom': {}, // text was aligned to bottom of the text box
'text-align-center': {}, // text was aligned to center of the text box
'text-align-left': {}, // text was aligned to left of the text box
'text-align-middle': {}, // text was aligned to middle of the text box
'text-align-right': {}, // text was aligned to right of the text box
'text-align-top': {} // text was aligned to top of the text box
}Messages for tool.
{
'tool-adjustmentbrush': { mode:string }, // tool changed to adjustment brush - mode is '' or 'pro'
'tool-ai': { mode:string }, // tool changed to ai - mode is '' or 'pro'
'tool-brush': { mode:string }, // tool changed to brush - mode is '' or 'pro'
'tool-circle': { mode:string }, // shape tool changed to circle mode - mode is '' or 'pro'
'tool-color': { mode:string }, // select tool changed to color mode - mode is '' or 'pro'
'tool-crop': { mode:string }, // tool changed to crop - mode is '' or 'pro'
'tool-dashedline': { mode:string }, // tool changed to dashed line - mode is '' or 'pro'
'tool-ellipsoid': { mode:string }, // select tool changed to ellipsoid mode - mode is '' or 'pro'
'tool-eraser': { mode:string }, // tool changed to eraser - mode is '' or 'pro'
'tool-eyedropper': { mode:string }, // tool changed to eye dropper - mode is '' or 'pro'
'tool-gradient': { mode:string }, // tool changed to gradient - mode is '' or 'pro'
'tool-lasso': { mode:string }, // select tool changed to lasso mode - mode is '' or 'pro'
'tool-move': { mode:string }, // tool changed to move - mode is '' or 'pro'
'tool-paintbucket': { mode:string }, // tool changed to paint bucket - mode is '' or 'pro'
'tool-polygon': { mode:string }, // shape tool changed to polygon mode - mode is '' or 'pro'
'tool-rectangle': { mode:string }, // shape tool changed to rectangle mode - mode is '' or 'pro'
'tool-secondary': { mode:string }, // selected tool changed to secondary tool - mode is '' or 'pro'
'tool-select': { mode:string }, // tool changed to select - mode is '' or 'pro'
'tool-smudge': { mode:string }, // tool changed to smudge - mode is '' or 'pro'
'tool-star': { mode:string }, // shape tool changed to star mode - mode is '' or 'pro'
'tool-text': { mode:string } // tool changed to text - mode is '' or 'pro'
}Examples of objects returned by some messages.
Example of the API object when saving the default image:
{
"bg": "#ffffff",
"blend": "normal",
"color": "",
"height": 1080,
"mask": "",
"maskmode": 0,
"name": "Untitled",
"obj": "",
"opt": "",
"target": "parent",
"width": 1080,
"image": "data:image/png;base64,..."
}Example of the default area object, when a user creates a selection:
{
"width": 512,
"height": 512,
"top": 256,
"right": 256,
"bottom": 256,
"left": 256
}Example of the brush object.
{
"id": 3010,
"name": "Fire Stripes",
"category": "multicolor",
"url": "https://cdn.sumo.app/brush_packages/multicolor/fire_stripes.lzma",
"image": "https://cdn.sumo.app/brush_packages/multicolor/fire_stripes.png"
}Example of the click object, when user clicks the canvas.
{
"canvas": {
"x": 1095.0078125,
"y": 647.734375
},
"color": [
1,
1,
1,
1
],
"content": {
"x": 784.980712890625,
"y": 435.7842102050781
},
"hit": {
"label": "none"
},
"onlayer": 1,
"onlayer_noalpha": 2
}Kimono global object default values. Can be accessed using kimono[value], for ex. kimono.lang.
{
"app": "paint",
"assist": "",
"backup": false,
"beta": false,
"bg": "#ffffff",
"blend": "normal",
"brush": "1001",
"brushsize": 15,
"buttons": "Start Painting;Open Image:image;Try Coloring:color",
"cdn": "",
"cloud": true,
"color": "",
"commands": "",
"content": "",
"desc": "",
"dev": true,
"dock": true,
"exit": false,
"expo": false,
"height": 1024,
"icon": "/icon.a1488957.png",
"lang": "en",
"layer": 1,
"layers": "",
"lens": "",
"link": "",
"mask": "",
"maskmode": 0,
"message": "",
"messages": false,
"method": "post",
"mode": "dev",
"name": "Untitled",
"obj": "",
"object": "",
"objects": "",
"opt": "",
"panel": "",
"pause": 50,
"prompt": "",
"restore": false,
"robot": false,
"shortcuts": "",
"size": 1024,
"snapshot": null,
"target": "",
"style": "",
"text": "",
"theme": "sumo",
"title": "",
"tool": "brush",
"trash": true,
"url": "",
"video": "https://cdn.sumo.app/videos/sumo_compressed.mp4",
"view": "canvas",
"welcome": false,
"width": 1024,
"work": "",
"zoom": 0.8
}Example of layer object:
{
"active": false,
"deleted": false,
"height": 1080,
"id": 1,
"locked": false,
"matrix": [
1080,
0,
0,
1080,
0,
0
],
"mode": "normal",
"name": "Layer 1",
"opacity": 1,
"transformed": false,
"transformed_angle": 0,
"transformed_height": 1080,
"transformed_width": 1080,
"type": "raster",
"visible": true,
"width": 1080
}Example of layers object with three layer:
[
layerObject,
layerObject,
layerObject,
]Example data when lens is modified:
{
"lens": "directional-blur",
"control": "$blurAmount",
"data": {
"$blurAmount": 36,
"$blurDirection": [
1,
1
],
"$mainInput": "user_sampler"
}
}Example of rgb object:
{
"r": 255,
"g": 0,
"b": 0
}Example of the default text object, when a user clicks on canvas:
{
"form": "text",
"auto_size": false,
"fill_color": [
0.25098039215686274,
0.25098039215686274,
0.25098039215686274,
1
],
"stroke_color": [
0,
0,
0,
1
],
"pos_x": 671.6776733398438,
"pos_y": 194.43267822265625,
"width": 256,
"height": 128,
"params": {
"align_horizontal": "center",
"align_vertical": "middle",
"font_face": "tatami/fonts/default",
"letter_spacing": 0,
"line_height": 1,
"shadow": {
"blur_amount": 0,
"color": [
0,
0,
0,
0
],
"enabled": false,
"offset": [
0.25,
0.25
],
"strength": 0
},
"size": 64,
"text": "Text"
}
}Example of user object:
{
"slug": "laurikou",
"profile_url": "https://sumo.app/users/laurikou",
"description": null,
"license": "edu",
"name": "Lauri",
"email": "l***@koutaniemi.com",
"username": "Laurikou",
"email_verified": true,
"payment_ok": true,
"profile_photo_url": "https://gravatar.com/userimage/151801248/c5503ee9acd901861daccb5e95788ea3.jpeg?size=256",
"is_teacher": true,
"credit_count": 405
}Example of work object:
{
"app": "paint",
"format": "sumo",
"version": 10,
"image": "data:image/png;base64,...",
"date": "2022-09-19T15:53:54.784Z",
"name": "Kuusamo",
"description": "",
"user": userObject,
"data": "data:application/octet-stream;base64,...",
"uiStuff": "{\"currentColor\":\"#004c99\",\"latestColorsUsed\":[\"#004c99\"],...}"
}