"Лёгкая" библиотека GUI

[Zer0Galaxy 2 187]

pastebin get iKzRve2g lib/forms.lua

Конечно, браузер на такой библиотеке не построить, но для небольших приложений может сгодится.

 

Библиотека позволяет создавать следующие визуальные компоненты:

Form (форма) - является контейнером для остальных компонентов. Служит для быстрой смены экранного интерфейса без необходимости удалять и создавать компоненты.

Button (кнопка) - тут всё понятно.

Label (метка) - просто строка текста.

Edit (окно ввода) - позволяет вводить текст.

Frame (рамка) - просто рамка.

List (список) - отображается в виде набора строк. Каждой строке ставится в соответствие элемент, способный хранить любое lua-значение (число, строку, таблицу и т.д.). Пользователь может прокручивать список, выбирать один из элементов, производить сортировку списка.

И невизуальные компоненты:

Event (событие) - обрабатывает системные события.

Timer (таймер) - позволяет вызывать функцию-обработчик с заданным периодом.

 

Пример работы с библиотекой:

 

 

forms=require("forms")         -- подключаем библиотеку

Form1=forms.addForm()          -- создаем основную форму

exitForm=forms.addForm()       -- и форму диалога выхода
exitForm.border=2
exitForm.W=31
exitForm.H=7
exitForm.left=math.floor((Form1.W-exitForm.W)/2)
exitForm.top =math.floor((Form1.H-exitForm.H)/2)
exitForm:addLabel(8,3,"Вы хотите выйти?")
exitForm:addButton(5,5,"Да",function() forms.stop() end)
exitForm:addButton(18,5,"Нет",function() Form1:setActive() end)

Btn1=Form1:addButton(65,21,"Выход",function() exitForm:setActive() end) -- создаем кнопку выхода
Btn1.color=0x505050                       -- задаем цвет кнопки

forms.run(Form1)               --запускаем gui 

 

 

 

Попробовать библиотеку в действии можно в дата-центре на компьютере с координатами 10150, 14199. Для этого необходимо запустить файл form.lua

Изменено 9 февраля, 2016 пользователем Zer0Galaxy

[Zer0Galaxy Автор темы 2 187]

Для работы с библиотекой подключим её стандартным способом

forms=require("forms") 

Библиотека forms содержит следующие функции:

addForm() - создает новую форму.

run(form) - запускает обработку интерфейса, устанавливая активной форму form. 

stop() - прерывает обработку интерфейса.

 

Форма. Создается при помощи команды:

Form1=forms.addForm()

По сути, форма - это область на экране в которой размещаются компоненты интерфейса. Если форма активна, размещенные в ней компоненты реагируют на действия мыши. Форм в Вашей программе может быть несколько, но активной будет только одна.

По умолчанию форма занимает всю область экрана. Изменить размеры формы можно задавая её параметры W и H:

Form1.W=31
Form1.H=7

а положение на экране - задавая параметры left и top:

Form1.left=10
Form1.top =5

Помимо W, H, left и top форма обладает такими свойствами:

border - наличие рамки 0-нет рамки; 1-одинарная рамка; 2-двойная рамка (по умолчанию - 0)

color - цвет формы (по умолчанию - 0х000000),

fontColor - цвет рамки (по умолчанию - 0xffffff).

 

Форма обладает следующими методами:

setActive() - устанавливает форму активной и перерисовывает её.

isActive() - возвращает true, если форма активна.

redraw() - принудительно перерисовывает форму, если форма активна.

addButton(left, top, caption, onClick) - добавляет на форму кнопку.

addLabel(left, top, caption) - добавляет на форму строку текста.

addEdit(left, top, onEnter) - добавляет на форму окно ввода.

addFrame(left, top, brd) - добавляет на форму рамку.

addList(left, top, onChange) - добавляет на форму список.

 

Поскольку форма является объектом, методы формы следует вызывать через двоеточие

Form1:setActive()

Все свойства и методы формы (за исключением setActive и isActive) присущи также другим компонентам интерфейса, которые я опишу позже.

[Zer0Galaxy Автор темы 2 187]

Кнопка. Создается командой:

Button1=Form1:addButton(left,top,caption,onClick)

Команда создает на форме Form1 кнопку и возвращает указатель на вновь созданный объект.

Еще раз обращаю внимание: метод forms.addForm вызывается через разделитель "точка", а Form1:addButton - через "двоеточие", поскольку forms - это библиотека, а Form1 - объект.

 

Параметры вызова метода addButton:

left,top - (числа) координаты левого верхнего угла кнопки относительно объекта, которому принадлежит кнопка.

caption - (строка) надпись на кнопке.

onClick - (функция) обработчик нажатия на кнопку.

Левый щелчок мыши на кнопке вызовет функцию-обработчик. Функция-обработчик принимает один параметр - указатель на кнопку, которая была нажата. 

 

Дополнительные свойства кнопки:

W - ширина кнопки (по умолчанию - 10)

H - высота кнопки (по умолчанию - 1)

border - наличие рамки (по умолчанию - 0)

color - цвет кнопки (по умолчанию - 0x606060),

fontColor - цвет надписи и рамки (по умолчанию - 0xffffff).

visible - имеет значение false, если кнопка скрыта (по умолчанию - true)

X, Y - абсолютные координаты левого верхнего угла кнопки

 

Методы компонента:

hide() - скрывает компонент.

show() - отображает ранее скрытый компонент

isVisible() - возвращает true, если компонент не скрыт и находится на активной форме.

redraw() - принудительно перерисовывает компонент.

 

Компоненты интерфейса (кнопки, надписи и т.д.) можно создавать не только на форме, но и на других компонентах. К примеру, кнопку можно создать на рамке или надпись на кнопке. При этом дочерний объект будет перемещаться, исчезать и появляться вместе с объектом-родителем.

Изменено 31 июля, 2015 пользователем Zer0Galaxy

[Zer0Galaxy Автор темы 2 187]

Надпись. Создается командой:

Label1=Form1:addLabel(left,top,caption)

Команда создает на форма Form1 надпись и возвращает указатель на вновь созданный объект.

 

Параметры вызова метода addLabel:

left,top - (числа) координаты левого верхнего угла надписи относительно объекта которому принадлежит надпись.

caption - (строка) собственно надпись.

 

Дополнительные свойства:

W - ширина надписи (по умолчанию равняется количеству символов в надписи). Если количество символов превышает ширину, лишние символы справа будут обрезаны.

H - высота (по умолчанию - 1)

border - наличие рамки (по умолчанию - 0)

color - цвет фона (по умолчанию - 0x000000),

fontColor - цвет шрифта (по умолчанию - 0xffffff).

visible - имеет значение false, если надпись скрыта (по умолчанию - true)

centered - если этот параметр у становить в true, надпись будет автоматически центрироваться. (По умолчанию - false) 

alignRight - если этот параметр установить в true и centered==false, надпись будет выравниваться по правому краю. (По умолчанию - false)

autoSize - если этот параметр установить в true, ширина компонента W автоматически подстраивается под самую длинную строку надписи. (По умолчанию - true). Да, да, надпись может иметь несколько строк. Разбиение на строки выполняется при помощи символа "\n".

X, Y - абсолютные координаты левого верхнего угла

 

Методы компонента (см. "кнопка")

Изменено 30 октября, 2017 пользователем Zer0Galaxy

[Zer0Galaxy Автор темы 2 187]

Окно ввода.

Edit1=Form1:addEdit(left,top,onEnter)

Команда создает на форма Form1 окно ввода и возвращает указатель на вновь созданный объект.

Окно ввода позволяет вводить с клавиатуры текст, ограниченный одной строкой.

 

Параметры вызова метода addEdit:

left,top - (числа) координаты левого верхнего угла окна относительно объекта которому принадлежит компонент.

onEnter - (функция) обработчик окончания ввода.

Левый щелчок мыши на окне переведет компонент в режим ввода текста. Завершение ввода осуществляется нажатием клавиши Enter. После чего вызывается функция-обработчик, если она определена. Функция принимает один параметр - указатель на компонент, который ее вызвал.

 

Дополнительные свойства:

W - ширина окна (по умолчанию - 20).

H - высота (по умолчанию - 3)

text - строка текста, введенного в окно ввода.

border - наличие рамки (по умолчанию - 1)

color - цвет фона (по умолчанию - 0x000000),

fontColor - цвет текста и рамки(по умолчанию - 0xffffff).

visible - имеет значение false, если компонент скрыт (по умолчанию - true)

X, Y - абсолютные координаты левого верхнего угла

 

Методы компонента (см. "кнопка")

Изменено 31 июля, 2015 пользователем Zer0Galaxy

[Zer0Galaxy Автор темы 2 187]

Рамка.

Frame1=Form1:addFrame(left,top,border)

Рамка не выполняет никаких действий, а просто служит элементом декора.

 

Параметры вызова метода addFrame:

left,top - (числа) координаты левого верхнего угла рамки относительно объекта которому принадлежит компонент.

border - (0, 1 или 2) по умолчанию - 1.

 

Дополнительные свойства:

W - ширина рамки (по умолчанию - 20).

H - высота (по умолчанию - 10)

color - цвет фона (по умолчанию - 0x000000),

fontColor - цвет рамки(по умолчанию - 0xffffff).

visible - имеет значение false, если компонент скрыт (по умолчанию - true)

X, Y - абсолютные координаты левого верхнего угла

 

Методы компонента (см. "кнопка")

[Zer0Galaxy Автор темы 2 187]

Список.

List1=Form1:addList(left,top,onChange)

Список - визуальный компонент, способный хранить множество элементов данных различного типа, подобно таблице в Луа. Каждому элементу (item) списка ставится в соответствие строка (line), посредством которой этот элемент отображается на экране компьютера.

 

Параметры вызова метода addList:

left,top - (числа) координаты левого верхнего угла относительно объекта которому принадлежит компонент.

onChange - (функция) обработчик события, когда пользователь выбирает при помощи ЛКМ какой либо элемент списка.

 

Дополнительные свойства:

W - ширина списка (по умолчанию - 20).

H - высота (по умолчанию - 10)

border - (0, 1 или 2) рамка, по умолчанию - 2

color - цвет фона (по умолчанию - 0x000000),

fontColor - цвет шрифта и рамки(по умолчанию - 0xffffff).

selColor - цвет фона выбранной строки списка (по умолчанию -0x0000ff)

sfColor - цвет шрифта выбранной строки (по умолчанию - 0xffff00)

index - номер выбранного элемента списка

items - таблица, содержащая элементы списка

lines - таблица, содержащая строки, соответствующие элементам списка

visible - имеет значение false, если компонент скрыт (по умолчанию - true)

X, Y - абсолютные координаты левого верхнего угла

 

В дополнение к методам, присущим остальным компонентам (см. "кнопка"), список имеет следующие методы:

clear() - очищает список

insert([pos,]line,item) - вставляет в список в позицию pos элемент item с соответствующей ему строкой line. Все последующие элементы сдвигаются на единицу. Если параметр pos отсутствует, вставка осуществляется в конец списка.

sort([comp]) - производит сортировку списка по условию comp. Если параметр comp задан, то он должен быть функцией, принимающей три параметра: comp(list, i, j), где list - указатель на список, а i и j - номера элементов списка. Функция comp должна возвращать true, если элементы списка i и j в результате сортировки меняются местами.  Если параметр comp не задан, то сортировка производится по строкам lines в алфавитном порядке.

 

В ближайшем будущем ожидайте презентацию системы визуального программирования на основе библиотеки forms

Изменено 18 февраля, 2021 пользователем Zer0Galaxy
Ошибка в названии функций selColor и sfColor

[SergOmarov 34]

Ты что-то говорил про TextEditor, он есть?

[SergOmarov 34]

Как со списком работать? Нихрена не понятно, ни как вставить, ни как удалить, что за элемент, если он все равно текстовый?

[Fingercomp 4 409]

Как со списком работать? Нихрена не понятно, ни как вставить, ни как удалить, что за элемент, если он все равно текстовый?

Видимо, читать Вы не умеете совершенно. Кому Зер0 писал — один крип только знает.

t.insert(shownLine, index) — вставить строку index, отображающуюся под индексом index.

Получение элемента — t.index

Удаление элемента — table.remove(t.lines, "test") table.remove(t.names, "test")

[SergOmarov 34]

Нету у него там такого, и что за t и t.names?

Как непонятно было, так и осталось, поч элемент представлен строкой и каким-то item?

[Fingercomp 4 409]

Нету у него там такого, и что за t и t.names?

Как непонятно было, так и осталось, поч элемент представлен строкой и каким-то item?

Если Вы чайник и/или не умеете читать — пожалуйста, уйдите.

[Zer0Galaxy Автор темы 2 187]

 

 

Ты что-то говорил про TextEditor, он есть?

Да. Я совместил его с компонентом Edit. Если полю text компонента присвоить значение string, мы будем иметь однострочный редактор. Завершение редактирования осуществляется клавишей Enter.

Если размеры компонента сделать побольше, а полю text присвоить значение table, получим многострочный редактор. Клавиша Enter будет вставлять новую строку, а выход из редактирования - клавишей F10.

[Zer0Galaxy Автор темы 2 187]

Как со списком работать? Нихрена не понятно, ни как вставить, ни как удалить, что за элемент, если он все равно текстовый?

Список это компонент, напоминающий lua-таблицу. Только визуализированный, т.е. имеющий некое представление на экране компьютера. Как и таблица, список может хранить элементы всех доступных в луа типов данных - числа, строки, таблицы, функции. Только, в отличии от таблицы, каждый элемент списка помимо собственно данных имеет строку при помощи которой данный элемент отображается.

Вставляются элементы в список при помощи метода insert. Методу insert необходимо передать три параметра:

 - числовой - позицию, в которую вставляется элемент (при этом все последующие элементы сдвинутся);

 - строковый - имя, под которым данный элемент будет отображаться;

 - произвольный тип - собственно элемент списка.

Если позиция вставляемого элемента пропущена, элемент будет вставлен в конец списка.

Пример заполнения списка разными типами данных:

function hello()
  print("Hello, world!")
end

List1=Form1:addList(5,5) -- создаем список
List1:insert("число",42) -- заполняем список
List1:insert("строка","string")
List1:insert("таблица",{1,2,3})
List1:insert("функция",hello)

Удаление данных из списка поэлементно не предусмотрено. Список очищается целиком при помощи метода clear

 

 

 

Если Вы чайник и/или не умеете читать — пожалуйста, уйдите.

Ну зачем же сразу так?

[SergOmarov 34]

Сделал расширение для либы:

------------------Menu------------------
local TMenu=setmetatable({W=20, H=10, selColor=0x0000ff, sfColor=0xffff00,
  type=function() return "List" end},TComponent)
TList.__index=TList
 
function TMenu:paint()
gpu.setForeground(self.sfColor)
gpu.setBackground(self.selColor)
local items=self.items
local y=self.top-1
local x=self.left
for i=1,#items do
gpu.set(x,y+i,items[i].text)

end
end
 
function TMenu:touch(x, y, btn, user)
self:hide()
	self.items[y].func()
end
 
function TComponent:addMenu(left, top,items)
if(self.type()=="Button")then
  local obj={left=left, top=top, items=items}
  self:makeChild(obj)
  return setmetatable(obj,TMenu)
  end
end

В результате тестирования: не находит метод TComponent:addMenu. В чем проблема? Компонент делал по образцу из TList.

[Zer0Galaxy Автор темы 2 187]

Сделал расширение для либы:

...

В результате тестирования: не находит метод TComponent:addMenu. В чем проблема? Компонент делал по образцу из TList.

Может быть проблема в этом?

TList.__index=TList  -- а должно быть TMenu.__index=TMenu

А что это за компонент Menu? Что он должен делать?

[SergOmarov 34]

Это разворачивающееся меню, да, это была причина, но я ее заметил не сразу и исправил "не глядя", а кроме этого переместил объявление в начало, и думал ,что каким-то макаром это влияет))

[SergOmarov 34]

Сделал библиотеку внешне-расширяемой: создаем файлы в папке /lib/formsparts/ в них регистрируем новые компоненты обычным образом.http://pastebin.com/8nTiPLHc

Пример расширения: http://pastebin.com/VDd8eTdg

Буду позже добавлять различные расширения.

 

Добавил функционал выборочной загрузки расширений: файла, имена которых оканчиваются на "-" не будут загружаться.

Изменено 22 сентября, 2015 пользователем SergOmarov

[Zer0Galaxy Автор темы 2 187]

Получается, уже существующие компоненты библиотеки можно разложить по разным файлам?

 

А зачем эти переменные делать глобальными?

_G.forms=forms
_G.TComponent=TComponent
_G.gpu=gpu

Что бы добавить новый компонент, создаешь файл в папке /lib/formsparts/ и перегружаешь комп. Кто будет добавлять компоненты динамически?

[SergOmarov 34]

Хорошая идея, но я ее решаю по-другому: у меня есть функция require2, перегружающая библиотеку еще раз) Ее легко сделать самому, продублировав стандартную require и убрав проверку на загруженность...

Переменные в глобал ,чтобы регистрация компонента не отличалась от внутренней.

Изменено 22 сентября, 2015 пользователем SergOmarov