[Request] Canvas based Textbox

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

Per the manual: [quote:qr3iv2cc]"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?

I tried to wrap it into plugin, but failed.

It seems that the keyboard event could not pass into the hidden text input element.

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?

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.

Ashley that makes a lot of sense. Thanks for sharing your perspective.

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.

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.

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.

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.

Ashley will it be possible to create a common css file

it's possible to implement canvasinput with

jsshell,podeshtmldiv and the browser plugin

,I also tested mobile support,emojis and utf-8 characters