From 4dd6bbac7fd87feb0e0f563cfb34d462c5ece1bb Mon Sep 17 00:00:00 2001 From: NoryiE Date: Sat, 5 Apr 2025 22:57:46 +0000 Subject: [PATCH] deploy: a307f58dfbf31f120db736a407f81320c830fa9b --- docs/references/elements/BarChart.md | 18 ++++++++++++- docs/references/elements/BigFont.md | 9 ++++++- .../elements/BigFont_BigFontText.md | 2 +- docs/references/elements/Container.md | 10 +++++-- docs/references/elements/Display.md | 10 ++++++- docs/references/elements/Dropdown.md | 11 ++++++++ docs/references/elements/Flexbox.md | 21 ++++++++++++++- docs/references/elements/Graph.md | 26 +++++++++++++++++++ docs/references/elements/Input.md | 17 +++++++----- docs/references/elements/LineChart.md | 18 ++++++++++++- docs/references/elements/ProgressBar.md | 9 +++++++ docs/references/elements/Table.md | 11 +++++++- 12 files changed, 146 insertions(+), 16 deletions(-) diff --git a/docs/references/elements/BarChart.md b/docs/references/elements/BarChart.md index 08d3ec1..dc32974 100644 --- a/docs/references/elements/BarChart.md +++ b/docs/references/elements/BarChart.md @@ -1,5 +1,21 @@ # BarChart : Graph -This is the bar chart class. It is based on the graph element. It draws bar based points. +The Bar Chart element is designed for visualizing data series as vertical bars. It displays multiple values as side-by-side bars where each bar's height represents its value. + +### Usage + ```lua +local chart = main:addBarChart() +:addSeries("input", " ", colors.green, colors.green, 5) +:addSeries("output", " ", colors.red, colors.red, 5) + +basalt.schedule(function() +while true do +chart:addPoint("input", math.random(1,100)) +chart:addPoint("output", math.random(1,100)) +sleep(2) +end +end) +``` + ## Protected Functions diff --git a/docs/references/elements/BigFont.md b/docs/references/elements/BigFont.md index 56791b4..b3d8deb 100644 --- a/docs/references/elements/BigFont.md +++ b/docs/references/elements/BigFont.md @@ -1,5 +1,12 @@ # BigFont : VisualElement -The BigFont element is a text element that displays large text. +The BigFont element is a text element that displays larger text. It uses Wojbie's BigFont API to render the text in a larger font size. Credits to Wojbie for the original API. + +### Usage + ```lua +local font = main:addBigFont() +font:setText("Hello World!") +``` + ## Properties diff --git a/docs/references/elements/BigFont_BigFontText.md b/docs/references/elements/BigFont_BigFontText.md index 871423e..e607957 100644 --- a/docs/references/elements/BigFont_BigFontText.md +++ b/docs/references/elements/BigFont_BigFontText.md @@ -1,5 +1,5 @@ # BigFontText -Basalt - Nyorie: Please don't copy paste this code to your projects, this code is slightly changed (to fit the way basalt draws stuff), if you want the original code, checkout this: +Basalt - Nyorie: Please don't copy paste this code to your projects, this code is slightly changed (to fit the way basalt draws elements), if you want the original code, checkout this: http://www.computercraft.info/forums2/index.php?/topic/25367-bigfont-api-write-bigger-letters-v10/ diff --git a/docs/references/elements/Container.md b/docs/references/elements/Container.md index c5c23a1..79cb46a 100644 --- a/docs/references/elements/Container.md +++ b/docs/references/elements/Container.md @@ -1,6 +1,12 @@ # Container : VisualElement -The container class. It is a visual element that can contain other elements. It is the base class for all containers, -like Frames, BaseFrames, and more. +The Container class serves as a fundamental building block for organizing UI elements. It acts as a parent element that can hold and manage child elements, providing layout management, event propagation, and rendering capabilities. Used as base class for Frames, Windows, and other container-like elements. + +### Usage + ```lua +local container = basalt.getMainFrame() +container:addButton() -- Add a child element +``` + ## Properties diff --git a/docs/references/elements/Display.md b/docs/references/elements/Display.md index df532c4..9724530 100644 --- a/docs/references/elements/Display.md +++ b/docs/references/elements/Display.md @@ -1,5 +1,13 @@ # Display : VisualElement -The Display is a special element where you can use the window (term) API to draw on a element, useful when you need to use external APIs. +The Display is a special element where you can use the window (term) API to draw on the display, useful when you need to use external APIs. + +### Usage + ```lua +local display = main:addDisplay() -- Create a display element +local displayWindow = display:getWindow() -- Get the window object of the display +displayWindow.write("Hello World!") -- Write "Hello World!" to the display +``` + ## Functions diff --git a/docs/references/elements/Dropdown.md b/docs/references/elements/Dropdown.md index 5b1e0f3..72d1ee3 100644 --- a/docs/references/elements/Dropdown.md +++ b/docs/references/elements/Dropdown.md @@ -1,6 +1,17 @@ # Dropdown : List This is the dropdown class. It is a visual element that can show a list of selectable items in a dropdown menu. +### Usage + ```lua +local dropdown = main:addDropdown() +dropdown:setItems({ +{text = "Item 1", callback = function() basalt.LOGGER.debug("Item 1 selected") end}, +{text = "Item 2", callback = function() basalt.LOGGER.debug("Item 2 selected") end}, +{text = "Item 3", callback = function() basalt.LOGGER.debug("Item 3 selected") end}, +}) +``` + + ## Properties |Property|Type|Default|Description| diff --git a/docs/references/elements/Flexbox.md b/docs/references/elements/Flexbox.md index 94efc18..3ffcfe0 100644 --- a/docs/references/elements/Flexbox.md +++ b/docs/references/elements/Flexbox.md @@ -1,6 +1,25 @@ # Flexbox : Container This is the Flexbox class. It is a container that arranges its children in a flexible layout. +### Usage + ```lua +local flex = main:addFlexbox({background=colors.black, width=30, height=10}) +flex:addButton():setFlexGrow(1) +flex:addButton():setFlexGrow(1) +flex:addButton():setFlexGrow(1) +``` + +The flexbox element adds the following properties to its children: + +### Usage + ```lua +flex:addButton():setFlexGrow(1) -- The flex-grow property defines the ability for a flex item to grow if necessary. +flex:addButton():setFlexShrink(1) -- The flex-shrink property defines the ability for a flex item to shrink if necessary. +flex:addButton():setFlexBasis(1) -- The flex-basis property defines the default size of an element before the remaining space is distributed. +``` + + + ## Properties |Property|Type|Default|Description| @@ -25,7 +44,7 @@ This is the Flexbox class. It is a container that arranges its children in a fle |---|---|---| |Flexbox:init|Flexbox|Initializes the Flexbox instance |Flexbox:removeChild|Flexbox|Removes a child element from the flexbox -|Flexbox:render|Flexbox|Renders the flexbox and its children +|Flexbox:render|-|Renders the flexbox and its children ## Flexbox:addChild(element) Adds a child element to the flexbox diff --git a/docs/references/elements/Graph.md b/docs/references/elements/Graph.md index 810978d..ca87964 100644 --- a/docs/references/elements/Graph.md +++ b/docs/references/elements/Graph.md @@ -1,6 +1,22 @@ # Graph : VisualElement This is the base class for all graph elements. It is a point based graph. +### Usage + ```lua +local graph = main:addGraph() +:addSeries("input", " ", colors.green, colors.green, 10) +:addSeries("output", " ", colors.red, colors.red, 10) + +basalt.schedule(function() +while true do +graph:addPoint("input", math.random(1,100)) +graph:addPoint("output", math.random(1,100)) +sleep(2) +end +end) +``` + + ## Properties |Property|Type|Default|Description| @@ -16,6 +32,7 @@ This is the base class for all graph elements. It is a point based graph. |[Graph:addPoint](#graph-addpoint)|Graph|Adds a point to a series |[Graph:addSeries](#graph-addseries)|-|Adds a series to the graph |[Graph:changeSeriesVisibility](#graph-changeseriesvisibility)|Graph|Changes the visibility of a series +|[Graph:clear](#graph-clear)|Graph|Clears all points from a series |[Graph:focusSeries](#graph-focusseries)|Graph|Focuses a series |[Graph:getSeries](#graph-getseries)|table?|Gets a series from the graph |[Graph:removeSeries](#graph-removeseries)|Graph|Removes a series from the graph @@ -56,6 +73,15 @@ This is the base class for all graph elements. It is a point based graph. ### Returns * `Graph` `self` The graph instance +## Graph:clear(name?) +Clears all points from a series + +### Parameters +* `name` *(optional)* `string` The name of the series + +### Returns +* `Graph` `self` The graph instance + ## Graph:focusSeries(name) ### Parameters diff --git a/docs/references/elements/Input.md b/docs/references/elements/Input.md index 50a39f3..e504848 100644 --- a/docs/references/elements/Input.md +++ b/docs/references/elements/Input.md @@ -22,9 +22,7 @@ cursor movement, text manipulation, placeholder text, and input validation. |Method|Returns|Description| |---|---|---| -|[Input:blur](#input-blur)|-| -|[Input:focus](#input-focus)|-| -|[Input:setCursor](#input-setcursor)|-| +|[Input:setCursor](#input-setcursor)|-|Sets the cursor position and color |[Input:updateViewport](#input-updateviewport)|Input|Updates the input's viewport @@ -32,17 +30,22 @@ cursor movement, text manipulation, placeholder text, and input validation. |Method|Returns|Description| |---|---|---| +|Input:blur|-|Handles a blur event |Input:char|boolean|Handles char events +|Input:focus|-|Handles a focus event |Input:init|Input|Initializes the Input instance |Input:key|boolean|Handles key events |Input:mouse_click|boolean|Handles mouse click events |Input:render|-|Renders the input element -## Input:blur() +## Input:setCursor(x, y, blink, color) +Sets the cursor position and color -## Input:focus() - -## Input:setCursor() +### Parameters +* `x` `number` The x position of the cursor +* `y` `number` The y position of the cursor +* `blink` `boolean` Whether the cursor should blink +* `color` `number` The color of the cursor ## Input:updateViewport() Updates the input's viewport diff --git a/docs/references/elements/LineChart.md b/docs/references/elements/LineChart.md index 5ac6143..9ee4c28 100644 --- a/docs/references/elements/LineChart.md +++ b/docs/references/elements/LineChart.md @@ -1,5 +1,21 @@ # LineChart : Graph -This is the line chart class. It is based on the graph element. It draws lines between points. +The Line Chart element visualizes data series as connected line graphs. It plots points on a coordinate system and connects them with lines. + +### Usage + ```lua +local chart = main:addLineChart() +:addSeries("input", " ", colors.green, colors.green, 10) +:addSeries("output", " ", colors.red, colors.red, 10) + +basalt.schedule(function() +while true do +chart:addPoint("input", math.random(1,100)) +chart:addPoint("output", math.random(1,100)) +sleep(2) +end +end) +``` + ## Protected Functions diff --git a/docs/references/elements/ProgressBar.md b/docs/references/elements/ProgressBar.md index d18a098..8c3d800 100644 --- a/docs/references/elements/ProgressBar.md +++ b/docs/references/elements/ProgressBar.md @@ -2,6 +2,14 @@ This is the progress bar class. It provides a visual representation of progress with optional percentage display and customizable colors. +### Usage + ```lua +local progressBar = main:addProgressBar() +progressBar:setDirection("up") +progressBar:setProgress(50) +``` + + ## Properties |Property|Type|Default|Description| @@ -9,6 +17,7 @@ with optional percentage display and customizable colors. |progress|number|0|Current progress value (0-100) |showPercentage|boolean|false|Whether to show the percentage text in the center |progressColor|color|lime|The color used for the filled portion of the progress bar +|direction|string|right|The direction of the progress bar ("up", "down", "left", "right") ## Protected Functions diff --git a/docs/references/elements/Table.md b/docs/references/elements/Table.md index 4878ee4..b290768 100644 --- a/docs/references/elements/Table.md +++ b/docs/references/elements/Table.md @@ -2,6 +2,14 @@ This is the table class. It provides a sortable data grid with customizable columns, row selection, and scrolling capabilities. +### Usage + ```lua +local people = container:addTable():setWidth(40) +people:setColumns({{name="Name",width=12}, {name="Age",width=10}, {name="Country",width=15}}) +people:setData({{"Alice", 30, "USA"}, {"Bob", 25, "UK"}}) +``` + + ## Properties |Property|Type|Default|Description| @@ -32,11 +40,12 @@ row selection, and scrolling capabilities. |Table:mouse_scroll|boolean|Handles scrolling through the table data |Table:render|-|Renders the table with headers, data and scrollbar -## Table:sortData(columnIndex) +## Table:sortData(columnIndex, fn) Sorts the table data by column ### Parameters * `columnIndex` `number` The index of the column to sort by +* `fn` `function?` Optional custom sorting function ### Returns * `Table` `self` The Table instance