FiveGUI - beautiful buttons for canvas'a
Hello. I could not stand it and decided to share with all those that I am more or less actively doing now.
About a month ago I continued to experiment with Canvas and for some reason I needed a button. Yes, the most common button that could be pushed onto the page with an ordinary tag, but this is not the way of a true samurai. As a result, all the bins of github'a and gitorious'a were razed, Google was jammed into holes, and there was no suitable instument. Is that libCanvas boasted similar examples ... But I discovered them after the start of work, so I decided not to throw.
')
In general, FiveGUI is a set of graphical interface widgets that allows you to draw beautiful buttons, sliders, text pieces and other common interface buns on canvas without breaking the logic of what is already drawn on our canvas. All you need to get started is to create a GUI object on the page, nail it to an existing canvas, add elements to it and call the .draw () method. Like this:
As a result, we get a block with a button. On the library page there is also an example of how to make a button perform some useful actions.
I apologize for the lack of clear documentation and sensible howto. In the very near future I will try to finish all this, but the source code itself is now in a rather raw state (so it wasn’t possible to work with Opera, IE didn’t even look, because there is nothing) - I’m hoping to do all this as quickly as possible without to the detriment of everything else.
At the moment there are fairly complete implementations of buttons, checkboxes and radio boxes, there are single-line and multi-line fields for entering text, there are lists, both drop-down and flat. There is also a progress indicator and a slider.
Of course, there are still a lot of shortcomings and the library is so far from serious use that you don’t even want to stutter. For example, in text fields it is impossible to select text and click the mouse in a random place of typed text, and the text itself in Labels in the same FF and Chrome is noticeably different ... And this is not all that even I noticed. But I hope not to throw the library on the shelf and I will try to develop it as much as possible.
In general, if it turns out to be a useful and pleasant addition for you during experiments with canvas, I will be very happy.
Working examples can be found here:
http://fivegui.elhsmart.net.ru
Github:
https://github.com/elhsmart/FiveGUI
PS As I noted above, it works stably in the latest versions of FF and Chrome. I don’t have IE9 (if anyone can check, please tell me what’s going on there), and Oper hasn’t yet finished.
PSS All graphics in the examples borrowed from the game Battle for Wesnoth . I hope the guys will not be very offended at me, because the interface designer from me is nikakuschy and attempts to draw a beautiful button would be long, painful and painful.
About a month ago I continued to experiment with Canvas and for some reason I needed a button. Yes, the most common button that could be pushed onto the page with an ordinary tag, but this is not the way of a true samurai. As a result, all the bins of github'a and gitorious'a were razed, Google was jammed into holes, and there was no suitable instument. Is that libCanvas boasted similar examples ... But I discovered them after the start of work, so I decided not to throw.
')
In general, FiveGUI is a set of graphical interface widgets that allows you to draw beautiful buttons, sliders, text pieces and other common interface buns on canvas without breaking the logic of what is already drawn on our canvas. All you need to get started is to create a GUI object on the page, nail it to an existing canvas, add elements to it and call the .draw () method. Like this:
<html> <body> <canvas id="canvas" width="600" height="400"></canvas> </body> <script> G = new FiveGUI.GUI({ canvas: "canvas", fontColor: "#fff" }); Region = new FiveGUI.GUIRegion({ x: 50, y: 50, width: 400, height: 325, }); Button = new FiveGUI.GUIButton({ x: 10, y: 30, width: 108, height: 22, caption: "GUIButton", value: null, borderWidth: 2, borderColor: "#aaa", hoverBorderColor: "#ccc", clickBorderColor: "#eee" }); Region.addElement(Button); G.addElement(Region); G.drawGUI(); </script> </html> As a result, we get a block with a button. On the library page there is also an example of how to make a button perform some useful actions.
I apologize for the lack of clear documentation and sensible howto. In the very near future I will try to finish all this, but the source code itself is now in a rather raw state (so it wasn’t possible to work with Opera, IE didn’t even look, because there is nothing) - I’m hoping to do all this as quickly as possible without to the detriment of everything else.
At the moment there are fairly complete implementations of buttons, checkboxes and radio boxes, there are single-line and multi-line fields for entering text, there are lists, both drop-down and flat. There is also a progress indicator and a slider.
Of course, there are still a lot of shortcomings and the library is so far from serious use that you don’t even want to stutter. For example, in text fields it is impossible to select text and click the mouse in a random place of typed text, and the text itself in Labels in the same FF and Chrome is noticeably different ... And this is not all that even I noticed. But I hope not to throw the library on the shelf and I will try to develop it as much as possible.
In general, if it turns out to be a useful and pleasant addition for you during experiments with canvas, I will be very happy.
Working examples can be found here:
http://fivegui.elhsmart.net.ru
Github:
https://github.com/elhsmart/FiveGUI
PS As I noted above, it works stably in the latest versions of FF and Chrome. I don’t have IE9 (if anyone can check, please tell me what’s going on there), and Oper hasn’t yet finished.
PSS All graphics in the examples borrowed from the game Battle for Wesnoth . I hope the guys will not be very offended at me, because the interface designer from me is nikakuschy and attempts to draw a beautiful button would be long, painful and painful.
Source: https://habr.com/ru/post/133953/
All Articles