QBJS - QBasic for the Web

[bplus]

Actually a replaced 2 Sleep's with 2 _Delay's and it was after the Sleep's I needed KeyClear.

But looks and plays right, yeah!

(I forgot about _delay for the checklist, only working in main, so it works in procedures now too, excellent!)

[STxAxTIC]

The epicycles code runs so awesome on this, on par with native:

 

[dbox]

I've updated the QBasic Language Support to include the bulleted list at the top that we discussed @bplus.  It's divided in to three sections:

• Differences from QBasic
• Functionality New to QBJS
• Known Issues

I will attempt to keep this updated as any new issues are reported.  Bugs or discrepancies that are specific to a keyword will still be maintained here:  Supported Keywords.

I think this is pretty up-to-date now with what has been discussed on this thread, but let me know if you see anything missing or find anything new.

[bplus]

The epicycles code runs so awesome on this, on par with native:

 

If you didn't have to edit anything, I'm jealous!

Don't you want to share (link assigned at QBJS) the glory?  :)

[bplus]

@dbox so one liner IF's fully functional now?

[dbox]

@bplus, no I haven't pushed any updates up since my original post yet.  I have the following regarding single-line if/then on the QBasic Language Support page:

• Single-line If/Then/Else statements are not converted correctly at present
• If/Then statements with ":" to combine additional lines do not work correctly at present

So as long as your If/Then statement doesn't have an Else or a : on the same line, I think it should work as expected.

Let me know if you run into any examples where this is not the case.

[bplus]

@dbox

Oh sorry, the first link went to Keywords, that's where it said IF was full.

Ah, the 2nd link you just posted I will book mark, thanks!

[STxAxTIC]

Hey bplus -

On the road so pardon my briefness... So dbox had to help get the code ready, it wasn't quite paste and go.... For now...

As for the link, I would share if it was convenient. I'll try at the next red light.

....

Crap, url too big.

....

[DANILIN]

graphic colors: especially RGB colors are unclear
so I think we need a table of a dozen colors

https://boxgm.itch.io/qbjs

Relief 3d multivariate parametric animate

Code: [Select]

https://v6p9d9t4.ssl.hwcdn.net/html/5279712/index.html?qbcode=BOAQAHvAMsAwmAOsAcc9AMfANb0EiJKbgFBc+xkludGVnZXLoBhkAowgArU8AWckAKcgCfEZEYW5pbGluwAM7gMnYVyZWxpZWbqAFUCRk9STAeEOpAqie7pKiA8vPN7LsAtXZnAOQUlGaBJKcqXZhKSciLQCp72cTAJNT0RYAbvuE4aokIqdqAByy163O11LdP9E6Zga7eavqABpHnRu0tKDbpiz63vjtm9quOwBpjkAClpyRbtjV5sAOM/gFoJFTkRaf5Q05FWFT98tcb08B0dWYEzNScD2rgNLq7yqVmuAFLxAanWlDRnb2H+2IdcjkF18Te9bqEfCs/IM9E0cEhpim70KltU2tGqd/oULap9adPCxBpiSnIsz25QsA3dSoTCT6k/AFLOlGj6s6qRd+8AGNKlmyu7Qp46Xm+ZYSPvkrfHbfqRB63p6gv+jGP67AX+OEpI6FStov1/NcV6iVYewdg7XYBi2GrfAmdqsIVbpngBMgsyjZPG3J+tT4/b8UOX7fqpCCF3z515ik+Y26inOf18Pn7vzVfp+vZF35qpFc99B59yzVJiyDTPUVVGLXm83zOfzfo9pRfYBw2HDYcbxCIiKmIKyjmAF3vJ05O31
https://qb64forum.alephc.xyz/index.php?topic=4398.msg138349#msg138349

 

Code: QB64: [Select]

1. N = 200: q = 15: DIM As Integer a(q + 1, N) ' Danilin 3d relief
2. FOR x = 1 TO q: FOR y = 1 TO N - 5:
3.         IF INT(RND * 100) MOD 7 = 5 THEN
4. a(x, y) = 5:a(x, y + 1) = 10
5. a(x, y + 2) = 20: a(x, y + 3) = 40
6. a(x, y + 4) = 80
7.         END IF
8. NEXT: NEXT
9.  
10. FOR t = 1 TO N - q
11.     FOR i = 1 TO q - 1
12.         FOR j = 1 TO q - 1
13. a(i, j) = a(i, j + t)
14.         NEXT
15.     NEXT
16. CLS
17.     FOR y = 1 TO q - 1
18.         FOR x = 1 TO q - 2
19. LINE (30 + 20 * x + 20 * y, 400 - 20 * y - a(x, y))-(30 + 20 * (x + 1) + 20 * y, 400 - 20 * y - a(x + 1, y)), _RGB(((y + t) MOD 5) * 70, 0, 0)
20.         NEXT
21.     NEXT
22.  
23.     FOR x = 1 TO q - 1
24.         FOR y = 1 TO q - 2
25. LINE (30 + 20 * x + 20 * y, 400 - 20 * y - a(x, y))-(30 + 20 * (x + 1) + 20 * y, 400 - 20 * (y + 1) - a(x, y + 1)), _RGB(0, 0, 250)
26.         NEXT
27.     NEXT
28. _DELAY 0.2: NEXT: END

[dbox]

Hey @DANILIN, great example.  I will plan to include the color table for the various screen modes so the simple indexed color numbers can be used in the next build.  I'm compiling a list of bugs and requests that I'm planning to add to the Roadmap page on the qbjs github so we can keep track of what's coming in upcoming releases.

(Sorry for the double post. I was looking at your original thread and put this response there by mistake.)

[dbox]

Thanks to everyone who has given this project a try so far.  I really appreciate all of the great feedback.

As I look at putting together the next release, in addition to the fixes and enhancements I have planned I would like to poll the group for your input...

What additional 1-10 keyword(s) would you consider to be the most essential for you beyond what is currently listed on the Supported Keywords page?

[bplus]

_Display, _PutImage, full use of _NewImage, _MapTriangle, files access for loading sounds or images or loading and saving data.

Maybe for keys need metacommand switch if running code in QB64 one set of key values, running QB64 another set because I'd prefer developing in QB64 because with errors, execution is plainly stopped and the offending error pointed at, you aren't left hanging, What went wrong?

[dbox]

Great, thanks @bplus!  I'll look at adding the image methods in the near-term.

Definitely more that I need to do from an error reporting perspective and will look at including some of that work as well.

Thanks for the feedback.

[dbox]

Hi All,

Fun QBJS update for everyone.  There is a new beta release (v.0.2.1) out to take for a spin!

You can try it out online here:  https://boxgm.itch.io/qbjs

Want to download it and run it locally?  Just go to the releases page on github (https://github.com/boxgaming/qbjs/releases) and download the qbjs.zip file.  Unzip it to your preferred location and then just launch the index.html file.

This update has a number of fixes and enhancements:

Fixes
* Keywords that perform a system wait or sleep (_Delay, _Limit, Sleep) do not wait correctly when called from a Sub
* Keywords that perform a system wait (_Delay, _Limit, Sleep, Print, Input, Line Input) error when called from a Function
* Array declaration (Dim/ReDim)
  * (x To y) syntax not supported at present (e.g. Dim myArray(0 To 10))
  * Multi-dimensional arrays are not initialized correctly unless using the "Dim As Type" format (e.g. Dim As Integer myArray(10, 20))
* Improved support for standard key mappings for InKey$, _KeyDown and _KeyHit methods
* Single-line If/Then/Else statements are not converted correctly
* Single-line If/Then statements with ":" to combine additional lines do not work correctly

Enhancements
* Implement color table for the various screen modes so the simple indexed color numbers can be used in addition to colors defined with _RGB(32)
* Add support for QB64 image handling methods (_NewImage, _LoadImage, _PutImage, _CopyImage, _FreeImage)
* Improved runtime error reporting

You can check out the current list of supported keywords here:  Supported Keywords

Keyboard Event Handling Updates
Support for standard QBasic/QB64 keyboard keywords have been greatly improved.  The following two examples should run pretty similar in native QB64 vs. QBJS:

• _KeyHit
• InKey$

Classic Indexed Color Support
QBJS now supports the original simple indexed 256-color palette.  Keywords that take colors as parameter will now accept the simple indexed color numbers as well as colors created with the _RGB* methods.
 

View in QBJS

QB64 Image Keywords
QBJS now supports most of the QB64 image keywords.  Here are some examples to try out:

• Simple _Dest Example
• QBJS Night Sky
• Spritesheet Animation

Note: If you find that previous link examples in this thread are not working you can simply replace the first part of the link with the current internal QBJS URL:

Code: [Select]

https://v6p9d9t4.ssl.hwcdn.net/html/5429488/index.html?qbcode=
As always I value any and all feedback!

[dbox]

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]

1. DomInit
2. DomAdd "div", "button-panel"
3. DomAdd "button", "circle-button", "Draw Circle", "button-panel"
4. DomAdd "button", "rect-button", "Draw Rectangle", "button-panel"
5. DomAdd "input", "myinput", "", "button-panel"
6. DomAdd "button", "text-button", "Draw Text", "button-panel"
7. DomAdd "button", "clear-button", "Clear Screen", "button-panel"
8.  
9. Dim panel
10. panel = DomGet("button-panel")
11. panel.style.border = "1px solid green"
12. panel.style.backgroundColor = "#333"
13. panel.style.padding = "6px"
14.  
15. Dim btn
16. btn = DomGet("circle-button")
17. btn.onclick = sub_OnBtnCircleClick
18. btn = DomGet("rect-button")
19. btn.onclick = sub_OnBtnRectClick
20. btn = DomGet("text-button")
21. btn.onclick = sub_OnBtnTextClick
22. btn = DomGet("clear-button")
23. btn.onclick = sub_OnBtnClearClick
24. btn.style.marginLeft = "15px"
25.  
26. Dim myinput
27. myinput = DomGet("myinput")
28. myinput.style.marginLeft = "15px"
29.  
30. Sub OnBtnCircleClick
31.     Circle (Rnd * 600, Rnd * 380), 10 + Rnd * 90, Rnd * 14 + 1
32. End Sub
33.  
34. Sub OnBtnRectClick
35.     Dim As Integer x, y, w, h
36.     x = Rnd * 600
37.     y = Rnd * 380
38.     w = Rnd * 90 + 10
39.     h = Rnd * 90 + 10
40.     Line (x, y)-(x + w, y + h), Rnd * 14 + 1, B
41. End Sub
42.  
43. Sub OnBtnTextClick
44.     If myinput.value <> "" Then
45.         Color Rnd * 14 + 1
46.         _PrintString (Rnd * 600, Rnd * 380), myinput.value
47.     End If
48. End Sub
49.  
50. Sub OnBtnClearClick
51.     Cls
52. End Sub
53.  
54. ' ------------------------------------------------------------------
55. ' HTML DOM API Methods
56. ' ------------------------------------------------------------------
57. Sub DomAdd (etype As String, eid as String, content As String, parentId As String)
58. $If Javascript
59.     if (document.getElementById(eid)) { return; }
60.     var e = document.createElement(etype);
61.     e.id = eid;
62.     e.className = "qbjs";
63.     if (content != undefined) {
64.         e.innerHTML = content;
65.     }
66.     if (parentId == undefined || parentId == "") {
67.         parentId = "gx-container";    
68.     }
69.     document.getElementById(parentId).appendChild(e);
70. $End If
71. End Sub
72.        
73. Function DomGet (eid as String)
74.     $If Javascript
75.         return document.getElementById(eid);
76.     $End IF
77. End Function
78.            
79. Sub DomInit
80. $If Javascript
81.     var elements = document.getElementsByClassName("qbjs");
82.     for (var i=0; i < elements.length; i++) {
83.         elements[i].remove();
84.     }
85. $End If
86. End Sub

View in QBJS

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