Pete's Front Nine

[dbox]

Hey Pete, here's a little proof of concept for your golf score card project.  I didn't have your background image file so I just focused on the mechanics of what I think you are trying to achieve.

As you enter the scores the total field is updated automatically.  Clicking the Save Scores button will add the current set of scores to the saved score list.  This list will be saved to the browser's local storage as well as to a "scores.csv" file in the QBJS virtual file system.  You can access this in the Files tab of the Console.

Code: (Select All)

Import Dom From "lib/web/dom.bas"
Import Storage From "lib/web/storage.bas"

Dim Shared savedScores As String
Dim Shared scores(10) As Object

_Title "Pete's Front Nine"

' Load the saved scores from local browser storage
savedScores = Storage.Get("savedScores")
Print savedScores
RefreshSavedScores

' Create the containing div
Dim div: div = Dom.Create("div")
div.style.backgroundColor = "#ccc"
div.style.padding = "20px"

' Create the inputs
Dim i As Integer
For i = 1 To 10
    scores(i) = Dom.Create("input", div)
    scores(i).tabIndex = i
    scores(i).type = "number"
    scores(i).style.width = "40px"
    scores(i).style.marginRight = "2px"
    If i = 10 Then
        scores(i).disabled = true
    Else
        Dom.Event scores(i), "change", sub_UpdateScore
    End If
Next i

Dim btn As Object
Dom.Create "br", div
Dom.Create "br", div
btn = Dom.Create("button", div, "Save Scores")
Dom.Event btn, "click", sub_SaveScores

' Updates the total when one of the scores is changed
Sub UpdateScore
    Dim total As Integer
    Dim i As Integer
    For i = 1 To 9
        total = total + CInt(scores(i).value)
    Next i
    scores(10).value = total
End Sub

' Saves the scores when the button is clicked
Sub SaveScores
    If savedScores <> "" Then
        savedScores = savedScores + Chr$(10)
    End If
   
    savedScores = savedScores + Date$ + " " + Time$
    Dim i As Integer
    For i = 1 To 10
        savedScores = savedScores + ", " + scores(i).value
        scores(i).value = ""
    Next i
   
    ' Save the scores to the browser's local storage
    Storage.Set "savedScores", savedScores
   
    ' Save the scores to the QBJS virtual file system
    Open "scores.csv" For Output As #1
    Print #1, savedScores
    Close #1

    RefreshSavedScores
End Sub

' Refreshes the saved score display
' Using the main QB screen for testing
Sub RefreshSavedScores
    Cls
    Print "Saved Scores"
    Print "--------------------------------------------------------"
    Print savedScores
End Sub

View in QBJS

[Pete]

Okay, that produces about 300 lines of JavaScript with several functions. It looks like instead of working with the form elements, it replaces them. So what's next for embedding it my HTLM doc? Wouldn't I need to strip out all the JavaScript functions, enclose them in <SCRIPT></SCRIPT> tags and then there would be the whole process of figuring out a way to call it. If concepts like this could be integrated directly into an HTML doc, that means use over the Internet is achieved.

+2 for the example code, as it looks like it totally handles the mechanics.

Pete

[CharlieJV]

Okay, that produces about 300 lines of JavaScript with several functions. It looks like instead of working with the form elements, it replaces them. So what's next for embedding it my HTLM doc? Wouldn't I need to strip out all the JavaScript functions, enclose them in <SCRIPT></SCRIPT> tags and then there would be the whole process of figuring out a way to call it. If concepts like this could be integrated directly into an HTML doc, that means use over the Internet is achieved.

+2 for the example code, as it looks like it totally handles the mechanics.

Pete

I'd consider the security implications of embedding anybody else's javascript in your website/whatever.

It isn't so much about the potential for the author(s) of that javascript having bad intentions (although that can happen), but the potential for mistakes to get into that code, for some of that code coming from who knows where as it got pasted in for expediency, or whatever.

I'd suggest that you isolate all code that isn't yours by displaying it within an iframe.

Browsers are secure to the point of being annoying sometimes, but it is a good thing.  It all falls flat when you introduce into it code that is too big to personally and closely scrutinise before letting it intermingle with your stuff.

Might not matter any for what you are doing, but still worth keeping in mind for those cases in which "sure you can do that, but just because you can doesn't mean you should" moments ...

[dbox]

I think I get where you are coming from.  If I understand correctly, you are wanting to use QBJS more like VBScript so that you could do something like:

Code: (Select All)

<html>
<head>
  <script language="javascript" src="qbjs.js"></script>
<body>
<input name="1">
<input name="2">

<button onclick="sub_OnBtnClick">Push Me</button>

<script language="qbjs">

Sub OnBtnClick
    ' do something in qb syntax here
End Sub

</script>
</body>
</html>

It's interesting, that might be feasible... I'll have to look into it further.  At present though it's more analogous to the single-page application paradigm where you are creating web UIs that function more like thick client applications and are more dynamically constructed.

As far as sharing what you've constructed on the web though there are a couple of options in the current release.  You can create a share link like this one that will launch QBJS in "Auto" mode which will hide the IDE and automatically compile and run your web program:

Simple Web Calculator

Or, you can export the "compiled" version of the application to a standalone zip folder with the Export feature if you'd like to host it elsewhere.  I've attached an example of the exported version of the same Simple Web Calculator application.

[Pete]

I think the pseudo code you posted does reflect quite closely what I'm looking for. I see HTML/CSS as the best way to design content, and QB64 translated into JavaScript as the best way to make that page content interactive. My thought was since the QBJS system produces the JS, just copy and past that into head or link it as a file, and then figure out how to call it in the page.

The calculator running as the webpage is solid. Put that in a JS popup window on a site and it's perfect.

One note, and you probably know this. The calculator is susceptible to floating point errors. You may want to note that so no one expects to use the demo as a reliable website calculator. If you haven't seen the issue before, try 10 addition iterations of a penny, .01 + .01... At 6 and 10 it will error.

I will take some time and digest the components provided and see what I can come up with. Fun stuff and maybe a whole new future opening up.To think, I was almost retired!

Pete

[SMcNeill]

I'm wondering if what Pete's looking for isn't geared a little more towards a html5 version, rather than a javascript based version.

[Pete]

HTML 5 mostly helps get rid of plugins for vids and music. Uses a canvas tag. I've never used that, but I have used the <NAV> tag.

Pete