Hi @genius257, thanks for your listing,
I see that you built a 'timeline' using interesting methods, but in this way we get a static Timeline. I have to 'rebuild' the whole timeline by 'hard coding' for any variation on the content or for any moving of the view. We loose the advantage of using the many ready made javascript libraries.
In this way we are loosing a bit the initial goal of this topic, that is: Using an embedded Browser control with html elements and javascript libraries within and be able to interact and manage all that stuff from AutoIt.
For a better explanation of my goal as from post#20, I post here a simple 'runnable' snippet. It performs what I was in search of, by using "Shell.Explorer.2" and not "ScriptControl". As you can see the Timeline can be slided directly on the embedded browser or you can also use the 2 buttons from autoit to control the Timeline. This is just a very simple interaction, but is the proof of concept.
To use the script you have to save the script and the Timeline code in the same path.
Here the script:
$oIE = ObjCreate("Shell.Explorer.2")
Local $sHTML = ""
$sHTML &= '<!DOCTYPE HTML><html>' & @CRLF
$sHTML &= '<head>' & @CRLF
$sHTML &= '<meta http-equiv="X-UA-Compatible" content="IE=edge" />' & @CRLF ; IE=edge
$sHTML &= '<script>var JSglobal = (1,eval)("this");</script>' & @CRLF
$sHTML &= '<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.16.1/vis.min.js"></script>' & @CRLF
$sHTML &= '<link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.16.1/vis.min.css" rel="stylesheet" type="text/css" />' & @CRLF
$sHTML &= '</head>' & @CRLF
$sHTML &= '<body>' & @CRLF
$sHTML &= FileRead('SimpleTimelineBody.txt')
$sHTML &= '</body></html>' & @CRLF
Local $sPage = @ScriptDir & '\Page.html'
Local $hFile = FileOpen($sPage, 2) ; $FO_OVERWRITE (2) = Write mode (erase previous contents)
FileWrite($hFile, $sHTML)
FileFlush($hFile)
FileClose($hFile)
$hGui = GUICreate("Timeline", 800, 450)
Local $hRight = GUICtrlCreateButton(' Go right --->', 650, 380, 100, 50)
Local $hLeft = GUICtrlCreateButton(' <--- Go left', 50, 380, 100, 50)
GUISetState(@SW_SHOW)
$hIE = GUICtrlCreateObj($oIE, 10, 10, 780, 350)
$oIE.navigate('file:///' & $sPage)
; this waits till the document is ready to be used (portion of code from the _IELoadWait() function in 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
; https://msdn.microsoft.com/en-us/library/52f50e9t(v=vs.94).aspx
Local $ohJS = $oIE.document.parentwindow.JSglobal ; $ohJS is a reference to the javascript Global Obj
; ---- now the javascript engine can be used in our AutoIt script using the $ohJS reference ----
; Loop until the user exits.
While 1
Switch GUIGetMsg()
Case -3 ; $GUI_EVENT_CLOSE
ExitLoop
Case $hRight
; Interact with javascript - move right
$ohJS.move(0.2) ; eval('move( 0.2);')
Case $hLeft
; Interact with javascript - move left
$ohJS.move(-0.2) ; eval('move( 0.2);')
EndSwitch
WEnd
GUIDelete($hGui)
Here the HTML/Javascript code: save this file in the same path of the above script with this name: SimpleTimelineBody.txt
<div id="visualization"></div>
<script>
// DOM element where the Timeline will be attached
var container = document.getElementById('visualization');
var groups = new vis.DataSet([
{id: 0, content: 'Mr. bean', value: 1},
{id: 1, content: 'Jack Black', value: 3},
{id: 2, content: 'Danny DeVito', value: 2},
{id: 3, content: 'Stan Laurel', value: 6},
{id: 4, content: 'Oliver Hardy', value: 5},
{id: 5, content: 'Jim Carrey', value: 4}
]);
// Create a DataSet (allows two way data-binding)
var items = new vis.DataSet([
{id: 1, group: 0, content: 'item 1', start: '2013-04-20'},
{id: 2, group: 1, content: 'item 2', start: '2013-04-14'},
{id: 3, group: 2, content: 'item 3', start: '2013-04-18'},
{id: 8, group: 3, content: 'Range', start: '2013-04-16', end: '2013-04-19'},
{id: 5, group: 4, content: 'item 5', start: '2013-04-25'},
{id: 6, group: 5, content: 'item 6', start: '2013-04-27'}
]);
// Configuration for the Timeline
var options = {orientation: 'top'};
// Create a Timeline
var timeline = new vis.Timeline(container, items, options); // items,
timeline.setGroups(groups);
timeline.setItems(items);
/**
* Move the timeline a given percentage to left or right
* @param {Number} percentage For example 0.1 (left) or -0.1 (right)
*/
function move (percentage) {
var range = timeline.getWindow();
var interval = range.end - range.start;
timeline.setWindow({
start: range.start.valueOf() - interval * percentage,
end: range.end.valueOf() - interval * percentage
});
}
</script>
What I would like to know, is If and How the same result can be obtained by the "ScriptControl".
Thanks a lot again for your help and effort.