Sign in to follow this  
Followers 0
Chimp

3D Sinus Wave (Javascript version)

2 posts in this topic

#1 ·  Posted (edited)

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

 

Edited by Chimp
1 person likes this

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



Nice example. I like the idea of embedding JS code. There are plenty of cool gfx examples. :thumbsup:


Please don't send me any personal message and ask for support! I will not reply!

Selection of finest graphical examples at Codepen.io

The own fart smells best!
Her 'sikim hıyar' diyene bir avuç tuz alıp koşma!
¯\_(ツ)_/¯  ٩(●̮̮̃•̃)۶ ٩(-̮̮̃-̃)۶ૐ

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

    • Patryk
      By Patryk
      Dear Colleagues,
      I have no idea how to refer to style.display in my loop. There is a button like: 
      <input name="ctl00$bodyPlaceholder$btnFecharProcessamento" class="button" id="bodyPlaceholder_btnFecharProcessamento" style="display: none;" onclick="FecharJanelaProcessamento();return false;" type="submit" value="Fechar"> I want it to be clicked as soon as button's style change from style="display: none;" to  style= ="display: inline-block;" 
      This is what I got, but it's not working...
      Func GetButtons() $oButtons = _IEGetObjByName($oForm,"ctl00$bodyPlaceholder$btnFecharProcessamento",-1) $i = 0 While $i <> 1 For $oBtn In $oButtons If _IEFormElementGetValue($oBtn) = "Fechar" And $oBtn.document.style.display = "display: inline-block;" Then $i = 1 _IEAction($oBtn, "focus") _IEAction($oBtn, "click") ExitLoop EndIf Next WEnd EndFunc  
      I will really appreciate if you could help me with these loop!
    • Omnitica
      By Omnitica
      Hello!
      I'm new to the forums! Couldn't find any threads covering this issue. Sorry if I'm wrong.

      I'm having problems changing the text/value of a input box. The particular box doesn't have a name or id, just: class="jq_hotkeys_enabled form-control".
      This class appears multiple times throughout the source, so I don't think It's right to reference that object. 
      See image 1.
      However, I've managed to find a object with the name "ctl00$content$ctrl$ucServiceTime$rpServicetimes$ctl00$edtHiddenResourceHelper" which contains the value of the input box, and the id for the person in the dropdown/combobox left of it. (with "dummy-1" selected).
      See image 2.
      As you can see the value is 3982,4545     ( name , time )
      But when I try to change the value of it by doing:
      #include <IE.au3> Local $oIE = _IEAttach(WinGetHandle("[CLASS:IEFrame]"),"embedded") Local $oForm = _IEFormGetObjByName($oIE, "aspnetForm") Local $oInput = _IEFormElementGetObjByName($oForm, "ctl00$content$ctrl$ucServiceTime$rpServicetimes$ctl00$edtHiddenResourceHelper") _IEFormElementSetValue($oInput, "3982,1337") The box doesn't get its new value. I  can see in the source that it's changed though.
      See image 3.
       
      However, if I do: 
      #include <IE.au3> Local $oIE = _IEAttach(WinGetHandle("[CLASS:IEFrame]"),"embedded") Local $oForm = _IEFormGetObjByName($oIE, "aspnetForm") Local $oInput = _IEFormElementGetObjByName($oForm, "ctl00$content$ctrl$ucServiceTime$rpServicetimes$ctl00$edtHiddenResourceHelper") _IEFormElementSetValue($oInput, "3982,1337") $oIE.document.parentwindow.execScript("theForm.submit()") ; But it needs to reload the page The box gets its new value after the page reloads by the theForm.submit() function. 
      This is a bit unfortunate as I want the changes to happen instantly like when I type in the box with the keyboard... or select in the combobox.
      Maybe someone knows how I can do this? Looking forward to an answer! 
      Thanks in advance.
       
      Note: Unfortunately I can't provide with the real URL as it is constricted to employees in the company I work for, but let me know If I should provide anything else.
       



    • milos83
      By milos83
      How can I check if element is focused in Firefox using FF.au3 UDF?
      This is my try:
      I have prepared a function that checks if the object is focused:
       
      _FFCmd('FFau3.isfocused=function isfocused(a){try{return (a === document.activeElement)}catch(e){return}}') $oElm = _FFXPath("//*[@id='someId']") ConsoleWrite(_FFIsFocused($oElm)) Func _FFIsFocused($sElement = "") Local $isFoc = _FFCmd("FFau3.isfocused(" & $sElement & ")") Return $isFoc EndFunc ;==>_FFIsFocused Now, the javascript part is tested and it does return successfully.
      After a lot of try/fails I inserted an alert box in order to display the object being compared.
      Here is what I got
       
      The focused object is: [object XULElement]
      The object that I send for comparing is [object HTMLInputElement]
      Why is that?
       
       
    • Chimp
      By Chimp
      Hi all.
      I'm playing a bit with the ScriptControl object using as base this example by @genius257.
      here is a very simple try, ... but it fails. what I'm doing wrong?
      Local $oSC = ObjCreate("ScriptControl") $oSC.Language = "JScript" $oSC.ExecuteStatement('alert("I am a javascript alert box!");') MsgBox(0,'AutoIt','Pause') Thanks
    • steveeye
      By steveeye
      Hi, what else can we add in <table> besides <tr> & <td> to make it more interative to the users?