AfxNova progress

[Paul Squires]

Wow, that looks seriously impressive!

I am just thinking out loud - how would a FreeBasic programmer get FB data into the Javascript and then from the Javascript back to FB? It would be very convenient to be able to transfer data between the languages because you could use FB for the serious data intensive work and then Javascript for the visual stuff.

[José Roca]

This is done using JSON. WebView2 has methods to send and receive JSON strings. I already have JSON writer and reader classes that work with DWSTRING, BSTRING and DSafeArray. I'm procedeeing step by step because all this is new to me: asynchronous events, html, javascript, JSon... However, my wrapper classes will allow to use a javascript library like Konva as if it was a FreeBasic library, e.g. m_pCanvas->DrawText("text1", 10, 10, "This is a test string", 48, "Arial", "red", "transparent", 0, TRUE). Inside, the function does this:

Code Select Expand

' ========================================================================================
' Draws a text string on the Konva canvas.
' Parameters:
'   id          : Optional identifier for the text (case-sensitive)
'   x, y        : Coordinates of the text position (in pixels). Use -1, -1 to center the text.
'   dwsText     : The text string to display (Unicode aware)
'   fontSize    : Font size in pixels
'   fontFamily  : Font family name (e.g., "Arial", "Verdana")
'   fillColor   : Text fill color (HTML/CSS color string)
'   strokeColor : Outline color of the text (HTML/CSS color string)
'   strokeWidth : Width of the outline (in pixels)
'   draggable   : If TRUE, the text can be dragged with the mouse
' Description:
'   Creates a new Konva.Text object and adds it to the main layer.
'   If an id is provided, it is assigned to the shape so it can be
'   modified later (e.g., SetShadow, MoveTo, etc.)
' Usage example:
'   m_pCanvas->DrawText("txt1", 100, 150, "Hello world", 24, "Arial", "black", "transparent", 0, TRUE)
' ========================================================================================
PRIVATE SUB CWV2CanvasKonva.DrawText ( _
   BYREF id AS STRING = "", _
   BYVAL x AS LONG, _
   BYVAL y AS LONG, _
   BYREF dwsText AS DWSTRING, _
   BYVAL fontSize AS LONG = 20, _
   BYREF fontFamily AS STRING = "Arial", _
   BYREF fillColor AS STRING = "black", _
   BYREF strokeColor AS STRING = "transparent", _
   BYVAL strokeWidth AS LONG = 0, _
   BYVAL draggable AS BOOLEAN = FALSE)

   DIM idPart AS STRING
   IF id <> "" THEN idPart = "id:'" & id & "',"

   DIM js AS STRING
   js = _
      "var txt = new Konva.Text({" _
      & idPart _
      & "x:0," _
      & "y:0," _
      & "text:" & dwsText.JScript & "," _
      & "fontSize:" & STR(fontSize) & "," _
      & "fontFamily:'" & fontFamily & "'," _
      & "fill:'" & fillColor & "'," _
      & "stroke:'" & strokeColor & "'," _
      & "strokeWidth:" & STR(strokeWidth) & "," _
      & "draggable:" & IIF(draggable, "true", "false") _
      & "});" _
      & "layer.add(txt);" _
      & "var finalX = " & STR(x) & ";" _
      & "var finalY = " & STR(y) & ";" _
      & "var w = txt.width();" _
      & "var h = txt.height();" _
      & "if(finalX == -1){" _
      & "   finalX = (stage.width() - w) / 2;" _
      & "}" _
      & "if(finalY == -1){" _
      & "   finalY = (stage.height() - h) / 2;" _
      & "}" _
      & "txt.x(finalX);" _
      & "txt.y(finalY);" _
      & "layer.draw();"
   this.ExecuteScript(js, NULL)
END SUB
' ========================================================================================


[José Roca]

dwsText.JScript. JScript This is a property that I have added to DWSTRING to convert its content into a safe JavaScript expression for use with WebView2 ExecuteScript. You know, in the modern web browsers, all is javascript and utf-8.

Code Select Expand

' ========================================================================================
' JScript (PROPERTY)
' ------------------
' Converts the DWSTRING content into a safe JavaScript expression for use with
' WebView2 ExecuteScript.
'
' WebView2 requires UTF-8 text when passing strings to JavaScript. This property
' takes the internal UTF-8 byte sequence of the DWSTRING and generates a JS
' expression of the form:
'
'     new TextDecoder('utf-8').decode(Uint8Array.from([b1,b2,b3,...]))
'
' This guarantees that any Unicode text (including accents, symbols and emojis)
' is transmitted correctly to JavaScript without escaping issues, broken quotes,
' or encoding mismatches.
'
' The user can therefore pass DWSTRING values directly to ExecuteScript without
' worrying about UTF-8 handling or manual escaping.
'
' Usage example:
' m_pWebView->ExecuteScript("console.log(" & myString.JScript & ");")
'
' Notes:
' - The returned value is valid JavaScript code, not a literal string.
' - Ideal for passing arbitrary text safely from FreeBasic to JavaScript.
' ========================================================================================
' ========================================================================================
PRIVATE PROPERTY DWSTRING.JScript () AS STRING
   DWSTRING_DP("")
   DIM utf8Text AS STRING = this.utf8
   DIM p AS UBYTE PTR = STRPTR(utf8Text)
   DIM js AS STRING = "new TextDecoder('utf-8').decode(Uint8Array.from(["
   DIM L AS LONG = LEN(utf8Text)
   FOR i AS LONG = 0 TO L - 1
      js += STR(p[i])
      IF i < L - 1 THEN js += ","
   NEXT
   js += "]))"
   RETURN js
END PROPERTY
' ========================================================================================