docs

2022-07-18 16:45:59 +02:00
parent 8157c025ea
commit 9d10e95fae
10 changed files with 468 additions and 178 deletions
--- a/Basalt/objects/Animation.lua
+++ b/Basalt/objects/Animation.lua
@@ -182,14 +182,14 @@ return function(name)
                    end
                end
                if(duration~=nil)and(#t>0)then
-                    self:changeFG(duration, timer or 0, table.unpack(t))
+                    self:changeTextColor(duration, timer or 0, table.unpack(t))
                end
            end
-            if(data["backgroundColor"]~=nil)then 
-                local duration = xmlValue("duration", data["backgroundColor"])
-                local timer = xmlValue("time", data["backgroundColor"])
+            if(data["background"]~=nil)then 
+                local duration = xmlValue("duration", data["background"])
+                local timer = xmlValue("time", data["background"])
                local t = {}
-                local tab = data["backgroundColor"]["color"]
+                local tab = data["background"]["color"]
                if(tab~=nil)then
                    if(tab.properties~=nil)then tab = {tab} end
                    for k,v in pairs(tab)do
@@ -197,7 +197,7 @@ return function(name)
                    end
                end
                if(duration~=nil)and(#t>0)then
-                    self:changeBG(duration, timer or 0, table.unpack(t))
+                    self:changeBackground(duration, timer or 0, table.unpack(t))
                end
            end
            if(data["text"]~=nil)then 
@@ -285,7 +285,7 @@ return function(name)
            return self
        end,

-        changeBG = function(self, duration, timer, ...)
+        changeBackground = function(self, duration, timer, ...)
            local colors = {...}
            timer = timer or 0
            _OBJ = obj or _OBJ
@@ -297,7 +297,7 @@ return function(name)
            return self
        end,

-        changeFG = function(self, duration, timer, ...)
+        changeTextColor = function(self, duration, timer, ...)
            local colors = {...}
            timer = timer or 0
            _OBJ = obj or _OBJ
--- a/Basalt/objects/Timer.lua
+++ b/Basalt/objects/Timer.lua
@@ -18,9 +18,8 @@ return function(name)
        end;

        setValuesByXMLData = function(self, data)
-            local f
            if(xmlValue("time", data)~=nil)then  timer = xmlValue("time", data) end
-            if(xmlValue("repeat", data)~=nil)then  timer = xmlValue("repeat", data) end
+            if(xmlValue("repeat", data)~=nil)then  savedRepeats = xmlValue("repeat", data) end
            if(xmlValue("start", data)~=nil)then  if(xmlValue("start", data))then self:start() end end
            if(xmlValue("onCall", data)~=nil)then self:onCall(getBaseFrame():getVariable(xmlValue("onCall", data))) end
            return self
--- a/docs/_sidebar.md
+++ b/docs/_sidebar.md
@@ -20,7 +20,7 @@
    - [Radio](objects/Radio)
    - [Scrollbar](objects/Scrollbar)
    - [Slider](objects/Slider)
-    - [Text Field](objects/Textfield)
+    - [Textfield](objects/Textfield)
    - [Animation](objects/Animation.md)
    - [Thread](objects/Thread)
    - [Timer](objects/Timer)
--- a/docs/objects/Animation.md
+++ b/docs/objects/Animation.md
@@ -18,8 +18,8 @@ Adds a new function to an animation
 #### Usage:
 * This will set the button position to 3,3, waits 1 second, then sets position to 4,4, waits 2 seconds, and then sets the position to 5,5
 ```lua
-local mainFrame = basalt.createFrame():show()
-local testButton = mainFrame:addButton():show()
+local mainFrame = basalt.createFrame()
+local testButton = mainFrame:addButton()
 local aAnimation = mainFrame:addAnimation():add(function() testButton:setPosition(3,3) end):wait(1):add(function() testButton:setPosition(1,1,"r") end):wait(2):add(function() testButton:setPosition(1,1,"r") end)
 aAnimation:play()
 ```
@@ -34,8 +34,8 @@ Sets a wait timer for the next function after the previous function got executed

 #### Usage:
 ```lua
-local mainFrame = basalt.createFrame():show()
-local testButton = mainFrame:addButton():show()
+local mainFrame = basalt.createFrame()
+local testButton = mainFrame:addButton()
 local aAnimation = mainFrame:addAnimation():add(function() testButton:setPosition(3,3) end):wait(1):add(function() testButton:setPosition(1,1,"r") end):wait(2):add(function() testButton:setPosition(1,1,"r") end)

 aAnimation:play()
@@ -51,8 +51,8 @@ Plays the animation

 #### Usage:
 ```lua
-local mainFrame = basalt.createFrame():show()
-local testButton = mainFrame:addButton():show()
+local mainFrame = basalt.createFrame()
+local testButton = mainFrame:addButton()
 local aAnimation = mainFrame:addAnimation():add(function() testButton:setBackground(colors.black) end):wait(1):add(function() testButton:setBackground(colors.gray) end):wait(1):add(function() testButton:setBackground(colors.lightGray) end)

 aAnimation:play() -- changes the background color of that button from black to gray and then to lightGray 
@@ -67,8 +67,8 @@ Cancels the animation
 #### Usage:

 ```lua
-local mainFrame = basalt.createFrame():show()
-local testButton = mainFrame:addButton():show()
+local mainFrame = basalt.createFrame()
+local testButton = mainFrame:addButton()
 local aAnimation = mainFrame:addAnimation():add(function() testButton:setBackground(colors.black) end):wait(1):add(function() aAnimation:cancel() end):wait(1):add(function() testButton:setBackground(colors.lightGray) end)

 aAnimation:play()
@@ -87,30 +87,17 @@ Sets the object which the animation should reposition/resize
 #### Usage:

 ```lua
-local mainFrame = basalt.createFrame():show()
-local testButton = mainFrame:addButton():show()
+local mainFrame = basalt.createFrame()
+local testButton = mainFrame:addButton()
 local aAnimation = mainFrame:addAnimation():setObject(testButton)
 ```

-## move
-Moves the object which got defined by setObject
-
-#### Parameters: 
-1. `number` x coordinate
-2. `number` y coordinate
-1. `number` time in seconds
-1. `number` frames (how fluid it should look like)
-1. `table` object - optional, you could also define the object here
-
-#### Returns: 
-1. `animation` Animation in use
-
-#### Usage:
-
 ```lua
-local mainFrame = basalt.createFrame():show()
-local testButton = mainFrame:addButton():show()
-local aAnimation = mainFrame:addAnimation():setObject(testButton):move(15,3,1,5):play()
+local mainFrame = basalt.createFrame()
+local testButton = mainFrame:addButton("buttonToAnimate")
+```
+```xml
+<animation object="buttonToAnimate" />
 ```

 ## move
@@ -119,19 +106,24 @@ Moves the object which got defined by setObject
 #### Parameters: 
 1. `number` x coordinate
 2. `number` y coordinate
-1. `number` time in seconds
-1. `number` frames (how fluid it should look like)
-1. `table` object - optional, you could also define the object here
+3. `number` duration in seconds
+4. `number` time - time when this part should begin (offset to when the animation starts - default 0)
+5. `table` object - optional, you could also define the object here

 #### Returns: 
 1. `animation` Animation in use

 #### Usage:
-
+* Takes 2 seconds to move the object from its current position to x15 y3
 ```lua
-local mainFrame = basalt.createFrame():show()
-local testButton = mainFrame:addButton():show()
-local aAnimation = mainFrame:addAnimation():setObject(testButton):move(15,3,1,5):play()
+local mainFrame = basalt.createFrame()
+local testButton = mainFrame:addButton("buttonToAnimate")
+local aAnimation = mainFrame:addAnimation():setObject(testButton):move(15,3,2):play()
+```
+```xml
+<animation object="buttonToAnimate" play="true">
+<move><x>15</x><y>6</y><duration>2</duration></move>
+</animation>
 ```

 ## offset
@@ -140,9 +132,9 @@ Changes the offset on the object which got defined by setObject
 #### Parameters: 
 1. `number` x offset
 2. `number` y offset
-1. `number` time in seconds
-1. `number` frames (how fluid it should look like)
-1. `table` object - optional, you could also define the object here
+3. `number` duration in seconds
+4. `number` time - time when this part should begin (offset to when the animation starts - default 0)
+5. `table` object - optional, you could also define the object here

 #### Returns: 
 1. `animation` Animation in use
@@ -150,9 +142,14 @@ Changes the offset on the object which got defined by setObject
 #### Usage:

 ```lua
-local mainFrame = basalt.createFrame():show()
-local subFrame = mainFrame:addFrame():show()
-local aAnimation = mainFrame:addAnimation():setObject(subFrame):offset(1,12,1,5):play()
+local mainFrame = basalt.createFrame()
+local subFrame = mainFrame:addFrame("frameToAnimate")
+local aAnimation = mainFrame:addAnimation():setObject(subFrame):offset(1,12,1):play()
+```
+```xml
+<animation object="frameToAnimate" play="true">
+<offset><x>1</x><y>12</y><duration>1</duration></offset>
+</animation>
 ```

 ## size
@@ -161,26 +158,32 @@ Changes the size on the object which got defined by setObject
 #### Parameters: 
 1. `number` width
 2. `number` height
-1. `number` time in seconds
-1. `number` frames (how fluid it should look like)
-1. `table` object - optional, you could also define the object here
+3. `number` duration in seconds
+4. `number` time - time when this part should begin (offset to when the animation starts - default 0)
+5. `table` object - optional, you could also define the object here

 #### Returns: 
 1. `animation` Animation in use

 #### Usage:
-
 ```lua
-local mainFrame = basalt.createFrame():show()
-local testButton = mainFrame:addButton():show()
-local aAnimation = mainFrame:addAnimation():setObject(testButton):size(15,3,1,5):play()
+local mainFrame = basalt.createFrame()
+local testButton = mainFrame:addButton("buttonToAnimate")
+local aAnimation = mainFrame:addAnimation():setObject(testButton):size(15,3,1):play()
+```
+```xml
+<animation object="buttonToAnimate" play="true">
+<offset><w>15</w><h>3</h><duration>1</duration></offset>
+</animation>
 ```

-## textColoring
-Changes the text colors of an object
+## changeText
+Changes the text while animation is running

 #### Parameters: 
-1. `color|number` multiple colors
+1. `table` multiple text strings - example: {"i", "am", "groot"}
+2. `number` duration in seconds
+3. `number` time - time when this part should begin (offset to when the animation starts - default 0)

 #### Returns: 
 1. `animation` Animation in use
@@ -188,7 +191,113 @@ Changes the text colors of an object
 #### Usage:

 ```lua
-local mainFrame = basalt.createFrame():show()
-local testButton = mainFrame:addButton():show()
-local aAnimation = mainFrame:addAnimation():setObject(testButton):textColoring(colors.black, colors.gray, colors.lightGray):play()
+local mainFrame = basalt.createFrame()
+local testButton = mainFrame:addButton("buttonToAnimate")
+local aAnimation = mainFrame:addAnimation():setObject(testButton):changeText({"i", "am", "groot"}, 2):play()
 ```
+```xml
+<animation object="buttonToAnimate" play="true">
+    <text>
+        <text>i</text>
+        <text>am</text>
+        <text>groot</text>
+        <duration>2</duration>
+    </text>
+</animation>
+```
+
+## changeTextColor
+Changes the text color while the animation is running
+
+#### Parameters: 
+1. `table` multiple color numbers - example: {colors.red, colors.yellow, colors.green}
+2. `number` duration in seconds
+3. `number` time - time when this part should begin (offset to when the animation starts - default 0)
+
+#### Returns: 
+1. `animation` Animation in use
+
+#### Usage:
+
+```lua
+local mainFrame = basalt.createFrame()
+local testButton = mainFrame:addButton("buttonToAnimate")
+local aAnimation = mainFrame:addAnimation():setObject(testButton):changeTextColor({colors.red, colors.yellow, colors.green}, 2):play()
+```
+```xml
+<animation object="buttonToAnimate" play="true">
+    <textColor>
+        <color>red</color>
+        <color>yellow</color>
+        <color>green</color>
+        <duration>2</duration>
+    </textColor>
+</animation>
+```
+
+## changeBackground
+Changes the background color while the animation is running
+
+#### Parameters: 
+1. `table` multiple color numbers - example: {colors.red, colors.yellow, colors.green}
+2. `number` duration in seconds
+3. `number` time - time when this part should begin (offset to when the animation starts - default 0)
+
+#### Returns: 
+1. `animation` Animation in use
+
+#### Usage:
+
+```lua
+local mainFrame = basalt.createFrame()
+local testButton = mainFrame:addButton("buttonToAnimate")
+local aAnimation = mainFrame:addAnimation():setObject(testButton):changeTextColor({colors.red, colors.yellow, colors.green}, 2):play()
+```
+```xml
+<animation object="buttonToAnimate" play="true">
+    <background>
+        <color>red</color>
+        <color>yellow</color>
+        <color>green</color>
+        <duration>2</duration>
+    </background>
+</animation>
+```
+
+# Events
+
+## onDone
+`onDone(self)`<br>
+This is a event which gets fired as soon as the animation has finished.
+
+```lua
+local basalt = require("Basalt")
+
+local mainFrame = basalt.createFrame()
+local testButton = mainFrame:addButton("buttonToAnimate")
+local aAnimation = mainFrame:addAnimation():setObject(testButton):changeTextColor({colors.red, colors.yellow, colors.green}, 2):play()
+aAnimation:onDone(function()
+    basalt.debug("The animation is done")
+end)
+```
+
+In XML you are also able to queue multiple animations, like this:
+
+```xml
+<animation id="anim2" object="buttonToAnimate">
+    <textColor>
+        <color>red</color>
+        <color>yellow</color>
+        <color>green</color>
+        <duration>2</duration>
+    </textColor>
+</animation>
+<animation onDone="#anim2" object="buttonToAnimate" play="true">
+    <background>
+        <color>red</color>
+        <color>yellow</color>
+        <color>green</color>
+        <duration>2</duration>
+    </background>
+</animation>
+```
--- a/docs/objects/Basalt.md
+++ b/docs/objects/Basalt.md
@@ -46,7 +46,6 @@ basalt.createFrame("myFirstFrame"):hide()
 basalt.getFrame("myFirstFrame"):show()
 ```

-
 ## basalt.getActiveFrame
 Returns the currently active base frame

@@ -70,7 +69,6 @@ local mainFrame = basalt.createFrame()
 basalt.autoUpdate()
 ```

-
 ## basalt.update
 Calls the draw and event handler once - this gives more flexibility about which events basalt should process. For example you could filter the terminate event.

@@ -83,9 +81,8 @@ Calls the draw and event handler once - this gives more flexibility about which
 ```lua
 local mainFrame = basalt.createFrame()
 local aButton = mainFrame:addButton():setPosition(2,2)
-
 while true do
-basalt.update(os.pullEventRaw())
+    basalt.update(os.pullEventRaw())
 end
 ```

@@ -97,11 +94,9 @@ Stops the automatic draw and event handler which got started by basalt.autoUpdat
 ```lua
 local mainFrame = basalt.createFrame()
 local aButton = mainFrame:addButton():setPosition(2,2):setText("Stop Basalt!")
-
 aButton:onClick(function()
 basalt.stopUpdate()
 end)
-
 basalt.autoUpdate()
 ```

@@ -119,11 +114,9 @@ Checks if the user is currently holding a key
 ```lua
 local mainFrame = basalt.createFrame()
 local aButton = mainFrame:addButton():setPosition(2,2):setText("Check Ctrl")
-
-aButton:onClick(function()
-basalt.debug(basalt.isKeyDown(keys.leftCtrl) )
+aButton:onClick(function() 
+    basalt.debug(basalt.isKeyDown(keys.leftCtrl))
 end)
-
 basalt.autoUpdate()
 ```

@@ -144,14 +137,14 @@ Also basalt.debugFrame and basalt.debugList are available.
 basalt.debug("Hello! ", "^-^")
 ```

-## setTheme
+## basalt.setTheme
 Sets the base theme of the project! Make sure to cover all existing objects, otherwise it will result in errors. A good example is [theme](https://github.com/Pyroxenium/Basalt/blob/master/Basalt/theme.lua)

 #### Parameters: 
 1. `table` theme layout look into [theme](https://github.com/Pyroxenium/Basalt/blob/master/Basalt/theme.lua) for a example

 #### Usage:
-* Creates a new base frame and adds a new theme which only changes the default color of buttons.
+* Sets the default theme of basalt.
 ```lua
 basalt.setTheme({
    ButtonBG = colors.yellow,
@@ -160,7 +153,7 @@ basalt.setTheme({
 })
 ```

-## setVariable
+## basalt.setVariable
 This stores a variable which you're able to access via xml. You are also able to add a function, which then gets called by object events created in XML.

 #### Parameters: 
@@ -178,7 +171,7 @@ end)
 <button onClick="clickMe" text="Click me" />
 ```

-## shedule
+## basalt.shedule
 Shedules a function which gets called in a coroutine. After the coroutine is finished it will get destroyed immediatly. It's something like threads, but with some limits.

 #### Parameters: 
--- a/docs/objects/Progressbar.md
+++ b/docs/objects/Progressbar.md
@@ -15,8 +15,8 @@ Sets the direction in which the bar should be expanding.
 #### Usage:
 * Creates a progressbar and sets the direction from bottom to top
 ```lua
-local mainFrame = basalt.createFrame():show()
-local aProgressbar = mainFrame:addProgressbar():show()
+local mainFrame = basalt.createFrame()
+local aProgressbar = mainFrame:addProgressbar()
 aProgressbar:setDirection(3)
 ```
 ```xml
@@ -35,8 +35,8 @@ This is the function you need to call if you want the progression to change.
 #### Usage:
 * Creates a progressbar and sets the current progress to 50
 ```lua
-local mainFrame = basalt.createFrame():show()
-local aProgressbar = mainFrame:addProgressbar():show()
+local mainFrame = basalt.createFrame()
+local aProgressbar = mainFrame:addProgressbar()
 aProgressbar:setProgress(50)
 ```

@@ -49,8 +49,8 @@ Returns the current progress status
 #### Usage:
 * Creates a progressbar, sets the current progress to 50 and prints the current progress
 ```lua
-local mainFrame = basalt.createFrame():show()
-local aProgressbar = mainFrame:addProgressbar():show()
+local mainFrame = basalt.createFrame()
+local aProgressbar = mainFrame:addProgressbar()
 aProgressbar:setProgress(50)
 basalt.debug(aProgressbar:getProgress())
 ```
@@ -69,8 +69,8 @@ This function will change the visual display of your progress bar
 #### Usage:
 * Creates a progressbar and sets the progressbar color to green
 ```lua
-local mainFrame = basalt.createFrame():show()
-local aProgressbar = mainFrame:addProgressbar():show()
+local mainFrame = basalt.createFrame()
+local aProgressbar = mainFrame:addProgressbar()
 aProgressbar:setProgressBar(colors.green, colors.yellow, colors.red)
 ```
 ```xml
@@ -89,8 +89,8 @@ Will change the default background symbol (default is " " - space)
 #### Usage:
 * Creates a progressbar and sets the progressbar background symbol to X
 ```lua
-local mainFrame = basalt.createFrame():show()
-local aProgressbar = mainFrame:addProgressbar():show()
+local mainFrame = basalt.createFrame()
+local aProgressbar = mainFrame:addProgressbar()
 aProgressbar:setBackgroundSymbol("X")
 ```
 ```xml
@@ -99,7 +99,7 @@ aProgressbar:setBackgroundSymbol("X")

 # Events

-# onProgressDone
+## onProgressDone
 `onProgressDone(self)`<br>
 A custom event which gets triggered as soon as the progress reaches 100.

@@ -108,8 +108,8 @@ Here is a example on how to add a onProgressDone event to your progressbar:
 ```lua
 local basalt = require("Basalt")

-local mainFrame = basalt.createFrame():show()
-local aProgressbar = mainFrame:addProgressbar():show()
+local mainFrame = basalt.createFrame()
+local aProgressbar = mainFrame:addProgressbar()

 function progressDone()
  basalt.debug("The Progressbar reached 100%!")
--- a/docs/objects/Scrollbar.md
+++ b/docs/objects/Scrollbar.md
@@ -1,48 +1,108 @@
-Scrollbars are objects, the user can scroll vertically or horizontally, this can change the value.<br>
-Here is a example of how to create a standard scrollbar:
+Scrollbars are objects, the user can scroll vertically or horizontally, this will change a value, which you can access by :getValue().<br>

-```lua
-local mainFrame = basalt.createFrame("myFirstFrame"):show()
-local aScrollbar = mainFrame:addScrollbar("myFirstScrollbar"):show()
-```
-Here are all possible functions available for scrollbars. Remember Scrollbar inherits from [Object](objects/Object.md)
+Remember scrollbar also inherits from [Object](objects/Object.md)

 ## setSymbol
-Changes the symbol
+Changes the scrollbar symbol, default is " "

+#### Parameters: 
+1. `string` symbol
+
+#### Returns:
+1. `object` The object in use
+
+#### Usage:
+* Creates a new scrollbar and changes the symbol to X
 ```lua
-local mainFrame = basalt.createFrame("myFirstFrame"):show()
-local aScrollbar = mainFrame:addScrollbar("myFirstScrollbar"):setSymbol("X"):show()
+local mainFrame = basalt.createFrame()
+local scrollbar = mainFrame:addScrollbar():setSymbol("X")
+```
+```xml
+<scrollbar symbol="X" />
 ```
-#### Parameters: char symbol<br>
-#### Returns: self<br>

 ## setBackgroundSymbol
-Changes the background symbol color
+Changes the symbol in the background, default is "\127"

+#### Parameters: 
+1. `string` symbol
+
+#### Returns:
+1. `object` The object in use
+
+#### Usage:
+* Creates a new scrollbar and changes the background symbol to X
 ```lua
-local mainFrame = basalt.createFrame("myFirstFrame"):show()
-local aScrollbar = mainFrame:addScrollbar("myFirstScrollbar"):setSymbol("X"):setBackgroundSymbol(colors.green):show()
+local mainFrame = basalt.createFrame()
+local scrollbar = mainFrame:addScrollbar():setBackgroundSymbol("X")
+```
+```xml
+<scrollbar backgroundSymbol="X" />
 ```
-#### Parameters: number symbolcolor<br>
-#### Returns: self<br>

 ## setBarType
-If the bar goes vertically or horizontally
+Changes the scrollbar to be vertical or horizontal, default is vertical

+#### Parameters: 
+1. `string` vertical or horizontal
+
+#### Returns:
+1. `object` The object in use
+
+#### Usage:
+* Creates a new scrollbar and changes the bar type to horizontal
 ```lua
-local mainFrame = basalt.createFrame("myFirstFrame"):show()
-local aScrollbar = mainFrame:addScrollbar("myFirstScrollbar"):setBarType("horizontal"):show()
+local mainFrame = basalt.createFrame()
+local scrollbar = mainFrame:addScrollbar():setBarType("horizontal")
+```
+```xml
+<scrollbar barType="horizontal" />
 ```
-#### Parameters: string value ("vertical" or "horizontal")<br>
-#### Returns: self<br>

 ## setMaxValue
 the default max value is always the width (if horizontal) or height (if vertical), if you change the max value the bar will always calculate the value based on its width or height - example: you set the max value to 100, the height is 10 and it is a vertical bar, this means if the bar is on top, the value is 10, if the bar goes one below, it is 20 and so on.

+#### Parameters: 
+1. `number` maximum
+
+#### Returns:
+1. `object` The object in use
+
+#### Usage:
+* Creates a new scrollbar and changes the max value to 20
 ```lua
-local mainFrame = basalt.createFrame("myFirstFrame"):show()
-local aScrollbar = mainFrame:addScrollbar("myFirstScrollbar"):setMaxValue(123):show()
+local mainFrame = basalt.createFrame()
+local scrollbar = mainFrame:addScrollbar():setMaxValue(20)
 ```
-#### Parameters: any number<br>
-#### Returns: self<br>
+```xml
+<scrollbar maxValue="20" />
+```
+
+## setIndex
+Changes the current index to your choice, for example you could create a button which scrolls up to 1 by using :setIndex(1)
+
+#### Parameters: 
+1. `number` the index
+
+#### Returns:
+1. `object` The object in use
+
+#### Usage:
+* Creates a new scrollbar and changes the index to 1 as soon as the button got clicked
+```lua
+local mainFrame = basalt.createFrame()
+local scrollbar = mainFrame:addScrollbar():setMaxValue(20)
+local button = mainFrame:addButton(function()
+    scrollbar:setIndex(1)
+end)
+```
+```xml
+<scrollbar index="2" />
+```
+
+## getIndex
+Returns the current index
+
+#### Returns:
+1. `number` index
+
--- a/docs/objects/Slider.md
+++ b/docs/objects/Slider.md
@@ -1,42 +1,108 @@
-With sliders you can add a object where the user can change a number value.<br><br>
+Sliders are objects, the user can scroll vertically or horizontally, this will change a value, which you can access by :getValue().<br>

-Here are all possible functions available for sliders: <br>
-Remember slider also inherits from [object](https://github.com/NoryiE/Basalt/wiki/Object)
+Remember slider also inherits from [Object](objects/Object.md)

 ## setSymbol
-this will change the foreground symbol
+Changes the slider symbol, default is " "
+
+#### Parameters: 
+1. `string` symbol
+
+#### Returns:
+1. `object` The object in use
+
+#### Usage:
+* Creates a new slider and changes the symbol to X
 ```lua
-local mainFrame = basalt.createFrame("myFirstFrame"):show()
-local aSlider = mainFrame:addSlider("myFirstSlider"):setSymbol("X"):show()
+local mainFrame = basalt.createFrame()
+local slider = mainFrame:addSlider():setSymbol("X")
+```
+```xml
+<slider symbol="X" />
 ```
-#### Parameters: char symbol<br>
-#### Returns: self<br>

 ## setBackgroundSymbol
-this will change the symbol background color
-```lua
-local mainFrame = basalt.createFrame("myFirstFrame"):show()
-local aSlider = mainFrame:addSlider("myFirstSlider"):setBackgroundSymbol(colors.yellow):show()
-```
-#### Parameters: number color<br>
-#### Returns: self<br>
+Changes the symbol in the background, default is "\140"

-## setSymbolColor
-this will change the symbol color
+#### Parameters: 
+1. `string` symbol
+
+#### Returns:
+1. `object` The object in use
+
+#### Usage:
+* Creates a new slider and changes the background symbol to X
 ```lua
-local mainFrame = basalt.createFrame("myFirstFrame"):show()
-local aSlider = mainFrame:addSlider("myFirstSlider"):setSymbolColor(colors.red):show()
+local mainFrame = basalt.createFrame()
+local slider = mainFrame:addSlider():setBackgroundSymbol("X")
+```
+```xml
+<slider backgroundSymbol="X" />
 ```
-#### Parameters: number color<br>
-#### Returns: self<br>

 ## setBarType
-this will change the bar to vertical/horizontal (default is horizontal)
+Changes the slider to be vertical or horizontal, default is horizontal
+
+#### Parameters: 
+1. `string` vertical or horizontal
+
+#### Returns:
+1. `object` The object in use
+
+#### Usage:
+* Creates a new slider and changes the bar type to horizontal
 ```lua
-local mainFrame = basalt.createFrame("myFirstFrame"):show()
-local aSlider = mainFrame:addSlider("myFirstSlider"):setBarType("vertical"):show()
+local mainFrame = basalt.createFrame()
+local slider = mainFrame:addSlider():setBarType("vertical")
+```
+```xml
+<slider barType="vertical" />
 ```
-#### Parameters: string value ("vertical", "horizontal"<br>
-#### Returns: self<br>

+## setMaxValue
+the default max value is always the width (if horizontal) or height (if vertical), if you change the max value the bar will always calculate the value based on its width or height - example: you set the max value to 100, the height is 10 and it is a vertical bar, this means if the bar is on top, the value is 10, if the bar goes one below, it is 20 and so on.
+
+#### Parameters: 
+1. `number` maximum
+
+#### Returns:
+1. `object` The object in use
+
+#### Usage:
+* Creates a new slider and changes the max value to 20
+```lua
+local mainFrame = basalt.createFrame()
+local slider = mainFrame:addSlider():setMaxValue(20)
+```
+```xml
+<slider maxValue="20" />
+```
+
+## setIndex
+Changes the current index to your choice, for example you could create a button which scrolls up to 1 by using :setIndex(1)
+
+#### Parameters: 
+1. `number` the index
+
+#### Returns:
+1. `object` The object in use
+
+#### Usage:
+* Creates a new slider and changes the index to 1 as soon as the button got clicked
+```lua
+local mainFrame = basalt.createFrame()
+local slider = mainFrame:addSlider():setMaxValue(20)
+local button = mainFrame:addButton(function()
+    slider:setIndex(1)
+end)
+```
+```xml
+<slider index="2" />
+```
+
+## getIndex
+Returns the current index
+
+#### Returns:
+1. `number` index

--- a/docs/objects/Timer.md
+++ b/docs/objects/Timer.md
@@ -1,49 +1,84 @@
-With timers you can call delayed functions.
+Timers can call your functions delay and repeat it as often as you wish
 <br>
-Here is a list of all available functions for timers: <br>

 ## setTime
 sets the time the timer should wait after calling your function
+
+#### Parameters: 
+1. `number` the time to delay
+2. `number` how often it should be repeated -1 is infinite
+
+#### Returns:
+1. `object` The object
+
 ```lua
-local mainFrame = basalt.createFrame("myFirstFrame"):show()
-local aTimer = mainFrame:addTimer("myFirstTimer")
-aTimer:setTime(5)
+local mainFrame = basalt.createFrame()
+local aTimer = mainFrame:addTimer()
+aTimer:setTime(2)
+```
+```xml
+<timer time="2" repeat="1"/>
 ```
-#### Parameters:number time[, number repeats] - (time in seconds, if repeats is -1 it will call the function infinitly (every x seconds)<br>
-#### Returns: self<br>

 ## start
-starts the timer
+Starts the timer
+
+#### Returns:
+1. `object` The object
+
 ```lua
-local mainFrame = basalt.createFrame("myFirstFrame"):show()
-local aTimer = mainFrame:addTimer("myFirstTimer")
-aTimer:setTime(5):start()
+local mainFrame = basalt.createFrame()
+local aTimer = mainFrame:addTimer()
+aTimer:setTime(2):start()
+```
+```xml
+<timer time="2" start="true"/>
 ```
-#### Parameters: -<br>
-#### Returns: self<br>

 ## cancel
-stops/cancels the timer
+Cancels the timer
+
+#### Returns:
+1. `object` The object
+
 ```lua
-local mainFrame = basalt.createFrame("myFirstFrame"):show()
-local aTimer = mainFrame:addTimer("myFirstTimer")
-aTimer:setTime(5):start()
+local mainFrame = basalt.createFrame()
+local aTimer = mainFrame:addTimer()
+aTimer:setTime(2):start()
 aTimer:cancel()
 ```
-#### Parameters: -<br>
-#### Returns: self<br>

+# Events

 ## onCall
-adds a function to the timer
-```lua
-local function timerCall(self)
-    basalt.debug("i got called!")
-end
-local mainFrame = basalt.createFrame("myFirstFrame"):show()
-local aTimer = mainFrame:addTimer("myFirstTimer")
-aTimer:setTime(5):onCall(timerCall):start()
+`onCall(self)`<br>
+A custom event which gets triggered as soon as the current timer has finished

+Here is a example on how to add a onCall event to your timer:
+
+```lua
+local basalt = require("Basalt")
+
+local mainFrame = basalt.createFrame()
+local aTimer = mainFrame:addTimer()
+
+function call()
+  basalt.debug("The timer has finished!")
+end
+aTimer:onCall(call)
 ```
-#### Parameters: function func<br>
-#### Returns: self<br>
+
+Here is also a example how this is done with xml:
+
+```lua
+local basalt = require("Basalt")
+
+local mainFrame = basalt.createFrame()
+
+basalt.setVariable("call", function()
+  basalt.debug("The timer has finished!")
+end)
+```
+```xml
+<progressbar onDone="call" />
+```
--- a/docs/tips/design.md
+++ b/docs/tips/design.md
@@ -9,9 +9,9 @@ Let us begin with simple things:
 Let's create a Button:

 ```lua
-local basalt = dofile("basalt.lua")
-local mainFrame = basalt.createFrame("myFirstFrame"):setBackground(colors.black):show()
-local aButton = mainFrame:addButton("myFirstButton"):setSize(10, 3):setText("Beautiful"):setBackground(colors.gray):show()
+local basalt = require("Basalt")
+local mainFrame = basalt.createFrame():setBackground(colors.black):show()
+local aButton = mainFrame:addButton():setSize(10, 3):setText("Beautiful"):setBackground(colors.gray):show()
 ```

 Here lets make use of the event system:<br>
@@ -38,7 +38,7 @@ aButton:onLoseFocus(function(self) self:setBackground(colors.gray) end) -- if us
 ## Fade In/Out Objects
 instead of recoloring we are also able to slowly reposition the button, something like fade in:<br>
 ```lua
-local buttonAnimation = mainFrame:addAnimation("buttonFadeAnim")
+local buttonAnimation = mainFrame:addAnimation()
 local function fadeButtonIn(btn)
    if(btn.x < 5)then
        btn:setPosition(1,0,"r")
@@ -51,4 +51,32 @@ buttonAnimation:wait(0.1):add(function() fadeButtonIn(aButton) end):play(true) -
 ```
 This is also possible with entire frames and its children objects. So keep that in mind if you want to create something like a bigger panel to the right or a menu bar

-WIP
+## How To use XML
+Here is a example on how to create a cool looking frame by using xml:
+```xml
+<frame width="50%" bg="gray" scrollable="true" importantScroll="true">
+    <button x="2" y="2" width="100%-2" bg="black" fg="lightGray" text="Example Button 1!"/>
+    <button x="2" y="6" width="100%-2" bg="black" fg="lightGray" text="Example Button 2!"/>
+    <button x="2" y="10" width="100%-2" bg="black" fg="lightGray" text="Example Button 3!"/>
+    <button x="2" y="14" width="100%-2" bg="black" fg="lightGray" text="Example Button 4!"/>
+    <button x="2" y="18" width="100%-2" bg="black" fg="lightGray" text="Example Button 5!"/>
+    <button x="2" y="22" width="100%-2" bg="black" fg="lightGray" text="Example Button 6!"/>
+    <button x="2" y="26" width="100%-2" bg="black" fg="lightGray" text="Example Button 7!"/>
+</frame>
+<frame x="50%+1" width="50%+1" bg="black">
+    <textfield bg="gray" x="2" y="2" width="100%-2">
+        <lines>
+            <line>This is line 1.</line>
+            <line>And this is line 2.</line>
+        </lines>
+    </textfield>
+    <label anchor="bottomLeft" x="2" y="0" text="I love labels!" fg="lightGray"/>
+</frame>
+```
+in your lua code you just have to add this layout to your frame:
+```lua
+local basalt = require("Basalt")
+
+basalt.createFrame():addLayout("example.xml")
+basalt.autoUpdate()
+```