I wish to develop a custom keyboard (for music) which lets me enter text into a 'textarea' set up in WebViewer. The Screen1.initialize runs some HTML and sets up the 'textarea' with an id="abc" and some demo content. I then need some javascript functions to edit the content. For the first of these I've written a function to insert a character at the character location. This is called with WebViewer1.RunJavaScript js - but nothing happens, not even a response from alert("Hello..."); It's like the js is invisible - although in 'inline' use of the RunJavaScrip js does work..Both the HTML and js files are in Media / Assets. Why does the HTML run but not the js?? I'm no expert in js, so hopefully something obvious I'm not seeing...
If you want to get result of js, use window.Appinventor.setWebViewString('some value here '), and get the value at Webviewer. WebviewStringChange event.
Not really sure what you mean, but commented out the function () { and final } lines and tried again. Nothing back from javascript. The line document.getElementById("abc").value = "Put this in textarea"; works with a direct (inline) call as in your Button1.click example. But the same line within the js file does'nt do anything. I think that is really odd and I've no idea what to try next. In another AI2 program I have a 25k line js file the first line of which is a function and that works. Any further thoughts would be very welcome.
It is not really as case of returning anything to the AppInventor program. The purpose of the function is to change the contents of an html textarea. I'm trying to make a custom keyboard and the text has to go into a textarea. And for that I need some editing functions eg. 'insert(char), 'backspace(), and optionally for convenience also a leftcursor() and a rightcursor(). My intention is to have these four functions in a js file and use window.AppInventor.getWebViewString() to pass the necessary arguements to these functions. But right now I can't even get a very simple js function that say "hello" to work
I've attached TA_Keyboard.aia and I guess you will be able to examine the html and js files which are in media / assets. It may help to put what I'm trying to do in context - so some screen-shots of a different app (BodBeat) that I wrote for music practice. This allows me to select a tune in abcNotation (BodBeat1.jpg). The app then draws the music notation and generates a WAV file which can be played (BodBeat2.jpg) at normal or slowed down speed. For good measure the app can also load and play standard MP3 files (BodBeat3.jpg) However, editing the abcNotation with a standard keyboard is a real pain - hence a desire for a custom keyboard such as displayed in NewBeat.jpg (which is work in progress).
Hope that makes sense... TA_Keyboard.aia (2.0 MB)
The music notation graphics, soundfile generation, etc javascript routines communicate directly with a textarea. So, an edit in the textarea is immdeiately reflected in a change of the music. These routines are part of a large library written by Paul Rosen - so have to be used as is. See https://editor.drawthedots.com/ as an example. In terms of buttons I prefer AI's wysiwyg (more or less) approach to design and would like minimal use of html.
Seriously re-written, using a textbox to edit (the blue area), with a text file of the "tune" loaded using the file component. Each edit is updated in the textarea of the web page. You do not necessarily have to show the webview, or actually use a textarea, you could just point your other html elements to the value of the webviewstring....
Used the hide keyboard extension you already had loaded, and Taifun's TextBox extension. Also set the textarea to readonly to prevent edits there and to stop the keyboard popping up.
That's a power of work you have done there!!!
I'll go through it carefully to be sure I've completely understood it. Strange to say when out walking this afternoon I was wondering about using a textbox and somwhow keeping a textarea in syn with it. I don't suppose Paul Rosen's abcNotation routines care how the textarea is fed provide there is something there to chew on.
I've had a chance to look through the code - very elegant. Thank you so much. It makes a good example of how to set up a customised keyboard - even without the feed in to the html textarea. I'll need to add an 'enter/return' button and check that out. I suspect textarea will not like \n and may require a substitution to ??
I've been tied up with other things but hope to get back to this over the weekend. Thanks again for your great help. I'll move the routines across from the test app to the main app, but was wondering about the modified disableKeyboard extension. Usually downloaded, so never had to move one from A to B.
Actually I built upon your _rev2.aia and extended the demo with more demanding keyboards and pulled in the abcNotation processing js to render and play the music. But, I found some upper/lower boundry issues with your cursor move and insert routines - like cursor left or text insert when at the very start of TextArea. I've modified your code so that you can see what I've done - but maybe out of bounds should really be trapped within the extension code?
All that done the basics of the App are now working - so sent as is... But I'll work on better scroll control of the music and a nicer looking play control etc
Thanks again TA_Keyboard_rev5.aia (2.2 MB)
)