Author Topic: QBJS - QBasic for the Web (Read 40682 times)

FellippeHeitor · « **Reply #75 on:** March 16, 2022, 01:06:14 pm »

Man, this is just so amazing. Galleon intended to bring QB64 into the web with a javascript core one day™️, you just went ahead and did it yourself. The integration blows my mind, with parameters going back and forth between basic code and javascript. You are on fire, man. 🔥

dbox · « **Reply #76 on:** March 16, 2022, 03:15:58 pm »

Thanks @FellippeHeitor!

bplus · « **Reply #77 on:** March 16, 2022, 04:38:13 pm »

@dbox yeah so recursive does work, fantastic!

Code: QB64: [Select]

_Title "Basic Tree from branch"
'Randomize Timer
Screen _NewImage(800, 600, 32)
'_ScreenMove 300, 20
Color _RGB32(0, 255, 0)
 
'just test call to sub
'       x,   y,  270, .2*height, 1  start a tree with 270 degrees to point up, and about 1/5 the height you want to grow the tree
branch 400, 500, 270, 100, 1
Print "press any to see the forest..."
Sleep
Cls
 
Dim horizon, i, y
horizon = .35 * _Height
For i = 0 To horizon
    Line (0, i)-(_Width, i), _RGB(0, 0, .25 * i + 100)
Next
For i = horizon To _Height
    Line (0, i)-(_Width, i), _RGB(0, 255 - .25 * i - 50, 0)
Next
For i = 1 To 250
    y = randWeight(horizon, _Height, 3)
    branch _Width * Rnd, y, 270, (.015 * Rnd + .027) * y, 1
Next
Sleep
 
Sub branch (x, y, angD, lngth, lev)
    Dim x2, y2, l
    x2 = x + Cos(_D2R(angD)) * lngth
    y2 = y + Sin(_D2R(angD)) * lngth
    Line (x, y)-(x2, y2), _RGB32(Rnd * 100, Rnd * 170 + 80, Rnd * 50)
    If lev > 6 Or lngth < 2 Then Exit Sub
    l = lev + 1
    branch x2, y2, angD + 10 + 30 * Rnd, .7 * lngth + .2 * Rnd * lngth, l
    branch x2, y2, angD - 10 - 30 * Rnd, .7 * lngth + .2 * Rnd * lngth, l
    If Rnd < .65 Then branch x2, y2, angD + 20 * Rnd - 10, .7 * lngth + .2 * Rnd * lngth, l
End Sub
 
Function randWeight (manyValue, fewValue, power)
    randWeight = manyValue + Rnd ^ power * (fewValue - manyValue)
End Function
 
Function _D2R (d As Integer)
    _D2R = d * _Pi / 180
End Function
 

bplus · « **Reply #78 on:** March 16, 2022, 04:56:50 pm »

Quote from: dbox on March 16, 2022, 12:57:21 pm

Here's another little tidbit for you. I put together a simple POC to work out some ideas around allowing the QBJS canvas to interact with other elements on the page. In this example you can create html elements, add them to a page and even assign events to your QB Subs:

Code: QB64: [Select]
DomInit
DomAdd "div", "button-panel"
DomAdd "button", "circle-button", "Draw Circle", "button-panel"
DomAdd "button", "rect-button", "Draw Rectangle", "button-panel"
DomAdd "input", "myinput", "", "button-panel"
DomAdd "button", "text-button", "Draw Text", "button-panel"
DomAdd "button", "clear-button", "Clear Screen", "button-panel"

Dim panel
panel = DomGet("button-panel")
panel.style.border = "1px solid green"
panel.style.backgroundColor = "#333"
panel.style.padding = "6px"

Dim btn
btn = DomGet("circle-button")
btn.onclick = sub_OnBtnCircleClick
btn = DomGet("rect-button")
btn.onclick = sub_OnBtnRectClick
btn = DomGet("text-button")
btn.onclick = sub_OnBtnTextClick
btn = DomGet("clear-button")
btn.onclick = sub_OnBtnClearClick
btn.style.marginLeft = "15px"

Dim myinput
myinput = DomGet("myinput")
myinput.style.marginLeft = "15px"

Sub OnBtnCircleClick
Circle (Rnd * 600, Rnd * 380), 10 + Rnd * 90, Rnd * 14 + 1
End Sub

Sub OnBtnRectClick
Dim As Integer x, y, w, h
x = Rnd * 600
y = Rnd * 380
w = Rnd * 90 + 10
h = Rnd * 90 + 10
Line (x, y)-(x + w, y + h), Rnd * 14 + 1, B
End Sub

Sub OnBtnTextClick
If myinput.value <> "" Then
Color Rnd * 14 + 1
_PrintString (Rnd * 600, Rnd * 380), myinput.value
End If
End Sub

Sub OnBtnClearClick
Cls
End Sub

' ------------------------------------------------------------------
' HTML DOM API Methods
' ------------------------------------------------------------------
Sub DomAdd (etype As String, eid as String, content As String, parentId As String)
$If Javascript
if (document.getElementById(eid)) { return; }
var e = document.createElement(etype);
e.id = eid;
e.className = "qbjs";
if (content != undefined) {
e.innerHTML = content;
}
if (parentId == undefined || parentId == "") {
parentId = "gx-container";
}
document.getElementById(parentId).appendChild(e);
$End If
End Sub

Function DomGet (eid as String)
$If Javascript
return document.getElementById(eid);
$End IF
End Function

Sub DomInit
$If Javascript
var elements = document.getElementsByClassName("qbjs");
for (var i=0; i < elements.length; i++) {
elements[i].remove();
}
$End If
End Sub

View in QBJS

Assuming this approach is useful I may look at building in the DOM API methods as new QBJS Keywords.

Holy cow, getting JS and Basic both if I understand!?

dbox · « **Reply #79 on:** March 16, 2022, 05:44:10 pm »

Here are a couple more quick web examples:

Copy Cat
This one copies the text to the QBJS canvas as well as another HTML element as the user types into a textarea control:

Code: QB64: [Select]

Screen _NewImage(640, 200)
DomInit
DomAdd "div", "content-panel"
DomAdd "textarea", "text-src", "", "content-panel"
DomAdd "div", "text-div", "", "content-panel"
 
Dim Shared textArea
textArea = DomGet("text-src")
textArea.style.width = "640px"
textArea.style.height = "100px"
textArea.onkeyup = sub_OnTextChange
 
Dim Shared copyDiv
copyDiv = DomGet("text-div")
copyDiv.style.width = "640px"
copyDiv.style.margin = "0 auto"
copyDiv.style.padding = "10px"
copyDiv.style.border = "1px solid green"
copyDiv.style.textAlign = "left"
copyDiv.style.backgroundColor = "#333"
copyDiv.style.fontFamily = "arial, helvetica, sans-serif"
copyDiv.style.whiteSpace = "pre"
 
Sub OnTextChange
    Cls
    Locate 1, 1
    Print textArea.value
    copyDiv.innerHTML = textArea.value
End Sub
 
 
' ------------------------------------------------------------------
' HTML DOM API Methods
' ------------------------------------------------------------------
Sub DomAdd (etype As String, eid as String, content As String, parentId As String)
$If Javascript
    if (document.getElementById(eid)) { return; }
    var e = document.createElement(etype);
    e.id = eid;
    e.className = "qbjs";
    if (content != undefined) {
        e.innerHTML = content;
    }
    if (parentId == undefined || parentId == "") {
        parentId = "gx-container";    
    }
    document.getElementById(parentId).appendChild(e);
$End If
End Sub
       
Function DomGet (eid as String)
    $If Javascript
        return document.getElementById(eid);
    $End IF
End Function
           
Sub DomInit
$If Javascript
    var elements = document.getElementsByClassName("qbjs");
    for (var i=0; i < elements.length; i++) {
        elements[i].remove();
    }
$End If
End Sub

View in QBJS

QBJS Paint
This one extends the first simple drawing program example that was added to the QBJS site by adding an HTML5 color picker that is used to change the current drawing color:

Code: QB64: [Select]

Screen _NewImage(640, 200)
DomInit
DomAdd "div", "content-panel"
DomAdd "textarea", "text-src", "", "content-panel"
DomAdd "div", "text-div", "", "content-panel"
 
Dim Shared textArea
textArea = DomGet("text-src")
textArea.style.width = "640px"
textArea.style.height = "100px"
textArea.onkeyup = sub_OnTextChange
 
Dim Shared copyDiv
copyDiv = DomGet("text-div")
copyDiv.style.width = "640px"
copyDiv.style.margin = "0 auto"
copyDiv.style.padding = "10px"
copyDiv.style.border = "1px solid green"
copyDiv.style.textAlign = "left"
copyDiv.style.backgroundColor = "#333"
copyDiv.style.fontFamily = "arial, helvetica, sans-serif"
copyDiv.style.whiteSpace = "pre"
 
Sub OnTextChange
    Cls
    Locate 1, 1
    Print textArea.value
    copyDiv.innerHTML = textArea.value
End Sub
 
 
' ------------------------------------------------------------------
' HTML DOM API Methods
' ------------------------------------------------------------------
Sub DomAdd (etype As String, eid as String, content As String, parentId As String)
$If Javascript
    if (document.getElementById(eid)) { return; }
    var e = document.createElement(etype);
    e.id = eid;
    e.className = "qbjs";
    if (content != undefined) {
        e.innerHTML = content;
    }
    if (parentId == undefined || parentId == "") {
        parentId = "gx-container";    
    }
    document.getElementById(parentId).appendChild(e);
$End If
End Sub
       
Function DomGet (eid as String)
    $If Javascript
        return document.getElementById(eid);
    $End IF
End Function
           
Sub DomInit
$If Javascript
    var elements = document.getElementsByClassName("qbjs");
    for (var i=0; i < elements.length; i++) {
        elements[i].remove();
    }
$End If
End Sub

View in QBJS

Pete · « **Reply #80 on:** March 16, 2022, 10:19:23 pm »

Quote from: FellippeHeitor on March 16, 2022, 01:06:14 pm

Man, this is just so amazing. Galleon intended to bring QB64 into the web with a javascript core one day™️, you just went ahead and did it yourself. The integration blows my mind, with parameters going back and forth between basic code and javascript. You are on fire, man. 🔥

Yep. one down, one to go on that wish list of his, JAVA. Rob wanted to redo QB64 in JAVA, so it could be used to make mobile apps for Android devices. Honestly for the time, circa 2007, C/C++ seemed to be the most stable choice, and PCs and laptops were in the user majority. JAVA would have satisfied both, and can be run on Apple and Linux too, but I guess a couple JAVA versions were blocked by Apple in the past.

Oh, and a post for history sake: https://www.tapatalk.com/groups/qbasic/welcome-to-the-qb64-forum-t36432.html#p158976

bplus · « **Reply #81 on:** March 16, 2022, 10:25:03 pm »

@dbox This is game I wanted to try tonight. The arrow keys work great! Miss a little noise maker when yellow square, our hero, hits a circle, now I just pause action so you can read your hits.

Actually a couple people here have posted similar game. While playing tonight I came up with new idea for scoring, TBA, say tuned!

Code: QB64: [Select]

Dim As Long HX, HY, i, hits, score, Stars, nEnemies, Height
HX = 320: HY = 400: nStars = 1000: nEnemies = 50: Height = 480
Dim EX(nEnemies), EY(nEnemies), EC(nEnemies) As _Unsigned Long ' enemy stuff
Screen _NewImage(640, Height, 32)
Stars = _NewImage(640, Height, 32)
For i = 1 To nStars
    PSet (Int(Rnd * 640), Int(Rnd * 480)), _RGB32(55 + Rnd * 200, 55 + Rnd * 200, 55 + Rnd * 200)
Next
_PutImage , 0, Stars
For i = 1 To nEnemies
    EX(i) = Int(Rnd * 600 + 20): EY(i) = -2 * Height * Rnd + Height: EC(i) = _RGB32(55 + Rnd * 200, 55 + Rnd * 200, 55 + Rnd * 200)
Next
Do
    Cls
    _PutImage , Stars, 0
    Print "Hits:"; hits, "Score:"; score
    Line (HX - 10, HY - 10)-Step(20, 20), _RGB32(255, 255, 0), BF
    For i = 1 To nEnemies ' the enemies
        Circle (EX(i), EY(i)), 10, EC(i)
        If Sqr((EX(i) - HX) ^ 2 + (EY(i) - HY) ^ 2) < 20 Then 'collision
            _Delay .5
            hits = hits + 1
            EX(i) = Int(Rnd * 600 + 20): EY(i) = -Height * Rnd ' move that bad boy!
            If hits = 10 Then Print "Too many hits, goodbye!": End
        End If
        EY(i) = EY(i) + Int(Rnd * 5)
        If EY(i) > 470 Then EX(i) = Int(Rnd * 600 + 20): EY(i) = -Height * Rnd: score = score + 1
    Next
    If _KeyDown(20480) Then HY = HY + 3
    If _KeyDown(18432) Then HY = HY - 3
    If _KeyDown(19200) Then HX = HX - 3
    If _KeyDown(19712) Then HX = HX + 3
    If HX < 10 Then HX = 10
    If HX > 630 Then HX = 630
    If HY < 10 Then HY = 10
    If HY > 470 Then HY = 470
    _Display
    _Limit 100
Loop Until _KeyDown(27): Sleep
 
 

There is some flicker and odd where it is printing.

share:
https://v6p9d9t4.ssl.hwcdn.net/html/5429488/index.html?qbcode=JEaW0BACgufDTG9uZ2CkLEAWOCkLOsA01A2hpdHP5Ec2NvcmVwIpujC5OduO3IrcytrSyudsKkMrSztDooAVLgA9yAMxAMkAMLgHXTXkAaFlPzFblN0YXJzw6AGLua7mfEA1Kd+/SMA4ND2gFFWLQCiAACm+kFFWa9Kv3QKKh782u1qAvnjqrc5tLO3MrJAWQBPYCMrcytrzJiObo6szMN4VTY3JlZW7iujpzK7pLaws7K1UA2DYyDdOq62XXcYtYT0Mw11lJYCRm9ylF+YxQKo37qH+GGoKbK6b3YSS3OkxAlJuZOSAVZZ4fXb3te87L14y62/BKSOhYMh+YrGAV3y73DvsvlLWVlJDvOVHC4NnS9STDDTmV4dEvHR1B1dEltYWdl6xXCbDbPTxt26pf7NEuOva2v78uqztFRe2UFKb9gAWo7dzLi0uCXSgmvx4F9ZglLv5M+6ZbWvhyat8026HXp1cbuqkFhkFEb3/6OEhtjnL/fM9d4vdP8QIoOTS3OnWAESGGkNLo5wwJ0RJoB3iDYKAEU2NvcmUBteCX/7UNMaW5l5BMA0VNiOw4tSM2Iam6MrhN9NwqT8VWdCcGtfBrX7k+mgoSM3/a9fRmbXqbO2YJ0aGXdBmVuZW1pZXOf//lYqG0uTG2MvN7u5ZuCFywNnS2xDcFv//WgUlmyMJTcXIRMFcG2xIa4AvddjIOl4dPPBjL1LOwDztPcw1RoZW7ZVAhjb2xsaXNpb26v///7UfERGVsYXnRgC6Ff///2PD0vHo1/wDt3hpmxN0LnjEJ1I1jde8tOF/AuVLhZQ21vdmVgg3RoYXRYQmJhZHACYm95lYBDUADuXMzcoc+6J3tsEqN7evQbawtzyk+d+Mzt7eyMTyy7LsASI6W4JFbmSgB/a2tAD+zhhunaywmcerFr7FQCeXNY5YUA+TvzAN4ZR+c301fvKVqREJn8bssHfON1mytV3l7eM+qbqBlKBfs98GS2V5RG93bt//rZT+0szHrwVJlAgPMLeeISzOjtYILxMXVaYQHuvc9V8A5l/+3Mv3jLZ2aYR3vv89d61/DHbudrxCTOkwqKSoknkNffJPTDI1qRdvXyO6PETr6walVFkvmJheq/2Dm4OxYIv9ncnrNxf3DzTRkRpc3BsYXm4ee+ETGltaXRX/9+JDTG9vcEYEVW50aWx7p9eR2rTLxFNsZWVwvAg=

I've got another I hope I can get working tomorrow.

dbox · « **Reply #82 on:** March 16, 2022, 11:35:03 pm »

Nice one @bplus! Looks like the flicker is related to the screen scrolling that happens when you print a newline on the last viewable line of the page. I found that if you replace the Print call on line 16 with this...

Code: QB64: [Select]

    Locate 30, 1
    Print "Hits:"; hits, "Score:"; score;

... the display is nice and smooth.

View Mod in QBJS

bplus · « **Reply #83 on:** March 17, 2022, 07:02:33 am »

Ah! in QB64 a CLS restarts Print line at top, line 1, so CLS in QBJS is not doing that! Thus the need for Locate.

That score should always be at the top.

dbox · « **Reply #84 on:** March 17, 2022, 09:16:39 am »

Aha, good catch @bplus! I've added that to the Known Issues page as well as the fix list for the next release on the Roadmap page.

dbox · « **Reply #85 on:** March 17, 2022, 12:42:12 pm »

Played around a bit more with the QBJS Paint program. Here's a version that will allow you to select different drawing tools and has 1 level of undo:

Code: QB64: [Select]

CreateToolbar
Dim fimage, cimage
fimage = _NewImage(640, 400)
cimage = _NewImage(640, 400)
 
Dim drawing, lastX, lastY, startX, startY, tool, radius
Do
    If _MouseButton(1) Then
        If Not drawing Then
            _PutImage , cimage, fimage
            '_FreeImage cimage
            cimage = _NewImage(640, 400)
            lastX = _MouseX
            lastY = _MouseY
            startX = lastX
            startY = lastY
            drawing = -1
            DomGet("btn-undo").disabled = false
        Else
            tool = DomGet("tool").value
            
            If tool = "Freehand" Then
                _Dest cimage
                Line (lastX, lastY)-(_MouseX, _MouseY), SelectedColor
                lastX = _MouseX
                lastY = _MouseY
                _Dest 0
                
            ElseIf tool = "Line" Then
                '_FreeImage cimage
                cimage = _NewImage(640, 400)
                _Dest cimage
                Line (startX, startY)-(_MouseX, _MouseY), SelectedColor
                _Dest 0
 
            ElseIf tool = "Rectangle" Then
                '_FreeImage cimage
                cimage = _NewImage(640, 400)
                _Dest cimage
                Line (startX, startY)-(_MouseX, _MouseY), SelectedColor, B
                _Dest 0
 
            ElseIf tool = "Filled Rectangle" Then
                '_FreeImage cimage
                cimage = _NewImage(640, 400)
                _Dest cimage
                Line (startX, startY)-(_MouseX, _MouseY), SelectedColor, BF
                _Dest 0
 
            ElseIf tool = "Circle" Then
                '_FreeImage cimage
                cimage = _NewImage(640, 400)
                If Abs(_MouseX - startX) > Abs(_MouseY - startY) Then
                    radius = Abs(_MouseX - startX)
                Else
                    radius = Abs(_MouseY - startY)
                End If
                _Dest cimage
                Circle (startX, startY), radius, SelectedColor
                _Dest 0
 
            ElseIf tool = "Filled Circle" Then
                '_FreeImage cimage
                cimage = _NewImage(640, 400)
                If Abs(_MouseX - startX) > Abs(_MouseY - startY) Then
                    radius = Abs(_MouseX - startX)
                Else
                    radius = Abs(_MouseY - startY)
                End If
                _Dest cimage
                Dim r
                For r = 0 To radius Step .3
                    Circle (startX, startY), r, SelectedColor
                Next r
                _Dest 0
 
            End If
        
        End If
    Else 
        drawing = 0
    End If
    Cls
    _PutImage , fimage
    _PutImage , cimage
    _Limit 30
Loop    
 
Sub OnBtnUndo
    '_FreeImage cimage
    cimage = _NewImage(640, 400)
    DomGet("btn-undo").disabled = true
End Sub
 
Sub CreateToolbar
    DomInit
    DomAdd "div", "control-panel"
    DomAdd "span", "label1", "Tool: ", "control-panel"
    DomAdd "select", "tool", "", "control-panel"
    DomAdd "span", "label2", "Color: ", "control-panel"
    DomAdd "input", "color-picker", "", "control-panel"
    
    Dim btnUndo
    btnUndo = DomAdd("button", "btn-undo", "Undo", "control-panel")
    'btnUndo.style.marginLeft = "15px"
    btnUndo.style.float = "right"
    btnUndo.style.padding = "5px 10px"
    btnUndo.disabled = true
    btnUndo.onclick = sub_OnBtnUndo
 
    Dim panel
    panel = DomGet("control-panel")
    panel.style.textAlign = "left"
    panel.style.width = "640px"
    panel.style.margin = "0 auto"
    panel.style.padding = "5px"
    panel.style.fontFamily = "Arial, helvetica, sans-serif"
    panel.style.fontSize = ".85em"
    panel.style.border = "1px solid #666"
    panel.style.backgroundColor = "#333"
    panel.style.verticalAlign = "middle"
 
    Dim cp
    cp = DomGet("color-picker")
    cp.type = "color"
    cp.value = "#ffffff"
        
    InitToolList
End Sub
    
Sub InitToolList
    Dim ts, topt
    ts = DomGet("tool")
    ts.style.marginRight = "15px"
    ts.style.padding = "5px"
    ts.style.verticalAlign = "top"
    topt = DomAdd("option", "", "Freehand", "tool"): topt.value = "Freehand"
    topt = DomAdd("option", "", "Line", "tool"): topt.value = "Line"
    topt = DomAdd("option", "", "Rectangle", "tool"): topt.value = "Rectangle"
    topt = DomAdd("option", "", "Filled Rectangle", "tool"): topt.value = "Filled Rectangle"
    topt = DomAdd("option", "", "Circle", "tool"): topt.value = "Circle"
    topt = DomAdd("option", "", "Filled Circle", "tool"): topt.value = "Filled Circle"
End Sub
    
Function SelectedColor    
    Dim r, g, b, c, cp
    cp = DomGet("color-picker")
    c = cp.value
 
    $If Javascript
        r = parseInt(c.substr(1,2), 16)
        g = parseInt(c.substr(3,2), 16)
        b = parseInt(c.substr(5,2), 16)
    $End If
        
    SelectedColor = _RGB(r, g, b)
End Function
 
    
' ------------------------------------------------------------------
' HTML DOM API Methods
' ------------------------------------------------------------------
Function DomAdd (etype As String, eid as String, content As String, parentId As String)
$If Javascript
    if (document.getElementById(eid)) { return; }
    var e = document.createElement(etype);
    if (eid != undefined && eid != "") {
        e.id = eid;
    }
    e.className = "qbjs";
    if (content != undefined) {
        e.innerHTML = content;
    }
    if (parentId == undefined || parentId == "") {
        parentId = "gx-container";    
    }
    document.getElementById(parentId).appendChild(e);
    return e;
$End If
End Function
 
Sub DomAdd (etype As String, eid as String, content As String, parentId As String)
    Dim e: e = DomAdd(etype, eid, content, parentId)
End Sub
       
Function DomGet (eid as String)
$If Javascript
    return document.getElementById(eid);
$End IF
End Function
           
Sub DomInit
$If Javascript
    var elements = document.getElementsByClassName("qbjs");
    for (var i=0; i < elements.length; i++) {
        elements[i].remove();
    }
$End If
End Sub

View in QBJS

(I also realized in the process that the _FreeImage keyword is not registered correctly, so it's been added to the fix list for the next release.)

dbox · « **Reply #86 on:** March 18, 2022, 12:31:47 pm »

Hi All,

As I'm working on planning the next beta release of QBJS I'd love to hear from the community what you'd like to see included next. Here is my current list for v.0.3.0:

Fixes
* Cls is not resetting the text location to the top left of the screen.
* _FreeImage is being reported as an unrecognized method
* Using the "Call" keyword to call a sub with no arguments causes an error
Workaround: Remove the "Call" keyword
* Function calls prefixed with the negative operator (e.g. -_WIDTH) are not converting properly.
Workaround: Wrap function call in extra parenthesis (e.g. -(_WIDTH) )

Enhancements
* Add parameter to launch QBJS in "Play" mode with no IDE (mode=play)~~
* Add checkbox on the share dialog to automatically add this parameter to the generated URL
* Add support for additional string keywords ( @FellippeHeitor let me know if you found some more from your examples ):
* String$, Space$, Mkl$
* Add support for basic sound keywords:
* _SndOpen, _SndClose, _SndPlay, _SndLoop, _SndVol, _SndPause, _SndStop
* Add Keywords to interact with HTML DOM (e.g. DomAdd, DomGet)
* Scale canvas to screen size when in fullscreen mode
* Add support for _FullScreen keyword
* Add support for touch events on mobile
* Show runtime errors traced back to line in basic source in console window

The most up-to-date list is maintained on the QBJS project Roadmap page.

dbox · « **Reply #87 on:** March 30, 2022, 11:58:13 pm »

The QBJS v0.3.0 release is out! You can now go beyond the screen!

Check out the latest here: https://boxgm.itch.io/qbjs.
The full list of fixes and enhancements are in the Release Notes.

This release added more QB/QB64 keywords:
* More string keywords: String$, Space$, Cvi, Cvl, Mki$, Mkl$
* Sound keywords: _SndOpen, _SndClose, _SndPlay, _SndLoop, _SndVol, _SndPause, _SndStop
* Resize keywords: _Resize, _ResizeWidth, _ResizeHeight

The most major addition to this release is the addition of new QBJS-specific keywords that allow access to create and manipulate HTML page elements and respond to DOM events. Now rich HTML controls can be used in conjunction with your QBasic application. Here are several examples:
* Input Controls
* HTML Content
* Web Dialogs
* Multiple Image Canvases
* Simple Drawing (Event-based Version)
* Zoom Tool
* Event-based Version
* QBJS Paint
* Event-based Version
* Resize Example
* Event-based Version
* Sound Keywords

As always I'm very interested in any and all feedback from the community!

bplus · « **Reply #88 on:** March 31, 2022, 06:48:08 am »

@dbox You've found a way to load sound files? image files?

dbox · « **Reply #89 on:** March 31, 2022, 08:03:29 am »

@bplus - Yes, loading images and sounds are now supported. In my most recent post there are examples of loading images and sounds from URLs: (Zoom Tool, Sound Keywords).

If you run QBJS on your local machine (by downloading and extracting the qbjs.zip) you can load files from the local filesystem:

Code: QB64: [Select]

Dim img
img = _LoadImage("play.png")
_PutImage (100, 100), img

To load files that are outside of your QBJS folder you can use the file URL format: "file://C:/mypath/myfile.png"

News:

Author Topic: QBJS - QBasic for the Web (Read 40682 times)

FellippeHeitor

Re: QBJS - QBasic for the Web

dbox

Re: QBJS - QBasic for the Web

bplus

Re: QBJS - QBasic for the Web

bplus

Re: QBJS - QBasic for the Web

dbox

Re: QBJS - QBasic for the Web

Pete

Re: QBJS - QBasic for the Web

bplus

Re: QBJS - QBasic for the Web

dbox

Re: QBJS - QBasic for the Web

bplus

Re: QBJS - QBasic for the Web

dbox

Re: QBJS - QBasic for the Web

dbox

Re: QBJS - QBasic for the Web

dbox

Re: QBJS - QBasic for the Web

dbox

Re: QBJS - QBasic for the Web

bplus

Re: QBJS - QBasic for the Web

dbox

Re: QBJS - QBasic for the Web