Jump to content

Converting Code to Diagrams in AutoIT?


Recommended Posts

Hi @noellarkin

I also looked for something like this a while ago, but unfortunately the only one I found ready for the AutoIt language was the visustin software you found too.
it would be interesting to create one from scratch... (?)
In this post from @junkew from some time ago (
https://www.autoitscript.com/forum/topic/193792-canvas-udf-flowchartlike-examples/), there is a script that generates something that might look like.
but obviously the graphic part is the least problematic one to generate. The missing (most important) part is the conversion of an AutoIt listing into blocks and block relationships (given an AutoIt list as input, the parser should produce a file with the block list and block relationships). ... easy to say ...
anyone dare try their hand at this?

 

 

image.jpeg.9f1a974c98e9f77d824b358729b089b0.jpeg Chimp

small minds discuss people average minds discuss events great minds discuss ideas.... and use AutoIt....

Link to post
Share on other sites
22 hours ago, Gianni said:

an AutoIt listing into blocks and block relationships

Part of what you need could be provided by CodeScanner (link in my signature), notably:

  • all code entry & exit points
  • all user function definitions and function calls (native and UDF)
  • all loops (type, start point, end point)
  • all conditional evaluations (branching points), referrred to here as "phrases"

EDIT: you would have to run CodeScanner on your target script (with all relevant options enabled) and then analyse/trace through the "references.txt" array in the generated CS subdirectory.

Edited by RTFC
clarification
Link to post
Share on other sites

The basic parts are there

1  lexer for the input

2 parse for the visual output

It will depend on the requirements how much time it will take and if you want a pure autoit version or parse the output in https://graphviz.org/ layout

https://en.m.wikipedia.org/wiki/DOT_(graph_description_language)

Edited by junkew
Link to post
Share on other sites
  • 3 weeks later...
After reading the @junkew's link above relating to the DOT (graph description language), I saw that the Graphviz software, interpreting that language, can generate interesting graphs. This intrigued me and I looked for some other sw that can be used easily through AutoIt. I found this other link http://viz-js.com/ that practically emulates the previous sw in a web page using Javascript. This is interesting because it could allow you to embed that sw in an AutoIt GUI. Unfortunately that link does not seem to work in IE, and this precludes the possibility of easily incorporating it into AutoIt. However I saw that an older version of that site also worked in IE. So I recovered previous versions of the javascript scripts, which allowed me to incorporate that SW into an AutoIt GUI. I sketched it all out in the attached zip file which also contains a small AutoIt script to assemble everything into one simple GUI. Changing the DOT listing on the left panel (by hand for now ...) the graph is automatically updated on the right panel. This could be a first step for a sw that transforms an AutoIt listing into a graph. Now I'm trying to generate a DOT listing from and AutoIt source using @RTFC's "Code Scanner", in order to "send" it to the GUI above ... (not easy) Any suggestion and/or advice is welcome. see you later... p.s. To test the graphic qualities of the sw viz-js, you can copy and paste the DOT listings found at this link: https://graphviz.org/gallery/ (click on any image to see the DOT listing to copy.
 

DOT2Flow.zip

Edited by Gianni

 

image.jpeg.9f1a974c98e9f77d824b358729b089b0.jpeg Chimp

small minds discuss people average minds discuss events great minds discuss ideas.... and use AutoIt....

Link to post
Share on other sites

A very rudimentary flowchart example. It will be a lot of effort to make this more functional and defining the node pictures will be a lot of work to define.

 

#include <GUIConstantsEx.au3>
#include <StaticConstants.au3>
#include <ColorConstants.au3>

Global Const $g_MAXGr = 8
Global $g_aidGraphics[$g_MAXGr + 1] ; 0 and $g_MAXGr entries not used to allow GUICtrlDelete result
Global $g_idDel, $g_hcanvas

Example()

Func Example()
    Local $idMsg, $iInc, $i

    GUICreate("My flowchart tool", -1, -1, 100, 100)
    Local $idDel1 = GUICtrlCreateButton("Open canvas", 50, 200, 150)
    GUISetState(@SW_SHOW)
    Createcanvas()

    $i = 1
    $iInc = 1
    ;$i=5   ; uncomment to delete starting from last define Graphic control
    ;$iInc=-1

    Do
        $idMsg = GUIGetMsg()
        If $idMsg = $idDel1 Then $i = Create($iInc)

        If $idMsg = $g_idDel Then
            GUICtrlDelete($g_aidGraphics[$i])
            $i = $i + $iInc
            If $i < 0 Or $i > $g_MAXGr Then Exit
        EndIf
    Until $idMsg = $GUI_EVENT_CLOSE
EndFunc   ;==>Example

Func Create($iInc)
    GUIDelete($g_hcanvas)
    Createcanvas()
    If $iInc = -1 Then Return 5
    Return 1
EndFunc   ;==>Create

func drawStartOrEnd($x,$y,$r)
    local $graphic = GUICtrlCreateGraphic(20, 50, 100, 100)
    GUICtrlSetGraphic(-1, $GUI_GR_COLOR, $COLOR_BLACK, $COLOR_BLACK)
    GUICtrlSetGraphic(-1, $GUI_GR_PIE, $x, $y, $r, 0, 360) ;~ circle

    return $graphic
EndFunc

func drawProcess($x,$y)
    $graphic = GUICtrlCreateGraphic(20, 50, 100, 100)
    GUICtrlSetGraphic(-1, $GUI_GR_COLOR, $COLOR_BLACK, $COLOR_BLACK)
    GUICtrlSetGraphic(-1, $GUI_GR_RECT, $x, $y, 60, 20) ;~ rectangle
    return $graphic
EndFunc

func drawDiamond($x,$y, $w, $h)
    $graphic = GUICtrlCreateGraphic(20, 50, 100, 100)
    GUICtrlSetGraphic(-1, $GUI_GR_COLOR, $COLOR_BLACK, $COLOR_BLACK)

    GUICtrlSetGraphic(-1, $GUI_GR_MOVE, $x , $y+ round($h/2))
    GUICtrlSetGraphic(-1, $GUI_GR_LINE, $x+20,$y)
    GUICtrlSetGraphic(-1, $GUI_GR_LINE, $x+40,$y+ round($h/2))
    GUICtrlSetGraphic(-1, $GUI_GR_LINE, $x+20,$y+$h)
    GUICtrlSetGraphic(-1, $GUI_GR_LINE, $x,$y+round($h/2))
    return $graphic
EndFunc
func drawConnector($x1, $y1, $x2, $y2)
    $graphic = GUICtrlCreateGraphic(20, 50, 100, 100)
    GUICtrlSetGraphic(-1, $GUI_GR_COLOR, $COLOR_BLACK, $COLOR_BLACK)

    GUICtrlSetGraphic(-1, $GUI_GR_MOVE, $x1 , $y1)
    GUICtrlSetGraphic(-1, $GUI_GR_LINE, $x2,  $y2)
    return $graphic
EndFunc

Func Createcanvas()
;~  If in future we want to drawtoPrinter, drawToVisio, drawToPpt is use variable functions
    $drawStartOrEnd = drawStartOrEnd
    $drawProcess    = drawProcess
    $drawDiamond    = drawDiamond
    $drawConnector  = drawConnector

    $g_hcanvas = GUICreate("My canvas",640, 480)
$g_idDel = GUICtrlCreateButton("Delete", 50, 165, 50)
    local $w=120
    local $h=40

    $g_aidGraphics[1]=$drawStartOrEnd(200,10,$w/9)
    $g_aidGraphics[2]=$drawProcess(170,   20+$h)
    $g_aidGraphics[3]=$drawDiamond(180,   30+2*$h,$w,$h)
    $g_aidGraphics[4]=$drawStartOrEnd(200,60+3*$h,$w/9)

    $g_aidGraphics[5]=$drawConnector(200,10           , 200, 20+$h)
    $g_aidGraphics[6]=$drawConnector(200,20+$h        , 200, 30+2*$h )
    $g_aidGraphics[7]=$drawConnector(200,30+2*$h +$h  , 200, 60+3*$h )

    GUISetState(@SW_SHOW)
EndFunc   ;==>Createcanvas

 

Link to post
Share on other sites

I would try with svg text code and html tables

Opt("MustDeclareVars", 1)
Opt("TrayIconDebug", 1)

Global $sFilePathHTML = @DesktopDir & "\svg_test.html"

Global $oStream = ObjCreate("ADODB.Stream")
$oStream.Type = 2 ; adTypeText
$oStream.Charset = "utf-8"
$oStream.LineSeparator = -1 ; adCRLF
$oStream.Open
;https://msdn.microsoft.com/en-us/library/ms678072(v=vs.85).aspx
;StreamWriteEnum: 1 adWriteLine

$oStream.WriteText("<html>", 1)
$oStream.WriteText("<head>", 1)
$oStream.WriteText("<style>", 1)
$oStream.WriteText(".MySVGtb {table-layout: fixed; border-collapse: separate; border-spacing: 1px;}", 1)
$oStream.WriteText(".MySVGtb th {border: 1px solid #e7e7e7; text-align:center; background-color: #f3f3f3; padding: 0.1rem 0.1rem; word-wrap: break-word;}", 1)
$oStream.WriteText(".MySVGtb tr:nth-child(even){background-color: #f5f5f0}", 1)
$oStream.WriteText("</style>", 1)
$oStream.WriteText("</head>", 1)
$oStream.WriteText("<body>", 1)

$oStream.WriteText("<table class='MySVGtb' style='width: 100%;'>", 1)
For $j = 1 To 2
    $oStream.WriteText("  <thead style='font-size:.7em;'>", 1)
    $oStream.WriteText("    <tr>", 1)
    For $i = 1 To 2
        $oStream.WriteText("      <th width='20%' style='border: 1px solid #ddd;padding: 0rem;'>Some Text " & $j & "</th>", 1)
    Next
    $oStream.WriteText("    </tr>", 1)
    $oStream.WriteText("  </thead>", 1)
    $oStream.WriteText("  <tbody>", 1)
    $oStream.WriteText("    <tr>", 1)
    For $i = 1 To 2
        $oStream.WriteText("     <td style='border: 1px solid #ddd;padding: 0rem;text-align:center;'>", 1)
        $oStream.WriteText("     <svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='100%' height='125'><defs><linearGradient id='TankFill" & $i & "' x1='0' y1='1' x2='0' y2='0'>", 1)
        $oStream.WriteText("           <stop offset='0%' stop-color='#ffffcc' />", 1)
        $oStream.WriteText("           <stop id='TFill1A' offset='21%' stop-color='#99cc00' />", 1)
        $oStream.WriteText("           <stop id='TFill1B' offset='21%' stop-color='white' />", 1)
        $oStream.WriteText("           <stop offset='100%' stop-color='white' /></linearGradient></defs><g transform='translate(5,12)'><rect x='0' y='0' width='60' height='100' rx='24' fill='url(#TankFill" & $i & ")' stroke='#808080' stroke-width='2'/></g>", 1)
        $oStream.WriteText("           <g transform=' matrix(1 0 0 1 22 105) '><text xml:space='preserve' font-family='Verdana' font-size='11' font-weight='normal' style='stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10;fill:#000000;fill-opacity:1; fill-rule: nonzero; opacity: 1; white-space: pre' ><tspan x='0' y='0' fill='rgba(0,0,0,1)'>Text" & $i & "</tspan></text></g>", 1)
        $oStream.WriteText("     </svg>", 1)
        $oStream.WriteText("     </td>", 1)
    Next
    $oStream.WriteText("    </tr>", 1)
    $oStream.WriteText("  </tbody>", 1)
Next
$oStream.WriteText("</table>", 1)

$oStream.WriteText("</body>", 1)
$oStream.WriteText("</html>", 1)

$oStream.SaveToFile($sFilePathHTML, 2) ;adSaveCreateOverWrite
;After a call to this method, the current position in the stream is set to the beginning of the stream (Position=0).
;or use this for ReadText
;$oStream.Position = 0

$oStream.Close
$oStream = 0

just other ideas:

automating Excel shapes

Inskape perhaps

OpenOffice Draw (don't think is possible)

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
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...