Jump to content
Chimp

how to capture some events from a javascript (custom) object?

Recommended Posts

Hi to all, in this script I'm using a Javascript library called VIS to display data on a timeline. All is performed within a browser control embedded in the AutoIt GUI, and the AutoIt script should interact with what is going on in the browser control.
what I'm stuck on is on finding a way to get notified in the AutoIt script on some events fired from that javascript library.

When I use the ObjEvent()  to get notified about events fired by html elements from the html page, all works ok...
I'm stuck instead on how to receive notifications from events fired by a javascript (custom?) object. The DataSet object.

in very short:
To add, edit or remove Items on the Timeline, first a DataSet is created and bound to the Timeline, then all variations performed on the DataSet will be automatically visualized in the form of Items located on the Timeline. All variations on the DataSet will also fire events. (use the button to create new items from autoit, or doubbleclick on the timeline to also create new items by the javascript library)

now my problem is:
since the DataSet is setted to fire events anytime some data in the DatSet is added and/or changed and/or deleted, i would like to be notified about such events in my AutoIt program, but I've not achieved the goal so far.

In this example the events generated by the DataSet are notified within the HTML page and displayed within the browser control, but not forwarded to AutoIt.

Any help to achieve this goal is higly appreciated.
Thanks

#include <GUIConstantsEx.au3>
#include <MsgBoxConstants.au3>
#include <string.au3>
#include <array.au3>
Global $g_idGUIEdit

 ; read html page from bottom of this script
 ; and write it to a file on disk
CreateHtmlPage()

Example()
Exit

Func Example()
    Local $hGUIMain = GUICreate("Event Test", 1000, 600)
    $g_idGUIEdit = GUICtrlCreateEdit("", 500, 405, 490, 175)
    GUICtrlSetFont(-1, 9, 400, -1, 'Courier New')
    GUICtrlCreateLabel("Below are some Browser events 'captured' from the above web page by AutoIt", 500, 385, 990, 20)
    Local $idGUIExit = GUICtrlCreateButton(" Close and exit", 5, 580, 990, 15)

    Local $hButton1 = GUICtrlCreateButton("Add an Item to timeline", 10, 400, 150, 40)
    GUISetState() ;Show GUI

    ; We prepare the Internet Explorer as our test subject
    Global $oIE = ObjCreate("Shell.Explorer.2")
    $hIE = GUICtrlCreateObj($oIE, 5, 5, 990, 380) ; <- embedd $oIE in the AutoIt GUI

    ; load our web page, javascript and css in the browser
    ToolTip("...downloading javascript, please wait")
    $oIE.navigate('file:///' & @ScriptDir & '\Page.html')
    Sleep(1000) ; Give it some time to load the web page
    ToolTip("")

    Do ; wait for document
        Sleep(250)
        $oDocument = $oIE.document
    Until IsObj($oDocument)

    ; https://msdn.microsoft.com/en-us/library/52f50e9t(v=vs.94).aspx
    ; $ohJS is a reference to the javascript Global Obj
    ; -------------------------------------------------
    Global $ohJS = $oIE.document.parentwindow.JSglobal

    ; --- Setup catch of events ---

    ;   https://msdn.microsoft.com/en-us/library/aa769764(v=vs.85).aspx
    ;   HTMLDocumentEvents2 interface (catch OnClick, OnMouseOver, .... etc
    Global $oEventObject = ObjEvent($oDocument, "IEEvent2_", "HTMLDocumentEvents2") ; OK, this events are catched

    ; Attempt to catch events fired by the DataSet.
    ; items is the DataSet obj created in the Browser
    ; Global $oEventObject = ObjEvent($ohJS.items, "OnDataSet_") ; ???? how to catch events from the DataSet <---- ?????

    ; -----------------------------

    ; Loop until the user exits.
    While 1
        Switch GUIGetMsg()
            Case $GUI_EVENT_CLOSE, $idGUIExit
                ExitLoop

            Case $hButton1
                ; add a job to the timeline (a simple example just to test)
                ; to generate a unique ID I use the following: @YEAR & @MON & @MDAY & @HOUR & @MIN & @SEC & @MSEC
                Local $result = $ohJS.eval("items.add([{id: " & @YEAR & @MON & @MDAY & @HOUR & @MIN & @SEC & @MSEC & ", content: '<b>item 4</b> Added at " & @HOUR & ":" & @MIN & ":" & @SEC & " ', start: '2014-01-19'}]);")
                ConsoleWrite("DataSet now contains " & $ohJS.items.length & " Items" & @CRLF)

        EndSwitch
    WEnd

    ; the end
    $oEventObject.Stop ; Tell IE we don't want to receive events.
    $oEventObject = 0 ; Kill the Event Object
    $oIE = 0 ; Remove IE from memory (not really necessary).
    GUIDelete($hGUIMain) ; Remove GUI
EndFunc   ;==>Example

; --- event management zone ---
; A few Internet Explorer Event Functions
; below function are fired by events occurred in the browser
Volatile Func IEEvent2_onClick($oEvent)
    ConsolePrint("mouse click: " & $oEvent.clientX & ',' & $oEvent.clientY & '  on ' & $oEvent.srcElement.NodeName & '  - ' & $oEvent.srcElement.ID)
EndFunc   ;==>IEEvent2_onClick

Volatile Func IEEvent2_onDblClick($oEvent)
    ConsolePrint("mouse DoubleClick: @" & $oEvent.clientX & ',' & $oEvent.clientY)
EndFunc   ;==>IEEvent2_onDblClick

Volatile Func OnDataSet_add($oEvent)
    ConsolePrint("!!!! event from DataSet " & IsObj($oEvent)) ; type
EndFunc   ;==>OnDataSet_add

Func ConsolePrint($sMsg)
    Local Const $iMaxLines = 9 ; keep last 12 lines only
    $sMsg = @HOUR & ':' & @MIN & ':' & @SEC & ':' & @MSEC & @TAB & $sMsg & @CRLF
    $sMsg = StringReplace(GUICtrlRead($g_idGUIEdit) & $sMsg, @CR, @CR)
    If @extended > $iMaxLines Then ; more than $iMaxLines
        $sMsg = StringMid($sMsg, StringInStr($sMsg, @CR, 0, -1 * $iMaxLines) + 2)
    EndIf
    GUICtrlSetData($g_idGUIEdit, $sMsg)
EndFunc   ;==>ConsolePrint

Func CreateHtmlPage()
    Local $sStart = @LF & "#cs;HTML"
    Local $sEnd = "#ce;HTML" & @CR
    Local $aArray = _StringBetween(FileRead(@ScriptFullPath), $sStart, $sEnd)
    Local $sPage = @ScriptDir & '\Page.html'
    Local $hFile = FileOpen($sPage, 2) ;  $FO_OVERWRITE (2) = Write mode (erase previous contents)
    FileWrite($hFile, $aArray[0])
    FileFlush($hFile)
    FileClose($hFile)
EndFunc   ;==>CreateHtmlPage

#cs;HTML
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <script type="text/javascript">
    var JSglobal = (1,eval)("this");
    </script>
    <style type="text/css">
    body, html {
    font-family: arial, sans-serif;
    font-size: 11pt;
    }
    </style>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.16.1/vis.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.16.1/vis.min.css" rel="stylesheet" type="text/css" />
    </head>
    <body>

    <div id="visualization" style="border-width:3px; border-color:yellow; border-style:double;"></div>
    <p></p>
    <div id="log"></div>

    <script type="text/javascript">
    // DOM element where the Timeline will be attached
    var container = document.getElementById('visualization');

    // Create an empty DataSet (allows two way data-binding)
    var items = new vis.DataSet({type: { start: 'ISODate', end: 'ISODate', notes: '' }});

    // items.addEventListener('click',resetElements,true);

    // add items to the DataSet
    items.add([
    {id: 1, content: 'item 1 <b>start</b>', start: '2014-01-23'},
    {id: 2, content: 'item 2', start: '2014-01-18 00:00', end: '2014-01-18 23:59'},
    {id: 3, content: 'item 3', start: '2014-01-21'},
    {id: 5, content: 'item 5', start: '2014-01-28', type:'point'},
    {id: 6, content: 'item 6', start: '2014-01-26'}
    ]);

    // Configuration for the Timeline
    var options = {orientation: 'top',
    editable: {
    add: true,
    remove: true,
    updateTime: true,
    updateGroup: true
    }
    };

    // Create a Timeline
    var timeline = new vis.Timeline(container, items, options);

    // turn events on
    timeline.on('rangechange', function (properties) {
    logEvent('rangechange', properties);
    });
    timeline.on('rangechanged', function (properties) {
    logEvent('rangechanged', properties);
    });
    timeline.on('select', function (properties) {
    logEvent('select', properties);
    });

    items.on('*', function (event, properties) {
    logEvent(event, properties);
    });

    function logEvent(event, properties) {
    var log = document.getElementById('log');
    var msg = document.createElement('div');
    msg.innerHTML = 'event=' + JSON.stringify(event) + ', ' +
    'properties=' + JSON.stringify(properties);
    log.firstChild ? log.insertBefore(msg, log.firstChild) : log.appendChild(msg);
    }
    </script>
    </body>
    </html>
#ce;HTML
;

 


small minds discuss people average minds discuss events great minds discuss ideas.... and use AutoIt....

Share this post


Link to post
Share on other sites

Hi @genius257 thanks for answering,
... I'm afraid I don't get your hint, all the needed objects are already created in the Browser Control, what I'm trying to achieve is a way to receive notifications about events fired by the javascript DataSet object, hopefully simply using the ObjEvent() function in a "correct" way (it's what I'm not been able)
 could you please elaborate on your hint?


small minds discuss people average minds discuss events great minds discuss ideas.... and use AutoIt....

Share this post


Link to post
Share on other sites
2 hours ago, Chimp said:

Hi @genius257 thanks for answering,
... I'm afraid I don't get your hint, all the needed objects are already created in the Browser Control, what I'm trying to achieve is a way to receive notifications about events fired by the javascript DataSet object, hopefully simply using the ObjEvent() function in a "correct" way (it's what I'm not been able)
 could you please elaborate on your hint?

Hi @Chimp.

No i would say not all object are created, at least not if you want to push JS notifications to AutoIt. Below is your code, and I've added functionality to run AutoIt function instead of your js function named "logEvent".

#include <GUIConstantsEx.au3>
#include <MsgBoxConstants.au3>
#include <string.au3>
#include <array.au3>
Global $g_idGUIEdit

#include <AutoItObject.au3>
Func logEvent($oThis, $event, $properties)
    #forcedef $ohJS
    MsgBox(0, "AutoIt function logEvent", "event=" & $ohJS.JSON.stringify($event) & ", properties=" & $ohJS.JSON.stringify($properties))
EndFunc

 ; read html page from bottom of this script
 ; and write it to a file on disk
CreateHtmlPage()

Example()
Exit

Func Example()
    Local $hGUIMain = GUICreate("Event Test", 1000, 600)
    $g_idGUIEdit = GUICtrlCreateEdit("", 500, 405, 490, 175)
    GUICtrlSetFont(-1, 9, 400, -1, 'Courier New')
    GUICtrlCreateLabel("Below are some Browser events 'captured' from the above web page by AutoIt", 500, 385, 990, 20)
    Local $idGUIExit = GUICtrlCreateButton(" Close and exit", 5, 580, 990, 15)

    Local $hButton1 = GUICtrlCreateButton("Add an Item to timeline", 10, 400, 150, 40)
    GUISetState() ;Show GUI

    ; We prepare the Internet Explorer as our test subject
    Global $oIE = ObjCreate("Shell.Explorer.2")
    $hIE = GUICtrlCreateObj($oIE, 5, 5, 990, 380) ; <- embedd $oIE in the AutoIt GUI

    ; load our web page, javascript and css in the browser
    ToolTip("...downloading javascript, please wait")
    $oIE.navigate('file:///' & @ScriptDir & '\Page.html')
    Sleep(1000) ; Give it some time to load the web page
    ToolTip("")

    Do ; wait for document
        Sleep(250)
        $oDocument = $oIE.document
    Until IsObj($oDocument)

    ; https://msdn.microsoft.com/en-us/library/52f50e9t(v=vs.94).aspx
    ; $ohJS is a reference to the javascript Global Obj
    ; -------------------------------------------------
    Global $ohJS = $oIE.document.parentwindow.JSglobal


    $ohJS.eval("var AutoIt = undefined");create varialbe to hold the object
    _AutoItObject_Startup()
    $oObject = _AutoItObject_Create()
    _AutoItObject_AddMethod($oObject, "logEvent", "logEvent")
    $ohJS.AutoIt = $oObject
;~  $ohJS.eval("alert(AutoIt.logEvent())")

    ; --- Setup catch of events ---

    ;   https://msdn.microsoft.com/en-us/library/aa769764(v=vs.85).aspx
    ;   HTMLDocumentEvents2 interface (catch OnClick, OnMouseOver, .... etc
    Global $oEventObject = ObjEvent($oDocument, "IEEvent2_", "HTMLDocumentEvents2") ; OK, this events are catched

    ; Attempt to catch events fired by the DataSet.
    ; items is the DataSet obj created in the Browser
    ; Global $oEventObject = ObjEvent($ohJS.items, "OnDataSet_") ; ???? how to catch events from the DataSet <---- ?????

    ; -----------------------------

    ; Loop until the user exits.
    While 1
        Switch GUIGetMsg()
            Case $GUI_EVENT_CLOSE, $idGUIExit
                ExitLoop

            Case $hButton1
                ; add a job to the timeline (a simple example just to test)
                ; to generate a unique ID I use the following: @YEAR & @MON & @MDAY & @HOUR & @MIN & @SEC & @MSEC
                Local $result = $ohJS.eval("items.add([{id: " & @YEAR & @MON & @MDAY & @HOUR & @MIN & @SEC & @MSEC & ", content: '<b>item 4</b> Added at " & @HOUR & ":" & @MIN & ":" & @SEC & " ', start: '2014-01-19'}]);")
                ConsoleWrite("DataSet now contains " & $ohJS.items.length & " Items" & @CRLF)

        EndSwitch
    WEnd

    ; the end
    $oEventObject.Stop ; Tell IE we don't want to receive events.
    $oEventObject = 0 ; Kill the Event Object
    $oIE = 0 ; Remove IE from memory (not really necessary).
    GUIDelete($hGUIMain) ; Remove GUI
EndFunc   ;==>Example

; --- event management zone ---
; A few Internet Explorer Event Functions
; below function are fired by events occurred in the browser
Volatile Func IEEvent2_onClick($oEvent)
    ConsolePrint("mouse click: " & $oEvent.clientX & ',' & $oEvent.clientY & '  on ' & $oEvent.srcElement.NodeName & '  - ' & $oEvent.srcElement.ID)
EndFunc   ;==>IEEvent2_onClick

Volatile Func IEEvent2_onDblClick($oEvent)
    ConsolePrint("mouse DoubleClick: @" & $oEvent.clientX & ',' & $oEvent.clientY)
EndFunc   ;==>IEEvent2_onDblClick

Volatile Func OnDataSet_add($oEvent)
    ConsolePrint("!!!! event from DataSet " & IsObj($oEvent)) ; type
EndFunc   ;==>OnDataSet_add

Func ConsolePrint($sMsg)
    Local Const $iMaxLines = 9 ; keep last 12 lines only
    $sMsg = @HOUR & ':' & @MIN & ':' & @SEC & ':' & @MSEC & @TAB & $sMsg & @CRLF
    $sMsg = StringReplace(GUICtrlRead($g_idGUIEdit) & $sMsg, @CR, @CR)
    If @extended > $iMaxLines Then ; more than $iMaxLines
        $sMsg = StringMid($sMsg, StringInStr($sMsg, @CR, 0, -1 * $iMaxLines) + 2)
    EndIf
    GUICtrlSetData($g_idGUIEdit, $sMsg)
EndFunc   ;==>ConsolePrint

Func CreateHtmlPage()
    Local $sStart = @LF & "#cs;HTML"
    Local $sEnd = "#ce;HTML" & @CR
    Local $aArray = _StringBetween(FileRead(@ScriptFullPath), $sStart, $sEnd)
    Local $sPage = @ScriptDir & '\Page.html'
    Local $hFile = FileOpen($sPage, 2) ;  $FO_OVERWRITE (2) = Write mode (erase previous contents)
    FileWrite($hFile, $aArray[0])
    FileFlush($hFile)
    FileClose($hFile)
EndFunc   ;==>CreateHtmlPage

#cs;HTML
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <script type="text/javascript">
    var JSglobal = (1,eval)("this");
    </script>
    <style type="text/css">
    body, html {
    font-family: arial, sans-serif;
    font-size: 11pt;
    }
    </style>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.16.1/vis.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.16.1/vis.min.css" rel="stylesheet" type="text/css" />
    </head>
    <body>

    <div id="visualization" style="border-width:3px; border-color:yellow; border-style:double;"></div>
    <p></p>
    <div id="log"></div>

    <script type="text/javascript">
    // DOM element where the Timeline will be attached
    var container = document.getElementById('visualization');

    // Create an empty DataSet (allows two way data-binding)
    var items = new vis.DataSet({type: { start: 'ISODate', end: 'ISODate', notes: '' }});

    // items.addEventListener('click',resetElements,true);

    // add items to the DataSet
    items.add([
    {id: 1, content: 'item 1 <b>start</b>', start: '2014-01-23'},
    {id: 2, content: 'item 2', start: '2014-01-18 00:00', end: '2014-01-18 23:59'},
    {id: 3, content: 'item 3', start: '2014-01-21'},
    {id: 5, content: 'item 5', start: '2014-01-28', type:'point'},
    {id: 6, content: 'item 6', start: '2014-01-26'}
    ]);

    // Configuration for the Timeline
    var options = {orientation: 'top',
    editable: {
    add: true,
    remove: true,
    updateTime: true,
    updateGroup: true
    }
    };

    // Create a Timeline
    var timeline = new vis.Timeline(container, items, options);

    // turn events on
    timeline.on('rangechange', function (properties) {
    logEvent('rangechange', properties);
    });
    timeline.on('rangechanged', function (properties) {
    logEvent('rangechanged', properties);
    });
    timeline.on('select', function (properties) {
    logEvent('select', properties);
    });

    items.on('*', function (event, properties) {
    //logEvent(event, properties);
        AutoIt.logEvent(event, properties);
    });

    function logEvent(event, properties) {
    var log = document.getElementById('log');
    var msg = document.createElement('div');
    msg.innerHTML = 'event=' + JSON.stringify(event) + ', ' +
    'properties=' + JSON.stringify(properties);
    log.firstChild ? log.insertBefore(msg, log.firstChild) : log.appendChild(msg);
    }
    </script>
    </body>
    </html>
#ce;HTML
;

 

Share this post


Link to post
Share on other sites

Just to add to what @genius257 suggested, you can use that method to directly call any AutoIt function (either built-in or user defined) from within javascript.

#AutoIt3Wrapper_UseX64=n
#include <GUIConstantsEx.au3>
#include <MsgBoxConstants.au3>
#include <string.au3>
#include <array.au3>

;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
#include "AutoItObject.au3"
_AutoItObject_StartUp()
; set up a mini framework of AutoIt Functions/constants and stick them on an object
Global $oAutoIt = _AutoItObject_Create()
_AutoItObject_AddMethod($oAutoIt, "call", "_call")
; Maybe to directly acess any function
Func _call($oSelf, $sFunc, _
        $vParam1 = 0, $vParam2 = 0, $vParam3 = 0, $vParam4 = 0, $vParam5 = 0, $vParam6 = 0, _
        $vParam7 = 0, $vParam8 = 0, $vParam9 = 0, $vParam10 = 0, $vParam11 = 0, $vParam12 = 0, _
        $vParam13 = 0, $vParam14 = 0, $vParam15 = 0, $vParam16 = 0, $vParam17 = 0, $vParam18 = 0, _
        $vParam19 = 0, $vParam20 = 0, $vParam21 = 0, $vParam22 = 0, $vParam23 = 0, $vParam24 = 0, _
        $vParam25 = 0, $vParam26 = 0, $vParam27 = 0, $vParam28 = 0, $vParam29 = 0, $vParam30 = 0)
    Local $sExec = $sFunc & "("
    If @NumParams = 3 And IsArray($vParam1) And UBound($vParam1, 0) = 1 Then
        For $n = 0 To UBound($vParam1) - 1
            $sExec &= "$vParam1[" & $n & "],"
        Next
    Else
        If @NumParams = 2 Then
            $sExec &= ")"
        Else
            For $n = 1 To @NumParams - 2
                $sExec &= "$vParam" & $n & ","
            Next
        EndIf
    EndIf
    Return Execute(StringTrimRight($sExec, 1) & ")")
EndFunc
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;

Global $g_idGUIEdit

; read html page from bottom of this script
; and write it to a file on disk
CreateHtmlPage()

Example()
Exit

Func Example()
    Local $hGUIMain = GUICreate("Event Test", 1000, 600)
    $g_idGUIEdit = GUICtrlCreateEdit("", 500, 405, 490, 175)
    GUICtrlSetFont(-1, 9, 400, -1, 'Courier New')
    GUICtrlCreateLabel("Below are some Browser events 'captured' from the above web page by AutoIt", 500, 385, 990, 20)
    Local $idGUIExit = GUICtrlCreateButton(" Close and exit", 5, 580, 990, 15)

    Local $hButton1 = GUICtrlCreateButton("Add an Item to timeline", 10, 400, 150, 40)
    GUISetState() ;Show GUI

    ; We prepare the Internet Explorer as our test subject
    Global $oIE = ObjCreate("Shell.Explorer.2")
    $hIE = GUICtrlCreateObj($oIE, 5, 5, 990, 380) ; <- embedd $oIE in the AutoIt GUI

    ; load our web page, javascript and css in the browser
    ToolTip("...downloading javascript, please wait")
    $oIE.navigate('file:///' & @ScriptDir & '\Page.html')
    Sleep(1000) ; Give it some time to load the web page
    ToolTip("")

    Do ; wait for document
        Sleep(250)
        $oDocument = $oIE.document
    Until IsObj($oDocument)

    ; https://msdn.microsoft.com/en-us/library/52f50e9t(v=vs.94).aspx
    ; $ohJS is a reference to the javascript Global Obj
    ; -------------------------------------------------
    Global $ohJS = $oIE.document.parentwindow.JSglobal
    $ohJS.AutoIt = $oAutoIt
    ; --- Setup catch of events ---

    ;   https://msdn.microsoft.com/en-us/library/aa769764(v=vs.85).aspx
    ;   HTMLDocumentEvents2 interface (catch OnClick, OnMouseOver, .... etc
    Global $oEventObject = ObjEvent($oDocument, "IEEvent2_", "HTMLDocumentEvents2") ; OK, this events are catched

    ; Attempt to catch events fired by the DataSet.
    ; items is the DataSet obj created in the Browser
;~   Global $oEventObject = ObjEvent($ohJS.items);, "OnDataSet_") ; ???? how to catch events from the DataSet <---- ?????

    ; -----------------------------

    ; Loop until the user exits.
    While 1
        Switch GUIGetMsg()
            Case $GUI_EVENT_CLOSE, $idGUIExit
                ExitLoop

            Case $hButton1
                ; add a job to the timeline (a simple example just to test)
                ; to generate a unique ID I use the following: @YEAR & @MON & @MDAY & @HOUR & @MIN & @SEC & @MSEC
                Local $result = $ohJS.eval("items.add([{id: " & @YEAR & @MON & @MDAY & @HOUR & @MIN & @SEC & @MSEC & ", content: '<b>item 4</b> Added at " & @HOUR & ":" & @MIN & ":" & @SEC & " ', start: '2014-01-19'}]);")
                ConsoleWrite("DataSet now contains " & $ohJS.items.length & " Items" & @CRLF)

        EndSwitch
    WEnd

    ; the end
    $oEventObject.Stop ; Tell IE we don't want to receive events.
    $oEventObject = 0 ; Kill the Event Object
    $oIE = 0 ; Remove IE from memory (not really necessary).
    GUIDelete($hGUIMain) ; Remove GUI
EndFunc   ;==>Example

; --- event management zone ---
; A few Internet Explorer Event Functions
; below function are fired by events occurred in the browser
Volatile Func IEEvent2_onClick($oEvent)
    ConsolePrint("mouse click: " & $oEvent.clientX & ',' & $oEvent.clientY & '  on ' & $oEvent.srcElement.NodeName & '  - ' & $oEvent.srcElement.ID)
EndFunc   ;==>IEEvent2_onClick

Volatile Func IEEvent2_onDblClick($oEvent)
    ConsolePrint("mouse DoubleClick: @" & $oEvent.clientX & ',' & $oEvent.clientY)
EndFunc   ;==>IEEvent2_onDblClick

Volatile Func OnDataSet_add($oEvent)
    ConsolePrint("!!!! event from DataSet " & IsObj($oEvent)) ; type
EndFunc   ;==>OnDataSet_add

Func ConsolePrint($sMsg)
    Local Const $iMaxLines = 9 ; keep last 12 lines only
    $sMsg = @HOUR & ':' & @MIN & ':' & @SEC & ':' & @MSEC & @TAB & $sMsg & @CRLF
    $sMsg = StringReplace(GUICtrlRead($g_idGUIEdit) & $sMsg, @CR, @CR)
    If @extended > $iMaxLines Then ; more than $iMaxLines
        $sMsg = StringMid($sMsg, StringInStr($sMsg, @CR, 0, -1 * $iMaxLines) + 2)
    EndIf
    GUICtrlSetData($g_idGUIEdit, $sMsg)
EndFunc   ;==>ConsolePrint

Func CreateHtmlPage()
    Local $sStart = @LF & "#cs;HTML"
    Local $sEnd = "#ce;HTML" & @CR
    Local $aArray = _StringBetween(FileRead(@ScriptFullPath), $sStart, $sEnd)
    Local $sPage = @ScriptDir & '\Page.html'
    Local $hFile = FileOpen($sPage, 2) ;  $FO_OVERWRITE (2) = Write mode (erase previous contents)
    FileWrite($hFile, $aArray[0])
    FileFlush($hFile)
    FileClose($hFile)
EndFunc   ;==>CreateHtmlPage

#cs;HTML
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <script type="text/javascript">
    var JSglobal = (1,eval)("this"), AutoIt;
    </script>
    <style type="text/css">
    body, html {
    font-family: arial, sans-serif;
    font-size: 11pt;
    }
    </style>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.16.1/vis.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.16.1/vis.min.css" rel="stylesheet" type="text/css" />
    </head>
    <body>

    <div id="visualization" style="border-width:3px; border-color:yellow; border-style:double;"></div>
    <p></p>
    <div id="log"></div>

    <script type="text/javascript">
    // DOM element where the Timeline will be attached
    var container = document.getElementById('visualization');

    // Create an empty DataSet (allows two way data-binding)
    var items = new vis.DataSet({type: { start: 'ISODate', end: 'ISODate', notes: '' }});

    // items.addEventListener('click',resetElements,true);

    // add items to the DataSet
    items.add([
    {id: 1, content: 'item 1 <b>start</b>', start: '2014-01-23'},
    {id: 2, content: 'item 2', start: '2014-01-18 00:00', end: '2014-01-18 23:59'},
    {id: 3, content: 'item 3', start: '2014-01-21'},
    {id: 5, content: 'item 5', start: '2014-01-28', type:'point'},
    {id: 6, content: 'item 6', start: '2014-01-26'}
    ]);

    // Configuration for the Timeline
    var options = {orientation: 'top',
    editable: {
    add: true,
    remove: true,
    updateTime: true,
    updateGroup: true
    }
    };

    // Create a Timeline
    var timeline = new vis.Timeline(container, items, options);

    // turn events on
    timeline.on('rangechange', function (properties) {
    logEvent('rangechange', properties);
    });
    timeline.on('rangechanged', function (properties) {
    logEvent('rangechanged', properties);
    });
    timeline.on('select', function (properties) {
    logEvent('select', properties);
    });

    items.on('*', function (event, properties) {
    logEvent(event, properties);
    });

    function logEvent(event, properties) {
    var log = document.getElementById('log');
    var msg = document.createElement('div');
    msg.innerHTML = 'event=' + JSON.stringify(event) + ', ' +
    'properties=' + JSON.stringify(properties);
    log.firstChild ? log.insertBefore(msg, log.firstChild) : log.appendChild(msg);
    AutoIt.call("ConsolePrint", msg.innerHTML);
    //AutoIt.call("MsgBox", 4096, "Maybe like this", msg.innerHTML);
    }
    </script>
    </body>
    </html>
#ce;HTML
;

 

Share this post


Link to post
Share on other sites

Hi @genius257, thanks very much for your interesting example (as usual from you)

Since I also like understand what's happening under the hood, and since I've never made use before of the AutoitObject.udf, in short this is what I understand:

I thought you built a mechanism that pushes events from Javascript to AutoIt. A reverse way from that used by the ObjEvent(), that instead it "Pulls" events directly  from within AutoIt by listening what's autonomously dispatched by javascript's objects. A bit twisted but quite interesting way,
But it's not like that, It's even better, as @trancexx kindly pointed out (many thanks @trancexx ),  you are not pushing events to AutoIt, but executing AutoiT code directly from within javascript as callback function in response to javascript events... surprising! (now I know why your name is @genius... :)

I've never looked at the AutoitObject.udf before, but I think I've missed something interesting... It's a very powerful tool indeed (if you know how and when to use it of course). It can open a very deep integration between AutoIt and the embedde Browser Control as in this case for example.
Wondering, since it seems an abbandoned thread :'( , if this is a stable and safe tool to use in production and with new OSes...

Many thanks again! @genius257 and @trancexx for the very appreciated and enlightening examples !

P.S.

:huh2: I'm still wondering why this isn't feasible using native ObjEvent() can't listen events fired by the javascript DataSet... ??

Edited by Chimp

small minds discuss people average minds discuss events great minds discuss ideas.... and use AutoIt....

Share this post


Link to post
Share on other sites

 

3 hours ago, Chimp said:

Wondering, since it seems an abbandoned thread :'( , if this is a stable and safe tool to use in production and with new OSes.

Well if you want to make sure or change something, the source for the dll is included in the thread. I've tried looking into adding functionality for getter and setter, but I'm not experienced enough to fully understand it, and too lazy to read up so far :) maybe a day when I'm bored.

4 hours ago, Chimp said:

:huh2: I'm still wondering why this isn't feasible using native ObjEvent() can't listen events fired by the javascript DataSet... ??

As i understand the ObjEvent catches events from the object itself, so the browser object would haft to have some extra functionality, or javascript could use "fireEvent", with some information sent along with the event.

44 minutes ago, trancexx said:

You actually don't need AutoItObject for simple tasks like this, because ObjCreateInterface() exist for some time now, so you can write:

Wow! I didn't know that was possible thank you ;)

 

Edit:

4 hours ago, Chimp said:

code directly from within javascript as callback function in response to javascript events... surprising! (now I know why your name is @genius... :)

Thank you for your flattering compliment *blush*

4 hours ago, Chimp said:

Many thanks again! @genius257 and @trancexx for the very appreciated and enlightening examples !

Anytime! :D Glad i could help

Share this post


Link to post
Share on other sites
1 hour ago, trancexx said:

.... You actually don't need AutoItObject for simple tasks like this ...

... simple taks like this??? :frantics: ....you are centuries ahead!

1 hour ago, trancexx said:

.... because ObjCreateInterface() exist for some time now, so you can write: .....

... you really fly high, even over the eagles :thumbsup:

 

@trancexx, WAW! you made my day. Thank you very much for this pearl of code! It simply achieves the goal without relying on 'third parts'...,

I really like it very much.... (even if I don't understand much of what's happening inner the script..:blink:).

what other to say?  ....thanks for existing! :)

 

 

49 minutes ago, genius257 said:

Well if you want to make sure or change something, the source for the dll is included in the thread. I've tried looking into adding functionality for getter and setter, but I'm not experienced enough to fully understand it, and too lazy to read up so far :) maybe a day when I'm bored.

@genius257 I am not able to do this, but.... I hope that you get bored sooner or later.... ;)

 

Thank you everybody !


small minds discuss people average minds discuss events great minds discuss ideas.... and use AutoIt....

Share this post


Link to post
Share on other sites
4 hours ago, trancexx said:

^^ AutoitObject isn't maintained. The version I tested with was compiled by @AdmiralAlkex and I think x64 version isn't working. I'm not sure if he changed some compile options or is it something else.

I had to install some helpfile creator or something, you can see my ramblings in the post before the upload... But I'm fairly sure I wouldn't have changed something that could affect the running of the code.

If anything's broken in a way it shouldn't be, maybe I didn't have the last version of the code. No one did ever clearly confirm that I did. I am not the only one with a copy of the SVN, am I?

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By tarretarretarre
      Autoit-Socket-IO
      Introduction
      Autoit-Socket-IO is a event driven TCP/IP wrapper heavily inspired from Socket.IO with focus on user friendliness and long term sustainability.
      I created this UDF because I was fascinated how Socket.IO made a such scary task "reliable and secure networking" so simple for the developer. So this was my main motivation.
      I constantly want to make this UDF faster and better, so if you have any suggestions. Do not hesitate to make requests!
      Features
      Flexiable and easy to understand API Above avarage documentation "Fully featured" examples Security in form of data encryption and middleware-support Limitations
      Speed. Because I want this UDF to be as flexible and simple as possible. Sometimes speed is sacrificed, but that does not mean i don't try to . It is not possible to emit objects mainly because autoit does not support serialization. Only 1D-arrays can be emitted (2D arrays will probably never be supported) Success story
      Since December 2017-now I have used version 1.5.0 in an production environment for 40+ clients with great success, the only downtime is planned windows updates and power outages.
      Getting started
      Download the script from AutoIt or pull it from the official github repo git@github.com:tarreislam/Autoit-Socket-IO.git and checkout the tag 2.0.0 The documentation is located at Docs\index.html Take a look in the examples/ folder Changelog
      Version 2.0.0 (This update break scripts. Please consult the upgrade.md for guidance)
      All global internal variables has been renamed. Added a bunch of new API methods: _Io_RegisterMiddleware, _Io_whoAmI, _Io_IsClient, _Io_IsServer, _Io_getAllByProperty and _Io_getFirstByProperty and some more. Read more about these in the documentation. _Io_socketGetProperty now has a setter method called _Io_socketSetProperty which can be used to set custom properties. _Io_socketGetProperty now has a third parameter "default" which is used when a property is not found Removed _Io_setEventPostScript and _Io_setEventPretScript in favor of _Io_RegisterMiddleware Improved documentation (It still needs some love though) Improved the verbosity of _Io_DevDebug  
      Newest version (2019-09-29!)
      Autoit-Socket-IO-2.0.0.zip
      Older versions (Not supported anymore)
      Autoit-Socket-IO-1.0.0.zip Autoit-Socket-IO-1.1.0.zip Autoit-Socket-IO-1.3.0.zip Autoit-Socket-IO-1.4.0.zip Autoit-Socket-IO-1.5.0.zip
    • By Chimp
      Making the integration between AutoIt and the BrowserControl easier may facilitate the development of interesting programs. Just think of all those (fantastic) libraries and frameworks available for javascript that could be integrated and exploited in an AutoIt program. For example, to graphically present the results of an AutoIt processing in the GUI, ... and many other possibilities. Providing the basic functions to implement this synergistic interaction is the purpose of this post (if for no other reason, just even to collect some tests done over time here and there, so as not to leave them scattered and easily find them in just one place)
      In this UDF there are only a few functions (or better if called wrappers), but I hope to add more as I go and, even better, to receive suggestions and advice on new features and techniques to improve and expand it.
      _WebBrowser_GUICtrlCreate Create an Internet Explorer 'Browser Control' _WebBrowser_SetHTML Set a new HTML listing in the BrowserControl _WebBrowser_CSS_Inject Creates into the html document a CSS node element with embedded the passed CSS _WebBrowser_JS_Inject Creates into the html document a javascript node element with embedded the passed javascript _WebBrowser_JS_Eval Evaluates a passed string as JavaScript code and executes it _WebBrowser_JS_setTimeout Calls a javascript function or executes a javascript code snippet [option after a specified delay] _WebBrowser_JS_ElementGetRef Retrieves a reference to an element suitable to be used from AutoIt _WebBrowser_ExecuteDotNotation Get a reference to an object's child member or the value of a property, by means of a dotted path _WebBrowser_BasicHTML Returns a basic html page listing (a little enhanced than about:blank) The three examples provided in the attached ziped file are a bit 'improvised' and do not take advantage of all the possibilities offered by the underlying javascript libraries used. They are just three "hello world" scripts to test the ABC of the interaction with the "BrowserControl".
      (ToDo: Interaction with javascript custom events)
      Bug reports, creative criticisms and suggestions (particularly regarding the interaction with javascript custom events) are welcome
      I hope you can have fun with the Browser Control
      BrowserControl.zip
    • By Chimp
      This is a little experiment that makes use of a "Browser Control" embedded in a GUI in order to be able to use AutoIt, HTML, JavaScript and CSS all together.
      This little toy will only work on systems with IE11.
      The purpose is to drag all the names of the scientists & drop on the right ones. (among scientists it has also infiltrated an intruder). I hope you find it entertaining.
      I've posted it here in the hope to have some suggestions on how to improve it all (I mean the interaction between Autoit Javascript html and css). Thanks
      ; this works on systems with IE11 ; ------------------------------- #include <GUIConstantsEx.au3> #include <array.au3> Global $oIE, $oDocument, $ohJS, $sDroping Global $iCorrect = 0, $iGoal = 11 Example() Exit Func Example() Local $aScientists[12][2] = _ [["Schrodinger", "Schrodinger"],["Planck", "Planck"],["Pauli", "Pauli"],["Einstein", "Einstein"], _ ["Chimp", "Chimp"],["Dirac", "Dirac"],["Heisenberg", "Heisenberg"],["Born", "Born"], _ ["De Broglie", "De_Broglie"],["Bohr", "Bohr"],["Sommerfeld", "Sommerfeld"],["", "empty"]] Local $oIE = ObjCreate("Shell.Explorer.2") ; Create a BrowserControl Local $hGUI = GUICreate("", 660, 600, 30, 30) GUICtrlCreateObj($oIE, 0, 0, 660, 600) ; Place BrowserControl on the GUI GUISetState() ;Show GUI $oIE.navigate('about:blank') ; file:///' & @ScriptDir & '\WhoIsWho.html') While Not String($oIE.readyState) = 'complete' ; wait for about:blank Sleep(100) WEnd ; this waits till the document is ready to be used (portion of code from IE.au3) While Not (String($oIE.readyState) = "complete" Or $oIE.readyState = 4) Sleep(100) WEnd While Not (String($oIE.document.readyState) = "complete" Or $oIE.document.readyState = 4) Sleep(100) WEnd $oIE.document.Write(_GetHTML()) ; inject lising directly to the HTML document: $oIE.document.close() ; close the write stream $oIE.document.execCommand("Refresh") While Not String($oIE.readyState) = 'complete' ; wait for readyState after a refresh Sleep(100) WEnd ; https://msdn.microsoft.com/en-us/library/52f50e9t(v=vs.94).aspx ; $ohJS is a reference to the javascript Global Obj ; ------------------------------------------------- $ohJS = $oIE.document.parentwindow.JSglobal $oDocument = $oIE.document Local $oTable1 = $ohJS.table1 Local $oTable2 = $ohJS.table2 _Randomize($aScientists, $oTable1) ; --- Setup events ------------ ; https://msdn.microsoft.com/en-us/library/hh801967(v=vs.85).aspx Local $aoEventObject[2] $aoEventObject[0] = ObjEvent($oTable1, "IEEvent_", "HTMLTableEvents2") $aoEventObject[1] = ObjEvent($oTable2, "IEEvent_", "HTMLTableEvents2") ; ----------------------------- ; Loop until the user exits. While 1 Switch GUIGetMsg() Case $GUI_EVENT_CLOSE ExitLoop EndSwitch If $iCorrect = $iGoal Then _Goal() _Randomize($aScientists, $oTable1) $iCorrect = 0 EndIf WEnd ; the end For $i = 0 To UBound($aoEventObject) - 1 $aoEventObject[$i] .stop Next $aoEventObject = 0 ; Kill the Event Object $oIE = 0 ; Remove IE from memory (not really necessary). GUIDelete($hGUI) ; Remove GUI EndFunc ;==>Example ; --- event management zone --- ; following functions are fired by events occurred in the browser control Volatile Func IEEvent_onDragstart($oEvent) ; we save the ID of the dragged obj into the $sDroping variable ; for a later use in the drop function $sDroping = $oEvent.srcElement.ID EndFunc ;==>IEEvent_onDragstart Volatile Func IEEvent_onDragOver($oEvent) $ohJS.event.preventDefault() EndFunc ;==>IEEvent_onDragOver Volatile Func IEEvent_onDrop($oEvent) $ohJS.event.preventDefault() If $sDroping <> "" Then If $oDocument.getElementById($sDroping).innerText <> $oEvent.srcElement.innerText Then If $oEvent.srcElement.ClassName = $oDocument.getElementById($sDroping).ClassName Then $oEvent.srcElement.innerText = $oDocument.getElementById($sDroping).innerText $oDocument.getElementById($sDroping).innerText = "" $oDocument.getElementById($sDroping).draggable = False $oDocument.getElementById($sDroping).setAttribute("style") = "background-color: #80ff80;" $iCorrect += 1 Else For $i = 1 To 3 $oDocument.getElementById($sDroping).setAttribute("style") = "background-color: #ff0000;" Sleep(125) $oDocument.getElementById($sDroping).setAttribute("style") = "background-color: #ffffff;" Sleep(125) Next EndIf EndIf $sDroping = "" EndIf EndFunc ;==>IEEvent_onDrop Func _Randomize(ByRef $aScientists, ByRef $oTable) Local $iRows = ($oTable.rows.length) - 1 Local $iCols = ($oTable.rows.item(0).cells.length) - 1 Local $index _ArrayShuffle($aScientists) For $y = 0 To $iRows For $x = 0 To $iCols $index = ($y * ($iCols + 1)) + $x $oTable.rows.item($y).cells.item($x).innerText = $aScientists[$index][0] ; text $oTable.rows.item($y).cells.item($x).className = $aScientists[$index][1] ; class $oTable.rows.item($y).cells.item($x).draggable = $aScientists[$index][0] <> "" Next Next EndFunc ;==>_Randomize Func _Goal() Local $oTable1 = $ohJS.table1 ; names Local $oTable2 = $ohJS.table2 ; photos Local $iRows = ($oTable1.rows.length) Sleep(250) Local $iCols = 6 ; ($oTable1.rows.item(0).cells.length) Local $aIndex[$iRows * $iCols], $sTemp For $i = 0 To UBound($aIndex) - 1 $aIndex[$i] = $i ; + 1 Next _ArrayShuffle($aIndex) For $i = 0 To UBound($aIndex) - 1 $oTable2.rows.item(Int($aIndex[$i] / $iCols)).cells.item(Mod($aIndex[$i], $iCols)).innerText = "" $oTemp0 = $oTable2.rows $oTemp1 = $oTemp0.item(Int($aIndex[$i] / $iCols)).cells $oTemp2 = $oTemp1.item(Mod($aIndex[$i], $iCols)).getAttribute("style") $oTable2.rows.item(Int($aIndex[$i] / $iCols)).cells.item(Mod($aIndex[$i], $iCols)).setAttribute("style") = "background-color: " & _rndColor() Sleep(100); MsgBox(0,"Debug",$sTemp) $oTable2.rows.item(Int($aIndex[$i] / $iCols)).cells.item(Mod($aIndex[$i], $iCols)).setAttribute("style") = $oTemp2 Next For $x = 1 To 2 For $i = 0 To UBound($aIndex) - 1 $oTable1.rows.item(Int($aIndex[$i] / $iCols)).cells.item(Mod($aIndex[$i], $iCols)).setAttribute("style") = "background-color: " & _rndColor() Sleep(100) $oTable1.rows.item(Int($aIndex[$i] / $iCols)).cells.item(Mod($aIndex[$i], $iCols)).setAttribute("style") = "background-color: #ffffff;" Next Next EndFunc ;==>_Goal Func _rndColor() Return String("#" & Hex(Random(0, 255, 1), 2) & Hex(Random(0, 255, 1), 2) & Hex(Random(0, 255, 1), 2) & ";") EndFunc ;==>_rndColor Func _GetHTML() Local $sHTML = _ "<!DOCTYPE HTML>" & @CRLF & _ "<html>" & @CRLF & _ "<head>" & @CRLF & _ "<meta http-equiv=""X-UA-Compatible"" content=""IE=edge"" />" & @CRLF & _ " <script type=""text/javascript"">" & @CRLF & _ " var JSglobal = (1,eval)(""this"");" & @CRLF & _ " </script>" & @CRLF & _ "</head>" & @CRLF & _ "<body>" & @CRLF & _ "<h2>Who is who?</h2>" & @CRLF & _ "<p>Drag&Drop names on the right scientist</p>" & @CRLF & _ "<img src=""https://i.imgur.com/STWql7w.jpg""" & @CRLF & _ "height=""394"" width=""640""" & @CRLF & _ "style=""position: absolute; left: 10px; top: 100px;"">" & @CRLF & _ "" & @CRLF & _ "<style>" & @CRLF & _ ".target td {width: 100px; height: 160px; text-align: center; color: white; font-weight: bold; vertical-align: bottom; border: 0px solid grey;}" & @CRLF & _ ".source td {width: 100px; height: 30px; text-align: center; border: 1px solid red;}" & @CRLF & _ "</style>" & @CRLF & _ "" & @CRLF & _ "<table class=""target"" style=""position: absolute; left: 25px; top: 100px;"" id=""table2"">" & @CRLF & _ " <tr><td class=""Schrodinger""></td><td class=""Planck""></td><td class=""Pauli""></td><td class=""Einstein""></td><td class=""Chimp""></td><td class=""Dirac""></td></tr>" & @CRLF & _ " <tr><td class=""Heisenberg""></td><td class=""Born""></td><td class=""De_Broglie""></td><td class=""Bohr""></td><td class=""Sommerfeld""></td><td class=""empty""></td></tr>" & @CRLF & _ "</table>" & @CRLF & _ "" & @CRLF & _ "<table class=""source"" style=""position: absolute; left: 10px; top: 504px;"" id=""table1"">" & @CRLF & _ " <tr><td ID=""td1""></td><td ID=""td2""></td><td ID=""td3""></td><td ID=""td4"" ></td><td ID=""td5"" ></td><td ID=""td6"" ></td></tr>" & @CRLF & _ " <tr><td ID=""td7""></td><td ID=""td8""></td><td ID=""td9""></td><td ID=""td10""></td><td ID=""td11""></td><td ID=""td12""></td></tr>" & @CRLF & _ "</table>" & @CRLF & _ "</body>" & @CRLF & _ "</html>" Return $sHTML EndFunc ;==>_GetHTML  
    • By Phil1991
      Hi,
      I'm working on an interface and I have a problem with zoom management. In desktop mode it works and in android cell mode it seems to work fine too. However, on a Windows tablet, it seems to have a problem ... Basically what I'm trying to do is display a modal in bootstrap 4. But when on the tablet I zoom, my modal s really big and out of my screen. On the android mobile, I remove the zoom before displaying the modal but on the Windows tablet I am unable to reproduce the same behavior.
       
      My toggle function to reset zoom before display modal  ( Yeah it maybe sketches but I'm not find other solutions)
      function resetZooming() { if (zoomOut) { $('meta[name=viewport]').attr('content', 'width=device-width, initial-scale=1.0, maximum-scale=1'); setTimeout(resetZooming, 1000); zoomOut = false; }else{ $('meta[name=viewport]').attr('content', 'width=device-width, initial-scale=1.0'); zoomOut = true; } } And I call this function under my event
      $("#modalCreationForm").modal("show"); resetZooming();  
      If you have any ideas
      Thank you
×
×
  • Create New...