Which possibilities do we have to embed a HTML page into a AutoIt GUI?

[SOLVE-SMART]

Hi folks 👋 ,

I hope you can help me by listing ways/approaches to embed a HTML page into a default AutoIt GUI. But let me explain it a little bit.

 

Why? I really like AutoIt 💙 , but when it comes to nice looking GUI-Applications, the creation of them is always a pain to be honest.
I really want to use the power of CSS (for styling the GUI) and maybe also JS (for do some animation stuff etc).

⚠ I know we have several approaches to handle GUI creation, GUI design/styling (MetroGui) and so on, but these are not very comfortable in my opinion. Don't get me wrong, I appreciate the work of the authors in that field, but compared to common web design opportunities they are not very handy or powerful 😔 .

The usage of GDI/GDIPlus is also not an option I would seriously consider, as it takes a long time to create such a nice looking GUI (at least for me as an inexperienced GDI user).

 

What's looks promising to my:

💡 I am curious about CEF (Chromium Embedded Framework) and the AutoIt-HTTP-Server of @genius257 (with the example manga server and reader). I don't know if I understood the concepts correctly that's why I hesitate to spent the time to dive deeper into these fields. I "simply" want to use a CSS and JS driven webpage (HTML page) within a AutoIt GUI. Of course I also want to communicate between the frontend action (hover, clicks, events) with AutoIt as the backend.

Would these approaches fulfill my ideas or are there others you can think of that would possibly allow this?

🙏 I am really grateful for your time and feedback folks, thank you.

 

Best regards
Sven

Edited May 15, 2024 by SOLVE-SMART

[SOLVE-SMART]

I forgot to mention, I used IE (Internet Explorer) as ActiveX element and embedded it to the GUI and did exactly what I talked above. But this was long time ago.
I had to use Volatile Func _IE...() to do the frontend <==> backend communication as I remember correctly, but these times are over (no ActiveX, no IE anymore).

Just to add this as reference 😅 .

Best regards
Sven

Edited May 15, 2024 by SOLVE-SMART

[genius257]

Hi @SOLVE-SMART.

The AutoIt-HTTP-Server will only work as a backend, but should be able to be used with CEF with no problem, i would think

But depending on when CEF allows in terms of API with AutoIt, it may be sufficient just to inject HTML and JavaScript, and observe events or changes. I have never used CEF, and have not made a deep dive, so it would depend on how well AutoIt can interact with the Chrome instance created.

[Andreik]

I used Sciter several times. You can make interesting user interfaces but it doesn't support all modern CSS. I am interested also to find a new way to embed a web application in a GUI without installing too many third party software.

 

[SOLVE-SMART]

I will answer later on (today) regarding your two posts 😀 , thanks so far.

Best regards
Sven

[SOLVE-SMART]

  On 5/16/2024 at 7:49 AM, Andreik said:

I used Sciter several times. You can make interesting user interfaces but it doesn't support all modern CSS.

Expand  

Thank you @Andreik 👍 , I didn't know about Sciter at all. Looks promising.

  On 5/16/2024 at 7:49 AM, Andreik said:

I am interested also to find a new way to embed a web application in a GUI without installing too many third party software.

Expand  

Exactly, that's the point. Too many magical things that have to be included just for having a nicer look and feel.
I hope there will be more suggestions, maybe we will find a better approach 🤝 .

 

  On 5/16/2024 at 1:21 AM, genius257 said:

The AutoIt-HTTP-Server will only work as a backend, but should be able to be used with CEF with no problem, i would think

Expand  

Okay, good to know, thanks @genius257 👍 .

  On 5/16/2024 at 1:21 AM, genius257 said:

But depending on when CEF allows in terms of API with AutoIt, it may be sufficient just to inject HTML and JavaScript, and observe events or changes. I have never used CEF, and have not made a deep dive, so it would depend on how well AutoIt can interact with the Chrome instance created.

Expand  

If possible, I also want to avoid CEF. I just mentioned it, because I thought it would be fit the whole topic, but now I am even more corious about "it may be sufficient just to inject HTML and JavaScript, and observe events or changes". That's what I want (I hope so). I am not quite sure how this can or should work, but I am willing to investe time to get a closer look in case you or someone else can recommend that way 😇 .

What's about your manga server and reader approach? I didn't check the GitHub repo enough, but it plays with a browser or (web)driver instead of using a AutoIt GUI, am I right?
Sorry in case you already explained it in the post, but I still don't get it.

 

What about you @Gianni - you are also a very experied person regarding webserver stuff and graphic things, in case I remember correctly. Do you have an idea regarding my requirement/wish 😇 ?

Thanks all of you, best regards
Sven

[genius257]

I took a quick look at the AutoIt part of the CEF code. the V8 engine has a eval function, so it is possible to inject JavaScript into the page.

But i could not see any easy way to communicate to AutoIt from the JavaScript side, and that might be a deal breaker.

  On 5/16/2024 at 1:17 PM, SOLVE-SMART said:

What's about your manga server and reader approach? I didn't check the GitHub repo enough, but it plays with a browser or (web)driver instead of using a AutoIt GUI, am I right?

Expand  

Exactly right, i wanted to have easy UI and all computers have a browser that can handle all that

AutoIt only handles the HTTP requests and au3 or PHP scripts (depending on how it is setup)

  On 5/16/2024 at 1:17 PM, SOLVE-SMART said:

Sorry in case you already explained it in the post, but I still don't get it.

Expand  

No worries

 

Your wish for a simple way to define styled windows and controls is something I am periodically looking into and have a few projects trying to solve this in different ways (most not yet ready for use). My HTTP server is one of them, and my Manga server project was a proof of concept

[Gianni]

although I think BrowserControl ActiveX is still an option for creating simple interactive interfaces embedded in AutoIt GUI, perhaps the most promising option is to use WebView2. The basic system created by @LarsJ, although still in a "work in progress" state, it can already be used to create something at least functional.
It would be interesting to continue developing it to make it more complete and simple to use...

Edited May 19, 2024 by Gianni