kibizoidus Dec 4 2011 at 08:50

FiveGUI — красивые кнопочки для canvas'a

3 min

3.6K

Canvas*

+25

Comments 58

BuriK666 Dec 4 2011 at 09:12

а почему у checkbox не работает &ltlabel&gt?

kibizoidus Dec 4 2011 at 09:15

Хм… Скорее всего потому что я изначально решил отделить мух от котлет и не привязывать к checkbox'у функционал, который ему, по большому счету, не нужен. Но если кому-то будет так уж необходимо это в обязательном порядке — попробую сделать, не проблема.

-7

dmitriid Dec 4 2011 at 12:49

Ну, вообще-то, label является чуть ли не основным элементом чекбокса ;)

+14

kibizoidus Dec 4 2011 at 15:47

Возможно моя позиция действительно выглядит как банальное ламерство и незнание и я оговорился. Я знаю, что в стандартной реализации HTML у чекбокса есть label. И он там не зря, да. Просто я его решил сделать отдельным элементом GUILabel.

dmitriid Dec 4 2011 at 15:50

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

kibizoidus Dec 4 2011 at 15:52

Хм… От этом я не подумал, спасибо. Обязательно добавлю.
ЭТо еще раз говорит о том, что каждый элемент нужно очень подробно изучать.

dmitriid Dec 4 2011 at 15:54

В целом, это — стандартное поведение label'ов — переводить фокус на связаный элемент. То есть даже если label у текстбокса, то щелчок по такому label'у должен фокусировать текстбокс. Просто в случае с чекбоксами и радиокнопками это наиболее заметно.

datacompboy Dec 4 2011 at 09:54

И у радиобатона надо бы как-нибудь отличие от чекбокса — кружок вместо квадратика

datacompboy Dec 4 2011 at 09:55

И еще — почему нельзя ткнуть в какое-либо положение на слайдере чтобы туда поставить сразу, без дёрганья крутилки?

datacompboy Dec 4 2011 at 09:55

и что за фигня появляется в текстарее по нажатию стрелок?! и где скроллбар? :D

datacompboy Dec 4 2011 at 09:57

Скины не работают:

Uncaught exception: TypeError: Second argument to 'instanceof' does not implement [[HasInstance]]



Error thrown at line 142, column 8 in <anonymous function: FiveGUI.GUISlider.prototype.initializePathPoints>() in fivegui.elhsmart.net.ru/js/FiveGUI/src/GUISlider.js:

 if(img instanceof Image && img.complete)

called from line 191, column 4 in <anonymous function: FiveGUI.GUISlider.prototype.initialize>(parent) in fivegui.elhsmart.net.ru/js/FiveGUI/src/GUISlider.js:

 this.initializePathPoints();

called from line 139, column 8 in <anonymous function: FiveGUI.GUIRegion.prototype.bindSubElements>(defaults) in fivegui.elhsmart.net.ru/js/FiveGUI/src/GUIRegion.js:

 this.elements[b].initialize(this);

called from line 356, column 8 in <anonymous function: FiveGUI.GUI.prototype.addElement>(element) in fivegui.elhsmart.net.ru/js/FiveGUI/src/GUI.js:

 element.bindSubElements(this.defaults);

called from line 725, column 12 in fivegui.elhsmart.net.ru/skinned-dynamic.html:

 G.addElement(Region);

Uncaught exception: TypeError: Cannot convert 'window.jam' to object



Error thrown at line 229, column 15 in <anonymous function: Preload.callback>() in fivegui.elhsmart.net.ru/skinned-dynamic.html:

 window.jam.load();

called from line 219, column 20 in <anonymous function: image.onload>() in fivegui.elhsmart.net.ru/skinned-dynamic.html:

 window[window.preloaderName].callback();

kibizoidus Dec 4 2011 at 10:01

Опера? Я об этом писал в P.S. Поправлю на днях.

RedOctoberCZ Dec 4 2011 at 10:04

В IE8 не работает:

Сведения об ошибке на веб-странице



Сообщение: 'FiveGUI.GUILib' - есть null или не является объектом

Строка: 38

Символ: 1

Код: 0

URI-код: fivegui.elhsmart.net.ru/js/FiveGUI/src/GUILabel.js



Сообщение: 'FiveGUI.GUILib' - есть null или не является объектом

Строка: 37

Символ: 1

Код: 0

URI-код: fivegui.elhsmart.net.ru/js/FiveGUI/src/GUICheckbox.js



Сообщение: 'FiveGUI.GUILib' - есть null или не является объектом

Строка: 37

Символ: 1

Код: 0

URI-код: fivegui.elhsmart.net.ru/js/FiveGUI/src/GUIRadiobutton.js



Сообщение: 'FiveGUI.GUILib' - есть null или не является объектом

Строка: 41

Символ: 1

Код: 0

URI-код: fivegui.elhsmart.net.ru/js/FiveGUI/src/GUITextfield.js



Сообщение: 'FiveGUI.GUILib' - есть null или не является объектом

Строка: 41

Символ: 1

Код: 0

URI-код: fivegui.elhsmart.net.ru/js/FiveGUI/src/GUIDropdown.js



Сообщение: 'FiveGUI.GUILib' - есть null или не является объектом

Строка: 36

Символ: 1

Код: 0

URI-код: fivegui.elhsmart.net.ru/js/FiveGUI/src/GUISelect.js



Сообщение: 'FiveGUI.GUILib' - есть null или не является объектом

Строка: 46

Символ: 1

Код: 0

URI-код: fivegui.elhsmart.net.ru/js/FiveGUI/src/GUITextarea.js



Сообщение: 'FiveGUI.GUILib' - есть null или не является объектом

Строка: 6

Символ: 1

Код: 0

URI-код: fivegui.elhsmart.net.ru/js/FiveGUI/src/GUIWindow.js



Сообщение: 'FiveGUI.GUILib' - есть null или не является объектом

Строка: 43

Символ: 1

Код: 0

URI-код: fivegui.elhsmart.net.ru/js/FiveGUI/src/GUIOption.js



Сообщение: 'FiveGUI.GUILib' - есть null или не является объектом

Строка: 41

Символ: 1

Код: 0

URI-код: fivegui.elhsmart.net.ru/js/FiveGUI/src/GUISlider.js



Сообщение: 'FiveGUI.GUILib' - есть null или не является объектом

Строка: 39

Символ: 1

Код: 0

URI-код: fivegui.elhsmart.net.ru/js/FiveGUI/src/GUIProgressbar.js



Сообщение: Предполагается наличие идентификатора, строки или числа

Строка: 337

Символ: 13

Код: 0

URI-код: fivegui.elhsmart.net.ru/skinned-dynamic.html

-10

Infernal Dec 4 2011 at 12:15

а вас не смутило слово canvas в заголовке?

+16

bO_oblik Dec 4 2011 at 10:08

Дропдаун не закрывается если ничего не выбирать и продолжать работу с интерфейсом.

kibizoidus Dec 4 2011 at 15:44

Спасибо, на днях поправлю.

szKarlen Dec 4 2011 at 10:13

в IE9 не работает.
пишет ошибку:

SCRIPT438: Объект не поддерживает это свойство или метод 

GFX.js, строка 93 символ 5

kibizoidus Dec 4 2011 at 15:45

Спасибо, обязательно поковыряюсь и исправлю, если найду IE9

homm Dec 4 2011 at 10:34

В Опере обе версии со скинами не работают.

kibizoidus Dec 4 2011 at 15:45

Я уже даже знаю, в чем причина. Спасибо, поправлю.

Demetros Dec 4 2011 at 12:08

Не считайте это за придирку, просто как вектор развития — работает из рук вон плохо на iOS и Android.

kibizoidus Dec 4 2011 at 15:27

Спасибо, я вообще удивлен, что работает на iOS и Android. Как только найду доступ к телефонам с этими операционками — постараюсь исправить.

Evengard Dec 4 2011 at 16:25

Ну для Андроида можно эмулятор скачать…

-2

UFO just landed and posted this here

Evengard Dec 4 2011 at 19:40

Да ладно, для тестов можно и попользовать

-2

TheShock Dec 4 2011 at 19:47

Я не знаю. У меня не хватило терпения дождаться пока запуститься браузер. Пару раз уже пробовал.

-1

AotD Dec 4 2011 at 21:24

Проще на тот же VirtualBox поставить android. Быстро, дёшево и сердито =)

TheShock Dec 4 2011 at 21:26

А как же тач-интерфейс?

volandkh Dec 4 2011 at 13:00

В опере хуже всего работают кнопки. Но вообще интересно.

q0p Dec 4 2011 at 13:25

То, что radiobutton не круглый, а квадратный как checkbox — это убого и не правильно.

kibizoidus Dec 4 2011 at 15:32

Посмотрите внимательно пример. Вид радиобаттона 1. Можно достаточно легко изменить. 2. нет никаких проблем изменить ctx.moveTo() на ctx.bezierCurveTo() или, в графическом варианте, еще легче — картинку checkbox'a на картинку radiobutton'a. Все это достаточно легко делается, у меня просто не было необходимой графики.

rPman Dec 4 2011 at 13:42

я немного недоумеваю…

но разве нельзя поверх канваса разместить html контролы? а дальше уже давно отточенными средствами css настроить внешний вид… зато не придется реализовывать функционал работы с языками (ввод текста, лево/право сторонний, модификаторы и т.п.) устройствами ввода (скролл мыши, сенсорный экран планшетников,..) и многое другое.

kibizoidus Dec 4 2011 at 15:42

www.quirksmode.org/html5/inputs.html
На quirksmode где-то была статья сравнения, где как и какие элементы рендерятся. Так что если мне, к примеру, нужна будет кнопка ровно 100х20 пикселей с текстом по центру — все может быть плохо. Да и не хотелось JS перемешивать с css/html.

asci Dec 4 2011 at 16:01

Я долго думал как же отрисовывать UI в игре на канвасе, и пришел к выводу, что наиболее производительным будет использование HTML элементов поверх канваса.

Простой текст на канвасе, может жрать до 30% нагрузки и вашем примере это видно, если начать быстро печатать в текстфилде

kibizoidus Dec 4 2011 at 16:07

На самом деле сейчас просто не оптимизированы события. Я думаю, нагрузку там можно значительно уменьшить.

asci Dec 4 2011 at 16:17

да не в событиях дело, нативно рисовать текст на канвасе (как и использовать градиенты и тени) — очень напряжно и лучше этого избегать. просто попробуйте сравнить)

кроме того, UI статичен и HTML элементы будут органично смотреться (естественно если будут хорошо выполнены графически). А вот когда не годиться использовать HTML, так это когда элемент интерфейса внутри игры может закрываться границами (например контекстная подсказка/меню объекта)

UFO just landed and posted this here

kibizoidus Dec 4 2011 at 15:51

Почему же плохая? Любой GUI под DirectX/OpenGL изначально занимается плохой идеей и переписывает стандартные контролы (посмотрите тот же CeGUI или Guichan), Qt/GTK изначально тоже занимаются плохой идеей и переписывают стандартные контролы. Что уж там говорить, вид стандартных контролов в разных браузерах разный.

Я понимаю, что сейчас реализация очень далека от идеала, но все же, не нужно судить так критично. Спасибо за отзыв.

Evengard Dec 4 2011 at 16:26

Qt переписывает? оО как раз у них контролы нативные (или выглядят нативными)

mefcorvi Dec 4 2011 at 17:11

Раньше переписывали, судя по вики. Теперь же «Recent versions of Qt use the native style APIs of the different platforms to query the platform for the desired appearance of the Qt controls, and so do not suffer from such issues as much». Как я понимаю, и сейчас они используют не нативные контролы целевой платформы, но теперь их внешний вид запрашивается у системы. Надо исходники посмотреть.

markoffko Dec 4 2011 at 16:36

Если со слайдера увести мышку вверх, то он продолжает работать, а если вниз то нет.

kibizoidus Dec 4 2011 at 17:01

Спасибо, проверю и поправлю.

asci Dec 4 2011 at 21:57

На самом деле независимо от направления — глючит когда курсор уходит с подложки интерфейса

Zibx Dec 4 2011 at 18:53

Текстэрия работает странно. Бэкспейс и стрелки вставляют проценты и делают странные вещи. FF8.

kibizoidus Dec 4 2011 at 19:01

В других браузерах не пробовали? Скорее всего нужно вставить проверну на onkeypress, во время того, как отрабатывает onkeydown.

f0rmat1k Dec 4 2011 at 19:35

На самом деле такие вещи надо делать на svg (ие способен показать через рафаель) либо вообще картинками. Сильная сторона канваса в динамике. Имхо

TheShock Dec 4 2011 at 19:37

Такие вещи могут быть частью какого-то большего проекта на Canvas…

kibizoidus Dec 4 2011 at 19:56

Как уже сказал товарищ выше, это может быть проблемой, если над элементом GUI нужно отрисовать часть логики проекта, или какой-то набор объектов.

В общем, лучше иметь удобный GUI внутри canvas'a и использовать его как подобие 2D-слоя видеокарты, чем городить над канвасом стандартные элементы или сращивать canvas+svg.

TheShock Dec 4 2011 at 19:36

Не без багов, но найс. Жаль, что не как плагин для LibCanvas, я бы использовал =)

kibizoidus Dec 4 2011 at 19:58

Спасибо, ждал твоего комментария. Баги постараюсь в ближайшее время поисправлять, да, х таки очень много, нельзя было в таком состоянии показывать. А вот сделать порт под LibCanvas — это идея, да. И это не так уж сложно, попробую форкнуть и озадачиться портированием.

TheShock Dec 4 2011 at 20:01

Та не. Кроме проблемы с Оперой (ох уж эта Опера) и Эксплорером (ох уж этот Эксплорер) остальные баги не так страшны даже для продакшна.

TheShock Dec 4 2011 at 20:03

Кстати, основная проблема далеко не в том, чтобы «просто прикрутить его к приложению». Самое важное — это заставить его корректно работать с другими объектами на странице. Чтобы не проваливались события сквозь кнопки, чтобы их было легко показать и убрать. И так далее.