Dynamic html in au3

[ivan]

Ever wanted to dynamically manipulate javascript objects in autoit, query object properties or even execute methods?

The example below is for an hta application which has 2 variables declared, IsLoaded and oRect.

The javascript basically creates js objects with oRect using 2 classes to create a rectangle when the document is loaded.

by creating objects from the IsLoaded and oRect hta variables, Autoit can execute the methods from the javascript object.

I know the example is ugly, but I'm sure you can see the potential.

By the way, this is not limited to javascript, but you may use it with vb as you can call vb from an hta and even access the FileSystem

IVAN

expandcollapse popup

#include <GUIConstants.au3>
#include <IE.au3>
#Include <Misc.au3>
Global $jsScript = '    <script type="text/javascript">' & @CRLF _
         & '    oHTA.IsLoaded=0;' & @CRLF _
         & '    oHTA.oRect=new Array();' & @CRLF _
         & '// class fJS_RectStruct' & @CRLF _
         & 'function fJS_RectStruct(pX,pY,pW,pH,pColour,pInsance){' & @CRLF _
         & "    this.Id='Rect_'+pInsance;" & @CRLF _
         & "    this.Title='Rectangle #'+pInsance;" & @CRLF _
         & "    this.Colour=pColour;" & @CRLF _
         & "    this.Pos=Object();" & @CRLF _
         & "    this.Pos=Object();" & @CRLF _
         & "    this.Pos.x=Object();" & @CRLF _
         & "    this.Pos.y=Object();" & @CRLF _
         & "    this.Pos.w=Object();" & @CRLF _
         & "    this.Pos.h=Object();" & @CRLF _
         & "    this.Pos.x.val=pX;" & @CRLF _
         & "    this.Pos.x.unit='px';" & @CRLF _
         & "    this.Pos.y.val=pY;" & @CRLF _
         & "    this.Pos.y.unit='px';" & @CRLF _
         & "    this.Pos.w.val=pW;" & @CRLF _
         & "    this.Pos.w.unit='px';" & @CRLF _
         & "    this.Pos.h.val=pH;" & @CRLF _
         & "    this.Pos.h.unit='px';" & @CRLF _
         & "    // methods" & @CRLF _
         & "    this._GetId=_GetId;" & @CRLF _
         & "    this._GetTitle=_GetTitle;" & @CRLF _
         & "    this._GetPos=_GetPos;" & @CRLF _
         & "    this._GetColour=_GetColour;" & @CRLF _
         & "    this._SetTitle=_SetTitle;" & @CRLF _
         & "    this._SetPos=_SetPos;" & @CRLF _
         & "    this._SetColour=_SetColour;" & @CRLF _
         & "}" & @CRLF _
         & "/*  METHODS */" & @CRLF _
         & "function _GetId(){ return this.Id;}" & @CRLF _
         & "function _GetTitle(){ return this.Title;}" & @CRLF _
         & "function _GetPos(){ " & @CRLF _
         & "    var lPos=Array();" & @CRLF _
         & "    lPos[0]=this.Pos.x.val;" & @CRLF _
         & "    lPos[1]=this.Pos.y.val;" & @CRLF _
         & "    lPos[2]=this.Pos.w.val;" & @CRLF _
         & "    lPos[3]=this.Pos.h.val;" & @CRLF _
         & "return lPos;" & @CRLF _
         & "}" & @CRLF _
         & "function _GetColour(){return this.Colour;}" & @CRLF _
         & "function _SetTitle(pTitle){ " & @CRLF _
         & "    var lRef=document.getElementById(this.Id);" & @CRLF _
         & "    this.Title=pTitle;" & @CRLF _
         & "    lRef.title=this.Title;" & @CRLF _
         & "}" & @CRLF _
         & "function _SetPos(pX,pY,pW,pH){ " & @CRLF _
         & "    var lRef=document.getElementById(this.Id);" & @CRLF _
         & "    this.Pos.x.val=pX;" & @CRLF _
         & "    this.Pos.y.val=pY;" & @CRLF _
         & "    this.Pos.w.val=pW;" & @CRLF _
         & "    this.Pos.h.val=pH;" & @CRLF _
         & "    lRef.style.left     =this.Pos.x.val.toString()+this.Pos.x.unit.toString();" & @CRLF _
         & "    lRef.style.top      =this.Pos.y.val.toString()+this.Pos.y.unit.toString();" & @CRLF _
         & "    lRef.style.width    =this.Pos.w.val.toString()+this.Pos.w.unit.toString();" & @CRLF _
         & "    lRef.style.height   =this.Pos.h.val.toString()+this.Pos.h.unit.toString();" & @CRLF _
         & "}" & @CRLF _
         & "function _SetColour(pColour){ " & @CRLF _
         & "    var lRef=document.getElementById(this.Id);" & @CRLF _
         & "    this.Colour=pColour;" & @CRLF _
         & "    lRef.style.backgroundColor=pColour;" & @CRLF _
         & "}" & @CRLF _
         & '// class fJS_RectCreate' & @CRLF _
         & "function fJS_RectCreate(pParentId,pX,pY,pW,pH,pColour,pInsance){" & @CRLF _
         & "    var lHTML='<div ', lAttributes='style=" & '"' & "position: absolute; ',lRef=''; " & @CRLF _
         & "    this.ParentId=pParentId;" & @CRLF _
         & "    this.Struct=fJS_RectStruct;" & @CRLF _
         & "    this.Struct(pX,pY,pW,pH,pColour,pInsance);" & @CRLF _
         & "    lAttributes+='left: '+this.Pos.x.val+this.Pos.x.unit+'; ';" & @CRLF _
         & "    lAttributes+='top: '+this.Pos.y.val+this.Pos.y.unit+'; ';" & @CRLF _
         & "    lAttributes+='width: '+this.Pos.w.val+this.Pos.w.unit+'; ';" & @CRLF _
         & "    lAttributes+='height: '+this.Pos.h.val+this.Pos.h.unit+'; ';" & @CRLF _
         & "    lAttributes+='background-color: '+this.Colour+';" & ' "' & "'; " & @CRLF _
         & "    lHTML+='id=" & '"' & "'+this.Id+'" & '" title="' & "'+this.Title+'" & '"' & "'+lAttributes+'></div>';" & @CRLF _
         & "    lRef=document.getElementById(this.ParentId);" & @CRLF _
         & "    lRef.innerHTML=lRef.innerHTML+lHTML;" & @CRLF _
         & "}" & @CRLF _
         & "window.onload = fJS_EventWinLoad;   // Pass onload window event to fJs_EventWinLoad" & @CRLF _
         & "function fJS_EventWinLoad(){" & @CRLF _
         & "    oHTA.oRect[oHTA.oRect.length]=new fJS_RectCreate('ParentLayerId',0,0,200,100,'#0000FF',oHTA.oRect.length);" & @CRLF _
         & "    oHTA.IsLoaded=1;" & @CRLF _
         & "}" & @CRLF _
         & "</script>" & @CRLF

Global $htaCode = '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">' & @CRLF _
         & '<html xmlns="http://www.w3.org/1999/xhtml" >' & @CRLF _
         & '<head>' & @CRLF _
         & '    <title>js2au3</title>' & @CRLF _
         & '    <HTA:APPLICATION ID="oHTA" APPLICATIONNAME="EmbeddedHTA"' & @CRLF _
         & '    var IsLoaded ' & @CRLF _
         & '    var oRect ' & @CRLF _
         & '    />' & @CRLF _
         & $jsScript & @CRLF _
         & '</head>' & @CRLF _
         & '<body unselectable="on" scroll="no" oncontextmenu="return false;">' & @CRLF _
         & '<div id="ParentLayerId" style="position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; background-color: #F5F5F5;" title="insert rects here"></div>' & @CRLF _
         & '</body>' & @CRLF _
         & '</html>' & @CRLF

Global $Form = GUICreate("Talk to js", 600, 400, 0, 0)
_IEErrorHandlerRegister()
Global $oIE = _IECreateEmbedded()
Global $IE_width = 575
Global $IE_height = 375
Global $GUIActiveX = GUICtrlCreateObj($oIE, 10, 20, $IE_width, $IE_height)
_IENavigate($oIE, 'about:blank', 1)
_IEDocWriteHTML($oIE, $htaCode)
Global $oHTA = _IEGetObjById($oIE, 'oHTA')
GUISetState(@SW_SHOW)
Global $IsLoaded = $oHTA.IsLoaded
While $IsLoaded <> 1
    Sleep(25)
WEnd
MsgBox(0, 'Demo msg', 'Document Is Loaded, press ok to continue')
Global $oRect = $oHTA.oRect
MsgBox(0, 'Demo msg', 'This will execute some methods of the first instance of $oRect object')
$rectPos = ''
$rectPosStr = ''
$newColour=''
Dim $newPos[1]
For $rect In $oRect
    If IsObj($rect) Then
        MsgBox(0, 'Demo msg', "Let's retrieve some data from the first instance of the $oRect object")
        MsgBox(0, 'Demo msg', '_GetId method of $oRect object ' & @CRLF & $rect._GetId($rect))
        MsgBox(0, 'Demo msg', '_GetTitle method of $oRect object ' & @CRLF & $rect._GetTitle($rect))
        MsgBox(0, 'Demo msg', '_GetColour method of $oRect object ' & @CRLF & $rect._GetColour($rect))
        $rectPos = $rect._GetPos($rect)
        For $pos In $rectPos
            $rectPosStr &= $pos & @CRLF
            ReDim $newPos[UBound($newPos) + 1]
            $newPos[UBound($newPos) - 1] = $pos * 2
        Next
        MsgBox(0, 'Demo msg', 'concatenated str from _GetPos method of $oRect object ' & @CRLF & $rectPosStr)
        MsgBox(0, 'Demo msg', "Now Let's change some data and html of the first instance of the $oRect object")
        #Region --- CodeWizard generated code Start ---
    ;InputBox features: Title=Yes, Prompt=Yes, Default Text=No
        If Not IsDeclared("sInputBoxAnswer") Then Local $sInputBoxAnswer
        $sInputBoxAnswer = InputBox("change the obj","Insert a new title for the object",""," ","-1","-1","-1","-1")
        Select
            Case @Error = 0;OK - The string returned is valid
                $rect._SetTitle($sInputBoxAnswer)
                MsgBox(0, 'Demo msg', 'new title ' & @CRLF & $rect._GetTitle($rect))
        EndSelect
        $newColour=_ChooseColor(2)
        $newColour=StringReplace($newColour,'0x','#')
        $rect._SetColour($newColour)
        MsgBox(0, 'Demo msg', 'new Colour ' & @CRLF & $rect._GetColour($rect))
        MsgBox(0, 'Demo msg', 'x,y moved by 50 px and double the size of the rect obj ' )
        $rect._SetPos($newPos[1]+50, $newPos[2]+50, $newPos[3], $newPos[4])
        $rectPosStr=''
        $rectPos = $rect._GetPos($rect)
        For $pos In $rectPos
            $rectPosStr &= $pos & @CRLF
        Next
        MsgBox(0, 'Demo msg', 'new pos of $oRect object ' & @CRLF & $rectPosStr)
    Else
        MsgBox(0,'oops','Ahr! This was not meant to happen')
    EndIf
Next
MsgBox(0, 'Demo msg', 'End of demo')

[AlmarM]

Hehe, I like the Demo

[ivan]

Hehe, I like the Demo

Thx mate. I actually wanted to use this stuff bo build a gui in html and have js worry about display, while au3 does the data handling. I left it though to a conceptual item, rather than put plenty of untested code here.

[weaponx]

Definitely interesting.

[ivan]

Definitely interesting.

Again thx. I thought some people were gonna like it!

[ptrex]

@ivan

Very nice !!

regards

ptrex

[ivan]

@ivan

Very nice !!

regards

ptrex

Thank you ptrex, i'm flattered.

[ivan]

Linking this topic to another one that allows execution of javascript code, but not returning objects or values, see #573886

ivan

[Michel Claveau]

Hi, Ivan!

Thank you, but the exemple run not in HTA mode. It run under iexplore.exe and not under mshta.exe.

Rights are differents ; characteristics of HTA are not supported.

But your code is good for show interaction between Autoit & IE+Jscript.

@-salutations

--

Michel Claveau

[ivan]

@michel,

Thanks for the advice. I know it runs under iexplore.exe, and as far as i've seen it, i can access the file system. If I may ask, in which other ways are the rights different?

[Michel Claveau]

Hi!

in which other ways are the rights different?

HTA run in the zone "Poste de travail" (sorry, I don't know the english name) ; iexplore run in the zone "Local zone".

When I open some COM (ActiveX) object, in "pure" HTA, there are no question ; in IE, the navigator prompt to user, for confirm. In IE embbed, no question, but the connexion is refused, with the internal error (not visible): access denied. With your exemple, I am in this last case.

I have a more complicated case. HTA can not be used by COM (it is NOT a COM server). I use often this technique:

- open a HTA, who connect to several COM servers (objects) (in an invisible window)

- the HTA open a IE instance, via OLE-automation (COM), with a local file

- the HTA inject, in some objects of the IE page, his propers links to COM-objects

- the HTA force the IE page to invisibility

By this way, I have a persistant COM access to the HTA, via the (invisible) IE page.

But this method don't run with a IE embbed, and the HTA-balises don't change the things.

Conclusion : the HTA balises are not suffisant to determine the HTA statut, over HTML.

*** sorry for my bad english ***

Edited September 4, 2008 by Michel Claveau

[ivan]

Thanks Michel. I read your post carefully, as it seems you've done a lot more experimentation on this than I have. I have run similar scripts with JSrcipt (as opposed to javascript) and VBScript to query files and folders, so I thought I had the same access level as hta applications. Your procedure seems logical and I am wuite interested if you could provide a simple example. Only out of curiosity.

Thanks

ivan

[Michel Claveau]

Hi, Ivan!

In practice, I develop a big (fat? huge?) tool. Name : Ponx

Ponx is written in Python, with several tools & parts in AutoIt, Jscript and/or Batchs.

Basically, Ponx is a COM server. But more:

- Ponx is extensible (user can write new function during execution, in Python)

- Ponx is a dynamic COM server. Functions of ponx become functions of the caller (even user function)

- Ponx has many functions predefined (more then 1000)

- Ponx has sevaral extensions (primarily in Python), for control Excel, Word, OOo, emailing, newsgroups, voice, Idapi, PDF, etc.

in short, in the middle of all that, there is PBridge, who is the bridge (in HTA) between Ponx & IE.

All sources are included.

BUT :

- The documentation is very very late

- I don't speak english ; Ponx is in french (even several parts are multi-languages)

The site of Ponx: http://ponx.org

For install on line: http://www.ponx.org/ponx/linstal.htm (installer written in Autoit + Batch).

@-salutations

Michel Claveau

PS: another example of usage of Ponx+Autoit:

#398746

[ivan]

I will try to polish my French, it's been almost 15 years since I last spoke or wrote anything, mais je vais essayer...

J'ai vécu cinq ans á Genéve il y a plus de veingt ans, alors ca va me prendre du temp. Je suis désolé mon "keyborad" est en Anglais.

Salut Michel