1 (изменено: mozers, 2017-04-05 13:40:20)

Тема: AHK: GUI HTML интерфейс (шаблон для любого проекта)

Умолчу о неоспоримых и многочисленных достоинствах веб-интерфейса (ну и о некоторых его недостатках - тоже). Полагаю, что тот, кому знаком html и javascript и кого связывают возможности контролов AHK Gui свой выбор уже сделал.
Скрипт, предлагаемый вашему вниманию, является учебным. Сочиняя его, учился сам. Из нескольких возможных вариантов процедур выбирал наиболее простой и надежный. Надеюсь, пригодится как шаблон для ваших разработок.

; Для для включения html в exe-шник можно использовать модифицированный Ahk2Exe
; https://autohotkey.com/boards/viewtopic.php?f=24&t=521
; http://fincs.ahk4.net/files/NewAhk2Exe-preview2a.zip
;@Ahk2Exe-AddResource interface.html

#Warn
#NoEnv
#SingleInstance Force
SetBatchLines -1
; Gui, -DPIScale   - не использовать! (Будут проблемы с масштабированием html содержимого)

Gui, Add, GroupBox,            w476 h90                , % "AHK Application"
Gui, Add, Button,  xp14  yp+20 w90          gGetFromIE , % "Get from IE"
Gui, Add, Edit,    x+14  yp    w240        vAHKEditBox , % "test AHK string"
Gui, Add, Button,  x+14  yp    w90           gSendToIE , % "Send to IE"
Gui, Add, Button,  xs+14 y+8   w160    gCallJavaScript , % "Call JavaScript Function"
Gui, Add, ActiveX, x0    y+32  w500 h84 hwndIEhwnd vIE , Shell.Explorer
htmlfile := A_IsCompiled ? "res://" A_ScriptFullPath "/interface.html" : A_ScriptDir "\interface.html"
IE.Navigate(htmlfile)
; loop { ; Ожидание загрузки html - (приводится во всех примерах, но нам для локальной страницы абсолютно ничего не дает)
; 	If !IE.busy
; 		break
; }
Gui, Color, cC0C0C0
; Gui, Show, w500 h188, % "ActiveX Shell.Explorer"
Gui, Show, w500 h190, % "ActiveX Shell.Explorer"

loop { ; Ожидание инициализации подключений (вот эта задержка - обязательна!)
	Try {
		IE.document.All.IEInputBox
		break
	}
}

; Подключение к html элементу IEInputBox
IEInpBox := IE.document.GetElementById["IEInputBox"]
; IEInpBox := IE.document.All.IEInputBox ; альтернативный способ

Events := [] ; Подключение к событиям html элементов INPUT (для всех элементов используйте "*")
Inputs := IE.document.GetElementsByTagName["input"]
Loop % Inputs.length {
	Events[A_Index] := Inputs[A_Index-1]
	ComObjConnect(Events[A_Index], Inputs[A_Index-1].id "_")
}
return

; Нажатие на кнопку "Get from IE"
GetFromIE:
	x := IEInpBox.value
	GuiControl,, AHKEditBox, % x
return

; Нажатие на кнопку "Send to IE"
SendToIE:
	GuiControlGet, y,, AHKEditBox
	IEInpBox.value := y
return

; Нажатие на кнопку "Call JavaScript Function"
CallJavaScript:
	GuiControlGet, param,, AHKEditBox
	IE.document.parentWindow.execScript("tempJsVar=funcTest('" param "')")
	ret := IE.document.Script.tempJsVar
	GuiControl,, AHKEditBox, % ret
return

; Нажатие на кнопку "Get from AHK"
IEButtonGet_OnClick(this) {
	GuiControlGet, v,, AHKEditBox
	this.document.GetElementById["IEInputBox"].value := v
}

; Нажатие на кнопку "Send to AHK"
IEButtonSend_OnClick(this) {
	v := this.document.GetElementById["IEInputBox"].value
	GuiControl,, AHKEditBox, % v
}

GuiEscape:
GuiClose: 
	Gui, Destroy
ExitApp

interface.html

<html>
<head>
<meta http-equiv="content-type" content="text-html; charset=utf-8">
<meta http-equiv="MSThemeCompatible" content="yes">
<style type="text/css">
	/* Задание общих стилей оформления элементов. Все размеры задавать только в pt! (Иначе будут проблемы с нестандартным DPI) */
	* {font:8pt MS Shell Dlg;}
	td {white-space:nowrap; padding-left:8pt;}
	.test {color:red; background-color:yellow;}
</style>
<script type="text/javascript">
	// Выбор элемента, показ всех его свойств, возврат его идентификатора
	function funcTest(i){
		var elements = document.getElementsByTagName('*');
		var i = Math.abs(Number(i)||0); if (i >= elements.length) i = 0;
		var elem = elements[i];
		// Подсвечиваем элемент и показываем все его свойства
		elem.className = 'test';
		ShowElementProps(elem);
		elem.className = '';
		i++;
		return Math.floor(i);
	}
	// Показ всех свойств заданного элемента
	function ShowElementProps(obj) {
		var all_props = [];
		for (var prop in obj){
			try {
				var p = obj[prop];
				if (p) all_props.push(prop + ' = ' + String(p).substr(0,25));
			} catch (e) {}
		}
		alert(obj.tagName + '\n---------------\n' + all_props.sort().join('\n'));
	}
</script>
</head>
<body style="margin:10pt; overflow:hidden; background-color:#629DAC;">
	<fieldset><legend>Internet Explorer</legend>
		<table style="border-width:0; border-collapse:collapse; width:100%; height:28pt;">
			<tr>
				<td>
					<input id="IEButtonGet" type="button" value="Get from AHK">
				</td>
				<td>
					<input id="IEInputBox" style="width:160pt;" value="test HTML string">
				</td>
				<td>
					<input id="IEButtonSend" type="button" value="Send to AHK">
				</td>
			</tr>
		</table>
	</fieldset>
</body>
</html>

Сразу отвечу на вопрос: Почему html не вставлен в ahk скрипт, а находится в отдельном файле?
Если в html всего пара или тройка элементов, то вставка кода в ahk скрипт вполне оправдана. Когда речь идет о более-менее серьезном проекте, то такая интеграция превращается в огромную проблему. Тут и неудобство редактирования инородного кода, и необходимость его преобразования, и отсутствие возможности тестирования,... (список можно продолжить). Это - проблемы, с которыми еще можно кое как справиться, но есть и неразрешимые. Я, например, динамически впихнул и js-скрипты и таблицу стилей и все сработало, но никакого результата от добавления httpEquiv=MSThemeCompatible я так и не увидел. А html без поддержки стилей просто убог (особенно - контролы).
При компиляции html можно оставить в отдельном файле (FileInstall), а можно добавить в ресурсы получившегося exe-файла (вручную, либо с помощью нового Ahk2Exe). В общем, надеюсь, доказал. Внешний html - без вариантов. Кстати, если речь идёт о публикации, то его разработку лучше бы доверить сведущему товарищу, нежели надеяться на то, что великие познания в ahk помогут вам самостоятельно создать приличный html интерфейс.

Жду замечаний от AHK-профессионалов. Вдруг какую то процедуру можно сделать еще проще/надежнее? Может еще чего часто-используемого добавить в данный шаблон?

P.S. Просто убивают некоторые ahk скрипты, авторы которых пытаются управлять элементами html интерфейса с помощью функций AHK и WinAPI вызовов. Ребята, если связались с html, учите js, css! C их помощью все это делается на раз-два.

2

Re: AHK: GUI HTML интерфейс (шаблон для любого проекта)

Тоже интересовался темой использования html-интерфейса в AHK-скриптах. Но решил что главный недостаток — зависимость от версии IE и его настроек перечёркивает достоинства. Не знаю, может я не совсем прав, готов выслушать аргументы защиты.

Разработка AHK-скриптов:
e-mail dfiveg@mail.ru
Skype dmitry_fiveg

3

Re: AHK: GUI HTML интерфейс (шаблон для любого проекта)

mozers, хотелось бы видеть этот скрипт в Коллекции!

4 (изменено: teadrinker, 2017-04-03 20:47:03)

Re: AHK: GUI HTML интерфейс (шаблон для любого проекта)

Для коллекции сыровато, попробуйте понажимать кнопки в разном порядке, в некоторых случаях нет реакции. Кроме того, из примера не понятно, что же использование html даёт такого, что нельзя сделать стандартными для AHK способами.

Разработка AHK-скриптов:
e-mail dfiveg@mail.ru
Skype dmitry_fiveg

5

Re: AHK: GUI HTML интерфейс (шаблон для любого проекта)

ypppu
Полагаю, вначале надо косточки промыть...

teadrinker
"Зависимость от версии IE" - Если любишь использовать все новейшие навороты HTML5 и CSS3 то зависимость от версии будет ощущаться. Если используешь классический синтаксис - никаких проблем. Тем более что совсем уж "баловаться" контрол не позволит (т.к. он наделён далеко не всеми возможностями IE).
"Зависимость от настроек" - Имеется, давно изучена и достаточно просто лечится при необходимости. Гораздо хуже проблемы различных плагинов IE. Но, слава Сhrome, FireFox, Opera и другим браузерам - весь народ перешел на них и IE обычно покоится в системе нетронутый и белоснежный.
В общем, "перечёркивает достоинства" - это, на мой взгляд, чересчур.

Понажимать кнопки в разном порядке, в некоторых случаях нет реакции

Если в обоих InputBox-ах - одинаковый текст, то какую реакцию Вы ждете?

из примера не понятно, что же использование html даёт такого, что нельзя сделать стандартными для AHK способами

Такой задачи не ставилось изначально. Я, конечно, могу добавить в нижнюю половину картинки, всплывающие подсказки, анимацию или видео и мы будем спорить в какой среде это проще и симпатичней реализуется... Зачем?
Цель обозначена в заголовке топика и я хотел бы узнать у знатоков: Все ли (со стороны ahk) выполнено максимально оптимально?

6

Re: AHK: GUI HTML интерфейс (шаблон для любого проекта)

mozers пишет:

Если в обоих InputBox-ах - одинаковый текст, то какую реакцию Вы ждете?

А, с этим разобрался, понятно.

mozers пишет:

Все ли (со стороны ahk) выполнено максимально оптимально?

А что тут можно оптимизировать? Получение значения из контрола через GuiControlGet? Или о чём вы говорите?

Разработка AHK-скриптов:
e-mail dfiveg@mail.ru
Skype dmitry_fiveg

7

Re: AHK: GUI HTML интерфейс (шаблон для любого проекта)

teadrinker пишет:

Или о чём вы говорите?

Да даже не знаю. Просто боюсь что допустил какой нибудь явный ляп по незнанию. Например, долго не мог поверить что в ahk отсутствует числовой for - вот и придумал этот цикл с while. Вот недавно только въехал почему интерпретатор ругался на глобальные переменные в функциях, ну и т.д. пр.
Так что внимательно проверяйте, чтоб мне потом стыдно не было.

8

Re: AHK: GUI HTML интерфейс (шаблон для любого проекта)

mozers пишет:

в ahk отсутствует числовой for

Loop Inputs.length вместо него.

Смысл разработки пока не понял. Это под новый браузер на IE? Или для чего?
Скроллбары убрать не помешало бы.

9

Re: AHK: GUI HTML интерфейс (шаблон для любого проекта)

Flasher пишет:

Loop Inputs.length вместо него

Так не сработает, Loop не ожидает выражение, правильно:

Loop % Inputs.length
Flasher пишет:

Скроллбары убрать не помешало бы.

У меня их не видно. Разница в версиях IE сыграла?
Из недостатков заметил только немного неуклюжий ресайзинг — визуально нижняя часть растягивается, верхняя нет. Кроме того, при нажатии «Call JavaScript Function» к html-элементам новые стили добавляются, но старый у IEInputBox (style="width:96%") почему-то сбрасывается. Это скорее придирки, но если пример простой, то и работать он должен, как часы.

Разработка AHK-скриптов:
e-mail dfiveg@mail.ru
Skype dmitry_fiveg

10

Re: AHK: GUI HTML интерфейс (шаблон для любого проекта)

teadrinker пишет:

Разница в версиях IE сыграла?

Скорее масштаб.

11

Re: AHK: GUI HTML интерфейс (шаблон для любого проекта)

У меня на Win7 с выключенными визуальными эффектами надписи во вкладке IE выглядят грязными и размытыми.

12

Re: AHK: GUI HTML интерфейс (шаблон для любого проекта)

mozers, вы находите "баги" в AutoHotkey почти в каждой вашей теме, полагаю, из вас вышел бы отличный тестировщик.
Скроллов не вижу, зато при нажатии кнопки "Call Javascript.." к кнопкам применяются стили, и они увеличиваются, а поле ввода уходит за пределы окна.

13

Re: AHK: GUI HTML интерфейс (шаблон для любого проекта)

На счет скроллбаров наверное всё-таки версия IE имеет значение.
Lexikos в своём installer.ahk пишет:

; Scale UI by screen DPI.  My testing showed that Vista with IE7 or IE9
    ; did not scale by default, but Win8.1 with IE10 did.  The scaling being
    ; done by the control itself = deviceDPI / logicalDPI.
    logicalDPI := w.screen.logicalXDPI, deviceDPI := w.screen.deviceXDPI
    if (A_ScreenDPI != 96)
        w.document.body.style.zoom := A_ScreenDPI/96 * (logicalDPI/deviceDPI)

14

Re: AHK: GUI HTML интерфейс (шаблон для любого проекта)

В общем, у всех выглядит по-разному, о чём я и говорил.

Разработка AHK-скриптов:
e-mail dfiveg@mail.ru
Skype dmitry_fiveg

15 (изменено: mozers, 2017-04-04 10:25:00)

Re: AHK: GUI HTML интерфейс (шаблон для любого проекта)

teadrinker, нет. Это как раз "известные проблемы" которые я не учел. Будем править.

немного неуклюжий ресайзинг — визуально нижняя часть растягивается, верхняя нет

html растягивается сам. Добавление масштабирования в ahk Gui, полагаю, повлечет неоправданное разрастание кода. Или есть лёгкое решение?

И всем огромное спасибо за толковые замечания! Тестировщики вы - отличные!

16 (изменено: stealzy, 2017-04-04 14:00:13)

Re: AHK: GUI HTML интерфейс (шаблон для любого проекта)

Если 4 раза подряд нажать на Call J.., поле ввода уходит за границы окна и обратно не восстанавливается.
Вы говорили об убогости стандартного gui, как раз недавно видел тему об использовании стилей .msstyles:
http://cfile9.uf.tistory.com/image/27162D3754CFA51A329237
GUI Skinning Methods

mozers, нахожу забавным, что вы добавили комментарий в тему AutoHotkey для чайников!, а сами множество раз наступили на грабли (обрамлении переменных знаками %; команды ждущие переменную или выражение),
описанные teadrinker в ровно предыдущем комментарии из этой темы.
Если уж те, кто туда пишет, не читали сообщения темы, чего вы ждете от "чайников" .

17

Re: AHK: GUI HTML интерфейс (шаблон для любого проекта)

Ребят, я умоляю, давайте не будем сравнивать слона и кита? (Я же про jQuery ни слова не сказал.)
Если кому то очень хочется сравнить возможности и недостатки AHK и DHTML, пожалуйста, заведите отдельную ветку.
Тут я предлагаю учиться правильно использовать весьма функциональный контрол.
А уж применять его или нет - пусть каждый решает самостоятельно.

По озвученным багам:
Честно говоря, всегда "клал" на любителей нестандартного размера шрифта. Сегодня впервые решил учесть и их интересы.
Как оказалось - нет ничего невозможного. Откорректировал код (в первом сообщении):
Исключил Gui, -DPIScale и в html коде все размеры задал в point-ах (pt). html содержимое стало отображаться идентично ahk Gui даже со шрифтами, отличными от 96 DPI.
А код от Lexikos мне почему то только все портит. Где только не пробовал - от IE6 на WinXP до IE11 на Win10.
Кстати, при выборе классической темы, html выглядит даже чуть-чуть аккуратнее чем ahk Gui.
Заменил бестолковую тестовую js функцию на реально полезную для изучения. Долго мучился с желанием сделать все более наглядно и с активным нежеланием наращивать код. Шаблон же - в конце то концов!.
Ну и зафиксировал размеры главного окна т.к. нет желания заморачиваться с масштабированием ahk Gui.
Ну как, пойдет?

18

Re: AHK: GUI HTML интерфейс (шаблон для любого проекта)

Да, сейчас резина в порядке. Правда мне всё равно неясно, для чего нужны подобные склейки с AHK-GUI.

mozers пишет:

Честно говоря, всегда "клал" на любителей нестандартного размера шрифта.

Как же некрасиво... А то, что ими могут оказаться вовсе не любители, а вынужденцы, в голову не приходило? http://www.kolobok.us/smiles/mini/acute_mini.gif

19

Re: AHK: GUI HTML интерфейс (шаблон для любого проекта)

Flasher
Ну ладно, я пойду навстречу. Но останется еще 1000 и 1 прога, с которой будет просто невозможно или очень тяжело работать при нестандартном DPI. Как показывает практика, нестандартное разрешение в 90% случаев выбирают не "вынужденцы", а те кто тупо не понимает всех недостатков такого выбора.

20

Re: AHK: GUI HTML интерфейс (шаблон для любого проекта)

Кстати, при выборе классической темы, html выглядит даже чуть-чуть аккуратнее чем ahk Gui.

У меня буквы размыты слегка.
Наверное надо как-то отключить ClearType.
При исполнении джаваскрипта выскакивает ошибка:

Line: 21
Char:3
"err" is undefined
Code 0.

21

Re: AHK: GUI HTML интерфейс (шаблон для любого проекта)

+ mozers

Не знаю, откуда такая статистика, но даже 10% - это не исключение. Я, к примеру, по-твоему, в них вхожу (FullScreen при 125%)?

22

Re: AHK: GUI HTML интерфейс (шаблон для любого проекта)

Malcev
Странно что он ругается. Хотя формально - прав. Надо добавить в 19 строчку var err;.
Насчет "аккуратности" контролов. ClearType у меня был включен на всех испытуемых машинах. Повышенной размытости html по сравнению с ahk не обнаружил. Может я просто слепну потихоньку?

Flasher, извини, что то даже не хочется переходить на личности. Тут - народ грамотный, все выбирают осознанно.

23

Re: AHK: GUI HTML интерфейс (шаблон для любого проекта)

mozers пишет:

// Подсвечиваем элемент и показываем все его свойства

У меня ничего не подсвечивается.

Разработка AHK-скриптов:
e-mail dfiveg@mail.ru
Skype dmitry_fiveg

24 (изменено: Malcev, 2017-04-05 00:13:44)

Re: AHK: GUI HTML интерфейс (шаблон для любого проекта)

У меня иногда подсвечивается, а иногда нет.
И если нажать несколько раз  на кнопку джаваскрипта, то рано или поздно выйдет такая ошибка:

Line: 28
Char:10
InvalidStateError
Code 0.

mozers пишет:

ClearType у меня был включен на всех испытуемых машинах.

А у меня наоборот везде выключен.
Но IE11 все-равно шрифт сглаживает (У Flasherа на картинке это, кстати, видно).
А на счет DPI - у меня был 15-дюймовый ноут с Win10 с родным разрешением 1920 на 1080, для меня он был мелковат.
Менял разрешение на меньшее - экран мылился.
Увеличил размер шрифта - всё стало на свои места.

25 (изменено: mozers, 2017-04-05 01:00:58)

Re: AHK: GUI HTML интерфейс (шаблон для любого проекта)

Много думал. Переписал весь js. Сейчас свойства всех элементов (их 20) выводятся последовательно. Если в ahk Edit ввести номер - то будет выводится с этого номера.
Стиль прилепляется ко всему подряд, а реально подсветку видно только на видимых элементах, а их совсем немного.
Кстати, о применимости данного контрола: На AHK есть незамысловатые функции позволяющие организовать слайдшоу с различными эффектами (жалюзи, ретушь, смывание, рамка и п.р.)? Просто в IE c помощью DX-фильтров это делается запросто.