Chimp

Doubts about the ObjEvent() function

2 posts in this topic

#1 ·  Posted (edited)

Hello and happy new Year to everybody! :)

I'm trying to catch some events occuring within a browser control by simply using the ObjEvent() function.
I think I'm not using that function in a proper way since some events are captured, while other are not.

more precisely, events like those listed in this page are working:
https://msdn.microsoft.com/en-us/library/aa769764(v=vs.85).aspx

while other events listed in other "interfaces", as in the following links, does not works.
https://msdn.microsoft.com/en-us/library/hh801967(v=vs.85).aspx

For exemple, Here I would like to catch events like "DragOver" and/or "Drop" fired while dragging the image on the web control, but I'm not been able to obtain a result.
Those events are listed in the HTMLDocumentEvents4 interface or also in the HTMLImgEvents interface, but I failed to use them.

Any hint that can help to see what I'm doing wrong, or even better that can show how to achieve the result by using the ObjEvent() function (if it's possible?) is welcome.
Thanks a lot.

Here is the simple script that I'm using for my tests:

#include <GUIConstantsEx.au3>
#include <string.au3>

; read html page from bottom of this script
; and write it to a file on disk for later
; usage by the $oIE.navigate
CreateHtmlPage()

Example()
Exit

Func Example()
    Local $hGUIMain = GUICreate("Event Test", 540, 400)

    ; We generate the Browser Control...
    Global $oIE = ObjCreate("Shell.Explorer.2")

    ; and we embed it into the AutoIt GUI
    $hIE = GUICtrlCreateObj($oIE, 5, 5, 530, 390)

    GUISetState() ;Show GUI

    ; load in the browser our previously created web page
    $oIE.navigate('file:///' & @ScriptDir & '\Page.html')

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


    ; --- Setup catch of events ---

    Local $oEventObjects[2]
    $oImage = $oDocument.getElementById('drag1') ; Object reference to The image on the page

    ; https://msdn.microsoft.com/en-us/library/aa769764(v=vs.85).aspx
    ; HTMLDocumentEvents2 interface (catch OnClick, OnMouseOver, .... etc

    ; ObjEvent() "Handles incoming events from the given Object."
    ;   ObjEvent($oParam1, $sParam2 [,$sParam3])
    ; Parameters
    ;               $oParam1 A variable containing an Object from which you want to receive events
    ;
    ;               $sParam2 The prefix of the functions you define to handle receiving events.
    ;                        The prefix is appended by the Objects method name.
    ;
    ;               $sParam3 "interface name" [optional] name of an Event interface to use.
    ;                        Note: It must be a supported as outgoing for the Object AND it must be of type DISPATCH.


    ; Using third parameter as "HTMLDocumentEvents2" as event interface, or even leaving it blank,
    ; is the only way by which I've been able to catch some events from the browser control

    ; OK, events listed here are catched --> https://msdn.microsoft.com/en-us/library/aa769764(v=vs.85).aspx
    $oEventObjects[0] = ObjEvent($oDocument, "IEEvent2_") ;, "HTMLDocumentEvents2")

    ; when I try to catch events fired by the Image dragged on the web page
    ; following attempts do not work (no event is captured and passed to AutoIt)

    ; $oEventObjects[1] = ObjEvent($oDocument, "IEEvent2_", "HTMLDocumentEvents2")
    ; $oEventObjects[1] = ObjEvent($oDocument, "IEEvent2_", "HTMLDocumentEvents4")
    ; $oEventObjects[1] = ObjEvent($oImage, "IEEvent2_", "HTMLDocumentEvents2")
    ; $oEventObjects[1] = ObjEvent($oImage, "IEEvent2_")
    $oEventObjects[1] = ObjEvent($oImage, "IEEvent2_", "HTMLImgEvents2")
    ; -----------------------------

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

    ; the end
    For $i = 0 To UBound($oEventObjects) - 1
        $oEventObjects[$i].Stop ; Tell IE we don't want to receive events.
        $oEventObjects[$i] = 0
    Next
    $oEventObject = 0 ; Kill the Event Object
    $oIE = 0 ; Remove IE from memory (not really necessary).
    GUIDelete($hGUIMain) ; Remove GUI
EndFunc   ;==>Example

; below function should be fired by events
; occurred in the browser's objects
; --- events management zone ---
Volatile Func IEEvent2_onClick($oEvent)
    ConsolePrint("mouse click:")
EndFunc   ;==>IEEvent2_onClick

Volatile Func IEEvent2_onDblClick($oEvent)
    ConsolePrint("mouse DoubleClick:")
EndFunc   ;==>IEEvent2_onDblClick

; Drag related events
Volatile Func IEEvent2_onDragstart($oEvent)
    ConsolePrint("Drag action started")
EndFunc   ;==>IEEvent2_onDragstart

; --- following events are not catched --- ???
Volatile Func IEEvent2_onDragOver($oEvent)
    ConsolePrint("DragOver event")
EndFunc   ;==>IEEvent2_onDragOver

Volatile Func IEEvent2_onDrop($oEvent)
    ConsolePrint("Drop action performed ")
EndFunc   ;==>IEEvent2_onDrop
; ------------------------------

Func ConsolePrint($sMsg)
    ConsoleWrite($sMsg & @CRLF)
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

; example got from here: http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop2
#cs;HTML
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <style>
    #div1, #div2 {
    float: left;
    width: 214px;
    height: 214px;
    margin: 5px;
    padding: 10px;
    border: 1px solid black;
    }
    </style>
    <script>

    function allowDrop(ev) {ev.preventDefault();}

    function drag(ev)   {ev.dataTransfer.setData("text", ev.target.id);}

    function drop(ev)   {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));}

    </script>
    </head>
    <body>

    <h2>Drag and Drop</h2>
    <p>Drag the image back and forth between the two div elements.</p>

    <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">

    <img src="https://www.autoitscript.com/forum/uploads/monthly_2016_01/Chimp.jpg.688f81fa865450e2913b5dc2cb56215f.thumb.jpg.96a6bfa47c0fb8476f39aaf55ad68ed0.jpg"
    draggable="true" ondragstart="drag(event)" id="drag1" width="214" height="214">
    </div>

    <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

    </body>
    </html>
#ce;HTML
;

 

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



#2 ·  Posted (edited)

Hi,

What Follows works on systems with IE11 (doesn't works with IE9).
After further tests I've seen that:
If I want for example receive events from a DIV element, I have to pass to the ObjEvent() function an Object variable that points to that DIV,
But a strange "phenomenon" happens, that is:
If I get the Object reference to the DIV using this statement:

$oDiv1 = $oDocument.getElementById('div1')


The ObjEvent() function will not work,
while If I get the Object reference to that same DIV  by means of a reference to the global javascript object, then the ObjEvent() will work.

$oDiv1 = $ohJS.div1

.... this is strange because both ways used to get a reference to the DIV returns an object reference pointing to the same DIV (or in appearence it seems so).

anyway, the following listing works quite well and it can manage the events fired within the browser control directly in AutoIt.
Here the Drag&Drop of the Chimp picture is totally managed by AutoIt Functions.

Does someone knows why two Object variables, pointing to the same DIV, behave differently on the ObjEvent() function?

 

#include <GUIConstantsEx.au3>
#include <string.au3>
#include <file.au3>

Global $oDocument

Example()
Exit

Func Example()
    ; read html page from bottom of this script
    ; and write it to a temp file on disk for later
    ; usage by the $oIE.navigate
    Local $sFilename = CreateHtmlPage()

    Local $hGUIMain = GUICreate("Event Test", 540, 400)

    ; We generate the Browser Control...
    Global $oIE = ObjCreate("Shell.Explorer.2")

    ; and we embed it into the AutoIt GUI
    $hIE = GUICtrlCreateObj($oIE, 5, 5, 530, 390)

    GUISetState() ;Show GUI

    ; load in the browser the previously created web page
    $oIE.navigate('file:///' & $sFilename)

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

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

    ; --- Setup catch of events ---

    ; The following array holds Handles returned by ObjEvent()
    ; (since this array is Local within a function, it will be
    ;  automatically destroyed when exiting from the function)
    Local $oEventObjects[3], $oDiv1, $oDiv2

    ; GETTING RFERENCE TO THE TARGET OBJ IN THIS WAY WILL NOT WORK
     $oDiv1 = $oDocument.getElementById('div1') ; Object reference to The DIV1 obj
     _ObjDescription($oDiv1, "refereced via $oDocument") ; show obj details just for debug
    ;  $oDiv2 = $oDocument.getElementById('div2') ; Object reference to The DIV2 obj

    ; GETTING RFERENCE IN THIS WAY WILL WORK INSTEAD (!!??) (don't ask me why.....)
     $oDiv1 = $ohJS.div1 ; Object reference to The DIV1 obj
     _ObjDescription($oDiv1, "refereced via $ohJS js gloaba obj") ; show obj details just for debug
     $oDiv2 = $ohJS.div2 ; Object reference to The DIV2 obj

    $oEventObjects[0] = ObjEvent($oDiv1, "IEEvent2_", "HTMLElementEvents2")
    _ObjDescription($oEventObjects[0], "ObjEvent for div1") ; show obj details just for debug
    $oEventObjects[1] = ObjEvent($oDiv2, "IEEvent2_", "HTMLElementEvents2")
    $oEventObjects[1] = ObjEvent($oDocument, "DocEvent2_", "HTMLDocumentEvents2")
    ; -----------------------------
    ConsoleWrite(@CR & @CR & @CR & "--- Events log ---" & @CR)
    ; Loop until the user exits.
    While 1
        Switch GUIGetMsg()
            Case $GUI_EVENT_CLOSE
                ExitLoop
        EndSwitch
    WEnd

    ; the end
    $oIE = 0 ; Remove IE from memory (not really necessary).
    GUIDelete($hGUIMain) ; Remove GUI
    FileDelete($sFilename)
EndFunc   ;==>Example

; following function should be fired by events
; occurred in the browser's objects
;
; The function automatically called by an event
; will receive as parameter an Event Obj.
; This obj is loaded with many properties related to
; the object that fired the event. See following link:
; https://msdn.microsoft.com/en-us/library/aa703876(v=vs.85).aspx

; --- events management zone ---
Volatile Func DocEvent2_onClick($oEvent)
    ConsolePrint("mouse click on " & $oEvent.srcElement.NodeName) ; & " ID:" & $oEvent.srcElement.ID)
EndFunc   ;==>DocEvent2_onClick

Volatile Func DocEvent2_onDblClick($oEvent)
    ConsolePrint("mouse DoubleClick:")
EndFunc   ;==>DocEvent2_onDblClick

; Drag related events
Volatile Func IEEvent2_onDragstart($oEvent)
    ConsolePrint("Drag of element " & $oEvent.srcElement.ID & " started")
    ; we save the data that we want to send to the drop element int the "dataTransfer" object
    $oEvent.dataTransfer.setData("text", $oEvent.srcElement.ID)
EndFunc   ;==>IEEvent2_onDragstart

Volatile Func IEEvent2_onDragOver($oEvent)
    Local Static $iX, $iY
    ; ConsoleWrite("Cancelabe? " & $ohJS.event.cancelable & @CRLF)
    $ohJS.event.preventDefault()
    If $iX <> $oEvent.x Or $iY <> $oEvent.y Then
        ; remember previous position
        $iX = $oEvent.x
        $iY = $oEvent.y
        ConsolePrint( _
                "DragOver " & $oEvent.srcElement.NodeName & " ID: " & $oEvent.srcElement.ID & _
                ". mouse pos is X:" & $oEvent.x & " y:" & $oEvent.y)
    EndIf
EndFunc   ;==>IEEvent2_onDragOver

Volatile Func IEEvent2_onDrop($oEvent)
    ConsolePrint("Drop event on " & $oEvent.srcElement.ID & ".")
    $ohJS.event.preventDefault()
    If _
            ($oEvent.srcElement.ID = "div1" Or $oEvent.srcElement.ID = "div2") _
            And $oEvent.dataTransfer.getData("text") = "chimp" Then ; allowed only chimp dropped on div1 or div2
        ; we move the dragged element (the ID is into the 'dataTransfer' object) to the dropped target
        $oEvent.srcElement.appendChild($oDocument.getElementById($oEvent.dataTransfer.getData("text")))
        ConsolePrint( $oEvent.dataTransfer.getData("text") & " dropped.")
    Else
        ConsolePrint("Dropping '" & $oEvent.dataTransfer.getData("text") & "' is not allowed")
    EndIf
EndFunc   ;==>IEEvent2_onDrop
; ------------------------------

Func ConsolePrint($sMsg)
    ConsoleWrite($sMsg & @CRLF)
EndFunc   ;==>ConsolePrint

Func _ObjDescription(ByRef $oObj, $msg = "") ; for debug purpose
    ConsoleWrite('--Debug:----------------------------------------------------------------------------' & @CRLF & _
            "[" & $msg & "]" & @CRLF)
    If IsObj($oObj) Then
        ConsoleWrite( _
                'The name of the Object:.......................' & ObjName($oObj, $OBJ_NAME) & @CRLF & _
                'Description string of the Object:.............' & ObjName($oObj, $OBJ_STRING) & @CRLF & _
                'The ProgID of the Object:.....................' & ObjName($oObj, $OBJ_PROGID) & @CRLF & _
                'file associated with the obj in the Registry:.' & ObjName($oObj, $OBJ_FILE) & @CRLF & _
                'Module name in which the object runs:.........' & ObjName($oObj, $OBJ_MODULE) & @CRLF & _
                "CLSID of the object's coclass:................" & ObjName($oObj, $OBJ_CLSID) & @CRLF & _
                "IID of the object's interface:................" & ObjName($oObj, $OBJ_IID) & @CRLF)
    Else
        ConsoleWrite("Is not an object" & @CRLF)
    EndIf
EndFunc   ;==>_ObjDescription

Func CreateHtmlPage()
    Local $sStart = @LF & "#cs;HTML"
    Local $sEnd = "#ce;HTML" & @CR
    Local $aArray = _StringBetween(FileRead(@ScriptFullPath), $sStart, $sEnd)
    Local $sPage = _TempFile(@ScriptDir, Default, ".html")
    Local $hFile = FileOpen($sPage, 2) ;  $FO_OVERWRITE (2) = Write mode (erase previous contents)
    FileWrite($hFile, $aArray[0])
    FileFlush($hFile)
    FileClose($hFile)
    Return $sPage
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>
    #div1, #div2 {
    float: left;
    width: 214px;
    height: 214px;
    margin: 5px;
    padding: 10px;
    border: 1px solid black;}
    </style>
    </head>
    <body>
    <h2>Drag and Drop</h2>
    <p>Drag the image back and forth between the two div elements.</p>
    <div id="div1">
    <img src="https://www.autoitscript.com/forum/uploads/monthly_2016_01/Chimp.jpg.688f81fa865450e2913b5dc2cb56215f.thumb.jpg.96a6bfa47c0fb8476f39aaf55ad68ed0.jpg"
    draggable="true" id="chimp" width="214" height="214">
    </div>
    <div id="div2"></div>
    </body>
    </html>
#ce;HTML
;

 

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

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

    • tarretarretarre
      By tarretarretarre
      AutoIt-SocketIo
      Yep yep, this is pretty much an attempt to port the existing project's concept https://socket.io/ to AutoIt's Codebase. So i will not go in to so much detail.
      This is how the communication is done http://i.imgur.com/0mMfsBD.png Each client is isolated to the server http://i.imgur.com/rVO2LFb.png Features
      Easy API VarType Translation (Example: If the server sends an int, the client will receive an int and vice versa) Fully featured examples Data encryption (Using Autoit's UDF Crypt.au3) Limitations / Drawbacks
      Every Broadcast/Emit is limited to a maximum of 16 parameters Every Callback Function has to have the same number of parameters as the Broadcasted/Emited event It is not possible to Broadcast/Emit objects Only 1D-arrays are allowed to be Broadcasted/Emitted (2D arrays will probably never be supported) Changelog
      Version 1.4.0 (This update DOES NOT break scripts)
      Added a new server method: _Io_getSockets which will return an array of all sockets. See more in the doc Added a banning-system, see more at: _Io_getBanlist, _Io_Ban, _Io_Sanction, _Io_IsBanned Added a new default event for clients banned. See more at default events Added two new client and server methods _Io_setEventPreScript And _Io_setEventPostScript. The intent for these is to not DRY when doing debug \ tasks that requires to be ran before or after events. Added a new client and server method _Io_ClearEvents. Added a third optional parameter to _Io_On called $socket, you may only pass the socket returned from _Io_Listen or _Io_Connect. The intent for this change is to allow for server + client in the same envoirment. Added a second parameter to _Io_Loop called $WhoAmI which should used with the new enums $_IO_SERVER and $_IO_CLIENT. The intent for this change is to allow for server + client in the same envoirment. Added a new client method _Io_TransferSocket. Added a new server method _Io_getActiveSocketCount. Optimations, avoiding Redims and unnecessary nested arrays as good as possible etc. Version 1.3.0 (This update DOES NOT break scripts)
      Got rid of unnecessary Redims with sockets and subscriptions in the main loop (This increased write performence greatly) Changed $iMaxDeadSocketsBeforeTidy from 100 to 1000 Changed _Io_setRecvPackageSize($nPackageSize = 2048) to _Io_setRecvPackageSize($nPackageSize = 4096) because 2017. Added Tests for both subscriptions and the automatic TidyUp Added a new server method: _Io_getMaxConnections Added a new server method: _Io_getMaxDeadSocketsCount Added a fifth parameter to the _Io_Listen method called $iMaxConnections which defaults to 100000. If the iMaxConnection + 1 user connects, they will be instantly disconnected. Added a parameter to _Io_Disconnect called $socket which defaults to null. If the iMaxConnections + 1 client connects, they will be instantly disconnected. Version 1.2.0 (This update DOES NOT break scripts)
      Added an option to set the packet-size of TCP-transports, see _Io_setRecvPackageSize Got rid of unnecessary StringLen's in _Io_loop Changed __Io_TidyUp to _Io_TidyUp and added it to the public Api reference list. Changed $iMaxDeadSocketsBeforeTidy default value from 1000 to 100 and added an option to disable it, read more at _Io_Listen Changed $bAutoReconnect from False to True. Fixed gitignore epicZ fail Improvemend Documentation Version 1.1.0 (This update DOES NOT break scripts)
      Fixed bug when Emitting / Broadcasting without any parameters causing a $fCallback crash Optimized Package-handling once again. Added 1D-Array support (Endless nestning). Added Subscriptions (See _Io_Subscribe _Io_Unsubscribe and _Io_BroadcastToRoom). Added new example for subscriptions (Be sure to use different room names when joining with clients) Added Unit testing (See Tests\Runner.au3 and Tests\Tests.au3, to run tests you need a udf found here: https://github.com/tarreislam/Autoit-Unit-Tester) Version 1.0.0
      (This update DOES NOT break scripts) Added data encryption (Using Autoit's UDF Crypt.au3) See more at _Io_EnableEncryption Added new method _Io_Disconnect which can be used with both servers and clients Improved package-handling to increase performance Increased the limit of Broadcasted/Emit parameters from 10 to 16 Api methods
      Server methods
      _Io_Listen($iPort, $iAddress = @IPAddress1, $iMaxPendingConnections = Default, $iMaxDeadSocketsBeforeTidy = 1000, $iMaxConnections = 100000) _Io_Subscribe(ByRef $socket, $sRoomName) _Io_Unsubscribe(ByRef $socket, $sRoomName = null) _Io_Broadcast(ByRef $socket, $sEventName, $p1, $p2, ...$p16)  
      _Io_BroadcastToAll(ByRef $socket, $sEventName, $p1, $p2, ...$p16) _Io_BroadcastToRoom(ByRef $socket, $sDesiredRoomName, $sEventName, $p1, $p2, ...$p16) _Io_socketGetProperty(ByRef $socket, $sProp = Default) _Io_getSockets($bForceUpdate = False, $socket = $__g_io_mySocket, $whoAmI = $__g_io_whoami) _Io_getDeadSocketCount() _Io_getSocketsCount() _Io_getActiveSocketCount() _Io_getMaxConnections() _Io_getMaxDeadSocketsCount() _Io_getBanlist($iEntry = Default) _Io_Ban($socketOrIp, $nTime = 3600, $sReason = "Banned", $sIssuedBy = "system") _Io_Sanction($socketOrIp) _Io_IsBanned($socketOrIp) _Io_TidyUp() Client methods
      _Io_Connect($iAddress, $iPort, $bAutoReconnect = True) _Io_Reconnect(ByRef $socket) Server and Client methods
      _Io_setEventPreScript($fCallback) _Io_setEventPostScript($fCallback) _Io_getVer() _Io_On(Const $sEventName, Const $fCallback, $socket = $__g_io_mySocket) _Io_Emit(ByRef $socket, $sEventName, $p1, $p2, ...$p16) _Io_Loop(ByRef $socket, $whoAmI = $__g_io_whoami) _Io_LoopFacade() _Io_EnableEncryption($sFileOrKey, $CryptAlgId = $CALG_AES_256) _Io_Disconnect($socket = null) _Io_setRecvPackageSize($nPackageSize = 4096) _Io_ClearEvents() _Io_TransferSocket(ByRef $from, ByRef $to) Default events
      Server events
      connection Client events
      banned Server and Client events
      disconnect View source on github
       
      Autoit-Socket-IO-1.0.0.zip (OLD!)
      Autoit-Socket-IO-1.1.0.zip (OLD)
      Autoit-Socket-IO-1.3.0.zip (OLD)
      Autoit-Socket-IO-1.4.0.zip (NEWEST 2017-08-11)
    • cetipabo
      By cetipabo
      Hello,
      i'm trying to use this UDF _IEquerySelectorAll() to check if i clicked a button in a web page.
      here is the index.html:
      and this is my autoit script including the _IEquerySelectorAll() function (modified by mLipok) :

      well, so i'm supposed to see a msgbox when i click the button, but nothing happens...
      Can someone help me please ? something should be wrong here:
       
      $oDoc = _IEDocGetObj($oIE) $oButton = _IEquerySelectorAll($oDoc,'button', 0) ObjEvent($oButton, "_Evt_") Func _Evt_onClick() msgbox(0,"","button clicked") EndFunc  
    • Chimp
      By Chimp
      just for further fun Here is a Javascript version of the nice 3D sine wave posted from @UEZ
      This version uses this nice javascript library:(http://visjs.org/graph3d_examples.html).  (All the 'dirty' work is done by the javascript library, so the whole credit goes of course to that library and not to me...) I've simply injected all the html/javascript stuff into a BrowserControl embedded into an AutoIt GUI.
      Have fun
      #include <GUIConstantsEx.au3> Example() Exit Func Example() Local $oIE = ObjCreate("Shell.Explorer.2") ; Create a BrowserControl Local $hGUI = GUICreate("3D Sinus wave animation demo", 660, 650, 30, 30) GUICtrlCreateObj($oIE, 0, 0, 660, 650) ; Place BrowserControl on the GUI GUISetState() ;Show GUI $oIE.navigate('about:blank') 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") ; ----------------------------- ; Loop until the user exits. While 1 Switch GUIGetMsg() Case $GUI_EVENT_CLOSE ExitLoop EndSwitch WEnd ; the end $oIE = 0 ; Remove IE from memory. GUIDelete($hGUI) ; Remove GUI EndFunc ;==>Example Func _GetHTML() Local $sHTML = _ "<!doctype html>" & @CRLF & _ "<html>" & @CRLF & _ "<head>" & @CRLF & _ " <meta http-equiv=""X-UA-Compatible"" content=""IE=edge"" />" & @CRLF & _ " <title></title>" & @CRLF & _ "" & @CRLF & _ " <style type=""text/css"">" & @CRLF & _ " body {" & @CRLF & _ " font: 10pt arial;" & @CRLF & _ " }" & @CRLF & _ " </style>" & @CRLF & _ "" & @CRLF & _ " <script type=""text/javascript"" src=""https://cdnjs.cloudflare.com/ajax/libs/vis/4.18.0/vis.min.js""></script>" & @CRLF & _ "" & @CRLF & _ " <script type=""text/javascript"">" & @CRLF & _ " var data = null;" & @CRLF & _ " var graph = null;" & @CRLF & _ " var x0, x1, x2" & @CRLF & _ " function custom(x, y, t) {" & @CRLF & _ " // change this function to change the graph" & @CRLF & _ " x0 = 20 - t/180;" & @CRLF & _ " x1 = (x/x0)*(x/x0) + t/10;" & @CRLF & _ " y1 = (y/x0)*(y/x0) + t/10;" & @CRLF & _ " return Math.sin(Math.sqrt(x1+y1));" & @CRLF & _ " }" & @CRLF & _ " // Called when the Visualization API is loaded." & @CRLF & _ " function drawVisualization() {" & @CRLF & _ " // Create and populate a data table." & @CRLF & _ " data = new vis.DataSet();" & @CRLF & _ " // create some nice looking data with sin/cos" & @CRLF & _ " var steps = 25;" & @CRLF & _ " var axisMax = 314;" & @CRLF & _ " var tMax = 800;" & @CRLF & _ " var axisStep = axisMax / steps;" & @CRLF & _ " for (var t = 300; t <= tMax; t = t + 50) {" & @CRLF & _ " for (var x = -axisMax; x < axisMax; x+=axisStep) {" & @CRLF & _ " for (var y = -axisMax; y < axisMax; y+=axisStep) {" & @CRLF & _ " var value = custom(x, y, t);" & @CRLF & _ " data.add([" & @CRLF & _ " {x:x,y:y,z:value,filter:t,style:value}" & @CRLF & _ " ]);" & @CRLF & _ " }" & @CRLF & _ " }" & @CRLF & _ " }" & @CRLF & _ "" & @CRLF & _ " // specify options" & @CRLF & _ " var options = {" & @CRLF & _ " width: '600px'," & @CRLF & _ " height: '600px'," & @CRLF & _ " style: 'surface'," & @CRLF & _ " showPerspective: true," & @CRLF & _ " showGrid: false," & @CRLF & _ " showShadow: false," & @CRLF & _ " // showAnimationControls: false," & @CRLF & _ " keepAspectRatio: true," & @CRLF & _ " verticalRatio: 0.085, // 0.5," & @CRLF & _ " animationInterval: 100, // milliseconds" & @CRLF & _ " animationPreload: true," & @CRLF & _ " animationAutoStart: true," & @CRLF & _ " filterValue: 'time'" & @CRLF & _ " };" & @CRLF & _ "" & @CRLF & _ " // create our graph" & @CRLF & _ " var container = document.getElementById('mygraph');" & @CRLF & _ " graph = new vis.Graph3d(container, data, options);" & @CRLF & _ " }" & @CRLF & _ " </script>" & @CRLF & _ "</head>" & @CRLF & _ "" & @CRLF & _ "<body onload=""drawVisualization();"">" & @CRLF & _ "<div id=""mygraph""></div>" & @CRLF & _ "" & @CRLF & _ "<div id=""info""></div>" & @CRLF & _ "</body>" & @CRLF & _ "</html>" Return $sHTML EndFunc ;==>_GetHTML  
    • Chimp
      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://s29.postimg.org/4g264egmv/Scientists.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