Examples

OUTDATED!

---

Elements

myElement = ticuare.element({ 
  x = 10,                   -- position x
  y = 10,                   -- position y
  w = 20,                   -- width
  h = 20,                   -- height  
  align = {x=1,y=1},          -- this makes default positioning point center of element instead of left-top corner
  colors = {1,2,3},         -- define a colors for default, hover and hold state (in this order)
  border = {                -- define border style
    colors = {4,5,6},       -- same as before
    width = 2               -- a thickness of border
  }
})

Styles

myStyle = ticuare.newStyle({ -- define new style
  colors = {6,4,12},
  border = {
    colors = {4,1,6},
    width = 2
 }
})

myElement = ticuare.element({ 
  x = 10,
  y = 10,
  w = 20,
  h = 20,      
}):style(myStyle) -- applying style on element, myElement:style(myStyle) works too

Text

myElement1 = ticuare.element({
  x=20,y=20,w=200,h=14,
  colors={3,3,3},
  border={
    colors={7,7,7},
    width = 2
  },
  text = {
    display = "TICuare - Uare for TIC-80",  -- Text to display
    colors  = {15,14,9},                    -- colors of text for default, hover and held state
    align={x=1,y=1},                          -- vertical and horizontal centerize 
    offset={x=0,y=0}
    fixed = false                           -- if true all characters have fixed size 
	}
})

myElement2 = ticuare.element({
  x=20,y=40,w=200,h=14,
  colors={3,3,3},
  border={
    colors={7,7,7},
    width = 2
  },
  text = {
    font = true,                  -- write text by user defined font
    print = "TICuare - Uare for TIC-80",
    colors  = {15,14,9},          -- for now it has no effect
    align={x=1,y=1},
    key = 5,             -- make specific color transparent
    gap = 5                    -- size of space
  }
})

Icons

myElement = ticuare.element({
  x = 20, y = 20, w = 8, h = 8,
  icon = {
    sprites = {1,2,3},  -- sprites for default, hover and held state
    offset = {
      x = 0,
      y = 0
  },
    key = 0,            -- default -1 so opaque
    measure = 1,        -- default 1 (scale)
    flip = 0,           -- default 0
    rotate = 0,         -- default 0
    extent = 1          -- default 1
  }
})

Groups

myGroup = ticuare.newGroup()            -- create group and assign

myElement1 = ticuare.element({ 
  x = 64, y = 64, w = 20, h = 10,
  colors = {10,10,10},
  border = {
    colors = {2,2,2},
    width = 2
  },
  onClick = function()                  -- When clicked on this element
    if myElement1:getVisible() then     -- If Element in group is visible
      myGroup:hide()                    -- Hide everything in group
    else
     myGroup:view()                     -- Show everything in group
    end
  end
}):group(myGroup)                       -- add element to group

myElement2 = ticuare.element({
  x = 64, y = 74, w = 20, h = 20,
  colors = {10,10,10},
  border = {
    colors = {8,8,8},
    width = 2
  }
}):group(myGroup)

Dragging

ticuare.element({
  x = 20, y = 60, w = 20, h = 20,
  colors={5,5,5},
  border={
    colors={11,11,11},
    width = 2
  },
  drag = {
    active = true,
    fixed = {
      y = true      --movement is restricted on the vertical axis
    },
    bounds = {      --we just set horizontal bounds
      x={20,60},    -- horizontal position min and max(global)
    }
  }
})

ticuare.element({
  x = 20, y = 20, w = 20, h = 20,
  colors={9,9,9},
  border={
    colors={14,14,14},
    width = 2
  },
  drag = {
    active = true,
    bounds = {
      x={20, 220},
      y={20, 116},
    }
  }
})

Anchors

myElement1 = ticuare.element({
  x = 20, y = 20, w = 20, h = 20,
  colors={5,5,5},
  border={
    colors={11,11,11},
    width = 2
  },
  drag = {          -- no fixed and bounds definition make it free dragable
    active = true,
  }
})

myElement2 = ticuare.element({
  x = 50, y = 20, w = 20, h = 20,
  colors={9,9,9},
  border={
    colors={14,14,14},
    width = 2
  },
}):anchor(myElement1)

Content and scrolling

myElement = ticuare.element({
  x = 20, y = 20, w = 50, h = 50,
    colors={15,15,15},
    border={
      colors={10,10,10},
      width = 2
    },
  drag = {
    active = true,
  },
    content ={
      w = 100,        -- set virtual size of content. Important for scrolling
      h = 100,
      wrap = true     --content is clipped inside element borders.
    }
})

myElement:setContent(function(ref, x, y) -- ref - reference to myElement; x,y top left corner of element inside borders
  print("Content", x+1, y+8)
  print("    of", x+1, y+16)
  print("Element", x+1, y+24)
  --Aleternately:
  -- ticuare.mlPrint("Content\n    of\nElement",x+1,y+8)
end)

Sliders

Lua code

Tic file