Downloads

UIKit Releases

Link

UIKit.tns beta versions - Download most recent

Link

Examples for UIKit - Github Gists

Link

Developer UIKit.tns versions - do not install as module!

Link

Github repo for UIKit.tns - please star

Github Repo

Getting Started

Download the UIKit.tns file here or on the downloads page and send it to your calculator; then press menu, then actions, then install as python module.

UIKit.tns Releases

Copy the example code below to get started and to test if you installed the module correctly

Basics

Initailize

Use the init() function to initailize the drawing surface

Canvas

The canvas is a list that you add conponents to. Adding other non-conponent types may causes errors though.

Main loop

This isint set up for you, but using the example below it has a loop where all logic and rendering is done. Use this for runtime events.

Global Methods

Name	Description	Return Type
init()	Initilizes ti_draw space and sets global pen	None
getStringWidth()	Returns int of how many pixles wide the given text is	Int
getStringHeight()	Return int height of pixels of given text	Int

UIElement

The UIElement is the base class for every component, it includes basic methods and can be used to create your own conponents

Variables

Name	Description	Type
x	X coordinate of UIElement	Int
y	Y coordinate of UIElement	Int
width	Width of UIElement	Int
height	Height of UIElement	Int

Methods

Name	Description	Return Type
isCursor()	Checks if the cursor is over the UIElement	Bool
isClick()	Checks if the UIElement was clicked	Bool

Events

Name	Description	Args Type
cursorEvent	Invoked when the cursor is on the UIElement	None
clickEvent	Invoked when the UIElement is clicked	None

Creating your own elements

This process is advanced, so you will need to have some experience with python inheritance and class structure to get it right.

Define Class

Define the class inheriting UIElement. Disclaimer: You can make an element without UIElement, but it wont have the logic defined in the UIElement class

Class constructor: def __init__(self, x, y, width, height)__

Use the class contructor to define any variables that need to be defined at creation and also use them to define the variables of the UIElement base class, if using it

Rendering

When rendering your conponent, you will have to keep a couple things in mind. 1. use the ti_draw library. 2. work with the width and height paramters so that clicking detection works. 3. Include any custom logic in the render function that needs to be repeatable

So your element can be rendered on screen, use the method name: render(self) so the method is called correctly in the loop

The code below should be a good starting point

Color

The Color class is the class that holds the color values in RGB for parts of UIElements

If a Element has already been defined, use .set() or .mset() to change color instead of assigning a new class

Constructor

Name	Description
Color(R,G,B)	Creates color class and set the RGB values

Variables

Name	Description	Type
R	r value for color	Int
G	g value for color	Int
B	b value for color	Int

Methods

Name	Description	Return Type
set(color)	Sets a new color with the text, see refrence below	None
mset(R, G, B)	Sets a new color with the RGB specified values	None
gset()	Globally sets the color to the drawing canvas	None
get()	Gets the induvidual values of the color	Tuple

Color Codes

Name	RGB code	Color Preview
red	178,31,53
redorange	216,39,53
orange	255,116,53
orangeyellow	255,161,53
yellow	255,240,53
darkgreen	0,117,58
green	0,158,71
lightgreen	22,221,53
darkblue	0,82,165
blue	0,121,252
lightblue	0,169,252
cyan	0,255,255
violet	104,30,126
purple	125,60,181
lightpurple	189,122,246
darkbrown	95,44,10
brown	183,97,39
lightbrown	210,138,90
black	0,0,0
white	255,255,255
gray	160,160,160
lightgray	211,211,211
darkgray	105,105,105

Document

Custom Class for TextArea

Used to do word wrapping and storing the text data as lines

Constructor

Name	Description
Document(x: int, y: int, text: str)	Creates a Document

Variables

Name	Description	Type
lines	holds lines of text	List
algotype	type of algorythim used for word wrap. DONT CHANGE.	Int

Methods

Name	Description	Return Type
calclines(text:str)	Calculates and sets lines variable based on text given	None

Event

Events pass a refrence of the object it is contained in to the listeners

Unless you are creating your own UIElements or modfiying existing ones, you will not need to deal with the Event class, Instead look at Listener

The Event holds Listeners that can all be called at once via InvokeListeners()

Constructor

Name	Description
Event()	Creates class of Event()

Variables

Name	Description	Type
listeners	holds the listeners	List

Methods

Name	Description	Return Type
addListener(listener:Listener)	Adds a listener to the Event	None
removeListener(index:Int)	Removes a listener from the Event	None
removeAll()	Removes all the listeners from the Event	None
InvokeListeners(args: self)	Invokes all the Listeners in listeners	None

Flow chart and explination below

Listener

Listener holds a function refrence that can be used with a Event. you can also specify if it interprets arguments

args are passed by the Event they are connected to and the type is refrenced in the documentation

Constructor

Name	Description
Listener(func: FunctionRef, isargs: Bool)	Creates listener that can be used for an event

Variables

Name	Description	Type
funcref	function refrence for Listener	FunctionRef
isargs	function refrence for Listener	Bool

Methods

Name	Description	Return Type
call(args: Any)	Calls the functiion refrence for the Listener	None

Simple Example

Advanced Example

Label

The label is a static text which can be changed

Constructor

Name	Description
Label(x:Int, y:Int, text:String)	Ceates label and sizes accordingly

Variables

Name	Description	Type
text	Text for label - dont change directly due to automatic sizing, use setText()	String
color	Color for text of the label	Color

Methods

Name	Description	Return Type
setText(text:String)	Sets text of label and height and width accordingly	none
getText()	Gets the current text of the label	String

Button

The button is an UIElement that can call a function from a click and return a variable

Constructors

Name	Description
Button(x:Int, y:Int, width:Int, height:Int, text:String, onClick:FunctionRef, arg:Any)	Creates Button with a function to call and arguments to pass, onClick and arg can be null

Variables

Name	Description	Type
text	Text for button - dont change directly due to automatic sizing	String
onClick	Function refrence that is called when the button is clicked	Function Ref
arg	Argument to be passed through to the onClick method, use a list and then in the reciving function go though it to implement multiple args	Any
callback	Variable returned from the function that is refrenced in onClick	Any
bdcolor	Color of the border of the button	Color
bgcolor	Background Color	Color
txcolor	Color of the text of the button	Color

Events

Name	Description
onClickEvent	Invoked when a click is detected. Uses new system

Methods

Name	Description	Return Type
setText(text)	Sets text of button	none
getText()	Gets the current text of the button	String
setSize(width:Int, height:Int)	Sets size of button	none
getSize()	Gets the current size of the button	Tuple

Example

Textbox

The Textbox is a dymanic element which recives user input

Notes & Use

Edit mode it enterned when the cursor is moved over the Textbox and the enter key is pressed

Exit edit mode with esc and when not on handheld use up arrow

Edit mode holds the main loop for accurate input

Number Mode

Number mode called numMode is a mode for the Textbox that only allows numerical input

Current input will be kept, so clear text if changing during runtime

toggle number mode with setnumMode() function

Constructor

Name	Description
Textbox(x:Int, y:Int, width:Int, height:Int, text:String, isreadonly:Bool, isdymaniccharacterlength:Bool)	Creates a basic Textbox

Variables

Name	Description	Type
numMode	Mode for whether textbox is only numerical input	Bool
text	Text for Textbox - dont change directly due to automatic sizing	String
readonly	Determines wherether user input is taken for the Textbox	Bool
edit	Toggles edit mode - still need cursor to be over the textbox to work if manual change	Bool
CL	Character leghth for Textbox	Int
DCL	Determines wherether dynamic character length is enabeld	Bool

Colors

Colors are variables just like the ones above, just in their own section in this documentation

Name	Description	Default
bdcolor	Color of the border of the textbox	0,0,0
txcolor	Color of the text of the textbox	0,0,0
ndcolor	Color of the backround of the textbox when it is not in edit mode	160,160,160
edcolor	Color of the backround of the textbox when it is in edit mode	210,210,210

Methods

Name	Description	Return Type
setnumMode(toggle:Bool)	Sets state of numerical input	none
setText(text:String)	Sets text of textbox and takes into account DCL but not readonly as readonly is done in render()	none
getText()	Gets the current text of the Textbox	String
setSize(width:Int, height:Int)	Sets size of textbox	none
getSize()	Gets the current size of the textbox	Tuple

Dropdown

The Dropdown is a dymanic element that holds other elements in a dropdown style and can be toggled

Use the items[] list so add or remove elements to the dropdown. x and y coords of the element being added do not matter

If you are using your own elements, they need to inherit UIElement to be rendered on the dropdown

Constructor

Name	Description
Dropdown(x:Int, y:Int, width:Int, height:Int, text:String, iscollapsable:Bool)	Ceates label and sizes accordingly

Variables

Name	Description	Type
text	Text for Dropdown, name	String
items	Holds the elements that will be rendered in the dropdown	List
iscollapsable	Controls if the dropdown can be expanded	Bool
collapsed	Contains the state of the dropdown, whether or not toggeled	Bool
buffer	Controls how much space beetween elements there are in the dropdown	Int

Colors

Colors are variables just like the ones above, just in their own section in this documentation

Name	Description	Default
txcolor	Text Color	0,0,0
bdcolor	Border Color	0,0,0
bgcolor	Backround Color	160,160,160
btcolor	Arrow Color	0,0,0

Methods

Name	Description	Return Type
addElement(element:UIElement)	Adds an element to the dropdown	none
removeElement(index:Int)	Removes an element at the selected index	none
removeAll()	Removes all elements from the dropdown	none

TButton

The toggle button is an Button that can be toggeled

Constructor

Name	Description
TButton(x:Int, y:Int, width:Int, height:Int, text:String, onClick:FunctionRef, arg:any)	Creates Toggle Button with a function to call and arguments to pass, onClick and arg can be null

Variables

Name	Description	Type
text	Text for button - dont change directly due to automatic sizing	String
onClick	Function refrence that is called when the button is clicked	Function Ref
arg	Argument to be passed through to the onClick method, use a list and then in the reciving function go though it to implement multiple args	Any
callback	Variable returned from the function that is refrenced in onClick	Any
toggle	State of whether or not the button is toggeled	Bool

Events

Name	Description
onClickEvent	Invoked when a click is detected. Uses new system

Colors

Colors are variables just like the ones above, just in their own section in this documentation

Name	Description	Default
bdcolor	Border Color	0,0,0
bgcolor	Background Color	140,140,140
oncolor	Color of toggle in on state	160,160,160
ofcolor	Color of toggle in off state	0,0,0
txcolor	text Color	0,0,0

Methods

Name	Description	Return Type
setText(text:String)	Sets text of toggle button	none
getText()	Gets the current text of the toggle button	String
setSize(width:Int, height:Int)	Sets size of toggle button	none
getSize()	Gets the current size of the toggle button	Tuple

Panel

The Panel is a UIElement that inherits other elemtns like the dropdown, just not in a orginizational pattern

Coordinates of UIElements added to a Panel are interpreted as local coordinates of the panel

Only Elements inheriting UIElement can be added to panels as they require the coordinate system integrated into UIElement

Constructor

Name	Description
Panel(x:Int, y:Int, width:Int, height:Int, isRender:Bool)	Creates a Panel and choose whether or not to be rendered

Variables

Name	Description	Type
items	List that stores items to be rendered	List
hasBorder	Whether or not the Panel has a border	Bool
isRender	Whether or not the Panel and its items are rendered - do not change directly, use functions	Bool

Methods

Name	Description	Return Type
toggleRender()	toggles the render state of the Panel	none
setRender(state:Bool)	set the render state of the panel	none
addElement(element:UIElement)	Adds element to the list and with adjusted coordinates	none
removeElement(index:Int)	Removes an element in the list at the specified index	none
removeAll()	Removes all items in the list	none

Slider

The Slider is an UIElement that lets users choose a value within a range of values

The slider is toggeled with enter

Constructor

Name	Description
Slider(x:Int, y:Int, width:Int, height:Int, min:Double, max:double, value:Double, isInt:Bool)	Creates a slider with the desired arguments

Variables

Name	Description	Type
rangemax	Maximum range of slider	Double
rangemin	Mininum range of slider	Double
value	Value of slider	Double
ischange	Whether or not the slider is receiving input	Bool
isint	Whether or not the slider returns only ints	Bool

Methods

Name	Description	Return Type
evalValue()	Evaluates the coordinates of the slider knob and updates the value accordingly. This method is ran in render so it does not need to be called.	None

Events

Name	Description
onChangeValue	Invoked when the a new value is detected, passes value of slider
onSelectValue	Invoked when ischange is toggled off, passes value of slider

Colors

Name	Description	Default
bgcolor	Backround color	160,160,160
bdcolor	Border Color	0,0,0
slcolor	Color of knob when disabled	105,105,105
selcolor	Color of knob when enabeld	0,0,0
lncolor	Color of slider knob	0,0,0
maxtxcolor	Color of max value text	0,0,0
mintxcolor	Color of min value text	0,0,0
valbxcolor	Color of value box when the slider is enabeld	150,150,150
valbxcolor	Color of text in value box	0,0,0

Slider Example

Colorpicker

The color picker is an UIElement that allows the user to select a color for another UIElement via a GUI Interfacee

THE COLOR PICKER IS NOT RENDERED BY DEFUALT, use the open() method

crcolor's color is initially inherited by the constructor

Constructor

Name	Description
Colorpicker(x:Int, y:Int, width:Int, height:Int, func:Func Ref, arg:Any)	Creates a Colorpicker that is ready to be displayed

Variables

Name	Description	Type
isopen	Defualt is false, change to true when ready to render	Bool
crcolor	Color currently selected, use this or getColor() for color refrence	Color

Methods

Name	Description	Return Type
getColor()	return curent color of color picker	Color
open()	opens the color picker	None

Events

Name	Description
onSelect	Invoked when a color is selected
onOpen	Invoked when the colorpicker is opened via the method open()
onRandom	Invoked when the random button is clicked

Colors

Colors are variables just like the ones above, just in their own section in this documentation

Name	Description	Default
bdcolor	Border Color	255,255,255
bdcolor	Background Color	105,105,105

Example

TextArea

The TextArea is an UIElement that allow for multi-line user input

The TextArea uses a custom UIKit class: Document to store data.

Constructor

Name	Description
TextArea(x:Int, y:Int, width:Int, height:Int)	Creates a TextArea that is ready to be displayed

Variables

Name	Description	Type
edit	Whether TextArea is in edit mode	Bool
readonly	Whether TextArea is in editable	Bool
text	Current text of TextArea as a string	String
document	Color currently selected, use this or getColor() for color refrence	Document

Methods

Name	Description	Return Type
addText(newtext: str)	Appends text to the TextArea	None
setText(newtext: str)	Sets text of the TextArea	None

Events

Name	Description
onTextChange	Invoked when User Input is taken
onEdit	Invoked when edit mode is enabled
onExit	Invoked when edit mode is disabled

Colors

Colors are variables just like the ones above, just in their own section in this documentation

Name	Description	Default
bdcolor	Border Color	255,255,255
txcolor	Text Color	0,0,0
bdcolor	Background Color	230,230,230