index :: ui

ui.canvas

aliases: [ui.cnv]

UI canvas for drawing

available since version: 0.9.7

---

information

Canvas drawing methods are close to Cairo graphic library Basic drawing workflow is: - create line, shape or text - stroke or fill it with color - update image

methods:

• abc draw music in ABC notation.
  parameters:

  • X left-coord in pixel or percents of width
    type: atom
    required: True
    

  • Y top-coord in pixel or percents of height
    type: atom
    required: True
    

  • MUSIC ABC notation
    type: list
    required: True
    

• arc draw arc
  parameters:

  • XC x-center coord in pixel or percents of width
    type: atom
    required: True
    

  • YC y-center coord in pixel or percents of height
    type: atom
    required: True
    

  • RC radius in pixel or percents of width
    type: atom
    required: True
    

  • A0 start angle in degrees or radians
    type: atom
    required: True
    

  • A1 end angle in degrees or radians
    type: atom
    required: True
    

• arrow creates arrow shape
  parameters:

  • X0 x-coord of start point in pixel or percents of width
    type: atom
    required: True
    

  • Y0 y-coord of start point in pixel or percents of height
    type: atom
    required: True
    

  • X1 x-coord of target point in pixel or percents of width
    type: atom
    required: True
    

  • Y1 y-coord of target point in pixel or percents of height
    type: atom
    required: True
    

  • [START] start shape
    type: symbol
    

  • [END] end shape
    type: symbol
    

• bg draws background
  parameters:
  • [COLOR] background color
    type: list
    
• circle create circle shape
  parameters:

  • X x-coord
    type: float
    required: True
    

  • Y y-coord
    type: float
    required: True
    

  • RADIUS radius
    type: float
    required: True
    

• clear clear image
  

• close_path close path and its subpaths
  

• color set current color
  parameters:
  • DATA RGB, RGBA float list or hex or named color
    type: list
    required: True
    

• crestore restore previously saved context (pen type, width, color, matrix etc.)
  

• csave save current drawing context (pen type, width, color, matrix etc.)
  

• curve create bezier-curve shape
  parameters:

  • X0 x0-coord in pixels or percents of width
    type: atom
    required: True
    

  • Y0 y0-coord in pixels or percents of height
    type: atom
    required: True
    

  • X1 x1-coord in pixels or percents of width
    type: atom
    required: True
    

  • Y1 y1-coord in pixels or percents of height
    type: atom
    required: True
    

  • X2 x2-coord in pixels or percents of width
    type: atom
    required: True
    

  • Y2 y2-coord in pixels or percents of height
    type: atom
    required: True
    

  • X3 x3-coord in pixels or percents of width
    type: atom
    required: True
    

  • Y4 y3-coord in pixels or percents of height
    type: atom
    required: True
    

• dash set line dash pattern
  parameters:
  • PATTERN line dash pattern. If empty - reset to solid shape
    type: list
    required: True
    

• dump dumps all object info to Pd console window.
  

• ellipse draw ellipse
  parameters:

  • X left-coord in pixel or percents of width
    type: atom
    required: True
    

  • Y top-coord in pixel or percents of height
    type: atom
    required: True
    

  • WIDTH width
    type: atom
    required: True
    

  • HEIGHT height
    type: atom
    required: True
    

• fill fill shape with color
  parameters:

  • COLOR fill color
    type: atom
    required: True
    

  • [PRESERVE] preserve path after fill. You can call stroke method after that
    type: atom
    

• font set current font
  parameters:

  • FONT font family
    type: symbol
    required: True
    

  • [SIZE] font size
    type: float
    

• font_size set current font size
  parameters:
  • X font size
    type: float
    required: True
    
• icon draw named icon. Pass ? as single argument to dump all icons to Pd window.
  parameters:

  • X left-coord in pixel or percents of width
    type: atom
    required: True
    

  • Y top-coord in pixel or percents of height
    type: atom
    required: True
    

  • SIZE font size
    type: float
    required: True
    

  • ICON icon name. See https://fonts.google.com/icons for full list
    type: symbol
    required: True
    

• image draws image. Note: only PNG images are supported!
  parameters:

  • X left-coord in pixel or percents of width
    type: atom
    required: True
    

  • Y top-coord in pixel or percents of height
    type: atom
    required: True
    

  • PATH path to image file, full or relative to patch
    type: symbol
    required: True
    

  • [SCALE] image scale
    type: float
    

• line create line shape
  parameters:

  • X0 x0-coord in pixels or percents of width
    type: atom
    required: True
    

  • Y0 y0-coord in pixels or percents of height
    type: atom
    required: True
    

  • X1 x1-coord in pixels or percents of width
    type: atom
    required: True
    

  • Y1 y1-coord in pixels or percents of height
    type: atom
    required: True
    

• line_cap set line cap
  parameters:
  • X line cap
    type: symbol
    required: True
    
• line_to add line segment to line shape
  parameters:

  • X x-coord in pixels or percents of width
    type: atom
    required: True
    

  • Y y-coord in pixels or percents of height
    type: atom
    required: True
    

• width set stroke width
  parameters:
  • WIDTH line width
    type: float
    required: True
    
• move_by move current drawing point by relative offset
  parameters:

  • X x relative offset in pixels or percents of width
    type: atom
    required: True
    

  • Y y relative offset in pixels or percents of height
    type: atom
    required: True
    

• move_to move current drawing point to absolute position
  parameters:

  • X x-coord in pixels or percents of width
    type: atom
    required: True
    

  • Y y-coord in pixels or percents of height
    type: atom
    required: True
    

• matrix set 2D transformation matrix
  parameters:

  • XX xx component of the affine transformation
    type: atom
    required: True
    

  • YX yx component of the affine transformation
    type: atom
    required: True
    

  • XY xy component of the affine transformation
    type: atom
    required: True
    

  • YY yy component of the affine transformation
    type: atom
    required: True
    

  • X0 x component of the affine transformation
    type: atom
    required: True
    

  • Y0 y component of the affine transformation
    type: atom
    required: True
    

• musicxml render MusicXML file
  parameters:

  • X x-coord in pixels or percents of width
    type: atom
    required: True
    

  • Y y-coord in pixels or percents of height
    type: atom
    required: True
    

  • FILE absolute or relative to patch filepath of MusicXML file
    type: symbol
    required: True
    

• new_path starts new path
  

• new_subpath starts new subpath, means no line connection between last point and new subpath shape
  

• polar creates polar grid
  parameters:

  • X x-coord of center in pixel or percents of width
    type: atom
    required: True
    

  • Y y-coord of center in pixel or percents of height
    type: atom
    required: True
    

  • [ADIV] number of divisions of 90 degree angle
    type: int
    

  • [NC] number of circles
    type: int
    

  • [CDIST] circle distance
    type: int
    

• polygon create polygon shape
  parameters:

  • X0 x0-coord in pixel or percents of width
    type: atom
    required: True
    

  • Y0 y0-coord in pixel or percents of height
    type: atom
    required: True
    

  • X… x…-coord in pixel or percents of width
    type: atom
    required: True
    

  • Y… y…-coord in pixel or percents of height
    type: atom
    required: True
    

  • XN xn-coord in pixel or percents of width
    type: atom
    required: True
    

  • YN yn-coord in pixel or percents of height
    type: atom
    required: True
    

• pos set UI element position
  parameters:

  • X top left x-coord
    type: float
    required: True
    

  • Y top right y-coord
    type: float
    required: True
    

• qrcode create QR-code shape.
  parameters:

  • X left-coord in pixel or percents of width
    type: atom
    required: True
    

  • Y top-coord in pixel or percents of height
    type: atom
    required: True
    

  • PIXEL pixel size
    type: int
    required: True
    

  • TEXT message
    type: symbol
    required: True
    

• rect create rectangle shape
  parameters:

  • X x-coord in pixels or percents of width
    type: atom
    required: True
    

  • Y y-coord in pixels or percents of height
    type: atom
    required: True
    

  • W width in pixels or percents of width
    type: atom
    required: True
    

  • H height in pixels or percents of height
    type: atom
    required: True
    

• rotate clock-wise rotatation of draw origin
  parameters:
  • X rotation angle
    type: float
    units: deg
    required: True
    
• rpolygon create polygon shape
  parameters:

  • X x-coord of center in pixel or percents of width
    type: atom
    required: True
    

  • Y y-coord of center in pixel or percents of height
    type: atom
    required: True
    

  • N number of vertexes
    type: int
    required: True
    

  • R polygon radius
    type: float
    required: True
    

• scale scale current draw matrix
  parameters:

  • X x
    type: float
    required: True
    

  • [Y] y. If omitted, uses X-value to scale same in both directions
    type: float
    

• star create star shape
  parameters:

  • X x-coord of center in pixel or percents of width
    type: atom
    required: True
    

  • Y y-coord of center in pixel or percents of height
    type: atom
    required: True
    

  • N number of vertexes
    type: int
    required: True
    

  • [R] star radius
    type: float
    

  • [STEP] connection step. If omitted step is auto-calculated
    type: int
    

• stroke stroke shape with color
  parameters:

  • COLOR stroke color
    type: atom
    required: True
    

  • [PRESERVE] preserve path after stroke
    type: atom
    

• text set current text shape
  parameters:

  • X x-coord in pixels or percents of width
    type: atom
    required: True
    

  • Y y-coord in pixels or percents of height
    type: atom
    required: True
    

  • TXT text content
    type: list
    required: True
    

• translate translate draw origin
  parameters:

  • X x offset
    type: float
    required: True
    

  • Y y offset
    type: float
    required: True
    

• update updates drawed image
  

properties:

• @send Get/set send destination
  type: symbol
  default: (null)
  

• @receive Get/set receive source
  type: symbol
  default: (null)
  

• @size Get/set element size (width, height pair)
  type: list
  default: 120 60
  

• @pinned Get/set pin mode. if 1 - put element to the lowest level
  type: bool
  default: 0
  

• @background_color Get/set element background color (list of red, green, blue values in 0-1 range)
  type: list
  default: 0.93 0.93 0.93 1
  

• @border_color Get/set border color (list of red, green, blue values in 0-1 range)
  type: list
  default: 0.6 0.6 0.6 1
  

• @fontsize Get/set fontsize
  type: int
  range: 4..100
  default: 11
  

• @fontname Get/set fontname
  type: symbol
  enum: Courier, DejaVu, Helvetica, Monaco, Times
  default: Helvetica
  

• @fontweight Get/set font weight
  type: symbol
  enum: normal, bold
  default: normal
  

• @fontslant Get/set font slant
  type: symbol
  enum: roman, italic
  default: roman
  

• @label Get/set label text
  type: symbol
  default: (null)
  

• @label_color Get/set label color in RGB format within 0-1 range, for example: 0.2 0.4 0.1
  type: list
  default: 0 0 0 1
  

• @label_inner Get/set label position (1 - inner, 0 - outer).
  type: bool
  default: 0
  

• @label_align Get/set label horizontal align
  type: symbol
  enum: left, center, right
  default: left
  

• @label_valign Get/set label vertical align
  type: symbol
  enum: top, center, bottom
  default: top
  

• @label_side Get/set label snap side
  type: symbol
  enum: left, top, right, bottom
  default: top
  

• @label_margins Get/set label offset in pixels
  type: list
  default: 0 0
  

inlets:

• draw commands
  type: control

keywords:

ui canvas draw

Authors: Serge Poltavsky

License: GPL3 or later