dbox
Junior Member
Posts: 84
|
Post by dbox on May 26, 2023 18:20:48 GMT
Hi All, The latest version of QBJS (0.7.0) is now available. Here are some highlights for this release: IDE EnhancementsNumerous enhancements to the IDE have been incorporated into this release. The code, output and console panels can be resized by dragging the panel dividers. There are now keyboard shortcuts for running the current program (F5) and the export/share feature (F11). Users can now customize the look and feel of the IDE by choosing from one of four themes. Custom Fonts and PrintingSupport has been added to allow the use of custom fonts. The following keywords are now available in support of this feature: _Font, _LoadFont, and _FreeFont. The _PrintMode keyword is also now supported to allow text to be printed with transparent background. Numerous updates have been made to the Print method to format the output more closely to QBasic/QB64. 2D Graphics LibraryThis release includes a new graphics library which provides native support for common graphics methods (e.g. FillTriangle, RotoZoom, FillCircle, FillEllipse). There is also new functionality to allow more control over both new graphics functions and standard QBasic graphics methods (e.g. LineWidth, LineCap, Shadow). The full list of new methods can be found here: github.com/boxgaming/qbjs/wiki/Supported-Keywords#2d-graphics. Console Output LibraryA new console output library has been added to allow logging messages and simple output to the console window in the IDE. The full list of new methods can be found here: github.com/boxgaming/qbjs/wiki/Supported-Keywords#consoleFile I/O Extension LibraryThis library provides the ability to upload and download files to and from the browser from within your application. The full documentation for the library can be found here: github.com/boxgaming/qbjs/wiki/Supported-Keywords#filesystemSee the full release announcement for a complete list of fixes and enhancements. Check it out online here: qbjs.org |
|
dbox
Junior Member
Posts: 84
|
Post by dbox on May 26, 2023 19:34:01 GMT
Here are some mods from bplus ' excellent collection of "proggies" that use some of the new graphics methods: Diamond Spaceship (FillTriangle) Goldwave (FillTriangle) Easy Spiral (FillCircle) X-mas Star (RotoZoom) Infinite Heart (FillCircle) Guts (FillCircle) Celtic Knot (FillCircle, FillEllipse) The final example also demonstrates how to use the "$If WEB" metacommand to conditionally use the new graphics commands when in QBJS, but still have a version that will compile and run in QB64. |
|
dbox
Junior Member
Posts: 84
|
Post by dbox on May 26, 2023 19:36:08 GMT
Here is one more example that incorporates nearly all of the new graphics methods:
Import G2D From "lib/graphics/2d.bas"
Cls , 15
G2D.RoundRect 10, 10, 200, 200, 5, 9
G2D.Ellipse 110, 110, 50, 30, 0, 2
G2D.Shadow 0, 7, 7, 10
G2D.FillRoundRect 300, 10, 200, 75, 15, 3
G2D.FillCircle 50, 50, 30, 4
G2D.ShadowOff
G2D.FillEllipse 320, 320, 60, 40, 15, 5
G2D.Shadow 5, 0, 0, 15
Line (350, 150)-(450, 250), 0, BF
G2D.FillTriangle 500, 300, 580, 300, 530, 380, 1
G2D.ShadowOff
G2D.LineWidth 10
Line (20, 300)-(200, 380), 0, B
G2D.LineWidth 15
Line (20, 240)-(200, 240), 4
G2D.LineCap G2D.ROUND
Line (20, 260)-(200, 260), 4
G2D.LineCap G2D.SQUARE
Line (20, 280)-(200, 280), 4
G2D.LineWidth 25
G2D.LineCap G2D.ROUND
G2D.Curve 470, 120, 650, 100, 520, 250, 2
G2D.Shadow 0, 7, 7, 10
G2D.LineWidth 3
G2D.Bezier 260, 20, 200, 100, 310, 150, 260, 250, 1
G2D.ShadowOff |
|
|
|
Post by bplus on May 27, 2023 13:28:03 GMT
This is great!
|
|
dbox
Junior Member
Posts: 84
|
Post by dbox on May 30, 2023 14:09:08 GMT
This release adds the ability to customize the QBJS IDE look-and-feel by selecting one of four themes. To change the theme, click the settings button (cog icon) in the toolbar and then select the theme from the drop list. In addition to the default theme, which is obviously heavily inspired by the default QB64 theme (dark dark blue) there are now three new themes to choose from: QBasicWant your UI to look more like the original QBasic IDE? Then this is the theme for you.  Windows ClassicThis theme replicates the look-and-feel of an old school windows IDE.  VSCode DarkSelect this theme if you want QBJS to look like the VSCode IDE.  Which theme is your favorite? Any suggestions for other themes? |
|
dbox
Junior Member
Posts: 84
|
Post by dbox on Jun 1, 2023 20:16:34 GMT
With 0.7.0, QBJS now supports working with custom fonts via the QB64 methods: _Font, _LoadFont and _FreeFont. There are now three ways to load a font for use in your program:
1. From a Font File
As in QB64 fonts can be loaded from font file locations:
[qbjs height=450]https://qbjs.org?src=https://raw.githubusercontent.com/boxgaming/qbjs/main/samples/project/custom-font.zip[/qbjs]
2. From a Font Name
You can alternatively specify the font name. As long as the font is installed on the system it will load the requested font. You can also specify an HTML-style list of fallback font names as shown in the example below:
[qbjs height=450]https://qbjs.org?code=SW1wb3J0IEdmeCBGcm9tICJsaWIvZ3JhcGhpY3MvMmQuYmFzIgoKRGltIGYgQXMgTG9uZwpmID0gX0xvYWRGb250KCJBcmlhbCwgSGVsdmV0aWNhLCBzYW5zLXNlcmlmIiwgNjApCl/EKiBmxklpbWfJS8QMPSBfTmV3SW1hZ2UoX1ByaW50V2lkdGgoIkhlbGxvIFdvcmxkISIpLCDFRkhlaWdodCkKX0Rlc3TETApDb2xvciAxNQrGPU1vZGUgX0tlZXBCYWNrZ3JvdW5kxxtTdHJpbmcgKDAsIDApLCDOYcdSMOYApUFzIEludGVnZXIgYSwgeCwgeQp45ACq5QCbIC8gMgp5xA/mAI7FEERvCiAgICBMaW5lICgxLCAxKS0oxi8syCjkAMRSR0JB5QCBxQM35ACIQkbFOkdmeC5Sb3RvWm9vbcVyLOQA3ywgxEwsIGHFJGEgPSBhICsgM8UOSWYgYSA+IDM1OSBUaGVuxR4wxRpfTGltaXQgNjAKTG9vcA==[/qbjs]
3. From a URL
This option allows you to take advantage of the large collections of free fonts that are available online. The example below uses a font from the Google Font collection:
[qbjs height=450]https://qbjs.org?code=SW1wb3J0IERvbSBGcm9tICJsaWIvd2ViL2RvbS5iYXMiCgpEaW0gZgpmID0gX0xvYWRGb250KCJodHRwczovL2ZvbnRzLmdzdGF0aWMuY29tL3MvaW5kaWVmbG93ZXIvdjE3L204SlZqZk5WZUtXVm5oM1FNdUtrRmNaVmFVdUgud29mZjIiLCAyNCkKX8RcIGYKCkNscyAsIDE1CkNvbG9yIDgKX1ByaW50TW9kZSBfS2VlcEJhY2tncm91bmQKCsUbIMcHIiAgRGF5IDI3OiLKEkkgYW0gc3RpbGwgdHJhcHBlZCBvbiB0aGUgaXNsYW5kIHdpdGggbm8gaG9wZSBvZiBlc2NhcGUuzUNzdHJ1Z2dsZSBhZ2FpbnN0IGRlc3BhaXIsIGJ1dMVNcmVhbGl6YXRpxV1hdCBJIHdpbGzLRm5ldmVyIGxlYXZlIHRoaXMgcGxhY2UgaGF1bnRzIG15IMQgeSB3YWtpbmcgdGhvdWdodC4u6ACJyklJIHNhd8V1cGFycm905gCVIHRvZGF5LiI=[/qbjs]
|
|
grymmjack
New Member
I am a friendly old nerd
Posts: 2
|
Post by grymmjack on Jun 1, 2023 21:35:39 GMT
dbox This is amazing how you accomplished embedding qbJS in this thread. WELL DONE!
|
|
dbox
Junior Member
Posts: 84
|
Post by dbox on Jun 13, 2023 21:14:16 GMT
Another new feature introduced in 0.7.0 is the ability to trigger uploads and downloads to and from the browser from within your QBJS program. The following example shows how to use this feature. (As a bonus it also uses the new SaveImage method from the new 2D graphics library.) Import FS From "lib/io/fs.bas"
Import G2D From "lib/graphics/2d.bas"
Dim Shared img As Long
Screen _NewImage(600, 600, 32)
Print "Welcome to Image Decorator!"
Print "Press any key to upload an image file..."
Sleep
' Prompt the user to upload a PNG file
' and save it to the temp directory
' Call the OnUpload sub with complete
MkDir "temp"
FS.UploadFile "temp", ".png, .jpg", sub_OnUpload
' Wait for the image to be uploaded
Do
_Limit 60
Loop Until img
' Decorate the image
DecorateImage
' Make a copy of the image
Dim imgCopy As Long
imgCopy = _CopyImage(_Dest)
' Save the image
Color 0
_PrintMode _KeepBackground
Print "Press any key to save the new image..."
Sleep
' Save the image to the virtual file system
G2D.SaveImage imgCopy, "temp/newimage.png"
' Prompt the user to download the image file
FS.DownloadFile "temp/newimage.png"
Sub OnUpload (filename As String)
img = _LoadImage(filename)
End Sub
Sub DecorateImage
' Scale the image to fit the screen
Dim As Double scale
Dim As Integer w, h, x, y
w = _Width(img)
h = _Height(img)
If w > h Then
scale = h / w
w = _Width
h = w * scale
Else
scale = w / h
h = _Height
w = h * scale
End If
' Center the image
w = w - 50
h = h - 50
x = (_Width - w) / 2
y = (_Height - h) / 2
' Draw a drop shadow
Cls , 15
G2D.Shadow _RGB(100, 100, 100), 8, 8, 15
Line (x, y)-(x + w - 1, y + h - 1), 0, BF
G2D.ShadowOff
' Draw the image
_PutImage (x, y)-(x + w, y + h), img
End SubView in QBJS |
|
