WebGL and HTML Overlay

I try to copy/paste a Link in a HTML input field, and send this link to unity (to update a texture).
Finally, i get my overlay, and i can copy/paste my Link in my Input field.

I have 2 Buttons. One for hide my overlay again, and one for update my texture.
On both buttons i get just a error: function is not defined. (HideDiv and UpdateImage)
What can i do to start my functions with the buttons?

Here is my jslib script:

Spoiler

Code (JavaScript):

1. var MyPlugin = {
2.     ShowOverlay: function()
3.     {
4.         if (!document.getElementById('overlay')) {
5.           var myoverlay = document.createElement('div');
6.           myoverlay.setAttribute('id', 'overlay');
7.           myoverlay.setAttribute('style', 'text-align:center');
8.           document.body.appendChild(myoverlay);
9.         }
10.  
11.           document.getElementById('overlay').innerHTML = "<div style='position: fixed; z-index: 1; top:50%; display:inside-block; width:100%; height:100px; background-color: yellow;'><input type=text><button type=button size=50 id=ok onclick=UpdateImage()>OK</button><button type=button id=close onclick=HideDiv()>X</button></div>";
12.           document.getElementById('overlay').focus();
13.     },
14.     HideDiv: function()
15.     {
16.         document.getElementById('overlay').innerHTML = "";
17.     },
18.     UpdateImage: function()
19.     {
20.         SendMessage ('Pocket', 'FileSelected', 'Url');
21.         document.getElementById('overlay').innerHTML = "";
22.     }
23. };
24.  
25. mergeInto(LibraryManager.library, MyPlugin);

and in my c# script:

Spoiler

Code (CSharp):

1. [DllImport("__Internal")]
2.     private static extern void ShowOverlay();
3.  
4.     [DllImport("__Internal")]
5.     private static extern void HideDiv();
6.  
7.     [DllImport("__Internal")]
8.     private static extern void UpdateImage();
9.  
10.     void FileSelected (string url) {
11.         StartCoroutine(LoadTexture (url));
12.     }
13.  
14.     public void OnButtonPointerDown () {
15.         #if !UNITY_EDITOR && UNITY_WEBGL
16.         WebGLInput.captureAllKeyboardInput = false;
17.         ShowOverlay();
18.         #endif
19.     }

I have also tried to write the function HideDiv in my HTML page, but got the same error.

 

I just saw it works perfect with GUI Buttons in Unity.
I mixed it now... HTML overlay input field, and Unity GUI buttons.

jslib:

Spoiler

Code (JavaScript):

1. var MyPlugin = {
2.     ShowOverlay: function()
3.     {
4.         if (!document.getElementById('overlay')) {
5.           var myoverlay = document.createElement('div');
6.           myoverlay.setAttribute('id', 'overlay');
7.           myoverlay.setAttribute('style', 'text-align:center');
8.           document.body.appendChild(myoverlay);
9.         }
10.  
11.           document.getElementById('overlay').innerHTML = "<div style='position: fixed; z-index: 1; top:50%; display:inside-block; width:100%; height:100px; background-color: yellow;'><input type=text id=link size=100></div>";
12.           document.getElementById('overlay').focus();
13.     },
14.     HideDiv: function()
15.     {
16.         document.getElementById('overlay').innerHTML = "";
17.     },
18.     UpdateImage: function()
19.     {
20.         var UrlString = document.getElementById('link').value;
21.         SendMessage ('Pocket', 'FileSelected', UrlString);
22.         document.getElementById('overlay').innerHTML = "";
23.     }
24. };
25.  
26. mergeInto(LibraryManager.library, MyPlugin);

jslib2: source: http://forum.unity3d.com/threads/ho...from-their-harddrive-into-a-webgl-app.380985/

Spoiler

Code (JavaScript):

1. var ImageUploaderPlugin = {
2.   ImageUploaderCaptureClick: function() {
3.     if (!document.getElementById('ImageUploaderInput')) {
4.       var fileInput = document.createElement('input');
5.       fileInput.setAttribute('type', 'file');
6.       fileInput.setAttribute('id', 'ImageUploaderInput');
7.       fileInput.style.visibility = 'hidden';
8.       fileInput.onclick = function (event) {
9.         this.value = null;
10.       };
11.       fileInput.onchange = function (event) {
12.         SendMessage('Canvas', 'FileSelected', URL.createObjectURL(event.target.files[0]));
13.       }
14.       document.body.appendChild(fileInput);
15.     }
16.     var OpenFileDialog = function() {
17.       document.getElementById('ImageUploaderInput').click();
18.       document.getElementById('canvas').removeEventListener('click', OpenFileDialog);
19.     };
20.     document.getElementById('canvas').addEventListener('click', OpenFileDialog, false);
21.   }
22. };
23. mergeInto(LibraryManager.library, ImageUploaderPlugin);

c#:

Spoiler

Code (CSharp):

1.  
2.     [DllImport("__Internal")]
3.     private static extern void ShowOverlay();
4.  
5.     [DllImport("__Internal")]
6.     private static extern void HideDiv();
7.  
8.     [DllImport("__Internal")]
9.     private static extern void UpdateImage();
10.  
11.     [DllImport("__Internal")]
12.     private static extern void ImageUploaderCaptureClick();
13.  
14.     void FileSelected (string url) {
15.         pleaseWait = true;
16.         StartCoroutine(LoadTexture (url));
17.     }
18.  
19.     public void OnButtonPointerDown () {
20.         #if !UNITY_EDITOR && UNITY_WEBGL
21.         WebGLInput.captureAllKeyboardInput = false;
22.         ShowOverlay();
23.         overlayButtons = true;
24.         showColorSelector = false;
25.         #endif
26.     }
27.  
28.     void enableInputs(string url)
29.     {
30.         #if !UNITY_EDITOR && UNITY_WEBGL
31.         WebGLInput.captureAllKeyboardInput = true;
32.         #endif
33.     }
34.  
35.     void updateUserImage(string link)
36.     {
37.         #if !UNITY_EDITOR && UNITY_WEBGL
38.         WebGLInput.captureAllKeyboardInput = true;
39.         #endif
40.     }
41.  
42.     IEnumerator LoadTexture (string url) {
43.         GuiHandler.addConsoleText("Loading Image... " + url);
44.         string format = "";
45.         string firstFour = "";
46.         if(url.Length > 4)
47.         {
48.             format = url.Substring(url.Length - 4);
49.             firstFour = url.Substring(0,4);
50.             if(format == ".jpg" || format == ".png")
51.             {
52.                 if(firstFour == "http")
53.                 {
54.                     WWW image = new WWW (url);
55.                     yield return image;
56.                     Texture2D texture = new Texture2D (1, 1);
57.                     image.LoadImageIntoTexture (texture);
58.                     Debug.Log ("Loaded image size: " + texture.width + "x" + texture.height);
59.                     GuiHandler.addConsoleText("Loaded image size: " + texture.width + "x" + texture.height);
60.                     myMaterial2 = new Material(Shader.Find("Standard"));
61.                     myMaterial2.mainTexture = texture;
62.                     //textures.Add (texture);
63.                     //colors.Add (Color.white);
64.                     Pocket.colorObject.GetComponent<Manipulate>().Highlight.GetComponent<MeshRenderer>().material = myMaterial2;
65.                 }
66.                 else
67.                 {
68.                     errorText = "No valid URL. A http adress is required.";
69.                     showErrorLabel = true;
70.                     Debug.Log (errorText);
71.                 }
72.             }
73.             else
74.             {
75.                 errorText = "Please use .JPG or .PNG images only.";
76.                 showErrorLabel = true;
77.                 Debug.Log (errorText);
78.             }
79.         }
80.         else
81.         {
82.             errorText = "No valid URL. To short.";
83.             showErrorLabel = true;
84.             Debug.Log (errorText);
85.         }
86.         pleaseWait = false;
87.         showColorSelector = false;
88.     }
89.  

gui:

Spoiler

Code (CSharp):

1.  
2.         if(overlayButtons)
3.         {
4.             if(GUI.Button (new Rect(Screen.width * 0.5f, Screen.height * 0.5f + 100, Screen.width * 0.5f, 100), "Back", "PocketClose"))
5.             {
6.                 HideDiv();
7.                 overlayButtons = false;
8.                 enableInputs("");
9.             }
10.             if(GUI.Button (new Rect(0, Screen.height * 0.5f + 100, Screen.width * 0.5f, 100), "Update", "PocketClose"))
11.             {
12.                 UpdateImage();
13.                 overlayButtons = false;
14.                 enableInputs("");
15.             }
16.         }
17.         if(pleaseWait)
18.         {
19.             GUI.Label (new Rect(Screen.width * 0.5f - Screen.width * 0.25f, Screen.height * 0.5f - 50, Screen.width * 0.5f, 100), "Please wait...", "PocketClose");
20.         }
21.         if(showErrorLabel)
22.         {
23.             GUI.Label (new Rect(0, Screen.height * 0.5f - 100, Screen.width, 100), errorText, "PocketClose");
24.  
25.             if(GUI.Button (new Rect(0, Screen.height * 0.5f, Screen.width, 100), "OK", "PocketClose"))
26.             {
27.                 showErrorLabel = false;
28.                 errorText = "";
29.             }
30.  
31.         }
32.  

 

Unity launched an asset for Webgl copy paste.

https://assetstore.unity.com/packages/essentials/tutorial-projects/ime-input-for-unity-webgl-64933

Allows you to copy paste in Inputfield via 2 methods: Native Dialog & HTML Overlap. Html overlap is better choice.
Works fine.