Page 1 of 1

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

Posted: 28 Jul 2017, 08:21
by geek
MultiTester.ahk

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

Image

See it in action on imgur

Releases

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

Posted: 28 Jul 2017, 08:52
by BGM
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.

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

Posted: 28 Jul 2017, 08:59
by geek
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).

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

Posted: 28 Jul 2017, 15:28
by burque505
Jxon link
https://github.com/cocobelgica/AutoHotk ... r/Jxon.ahk
Doesn't run under AHK_H as is, AHK_L is fine.
Thanks.

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

Posted: 04 Aug 2017, 09:48
by justjames283
This is great. I really appreciate this script! Any idea on how to implement save code as a file that can be run?

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

Posted: 04 Aug 2017, 10:04
by justjames283
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)
	}

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

Posted: 04 Aug 2017, 10:25
by geek
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.

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

Posted: 08 Aug 2017, 14:33
by justjames283
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.

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

Posted: 11 Aug 2017, 22:32
by Masonjar13
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.

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

Posted: 25 Aug 2017, 08:37
by kczx3
All this needs is your new RichCode class with highlighters for each language :)

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

Posted: 22 Dec 2017, 21:28
by geek
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

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

Posted: 23 Dec 2017, 07:29
by gamergames
can someone tell us n00bs what this thing does exactly?

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

Posted: 23 Dec 2017, 11:25
by geek
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.

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

Posted: 24 Dec 2017, 07:00
by Drugwash
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…?

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

Posted: 24 Dec 2017, 08:20
by geek
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.

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

Posted: 24 Dec 2017, 08:55
by Drugwash
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.

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

Posted: 24 Dec 2017, 09:27
by geek
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

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

Posted: 24 Dec 2017, 10:09
by Drugwash
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 7454 times

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

Posted: 26 Dec 2017, 09:51
by kczx3
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.

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

Posted: 26 Dec 2017, 18:03
by geek
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.