Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
QBJS - ANSI Draw
#1
Here's a simple little text-based drawing program.  It originally started as a simple test for the Screen function which was just implemented in version 0.9.0.  It also incorporates some of the extended QBJS functionality which lets your program prompt the browser to upload and download files.

   

No bells and whistles on this one, but you can either draw with the mouse or arrow keys + SPACE or ALT.  You can select both a left button brush and right button brush by clicking the character, foreground color and background color from the palette on the left.

You can save and load your creations in a simple save format (.dat).  You can also save the drawing as an image.

I'm including a link here instead of using the embedded QBJS since browser security rules prevent some of the loading and saving functions when loaded in an iframe.

ANSI Draw
Reply
#2
this is awesome!  thank you for this program.

i was sort of looking for escape key to end program run.  but one could just press "stop" button on qbjs interface.

i would have to change the file format, or provide another "loader" to be able to see again a bunch of "bsave/bload" binary files i still have lying around.
Reply
#3
(01-15-2025, 10:28 PM)dbox Wrote: Here's a simple little text-based drawing program.  It originally started as a simple test for the Screen function which was just implemented in version 0.9.0.  It also incorporates some of the extended QBJS functionality which lets your program prompt the browser to upload and download files.

ASCII Draw

This is awesome!

We might want to take this further! There are loads of programs that draw ANSI but none that do it on the web like this. (yet)

One thing that would really help is mapping F1-F12 keys to characters of our choosing. This is how we text mode artists draw in other programs Smile

Take a look at this screenshot for inspiration. You can see common elements, what I'm showing here are the function keys at top.
[Image: gj-moebius.png]

Well done man!
grymmjack (gj!)
GitHubYouTube | Soundcloud | 16colo.rs
Reply
#4
(01-16-2025, 01:01 PM)grymmjack Wrote: This is awesome!

We might want to take this further! There are loads of programs that draw ANSI but none that do it on the web like this. (yet)

One thing that would really help is mapping F1-F12 keys to characters of our choosing. This is how we text mode artists draw in other programs Smile

Thanks @grymmjack!  That's a great suggestion.  I'm sure there are loads of additional features that could be added.  My original goal was a simple technology demo with a UI that was all text based itself.  But you could go nuts, allow for different sized canvases, add web-native controls and menus, flood fill, selections, copy and paste, load standard ANSI file formats, etc.

I'm happy for anyone to take this as a starting point and mod away.
Reply
#5
(01-15-2025, 10:28 PM)dbox Wrote: Here's a simple little text-based drawing program.  It originally started as a simple test for the Screen function which was just implemented in version 0.9.0.  It also incorporates some of the extended QBJS functionality which lets your program prompt the browser to upload and download files.

This is great - I used to make color CBMSCII drawings and animations on the Commodore 64, and have been wanting to make program to do this on the PC.

Which leads me to a couple enhancements to suggest:

1. Add a simple animation mode, to save drawings as successive frames (maybe just save the changed portions to save space) and add a simple playback function, and a way to specify the playback speed.

2. Add an option to record the keypresses or drawing input (including cursor movements, mouse clicks, and color changes) with the ability to play back like an animation.

3. Add a simple character editor to customize the font the user can draw with.

4. Perhaps add an option for layers, where the user's changes just affect the selected layer, and layers can be hidden/unhidden, moved in front of or behind each other, duplicated, etc.

5. Some basic drawing functions like select an area to cut/copy/paste, flip horizontal / vertical, rotate, clear selected area, fill, eyedropper to capture color, etc.

Either way, I look forward to playing with this - thanks for sharing!
Reply
#6
i have provided a quick-and-dirty conversion program.  from the "dat" file that this program outputs.  to "ans" format that could be further edited in moebius or other such program.

Code: (Select All)
'by mnrvovrfc (hsiangch_ong) 27-Jan-2025
OPTION _EXPLICIT

DIM AS LONG f1, f2, u, v
DIM AS INTEGER wd, ht, cc, i, j, colorattr, oldorattr
DIM AS _BYTE fg, bg
DIM afile$, bfile$, escmess$, a$, b$

$IF WIN THEN
    a$ = environ$("USERPROFILE") + "\Documents\"
$ELSE
    a$ = ENVIRON$("HOME") + "/Documents/"
$END IF
afile$ = _OPENFILEDIALOG$("Please choose a DAT file saved with QBJS-ASCII-DRAW.", a$, "*.dat", "DAT")
IF afile$ = "" THEN SYSTEM
$IF WIN THEN
    u = _instrrev(afile$, "\")
$ELSE
    u = _INSTRREV(afile$, "/")
$END IF
v = INSTR(u, afile$, ".")
$IF WIN THEN
    bfile$ = environ$("USERPROFILE") + "\Documents" + mid$(afile$, u, v - u + 1) + "ans"
$ELSE
    bfile$ = ENVIRON$("HOME") + "/Documents" + MID$(afile$, u, v - u + 1) + "ans"
$END IF

oldorattr = -1
f1 = FREEFILE
OPEN afile$ FOR BINARY AS f1
f2 = FREEFILE
OPEN bfile$ FOR OUTPUT AS f2
PRINT #f2, CHR$(27); "[39;49m";
GET #f1, , ht
GET #f1, , wd
SCREEN _NEWIMAGE(wd, ht + 1, 0)
_SCREENMOVE 0, 0
FOR j = 1 TO ht
    FOR i = 1 TO wd
        GET #f1, , fg
        GET #f1, , bg
        GET #f1, , cc
        COLOR fg, bg
        PRINT CHR$(cc);
        colorattr = bg * 16 + fg
        IF colorattr <> oldorattr THEN
            escmess$ = CHR$(27) + "["
            b$ = ""
            SELECT CASE fg
                CASE 0: a$ = "30m"
                CASE 1: a$ = "34m"
                CASE 2: a$ = "32m"
                CASE 3: a$ = "36m"
                CASE 4: a$ = "31m"
                CASE 5: a$ = "35m"
                CASE 6: a$ = "33m"
                CASE 7: a$ = "37m"
                CASE 8: a$ = "90m"
                CASE 9: a$ = "94m"
                CASE 10: a$ = "92m"
                CASE 11: a$ = "96m"
                CASE 12: a$ = "91m"
                CASE 13: a$ = "95m"
                CASE 14: a$ = "93m"
                CASE 15: a$ = "97m"
            END SELECT
            SELECT CASE bg
                CASE 0: b$ = "40m"
                CASE 1: b$ = "44m"
                CASE 2: b$ = "42m"
                CASE 3: b$ = "46m"
                CASE 4: b$ = "41m"
                CASE 5: b$ = "45m"
                CASE 6: b$ = "43m"
                CASE 7: b$ = "47m"
                    'CASE 8: b$ = "100m"
                    'CASE 9: b$ = "104m"
                    'CASE 10: b$ = "102m"
                    'CASE 11: b$ = "106m"
                    'CASE 12: b$ = "101m"
                    'CASE 13: b$ = "105m"
                    'CASE 14: b$ = "103m"
                    'CASE 15: b$ = "107m"
            END SELECT
            IF b$ <> "" THEN
                escmess$ = escmess$ + LEFT$(a$, LEN(a$) - 1) + ";" + b$
            ELSE
                escmess$ = escmess$ + a$
            END IF
            PRINT #f2, escmess$;
            colorattr = oldorattr
        END IF
        PRINT #f2, CHR$(cc);
    NEXT
NEXT
CLOSE f2, f1
COLOR 15, 0
LOCATE ht + 1, 1
_TITLE "Output to " + bfile$ + " - DONE!"
END

warning: if the "ans" file is loaded into moebius it will report 80 columns by 26 rows.  it will report one more row than it should be.  even though there are 2000 units straight out of the "dat".

this program is simple enough, so it doesn't include the "sauce" record into the output file.  i wrote another program based on a740g's library that does it.  but moebius doesn't seem to handle it properly.  might expect a particular format for it.  ansilove program does read "sauce" record properly created by my efforts.  (ansilove is a program that renders ansi text file into png format.  it supports "-f" switch with two values.  "-f 80x25" to get "cp437" ordinary screen 0 in quickbasic, qbasic, basic 7 pds and qb64.  "-f amiga" to choose "topaz" font from that realm.)

eventually i needed this program after i went a fair bit adding to the qbjs program.  such as allowing regular text typed.  because it was difficult to put away the mouse cursor in that mode.  i created a "refresh" feature based on the "dat" loading subprogram.  another near-clone was my need to shift one entire line one column to the left or to the right.
Reply




Users browsing this thread: 1 Guest(s)