Sign in to follow this  
Followers 0

Marquee_W3C UDF + User Friendly, Code Creating, Example Program

5 posts in this topic

Below you will find both a new Marquee UDF (many W3C/HTML5 features and more) as well as a user-friendly program that both serves as an example script, as well as it will create the code for any particular marquee for you!  Enjoy!
~~~~~~~~~~~~~~~~~  BACKGROUND on <marquee> ~~~~~~~~~~~~~~~~~
<marquee> has been classed as "non-standard" and "non-conforming" as an HTML element
  (  There is no promise that it will continue to be supported in the future, though it is obvious that many people have a need for this feature and it has remained in the major browsers for years.....
<marquee> was originally built into Internet Explorer only, now supported in other browsers, though some original features do not work in IE either - it is clearly trying to be phased out, though a 'replacement' of sorts is coming around, using HTML5 components, so I think it will never totally go away.
For a project I'm working on, I need a way to create a LOT of different marquees.  I thought it simpler to have a program create the code needed, and built the attached 'user interface' program using various references to the feature.
I also needed some features that are not part of the UDF from Melba23 that are direct references to current (HTML5) recommendations from, so I modified the current UDF to create the additional functions, which make the UDF more HTML5 compliant (some of the features I built in have no HTML5 component, existing functions were updated only where needed for the first release - perhaps someday the rest can be done, though no immediate plans)
 KNOWN ISSUES and/or LIMITATIONS within the user program
- Tip text NOT IMPLEMENTED (from _GUICtrlMarquee_SetDisplay $sTipTxt) - I had no use for it in my project, though it is not difficult to add if you need to
- border styles do not correspond to settings (not the program's fault...)
This article ( states that IE does not support 'groove', 'ridge', 'inset' or 'outset' styles, yet does support 'dotted', 'dashed' and 'double'.
  Testing has proven this is true for IE (11), however, in testing AutoIt (with the Marquee UDF), which I thought uses IE (?), it appears that just the OPPOSITE of this is true.  Another item for further testing/study.........
- 'Align' feature not working 100% on all fonts (not the program's fault! ;)
the initial version of <marquee> (designed for IE and copied to other browsers later) contained an element called 'align', which has long been obsolete in favor of css 'vertical-align', however, it is not a direct replacement  and does not work inside <marquee>.  
Several alternatives were tried (including 'line-height' and even 'vspace', which may also soon be phased out) and nothing works 'perfectly' (search the web on font sizing and spacing - you will see this is extremely difficult).
       This program works around these challenges in a 'best effort' way, using calculations and 'top-margin' (or vspace) spacing.
       'Recommended' fonts ( will be set to 'center' or 'bottom' (within a pixel or 2), while other fonts may be off by several pixels (something in the font is different..).
       If you need the other fonts, a bit of testing would give some offset numbers that could result in better display. (this is NOT on my list to do, though maybe someone would want to take that on???)
- You can create 'unreadable', 'unusable' and even 'UGLY' marquees (not the program's fault, either!)
While a bit of effort was put into limiting things, there is no cross-checking to make sure your marquee will look 'nice'.  All parameters within the marquee feature have been tested to their max/min limits (and pushed well past the documented limits for speed and delay - you can make a  F A S T  or  S L O W  marquee well outside the published specs!) and set accordingly.
Any/all color scheme, font size, etc. can be used (no matter how horrible the outcome...) so have fun and create what you like!
Additional recommendations from built into Marquee_W3C.au3 UDF
1. Border thickness (width) refered as "thin", "medium" and "thick" or <length> (any number - to infinity) 
Marquee_W3C UDF allows any number as an entry, as well as the more 'friendly' named terms
2. Border Style is included in Marquee_W3C UDF (not in the current UDF, therefore, none of the settings in the user program do anything if you use the old UDF, so it is set to $GUI_DISABLE.)
3. use of PIXELS and EM for formatting text instead of POINTS with named length units (em, ex, cm, in, px, etc.)
  POINTS are used in typsetting, while PIXELS, and EM are more correct methods of sizing fonts on modern monitors (one good article on this topic can be found at )
NOTE: The user program is backward compatible with the UDF from Melba23 that uses POINTS
and auto-sets the parameter with the chosen UDF.




1 person likes this

Share this post

Link to post
Share on other sites


I'll try this.

Real Fakenamovich
Real Fakenamovich

Share this post

Link to post
Share on other sites

nice UDF


I notice that Frame border style for example "Dotted" do not work.


Signature beginning:   Wondering who uses AutoIT and what it can be used for ?
* GHAPI UDF - modest begining - comunication with GitHub REST API *
ADO.au3 UDF     POP3.au3 UDF     XML.au3 UDF    How to use IE.au3  UDF with  AutoIt v3.3.14.x  for other useful stuff click the following button


Any of my own code posted anywhere on the forum is available for use by others without any restriction of any kind. 

My contribution (my own projects): * Debenu Quick PDF Library - UDF * Debenu PDF Viewer SDK - UDF * Acrobat Reader - ActiveX Viewer * UDF for PDFCreator v1.x.x * XZip - UDF * AppCompatFlags UDF * CrowdinAPI UDF * _WinMergeCompare2Files() * _JavaExceptionAdd() * _IsBeta() * Writing DPI Awareness App - workaround * _AutoIt_RequiredVersion() * Chilkatsoft.au3 UDF * TeamViewer.au3 UDF * JavaManagement UDF * VIES over SOAP * WinSCP UDF * GHAPI UDF - modest begining - comunication with GitHub REST API *

My contribution to others projects or UDF based on  others projects: * _sql.au3 UDF  * POP3.au3 UDF *  RTF Printer - UDF * XML.au3 - BETA * ADO.au3 UDF SMTP Mailer UDF *

Useful links: * Forum Rules * Forum etiquette *  Forum Information and FAQs * How to post code on the forum * AutoIt Online Documentation * AutoIt Online Beta Documentation * SciTE4AutoIt3 getting started * Convert text blocks to AutoIt code * Games made in Autoit * Programming related sites * Polish AutoIt Tutorial * DllCall Code Generator * 

Wiki: Expand your knowledge - AutoIt Wiki * Collection of User Defined Functions * How to use HelpFile * Best coding practices * 

IE Related:  * How to use IE.au3  UDF with  AutoIt v3.3.14.x * Why isn't Autoit able to click a Javascript Dialog? * Clicking javascript button with no ID * IE document >> save as MHT file * IETab Switcher (by LarsJ ) * HTML Entities * _IEquerySelectorAll() (by uncommon) * 

I encourage you to read: * Global Vars * Best Coding Practices * Please explain code used in Help file for several File functions * OOP-like approach in AutoIt * UDF-Spec Questions *  EXAMPLE: How To Catch ConsoleWrite() output to a file or to CMD *

"Homo sum; humani nil a me alienum puto" - Publius Terentius Afer
"Program are meant to be read by humans and only incidentally for computers and execute" - Donald Knuth, "The Art of Computer Programming"
:naughty:  :ranting:, be  :) and       \\//_.

Anticipating Errors :  "Any program that accepts data from a user must include code to validate that data before sending it to the data store. You cannot rely on the data store, ...., or even your programming language to notify you of problems. You must check every byte entered by your users, making sure that data is the correct type for its field and that required fields are not empty."

Signature last update: 2017-06-04

Share this post

Link to post
Share on other sites


border styles do not correspond to settings (not the program's fault...)

This article ( states that IE does not support 'groove', 'ridge', 'inset' or 'outset' styles, yet does support 'dotted', 'dashed' and 'double'.
  Testing has proven this is true for IE (11), however, in testing AutoIt (with the Marquee UDF), which I thought uses IE (?), it appears that just the OPPOSITE of this is true.  Another item for further testing/study.........

That's why I put that statement in the top post - seems very odd behaviour and I wasn't sure how it would react.  

I left in all the W3C settings in case someone has an answer - felt it better to have them available than to make a 'perfect' user interface with only working items (then, someone would ask "why did you leave these out?"!)

Would like other feedback on just how AutoIt works internally on the embedded IE - does it really use the IE from the user's computer (which I thought, but testing seems it doesn't) or a broken-down version (for speed, etc.) or what?   Haven't researched it, but certainly the behaviour here is not consistent on the borders.

Share this post

Link to post
Share on other sites

#5 ·  Posted (edited)

This is great. Thanks a lot!

Is there a way to update message text and color without having to delete the current marquee control and initializing a new one?

The code creator seems to be missing a couple of quotation marks, e.g.

_GUICtrlMarquee_SetScroll($aMarquee, Number(), scroll, left, Number(6), Number(85), middle)

_GUICtrlMarquee_SetDisplay($aMarquee, thin, 0, 16777215,  Number(30), Times New Roman,  StringLower(Solid), black)

_GUICtrlMarquee_Create($aMarquee, Your TEXT Goes Here, $iLeft, $iTop, 1920, 200)


should be more like
_GUICtrlMarquee_SetScroll($aMarquee, Number(), 'scroll', 'left', Number(6), Number(85), 'middle')

_GUICtrlMarquee_SetDisplay($aMarquee, 'thin', 0, 16777215,  Number(30), 'Times New Roman',  StringLower('Solid'), 'black')

_GUICtrlMarquee_Create($aMarquee, 'Your TEXT Goes Here', $iLeft, $iTop, 1920, 200)
And there probably should be a number in "Number()", too.
Edited by Sven

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
Sign in to follow this  
Followers 0

  • Similar Content

    • coffeeturtle
      By coffeeturtle
      Just trying to display this news site into a GUI with an embedded IE instance:
      It looks terrible. Videos won't play.
      Is there a current way around this?
      Thank you in advance.
    • Reizvoller
      By Reizvoller
      I am having an issue that I can't seem to be able to figure out. I would really appreciate an extra pair of eyes to validate my work so far.
      All this is, so far, is just a bunch of shapes on an HTML page. It is to be a very simple game ( just exploring Javascript through making this ) but right now I am just building the framework/elements.
      The script is this 
      <!DOCTYPE HTML> <html> <head> <style> body { margin: 0px; padding: 0px; } #canvas-container { width: 100%; text-align:center; } canvas { display: inline; } </style> </head> <body onload="startUp()"> <div id="canvas-container"> <canvas id="game" width="300" height="500"></canvas> </div> <script> var canvas = document.getElementById('game'); var ctx = canvas.getContext('2d'); var x = canvas.width; var y = canvas.height; var scoreVal = 0; var itemXRand = Math.floor(Math.random() * x) + 1 ctx.stroke(); function cloud(){ ctx.beginPath(); ctx.moveTo(170, 30); ctx.bezierCurveTo(130, 100, 130, 150, 230, 150); ctx.bezierCurveTo(250, 180, 320, 180, 340, 150); ctx.bezierCurveTo(420, 150, 420, 120, 390, 100); ctx.bezierCurveTo(430, 40, 370, 30, 340, 50); ctx.bezierCurveTo(320, 5, 250, 20, 250, 50); ctx.bezierCurveTo(200, 5, 150, 20, 170, 80); ctx.closePath(); ctx.lineWidth = 5; ctx.fillStyle = '#8ED6FF'; ctx.fill(); ctx.strokeStyle = '#0000ff'; ctx.stroke(); } function workArea(){ ctx.beginPath(); ctx.rect(0, 0, x, y); ctx.fillStyle = "#2ab9ff"; ctx.fill(); ctx.stroke = 1; } function topRect(){ ctx.beginPath(); ctx.rect(0, 0, x, 30); ctx.fillStyle = "#D3D3D3"; ctx.fill(); ctx.stroke = 1; } function scoreKeep(){ ctx.font = "15px Arial"; ctx.fillStyle = "#000000"; ctx.fillText("Score "+scoreVal,5, 25); } function bttmRect(){ ctx.beginPath(); ctx.rect(0, y-30, x, 30); ctx.fillStyle = '#5bc928'; ctx.fill(); ctx.stroke = 1; } function monstRect(){ ctx.beginPath(); ctx.rect(0, y-80, x, 30); ctx.fillStyle = 'red'; ctx.fill(); ctx.stroke = 1; } function itemCirc(){ var centerX = itemXRand var radius = 15; var positionY = 45; ctx.beginPath(); ctx.arc(centerX, positionY, radius, 0, 2 * Math.PI, false); ctx.fillStyle = randomColor(); ctx.fill(); ctx.lineWidth = 1; ctx.strokeStyle = '#003300'; ctx.stroke(); } function startUp(){ workArea(); topRect(); bttmRect(); scoreKeep(); itemCirc(); monstRect(); cloud(); } function randomColor(){ return('#'+Math.floor(Math.random()*16777215).toString(16)); } </script> </body> </html> The issue is that cloud() and monstRect() will not show up when the page loads. If I comment out workArea(), topRect(), and bttmRect() in the function "startUp()" then monstRect() and cloud() show up. I've re-read those little snippets of code for those three areas that I comment out and I can't see where I have gone wrong.
      Any advice or if you can spot my mistake I would really appreciate it.
      Thank you!
    • UEZ
      By UEZ
      AutoIt SysInfo Clock is a small tool in widget style to show the clock, current CPU usage, CPU speed, memory usage and network activity (tcp, ip and udp). Additionally you can use it as an alarm clock. To stop alarm clock tone press the left LED (mail) or wait 60 seconds.
      The current CPU usage code is beta and might be not working for some CPUs!

      Main window:

      Move mouse to area below seconds and press rmb to select different color scheme.

      Alarm Clock window:

      Tray menu:

      Credits: see scroller (select About).
      Special thanks to trancexx for helping me to read out current CPU speed using the WinAPI stuff, AndyG for troubleshooting performance counter issue, czardas for composing "Für Elise" and Ascend4nt for the support!  
      Download source code + compiled version: Click Me (previous downloads: 1386)
      (Please don't use any download manager!)
      Compiled version only: or

      Coded on Win7 x64 using Aero  / Win8.1 x64 and AutoIt v3.3.12.0.
      This project is discontinued!
      Change log:
      v0.9.5.0 build 2013-06-14: initial release
      v0.9.6.0 build 2013-06-15: added _WinAPI_CreateRoundRectRgn() to fix transparency issue on non Aero desktops, small internal modifications and added check for whether performance counters are enabled
      v0.9.6.5 build 2013-06-15: fixed a bug when "Reset Windows Position" was selected twice and color of scroller will fit to clock color schema
      v0.9.8.0 build 2013-06-20: added little music to About part -> many thanks to czardas for mus++ and arranging "Für Elise", added date to clock, replaced CPU usage code -> thanks Ascend4nt
      v0.9.9.0 build 2013-06-21: added 2 more color schemas (mint and purple), added network traffic LED, compiled exe now included in archive
      v0.9.9.0 build 2013-06-22: forgot to increase a variable in ini section
      v0.9.9.0 build 2013-06-24: found also missing modification in context menue after adding two more color schemas
      v0.9.9.0 build 2013-06-26: Ops, forgot to change also radio item proper check in clock color schema sub menu
      v0.9.9.1 build 2013-06-27: added option to select whether SysInfo Clock should start at windows startup
      v0.9.9.2 build 2013-07-01: added yellow-red mark to the small info indicators and additional info when hovering about the small indicators, small internal changes
      v0.9.9.5 build 2013-07-05: added features: singleton, update check, visit web site, bring GUI to front and fixed some smaller bugs + some internal changes
      v0.9.9.6 build 2013-07-11: added alarm clock feature
      v0.9.9.7 build 2014-06-23: adapted code to run on AutoIt version
      v0.9.9.7 build 2014-08-27: some internal "cosmetic" changes -> this project is discontinued!
    • Ascend4nt
      By Ascend4nt
      IE Embedded Control Versioning
      Use IE 9+ and HTML5 features inside a GUI

      This UDF allows the use of embedded IE controls which support IE versions greater than IE 7.  By default, all embedded IE controls default to IE 7 compatibility mode (unless for some reason somebody has IE 6 installed!), so its not possible to use most of the HTML5 features available today. Fortunately, IE 9 and greater allow the use of HTML5, and the embedded IE control actually supports it.  The problem is convincing Windows to let your program actually use those features!
      There are Registry branches that modify how an IE control works in specific programs.  Those branches are:
      HKCU\Software\Microsoft\Internet Explorer\MAIN\FeatureControl\FEATURE_BROWSER_EMULATION HKLM\SOFTWARE\Microsoft\Internet Explorer\MAIN\FeatureControl\FEATURE_BROWSER_EMULATION In at least one of these branches, the executable name needs to appear as a value name ("autoit.exe" for example), and the value data needs to indicate what IE version to 'emulate'. The value data is actually dependent on the version and whether quirks-mode is enabled.
      See Web Browser Control - Specifying the IE Version for more information.
      Note that a 64-bit O/S needs adjustments to the HKLM paths.  Also, prefer the HKCU branch unless the program needs to enable access across all user accounts.

      HTML5 Canvas Element Example
      Anyway, all the complexity of setting the right value with the right name with the right 32/64-bit branch is handled for you in this UDF.  Enabling support for IE9+, and new HTML5 features, is as simple as making one call to _IE_EmbeddedSetBrowserEmulation().

      _IE_EmbeddedSetBrowserEmulation() takes an executable name (@AutoItExe if none is provided), and checks the Registry for an entry for it.  If it doesn't find one, it will create one and enable support for later versions of IE. The full parameters to the function are as follows:
      _IE_EmbeddedSetBrowserEmulation($nIEVersion, $bIgnoreDOCTYPE = True, $bHKLMBranch = False, $sExeName = @AutoItExe)  
      The parameter passed in $nIEVersion can be anything from 8 to 11 [or 12+ in the future], or just the current version of IE, which is available also through a call to _IE_EmbeddedGetVersion().  $bIgnoreDOCTYPE controls when IE will go into quirks mode based on any "<!DOCTYPE>" declarations on webpages. This mode can cause major problems, so by default it is set to ignore it (set this to False to enable it). $bHKLMBranch controls where in the registry the Browser Emulation Mode setting will be stored. If you wish to store the mode for ALL users, set this parameter to True. Note, however, that elevated privileges are required for modifying the HKLM branch!

      If the call to _IE_EmbeddedSetBrowserEmulation() is successful, then you can enable a (more) HTML5 compliant IE browser control in a GUI.

      The complete set of functions in the UDF:
      _IE_EmbeddedGetVersion()            ; Gets version of IE Embeddable Control (from ieframe.dll or Registry) _IE_EmbeddedGetBrowserEmulation()    ; Gets Browser Emulation Version for given Executable (or 0 if not found) _IE_EmbeddedSetBrowserEmulation()    ; Sets Browser Emulation Version. NOTE: HKLM branch REQUIRES ELEVATED PRIVILEGES! _
      Setting the embedded browser object to a newer version of IE may alter the behavior of some things.  See documenation for the HTMLDocumentEvents2 interface and HTMLAnchorEvents2 interface for example.
      Also, there is at least one difference in behavior noted by mesale0077 in working with IE10 (and possibly other versions of IE) - clicks for elements inside an <a> anchor tag will register as the actual internal element rather than the surrounding anchor. For example, an <img> element wrapped by an <a> anchor will only send the click to the <img> element and not propagate it any further. A workaround for this is to check the parentNode to see if it is an <a> element. See the discussion in the >ObjEvent dont work thread. It could be that there's some other reason for this behavior, but nothing has come to light yet.
      As an aside, also see trancexx's response in >ObjEvent usage for more techniques for capturing IE events.

      An example of HTML5 use, which has a little interactive Canvas, follows (requires IE9 or higher!):
      #include "IE_EmbeddedVersioning.au3" ; =============================================================================================================================== ; <IE_EmbeddedHTML5Example.au3> ; ; Example of using 'IE_EmbeddedVersioning' UDF ; ; This example 1st attempts to set the Browser Emulation information in the registry, then ; creates an embedded IE control with an interactive HTML5 Canvas element. ; ; Author: Ascend4nt ; =============================================================================================================================== #Region IE_CANVAS_EXAMPLE #include <GUIConstantsEx.au3> #include <WindowsConstants.au3> #include <IE.au3> ; ----------- ; GLOBALS ; ----------- Global $bMouseDown = False, $iLastX1 = 0, $iLastY1 = 0 Global $g_oCanvas, $g_oCtx Global $hGUI, $ctGUI_ErrMessageLabel Global $GUI_IE_Obj Global $nRet = _WinMain() ; Optionally remove valuename at Exit (not recommended if compiled to executable) ;~ _IE_EmbeddedRemoveBrowserEmulation() Exit $nRet ; ====================================================================================================== ; Embedded IE Browser-Emulation Fix + HTML5 Example ; ====================================================================================================== Func _WinMain()     ConsoleWrite("@AutoItX64 = " & @AutoItX64 & ", IsAdmin() = " & IsAdmin() & @CRLF)     ;; Get Current IE Embeddable Control Version (from ieframe.dll)     Local $sIEVer = _IE_EmbeddedGetVersion(), $nIEVer = @extended     ConsoleWrite("Embedded Version = " & $sIEVer & ", as Int: " & $nIEVer & ", @error = " & @error & @CRLF)     ; Old IE version w/o HTML5 support? Exit     If $nIEVer < 9 Then Return MsgBox(0, "Old IE Version", "IE version is less than 9, HTML5 example will not work")     ;; Current Browser Emulation Mode for this executable (if exists)     Local $nIEBEVer = _IE_EmbeddedGetBrowserEmulation()     ConsoleWrite("GetEmbeddedVersion: " & $nIEBEVer & ", @error = " & @error & ", @extended = " & @extended & @CRLF)     ;; Set Browser Emulation Mode for this executable (if not already set or set to a different version)     ; HKCU Branch:     _IE_EmbeddedSetBrowserEmulation()     ; HKLM Branch:     ;_IE_EmbeddedSetBrowserEmulation(-1, True, True)     If @error Then         ; -1 error means trying to access HKLM, so script needs elevation to access the Registry         If @error = -1 Then             If MsgBox(32 + 3, "Elevation Required", "Elevate script to enable setting Browser Emulation Mode?") = 6 Then Return _ReRunIfNotElevated()             Return 1         EndIf         Return MsgBox(0, "Error", "Couldn't set Browser Emulation mode")     EndIf     ;Local $oErrorHandler = ObjEvent("AutoIt.Error", "_ErrFunc")     ;; Create Embedded Browser Control and GUI     Local $oIE = _IECreateEmbedded()     ; GUI (vars are Global)     $hGUI = GUICreate("Embedded Web control Test", 460, 360, -1, -1, $WS_OVERLAPPEDWINDOW + $WS_CLIPSIBLINGS + $WS_CLIPCHILDREN)     $GUI_IE_Obj = GUICtrlCreateObj($oIE, 10, 10, 440, 340)     $ctGUI_ErrMessageLabel = GUICtrlCreateLabel("", 100, 500, 500, 30)     GUICtrlSetColor(-1, 0xff0000)     GUISetState(@SW_SHOW) ;Show GUI     ; Doesn't work (at least for keyboard focus):     ;~ ControlFocus($hGUI, '', $GUI_IE_Obj)     ;; Initialize Embedded Control and write some HTML5 data to it     _IENavigate($oIE, 'about:blank' )     ; Basic Near-Empty HTML (with minimal CSS styling for Canvas element)     Local $sHTML = '<!DOCTYPE html>' & @CR & '<html>' & @CR & '<head>' & @CR & _         '<meta content="text/html; charset=UTF-8" http-equiv="content-type">' & @CR & _         '<title>Experiments</title>' & @CR & _         '<style>canvas { display:block; background-color:white; outline:#00FF00 dotted thin;}</style>' & @CR & _         '</head>' & @CR & '<body>' & @CR & '</body>' & @CR & '</html>'     _IEDocWriteHTML($oIE, $sHTML)     _IEAction($oIE, "refresh")     ;; Setup Event Object Functions     Local $oEventsDoc = ObjEvent($oIE.document, "Event_", "HTMLDocumentEvents2")     #forceref $oEventsDoc ;~     ConsoleWrite("Obj Name = " & ObjName($oIE) & @CRLF) ;~     ConsoleWrite("Location = " & $oIE.document.location.pathname & @CRLF)     ; --------------------------------------------------------------------------------------     ; Create Canvas Element through the DOM (optionally just add it in the HTML5 above)     ; -------------------------------------------------     ; Note: Support in browsers, see "Can I use..."     ;     @     ; and @     ; -------------------------------------------------     ; IE minimum is version 9+, 10+ has more features, but WebGL support requires version 11+     ; --------------------------------------------------------------------------------------     $g_oCanvas = $oIE.document.createElement("canvas")     $ = "myCanvas" ;~     ConsoleWrite("Canvas ID = " & $ & @CRLF)     $oIE.document.body.appendChild($g_oCanvas)     ; Optionally, if added already through the HTML5 text:     ;Local $g_oCanvas = _IEGetObjById($oIE, "myCanvas")     If @error Then Return MsgBox(0, "Error", "Error creating/accessing Canvas")     ;; Tweak Canvas Size, Move into View ;~     ConsoleWrite("window innerwidth = " & $oIE.document.parentWindow.innerWidth & @CRLF)     ;$oIE.document.parentWindow.scrollTo(0, 10)     $g_oCanvas.width = 420     $g_oCanvas.height = 320     ;ConsoleWrite("Canvas item offsetTop = " & $g_oCanvas.offsetTop & @CRLF)     $g_oCanvas.scrollIntoView()     ;; Grab the Canvas 2D Context     $g_oCtx = $g_oCanvas.getContext("2d")     ;; Example Drawing: Gradiant     Local $oGrad = $g_oCtx.createLinearGradient(0,0,0,60)     If IsObj($oGrad) Then         $oGrad.addColorStop(0, "red")         $oGrad.addColorStop(1, "blue")         $g_oCtx.fillStyle = $oGrad     EndIf     $g_oCtx.fillRect(0,0,419,60)     ;; Example Drawing: Text     $g_oCtx.font = "30px serif"     $g_oCtx.fillStyle = "white"     $g_oCtx.textBaseline = "top"     $g_oCtx.fillText("HTML5 Canvas Drawing!", 50, 10)     ;; Example Drawing: Circle, Line     $g_oCtx.beginPath()     $g_oCtx.arc(200, 100, 20, 0, ACos(-1) * 2)     $g_oCtx.fillStyle = "red"     $g_oCtx.fill()     $g_oCtx.beginPath()     $g_oCtx.lineWidth = "3"     $g_oCtx.strokeStyle = "green"     $g_oCtx.moveTo(185, 85)     $g_oCtx.lineTo(215, 115)     $g_oCtx.stroke()     ; Waiting for user to close the window     While GUIGetMsg() <> $GUI_EVENT_CLOSE         Sleep(10)     WEnd     GUIDelete() EndFunc ; ====================================================================================================== ; IE Event Functions - React to Mouse events with some Canvas graphics ; ====================================================================================================== #Region IE_EVENT_FUNCS ; For right-click, the context menu pops up, UNLESS we change the Event's 'returnValue' property Volatile Func Event_oncontextmenu($oEvtObj)     If IsObj($oEvtObj) Then         ; Convert to string so that 0 doesn't match EVERY string         Local $sId = $ & ""         If ($sId = "myCanvas") Then $oEvtObj.returnValue = False     EndIf EndFunc Volatile Func Event_onmousedown($oEvtObj)     If IsObj($oEvtObj) And IsObj($g_oCtx) Then         ; Map click coordinates to Canvas coordinates         $iLastX1 = $oEvtObj.x - $g_oCanvas.offsetLeft         $iLastY1 = $oEvtObj.y - $g_oCanvas.offsetTop ;~         ConsoleWrite("Downclick recvd at X1: " & $iLastX1 & ", Y1: " & $iLastY1 & ", MouseButton [1 = left, 2 = right, etc] = " & $oEvtObj.button & @CRLF)         ; Check if click was in fact within Canvas element         If $iLastX1 >= 0 And $iLastX1 < $g_oCanvas.width And $iLastY1 >= 0 And $iLastY1 < $g_oCanvas.height Then             ; Signal mouse-down occurred inside Canvas             $bMouseDown = 1             ; Make a small square where initial down-click was detected             $g_oCtx.fillStyle = "blue"             $g_oCtx.fillRect($iLastX1 - 2, $iLastY1 - 2, 3, 3)         EndIf     EndIf EndFunc Volatile Func Event_onmouseup($oEvtObj)     If IsObj($oEvtObj) And IsObj($g_oCtx) Then ;~         ConsoleWrite("MouseUp" & @LF)         If $bMouseDown Then             Local $iX = $oEvtObj.x - $g_oCanvas.offsetLeft, $iY = $oEvtObj.y - $g_oCanvas.offsetTop             ; Random color in "#0f1100" (RGB) string form             Local $sColor = "#" & Hex(Random(0, 255, 1), 2) & Hex(Random(0, 255, 1), 2) & Hex(Random(0, 255, 1), 2)             ;; Draw either a line or circle depending on where the mouse button is released             If $iX = $iLastX1 And $iY = $iLastY1 Then                 ; Circle if mouse start = mouse end                 $g_oCtx.beginPath()                 $g_oCtx.arc($iX, $iY, 8, 0, ACos(-1) * 2)                 $g_oCtx.fillStyle = $sColor                 $g_oCtx.fill()             Else                 ; Line if mouse start <> mouse end                 $g_oCtx.beginPath()                 $g_oCtx.lineWidth = "3"                 $g_oCtx.strokeStyle = $sColor                 $g_oCtx.moveTo($iLastX1, $iLastY1)                 $g_oCtx.lineTo($iX, $iY)                 $g_oCtx.stroke()             EndIf             $bMouseDown = 0         EndIf     EndIf EndFunc Volatile Func Event_onkeydown($oEvtObj)     If IsObj($oEvtObj) Then         ConsoleWrite("Event type: " & $oEvtObj.type & "id (0 is document) = " & $         ConsoleWrite(", keycode = " & $oEvtObj.keyCode & ", shiftkey = " & $oEvtObj.shiftKey & @CRLF)     EndIf EndFunc ; ====================================================================================================== #EndRegion IE_EVENT_FUNCS #EndRegion IE_CANVAS_EXAMPLE #Region UTIL_FUNCS ; ====================================================================================================== ; Func _ReRunIfNotElevated() ; ; Does what it says. (rumored to occasionally say what it does) ; ; Author: Ascend4nt ; ====================================================================================================== Func _ReRunIfNotElevated()     If IsAdmin() Then         Return 0     Else         If @Compiled Then             ; If compiled to A3X, we need to execute it as if not compiled.             Local $sCmd = (@AutoItExe = @ScriptFullPath) ? "" : ("/AutoIt3ExecuteScript " & @ScriptFullPath)             Return ShellExecute(@AutoItExe, $sCmd, @ScriptDir, "runas")         Else             Return ShellExecute(@AutoItExe,@ScriptFullPath,@ScriptDir,"runas")         EndIf     EndIf EndFunc #EndRegion UTIL_FUNCS ~prev Downloads: 61
      Also, HTML5+Javascript standalone Canvas demo (should run in any browser):
    • guinness
      By guinness
      Never say I don't give this community some little gems once in a while. I came up with the concept of creating a directory structure using nothing but valid HTML5 and CSS3. It uses an unknown "checkbox hack" concept which some HTML5/CSS3 purists consider to be beyond the semantics of the language. But I say if it's supported by all major browsers and it works, then why not!

      Note: I used >KaFu's idea for the current level and next level, but the rest I came up with myself, albeit I have used this "checkbox hack" before in other projects I have created. 

      #include <File.au3> #include <MsgBoxConstants.au3> #include <WinAPIFiles.au3> MsgBox($MB_SYSTEMMODAL, '', 'This example only uses HTML5 and CSS3, I know, no JavaScript!') ; Thanks to KaFu for the idea: Example() Func Example() Local Const $sSaveFilePath = @ScriptDir Local $sHTML = '', $sTab = @TAB _HTML_Add($sHTML, '<!DOCTYPE html>') _HTML_Add($sHTML, '<html lang="en">') _HTML_Add($sHTML, '<head>') _HTML_Add($sHTML, '<meta charset="utf-8">', $sTab) _HTML_Add($sHTML, '<title>Directory To HTML5 Concept</title>', $sTab) _HTML_Add($sHTML, '<style type="text/css">', $sTab) _Tab_Add($sTab) _HTML_Add($sHTML, '@import url(;.dirtohtml a{background:transparent;color:#08c;position:relative;text-decoration:none;-webkit-transition:all .3s ease-out;transition:all .3s ease-out}.dirtohtml a:hover{color:#0af}.dirtohtml input[type=checkbox],.dirtohtml input[type=checkbox]+ul{display:none}.dirtohtml input[type=checkbox]:checked+ul{display:block}.dirtohtml label{cursor:pointer}.dirtohtml ul li{list-style:none}[class*="fontawesome-"]:before{font-family:"FontAwesome",sans-serif;margin-right:5px}', $sTab) _Tab_Remove($sTab) _HTML_Add($sHTML, '</style>', $sTab) _Tab_Remove($sTab) _HTML_Add($sHTML, '</head>') _HTML_Add($sHTML, '<body>') _Tab_Add($sTab) Local Const $sDirectorySelection = FileSelectFolder('Select a folder to map to HTML', '') Local $aFileList = _FileListToArrayRec($sDirectorySelection, '*', 0, 1, 2, 2) If @error Then _HTML_Add($sHTML, '<p>No files were present in the selected directory.</p>', $sTab) Else _HTML_Add($sHTML, '<div class="dirtohtml">', $sTab) _Tab_Add($sTab) _HTML_Add($sHTML, '<ul>', $sTab) _Tab_Add($sTab) Local $bIsRelative = False, _ $iCheckboxCount = 1, $iCurrentLevel = 0, $iNestedDepth = 0, $iNextIndex = 0, $iNextLevel = 0, _ $sFileName = '', $sRelativeFilePath = '' For $i = 1 To $aFileList[0] $aFileList[$i] = StringRegExpReplace($aFileList[$i], '(?:\\|/)', '\\') $iCurrentLevel = @extended If $i < $aFileList[0] Then $iNextIndex = $i + 1 $aFileList[$iNextIndex] = StringRegExpReplace($aFileList[$iNextIndex], '(?:\\|/)', '\\') $iNextLevel = @extended EndIf $sFileName = StringRegExpReplace($aFileList[$i], '^.+\\', '') If _WinAPI_PathIsDirectory($aFileList[$i]) = $FILE_ATTRIBUTE_DIRECTORY Then If $iNextLevel > $iCurrentLevel Or $iNextLevel = $iCurrentLevel Then _HTML_Add($sHTML, '<li>', $sTab) _Tab_Add($sTab) _HTML_Add($sHTML, '<label for="dirtohtml_' & $iCheckboxCount & '"><i class="fontawesome-folder-close-alt"></i>' & $sFileName & '</label>', $sTab) _HTML_Add($sHTML, '<input id="dirtohtml_' & $iCheckboxCount & '" type="checkbox">', $sTab) _HTML_Add($sHTML, '<ul>', $sTab) $iCheckboxCount += 1 $iNestedDepth += 1 ElseIf $iNextLevel < $iCurrentLevel Then _HTML_Add($sHTML, '<li>' & $sFileName, $sTab) EndIf _Tab_Add($sTab) Else $sRelativeFilePath = _PathGetRelative($sSaveFilePath, $aFileList[$i]) $bIsRelative = Not @error _HTML_Add($sHTML, '<li><i class="fontawesome-file"></i><a href="' & ($bIsRelative ? '' : 'file://') & StringReplace($sRelativeFilePath, '\', '/') & '">' & $sFileName & '</a></li>', $sTab) If $iNextLevel < $iCurrentLevel Then For $j = 1 To ($iCurrentLevel - $iNextLevel) _Tab_Remove($sTab) _HTML_Add($sHTML, '</ul>', $sTab) _Tab_Remove($sTab) _HTML_Add($sHTML, '</li>', $sTab) $iNestedDepth -= 1 Next EndIf EndIf Next If $iNestedDepth Then For $j = 1 To $iNestedDepth _Tab_Remove($sTab) _HTML_Add($sHTML, '</ul>', $sTab) _Tab_Remove($sTab) _HTML_Add($sHTML, '</li>', $sTab) Next EndIf _Tab_Remove($sTab) _HTML_Add($sHTML, '</ul>', $sTab) _Tab_Remove($sTab) _HTML_Add($sHTML, '</div>', $sTab) EndIf _HTML_Add($sHTML, '</body>') _HTML_Add($sHTML, '</html>') Local Const $sHTMLFilePath = _WinAPI_PathRemoveBackslash($sSaveFilePath) & '\index.html' Local Const $hFileOpen = FileOpen($sHTMLFilePath, BitOR($FO_OVERWRITE, $FO_UTF8)) If $hFileOpen > -1 Then FileWrite($hFileOpen, $sHTML) FileClose($hFileOpen) MsgBox($MB_SYSTEMMODAL, '', 'HTML file created successfully.' & @CRLF & $sHTMLFilePath) Else MsgBox($MB_SYSTEMMODAL, '', 'An error occurred writing to the HTML file.') EndIf ConsoleWrite($sHTML & @CRLF) ; ShellExecute($sHTMLFilePath) Return True EndFunc ;==>Example Func _HTML_Add(ByRef $sHTML, $sData, $sTab = Default) $sHTML &= (($sTab = Default) ? '' : $sTab) & $sData & @CRLF EndFunc ;==>_HTML_Add Func _Tab_Add(ByRef $sTab) $sTab &= @TAB EndFunc ;==>_Tab_Add Func _Tab_Remove(ByRef $sTab) Local Static $TAB_LENGTH = StringLen(@TAB) $sTab = StringTrimRight($sTab, $TAB_LENGTH) EndFunc ;==>_Tab_Remove