diff --git a/Applications.cfg b/Applications.cfg index ed19123d..44f9e682 100644 --- a/Applications.cfg +++ b/Applications.cfg @@ -264,7 +264,7 @@ url="https://raw.githubusercontent.com/IgorTimofeev/OpenComputers/master/lib/GUI.lua", type="Library", preloadFile=true, - version=1.57, + version=1.58, }, { path="/lib/rayEngine.lua", diff --git a/Documentation/GUI.md b/Documentation/GUI.md index b8584d48..ea47f636 100644 --- a/Documentation/GUI.md +++ b/Documentation/GUI.md @@ -173,15 +173,19 @@ GUI.**layout**( x, y, width, height, columns, rows ): *table* container | *int* | y | Координата объекта по оси y | | *int* | width | Ширина объекта | | *int* | height | Высота объекта | -| *int* | columns | Количество рядов сетки | -| *int* | rows | Количество строк сетки | +| *int* | columnCount | Количество рядов сетки | +| *int* | rowCount | Количество строк сетки | -Layout является наследником GUI.**container**, предоставляющим автоматические методы расположения дочерних объектов внутри себя. К примеру, если вам хочется визуально красиво отобразить множество объектов, не тратя время на ручной расчет координат, то layout создан для вас. +Layout является наследником GUI.**container**, автоматически располагающий дочерние объекты внутри себя. К примеру, если вам хочется визуально красиво отобразить множество объектов, не тратя время на ручной расчет координат, то layout создан для вас. | Тип свойства | Свойство |Описание | | ------ | ------ | ------ | -| *function* | :**setCellPosition**(*object* child, *int* column, *int* row): *object* child| Назначить дочернему объекту layout конкретную ячейку сетки. В одной ячейке может располагаться сколь угодно много объектов. | +| *int* | .**columnCount**| Количество рядов сетки | +| *int* | .**rowCount**| Количество строк сетки | +| *function* | :**setCellPosition**(*int* column, *int* row, *object* child): *object* child| Назначить дочернему объекту layout конкретную ячейку сетки. В одной ячейке может располагаться сколь угодно много объектов. | | *function* | :**setCellDirection**(*int* column, *int* row, *enum* direction): *layout* layout | Назначить ячейке сетки метод отображения дочерних объектов. Поддерживаются GUI.directions.horizontal и GUI.directions.vertical | +| *function* | :**setCellSpacing**(*int* column, *int* row, *int* spacing): *layout* layout | Назначить ячейке сетки расстояние в пикселях между объектами. По умолчанию оно равняется 1 | +| *function* | :**setGridSize**(*int* columnCount, *int* columnCount): *layout* layout | Установить размер сетки. Все объекты, находящиеся вне диапазона нового размера, должны быть размещены в сетке заново через :**setCellPosition**() | Пример реализации layout: ```lua @@ -197,15 +201,15 @@ mainContainer:addChild(GUI.panel(1, 1, mainContainer.width, mainContainer.height local layout = mainContainer:addChild(GUI.layout(1, 1, mainContainer.width, mainContainer.height, 5, 1)) -- Добавяляем в layout 9 кнопок, назначая им соответствующие позиции в сетке -layout:setCellPosition(layout:addChild(GUI.button(1, 1, 26, 3, 0xEEEEEE, 0x000000, 0xAAAAAA, 0x000000, "Button 1")), 1, 1) -layout:setCellPosition(layout:addChild(GUI.button(1, 1, 26, 3, 0xEEEEEE, 0x000000, 0xAAAAAA, 0x000000, "Button 2")), 2, 1) -layout:setCellPosition(layout:addChild(GUI.button(1, 1, 26, 3, 0xEEEEEE, 0x000000, 0xAAAAAA, 0x000000, "Button 3")), 2, 1) -layout:setCellPosition(layout:addChild(GUI.button(1, 1, 26, 3, 0xEEEEEE, 0x000000, 0xAAAAAA, 0x000000, "Button 4")), 3, 1) -layout:setCellPosition(layout:addChild(GUI.button(1, 1, 26, 3, 0xEEEEEE, 0x000000, 0xAAAAAA, 0x000000, "Button 5")), 3, 1) -layout:setCellPosition(layout:addChild(GUI.button(1, 1, 26, 3, 0xEEEEEE, 0x000000, 0xAAAAAA, 0x000000, "Button 6")), 3, 1) -layout:setCellPosition(layout:addChild(GUI.button(1, 1, 26, 3, 0xEEEEEE, 0x000000, 0xAAAAAA, 0x000000, "Button 7")), 4, 1) -layout:setCellPosition(layout:addChild(GUI.button(1, 1, 26, 3, 0xEEEEEE, 0x000000, 0xAAAAAA, 0x000000, "Button 8")), 4, 1) -layout:setCellPosition(layout:addChild(GUI.button(1, 1, 26, 3, 0xEEEEEE, 0x000000, 0xAAAAAA, 0x000000, "Button 9")), 5, 1) +layout:setCellPosition(1, 1, layout:addChild(GUI.button(1, 1, 26, 3, 0xEEEEEE, 0x000000, 0xAAAAAA, 0x000000, "Button 1"))) +layout:setCellPosition(2, 1, layout:addChild(GUI.button(1, 1, 26, 3, 0xEEEEEE, 0x000000, 0xAAAAAA, 0x000000, "Button 2"))) +layout:setCellPosition(2, 1, layout:addChild(GUI.button(1, 1, 26, 3, 0xEEEEEE, 0x000000, 0xAAAAAA, 0x000000, "Button 3"))) +layout:setCellPosition(3, 1, layout:addChild(GUI.button(1, 1, 26, 3, 0xEEEEEE, 0x000000, 0xAAAAAA, 0x000000, "Button 4"))) +layout:setCellPosition(3, 1, layout:addChild(GUI.button(1, 1, 26, 3, 0xEEEEEE, 0x000000, 0xAAAAAA, 0x000000, "Button 5"))) +layout:setCellPosition(3, 1, layout:addChild(GUI.button(1, 1, 26, 3, 0xEEEEEE, 0x000000, 0xAAAAAA, 0x000000, "Button 6"))) +layout:setCellPosition(4, 1, layout:addChild(GUI.button(1, 1, 26, 3, 0xEEEEEE, 0x000000, 0xAAAAAA, 0x000000, "Button 7"))) +layout:setCellPosition(4, 1, layout:addChild(GUI.button(1, 1, 26, 3, 0xEEEEEE, 0x000000, 0xAAAAAA, 0x000000, "Button 8"))) +layout:setCellPosition(5, 1, layout:addChild(GUI.button(1, 1, 26, 3, 0xEEEEEE, 0x000000, 0xAAAAAA, 0x000000, "Button 9"))) mainContainer:draw() buffer.draw(true) @@ -214,7 +218,26 @@ mainContainer:startEventHandling() Результат: -![Imgur](http://i.imgur.com/wjjMfDe.png?1) +![Imgur](http://i.imgur.com/LnBhKaN.png?1) + +Также мы можем модифицировать код, чтобы кнопки группировались в 3 колонки, а расстояние между ними было равным 4 пикселям: + +```lua +-- Изменяем размер сетки на 3x1 +layout:setGridSize(3, 1) +-- Устанавливаем расстояние между объектами для каждой колонки +for column = 1, 3 do + layout:setCellSpacing(column, 1, 4) +end +-- Обновляем позиции трех последних кнопок, чтобы они принадлежали третьей колонке +layout:setCellPosition(3, 1, layout.children[7]) +layout:setCellPosition(3, 1, layout.children[8]) +layout:setCellPosition(3, 1, layout.children[9]) +``` +Результат: + +![Imgur](http://i.imgur.com/QD0BqWx.png?1) + Методы для создания виджетов ====== diff --git a/lib/GUI.lua b/lib/GUI.lua index d5652c41..a3487ea8 100755 --- a/lib/GUI.lua +++ b/lib/GUI.lua @@ -2048,7 +2048,8 @@ local function layoutCalculate(layout) local gridCellWidth, gridCellHeight = layout.width / layout.columnCount, layout.height / layout.rowCount for row = 1, layout.rowCount do for column = 1, layout.columnCount do - layout.grid[row][column].x, layout.grid[row][column].y = column * gridCellWidth - gridCellWidth / 2 - layout.grid[row][column].totalWidth / 2, row * gridCellHeight - gridCellHeight / 2 - layout.grid[row][column].totalHeight / 2 + layout.grid[row][column].x = column * gridCellWidth - gridCellWidth / 2 - (layout.grid[row][column].totalWidth - layout.grid[row][column].spacing) / 2 + layout.grid[row][column].y = row * gridCellHeight - gridCellHeight / 2 - (layout.grid[row][column].totalHeight - layout.grid[row][column].spacing) / 2 end end @@ -2081,9 +2082,11 @@ local function layoutSetCellDirection(layout, column, row, direction) return layout end -local function layoutDraw(layout) - layoutCalculate(layout) - GUI.drawContainerContent(layout) +local function layoutSetCellSpacing(layout, column, row, spacing) + layoutCheckCell(layout, column, row) + layout.grid[row][column].spacing = spacing + + return layout end local function layoutSetGridSize(layout, columnCount, rowCount) @@ -2109,6 +2112,11 @@ local function layoutSetGridSize(layout, columnCount, rowCount) return layout end +local function layoutDraw(layout) + layoutCalculate(layout) + GUI.drawContainerContent(layout) +end + function GUI.layout(x, y, width, height, columnCount, rowCount) local layout = GUI.container(x, y, width, height) @@ -2116,6 +2124,7 @@ function GUI.layout(x, y, width, height, columnCount, rowCount) layout.setCellPosition = layoutSetCellPosition layout.setCellDirection = layoutSetCellDirection layout.setGridSize = layoutSetGridSize + layout.setCellSpacing = layoutSetCellSpacing layout.draw = layoutDraw layoutSetGridSize(layout, columnCount, rowCount) @@ -2224,6 +2233,7 @@ end -- local mainContainer = GUI.fullScreenContainer() -- mainContainer:addChild(GUI.image(1, 1, require("image").load("/MineOS/Pictures/Raspberry.pic"))) -- mainContainer:addChild(GUI.panel(1, 1, mainContainer.width, mainContainer.height, 0x000000, 40)) +-- -- mainContainer:addChild(GUI.panel(1, 1, mainContainer.width, mainContainer.height, 0x880000)) -- -- Добавляем к контейнеру layout с сеткой 5x1 -- local layout = mainContainer:addChild(GUI.layout(1, 1, mainContainer.width, mainContainer.height, 5, 1)) @@ -2241,6 +2251,10 @@ end -- -- Изменяем размер сетки на 3x1 -- layout:setGridSize(3, 1) +-- -- Устанавливаем расстояние между объектами +-- for column = 1, 3 do +-- layout:setCellSpacing(column, 1, 4) +-- end -- -- Обновляем позиции последних кнопок -- layout:setCellPosition(3, 1, layout.children[7]) -- layout:setCellPosition(3, 1, layout.children[8])