Keyboard shortcut for Text Input with Panel & Unicode issue

[dujididoya]

The new [Text] input feature with [Panel] that allows us to enter specific characters into the grid is a super useful one.

However, I wish you can add a keyboard shortcut (e.g. [space] or [enter] key) for the [Insert] function. Say I need to insert a particular symbol to many different positions, for now I have to click on the target spot first, then go back to the [Panel] window to click the [Insert] button for each instance. This requires a lot of mouse movement and is very tedious for the wrist. I just wish it can be possible to press a key to insert the symbol once I click on the target spot. Or alternatively, as soon as I double-click on the target spot, the symbol can be automatically inserted. This will make the whole inputting process much smoother and comfortable.

---

The second issue might be much more complicated. I think penpa-edit is based on the UTF-8 charset now, which should be able to display nearly all characters. However, when I try to insert some unusual Unicode characters (e.g. those within the range U+1F000 to U+1F02B) penpa-edit is unable to display those characters and instead displays a "diamond with question mark" symbol on the grid. I use the latest version of Google Chrome under Windows 10 (not sure about other browsers/platforms), and I definitely have the correct fonts (e.g. Segoe UI Symbol) on my system for those characters and I can see them correctly displayed in Notepad or other web pages using the same browser (even in the [Panel] window!). Just not on the actual grid/board in the penpa-edit web-app (even when I choose Segoe UI Symbol as the font to be used in Chrome settings).

I think this issue happens for all characters in the range U+10000 or above (i.e. the "Supplementary Multilingual Plane"). Just wonder could it be something in the code that makes it unable to handle that particular range of characters, even if the appropriate fonts are available?

---

Sorry about the length of my explanation of the issues, and hope it's not too tedious to read. At the moment the first issue is much more urgent, as I plan to perform thousands of those "single symbol into multiple target spots" actions in the near future, but I won't mind waiting a few days for the keyboard shortcut/double-click feature to be available.

Once again thanks so much for the wonderful fork of this great web-app! Wish you all the best in every aspect of life! ^_^

[swaroopg92]

@dujididoya - I will think about the first issue and see how it can be improved. Regarding the 2nd issue, some symbols are unable to fit the width if using the "Normal" submode. So if you change it to "Long" or "L" submode it might work. Can you give that a try?

Another curious question - Can you share an example, what you exactly type (exact syntax) in the text area (the one which works, the one which doesn't work). I will give a try on my end. Thanks.

[dujididoya]

Thanks for the quick reply! You're absolutely right, it's the [Normal] submode that doesn't work. [L/M/S] submodes all work, where the aforementioned range of characters can be successfully displayed. Now why couldn't I think of that (sigh)?

The characters I tried to put into the grid are the "mahjong tiles". You can find them in this Wikipedia page: https://en.wikipedia.org/wiki/MahjongTiles(Unicode_block)

Those entries in the table are actually text characters (provided your system can display them), not thumbnail images. You can actually copy and paste them into your Notepad windows. Now we know they can only be displayed in [L/M/S} but not [Normal] submode. You can verify this behavior on your end if you like.

As for the ones that work even in [Normal] submode, there're plenty. Most of my work uses CJK characters, so I know that more than 90% of them can be displayed fine in all submodes. Only those unusual ones (with U+10000 or above range) fail in [Normal]. Also, I think a problem with those unusual characters is that not all fonts support them, so sometimes the system uses a fallback font to display them (different to the one I assigned as default font). Perhaps that's the issue with the [Normal] submode, because the fallback font (whatever it is) isn't compatible with penpa-edit. Just my conjecture.

[dujididoya]

As for the first issue, I've just put more thought into it. Not only with [Text] input mode, but also when you try to select those stock characters (e.g. the chess pieces) it is so painful having to drag the mouse cursor back and forth between the target spots and the [Panel] window to repeatedly place those characters onto the grid.

The ideal behavior to me is: once you select a character from the [Panel], it is highlighted. Then when you click at a spot within the grid (including when [Border] is [ON] so corners/sides are selectable), you can press [space] or [enter] key to place the highlighted character. And if you double-click at a spot, the highlighted character is also placed there immediately. Also if you use the keyboard arrow keys to move the cursor on the grid to a particular spot, once again you can press [space] or [enter] key to place the highlighted character.

Of course, at the moment the [space] key has the functionality of erasing all content from a spot, so we might need to use another key instead (or use the [delete] key for the erasing functionality).

Don't know how much extra coding this involves. Please just choose the option that requires the least amount of fuss. Really, as long as there is a keyboard button that when pressed places the character I typed in the [Panel] [Text] window, I will be very gratefully satisfied. ^_^

[swaroopg92]

Summary, 1) Unicodes are working with L, M, S and Long submodes. So I will leave it as it is. As I mentioned, I think the Normal size doesn't fit in the cell and so that questionmark. So I will leave this part as it is now. 2) Yes, I was not aware of it. If you use shapes submode and use Panel, it is like that, you select a shape and every time you mouse click it will appear, so no moving back and forth. I am surprised it's not the same with the number submode. I will look into it. Thanks.

[dujididoya]

Yes, the [Shape] mode is fine. I think inserting by single-clicking is to better cater for touchpad users. As mouse and keyboard users we have the option of double-clicking so reserving the single-click action for simply highlighting the target location is viable. But I'll be happy if you decide to use single-clicking for direct insertion on [Number] mode just like with [Shape].

Now for [Panel] stock chars, I think the reason of the current difference to [Shape] mode is because under submodes other than [Normal] you can put multiple chars into the same spot, so for touchpad users it is more convenient that simply tapping/clicking on the [Panel] allows a char to be directly inserted. Hence no highlighting mechanism is implemented on the [Number] [Panel].

That said, I still desire very much for a keyboard shortcut on the actual placement/insertion (especially for [Panel] [Text] input).

[swaroopg92]

Oh, interesting. Makes sense now. That's why the number mode is different.

I got a nice idea for the shortcut (CTRL + I). It will be intuitive as well since insert (I). I will work on it. Will be challenging, as I need to mimic the behavior of number mode to allow the multiple characters. Also need to ensure this shortcut doesn't break anything else.

[dujididoya]

Well thanks so much for the plan to work on it! [Ctrl+i] will definitely do, although personally I think [Enter] is also very intuitive (and that key doesn't seem to perform anything as of now). But would it be much easier just implementing a keyboard shortcut to perform the same action as the [Insert] button under the [Panel] [Text] tab currently? You don't need to add any additional logic. To overhaul the whole [Panel] interface for the stock chars looks like too big a project at the moment (well it would be a great challenge to sharpen your HTML5/JS coding skills I suppose).

On a totally unrelated note, I think I have hit the upper limit of your fork just now. One grid I made contains too many elements and inserting actions, the app refuses to [Clone] to a new browser page, and [Share] doesn't allow me to generate any URL, or save to a file. And it's too much work for me to close that page now. I guess now I will have to strive to finish the whole thing and save to an image, and I will not be able to reopen that grid after I close the page. Feeling a little bit sad about that. :-(

[swaroopg92]

@dujididoya 1) It might not be difficult in terms of logic. But to ensure it doesn't break anything else and the previously created links is always a challenge and requires some testing. 2) "Enter" is used for Changing modes used in "Tab" Shortcut. Basically, Tab and Enter mimic the same. Some users preferred Tab which is closer to the top numbers and some users preferred the Enter key which is closer to Numpad. So added both.

Actually, you don't need to get disappointed, there are two solutions or tricks I must say to that problem of oversize: 1) Click "URL_for_solving" button and then Click Open - Let me know if this works? (To recover editable link - On this new link you can hit "URL_for_editing" and Click Open) 2) If Point 1 doesn't work, it means you have way too many elements. But again don't worry, I have solution for this. i) You need to download this entire github project on to your desktop. ii) Click "generate URL for editing", Copy that entire URL and save it in your notepad. iii) Then from the local project folder, open index.html file in your browser. iv) From the copied link of Step ii, copy only the part after "edit/". i.e. Your URL currently looks like "https://swaroopg92.github.io/penpa-edit/?m=edit&p=........", So copy "?m=edit&p=......" and paste it at the end of URL of step iii. v) Let say if your local URL looks like "/penpa-edit/docs/index.html", it should now look like "/penpa-edit/docs/index.html?m=edit&p=......" Magic happens !!! Sorry for long process, but at least you have alternative way to save those puzzles if it has too many elements. Although Method 1 should work for you in most cases. Method 2 is for very extreme. I hope this helps and it's not confusing.

[dujididoya]

Hi @swaroopg92

Thanks for the suggestions, but unfortunately they both don't work:

1. On [Share], when I click [URL for editing] or [URL for solving], the big text window remains blank. And when I click [Open] of course nothing happens. When I click [Download] a file called "Save.txt" is downloaded to my computer, and it is a totally empty file (file size = 0 byte).

2. It wouldn't work at all because in step (ii) "generate URL for editing", no URL is generated at all!

I am pretty sure that's because I performed too many actions on the grid (we are talking thousands if not tens of thousands). In fact I don't know why does the URL need to record EVERY action from the user? (You can tell because when we clone them we can undo everything back to the very start.) It can be useful sometimes but it is such a waste of memory! Perhaps you can provide an option for the user to save the URL with the full undo history or alternatively only the current contents and no undo history at all? But it involves the whole mechanism of how opt-pan himself designed the URL generation, it would be extremely tricky and difficult to do I'd imagine.

Lastly, just want to tell you that I've finished creating that particular huge grid and stored the images (with 4 different sizes), so I can safely close that page anytime now.

[swaroopg92]

@dujididoya 1) That is strange - Not sure why it's blank. It should be able to at the least generate URL inside the big text window. Can you press (CTRL + SHIFT + I) (i.e. developer console) and see what error it is showing? (If you haven't closed the page already) 2) Oh yeah, Method 2 assumes at least you get URL generated. 3) Yes, I am aware of that. Some users preferred to have UNDO option and so I left it. Changing that might need some other changes. That's why I suggested you Method 1 - URL for solving doesn't save UNDO history. So one can generate URL for solving and then from that you can generate a URL for editing (I know its a two-step process, but a nice trick to achieve what you suggested/want). Happy to know that you stored the images.

[swaroopg92]

Hi @dujididoya - Done. A new update has been released. Implemented CTRL + I shortcut for the number mode. It works like copying the last known state. i.e. 1) You select the cell on the grid where you want to enter the symbol, mahjong tile or number or text 2) select the corresponding symbol, tile, etc on the number panel and place it in the grid once. 3) Now just keep selecting other cells where you want and press CTRL + i. I hope this would be helpful now and simplify things and no more 1000 mouse movements. Enjoy. Happy Creations. Let me know if you find any issues. If everything working, feel free to close the issue.

[dujididoya]

Thanks so much! Had a bit of a test and [Ctrl+i] worked well (it always inserts the last stock char clicked from [Panel], or the whole string in the [Panel][Text] window). Great coding!

Will close the issue for now.

Just a bit on the previous reply: I do know that "URL for solving" doesn't come with the undo history and is considerably shorter than "URL for editing", but the issue/bug was that once I reached the upper limit of actions (4096 or 16384 etc) the whole URL generation mechanism stopped working, so couldn't even have the "URL for solving". Even if I tried undoing to an earlier state it wouldn't restart the URL generation functionality. And funny enough after a while even the whole undo mechanism died (both [Undo] [Redo] buttons greyed out and no more undo/redo action was possible). Even at that stage the URL generation stayed disabled. Perhaps it had something to do with RAM issues (I only have 8GB of RAM on my moderate laptop).

[swaroopg92]

I see. Thanks for the detailed responses. Omg, you must be doing some rocket science puzzles :p that you reached out max limit on everything. On a side note, if that happens again in the future, just see if there is any message in the developer console (CTRL + SHIFT + J ), just curious to see if the tool provides any error, or it just max out and that's the limit.

[dujididoya]

@swaroopg92

Thanks, I will try to take a look at the console next time this URL generation bug occurs, and tell you the error message.

On the other hand, just want to report a bit on the [Ctrl+i] behaviors (not necessarily bugs/issues, just some pecularities that I personally think is very tolerable):

Firstly, when you start on a brand new puzzle, [Ctrl+i] doesn't come into effect. So if you go to [Number] mode, switch [ON] the [Panel], go to the [Text] tab and type in some chars, pressing [Ctrl+i] doesn't insert anything. Even after you click the [Insert] button then go to another spot, [Ctrl+i] still does nothing.

It's functionality only starts after you go to other [Panel] tabs and click on a stock char (say digit 7 from the [1] tab). Now "7" is the char that will be inserted any time you press [Ctrl+i] in other spots. If you go back to the [Text] tab, then [Ctrl+i] will insert the full contents in the text window (unless you're in [Normal] submode in which case only the last char of the contents is inserted).

Now a funny one: if you go to other [Panel] tabs, [Ctrl+i] will insert the char that's the same position as "7" in the [1] tab! So in the [A] tab, the letter "G" will be inserted, so as the letter "g" from the [a] tab, and the symbol "(" from the [!] tab.

And what if your current position is more than the number of chars in the current tab? E.g. you click on the letter "N" from the [A] tab, then go back to the [1] tab. Now [Ctrl+i] will again insert nothing because you don't have a 14th slot in the [1] tab.

Like I said earlier I don't consider this a bug, just some special behaviors on this particular functionality that one should be able to easily get used to. Still a great feature to have! ^_^

[swaroopg92]

@dujididoya That is precisely how I coded it. Well explained. Not sure if you are interested in knowing this, but I will anyways share. The problem was that the Panel is handled by mouse events. So it finds which position your mouse pointer is and then decides the character which needs to be displayed. You can't do that if you are doing shortcut "CTRL+i". But I unraveled that all those mouse events and Panel is doing is generate a variable with the position of the mouse. So I got the idea and tricked the tool. So once this variable is generated (i.e the behavior that you need to insert some character once to active the shortcut mode) you can start using the shortcut. And since the variable stores the position rather than the character itself, if you switch to some other tab, then the character at that position is displayed (as you have mentioned). Of course, if you switch to a tab with lesser elements, it won't do anything, because now that position does not exist (i.e. out of bounds). Finally, since the Text tab does not have any positional element, it's just a text area, so you cant directly use it, you need to insert at least one character which will activate the shortcut mode, and then you have the ability to do. There might be a better way to handle this, not sure, but I am no expert, so I am happy it worked out well :) You have described everything precisely to the point, how I designed it.

[dujididoya]

@swaroopg92

Thanks for the kind words! ;-)

I'm glad I "figured out" how you implemented this feature with a little bit of self-exploring, it was sort of like a puzzle-solving experience, which I enjoyed quite a lot. And your way of integrating this keyboard shortcut into the original codes was both beautiful and efficient, showing your understanding of the overall structure and mechanism of this app. I really appreciate the ingenuity of how you do things! d(^_^)b