June 25, 2019, 09:51:41 PM

Author Topic: BlitzMax and JavaScript together  (Read 149 times)

Offline TomToad

  • Sr. Member
  • ****
  • Posts: 383
BlitzMax and JavaScript together
« on: May 10, 2019, 02:05:41 PM »
I have an html page loaded into a MaxGUI HTMLView which contains a JavaScript program.  I would like to know if it is possible to access variables and call functions within the script from BlitzMAX.
For example, html:
Code: [Select]
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<p>Hello, my name is <span id="name"></span>!</p>

<script>
var first = "Tom";
var last = "Toad";
var fullName = first + " " + last;
//How can I get and set these variables in BlitzMAX?

document.getElementById("name").innerHTML = fullName;

function changeName(name) {
//how can I call this function in BlitzMAX?
document.getElementById("name").innerHTML = name;
}
</script>
</body>
</html>
and BlitzMax:
Code: BlitzMax
  1. SuperStrict
  2. Import maxgui.drivers
  3.  
  4. Global MainWindow:TGadget = CreateWindow("Test HTML Frame",0,0,800,600,Null,WINDOW_DEFAULT|WINDOW_CENTER|WINDOW_CLIENTCOORDS)
  5. Global HTMLView:TGadget = CreateHTMLView(0,20,ClientWidth(MainWindow),ClientHeight(MainWindow)-20,MainWindow)
  6. Global ChangeNameButton:TGadget = CreateButton("Change Name",0,0,120,20,MainWindow)
  7. Global ChangeVariableButton:TGadget = CreateButton("Change First Name",120,0,120,20,MainWindow)
  8. AddHook EmitEventHook,hook
  9. Local testpage:String = "file:///"+AppDir+"/test.html"
  10. HtmlViewGo(HTMLView,testpage)
  11.  
  12. Repeat
  13.         WaitEvent()
  14. Forever
  15.  
  16. Function hook:Object(id:Int, data:Object,context:Object)
  17.         Local event:TEvent = TEvent(data)
  18.        
  19.         Select event.id
  20.                 Case EVENT_WINDOWCLOSE, EVENT_APPTERMINATE
  21.                         End
  22.                 Case EVENT_GADGETACTION
  23.                         Select event.source
  24.                                 Case ChangeNameButton
  25.                                         'How would I call changeName(name) in the JS script?
  26.                                         'JavaScript('changeName("John Doe")') '<-----???
  27.                                 Case ChangeVariableButton
  28.                                         'How to access the variable in the JS script
  29.                                         'Local CurrentFirstName = JavaScriptGetValue("first") '<--- get value of variable
  30.                                         'JavaScriptSetValue("first","John") '<-----set value of variable
  31.                         End Select
  32.         End Select
  33.         Return data
  34. End Function
  35.  
------------------------------------------------
8 rabbits equals 1 rabbyte.

Online Derron

  • Hero Member
  • *****
  • Posts: 2170
Re: BlitzMax and JavaScript together
« Reply #1 on: May 10, 2019, 04:59:52 PM »
I think the htmlview cannot interact with the calling code/blitzmax.
It is like a window/view which is separate from the rest

You can only manipulate the html you pass to the webview (replace placeholders with your current values).

Bye
Ron

Offline TomToad

  • Sr. Member
  • ****
  • Posts: 383
Re: BlitzMax and JavaScript together
« Reply #2 on: May 10, 2019, 05:21:24 PM »
I found HtmlViewRun() function that allows me to execute a script, and from there, call functions and change global variables.  Now I just need to figure out how to get information from JavaScript back into BlitzMAX.
------------------------------------------------
8 rabbits equals 1 rabbyte.

Offline TomToad

  • Sr. Member
  • ****
  • Posts: 383
Re: BlitzMax and JavaScript together
« Reply #3 on: May 11, 2019, 08:46:17 PM »
Finally figured a way to send information from Javascript back to BlitzMax.  Just needed to use XMLHttpRequest() and open a socket in BlitzMax to receive the request.

HTML code: test.html
Code: [Select]
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<p>Hello, my name is <span id="name"></span>!</p>

<script>
var first = "Tom";
var last = "Toad";
var fullName = first + " " + last;
//How can I get and set these variables in BlitzMAX?

document.getElementById("name").innerHTML = fullName;

function changeName(firstName, lastName) {
//how can I call this function in BlitzMAX?
first = firstName;
last = lastName;
fullName = first + " " + last;
document.getElementById("name").innerHTML = fullName;
}

function getName() {
return fullName;
}
</script>
</body>
</html>

BlitzMax code:
Code: BlitzMax
  1. SuperStrict
  2. Import maxgui.drivers
  3.  
  4. Global MainWindow:TGadget = CreateWindow("Test HTML Frame",0,0,800,600,Null,WINDOW_DEFAULT|WINDOW_CENTER|WINDOW_CLIENTCOORDS)
  5. Global HTMLView:TGadget = CreateHTMLView(0,20,ClientWidth(MainWindow),ClientHeight(MainWindow)-20,MainWindow)
  6. Global ChangeNameButton:TGadget = CreateButton("Change Name",0,0,120,20,MainWindow)
  7. Global PrintNameButton:TGadget = CreateButton("Print Name",120,0,120,20,MainWindow)
  8. AddHook EmitEventHook,hook
  9. Local testpage:String = "file:///"+AppDir+"/test.html"
  10. HtmlViewGo(HTMLView,testpage)
  11.  
  12. Repeat
  13.         WaitEvent()
  14. Forever
  15.  
  16. Function hook:Object(id:Int, data:Object,context:Object)
  17.         Local event:TEvent = TEvent(data)
  18.        
  19.         Select event.id
  20.                 Case EVENT_WINDOWCLOSE, EVENT_APPTERMINATE
  21.                         End
  22.                 Case EVENT_GADGETACTION
  23.                         Select event.source
  24.                                 Case ChangeNameButton
  25.                                         Local Firstnames:String[] = ["John","Mary","Tom","Sam","Frank","Martha"]
  26.                                         Local Lastnames:String[] = ["Doe","Smith","Jones","Taylor"]
  27.                                         HtmlViewRun(HTMLView,"changeName('"+Firstnames[Rand(0,5)]+"','"+Lastnames[Rand(0,3)]+"');")
  28.                                 Case PrintNameButton
  29.                                         SetStatusText MainWindow, getValue(HTMLView,"fullName")
  30.                         End Select
  31.         End Select
  32.         Return data
  33. End Function
  34.  
  35. Function getValue:String(View:TGadget, Key:String)
  36.         Local data:String = Null
  37.         Local socket:TSocket = CreateTCPSocket()
  38.         Local result:Int = BindSocket(socket,8080)
  39.         If Not result Then RuntimeError("Cannot bind socket")
  40.         SocketListen(socket)
  41.         HtmlViewRun(View,"var xhr = new XMLHttpRequest(); " + ..
  42.                                         "xhr.open(~qPOST~q,~qhttp://127.0.0.1:8080~q,true); " + ..
  43.                                         "xhr.setRequestHeader(~qString-Value~q, "+Key+".toString()); " + ..
  44.                                         "xhr.send();")
  45.  
  46.         Local remoteSocket:TSocket = SocketAccept(socket,5000)
  47.         If remoteSocket
  48.                 Local in:TSocketStream = CreateSocketStream(remoteSocket)
  49.                 Local Post:String = "get"
  50.                 While Post <> ""
  51.                         Post = ReadLine(in).Replace("~r","").Trim()
  52.                         Local Params:String[] = Post.split(": ")
  53.                         If Params.length >= 2
  54.                                 If Params[0] = "String-Value"
  55.                                         data = Params[1]
  56.                                 EndIf
  57.                         EndIf
  58.                 Wend
  59.                 CloseStream in
  60.         EndIf
  61.         CloseSocket socket
  62.         Return data
  63. End Function
  64.  
------------------------------------------------
8 rabbits equals 1 rabbyte.