[Request] Canvas based Textbox

Discussion and feedback on Construct 2

Post » Thu May 05, 2016 8:11 am

As many C2 developers have discovered over the years, the HTML based Textbox has many limitations.

Per the manual:
"Form controls are actual HTML elements floating above the game canvas in the HTML page. Therefore, nothing can be displayed on top of a form control, apart from other form controls."


Recently, I have discovered CanvasInput :: [Github]

If C2 can implement textbox in pure canvas, it will allow us to better create and style interfaces without the crazy limitations and issues I have experienced with the stock textbox.

The project is under MIT License, which means its no problem to incorporate and distribute with C2.

What do you think?
B
28
S
8
G
2
Posts: 58
Reputation: 2,586

Post » Thu May 05, 2016 9:35 am

I tried to wrap it into plugin, but failed.
It seems that the keyboard event could not pass into the hidden text input element.
B
108
S
26
G
260
Posts: 4,435
Reputation: 146,195

Post » Thu May 05, 2016 2:10 pm

Maybe @Ashley can provide some guidance? I think it would be a massive improvement for C2...

Also to note, I just found this plugin which may alleviate some of the issues: Advanced Textbox

I also found Zebra canvas UI library, CastorGUI library, but I haven't yet been able to decode how their text input box works. @rexrainbow Have you seen or tried any of these?
B
28
S
8
G
2
Posts: 58
Reputation: 2,586

Post » Thu May 05, 2016 3:11 pm

No way - form controls in canvas is not going to happen. You have no idea how much work actually goes in to a normal form control: support for every language in the world, support for every keyboard type and input method, focus, tab indexing, spell check, writing direction, clipboard, undo/redo, accessibility (e.g. ability for screen readers to find and read out contents), system-style appearance, etc. So you're asking for all of that to be reimplemented, bug-free and well-tested as the browser/OS equivalents, for what? To make a less recognisable and less usable text input? Or so you can partially obscure it with a sprite? Why would you want to do that anyway?

Besides, you can do a lot to style the text box already with the "set CSS style" action, which already supports a lot of what that "Advanced Textbox" plugin says it can do. For example set CSS "background" to "transparent" and you have a transparent background. Set "border" to "2px solid green" and you have a 2px green border. Set "border" to "none" and then it has no border at all. Combine that with a transparent background, then put something like a 9-patch under it, and then you have the best of both worlds - a completely custom appearance with a fully-featured browser-grade input control.
Scirra Founder
B
387
S
230
G
88
Posts: 24,251
Reputation: 192,464

Post » Thu May 05, 2016 3:40 pm

@Ashley that makes a lot of sense. Thanks for sharing your perspective.
B
28
S
8
G
2
Posts: 58
Reputation: 2,586

Post » Thu May 05, 2016 10:28 pm

@Ashley while we are on the topic of "set CSS style" I have been wondering for a while if you could add the ability for external stylesheets? I very often am doing "set CSS style" with the same parameters for many many textboxes. It would be nice to be able to share the same code among all the textboxes for easy updates.
B
28
S
8
G
2
Posts: 58
Reputation: 2,586

Post » Fri May 06, 2016 7:04 pm

ethanpil wrote:@Ashley while we are on the topic of "set CSS style" I have been wondering for a while if you could add the ability for external stylesheets? I very often am doing "set CSS style" with the same parameters for many many textboxes. It would be nice to be able to share the same code among all the textboxes for easy updates.

I'd love to see that. It could be a similar option like what we have when we set a webfont from an imported CSS file.
B
129
S
33
G
17
Posts: 1,552
Reputation: 20,515

Post » Sat May 07, 2016 3:33 am

There are a few ways you can do that, firstly, all dom objects are built outside of the c2 canvas, so you can easily access them through the html, attach a css file to your index.html (after exporting) with all your settings (but this way you won't see the changes in preview).

You can make a text string or store all the css into a dictionary/array (export to json) then import with ajax.

You can build a function that will apply a preset of css to a selected object and reuse it whenever needed.
Image
B
72
S
28
G
12
Posts: 515
Reputation: 12,309

Post » Sat May 07, 2016 2:09 pm

Lof wrote:There are a few ways you can do that, firstly, all dom objects are built outside of the c2 canvas, so you can easily access them through the html, attach a css file to your index.html (after exporting) with all your settings (but this way you won't see the changes in preview).

You can make a text string or store all the css into a dictionary/array (export to json) then import with ajax.

You can build a function that will apply a preset of css to a selected object and reuse it whenever needed.

Thanks for the advice, but these are basically all workarounds. I'm not saying that there's a problem with them (I particularly like the function based idea, I think I'll use that in the future), but it's still not the same as having the option inside the editor to import all CSS formatting from a file.
B
129
S
33
G
17
Posts: 1,552
Reputation: 20,515

Post » Sun May 22, 2016 2:52 am

@ashley will it be possible to create a common css file
B
28
S
8
G
2
Posts: 58
Reputation: 2,586


Return to Construct 2 General

Who is online

Users browsing this forum: RoboticPhoenix and 1 guest