Stumped by displaying webpage in WebView

LozPetts

Hi everyone!
I'm trying to display a live webpage in HISE (50% just as a learning exercise but I have an idea for a potential updater/downloader app down the line that would 100% require this).

I've looked through the docs, I've got the example projects (I'm building off of this at the mo) and I have this so far:

HiseSnippet 2332.3oc4ZrsbaabcAoVYcwR9RTp6LsOfwSePdrKuH4nX2NcLkDkhTstvgjV1uoYEvRwMBbWDfERhMSm1GyCcl9I0L8WH+.8SH+AsmcA.wBQJUJFmTkovdjwdNm8baOmCNmUtQfvgFFJBPVy1tuOEYcebq9bY2M6RXbzt0QVKfaPjc25RROeOJZi99jvPpKxxp3WnHwZ1oP5mu+MaP7HbGZFHD5HAygtGqGSlAsQs2x771l3Ray5YP8KqsqifuovSDApSQbEjOw4LxozCHJxJfQVSukKSJBZIIRZHxZpMDt8a0UbAOl9iXgrS.kDVTE0BXTL3sEdtJMVAEsYWlmaiTyNDgrvMxbBEicBKg2m4xF.OyY7PMB6rcX5OrJjW8JlS8pZpdULTuQnRELToohUoGga4Dv7kYXT5y73c4RZPGhS9ilXZQEbKf2T.Tvkk5QNitc.rXvNVtZkJUdg8ZeVkm86matxks2LfBZtsrK098zSNhQuvlw0KE7c4LocmHtijI3yk9RBhkel8WOmM7jwDRJKzvOmDXeQBK+C1NZRRvu7SSd4oJsHgIsnRsbCY+IfUbWaeQHSKYEAIbpTHUtgHh6FtLXFveek1bp.lihGq69kQgxDVDZyoTHJXfD1SPb0hXm16umcGlGMGq8.zuq4dK+TEleW4xO0941mRUd+uj5HqyBfeJB5CF9yse5t8fnzvx9PdxukFmnTlwcoWVpqrmmocstqaN2qTnWxRORzzQbcUGZABukSTGfC+YSe9ABI8P9xOatudtYAL1WEUmNiDWBW8nAiDsJcL3l13x7ndmPCdAbb5EQGPHDilOvGe8A9l4kNwQlFDFGMcnOkecYqnjvY3s2sachj.YKVIv.57oARlRErpSOGJ8Dm6LKtNM7LovWSaOeAWwAqYjZrOHIyJ4LAwbU6Hc0kYEn1sV+rEGVKPHxBDPVGhK+tPZPXYmtArPPXc6RBjkqKbh5AhKrbWVH8XYDPMi3UNg+sog.pQD.gzAPayTtsEvFgSnKXtxtCTD6+VstT1ocyJvV6uTCMbIsEvqG3SO8TFQlT6XQSHUMKeTvp3XWIq5MVIK63x5SRBh.Ri86Kl322HRJEbsaeQbrVj.RGlY94DzXviEvMopBC2VVzxi4RCzr3A3Ch50RR8SfcEl7vZiCSlGq3fVWlLs3gZFz5L10nFe+aFG2AvEQf7sz9g+P7Hfw3C0OeKWbxUYf8vdiGlv.HW6DwFhK0r3w3VzuJhBMHL.73aPFpxB3CcjjyoMI7SoSl0LKtU2nNc7nSVD173s3DH7uMidSlvTwL3w4jeCnkFMSVBbG8XsgRQFHtJ29GtpJbV+Jb00JM5Gz3KuindBGlr+XKuNOei0KU50usdoRqF0Hd8XKuGi2ixOU1c7k1YJoczeDj1GDMhWiFuPqGggNz3bpWKpmtb7XDYMRF8D7gQR+H4GI18H79M1BpgFjxvgh2FybmGnXzVb2qgMUpMNgsSi2AZDdDg7C2rIzlqvMxS8gAydeUM7mf.5KHWCmplJ4PKZ8M8RezZHdbUwGgavjNcGsNVXD5npW6eDzwAeycqNcfHnLEbJ71e3GoYFrLjONV9ykDD.xTI76mrzd6Oj+y8vW6pyB88H82.JKB8v.bvp.XRIiQX8M3rtA8Cn9j.ZaQCf9kC0MqzDT9WXeBTe4rVP61C2BoertsghhkchihCmjNMm9iUiIMEQRF+z8Ix.Fzim9K9vfmvWmRztTePx5Jp0p.lVTtqdw+FdRPVUs1JAY0TjF8pd.UdgH3L84Tx6Hq6EenDpcxG24RP8AeuJp05d3Jkf+fV2ySbgpkUVR7LDxng0P302uqfybTfhoHU0WuGLTjLU+2gD1lv7TmyshBgVqcOj2BHVOoND.ZcfvEdCuMQ2HqZXeUhjp4bHpkFTxYPzaNcMK.R4gULIcz8X+DnS8zsYqFbunBer0GKs3aVnC6xUW4XcbCJm7ehg7MIZxD5TFBcIbXOnw8tT2igvXROJL4UdY+q0xFBBKMBJucJfwDIwInpUP4mBJMYZUELJ5n35wKf2CrVXL4lPFEBkUBqMI.F7LLYNGN0INNnfR16B5AFCyKhZjpgJP2CGyzLnpsWbvJvirOimHXrJTCsO4xAqqBqUJXJaxQHxfK3LtrDfTccBpmpu70UpVcspFLcFrBIrccKsPIhqYGJwByio86P1o9BhRXwmfWakRuVS9qW8yW4UqV4kWmxLZSJSzYl3rIsx4hxQJxHfI1+lKBYNbO3eKofeqhGJj67vZROOVGlgDTfAWokYTlolOM1mRtRh07Pvc.sjFwsR2mRUiwidY5L2W4CFWEBrdW0HqI0eMM7756HBzMsgEwhPGFTwKzA1Tda4WfIbhW+PZobzb6RQuslUgAlUUzVv2nbcot5MqX2MXmWKlgpKbe7tgGov5P7RCKgJ4+fYvjbeIlM07owHmG+dX5K8kDqiJ+T85Nhfd1eAEpWO7sILg2Sr+XeOwwCD1NfvC8Egzplb9J3VwDWcpLhmm7XP4nRYdaClmAcyTKE3Jl.aP34XFrNGm1mYbaR+q2DW5oEErF2C0Qv56lwvS0HxKj9d088T0biYfWwD7Nj.W3bwIW6sEuoqLu5Ddk4Sem6Jy+YvPL45P+Aw538vquS8VMSFdQ+t8V7ygI08o4RhJtufKRa3K63sIEZe8zSo4hZFoYrtTByfuYTv4z7w6Nj9CAMlXyTtXH6QAUyjP8DkCV+apoY2..eaPMnkSYV5+e8u+Om+aaBSUSBykPukiP2Kzj41u4N8y8624lBMV.Gaj15xM28FtcwT8K9T3tmBder93+tp+C5qLNX7NqCbQbRtwcUW3Md+JE++m6WY9zp20oPqgZIOS76467QCRcVtGsiQmM+xZCPzL2u5FzR01lRcOQWpcvNps5pe2aRgatAMh8DWz.D31AzuZ.e9luq1NrgfhpW6Jcfzl1yWjukAHpp3Omtikw969foaem9xKeBFZBbEacFl8+aRw9o3.6mBYzi3DHNN4ZbTIuyng.1MW++kjYw6qVaWc3aCuGzr5wNN4Y0PabkIciqNoa7kS5F+rIciqMoa7ymzM9p+6aTMKQx8enxMfYpZrU732Vo2jCjlf9OZVv6XB

My HTML file is under Images/path-example/index.html and looks like this, I'm trying to redirect to my website just to see if it works.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Redirecting...</title>
    <script>
        function redirectToNevermoreAudio() {
            window.location.href = "https://www.nevermoreaudio.co.uk";
        }
        window.onload = redirectToNevermoreAudio;
    </script>
</head>
<body>
    <p>Redirecting to Nevermore Audio...</p>
</body>
</html>

Fully admit to borrowing from ChatGPT here, I learn best when I'm reverse engineering a working example rather than reading through docs etc, just how my brain works unfortunately! First time using ChatGPT for HISE and it's gotten a lot of stuff wrong, no surprise there.

I know this is possible as I can see people on the forum have it working but I can't see a working snippet I can take apart/play with to understand how it's all fitting together.

Can anyone point me in the right direction?

d.healey

@LozPetts said in Stumped by displaying webpage in WebView:

I learn best when I'm reverse engineering a working example

That GPT example is garbage, you won't learn anything from it.

LozPetts

@d-healey Yeah I thought as much when I had to go in and start correcting syntax. I suck at HTML and it made mistakes even I could spot.

I can't see an example that shows a redirecting to a webpage within the UI in HISE, do you know of one? I can see people have it working on the forum but explanations as to how seem thin on the ground.

d.healey

@LozPetts said in Stumped by displaying webpage in WebView:

do you know of one?

The webview doesn't work on Linux so I haven't taken much interest in it. I know some other people are using it successfully though so maybe you'll get some responses.

In the meantime you should go through the scripting basics so you can see how dreadful that GPT output is.

LozPetts

@d-healey Yeah it's terrible, I just thought I'd try it, it's helped me with some CSS stuff recently and it did 'okay'

d.healey

@LozPetts It's pretty good with css, javascript, c++, python, etc. All the major languages, because there is loads of data that it's trained on. But that data doesn't exist for HISE and it doesn't understand HISE scripting at all. It will just return some unhinged Javascript.

LozPetts

@d-healey Figured as much, just thought I'd give it a go! Hopefully someone with WebView experience chimes in

LozPetts

@LozPetts So I started again based on a recent thread from Clevername27 - I'm now here -

Content.makeFrontInterface(1000, 650);

const var web_DOCS_CoreHTML_GUI = Content.getComponent("web_DOCS_CoreHTML_GUI");

// WebView

// HTML file points redirects to internet
var startingPage = FileSystem.getFolder(FileSystem.AudioFiles).getParentDirectory().getChildFile("Images/path-example/index.html");

web_DOCS_CoreHTML_GUI.set("enableCache", true);
web_DOCS_CoreHTML_GUI.reset();
web_DOCS_CoreHTML_GUI.setIndexFile(startingPage);

With the suggested HTML test file below located at the path detailed in the code above:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta http-equiv="refresh" content="0; URL=https://www.ferretsfightingllamas.com" />
</head>
<body>
</body>
</html>

I have no idea what Ferretsfightingllamas.com is but I'm excited to find out when this gets working haha.

I currently get a white webview window with my HTML file displayed on a dark background.

d.healey

@LozPetts said in Stumped by displaying webpage in WebView:

var startingPage

This should probably be a const, it definitely shouldn't be a var. That whole file path seems weird, why is the html going in the project's Images folder?

LozPetts

@d-healey Because that's where they are in the example projects on GitHub, to do with making sure they get embedded correctly perhaps?

d.healey

@LozPetts said in Stumped by displaying webpage in WebView:

Because that's where they are in the example projects on GitHub

Oh, seems strange but I guess that's where they are meant to be then

LozPetts

Bump - anyone with web view experience able to weigh in? I've done some more playing around and can't get any further with it.

Stumped by displaying webpage in WebView

61

1.8k

10.4k

90.6k