Skip to content

Commit dd72efc

Browse files
mlipokmlipok
authored
013-jsonTree.au3
1 parent 6643f75 commit dd72efc

1 file changed

Lines changed: 222 additions & 0 deletions

File tree

‎examples/013-jsonTree.au3‎

Lines changed: 222 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,222 @@
1+
#WIP - this Example is imported from 1.5.0 UDF - and is in "WORK IN PROGRESS" state
2+
3+
;~ #AutoIt3Wrapper_UseX64=y
4+
#AutoIt3Wrapper_UseX64=n
5+
#AutoIt3Wrapper_Run_AU3Check=Y
6+
#AutoIt3Wrapper_AU3Check_Stop_OnWarning=y
7+
#AutoIt3Wrapper_AU3Check_Parameters=-d -w 1 -w 2 -w 3 -w 4 -w 5 -w 6 -w 7
8+
#Au3Stripper_Ignore_Funcs=__NetWebView2_WebEvents_*,__NetWebView2_JSEvents_*
9+
10+
11+
; Html_Gui.au3
12+
#include <Array.au3>
13+
#include <GUIConstantsEx.au3>
14+
#include <WindowsConstants.au3>
15+
#include "..\NetWebView2Lib.au3"
16+
17+
_Example()
18+
19+
#Region ; UDF TESTING EXAMPLE
20+
Func _Example()
21+
Local $oMyError = ObjEvent("AutoIt.Error", __NetWebView2_COMErrFunc)
22+
#forceref $oMyError
23+
24+
; Create GUI with resizing support
25+
Local $hGUI = GUICreate("WebView2AutoIt JSON Viewer", 500, 650, -1, -1, BitOR($WS_OVERLAPPEDWINDOW, $WS_CLIPCHILDREN))
26+
GUISetBkColor(0x2B2B2B, $hGUI)
27+
28+
; GUI Controls for JSON Tree interaction
29+
Local $idExpand = GUICtrlCreateLabel("Expand All", 10, 10, 90, 30)
30+
GUICtrlSetFont(-1, 12, Default, $GUI_FONTUNDER, "Segoe UI")
31+
GUICtrlSetResizing(-1, $GUI_DOCKALL)
32+
GUICtrlSetColor(-1, 0x00FF00) ; Green
33+
34+
Local $idCollapse = GUICtrlCreateLabel("Collapse All", 110, 10, 90, 30)
35+
GUICtrlSetFont(-1, 12, Default, $GUI_FONTUNDER, "Segoe UI")
36+
GUICtrlSetResizing(-1, $GUI_DOCKALL)
37+
GUICtrlSetColor(-1, 0xFF4D4D) ; Red
38+
39+
Local $idFind = GUICtrlCreateLabel("Search", 210, 10, 60, 30)
40+
GUICtrlSetFont(-1, 12, Default, $GUI_FONTUNDER, "Segoe UI")
41+
GUICtrlSetResizing(-1, $GUI_DOCKALL)
42+
GUICtrlSetColor(-1, 0xFFD700) ; Gold
43+
44+
Local $idLoadFile = GUICtrlCreateLabel("Load JSON", 280, 10, 90, 30)
45+
GUICtrlSetFont(-1, 12, Default, $GUI_FONTUNDER, "Segoe UI")
46+
GUICtrlSetResizing(-1, $GUI_DOCKALL)
47+
GUICtrlSetColor(-1, 0x00CCFF) ; Light Blue
48+
49+
; Initialize WebView2 Manager and register events
50+
Local $oWebV2M = _NetWebView2_CreateManager()
51+
If @error Then Return SetError(@error, @extended, $oWebV2M)
52+
53+
; Initialize JavaScript Bridge
54+
Local $oJSBridge = _NetWebView2_GetBridge($oWebV2M)
55+
If @error Then Return SetError(@error, @extended, $oWebV2M)
56+
57+
Local $sProfileDirectory = @ScriptDir & "\NetWebView2Lib-UserDataFolder"
58+
_NetWebView2_Initialize($oWebV2M, $hGUI, $sProfileDirectory, 0, 50, 0, 0, True, True, True, 1.2, "0x2B2B2B")
59+
60+
; Initial JSON display
61+
Local $sMyJson = '{"Game": "Witcher 3", "ID": 1, "Meta": {"Developer": "CD Projekt", "Year": 2015 }, "Tags": ["RPG", "Open World"]}'
62+
63+
_Web_jsonTree($oWebV2M, $sMyJson) ; 🏆 https://github.com/summerstyle/jsonTreeViewer
64+
65+
GUISetState(@SW_SHOW)
66+
67+
Local $sLastSearch = ""
68+
69+
; Main Application Loop
70+
While 1
71+
Switch GUIGetMsg()
72+
Case $GUI_EVENT_CLOSE
73+
Exit
74+
75+
Case $idExpand
76+
; Call JavaScript expand method on the global tree object
77+
_NetWebView2_ExecuteScript($oWebV2M, "if(window.tree) window.tree.expand();")
78+
79+
Case $idCollapse
80+
; Call JavaScript collapse method
81+
_NetWebView2_ExecuteScript($oWebV2M, "if(window.tree) window.tree.collapse();")
82+
83+
Case $idFind
84+
Local $sInput = InputBox("JSON Search", "Enter key or value:", $sLastSearch, "", 200, 130, Default, Default, Default, $hGUI)
85+
If Not @error And StringLen(StringStripWS($sInput, 3)) > 0 Then
86+
$sLastSearch = StringStripWS($sInput, 3)
87+
_Web_jsonTreeFind($oWebV2M, $sLastSearch, False) ; New search
88+
EndIf
89+
90+
Case $idLoadFile
91+
Local $sFilePath = FileOpenDialog("Select JSON File", @ScriptDir, "JSON Files (*.json;*.txt)", 1)
92+
If Not @error Then
93+
Local $sFileData = FileRead($sFilePath)
94+
If $sFileData <> "" Then
95+
_Web_jsonTree($oWebV2M, $sFileData) ; Re-render tree with new data
96+
__NetWebView2_Log(@ScriptLineNumber, "+ Loaded JSON from: " & $sFilePath)
97+
EndIf
98+
EndIf
99+
100+
EndSwitch
101+
WEnd
102+
103+
_NetWebView2_CleanUp($oWebV2M, $oJSBridge)
104+
EndFunc ;==>Main
105+
106+
#Region ; === UTILS ===
107+
108+
; #FUNCTION# ====================================================================================================================
109+
; Name...........: _Web_jsonTree
110+
; Description....: Renders JSON data using the jsonTree library by summerstyle.
111+
; Author.........: summerstyle (https://github.com/summerstyle/jsonTreeViewer)
112+
; Integration....: Adapted for AutoIt WebView2
113+
; ===============================================================================================================================
114+
Func _Web_jsonTree(ByRef $oWebV2M, $sJavaScripton)
115+
; 1. Prepare JSON (Minify to prevent script errors from line breaks)
116+
Local $oJSON = _NetJson_CreateParser($sJavaScripton)
117+
;~ _NetWebView2_ObjName_FlagsValue($oJSON)
118+
$sJavaScripton = $oJSON.GetMinifiedJson()
119+
120+
; 2. Load local library files
121+
Local $sJavaScriptLib = FileRead(@ScriptDir & ".\JS_Lib\jsonTree.js")
122+
Local $sCssLib = FileRead(@ScriptDir & ".\JS_Lib\jsonTreeDark.css")
123+
124+
; 3. Build HTML with embedded Logic
125+
Local $sHTML = "<html><head><meta charset=""utf-8""><style>" & _
126+
$sCssLib & _
127+
"</style></head><body>" & _
128+
"<div id='tree-container' class='jsontree_tree'></div>" & _
129+
" <div style='position:fixed; bottom:5px; right:10px; font-size:10px; color:#555; font-family:sans-serif;'>" & _
130+
" Powered by <a href='https://github.com/summerstyle/jsonTreeViewer' style='color:#777; text-decoration:none;'>jsonTree</a>" & _
131+
" </div>" & _
132+
"<script>" & @CRLF & _
133+
$sJavaScriptLib & @CRLF & _
134+
";" & @CRLF & _ ; Ensure library/code separation
135+
"try {" & @CRLF & _
136+
" var data = " & $sJavaScripton & ";" & @CRLF & _
137+
" var container = document.getElementById('tree-container');" & @CRLF & _
138+
" if (typeof jsonTree !== 'undefined') {" & @CRLF & _
139+
" window.tree = jsonTree.create(data, container);" & @CRLF & _ ; Assign to window for global access
140+
" window.tree.expand(1);" & @CRLF & _
141+
" container.addEventListener('click', function(e) {" & @CRLF & _
142+
" var node = e.target.closest('.jsontree_node');" & @CRLF & _
143+
" if (node) {" & @CRLF & _
144+
" var labelEl = node.querySelector('.jsontree_label');" & @CRLF & _
145+
" var valueEl = node.querySelector('.jsontree_value');" & @CRLF & _
146+
" if (labelEl && valueEl) {" & @CRLF & _
147+
" var msg = 'JSON_CLICKED|' + labelEl.innerText + ' = ' + valueEl.innerText;" & @CRLF & _
148+
" window.chrome.webview.postMessage(msg);" & @CRLF & _
149+
" }" & @CRLF & _
150+
" }" & @CRLF & _
151+
" });" & @CRLF & _
152+
" } else {" & @CRLF & _
153+
" throw new Error('jsonTree library not loaded');" & @CRLF & _
154+
" }" & @CRLF & _
155+
"} catch(e) {" & @CRLF & _
156+
" window.chrome.webview.postMessage('DEBUG:' + e.message);" & @CRLF & _
157+
" document.body.innerHTML = '<b style=""color:red"">JS Error:</b> ' + e.message;" & @CRLF & _
158+
"}" & @CRLF & _
159+
"</script></body></html>"
160+
161+
; 4. Navigate to the generated HTML
162+
$oWebV2M.NavigateToString($sHTML)
163+
__NetWebView2_Log(@ScriptLineNumber, "+ JSON Tree Rendered & Listeners Active")
164+
EndFunc ;==>_Web_jsonTree
165+
166+
; #FUNCTION# ====================================================================================================================
167+
; Name...........: _Web_jsonTreeFind
168+
; Description....: Searches for a string in labels and values and highlights matching nodes.
169+
; Parameters.....: $sSearch - The string to find
170+
; ===============================================================================================================================
171+
Func _Web_jsonTreeFind(ByRef $oWebV2M, $sSearch, $bNext = False)
172+
Local $sJavaScript = _
173+
"var term = '" & $sSearch & "'.toLowerCase();" & _
174+
"if (!window.searchIndices || window.lastTerm !== term) {" & _
175+
" window.searchIndices = [];" & _
176+
" window.currentSearchIndex = -1;" & _
177+
" window.lastTerm = term;" & _
178+
"}" & _
179+
"" & _
180+
"/* 1. If it's a new search, find all targets */" & _
181+
"if (!" & StringLower($bNext) & " || window.searchIndices.length === 0) {" & _
182+
" document.querySelectorAll('.jsontree_node_marked').forEach(el => el.classList.remove('jsontree_node_marked', 'jsontree_node_active'));" & _
183+
" var targets = document.querySelectorAll('.jsontree_label, .jsontree_value');" & _
184+
" window.searchIndices = [];" & _
185+
" targets.forEach(function(el) {" & _
186+
" var text = el.innerText.toLowerCase();" & _
187+
" var isBracket = (text === '{' || text === '}' || text === '[' || text === ']' || text === '{ }' || text === '[ ]');" & _
188+
" if (!isBracket && (el.classList.contains('jsontree_label') || el.children.length === 0) && text.includes(term)) {" & _
189+
" el.classList.add('jsontree_node_marked');" & _
190+
" window.searchIndices.push(el);" & _
191+
" }" & _
192+
" });" & _
193+
"}" & _
194+
"" & _
195+
"/* 2. Move to next index */" & _
196+
"if (window.searchIndices.length > 0) {" & _
197+
" /* Remove active class from previous */" & _
198+
" if (window.currentSearchIndex >= 0) window.searchIndices[window.currentSearchIndex].classList.remove('jsontree_node_active');" & _
199+
" " & _
200+
" window.currentSearchIndex++;" & _
201+
" if (window.currentSearchIndex >= window.searchIndices.length) window.currentSearchIndex = 0;" & _
202+
" " & _
203+
" var activeEl = window.searchIndices[window.currentSearchIndex];" & _
204+
" activeEl.classList.add('jsontree_node_active');" & _
205+
" " & _
206+
" /* Expand parents of active element */" & _
207+
" var p = activeEl.closest('.jsontree_node');" & _
208+
" while (p && p.id !== 'tree-container') {" & _
209+
" if (p.classList.contains('jsontree_node_complex')) p.classList.add('jsontree_node_expanded');" & _
210+
" p = p.parentElement;" & _
211+
" }" & _
212+
" activeEl.scrollIntoView({behavior: 'smooth', block: 'center'});" & _
213+
"}"
214+
215+
; Replace the AutoIt variable $bNext with JS boolean
216+
;~ $sJavaScript = StringReplace($sJavaScript, "$bNext", ($bNext ? "true" : "false"))
217+
ConsoleWrite("$sJavaScript=" & $sJavaScript & @CRLF)
218+
_NetWebView2_ExecuteScript($oWebV2M, $sJavaScript)
219+
EndFunc ;==>_Web_jsonTreeFind
220+
#EndRegion ; === UTILS ===
221+
#EndRegion ; UDF TESTING EXAMPLE
222+

0 commit comments

Comments
 (0)