QBJS v0.6.0 Release - Printable Version

QBJS v0.6.0 Release - Printable Version

+- QB64 Phoenix Edition (https://staging.qb64phoenix.com)
+-- Forum: QB64 Rising (https://staging.qb64phoenix.com/forumdisplay.php?fid=1)
+--- Forum: QBJS, BAM, and Other BASICs (https://staging.qb64phoenix.com/forumdisplay.php?fid=50)
+--- Thread: QBJS v0.6.0 Release (/showthread.php?tid=1069)

Pages: 1 2 3 4

RE: QBJS v0.6.0 Release - dbox - 11-08-2022

(11-07-2022, 07:17 PM)bplus Wrote: Yeah to my most pleasant surprise that calculator was done with GUI!

Is that QB64 source or something geared for JS and the HTML / Internet?

Hey @bplus thought I'd post another web GUI example and try to elaborate a bit. The web API in QBJS is an extension library that comes pre-installed. You can include it with the Import keyword in QBJS:

Code: (Select All)
Import Dom From "lib/web/dom.bas"

The Import keyword is similar in nature to the QB $Include keyword. They both allow you to include code from an external module. With Import you specify an alias for the imported library. In the example above I used "Dom" since that is the common abbreviation used with talking about the document object model in Javascript. This is the underlying API that gives you access to interact directly with the HTML page.

Once you have imported the library you can reference any of its exported methods with this prefix. So, for example, if I want to use the Create method which makes a new HTML element on the page the call would look something like:

Code: (Select All)
Dom.Create "div"

The Dom library provides a number of methods which allow you to interact with the web page in a more QBasic-y way. The example below takes advantage of just three of these methods: Create, Event and Remove.

And really, most of it is accomplished with the Create method. This method allows you to create any HTML element. And there are a lot these days:
https://www.w3schools.com/TAGS/default.asp

It returns a reference to the created HTML element which you can then use to manipulate properties of that element. For example, we could create a button like so:

Code: (Select All)
Dim btn As Object

btn = Dom.Create("button")

We could then set the text of the button by setting the appropriate attribute:

Code: (Select All)
btn.innerText = "Push Me"

This also gives you access to all of the styling properties that are available... and there are a lot:
https://www.w3schools.com/cssref/index.php

So, say we want a really big button. Any of those listed attributes are available to set on the button object that was returned from create. For example, we could set the height and width properties like so:

Code: (Select All)
btn.style.width = "200px"

btn.style.height = "200px"

That covers a lot of the basics. Perhaps at some point I'll create a web specific tutorial. Here is another example of a web GUI that is the starting point for a simple contact management program. It has a basic form on the left and you can see an example of how to handle the button click event, take the values entered on the web form and add it both to a custom type array and display an HTML table that lists out the entered contacts.

Code: (Select All)
Import Dom From "lib/web/dom.bas"

Type Contact

    name As String

    email As String

    comments As String

End Type

ReDim Shared contacts(0) As Contact

Dim Shared As Object layout, panel, buttonPanel, listPanel, table

Dim Shared As Object txtLastName, txtFirstName, txtEmail, txtComments, btnAdd

_Title "QB Contact Manager"

InitUI

Sub OnAddContact

    Dim c as Contact

    c.name = txtName.value

    c.email = txtEmail.value

    c.comments = txtComments.value

    Dim size As Integer

    size = UBound(contacts) + 1

    ReDim _Preserve contacts(size) As Contact

    contacts(size) = c

    RefreshTable

    ' Clear the values

    txtName.value = ""

    txtEmail.value = ""

    txtComments.value = ""

End Sub

Sub InitUI

    Dom.Container().style.backgroundColor = "#999"

    Dom.GetImage(0).style.display = "none"

    layout = Dom.Create("div")

    layout.style.backgroundColor = "#f6f6f6"

    layout.style.margin = "auto"

    layout.style.padding = "20px"

    layout.style.width = "75%"

    layout.style.letterSpacing = "normal"

    layout.style.color = "#666"

    layout.style.display = "grid"

    layout.style.gridTemplateColumns = "auto auto"

    panel = Dom.Create("div", layout)

    panel.style.textAlign = "left"

    Dom.Create "div", panel, "Name"

    txtName = Dom.Create("input", panel)

    txtName.style.width = "250px"

    txtName.style.marginBottom = "5px"

    Dom.Create "div", panel, "Email"

    txtEmail = Dom.Create("input", panel)

    txtEmail.style.width = "250px"

    txtEmail.type = "email"

    txtEmail.style.marginBottom = "5px"

    Dom.Create "div", panel, "Comments"

    txtComments = Dom.Create("textarea", panel)

    txtComments.style.width = "250px"

    txtComments.style.height = "75px"

    Dim buttonPanel As Object

    buttonPanel = Dom.Create("div", panel)

    buttonPanel.style.marginTop = "10px"

    btnAdd = Dom.Create("button", buttonPanel, "Add Contact")

    Dom.Event btnAdd, "click", sub_OnAddContact

    ' Create output table

    listPanel = Dom.Create("div", layout)

    listPanel.style.marginLeft = "20px"

    RefreshTable

End Sub

Sub RefreshTable

    Dim As Object tr, th, td

    If table.style Then Dom.Remove table

    table = Dom.Create("table", listPanel)

    ' Create the table header

    tr = Dom.Create("tr", table)

    tr.style.backgroundColor = "#ccc"

    tr.style.color = "#333"

    th = Dom.Create("th", tr, "Name") : th.style.padding = "4px"

    th = Dom.Create("th", tr, "Email")     : th.style.padding = "4px"

    th = Dom.Create("th", tr, "Comments")  : th.style.padding = "4px"

    If UBound(contacts) = 0 Then

        ' No values present, display a message

        tr = Dom.Create("tr", table)

        td = Dom.Create("td", tr, "No contacts found.")

        td.colSpan = 4

    Else

        ' Add a new row to the table for each contact

        Dim i As Integer

        For i = 1 To UBound(contacts)

            tr = Dom.Create("tr", table)

            AddTableCell tr, contacts(i).name, i

            AddTableCell tr, contacts(i).email, i

            AddTableCell tr, contacts(i).comments, i

        Next i

    End If

End Sub

Sub AddTableCell(tr, value, row)

    Dim td As Object

    td = Dom.Create("td", tr, value)

    td.style.padding = "4px"

    td.style.color = "#666"

    If row Mod 2 = 0 Then

        td.style.backgroundColor = "#efefef"

    End If

End Sub

View in QBJS

RE: QBJS v0.6.0 Release - bplus - 11-08-2022

Thankyou dbox for taking time to explain some workings. I see we have access to many handy tools!

Nice demo!

RE: QBJS v0.6.0 Release - Pete - 11-08-2022

The first thing I noticed was... Hey, why the hell am I second on that email list?

Kidding aside, my hope is you are mostly working on integration rather than reproduction. I've never found HTML or CSS coding to be very different than coding in BASIC. Easy to learn, and as you mentioned, tons of stuff to work with. So to make a way to call all of those functions more QBasicy would be a huge investment in time, I would think. To make a way to interact with them, not so much and the same functionality would still be achieved.

Personally I'm looking forward to trying a simple project later today. I want to make a css/html page with 9 input boxes to handle a front 9 golf scorecard. Put in a submit button to add up the scores and figure out a place or separate window to display the results. I don't need anything other than HTML/CSS to make the page, just the interaction of QBJS to make it so the submit button returns the added values of the 9 filled in fields.

Just my 2-cents, and a day-old box of donuts.

Pete

RE: QBJS v0.6.0 Release - dbox - 11-08-2022

(11-08-2022, 07:34 PM)Pete Wrote: The first thing I noticed was... Hey, why the hell am I second on that email list?

Kidding aside, my hope is you are mostly working on integration rather than reproduction. I've never found HTML or CSS coding to be very different than coding in BASIC. Easy to learn, and as you mentioned, tons of stuff to work with. So to make a way to call all of those functions more QBasicy would be a huge investment in time, I would think. To make a way to interact with them, not so much and the same functionality would still be achieved.

Personally I'm looking forward to trying a simple project later today. I want to make a css/html page with 9 input boxes to handle a front 9 golf scorecard. Put in a submit button to add up the scores and figure out a place or separate window to display the results. I don't need anything other than HTML/CSS to make the page, just the interaction of QBJS to make it so the submit button returns the added values of the 9 filled in fields.

Just my 2-cents, and a day-old box of donuts.

Pete

Then you may want to take an approach that is more like this:

Code: (Select All)
Import Dom From "lib/web/dom.bas"

Dim container As Object

container = Dom.Create("div")

container.innerHTML = "<p>Pete is already good at HTML.<br/>Click the button below if you agree.</p><button id='agree-button'>I Agree</button>"

Dom.Event "agree-button", "click", sub_OnClickAgree

Sub OnClickAgree

    Print "Of course you do!"

End Sub

View in QBJS

RE: QBJS v0.6.0 Release - mnrvovrfc - 11-08-2022

(11-08-2022, 07:20 PM)dbox Wrote: stuff

This is pretty cool, including the large mass of characters after "qbjs.org" that I found while quoting your post LOL.

These might be the beginnings of OOP supported in QB64PE. More or less like Lua -- don't force it on people that don't want to, but it's there if special abilities are needed.

RE: QBJS v0.6.0 Release - Coolman - 11-09-2022

hello @dbox, you have a very high level of competence. why not consider producing a code editor with javascript executable generation encapsulated in an independent web browser totally multi-platform while taking into account the syntax of the basic language. this kind of project will surely have a great success and the support of many opensource developers and it will solve the problem of adapting programs to many systems or hardware architectures. javascript is executable everywhere...

RE: QBJS v0.6.0 Release - dbox - 11-10-2022

(11-09-2022, 11:25 AM)Coolman Wrote: hello @dbox, you have a very high level of competence. why not consider producing a code editor with javascript executable generation encapsulated in an independent web browser totally multi-platform while taking into account the syntax of the basic language. this kind of project will surely have a great success and the support of many opensource developers and it will solve the problem of adapting programs to many systems or hardware architectures. javascript is executable everywhere...

Hey @Coolman, thanks for the kind words. If I understand what you are asking, this is exactly why I started this project. In fact, what is QBJS today started from work I was doing on the game engine project GX. One thing that I have always loved about QB64 is its multi-platform nature. This is very nice for building games for a larger audience. So, I thought wouldn't it be cool if you could convert the game to HTML/javascript and share it online on sites like itch.io. The result was a command line tool (qb2js) that could convert the QB code to Javascript. The GX game examples on itch.io were all built with this method: coded entirely in QB64 and then converted to HTML/JS.
- https://boxgm.itch.io/the-legend-of-gx
- https://boxgm.itch.io/sleighless
- https://boxgm.itch.io/enemy-space

That utility is still available in the QBJS and GX projects and could potentially be used by build tools like vscode to "Compile for Web". This feature is also available today in the QBJS IDE. Once your program is complete you can create a stand-alone web application using the Export feature.

You can do this by clicking the < Share > Button. This will display a pop-up dialog with the various share options. If you change "Launch Mode" to "Play" or "Auto" it will display an < Export > button. Clicking this will package up the "compiled" javascript version of your program along with the necessary js, html, and css dependencies into a single zip that is ready to upload to itch.io (or your site of choice), or unzip and run locally.

RE: QBJS v0.6.0 Release - Pete - 11-10-2022

So here is what I was considering with the golf scorecard app...

Code: (Select All)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

  <style>

body {

background-image: url('golf-scorecard.jpg'); width: 100%;

}

div.fixed {

position: fixed;

top: 356px;

left: 156px;

width: 100%;

}

  </style>

  <title>score-card</title>

</head>

<body>

<div class="fixed">

<form>

  <p><span style="font-size: 4px;"><input

 maxlength="2" size="1" tabindex="1" name="1"

 value="">&nbsp;<input maxlength="2" size="1"

 tabindex="1" name="2" value="">&nbsp;<input

 maxlength="2" size="1" tabindex="1" name="3"

 value="">&nbsp;<input maxlength="2" size="1"

 tabindex="1" name="4" value="">&nbsp;<input

 maxlength="2" size="1" tabindex="1" name="5"

 value="">&nbsp;<input maxlength="2" size="1"

 tabindex="1" name="6" value="">&nbsp;<input

 maxlength="2" size="1" tabindex="1" name="7"

 value="">&nbsp;<input maxlength="2" size="1"

 tabindex="1" name="8" value="">&nbsp;<input

 maxlength="2" size="1" tabindex="1" name="9"

 value="">&nbsp;</span></p>

</form>

</div>

</body>

</html>

I didn't bother to I.D. the form, just added the most bare bones stuff for the concept sake.

So the 9 named forms fields, which user inputs scores, with a server PERL script could be added up and sent to a database file with the total. How difficult /easy would doing this be with QBJS, and not over the web, just in the local browser. No TCP/IP involved.

Pete

RE: QBJS v0.6.0 Release - Coolman - 11-10-2022

(11-10-2022, 12:35 AM)dbox Wrote:
(11-09-2022, 11:25 AM)Coolman Wrote: hello @dbox, you have a very high level of competence. why not consider producing a code editor with javascript executable generation encapsulated in an independent web browser totally multi-platform while taking into account the syntax of the basic language. this kind of project will surely have a great success and the support of many opensource developers and it will solve the problem of adapting programs to many systems or hardware architectures. javascript is executable everywhere...

Hey @Coolman, thanks for the kind words. If I understand what you are asking, this is exactly why I started this project. In fact, what is QBJS today started from work I was doing on the game engine project GX. One thing that I have always loved about QB64 is its multi-platform nature. This is very nice for building games for a larger audience. So, I thought wouldn't it be cool if you could convert the game to HTML/javascript and share it online on sites like itch.io. The result was a command line tool (qb2js) that could convert the QB code to Javascript. The GX game examples on itch.io were all built with this method: coded entirely in QB64 and then converted to HTML/JS.
- https://boxgm.itch.io/the-legend-of-gx
- https://boxgm.itch.io/sleighless
- https://boxgm.itch.io/enemy-space

That utility is still available in the QBJS and GX projects and could potentially be used by build tools like vscode to "Compile for Web". This feature is also available today in the QBJS IDE. Once your program is complete you can create a stand-alone web application using the Export feature.

You can do this by clicking the < Share > Button. This will display a pop-up dialog with the various share options. If you change "Launch Mode" to "Play" or "Auto" it will display an < Export > button. Clicking this will package up the "compiled" javascript version of your program along with the necessary js, html, and css dependencies into a single zip that is ready to upload to itch.io (or your site of choice), or unzip and run locally.

thank you for these precisions @dbox. i was thinking more of a project of this type:

https://www.aoz.studio/

AOZ language is based on AMOS Basic written in 1989, cross-platform works on windows macos and linux. the programs created are converted to JavaScript and work on all web browsers of any compatible machine PC MAC smartphones or as a native executable on Windows, MacOS, Linux, Android and iOS, on any computer, smartphones. this is in my opinion the most interesting function.

RE: QBJS v0.6.0 Release - a740g - 11-10-2022

@dbox I use QBJS to try out ideas and code that I end up using elsewhere. It is an excellent resource for me that way. Thank you.

I have discovered that the following snippet in QBJS outputs different results compared to QB64-PE.

Code: (Select All)
Print 10 + 20

Print 10 Or 20

In QB64-PE, it prints
30
30

And in QBJS, it prints
30
10