Members
-
toolsCache :Array
-
cache of tools
Type:
- Array
-
myStash :Array
-
cache of tools
Type:
- Array
-
framesHistory :Array
-
frames that has been already drawen
Type:
- Array
-
newFrames :Array
-
new frames waiting to draw
Type:
- Array
-
grindingThreshold :number
-
should be equal to requestAnimationFrame fps
Type:
- number
Methods
-
RGBtoHSV(red, green, blue)
-
[RGBtoHSV description]
Parameters:
Name Type Description red
number 0-255
green
number 0-255
blue
number 0-255
Returns:
- {h: number, s: number, v: number}
- Type
- object
-
elementOffset(target, screenX, screenY)
-
Calculate element offset
Parameters:
Name Type Description target
HTMLElement target element
screenX
number coordinate y
screenY
number coordinate x
Returns:
- {x: number, y: number}
- Type
- object
-
uploadFile(File)
-
Uploads file
Parameters:
Name Type Description File
File file
-
randomH(config)
-
Generate random color
Parameters:
Name Type Description config
object config of generator
Returns:
- rgba(number,number,number,1)
- Type
- object
-
Progressbar(config)
-
Progressbar component
Parameters:
Name Type Description config
object config.progressParentEl contain parent element where progress bar will be attached, if null then document.body will be parent element; config.style contains styles for progressbar
-
prepareLoadingElements()
-
Creates HTML Elements of component
-
uploadProgress(e)
-
Event handler for progress
Parameters:
Name Type Description e
object ex.
{total: 100, loaded: 50}
-
uploadCompleteDestructor()
-
Removes HTML Elements of component
-
uploadComplete()
-
Event handler for complete
-
startFakeProgress()
-
Starts fake, never ending progress (better spinner)
-
cancel()
-
Cancel progres bar and remove it as soon as possible
-
Resources(config)
-
Resources manager
Parameters:
Name Type Description config
object -
calculateOffsetXY(target, screenX, screenY)
-
Calculate correct input coordinates fixed to target element offset
Parameters:
Name Type Description target
HTMLElement target element
screenX
number coordinate y
screenY
number coordinate x
Returns:
- {x: number, y: number}
- Type
- object
-
randomName(length)
-
Generate random string
Parameters:
Name Type Description length
number number of letters
Returns:
- speakable string
- Type
- string
-
colorPicker(x, y)
-
Returns color from canvas
Parameters:
Name Type Description x
number screen x
y
number screen y
Returns:
- ex. {r:0, g:0, b:0, a:0}
- Type
- object
-
renderOutputCanvas()
-
SAVE IMAGE EXPORT IMAGE SAVE PHOTO
-
showGrid(config)
-
Draws 100px grid on background.
Parameters:
Name Type Description config
object {size: 1000, step: 100, substep: 10}
-
setScale(z)
-
sets the scale (scale) of sketchpad
Parameters:
Name Type Description z
float precentage of scale (.5 for 50% etc.)
-
setRotation(z)
-
sets the scale (scale) of sketchpad
Parameters:
Name Type Description z
float precentage of scale (.5 for 50% etc.)
-
registerTool(toolId, ToolClass)
-
Register tool in sketchpad before use.
Parameters:
Name Type Description toolId
string unique id for tool
ToolClass
Tool child class of Tool
-
getCurrentTool()
-
[getLastTool description]
Returns:
[description]
- Type
- Tool
-
getCurrentToolId()
-
[getCurrentToolId description]
Returns:
[description]
- Type
- Any
-
getTool(id)
-
Returns registered tool by id.
Parameters:
Name Type Description id
string id of registered tool
-
reset()
-
reset sketchpad
Returns:
[description]
- Type
- undefined
-
canDraw()
-
[canDraw description]
Returns:
[description]
- Type
- boolean
-
clearCanvas()
-
[clearCanvas description]
Returns:
[description]
- Type
- undefined
-
setTool(tool)
-
[setTool description]
Parameters:
Name Type Description tool
Any [description]
-
drawFramePath(config, points)
-
Draw on canvas one path part (ex. part of one finger movement)
Parameters:
Name Type Description config
object config of drawing viewport
points
array points of movement (at least 2 points)
-
drawFrame(draw)
-
Draw one time frame with parts of multiple paths (ex. parts of many fingers movement)
Parameters:
Name Type Description draw
array array of paths with frames
-
drawInputs()
-
DRAWING INPUTS
Grind new inputs into draw frames and render it on screen
! Must be run before room sketch change !
-
drawSketchFrame(draw, sketch)
-
Draw using sketch many time frames
Parameters:
Name Type Description draw
array array of paths with frames
sketch
Sketch sketch with cached tools
-
startPath(e, id, x, y)
-
Start of one input "many inputs can exists in one time" uses toolId = this.getTool(this.getCurrentToolId())
Parameters:
Name Type Description e
Event input event (eg. TouchEvent)
id
any unique identifier in current time
x
integer x position in viewport
y
integer y position in viewport
-
drawPath(e, id, x, y)
-
Movement of one input
Parameters:
Name Type Description e
Event input event (eg. TouchEvent)
id
Any unique identifier in current time (must be initialised by startPath)
x
integer x position in viewport
y
integer y position in viewport
-
endPath(e, id, x, y)
-
End of one input
Parameters:
Name Type Description e
Event input event (eg. TouchEvent)
id
Any unique identifier in current time (must be initialised by startPath)
x
integer x position in viewport
y
integer y position in viewport
-
syncCanvasFrame()
-
Heartbeat of drawing engine
Draws new inputs (phisical Input and waiting Input in current sketch)
-
mainPos(x, y)
-
Calculates/fixes position of direct input methods (TouchEvent, MouseEvent...)
Parameters:
Name Type Description x
integer x position in direct input viewport
y
integer y position in direct input viewport
Returns:
- obect witch coordinates {x: corrx, y: corry}
- Type
- object
-
createEventsDraw()
-
Add event listeners to draw area
-
getCurrentViewport()
-
Returns current viewport
-
sendCurrentViewport()
-
Sends current status of this client viewport
-
sendStringToServer()
-
Convert object into JSON and send it to server
Parameters:
Type Description object Returns:
- Type
- undefined
-
sendMessageToServer()
-
Convert object into JSON and send it to server
Parameters:
Type Description object Returns:
- Type
- undefined
-
receiveMessageFromServer()
-
Receive JSON string from server, convert into object and execute command
Parameters:
Type Description json-string Returns:
- Type
- undefined
-
sendInputs()
-
Sends new inputs to server. This method is executed periodicly and also can be executed on important events like end of input.
Timeout of periodic can be set in:
config.syncNetworkDataFrequency
Longer value causes time shift between clients.
! Must be run before room sketch change !
-
syncNetworkData()
-
Heartbeat of network synchronization
this.syncNetworkDataFrequency
defines interval -
cacheFrame(tool)
-
Cache frame by saving each configuration only once configuration = viewport position + scale + rotation + width + height + tool config
Parameters:
Name Type Description tool
object drawing frame
Returns:
[description]
- Type
- integer
-
getCachedFrame(id)
-
[getTool description]
Parameters:
Name Type Description id
integer [description]
Returns:
[description]
- Type
- object
-
reset()
-
reset sketch
Returns:
[description]
- Type
- undefined
-
grindBulkFrame(bulkFrame, receivingHistory)
-
Gets bulkFrame and grinds it to newFrames stack or to framesHistory if receivingHistory is true
Parameters:
Name Type Description bulkFrame
object [description]
receivingHistory
boolean [description]
Returns:
[description]
- Type
- undefined
-
getCommandsHist()
-
[getCommandsHist description]
Returns:
[description]
- Type
- array
-
getCommandsCurrent()
-
[getCommandsCurrent description]
Returns:
[description]
- Type
- array
-
getToolConfig()
-
Get tool configuration
Returns:
- tool configuration
- Type
- object
-
setToolConfig(config)
-
Sets configuration of tool
Parameters:
Name Type Description config
config tool configuration
Returns:
- this
- Type
- object
-
recalcS(config, s)
-
Recalulates scale
Parameters:
Name Type Description config
Object configuration of drawing client viewport
s
number scale
Returns:
- recalculated scale
- Type
- number
-
drawFramePath(config, points)
-
Draw on canvas one path part (ex. part of one finger movement)
Parameters:
Name Type Description config
object config of drawing viewport
points
array points of movement (at least 2 points)
-
getToolConfig()
-
Get tool configuration
Returns:
- tool configuration
- Type
- object
-
setToolConfig(config)
-
Sets configuration of tool
Parameters:
Name Type Description config
config tool configuration
Returns:
- this
- Type
- object
-
rotate(theta, p)
-
Rotate point over theta angle
Parameters:
Name Type Description theta
float deg angle
p
object {x:.. ,y:..} point
Returns:
- rotated point
- Type
- object
-
setColor(r, g, b, a)
-
Set tool color
Parameters:
Name Type Description r
byte 0-255
g
byte 0-255
b
byte 0-255
a
number 0..1
-
getColor()
-
Get current tool color
Returns:
{r: byte, g: byte, b: byte, a: byte}
- Type
- object
-
getColorStr()
-
Get current tool color as "rgba(0,0,0,1)"" string
Returns:
- rgba() color string
- Type
- string
-
setSize(size)
-
Set size
Parameters:
Name Type Description size
integer tool size
-
getSize()
-
Get current size
Returns:
number
- Type
- integer
-
startInput(id, x, y)
-
Init new tool path (ex. one finger touch)
Parameters:
Name Type Description id
string unique id of path
x
int first x position
y
int first y position
Returns:
- Input
- Type
- Input
-
moveInput(input, x, y)
-
Record path movement
Parameters:
Name Type Description input
Input Input object initialised by Tool::startInput();
x
int current x position
y
int current y position
-
finishInput(input, x, y)
-
Close tool path (ex. one finger touch)
Parameters:
Name Type Description input
Input Input object initialised by Tool::startInput();
x
int last x position
y
int last y position
-
drawFramePath(config, points)
-
Draw on canvas one path part (ex. part of one finger movement)
Parameters:
Name Type Description config
object config of drawing viewport
points
array points of movement (at least 2 points)
-
drawFramePath(config, points)
-
Draw on canvas one path part (ex. part of one finger movement)
Parameters:
Name Type Description config
object config of drawing viewport
points
array points of movement (at least 2 points)
-
setSize(size)
-
Set size
Parameters:
Name Type Description size
integer tool size
-
getSize()
-
Get current size
Returns:
number
- Type
- integer