Graffiti v1.7.2 - The first IDE for GUIs

• Bugfix: Graffiti crashes when you use it via a monitor and try to change certain attributes.

• Added CheckBox object.
• Added RadioButton object.
• Added Slider object.
• Added DropDownList object.
• Added converter.
• Added color theme "Fire".
• Added "load" attribute to some objects and removed the "getVariableValue" and "getProgressBarValue" functions.
• Improved editor GUI.
• Implemented "mouse_drag" support for objects and the editor.
• Changed the event handling of buttons: The user-function with the button's objID attribute (instead of the param attribute) as its name gets called now.
• Added a list editor and removed the old way of setting the elements of a List object.
• Renamed "elements" attribute of the List object to "Items" (Just trying out whether it looks better that way)
• Renamed most tables to have an uppercase first letter.
• Bugfix: Graffiti crashes after writing something into an Input-object.
• Bugfix: The move- and scale-pixels of a ProgressBar object have an incorrect position when it is facing up.
• Bugfix: The Input object isn't reading correctly when it is inside a container.
• Bugfix: The program crashes when you try to load a non-existent window.

• Bugfix: The ScrollView wan't scrollable in edit mode.
• Added "GraffitiData" folder which contains all data for Graffiti.
• Windows get saved separately now.
• Added Settings-file.
• Added multi-language support.

• Added "toggle" function type for buttons.
• Added ScrollView container (a container with a vertical and/or a horizontal scroll bar).
• Improved the save-file.

• Added container objects.
• Added color themes.
• Renamed almost everything from "screen" to "window".
• Renamed the "Slider" object to "ProgressBar".
• Renamed most "show" functions to "draw".
• Completely changed event handling and displaying of the objects.
• Removed AddOn support.
• Bugfix: Elements of List-objects couldn't be changed. (This time it does work!)

• Included the GraffitiAPI into the main program (i.e. the file doesn't exist anymore: use os.loadAPI("Graffiti") instead of "GraffitiAPI")
• Fixed a bug where input objects acted strange when the program got used as an API.

• Added advanced computer support.
• Removed the automatic adaption of objects to the screen size after making it more complicated and realizing that it didn't do what I wanted anymore.

• Added an API
• Added the attributes "horizontalAlignment" and "verticalAlignment" to the editor. They allow you to automatically move/scale certain objects when the screen-size changes. (More details under instructions/Editor/Design below)
• Bugfix: Lists with enabled "isMultiselect" attribute couldn't be changed.
• As usual, more bugfixes.

• Included AddOn support.
• Bugfix: The elements of the list-object couldn't be changed. (Fixed in v1.3)
• More bugfixes

• The direction of a slider can be changed in "Design"-mode now. (You have to click exactly on the same x- or y-coordinate)
• Improved the input-object. Now it shouldn't matter what kind of keyboard you use.
• Added a "set parent" button. It determines which window will be shown when the "Back"-button gets pressed.
• Bugfix: The "message"-attribute of the list wasn't shown when using the editor.
• Lots of annoying bugfixes.

• Added a screen-editor with (almost) full touchscreen support!
• Added a new object: List
• Improved the Input-object (Now it also supports upper-case letters! Wooho!)
• Probably much more but I forgot what it was.
• Bugfixes

• Initial release

• Same as the v1.4 update.

• initial release

• Overview over the energy in the base.
• Security window (controls the important stuff in the base)
• Using AddOns: Sending rednet-messages and files to other computers.

• Language (right now only "en-US" is supportet)
• Color Theme
• Show/Hide data folder (the data folder will be in the root directory by default and contains all data for Graffiti including the languages, color themes, settings, logs and your projects)

• creating new windows,
• editing their content,
• renaming and deleting existing windows,
• setting a parent (choosing the window that should be shown after pressing the integrated "back" button) and
• setting the startup window (the window that will show up first when starting Graffiti normally).

• Create new objects,
• Move and (depending on the object) scale them.
• Remove objects.
• Edit the attributes of existing objects.
• Enable and disable the default buttons "Back" and "Refresh" by clicking on them.
• Go back to the window manager using the "Options" button.

• click one pixel and then click somewhere else to set the new position/size of the object, or
• drag a pixel.

• text
• After clicking it you can either directly enter a new value or, if you use Graffiti via a monitor, a yellow pixel will appear which indicates that you have to go to the computer and enter the new value.
• Usage example: the "object ID" attribute or the text of the "Text" object (creative, right?).
• number
• Just like the text but only numbers will be accepted.
• Usage example: Setting the maximum size for certain objects.
• list
• Goes through a list and selects the next item each time you click the attribute.
• Usage example: Changing what a button should do when it got clicked.
• bool
• Simply changes a value from true to false, or vice versa.
• Usage example: Set whether an "Input" object should show the input or treat it like a password. (I mean that it shows stars instead of text, if that makes more sense.)
• table
• Switches to the list editor which allows you to edit tables. The list editor itself should be self explanatory so I'm not going to explain it. You can, however write a post or contact me via PM if you do want me to write instructions for it.
• Usage example: Editing the items of a "List" or "DropDownList" object.

• Quit (upper right, always shown)
• Back (upper left, toggleable)
• Refresh (lower right, toggleable)
• Options (lower left, only shown in editor mode)

• Object ID
• Used to identify an object. In this case it's used to call functions or switch windows when it got clicked and it will be returned by Graffiti's "pullEvent" function if it has been loaded as an API.
• Text
• The text of the button. It is always centered and automatically trimmed if the length of the text is longer than the button's width.
• Function type
• Determines what should happen if the button gets clicked. Those function types are available:
• "function" calls the function in the "UserData" table which has the button's object ID as its name. Example: If the button's name is "Testbutton" and it got clicked then the function "UserData.Testbutton" will be called.
• "toggle function" is the same as "function" with the difference that the button will be toggled each time it got clicked. It will also return the new state of the button (again, more explanations in the "Code" section below).
• "switch" is the only type that accesses the "Window" attribute instead of the button's ID. If the button got clicked then the specified window will automatically be shown if it exists.
• Window
• The name of the window that should be switched to if a button with a "swich" function type gets clicked.

• "button_clicked" event
• its ID

• "text"

• Object ID
• It doesn't really have any use for this object but I didn't remove it in case that I needed it later. (Yes, that's an excuse for my lazyness.)
• Load Function
• This attribute exists for all objects that have a dynamic text or content. As I mentioned above the Variable object gets its text from a function. The "Load Funciton" attribute needs to be the name of the function and the function itself needs to be in the UserData table.

• Object ID
• Load Function
• It may only return a number between 0 and 100 but it should at least not crash if the number is negative or bigger than 100.

• Object ID
• This attribute can be used to get the text that has been entered. The text will always be saved in the table "ObjectData.Input" with the Object ID as the key.
• Example: If the user enters "Hi there!" into the Input object with the ID "Testinput" then the table "Input" inside the table "ObjectData" will contain the key "Testinput" with the value "Hi there!".
• Message
• If the user runs Graffiti via a monitor then he has to go to the computer after touching the Input object. The message will be displayed there. (Which means that this attribute is useless in case that you only intend to use it via the computer itself.)
• Is password
• Determines whether the input should be replaced by stars. The text in the ObjectData.Input table isn't affected by this attribute.

• "text_changed" event
• its ID
• the entered text

• Object ID
• Used to identify a list after throwing an event because the item selection has changed.
• Items
• The list/table of items that should be displayed. It can be edited using the List Editor which can be accessed via the Attribute Editor.
• Is multiselect
• Determines whether only one or more items can be selected at once.

• "selection_changed" event,
• its ID,
• the key of the selected/deselected item,
• whether the selected item has been selected or deselected (true means selected and it will always be returned if "Is multiselect" is set to false)

• Object ID
• Text
• Checked by default
• Determines whether… you won't believe it: the CheckBox will be checked on startup.

• "checked" event,
• its ID
• whether it is checked now

• Object ID
• Used to save its state under "ObjectData.RadioButton.<ID>". Therefore you have to give each RadioButton a unique ID. I might implement a feature which gives each object a unique ID automatically.
• Text
• Group
• Only one RadioButton per group can be checked.
• Checked by default
• The RadioButton will be checked on startup if this attribute is set to true. If more than one RadioButton per group has this attribute set to true then the last one will be checked.

• "radio_changed" event,
• its ID

• Object ID
• Minimum Value
• The smallest possible number which will be selected when the cursor is all the way to the left.
• Maximum Value
• The biggest possible number which will be selected when the cursor is all the way to the right. The length of the slider is the difference between the maximum and the minimum value and will automatically be adapted if one of the attributes get changed.

• "slider_changed" event (This one might change in a later version.)
• its ID
• its current value

• Object ID
• Items
• Load Function
• All attributes are equal to the List attributes.

• "selection_changed" event
• its ID
• the key of the selected item

• You keep a better overview over all functions and variables if you work on more than just one project (the current project can be changed in the settings file which you can find under "GraffitiData/Graffiti.cfg").
• It also makes it easier to share programs because you would have to give others only your program and they could download Graffiti by themselves without having to change anything.
• The API provides the function "pullEvent" which allows you to get any kind of event. Except for the Text and Variable objects as well as containers, most objects throw events when the user interacts with them (see "Objects" section above). By editing Graffiti itself you can only get "button_clicked" events.
• If you find a bug or have problems with your program then it's much easier for me to help you because you won't have to specify any changes or the code that is at a certain line number.
• Definitely more, but I can't think of any other ones right now.

• Those which get called when a button gets clicked and
• those which return a value when an object gets loaded.

function UserData.test()
  sleep(1) -- that way the button will be green for one second
end
-- or
UserData.toggleTest = function(state)
  rs.setOutput("front", state)
end

function UserData.getRandomNumber()
  return math.random(100)
end
-- Another example for the "Variable" object
function UserData.getTime()
  return textutils.formatTime(os.time(), true)
end

• How to control your windows,
• how to acces information about objects and
• how to handle events.

os.loadAPI("Graffiti") -- "Graffiti" is the name of the program, you might need to specify a path.

• drawWindow(windowID)
• If you specify the windowID argument then this window will be drawn and set as the current window.
• If you don't specify this argument then the window will simply be redrawn.
• getCurrentWindow()
• Returns the ID of the current window.
• clearScreen()
• Has the same function as the "clear" program.

• Input: The text that the user entered.
• List and DropDownList: A table containing the keys of the selected Items (careful: The table might not exist if the user didn't click it. Always check whether it's null before you try to access it!)
• CheckBox: A boolean value indicating whether the CheckBox is checked or not. (Again, it might be null. Last warning!)
• RadioButton: Contains the ID of the currently selected RadioButton. The key is the "group" attribute. Also make sure that each RadioButton has its own unique ID per group.
• Slider: An integer representing the currently selected value.

os.loadAPI("Graffiti")
local btnTestState = Graffiti.ObjectData.toggleTest or false
rs.setOutput("front", btnTestState) -- example

local function getRandomNumber()
  return math.random(100)
end
Graffiti.UserData.getRandomNumber = getRandomNumber

Graffiti.pullEvent("requested event")

os.loadAPI("Graffiti")
local finished = false
Graffiti.drawWindow("main") -- "main" is just an example, you can name it however you want.
while not finished do -- Loops until the user presses the quit button.
  -- Waits until the user clicks any button or the quit button.
  --(The "quit" event can always be returned even if you specify a requested event!)
  local event, objID = Graffiti.pullEvent("button_clicked")

  if (event == "quit") then -- If the user pressed the quit button, stop the loop.
	finished = true
  elseif (event == "button_clicked") then -- If he clicked a button, check the ID of the button to see which one has been clicked.
	if (objID == "Testbutton") then
	  -- Code that does stuff when a button got pressed goes here.
	elseif (objID == "anotherButton") then
	  -- Code that does stuff when another button got pressed goes here.
	end
  end
end
Graffiti.clearScreen()
os.unloadAPI("Graffiti")

• Each object is a table inside a window or other container, which are a tables too.
• Each object has its own ID, which is automatically generated upon its creation.
• Each object inside its container has a unique ID. That means that objects which are in different containers can have the same ID, but…
• Each object has its own unique path.

{1}

{1, 1}

{1, 1, 1}

• A button (ID: 1, path: {1})
• A Panel (container) (ID: 2, path: {2}) which contains
• another button (ID: 1, path: {2, 1})

local button1 = Windows.Children["yourWindowName"].Children[1]

local button1_viaApi = Graffiti.Windows.Children["yourWindowName"].Children[1]

local button2 = Windows.Children["yourWindowName"].Children[2].Children[1]

os.loadAPI("Graffiti")
local list = Graffiti.Windows.Children["TestWindow"].Children[1]
local listNested = Graffiti.Windows.Children["TestWindow"].Children[2].Children[3]
list.Items = { "Item 1", "Item 2", "Item 4" }

Graffiti.Windows.Children["TestWindow"].Children[1].Items = { "Item 1", "Item 2", "Item 4" }

• "quit": The user clicked the quit-button. Returns no extra parameters. (Important note: You might not like it but this event can always get returned, even if you specify another event type)
• "button_clicked": The user clicked a button. Returns "true" (because the state won't change).
• "button_toggled": The user toggled the state of a button. Returns whether the button got toggled on or off.
• "text_changed": The user entered something into an Input-object. Returns the text that the user entered.
• "selection_changed": The user clicked an element of a list. Returns the text of the selected element.

os.loadAPI("Graffiti")

Graffiti.setVariableValue("newVariable", "couldBeAnything")
Graffiti.setSliderValue("testSlider", 87) -- percent.

local quit = false
while not quit do
  local eventType, objectID, toggleState = Graffiti.pullEvent("button_toggled")
  if (eventType == "quit") then
	quit = true
  else
	print("Button clicked: " .. objectID)
	print("Toggle state: " .. toggleState)
  end
end

os.loadAPI("Graffiti")

Graffiti.setVariableValue("testVariable", "variable-value")
Graffiti.setSliderValue("testSlider", 87)

local monitorSide = "right"
local input = ""
local currentScreen = "mainScreen"

while input ~= "quit" do
  input, screen = Graffiti.getInput(monitorSide)
  currentScreen = (screen == nil) and currentScreen or screen
  print("Selected list-item: " .. GraffitiAPI.selectedItems["testList"])
  print("User input: " .. GraffitiAPI.userInputs["testInput"])
  print("Pressed button: " .. input) -- "param"-value of the pressed button.
end

• setVariableValue(varID, value): Determines which variable should display a certain value.
• setSliderValue(sliderID, value): Determines how much a certain slider is filled.
• showScreen(screen): Shows the window with the given name.
• getInput(monitorSide): Lets the user interact with everything and returns two variables: param and currentScreen; param is the param-attribute of the button that has been pressed and currentScreen is the window that you have to show if you make changes to the screen.

• userInputs
• selectedItems

objects = [[
  <objects>
	<object>
	  objectID=testID
	  objectType=Button
	</object>
  </objects>
]]

• defaultWidth (optional, default: 15)
• defaultHeight (optional, default: 3)
• text

• none, just don't forget to set the objectID

• message

• elements (separate each element with a ";". The example "Hi;there!;How are you?;I'm fine." should be valid.
• isMultiselect

• canScale
• canClick
• defaultWidth (only if canScale or canClick is set to true)
• defaultHeight (only if canScale or canClick is set to true)

• x: The x-coordinate of the object.
• y: The y-coordinate of the object.
• width: The width of the object (Empty if neither clickable nor scaleable).
• height: The height of the object (Empty if neither clickable nor scaleable).
• maxX: The horizontal size of the monitor.
• maxY: The vertical size of the monitor.
• selectedItems: The selected elements of all lists (more information in the editor-tutorial).
• userInputs: The values of all input-objects.

• Add values for your variables.
• Add values for your sliders.
• Create arrays for your lists.
• Create functions for your buttons.

function getVariableValue(variable)
  if (variable == nil or variable.objType ~= "Variable") then
	return
  end

  variableID = variable.varID
  if (variableID == "testVariable") then
	return "Variable";
  elseif (variableID == "Time") then
	return textutils.formatTime(os.time(), true)
  end

  return ""
end

local randomValue = 50

function getSliderValue(slider)
  if (slider == nil or slider.objType ~= "Slider") then
	return
  end

  sliderID = slider.sliderID

  if (sliderID == "testSlider") then
	return 87;
  elseif (sliderID == "randomSlider") then
	return randomValue
  end
end

function userFunctions.setRandomValue()
  randomValue = math.random(100)
end

userLists.testList = { "hi", "there" }

screens = {
  mainScreen = {

  };
}

screens = {
  mainScreen = {

  };

  subScreen = {
	parentScreen="mainScreen";

  };

  superSubScreen = {
	parentScreen="subScreen"
  }
}

• width
• height
• text
• funcType
• param

screens = {
  mainScreen = {
	{ objType="Button", x=2, y=4, width=25, height=3, text="call function!", funcType="function", param=doSomething };
	{ objType="Button", x=2, y=9, width=25, height=3, text="switch to subScreen", funcType="switch", param="subScreen" };
  };

  subScreen = {
	parentScreen="mainScreen";
	
  };
}

function doSomething()
  randomValue = 5
end

• text: The text that you want to show. Nothing else.

• varID

function getVariableValue(variable)
  if (variable == nil or variable.objType ~= "Variable") then
	return
  end

  variableID = variable.varID
  if (variableID == "testVariable") then
	return 42;
  elseif (variableID == "Time") then
	return textutils.formatTime(os.time(), true)
  end

  return ""
end

• length
• direction: either "left", "up", "right" or "down"
• sliderID

function getSliderValue(slider)
  if (slider == nil or slider.objType ~= "Slider") then
	return
  end

  sliderID = slider.sliderID

  if (sliderID == "testSlider") then
	return 87;
  elseif (sliderID == "randomSlider") then
	return randomValue
  end
end

• inputID
• message
• isPassword

screens = {
  mainScreen = {
	{ objType="Input", x=2, y=2, inputID="randomInput", message="Please enter something.", isPassword=false }
  };
}

function doSomething
  userInput = userInputs[randomInput]
end

{
 ["mainWindow"]={
  ["showRefreshButton"]=false,
  ["objType"]="Window",
  ["parent"]="Crafting",
  ["children"]={
   [1]={
	["y"]=2,
	["objID"]="MainPanel",
	["path"]={
	 [1]=1,
	},
	["x"]=2,
	["canScale"]=true,
	["children"]={
	}
	["width"]=14,
	["isContainer"]=true,
	["objType"]="Panel",
	["absoluteX"]=64,
	["absoluteY"]=8,
	["height"]=5,
   }
  }
 }
}