MultiTester.ahk - Create responsive desktop applications using HTML, CSS, JS, and AHK!

Post your working scripts, libraries and tools for AHK v1.1 and older
geek
Posts: 1051
Joined: 02 Oct 2013, 22:13
Location: GeekDude
Contact:

MultiTester.ahk - Create responsive desktop applications using HTML, CSS, JS, and AHK!

28 Jul 2017, 08:21

MultiTester.ahk

Create responsive desktop applications using HTML, CSS, JS, and AHK!

Image

See it in action on imgur

Releases
User avatar
BGM
Posts: 507
Joined: 20 Nov 2013, 20:56
Contact:

Re: MultiTester.ahk - Create responsive desktop applications using HTML, CSS, JS, and AHK!

28 Jul 2017, 08:52

GeekDude, you should include the demo in your git so I can figure out how to use this thing. :)
Also, the multitester.ahk wants to #Include lib\AutoHotkey-JSON\Jxon.ahk but that folder is empty in the git.
geek
Posts: 1051
Joined: 02 Oct 2013, 22:13
Location: GeekDude
Contact:

Re: MultiTester.ahk - Create responsive desktop applications using HTML, CSS, JS, and AHK!

28 Jul 2017, 08:59

Oh yeah, I can see how that would be important :lol: . I've added a file samples\pages.json to the repository, which you can load using the File > Open menu item (or hit Control-O).
justjames283
Posts: 4
Joined: 21 Aug 2015, 12:36

Re: MultiTester.ahk - Create responsive desktop applications using HTML, CSS, JS, and AHK!

04 Aug 2017, 09:48

This is great. I really appreciate this script! Any idea on how to implement save code as a file that can be run?
justjames283
Posts: 4
Joined: 21 Aug 2015, 12:36

Re: MultiTester.ahk - Create responsive desktop applications using HTML, CSS, JS, and AHK!

04 Aug 2017, 10:04

nvm. Just added this line to the run command.

Code: Select all

Run()
	{
		Script := BuildScript(this.Editors.HTML.Value, this.Editors.CSS.Value
		, this.Editors.JS.Value, this.Editors.AHK.Value)
		
                Clipboard := Script
                
		ExecScript(Script,, A_AhkPath)
	}
geek
Posts: 1051
Joined: 02 Oct 2013, 22:13
Location: GeekDude
Contact:

Re: MultiTester.ahk - Create responsive desktop applications using HTML, CSS, JS, and AHK!

04 Aug 2017, 10:25

I plan to add a proper export button to the menu, but it won't be for a while. I'm not sure what I want a real workflow to look like. For example, with a site like codepen (same thing but without the AHK) I wouldn't be writing code then expecting to export a website, but instead something more along the lines of I'm already working on a site and want to prototype/test things quickly. I am considering writing a library where you could pass in the HTML/CSS/JS as parameters to a class/function, which would be for more serious use instead of prototyping.
justjames283
Posts: 4
Joined: 21 Aug 2015, 12:36

Re: MultiTester.ahk - Create responsive desktop applications using HTML, CSS, JS, and AHK!

08 Aug 2017, 14:33

GeekDude wrote:I am considering writing a library where you could pass in the HTML/CSS/JS as parameters to a class/function, which would be for more serious use instead of prototyping.
I for one would love to follow your progress on a project like that.
User avatar
Masonjar13
Posts: 1555
Joined: 20 Jul 2014, 10:16
Location: Не Россия
Contact:

Re: MultiTester.ahk - Create responsive desktop applications using HTML, CSS, JS, and AHK!

11 Aug 2017, 22:32

justjames283 wrote:
GeekDude wrote:I am considering writing a library where you could pass in the HTML/CSS/JS as parameters to a class/function, which would be for more serious use instead of prototyping.
I for one would love to follow your progress on a project like that.
Agreed. And subbed.

I've got a project in the works and a generic GUI isn't going to cut it. It'll be a while in the making though, even before the interface comes into play, so I'll be watching this closely. ;) I'd be willing to contribute, of course, if you need any help.
I'd also like to see an example of how to connect JS to AHK, if that's an available feature.
OS: Windows 10 Pro | Editor: Notepad++
My Personal Function Library | Old Build - New Build
User avatar
kczx3
Posts: 1640
Joined: 06 Oct 2015, 21:39

Re: MultiTester.ahk - Create responsive desktop applications using HTML, CSS, JS, and AHK!

25 Aug 2017, 08:37

All this needs is your new RichCode class with highlighters for each language :)
geek
Posts: 1051
Joined: 02 Oct 2013, 22:13
Location: GeekDude
Contact:

Re: MultiTester.ahk - Create responsive desktop applications using HTML, CSS, JS, and AHK!

22 Dec 2017, 21:28

kczx3 wrote:All this needs is your new RichCode class with highlighters for each language :)
It never hurts to ask! I just released version 0.2, available from the "Releases" link in the OP. It has syntax highlighting now :D
geek
Posts: 1051
Joined: 02 Oct 2013, 22:13
Location: GeekDude
Contact:

Re: MultiTester.ahk - Create responsive desktop applications using HTML, CSS, JS, and AHK!

23 Dec 2017, 11:25

gamergames wrote:can someone tell us n00bs what this thing does exactly?
It's a test environment for writing scripts that link to a custom HTML GUI, like for example the AutoHotkey installer. With this, you can write some HTML, some CSS, some JavaScript, and some AHK, then run it together as one piece.

When you open MultiTester, it should automatically load a demo from the samples folder. This demo creates a simple GUI with multiple "pages" of content that you can navigate through using two buttons. In a normal website, buttons like those would rely on JavaScript to interact with the page. With MultiTester, you can use AHK code instead of JS to provide this kind of, and more kinds of, functionality.
User avatar
Drugwash
Posts: 850
Joined: 29 May 2014, 21:07
Location: Ploieşti, Romania
Contact:

Re: MultiTester.ahk - Create responsive desktop applications using HTML, CSS, JS, and AHK!

24 Dec 2017, 07:00

RichCode.ahk is missing too from the lib folder. I'd settle for at least a text/url file containing a link to a download location for each of the the missing libraries.
The code as is, complete with all missing libraries and without any modification, when choosing File > Run from the menu it errors out in line 14: "Missing close quote". Is the demo broken or…?
Part of my AHK work can be found here.
geek
Posts: 1051
Joined: 02 Oct 2013, 22:13
Location: GeekDude
Contact:

Re: MultiTester.ahk - Create responsive desktop applications using HTML, CSS, JS, and AHK!

24 Dec 2017, 08:20

Did you download the release or the source code? The release (MultiTester_v0.2.zip) should have everything needed built in, while the source (as a zip or tar.gz) doesn't include dependencies.

If you want to tinker with the source (not the release version) you'll need a git client. After cloning the repository you'll have to run git submodule update --init --recursive to make it download RichCode.ahk, Cocobelgica's AutoHotkey-JSON, and any other submodule dependencies.
User avatar
Drugwash
Posts: 850
Joined: 29 May 2014, 21:07
Location: Ploieşti, Romania
Contact:

Re: MultiTester.ahk - Create responsive desktop applications using HTML, CSS, JS, and AHK!

24 Dec 2017, 08:55

I got both but I usually fire up the source first, seems more… safe. :) As I said, at least a couple url files in the respective folders would help greatly - I had to dig around the board to find RichCode mentioned in a single comment, which is not quite right IMHO. ;)

I find GitHub extremely unfriendly and overly complicated for my line of thinking so I'm not gonna mess with the code in any way. Just offered my feedback, for what it's worth. :)

I do have one question though, unrelated to the script itself but to its capabilities, somehow: is there a way to load/create and interact with a MozillaWindowClass control in AHK under Windows?

Why I'm asking: a script I made is creating and displaying an ActiveX control to display a formatted link as it should appear on a web page; in Windows everything's fine and dandy, it creates an Internet Explorer_Server1 control that looks and works correctly; however, in Linux (Ubuntu, Mint) under WINE it creates a MozillaWindowClass2 (in Mint 17.2) and some different class I presume in Ubuntu Weezy, because all three controls look differently. I'd like to track this issue down and fix it if possible (it's for a friend of mine that uses Ubuntu) but I'd like to do it in Windows rather than Linux because that thing sucks big time in too many aspects.

Thanks for any help you could provide. If you need details please do ask.
Part of my AHK work can be found here.
geek
Posts: 1051
Joined: 02 Oct 2013, 22:13
Location: GeekDude
Contact:

Re: MultiTester.ahk - Create responsive desktop applications using HTML, CSS, JS, and AHK!

24 Dec 2017, 09:27

Drugwash wrote:I got both but I usually fire up the source first, seems more… safe. :) As I said, at least a couple url files in the respective folders would help greatly - I had to dig around the board to find RichCode mentioned in a single comment, which is not quite right IMHO. ;)

I find GitHub extremely unfriendly and overly complicated for my line of thinking so I'm not gonna mess with the code in any way. Just offered my feedback, for what it's worth. :)
For what it's worth, if you look at the lib folder from the main project page on GitHub it does have links to the requisite libraries. This setup is pretty common, if not even standard practice for software development. If you have a better approach to version control, dependency management, collaboration, and publication, please let me know :P
Drugwash wrote:I do have one question though, unrelated to the script itself but to its capabilities, somehow: is there a way to load/create and interact with a MozillaWindowClass control in AHK under Windows?

Why I'm asking: a script I made is creating and displaying an ActiveX control to display a formatted link as it should appear on a web page; in Windows everything's fine and dandy, it creates an Internet Explorer_Server1 control that looks and works correctly; however, in Linux (Ubuntu, Mint) under WINE it creates a MozillaWindowClass2 (in Mint 17.2) and some different class I presume in Ubuntu Weezy, because all three controls look differently. I'd like to track this issue down and fix it if possible (it's for a friend of mine that uses Ubuntu) but I'd like to do it in Windows rather than Linux because that thing sucks big time in too many aspects.

Thanks for any help you could provide. If you need details please do ask.
I'm not aware of anything like that, but I guess it's possible. The package that WINE uses to do that is Gecko, which can be found here https://wiki.winehq.org/Gecko
User avatar
Drugwash
Posts: 850
Joined: 29 May 2014, 21:07
Location: Ploieşti, Romania
Contact:

Re: MultiTester.ahk - Create responsive desktop applications using HTML, CSS, JS, and AHK!

24 Dec 2017, 10:09

For what it's worth, if you look at the lib folder from the main project page on GitHub it does have links to the requisite libraries.
Yes, I see that, but let's think in more simple terms: Joe user downloads the source package without walking all the GitHub trees and subtrees, and ends up locally with a package that lacks dependencies. Internet access may be flaky or unavailable at some point (you don't wanna know my own issues with that!) so it's best to either include dependencies in the package or offer a good offline hint of where they could be found at at a later time. I'm sure real programmers, collaborators and so on could deal with these things, but it may present difficulties for (not-so-)regular users.

Thanks for the Gecko link, the WineHQ site is unbelievably useless in a search. Dunno if I'll be able to use it without some further help though: how to load a Gecko control as an ActiveX control in an AHK GUI?
It may all be related to specific CSS style or something in WINE itself - the control has a sunken edge that I can't shake off, either through AHK WS_* window styles or CSS inline styles. And on newer Ubuntu/WINE the background color doesn't obey the inline style "background-color:#RRGGBB". Minor issues if you think about it but I'm a perfectionist.

Here's a comparative screenshot of (LTR) Ubuntu Weezy (WINE 3.0), Windows XP, Linux Mint 17.2 (WINE 2.4):
screenshot comparativ FVL crop.png
screenshot comparativ FVL crop.png (17.23 KiB) Viewed 7471 times
Part of my AHK work can be found here.
User avatar
kczx3
Posts: 1640
Joined: 06 Oct 2015, 21:39

Re: MultiTester.ahk - Create responsive desktop applications using HTML, CSS, JS, and AHK!

26 Dec 2017, 09:51

I submitted a couple PRs, one for MultiTester and one for RichCode. Take a look and see what you think. I wasn't able to figure out the regex to highlight function parameters unfortunately. Regex isn't my strong suite.

I changed the color theme to Monokai and based it off of the coloring from Visual Studio Code.
geek
Posts: 1051
Joined: 02 Oct 2013, 22:13
Location: GeekDude
Contact:

Re: MultiTester.ahk - Create responsive desktop applications using HTML, CSS, JS, and AHK!

26 Dec 2017, 18:03

kczx3 wrote:I submitted a couple PRs, one for MultiTester and one for RichCode. Take a look and see what you think. I wasn't able to figure out the regex to highlight function parameters unfortunately. Regex isn't my strong suite.

I changed the color theme to Monokai and based it off of the coloring from Visual Studio Code.
I left a few comments on your PRs.

Return to “Scripts and Functions (v1)”

Who is online

Users browsing this forum: TheNaviator and 85 guests