Need help with web view content

[TunTin]

Currently I have 1 problem: I need to add an image to the content of the web view so that when zooming the web view, that image is also zoomed, please help me, thanks

[KojiNakamaru]

It seems rather an issue about html and not webview. How do you add an image to your content?

[TunTin]

I use WebView just to load an SVG file that exists in the Local Device.
I have a PDNoteNode class that inherits from the UIImageView class (this is the Image I want to add to the WebView): see Img_1.png.

In the PDViewNote class that inherits from the WKWebView class I have a property of type UIView named contentView: see Img_2.png.

In the constructor of the PDViewNote class I will have the contentView property point to the scrollView.subviews.firstObject of the PDViewNote (which is also the WKWebView): see Img_3.png.

As a result, when I add Image (which is PDNoteNode) to contentView, My Image will have the same effect as SVG file, when I zoom WKWebView, SVG file and Dark's Image are zoomed along: see Img_4.png.

Can you help me to do the same with WebView on Unity?, thanks.

[KojiNakamaru]

Is your implementation based on this plugin? It seems different one.

Also, if you need to place small images over the svg, I think it is better to add them as html elements. Then you won't need to worry about zooming. For example, thhe sample app of this plugin with the following diff shows a small image at (20, 30) as below.

diff --git a/sample/Assets/Scripts/SampleWebView.cs b/sample/Assets/Scripts/SampleWebView.cs
index d4fd613..05a1bd6 100644
--- a/sample/Assets/Scripts/SampleWebView.cs
+++ b/sample/Assets/Scripts/SampleWebView.cs
@@ -108,6 +108,7 @@ public class SampleWebView : MonoBehaviour
                     "};");
 #endif
                 webViewObject.EvaluateJS(@"Unity.call('ua=' + navigator.userAgent)");
+                webViewObject.EvaluateJS(@"PutSmallImage(20, 30)");
             },
             //transparent: false,
             //zoom: true,
diff --git a/sample/Assets/StreamingAssets/sample.js b/sample/Assets/StreamingAssets/sample.js
index 8dc3fc4..1892ac2 100644
--- a/sample/Assets/StreamingAssets/sample.js
+++ b/sample/Assets/StreamingAssets/sample.js
@@ -9,4 +9,15 @@ window.addEventListener(
                 msg.textContent = '(NOTE: the background color was changed by sample.js, for checking whether the external js code works)';
             },
             3000);
+        window.PutSmallImage = function(x, y) {
+            Unity.call("here");
+            var img = document.createElement('img');
+            img.src = "sample.jpg";
+            img.width = 32;
+            img.height = 32;
+            img.style.position = "absolute";
+            img.style.left = x + "px";
+            img.style.top = y + "px";
+            document.body.appendChild(img);
+        };
     });

[TunTin]

Thank you very much for your solution, but can you tell me more if I use your plan, can I move that thumbnail to another location or delete it because my application is written in Objective-C iOS has those functions, thank you very much

[KojiNakamaru]

If you use unity-webview, you can utilize EvaluateJS() to evaluate any javascript code, so that you can dynamically add/move/delete images. If you don't utilize unity-webview and implement your app with objc, you can utilize https://developer.apple.com/documentation/webkit/wkwebview/1415017-evaluatejavascript?language=objc .

[TunTin]

Great, I will try your solution and give feedback later, many thanks

[TunTin]

Thanks, I'll check it out. ===== Gửi từ Gmail của Nguyễn Tùng Anh ===== Vào 1:14 CH, Th 5, 3 thg 6, 2021 Koji Nakamaru ***@***.***> đã viết:

…

If you use unity-webview, you can utilize EvaluateJS() to evaluate any javascript code, so that you can dynamically add/move/delete images. If you don't utilize unity-webview and implement your app with objc, you can utilize https://developer.apple.com/documentation/webkit/wkwebview/1415017-evaluatejavascript?language=objc . — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#694 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AC2FY5CHPWB7DBLYQ5HX7SLTQ4MT7ANCNFSM454NHIMA> .

[TunTin]

Currently I have 1 problem as follows: I need to catch click event on WebView with code like below, please see image below but I can't do it, do you have any solution to help me , thank you

[KojiNakamaru]

This plugin just overlays native webviews over unity's rendering view, so any click on webviews cannot be directly detected by unity (cf. NOTE described at https://github.com/gree/unity-webview/tree/ed0ceef5a366b1185da49ef4ec50088b2a3516e2#unity-webview ). Therefore, you should receive click events with javascript and send information of them to the unity side with Unity.call(). The following might be helpful:

#693 (comment)

[TunTin]

Thanks, I'll check it out. ===== Gửi từ Gmail của Nguyễn Tùng Anh ===== Vào 4:12 CH, Th 5, 17 thg 6, 2021 Koji Nakamaru ***@***.***> đã viết:

…

This plugin just overlays native webviews over unity's rendering view, so any click on webviews cannot be directly detected by unity (cf. NOTE described at https://github.com/gree/unity-webview/tree/ed0ceef5a366b1185da49ef4ec50088b2a3516e2#unity-webview ). Therefore, you should receive click events with javascript and send information of them to the unity side with Unity.call(). The following might be helpful: #693 (comment) <#693 (comment)> — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#694 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AC2FY5F4YWUGEO6B6WQNVGDTTG36BANCNFSM454NHIMA> .

[TunTin]

I catch click event on WebView as follows:

I catch Unity.call('clicked') as follows:

My Clicked function is as follows:

But when I click on WebView my Clicked function is not run, and how I get the click coordinates, is it the evt parameter of function(evt), Can you help me to solve it, thanks

[KojiNakamaru]

Maybe you did something wrong. The following change for the sample app works correctly. Please also refer https://www.w3schools.com/jsref/obj_mouseevent.asp about events.

diff --git a/sample/Assets/Scripts/SampleWebView.cs b/sample/Assets/Scripts/SampleWebView.cs
index e8aa466..bec989c 100644
--- a/sample/Assets/Scripts/SampleWebView.cs
+++ b/sample/Assets/Scripts/SampleWebView.cs
@@ -108,6 +108,12 @@ public class SampleWebView : MonoBehaviour
                     "};");
 #endif
                 webViewObject.EvaluateJS(@"Unity.call('ua=' + navigator.userAgent)");
+                webViewObject.EvaluateJS(@"document.addEventListener(
+                                             'click',
+                                             function(evt) {
+                                               Unity.call(evt.offsetX + ',' + evt.offsetY);
+                                             },
+                                             false);");
             },
             //transparent: false,
             //zoom: true,

[TunTin]

I followed your suggestions and now I am having 2 problems:
1: If I use WebView to display an HTML file like the image below, I have succeeded in adding a small image to the position I click on the WebView but when I use WebView to display an SVG file like the image below, things are not like that.

2: I don't understand why but I can only use the available image file sample.jpg to display thumbnails on WebView but when using an image I manually add to the Project like Note_Solid.png, the thumbnail cannot be displayed. OK.

All of my code is in SampleWebView.cs and I will send you below along with all the Assets I use for You to test.
Assets.zip

Hope You can suggest me a solution, thanks

[KojiNakamaru]

The sample app won't load a svg file directly. The following part extracts jpg/js/html files from StreamingAssets and loads the html file by LoadURL().

unity-webview/sample/Assets/Scripts/SampleWebView.cs

Lines 144 to 173 in ed0ceef

	var exts = new string[]{
	".jpg",
	".js",
	".html" // should be last
	};
	foreach (var ext in exts) {
	var url = Url.Replace(".html", ext);
	var src = System.IO.Path.Combine(Application.streamingAssetsPath, url);
	var dst = System.IO.Path.Combine(Application.persistentDataPath, url);
	byte[] result = null;
	if (src.Contains("://")) { // for Android
	#if UNITY_2018_4_OR_NEWER
	// NOTE: a more complete code that utilizes UnityWebRequest can be found in https://github.com/gree/unity-webview/commit/2a07e82f760a8495aa3a77a23453f384869caba7#diff-4379160fa4c2a287f414c07eb10ee36d
	var unityWebRequest = UnityWebRequest.Get(src);
	yield return unityWebRequest.SendWebRequest();
	result = unityWebRequest.downloadHandler.data;
	#else
	var www = new WWW(src);
	yield return www;
	result = www.bytes;
	#endif
	} else {
	result = System.IO.File.ReadAllBytes(src);
	}
	System.IO.File.WriteAllBytes(dst, result);
	if (ext == ".html") {
	webViewObject.LoadURL("file://" + dst.Replace(" ", "%20"));
	break;
	}
	}

An easy solution would be to rename your svg file to sample.svg and embed it in sample.html. If you utilize the sample app as is, you also need to add ".svg" to exts. Similarly about 2 you can rename your png file to sampe.png and add ".png" to exts.

[TunTin]

Thanks, I'll check it out. ===== Gửi từ Gmail của Nguyễn Tùng Anh ===== Vào 9:19 SA, Th 3, 22 thg 6, 2021 Koji Nakamaru ***@***.***> đã viết:

…

The sample app won't load a svg file directly. The following part extracts jpg/js/html files from StreamingAssets and loads the html file by LoadURL(). https://github.com/gree/unity-webview/blob/ed0ceef5a366b1185da49ef4ec50088b2a3516e2/sample/Assets/Scripts/SampleWebView.cs#L144-L173 An easy solution would be to rename your svg file to sample.svg and embed it in sample.html. If you utilize the sample app as is, you also need to add ".svg" to exts. Similarly about 2 you can rename your png file to sampe.png and add ".png" to exts. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#694 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AC2FY5D3K2LSXPETHKSJLBLTT7XMDANCNFSM454NHIMA> .