Would an ellipse, line, and box be possible?

Just starting out? Need help? Post your questions and find answers here.
User avatar
Random Terrain
Posts: 63
Joined: Fri Jul 09, 2021 9:48 pm
Location: USA
Contact:

Would an ellipse, line, and box be possible?

Post by Random Terrain »

The bB DPC+ Playfield Editor code by munfraid with help from Peter and Paul (and adapted by me) is based on the tool on this page:

https://alienbill.com/2600/atari-background-builder/

That tool is more advanced. It can do all kinds of things that may not be possible with SpiderBasic.

I'd be interested in adding ellipse, line, and box buttons like that tool has, but I don't see how it can be done since we're not just drawing on a canvas. Everything has to be converted to arrays and it would have to be done with whatever resolution the user selects (32x11, 32x22, 23x44, 32x88, 32x176).

That tool also has the ability to copy and paste any part of the playfield. How would you even start making that feature with SpiderBasic?

The last thing that stands out to me from that tool is the undo button. What kind of magic is that? How could you have an undo feature that can remember a single dot drawn or an ellipse or a pasted section?

I tried to post the latest version of the bB DPC+ Playfield Editor code in case somebody wants to look at it, but the forum software says "Your message contains 62123 characters. The maximum number of allowed characters is 60000."
User avatar
Random Terrain
Posts: 63
Joined: Fri Jul 09, 2021 9:48 pm
Location: USA
Contact:

Re: Would an ellipse, line, and box be possible?

Post by Random Terrain »

I'll try to split it in two parts.

Here's part 1:

Code: Select all

;***********************************************************************
;***********************************************************************
;
;- BUG CATCHER
;
;  When explicit mode is enabled, all the variables which are not
;  explicitly declared with Define, Global, Protected or Static are
;  not accepted and the compiler will raise an error. It can help to
;  catch typo bugs.
;
EnableExplicit



;***********************************************************************
;***********************************************************************
;
;- APP NAME AND VERSION
;
#AppName = "bB DPC+ Playfield Editor"
#Version = "2021y_08m_04d_0031t"



;***********************************************************************
;***********************************************************************
;
;- CONSTANTS
;
;  Important for better code readability. The first constant found in
;  the enumeration will get the number 0 and the next one will be 1 etc.
;  (The # at the beginning lets you know it's a constant.)
;
Enumeration windows
#Window_Main  
#Window_NTSC_Color_Chart
#Window_Code
#bB_Code_Window
EndEnumeration

Enumeration gadgets
#Main_Gadget
#Button_Clear
#Button_Generate_Code
#Foreground_Color_Box
#Background_Color_Box
#Button_Draw
#Button_Erase
#Button_Paint_FG_Row
#Button_Paint_BG_Row
#Canvas_Playfield
#Row_Mode_Dropdown_Menu
#NTSC_Gadget
#bB_Gadget
#Text_for_Editing_Mode
#Text_for_Foreground_Color
#Text_for_Background_Color
#Text_for_Footer
#Text_for_Row_Mode
#Text_for_Title
EndEnumeration

Enumeration fonts
#Font_UiBig
#Font_UiNormal
#Font_UiSmall
EndEnumeration



;***********************************************************************
;***********************************************************************
;
;- GLOBAL
;
;  Fixes it so variables can be used everywhere in the program.
;
;  Each variable may have a default value directly assigned to it.
;  Global may also be used with arrays, lists, and maps.
;
;```````````````````````````````````````````````````````````````````````
;  User Interface
;
Global bB_CodeTable.s
Global colorWindowBG = $A7A7A7         ; Background color of the whole window.
Global _Text_Color = $000000           ; Text Color
Global fontUiBig.s = "Arial"           ; fonts for text in editor ui 
Global fontUiBigSize = 30
Global fontUiNormal.s = "Arial"
Global fontUiNormalSize = 16
Global fontUiSmall.s = "Arial"
Global fontUiSmallSize = 12
Global _Spacer = 10                     ; space between ui elements; change as you like
Global textFooter.s = #AppName + "  -  Version: " + #Version + " by <a style='color: #9F0028' href='https://www.randomterrain.com/'>randomterrain.com</a> (using SpiderBasic)." + "<br /><br />Based on the <a style='color: #9F0028' href='https://alienbill.com/2600/atari-background-builder/'>Atari Background Builder</a> by kisrael.<br /><br />Program by <a style='color: #9F0028' href='https://forums.spiderbasic.com/viewtopic.php?p=8135#p8135'>munfraid</a> with NTSC color data help by <a style='color: #9F0028' href='https://forums.spiderbasic.com/viewtopic.php?p=8120#p8120'>Peter</a> and additional help from <a style='color: #9F0028' href='https://forums.spiderbasic.com/viewtopic.php?p=8189#p8189'>Paul</a>. Program adapted by Random Terrain.<br /><br />  "
;
;```````````````````````````````````````````````````````````````````````
;  Playfield
;
Global _Button_Mode = #Button_Draw   ; Default button mode.
Global colorFG = #Black              ; Default foreground color.
Global colorBG = #White              ; Default background color.
Global _32_Columns = 33              ; Fixed value for number of columns.
Global _Column_Scale = 15            ; Currently set to 15, which results in 15*32 columns = 480 pixel width; change as you wish.
Global _176_Rows = 176               ; Fixed value for maximum number of rows.
Global _Row_Scale = 2                ; Similar to _Column_Scale. It's the base height of a row.
Global _Row_Height = 2               ; Set to 2 by default because I put 88 rows as default in the initUI() procedure.
Global x, y, yy                      ; The x and y coordinates of the mouse pointer when drawing on the canvas.
Global GID                           ; Gadjet ID.
Global _Which_Color_FG_or_BG         ; Keeps track of which FG/BG color box was clicked.
Global _Loop                         ; Used for loops.
Global _Atari_Counter                ; A counter used when creating the NTSC color chart.
Global _EnableDrawing = #False       ; Fixes problem where user could draw without holding down mouse button.
Global _Current_FG.s                 ; Current foreground Atari color.
Global _Current_BG.s                 ; Current background Atari color.
Global _bB_Rows = 87                 ; Default rows for the bB arrays.
Global _Row                          ; Used for loops.
Global _Column                       ; Used for loops.
Global _Ctrl_Key_Memory = 0          ; Keeps track of the control key.
Global _Row_Start = 8                ; Limits drawing.
Global _Row_Limit = 95               ; Limits drawing.

;```````````````````````````````````````````````````````````````````````
;  Arrays.
;
Global Dim _Playfield_Pixels(40, 220)
Global Dim _Playfield_Foreground_Colors(220)
Global Dim _Playfield_Background_Colors(220)
Global Dim _bB_playfield.s(32, 88)
Global Dim _bB_pfcolors.s(88)
Global Dim _bB_bkcolors.s(88)




;***********************************************************************
;***********************************************************************
;
;- PROCEDURES START HERE
;  (Similar To subroutines in older BASIC languages.)
;
;***********************************************************************
;***********************************************************************




;***********************************************************************
;***********************************************************************
;
;- CLEAR PLAYFIELD
;
Procedure ClearPlayfield()

Protected _Column
Protected _Row

;```````````````````````````````````````````````````````````````````````
;  Clears the canvas arrays.
;
Global Dim _Playfield_Pixels(40, 220)
Global Dim _Playfield_Foreground_Colors(220)
Global Dim _Playfield_Background_Colors(220)

;```````````````````````````````````````````````````````````````````````
;  Puts boxes down left side.
;
For _Loop = 0 To 220
_Playfield_Pixels(0, _Loop)
Next

;```````````````````````````````````````````````````````````````````````
;  Clears the playfield canvas.
;
StartDrawing(CanvasOutput(#Canvas_Playfield))
Box(9, 0, 542, 417, #White)
StopDrawing()

;```````````````````````````````````````````````````````````````````````
;  Sets default colors.
;
colorFG = #Black
colorBG = #White

;```````````````````````````````````````````````````````````````````````
;  Restores the foreground color box to the default.
;  (Includes inline JavaScript magic.)
;
GID=GadgetID(#Foreground_Color_Box)
! $(v_gid.div).find(".dijitButtonContents").css("background-color", spider_helper_ColorToHtml(v_colorfg));

;```````````````````````````````````````````````````````````````````````
;  Restores the background color box to the default.
;  (Includes inline JavaScript magic.)
;
GID=GadgetID(#Background_Color_Box)
! $(v_gid.div).find(".dijitButtonContents").css("background-color", spider_helper_ColorToHtml(v_colorbg));

;```````````````````````````````````````````````````````````````````````
;  Clears the foreground and background color arrays.
;
For _Loop = 0 To _176_Rows
_Playfield_Foreground_Colors(_Loop) = colorFG
_Playfield_Background_Colors(_Loop) = colorBG
Next

;```````````````````````````````````````````````````````````````````````
;  Removes any checkmarks from buttons.
;
For _Loop = #Button_Draw To #Button_Paint_BG_Row
SetGadgetState(_Loop, 0)
Next

;```````````````````````````````````````````````````````````````````````
;  Puts a check mark on the Draw button and sets mode to Draw.
;
SetGadgetState(#Button_Draw, 1)
_Button_Mode = #Button_Draw

;```````````````````````````````````````````````````````````````````````
;  Fills the bB playfield array with dots.
;
For _Row = 0 To _bB_Rows
For _Column = 0 To 31
_bB_playfield(_Column, _Row) = "."
Next
Next

;```````````````````````````````````````````````````````````````````````
;  bB color row preparation.
;
yy = _bB_Rows
If _Row_Height = 1 ; If 176 rows, there can only be 88 rows of color.
yy = 87
EndIf

;```````````````````````````````````````````````````````````````````````
;  Fills the bB pfcolors array with black.
;
For _Row = 0 To yy
_bB_pfcolors(_Row) = "$00"
Next

;```````````````````````````````````````````````````````````````````````
;  Fills the bB bkcolors array with white.
;
For _Row = 0 To yy
_bB_bkcolors(_Row) = "$0E"
Next

;```````````````````````````````````````````````````````````````````````
;  Creates black box around playfield area.
;
StartDrawing(CanvasOutput(#Canvas_Playfield))
Box(29, 31, 481.5, 354, #Black)
Box(30, 32, 480, 352, #White)
StopDrawing()

;```````````````````````````````````````````````````````````````````````
;  Draws black line down left side.
;
Box(0, 32, 9, 352, #Black)

EndProcedure




;***********************************************************************
;***********************************************************************
;
;- TIMER EVENTS
;
Procedure TimerEvents()

Select EventTimer()

;```````````````````````````````````````````````````````````````````````
;  Makes NTSC color chart disappear if mouse pointer leaves area.
;
Case 0
If WindowMouseX(#Window_NTSC_Color_Chart) = -1
CloseWindow(#Window_NTSC_Color_Chart)  
EndIf

EndSelect

EndProcedure




;***********************************************************************
;***********************************************************************
;
;- WINDOW EVENTS
;
Procedure WindowEvents()

Select EventWindow()

Case #Window_NTSC_Color_Chart
CloseWindow(#Window_NTSC_Color_Chart)

EndSelect  

EndProcedure




;***********************************************************************
;***********************************************************************
;
;- CLOSES WINDOWS WHEN CLOSE BUTTON IS CLICKED
;
Procedure CloseWindowEvent()

CloseWindow(EventWindow())

EndProcedure




;***********************************************************************
;***********************************************************************
;
;- FOREGROUND/BACKGROUND COLOR SELECTION FOR ROW PAINTING
;
Procedure ColorCellClicked(Title.s, Color.s)

;```````````````````````````````````````````````````````````````````````
;  Replaces the six-digit color code hash sign with a dollar sign.
;
Protected _Selected_Color = Val(ReplaceString(Color.s, "#", "$"))

;```````````````````````````````````````````````````````````````````````
;  When using six-digit color codes with SpiderBasic, the red and blue
;  parts must be swapped (BGR format instead of RGB), so the first two
;  numbers must be switched with the last two numbers. The code below
;  does that automatically.
;
_Selected_Color = Blue(_Selected_Color) + Green(_Selected_Color)*256 + Red(_Selected_Color)*65536 


;***********************************************************************
;
;  Foreground/Background color box click check.
;
Select _Which_Color_FG_or_BG

;,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
;```````````````````````````````````````````````````````````````````````
;  Foreground color box check. (Brings up NTSC chart if clicked).
;
Case #Foreground_Color_Box
colorFG = _Selected_Color

;```````````````````````````````````````````````````````````````````````
;  Clears buttons and selects Paint FG button.
For _Loop = #Button_Draw To #Button_Paint_BG_Row
SetGadgetState(_Loop, 0)
Next

;```````````````````````````````````````````````````````````````````````
;  Puts a check mark on the Paint FG button and sets mode to Paint FG.
SetGadgetState(#Button_Paint_FG_Row, 1)
_Button_Mode = #Button_Paint_FG_Row

;```````````````````````````````````````````````````````````````````````
;  Changes the foreground color box to the chosen color.
;  (Includes inline JavaScript magic.)
GID=GadgetID(#Foreground_Color_Box)
! $(v_gid.div).find(".dijitButtonContents").css("background-color", spider_helper_ColorToHtml(v_colorfg));

_Current_FG = Title

;,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
;```````````````````````````````````````````````````````````````````````
;  Background color box check. (Brings up NTSC chart if clicked).
;
Case #Background_Color_Box
colorBG = _Selected_Color

;```````````````````````````````````````````````````````````````````````
;  Clears buttons and selects Paint BG button.
For _Loop = #Button_Draw To #Button_Paint_BG_Row
SetGadgetState(_Loop, 0)
Next

;```````````````````````````````````````````````````````````````````````
;  Puts a check mark on the Paint BG button and sets mode to Paint BG.
SetGadgetState(#Button_Paint_BG_Row, 1)
_Button_Mode = #Button_Paint_BG_Row

;```````````````````````````````````````````````````````````````````````
;  Changes the background color box to the chosen color.
;  (Includes inline JavaScript magic.)
GID=GadgetID(#Background_Color_Box)
! $(v_gid.div).find(".dijitButtonContents").css("background-color", spider_helper_ColorToHtml(v_colorbg));

_Current_BG = Title

EndSelect

;```````````````````````````````````````````````````````````````````````
;  Closes the NTSC color chart window.
;
CloseWindow(#Window_NTSC_Color_Chart)

EndProcedure




;***********************************************************************
;***********************************************************************
;
;- bB CODE OUTPUT
;
;  (The .s stands for STRING.)
;
Procedure.s bB_Procedure()


Protected bBCode.s

bBCode + "<pre><br>"

bBCode + "   ;****************************************************************<br>"
bBCode + "   ;<br>"
bBCode + "   ;  This program uses the DPC+ kernel.<br>"
bBCode + "   ;<br>"
bBCode + "   set kernel DPC+<br><br><br>"

bBCode + "   ;****************************************************************<br>"
bBCode + "   ;<br>"
bBCode + "   ;  Standard used in North America and most of South America.<br>"
bBCode + "   ;<br>"
bBCode + "   set tv ntsc<br><br><br>"

bBCode + "   ;****************************************************************<br>"
bBCode + "   ;<br>"
bBCode + "   ;  NTSC colors.<br>"
bBCode + "   ;<br>"
bBCode + "   ;  Use these constants so you can quickly and easily swap them<br>"
bBCode + "   ;  out for PAL-60 colors. Or use this if you created a PAL-60<br>"
bBCode + "   ;  game and want to instantly convert the colors to NTSC (if you<br>"
bBCode + "   ;  were already using the PAL-60 constants).<br>"
bBCode + "   ;<br>"
bBCode + "   const _00 = $00<br>"
bBCode + "   const _02 = $02<br>"
bBCode + "   const _04 = $04<br>"
bBCode + "   const _06 = $06<br>"
bBCode + "   const _08 = $08<br>"
bBCode + "   const _0A = $0A<br>"
bBCode + "   const _0C = $0C<br>"
bBCode + "   const _0E = $0E<br>"
bBCode + "   const _10 = $10<br>"
bBCode + "   const _12 = $12<br>"
bBCode + "   const _14 = $14<br>"
bBCode + "   const _16 = $16<br>"
bBCode + "   const _18 = $18<br>"
bBCode + "   const _1A = $1A<br>"
bBCode + "   const _1C = $1C<br>"
bBCode + "   const _1E = $1E<br>"
bBCode + "   const _20 = $20<br>"
bBCode + "   const _22 = $22<br>"
bBCode + "   const _24 = $24<br>"
bBCode + "   const _26 = $26<br>"
bBCode + "   const _28 = $28<br>"
bBCode + "   const _2A = $2A<br>"
bBCode + "   const _2C = $2C<br>"
bBCode + "   const _2E = $2E<br>"
bBCode + "   const _30 = $30<br>"
bBCode + "   const _32 = $32<br>"
bBCode + "   const _34 = $34<br>"
bBCode + "   const _36 = $36<br>"
bBCode + "   const _38 = $38<br>"
bBCode + "   const _3A = $3A<br>"
bBCode + "   const _3C = $3C<br>"
bBCode + "   const _3E = $3E<br>"
bBCode + "   const _40 = $40<br>"
bBCode + "   const _42 = $42<br>"
bBCode + "   const _44 = $44<br>"
bBCode + "   const _46 = $46<br>"
bBCode + "   const _48 = $48<br>"
bBCode + "   const _4A = $4A<br>"
bBCode + "   const _4C = $4C<br>"
bBCode + "   const _4E = $4E<br>"
bBCode + "   const _50 = $50<br>"
bBCode + "   const _52 = $52<br>"
bBCode + "   const _54 = $54<br>"
bBCode + "   const _56 = $56<br>"
bBCode + "   const _58 = $58<br>"
bBCode + "   const _5A = $5A<br>"
bBCode + "   const _5C = $5C<br>"
bBCode + "   const _5E = $5E<br>"
bBCode + "   const _60 = $60<br>"
bBCode + "   const _62 = $62<br>"
bBCode + "   const _64 = $64<br>"
bBCode + "   const _66 = $66<br>"
bBCode + "   const _68 = $68<br>"
bBCode + "   const _6A = $6A<br>"
bBCode + "   const _6C = $6C<br>"
bBCode + "   const _6E = $6E<br>"
bBCode + "   const _70 = $70<br>"
bBCode + "   const _72 = $72<br>"
bBCode + "   const _74 = $74<br>"
bBCode + "   const _76 = $76<br>"
bBCode + "   const _78 = $78<br>"
bBCode + "   const _7A = $7A<br>"
bBCode + "   const _7C = $7C<br>"
bBCode + "   const _7E = $7E<br>"
bBCode + "   const _80 = $80<br>"
bBCode + "   const _82 = $82<br>"
bBCode + "   const _84 = $84<br>"
bBCode + "   const _86 = $86<br>"
bBCode + "   const _88 = $88<br>"
bBCode + "   const _8A = $8A<br>"
bBCode + "   const _8C = $8C<br>"
bBCode + "   const _8E = $8E<br>"
bBCode + "   const _90 = $90<br>"
bBCode + "   const _92 = $92<br>"
bBCode + "   const _94 = $94<br>"
bBCode + "   const _96 = $96<br>"
bBCode + "   const _98 = $98<br>"
bBCode + "   const _9A = $9A<br>"
bBCode + "   const _9C = $9C<br>"
bBCode + "   const _9E = $9E<br>"
bBCode + "   const _A0 = $A0<br>"
bBCode + "   const _A2 = $A2<br>"
bBCode + "   const _A4 = $A4<br>"
bBCode + "   const _A6 = $A6<br>"
bBCode + "   const _A8 = $A8<br>"
bBCode + "   const _AA = $AA<br>"
bBCode + "   const _AC = $AC<br>"
bBCode + "   const _AE = $AE<br>"
bBCode + "   const _B0 = $B0<br>"
bBCode + "   const _B2 = $B2<br>"
bBCode + "   const _B4 = $B4<br>"
bBCode + "   const _B6 = $B6<br>"
bBCode + "   const _B8 = $B8<br>"
bBCode + "   const _BA = $BA<br>"
bBCode + "   const _BC = $BC<br>"
bBCode + "   const _BE = $BE<br>"
bBCode + "   const _C0 = $C0<br>"
bBCode + "   const _C2 = $C2<br>"
bBCode + "   const _C4 = $C4<br>"
bBCode + "   const _C6 = $C6<br>"
bBCode + "   const _C8 = $C8<br>"
bBCode + "   const _CA = $CA<br>"
bBCode + "   const _CC = $CC<br>"
bBCode + "   const _CE = $CE<br>"
bBCode + "   const _D0 = $D0<br>"
bBCode + "   const _D2 = $D2<br>"
bBCode + "   const _D4 = $D4<br>"
bBCode + "   const _D6 = $D6<br>"
bBCode + "   const _D8 = $D8<br>"
bBCode + "   const _DA = $DA<br>"
bBCode + "   const _DC = $DC<br>"
bBCode + "   const _DE = $DE<br>"
bBCode + "   const _E0 = $E0<br>"
bBCode + "   const _E2 = $E2<br>"
bBCode + "   const _E4 = $E4<br>"
bBCode + "   const _E6 = $E6<br>"
bBCode + "   const _E8 = $E8<br>"
bBCode + "   const _EA = $EA<br>"
bBCode + "   const _EC = $EC<br>"
bBCode + "   const _EE = $EE<br>"
bBCode + "   const _F0 = $F0<br>"
bBCode + "   const _F2 = $F2<br>"
bBCode + "   const _F4 = $F4<br>"
bBCode + "   const _F6 = $F6<br>"
bBCode + "   const _F8 = $F8<br>"
bBCode + "   const _FA = $FA<br>"
bBCode + "   const _FC = $FC<br>"
bBCode + "   const _FE = $FE<br><br><br>"

bBCode + "   goto __Bank_2 bank2<br><br><br>"

bBCode + "   bank 2<br><br><br>"
bBCode + "   temp1=temp1<br><br><br>"

bBCode + "__Bank_2<br><br><br>"

;```````````````````````````````````````````````````````````````````````
;  bB playfield data.
;
bBCode + "   playfield:<br>"
For _Row = 0 To _bB_Rows

bBCode + "   "

For _Column = 0 To 31

bBCode + _bB_playfield(_Column, _Row)

Next
bBCode + "<br>"

Next

bBCode + "end<br><br><br>"

;```````````````````````````````````````````````````````````````````````
;  bB color row preparation.
;
yy = _bB_Rows
If _Row_Height = 1 ; If 176 rows, there can only be 88 rows of color.
yy = 87
EndIf

;```````````````````````````````````````````````````````````````````````
;  bB foreground color data.
;
bBCode + "   pfcolors:<br>"

For _Row = 0 To yy

bBCode + "   " + ReplaceString(_bB_pfcolors(_Row), "$", "_") + "<br>"

Next

bBCode + "end<br><br><br>"

;```````````````````````````````````````````````````````````````````````
;  bB background color data.
;
bBCode + "   bkcolors:<br>"

For _Row = 0 To yy

bBCode + "   " + ReplaceString(_bB_bkcolors(_Row), "$", "_") + "<br>"

Next

bBCode + "end"

bBCode + "<br><br><br>"

;```````````````````````````````````````````````````````````````````````
;  Main Loop code.
;
bBCode + "__Main_Loop"

bBCode + "<br><br><br>"

bBCode + "   ;***************************************************************<br>"
bBCode + "   ;<br>"

;```````````````````````````````````````````````````````````````````````
;  DFxFRACINC based on number of rows.
;
Select _bB_Rows

Case 175
bBCode + "   ;  176 rows that are 1 scanline high. (88 rows of color).<br>"
bBCode + "   ;<br>"
bBCode + "   DF6FRACINC = 255 ; Background colors.<br>"
bBCode + "   DF4FRACINC = 255 ; Playfield colors.<br><br>"
bBCode + "   DF0FRACINC = 255 ; Column 0.<br>"
bBCode + "   DF1FRACINC = 255 ; Column 1.<br>"
bBCode + "   DF2FRACINC = 255 ; Column 2.<br>"
bBCode + "   DF3FRACINC = 255 ; Column 3.<br><br><br><br>"

bBCode + "   ;***************************************************************<br>"
bBCode + "   ;<br>"
bBCode + "   ;  Simple fix for the top and bottom rows.<br>"
bBCode + "   ;<br>"
bBCode + "   asm<br>"
bBCode + "   lda DF6FRACDATA<br>"
bBCode + "   lda DF4FRACDATA<br>"
bBCode + "   lda DF0FRACDATA<br>"
bBCode + "   lda DF1FRACDATA<br>"
bBCode + "   lda DF2FRACDATA<br>"
bBCode + "   lda DF3FRACDATA<br>"
bBCode + "end<br>"

Case 87
bBCode + "   ;  88 rows that are 2 scanlines high.<br>"
bBCode + "   ;<br>"
bBCode + "   DF6FRACINC = 255 ; Background colors.<br>"
bBCode + "   DF4FRACINC = 255 ; Playfield colors.<br><br>"
bBCode + "   DF0FRACINC = 128 ; Column 0.<br>"
bBCode + "   DF1FRACINC = 128 ; Column 1.<br>"
bBCode + "   DF2FRACINC = 128 ; Column 2.<br>"
bBCode + "   DF3FRACINC = 128 ; Column 3.<br><br><br><br>"

bBCode + "   ;***************************************************************<br>"
bBCode + "   ;<br>"
bBCode + "   ;  Simple fix for the top two lines having the same color.<br>"
bBCode + "   ;<br>"
bBCode + "   asm<br>"
bBCode + "   lda DF6FRACDATA<br>"
bBCode + "   lda DF4FRACDATA<br>"
bBCode + "end<br>"

Case 43
bBCode + "   ;  44 rows that are 4 scanlines high.<br>"
bBCode + "   ;<br>"
bBCode + "   DF6FRACINC = 128 ; Background colors.<br>"
bBCode + "   DF4FRACINC = 128 ; Playfield colors.<br><br>"
bBCode + "   DF0FRACINC = 64 ; Column 0.<br>"
bBCode + "   DF1FRACINC = 64 ; Column 1.<br>"
bBCode + "   DF2FRACINC = 64 ; Column 2.<br>"
bBCode + "   DF3FRACINC = 64 ; Column 3.<br>"

Case 21
bBCode + "   ;  22 rows that are 8 scanlines high.<br>"
bBCode + "   ;<br>"
bBCode + "   DF6FRACINC = 64 ; Background colors.<br>"
bBCode + "   DF4FRACINC = 64 ; Playfield colors.<br><br>"
bBCode + "   DF0FRACINC = 32 ; Column 0.<br>"
bBCode + "   DF1FRACINC = 32 ; Column 1.<br>"
bBCode + "   DF2FRACINC = 32 ; Column 2.<br>"
bBCode + "   DF3FRACINC = 32 ; Column 3.<br>"

Case 10
bBCode + "   ;  11 rows that are 16 scanlines high.<br>"
bBCode + "   ;<br>"
bBCode + "   DF6FRACINC = 32 ; Background colors.<br>"
bBCode + "   DF4FRACINC = 32 ; Playfield colors.<br><br>"
bBCode + "   DF0FRACINC = 16 ; Column 0.<br>"
bBCode + "   DF1FRACINC = 16 ; Column 1.<br>"
bBCode + "   DF2FRACINC = 16 ; Column 2.<br>"
bBCode + "   DF3FRACINC = 16 ; Column 3.<br>"

EndSelect

;```````````````````````````````````````````````````````````````````````
;  Rest of the Main Loop and banks.
;
bBCode + "<br><br><br>"

bBCode + "   ;***************************************************************<br>"
bBCode + "   ;<br>"
bBCode + "   ;  Displays the screen.<br>"
bBCode + "   ;<br>"
bBCode + "   drawscreen<br><br><br><br>"

bBCode + "   goto __Main_Loop<br><br><br><br>"

bBCode + "   bank 3<br>"
bBCode + "   temp1=temp1<br><br>"
bBCode + "   bank 4<br>"
bBCode + "   temp1=temp1<br><br>"
bBCode + "   bank 5<br>"
bBCode + "   temp1=temp1<br><br>"
bBCode + "   bank 6<br>"
bBCode + "   temp1=temp1<br>"
bBCode + "</pre>"


ProcedureReturn bBCode

EndProcedure

User avatar
Random Terrain
Posts: 63
Joined: Fri Jul 09, 2021 9:48 pm
Location: USA
Contact:

Re: Would an ellipse, line, and box be possible?

Post by Random Terrain »

Here's part 2:

Code: Select all



;***********************************************************************
;***********************************************************************
;
;- NTSC COLOR TABLE
;
;  (The .s stands for STRING.)
;
Procedure.s Get_NTSC_ColorTable()

Protected Table.s
Protected Title.s, Color.s
Protected _NTSC_Row_Counter, _NTSC_Column_Counter
Protected _Atari_Counter

_Atari_Counter = 0

Restore NTSC

;```````````````````````````````````````````````````````````````````````
;  Creates the top row of numbers.
;
Table + "<table id='colorTable' border='1' cellspacing='0' bordercolordark='white' bordercolorlight='#A0A0A0' bordercolor='#A0A0A0' style='empty-cells: show; border-collapse: collapse; border-width:1px; border-color: #999; border-style:solid; margin-left: auto; margin-right: auto;'>"
Table + "<td style='vertical-align: middle; text-align: center; line-height: 25px; height: 25px; width: 24px;'>"
Table + "</td>"
Table + "<td style='vertical-align: middle; text-align: center; line-height: 25px; height: 25px; width: 24px;'>"
Table + "0"
Table + "</td>"
Table + "<td style='vertical-align: middle; text-align: center; line-height: 25px; height: 25px; width: 24px;'>"
Table + "2"
Table + "</td>"
Table + "<td style='vertical-align: middle; text-align: center; line-height: 25px; height: 25px; width: 24px;'>"
Table + "4"
Table + "</td>"
Table + "<td style='vertical-align: middle; text-align: center; line-height: 25px; height: 25px; width: 24px;'>"
Table + "6"
Table + "</td>"
Table + "<td style='vertical-align: middle; text-align: center; line-height: 25px; height: 25px; width: 24px;'>"
Table + "8"
Table + "</td>"
Table + "<td style='vertical-align: middle; text-align: center; line-height: 25px; height: 25px; width: 24px;'>"
Table + "A"
Table + "</td>"
Table + "<td style='vertical-align: middle; text-align: center; line-height: 25px; height: 25px; width: 24px;'>"
Table + "C"
Table + "</td>"
Table + "<td style='vertical-align: middle; text-align: center; line-height: 25px; height: 25px; width: 24px;'>"
Table + "E"
Table + "</td>"

;```````````````````````````````````````````````````````````````````````
;  Loops for the NTSC chart.
;
For _NTSC_Row_Counter = 0 To 15
   Table + "<tr>"
For _NTSC_Column_Counter = 0 To 8

;```````````````````````````````````````````````````````````````````````
;  Creates a side number only at the beginning of each row.
;
If _NTSC_Column_Counter = 0

Table + "<td style='vertical-align: middle; text-align: center; line-height: 25px; height: 25px;'>"

Select _Atari_Counter
Case 0
Table + "0"
Case 1
Table + "1"
Case 2
Table + "2"
Case 3
Table + "3"
Case 4
Table + "4"
Case 5
Table + "5"
Case 6
Table + "6"
Case 7
Table + "7"
Case 8
Table + "8"
Case 9
Table + "9"
Case 10
Table + "A"
Case 11
Table + "B"
Case 12
Table + "C"
Case 13
Table + "D"
Case 14
Table + "E"
Case 15
Table + "F"

EndSelect

Table + "</td>"

;```````````````````````````````````````````````````````````````````````
;  Increases the Atari counter (for making side numbers).
;
   _Atari_Counter = _Atari_Counter + 1

EndIf 

;```````````````````````````````````````````````````````````````````````
;  Reads the data and creates the NTSC color box cells.
;
If _NTSC_Column_Counter > 0
Read.s Title
Read.s Color
Table + "<td title='" + Title + "' color='" + Color + "' style='background-color:" + Color + "'></td>"
EndIf

Next ; _NTSC_Column_Counter
Table + "</tr>"
Next ; _NTSC_Row_Counter

;```````````````````````````````````````````````````````````````````````
;  Finishes the NTSC chart.
;
Table + "</table>"

ProcedureReturn Table

EndProcedure




;***********************************************************************
;***********************************************************************
;
;- GADGET EVENTS
;
;  Handles all that happens during runtime.
;
Procedure GadgetEvents()

Protected _Which_Gadget = EventGadget()
Protected _Type = EventType()
Protected _Loop


;***********************************************************************
;
;  Control key check.
;
If GetGadgetAttribute(#Canvas_Playfield, #PB_Canvas_Modifiers) & #PB_Canvas_Control

;```````````````````````````````````````````````````````````````````````
;  Makes sure draw mode is on.
If _Button_Mode = #Button_Draw

;```````````````````````````````````````````````````````````````````````
;  Ctrl key memory check.
;
Select _Ctrl_Key_Memory

;```````````````````````````````````````````````````````````````````````
;  Ctrl key is being pressed from a released state.
Case 0

;```````````````````````````````````````````````````````````````````````
;  Removes any checkmarks from buttons.
For _Loop = #Button_Draw To #Button_Paint_BG_Row
SetGadgetState(_Loop, 0)
Next

;```````````````````````````````````````````````````````````````````````
;  Puts a check mark on the Erase button and sets mode to Erase.
SetGadgetState(#Button_Erase, 1)
_Button_Mode = #Button_Erase

;```````````````````````````````````````````````````````````````````````
;  Tells program that the Ctrl key is being held down.
_Ctrl_Key_Memory = 1

EndSelect

EndIf
EndIf




;***********************************************************************
;
;  Key release check.
;
Select EventType()

;```````````````````````````````````````````````````````````````````````
;  A key was released.
Case #PB_EventType_KeyUp

;```````````````````````````````````````````````````````````````````````
;  Checks the Ctrl key.
;
Select GetGadgetAttribute(#Canvas_Playfield, #PB_Canvas_Modifiers) & #PB_Canvas_Control

;```````````````````````````````````````````````````````````````````````
;  Ctrl key is off, so continue.
Case 0

;```````````````````````````````````````````````````````````````````````
;  Makes sure erase mode is on.
If _Button_Mode = #Button_Erase

;```````````````````````````````````````````````````````````````````````
;  Tells program that the Ctrl key is no longer pressed.
_Ctrl_Key_Memory = 0

;```````````````````````````````````````````````````````````````````````
;  Removes any checkmarks from buttons.
For _Loop = #Button_Draw To #Button_Paint_BG_Row
SetGadgetState(_Loop, 0)
Next

;```````````````````````````````````````````````````````````````````````
;  Puts a check mark on the Draw button and sets mode to Draw.
SetGadgetState(#Button_Draw, 1)
_Button_Mode = #Button_Draw

EndIf
EndSelect
EndSelect


;***********************************************************************
;
;  Checks which gadget was triggered.
;
Select _Which_Gadget

;,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
;```````````````````````````````````````````````````````````````````````
;
;  Canvas section.
;
Case #Canvas_Playfield

;```````````````````````````````````````````````````````````````````````
;  Keeps user from drawing if mouse pointer leaves the canvas while
;  left button is clicked, then mouse pointer moves back over with
;  left button released.
;
Select _Type

Case #PB_EventType_LeftButtonDown
_EnableDrawing = #True

Case #PB_EventType_MouseLeave
_EnableDrawing = #False

EndSelect

;```````````````````````````````````````````````````````````````````````
;  Canvas precheck.
;
If EventType() = #PB_EventType_LeftButtonDown Or (EventType() = #PB_EventType_MouseMove And GetGadgetAttribute(#Canvas_Playfield, #PB_Canvas_Buttons) & #PB_Canvas_LeftButton) 

If _EnableDrawing = #True And StartDrawing(CanvasOutput(#Canvas_Playfield))

;```````````````````````````````````````````````````````````````````````
;  Finds out which playfield column and row was clicked.
x = (GetGadgetAttribute(#Canvas_Playfield, #PB_Canvas_MouseX)/_Column_Scale)
y = (GetGadgetAttribute(#Canvas_Playfield, #PB_Canvas_MouseY)/(_Row_Height*_Row_Scale))

;,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
;```````````````````````````````````````````````````````````````````````
;-  Draw.
;
If _Button_Mode = #Button_Draw

If x > 1 And x < 34 And y >= _Row_Start And y <= _Row_Limit

_Playfield_Pixels(x, y*_Row_Height) = 1 

Box(x*_Column_Scale, y*_Row_Scale*_Row_Height, _Column_Scale, _Row_Height*_Row_Scale, _Playfield_Foreground_Colors(y*_Row_Height))

_bB_playfield(x-2, y-_Row_Start) = "X"

EndIf

;,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
;```````````````````````````````````````````````````````````````````````
;  Erase.
;
ElseIf _Button_Mode = #Button_Erase

If x > 1 And x < 34 And y >= _Row_Start And y <= _Row_Limit

_Playfield_Pixels(x, y*_Row_Height) = 0

Box(x*_Column_Scale, y*_Row_Scale*_Row_Height, _Column_Scale, _Row_Height*_Row_Scale, _Playfield_Background_Colors(y*_Row_Height))

_bB_playfield(x-2, y-_Row_Start) = "."

EndIf

;,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
;```````````````````````````````````````````````````````````````````````
;  Paint Foreground Row.
;
ElseIf _Button_Mode = #Button_Paint_FG_Row

If x > 1 And x < 34 And y >= _Row_Start And y <= _Row_Limit

_Playfield_Foreground_Colors(y*_Row_Height) = colorFG

Box(0, y*_Row_Scale*_Row_Height, 9, _Row_Height*_Row_Scale, colorFG)

For _Loop = 0 To _32_Columns

If _Playfield_Pixels(_Loop,y*_Row_Height) = 1
Box(_Loop*_Column_Scale, y*_Row_Scale*_Row_Height, _Column_Scale, _Row_Height*_Row_Scale, colorFG)
EndIf

;```````````````````````````````````````````````````````````````````````
;  Paints extra row down if 176 rows and an even row and pixel is on.
If _Row_Height = 1 And (y-_Row_Start) % 2 = 0 And _Playfield_Pixels(_Loop,(y+1)*_Row_Height) = 1
_Playfield_Foreground_Colors((y+1)*_Row_Height) = colorFG
Box(_Loop*_Column_Scale, (y+1)*_Row_Scale*_Row_Height, _Column_Scale, _Row_Height*_Row_Scale, colorFG)
Box(0, (y+1)*_Row_Scale*_Row_Height, 9, _Row_Height*_Row_Scale, colorFG)

;```````````````````````````````````````````````````````````````````````
;  Paints extra row up if 176 rows and an odd row and pixel is on.
ElseIf _Row_Height = 1 And (y-_Row_Start) % 2 = 1 And _Playfield_Pixels(_Loop,(y-1)*_Row_Height) = 1
_Playfield_Foreground_Colors((y-1)*_Row_Height) = colorFG
Box(_Loop*_Column_Scale, (y-1)*_Row_Scale*_Row_Height, _Column_Scale, _Row_Height*_Row_Scale, colorFG)
Box(0, (y-1)*_Row_Scale*_Row_Height, 9, _Row_Height*_Row_Scale, colorFG)
EndIf

Next

yy = y-_Row_Start

;```````````````````````````````````````````````````````````````````````
;  Cuts FG color rows in half if 176 rows (can only be 88 rows of color).
If _Row_Height = 1
yy = yy / 2
EndIf

_bB_pfcolors(yy) = _Current_FG

EndIf

;,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
;```````````````````````````````````````````````````````````````````````
;  Paint Background Row.
;
ElseIf _Button_Mode = #Button_Paint_BG_Row

If x > 1 And x < 34 And y >= _Row_Start And y <= _Row_Limit

_Playfield_Background_Colors(y*_Row_Height) = colorBG

;```````````````````````````````````````````````````````````````````````
;  Paints BG row.
Box(30, y*_Row_Height*_Row_Scale, 480, _Row_Height*_Row_Scale, colorBG)
Box(10, y*_Row_Height*_Row_Scale, 19, _Row_Height*_Row_Scale, colorBG)
Box(511, y*_Row_Height*_Row_Scale, 29, _Row_Height*_Row_Scale, colorBG)

;```````````````````````````````````````````````````````````````````````
;  Paints extra BG row down if 176 rows and an odd row and pixel is on.
If _Row_Height = 1 And (y-_Row_Start) % 2 = 0
_Playfield_Background_Colors((y+1)*_Row_Height) = colorBG
Box(30, (y+1)*_Row_Height*_Row_Scale, 480, _Row_Height*_Row_Scale, colorBG)
Box(10, (y+1)*_Row_Height*_Row_Scale, 19, _Row_Height*_Row_Scale, colorBG)
Box(511, (y+1)*_Row_Height*_Row_Scale, 29, _Row_Height*_Row_Scale, colorBG)

;```````````````````````````````````````````````````````````````````````
;  Paints extra BG row up if 176 rows and an odd row and pixel is on.
ElseIf _Row_Height = 1 And (y-_Row_Start) % 2 = 1
_Playfield_Background_Colors((y-1)*_Row_Height) = colorBG
Box(30, (y-1)*_Row_Height*_Row_Scale, 480, _Row_Height*_Row_Scale, colorBG)
Box(10, (y-1)*_Row_Height*_Row_Scale, 19, _Row_Height*_Row_Scale, colorBG)
Box(511, (y-1)*_Row_Height*_Row_Scale, 29, _Row_Height*_Row_Scale, colorBG)

EndIf


;```````````````````````````````````````````````````````````````````````
;  Loop for replacing foreground.
For _Loop = 0 To _32_Columns

;```````````````````````````````````````````````````````````````````````
;  Paints FG if pixel is on.
If _Playfield_Pixels(_Loop,y*_Row_Height) = 1
Box(_Loop*_Column_Scale, y*_Row_Scale*_Row_Height, _Column_Scale, _Row_Height*_Row_Scale, _Playfield_Foreground_Colors(y*_Row_Height))
EndIf

;```````````````````````````````````````````````````````````````````````
;  Paints extra FG row down if 176 rows and an even row and pixel is on.
If _Row_Height = 1 And (y-_Row_Start) % 2 = 0 And _Playfield_Pixels(_Loop,(y+1)*_Row_Height) = 1
Box(_Loop*_Column_Scale, (y+1)*_Row_Scale*_Row_Height, _Column_Scale, _Row_Height*_Row_Scale, _Playfield_Foreground_Colors((y+1)*_Row_Height))

;```````````````````````````````````````````````````````````````````````
;  Paints extra FG row up if 176 rows and an odd row and pixel is on.
ElseIf _Row_Height = 1 And (y-_Row_Start) % 2 = 1 And _Playfield_Pixels(_Loop,(y-1)*_Row_Height) = 1
Box(_Loop*_Column_Scale, (y-1)*_Row_Scale*_Row_Height, _Column_Scale, _Row_Height*_Row_Scale, _Playfield_Foreground_Colors((y-1)*_Row_Height))

EndIf

Next

yy = y-_Row_Start

;```````````````````````````````````````````````````````````````````````
;  Cuts BG color rows in half if 176 rows (can only be 88 rows of color).
If _Row_Height = 1
yy = yy / 2
EndIf

_bB_bkcolors(yy) = _Current_BG

EndIf


EndIf
StopDrawing()
EndIf
EndIf


;,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
;```````````````````````````````````````````````````````````````````````
;
;- Row Mode check. If a new mode is selected, the canvas playfield is
;  also cleared.
;
Case #Row_Mode_Dropdown_Menu

_Row_Height = Pow(2, GetGadgetState(#Row_Mode_Dropdown_Menu))

If _Type = #PB_EventType_Change

Select _Row_Height

Case 1
Dim _bB_playfield.s(32, 176)
Dim _bB_pfcolors.s(88)
Dim _bB_bkcolors.s(88)
_bB_Rows = 175 : _Row_Start = 16 : _Row_Limit = 191

Case 2
Dim _bB_playfield.s(32, 88)
Dim _bB_pfcolors.s(88)
Dim _bB_bkcolors.s(88)
_bB_Rows = 87 : _Row_Start = 8 : _Row_Limit = 95

Case 4
Dim _bB_playfield.s(32, 44)
Dim _bB_pfcolors.s(44)
Dim _bB_bkcolors.s(44)
_bB_Rows = 43 : _Row_Start = 4 : _Row_Limit = 47

Case 8
Dim _bB_playfield.s(32, 22)
Dim _bB_pfcolors.s(22)
Dim _bB_bkcolors.s(22)
_bB_Rows = 21 : _Row_Start = 2 : _Row_Limit = 23

Case 16
Dim _bB_playfield.s(32, 11)
Dim _bB_pfcolors.s(11)
Dim _bB_bkcolors.s(11)
_bB_Rows = 10 : _Row_Start = 1 : _Row_Limit = 11

EndSelect

ClearPlayfield()

EndIf


;,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
;```````````````````````````````````````````````````````````````````````
;
;  Button click check. If a button is clicked, all buttons are cleared
;  and the new button is selected.
;
Case #Button_Draw To #Button_Paint_BG_Row

;```````````````````````````````````````````````````````````````````````
;  Removes any checkmarks from buttons.
For _Loop = #Button_Draw To #Button_Paint_BG_Row
SetGadgetState(_Loop, 0)
Next

;```````````````````````````````````````````````````````````````````````
;  Puts a check mark on the correct button and sets button mode.
SetGadgetState(_Which_Gadget, 1)
_Button_Mode = _Which_Gadget


;,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
;```````````````````````````````````````````````````````````````````````
;- NTSC COLOR WINDOW POPUP
;
;  Appears when user clicks on a foreground/background color box.
;
Case #Foreground_Color_Box, #Background_Color_Box
_Which_Color_FG_or_BG = _Which_Gadget

OpenWindow(#Window_NTSC_Color_Chart, WindowMouseX(#Window_Main)-200, WindowMouseY(#Window_Main)-300, 
300, 500, "Color NTSC");, #PB_Window_BorderLess)
ContainerGadget(#NTSC_Gadget, 0, 0, WindowWidth(#Window_NTSC_Color_Chart), WindowHeight(#Window_NTSC_Color_Chart))

GID = GadgetID(#NTSC_Gadget)
SetWindowColor(#Window_NTSC_Color_Chart, $FFFFFF)

;```````````````````````````````````````````````````````````````````````
;  Inline JavaScript magic.
;
;  A JavaScript variable name is the same as a SpiderBasic variable
;  name, but the JavaScript version is all lowercase and has a
;  'v_' prefix. It's the same for local variables, global variables
;  and function parameters.
;
;  A JavaScript procedure name is the same as a SpiderBasic procedure
;  name, but the JavaScript version is all lowercase and has an
;  'f_' prefix.
;
;  Line 1: Clears the div.
;  Line 2: Inserts content using append().
;  Line 3: Onclick magic.
;  Line 4: Procedure magic.
;
! $(v_gid.div).empty();
! $(v_gid.div).append($(v_ntsc_colortable));
! $('#colorTable').on('click','td', function() {
!   f_colorcellclicked($(this).attr("title"), $(this).attr("color"));
! });

;```````````````````````````````````````````````````````````````````````
;  Makes NTSC color chart disappear if mouse pointer leaves area.
;
AddWindowTimer(#Window_NTSC_Color_Chart, 0, 100)


;,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
;```````````````````````````````````````````````````````````````````````
;
;  Clear Button check. (Clears canvas playfield if button clicked.)
;
Case #Button_Clear
ClearPlayfield()


;,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
;```````````````````````````````````````````````````````````````````````
;
;  Generate bB code button check. If clicked, opens window, gets
;  bB code, and makes it selectable.
;
Case #Button_Generate_Code

OpenWindow(#bB_Code_Window, WindowMouseX(#Window_Main)-200, WindowMouseY(#Window_Main)-480, 
500, 500, "bB Code");, #PB_Window_BorderLess)
ScrollAreaGadget(#bB_Gadget, 0, 0, 500, 500, 500, 500)
SetGadgetColor(#bB_Gadget, #PB_Gadget_BackColor, $FFFFFF)

bB_CodeTable = bB_Procedure()

GID = GadgetID(#bB_Gadget)
! $(v_gid.div).empty();
! $(v_gid.div).append($(v_bb_codetable));
! $(v_gid.div).css("user-select", "text");

EndSelect

EndProcedure



;***********************************************************************
;***********************************************************************
;
;- USER INTERFACE SETUP
;
Procedure initUI()
;
;```````````````````````````````````````````````````````````````````````
;  Main window and user interface.
;
LoadFont(#Font_UiBig, fontUiBig, fontUiBigSize, #PB_Font_Bold)
LoadFont(#Font_UiNormal, fontUiNormal, fontUiNormalSize, #PB_Font_Bold)
LoadFont(#Font_UiSmall, fontUiSmall, fontUiSmallSize)

If OpenWindow(#Window_Main, 0, 0, 0, 0, #AppName, #PB_Window_Background)
ScrollAreaGadget(#Main_Gadget, 0, 0, 1000, 900, 1000, 1000)
SetWindowColor(#Window_Main, colorWindowBG)

;```````````````````````````````````````````````````````````````````````
;  TEXT: Title.
;
TextGadget(#Text_for_Title, 5*_Spacer, 5*_Spacer, _32_Columns*_Column_Scale*3, fontUiBigSize, #AppName)
SetGadgetFont(#Text_for_Title, FontID(#Font_UiBig))
SetGadgetColor(#Text_for_Title, #PB_Gadget_FrontColor, _Text_Color)

;```````````````````````````````````````````````````````````````````````
;-  CANVAS: Playfield area for drawing.
;
CanvasGadget(#Canvas_Playfield, GadgetX(#Text_for_Title), GadgetY(#Text_for_Title)+GadgetHeight(#Text_for_Title)+3*_Spacer,
542, 417, #PB_Canvas_Border | #PB_Canvas_Keyboard)

;```````````````````````````````````````````````````````````````````````
;  BUTTON: Clear playfield canvas.
;
ButtonGadget(#Button_Clear, GadgetX(#Text_for_Title), GadgetY(#Canvas_Playfield)+GadgetHeight(#Canvas_Playfield)+3*_Spacer,
80, 30, "Clear")

;```````````````````````````````````````````````````````````````````````
;  BUTTON: Generate bB code.
;
ButtonGadget(#Button_Generate_Code, GadgetX(#Button_Clear)+GadgetWidth(#Canvas_Playfield)-130, GadgetY(#Button_Clear),
130, 30, "Generate bB Code")

;```````````````````````````````````````````````````````````````````````
;  DROPDOWN MENU: Row Mode.
;
TextGadget(#Text_for_Row_Mode, GadgetX(#Canvas_Playfield)+GadgetWidth(#Canvas_Playfield)+3*_Spacer, GadgetY(#Canvas_Playfield), 
200, fontUiNormalSize, "Row Mode")
SetGadgetFont(#Text_for_Row_Mode, FontID(#Font_UiNormal))
SetGadgetColor(#Text_for_Row_Mode, #PB_Gadget_FrontColor, _Text_Color)

ComboBoxGadget(#Row_Mode_Dropdown_Menu, GadgetX(#Text_for_Row_Mode), GadgetY(#Text_for_Row_Mode)+fontUiNormalSize+_Spacer, 240, 30)
AddGadgetItem(#Row_Mode_Dropdown_Menu, -1, " 176 rows (32 columns)")
AddGadgetItem(#Row_Mode_Dropdown_Menu, -1, " 88 rows (32 columns)")
AddGadgetItem(#Row_Mode_Dropdown_Menu, -1, " 44 rows (32 columns)")
AddGadgetItem(#Row_Mode_Dropdown_Menu, -1, " 22 rows (32 columns)")
AddGadgetItem(#Row_Mode_Dropdown_Menu, -1, " 11 rows (32 columns)")
SetGadgetState(#Row_Mode_Dropdown_Menu, 1)

;```````````````````````````````````````````````````````````````````````
;  TEXT: Editing.
;
TextGadget(#Text_for_Editing_Mode, GadgetX(#Text_for_Row_Mode), GadgetY(#Row_Mode_Dropdown_Menu)+30+3*_Spacer, 240, fontUiNormalSize, "Editing Mode")
SetGadgetFont(#Text_for_Editing_Mode, FontID(#Font_UiNormal))
SetGadgetColor(#Text_for_Editing_Mode, #PB_Gadget_FrontColor, _Text_Color)

;```````````````````````````````````````````````````````````````````````
;
;  NOTE: "#PB_Button_Toggle" creates a toggle button (one click pushes
;  it, another will release it.)
;
;```````````````````````````````````````````````````````````````````````

;```````````````````````````````````````````````````````````````````````
;  BUTTON: Draw playfield pixel.
;
ButtonGadget(#Button_Draw, GadgetX(#Text_for_Row_Mode), GadgetY(#Text_for_Editing_Mode)+fontUiNormalSize+_Spacer, 115, 30,
"Draw", #PB_Button_Toggle )

;```````````````````````````````````````````````````````````````````````
;  BUTTON: Erase playfield pixel.
;
ButtonGadget(#Button_Erase, GadgetX(#Text_for_Row_Mode)+120, GadgetY(#Text_for_Editing_Mode)+fontUiNormalSize+_Spacer, 115, 30,
"Erase", #PB_Button_Toggle)

;```````````````````````````````````````````````````````````````````````
;  BUTTON: Paint FG row.
;
ButtonGadget(#Button_Paint_FG_Row, GadgetX(#Text_for_Row_Mode), GadgetY(#Text_for_Editing_Mode)+fontUiNormalSize+_Spacer+35, 115, 30,
"Paint FG Row", #PB_Button_Toggle )

;```````````````````````````````````````````````````````````````````````
;  BUTTON: Paint BG row.
;
ButtonGadget(#Button_Paint_BG_Row, GadgetX(#Button_Paint_FG_Row)+120, GadgetY(#Text_for_Editing_Mode)+fontUiNormalSize+_Spacer+35, 115, 30,
"Paint BG Row", #PB_Button_Toggle)

;```````````````````````````````````````````````````````````````````````
;  Selects starting button mode.
;
SetGadgetState(#Button_Draw, 1)  ; Puts a check mark on the Draw button.
_Button_Mode = #Button_Draw      ; Selects the Draw button.

;```````````````````````````````````````````````````````````````````````
;  Foreground Color text and clickable box that brings up the NTSC chart.
;
TextGadget(#Text_for_Foreground_Color, GadgetX(#Text_for_Row_Mode), GadgetY(#Button_Paint_FG_Row)+35+3*_Spacer, 152, fontUiNormalSize, "Foreground Color")
SetGadgetFont(#Text_for_Foreground_Color, FontID(#Font_UiNormal))
SetGadgetColor(#Text_for_Foreground_Color, #PB_Gadget_FrontColor, _Text_Color)
ButtonGadget(#Foreground_Color_Box, GadgetX(#Text_for_Foreground_Color)+GadgetWidth(#Text_for_Foreground_Color), GadgetY(#Text_for_Foreground_Color)-5, 60, 30, "")
GID=GadgetID(#Foreground_Color_Box)
! $(v_gid.div).find(".dijitButtonContents").css("background-color", spider_helper_ColorToHtml(v_colorfg));

;```````````````````````````````````````````````````````````````````````
;  Background Color text and clickable box that brings up the NTSC chart.
;
TextGadget(#Text_for_Background_Color, GadgetX(#Text_for_Row_Mode), GadgetY(#Button_Paint_FG_Row)+75+3*_Spacer, 152, fontUiNormalSize, "Background Color")
SetGadgetFont(#Text_for_Background_Color, FontID(#Font_UiNormal))
SetGadgetColor(#Text_for_Background_Color, #PB_Gadget_FrontColor, _Text_Color)
ButtonGadget(#Background_Color_Box, GadgetX(#Text_for_Background_Color)+GadgetWidth(#Text_for_Background_Color), GadgetY(#Text_for_Background_Color)-5, 60, 30, "")

GID=GadgetID(#Background_Color_Box)

;```````````````````````````````````````````````````````````````````````
;  Inline JavaScript magic.
;
! $(v_gid.div).find(".dijitButtonContents").css("background-color", spider_helper_ColorToHtml(v_colorbg));

;```````````````````````````````````````````````````````````````````````
;  Footer with version number and more.
;
TextGadget(#Text_for_Footer, GadgetX(#Text_for_Title), GadgetY(#Button_Clear)+GadgetHeight(#Button_Clear)+3*_Spacer,
_32_Columns*_Column_Scale*3, fontUiSmallSize, textFooter)
SetGadgetFont(#Text_for_Footer, FontID(#Font_UiSmall))
SetGadgetColor(#Text_for_Footer, #PB_Gadget_FrontColor, _Text_Color)

EndIf

EndProcedure



;***********************************************************************
;***********************************************************************
;
;- START OF PROGRAM (POINT OF ENTRY)
;
Global NTSC_ColorTable.s = Get_NTSC_ColorTable()
initUI()
BindEvent(#PB_Event_Gadget, @GadgetEvents())
BindEvent(#PB_Event_CloseWindow, @WindowEvents())
BindEvent(#PB_Event_Timer, @TimerEvents())
BindEvent(#PB_Event_CloseWindow, @CloseWindowEvent())

;```````````````````````````````````````````````````````````````````````
;- Creates black box around playfield area.
;
StartDrawing(CanvasOutput(#Canvas_Playfield))
Box(29, 31, 481.5, 354, #Black)
Box(30, 32, 480, 352, #White)
StopDrawing()

;```````````````````````````````````````````````````````````````````````
;  Draws black line down left side.
;
Box(0, 32, 9, 352, #Black)

;```````````````````````````````````````````````````````````````````````
;  Puts the starting default colors into the foreground and background.
;
For _Loop = 0 To 220
_Playfield_Foreground_Colors(_Loop) = colorFG
_Playfield_Background_Colors(_Loop) = colorBG
Next

;```````````````````````````````````````````````````````````````````````
;  Fills the bB playfield array with dots.
;
For _Row = 0 To _bB_Rows

For _Column = 0 To 31

_bB_playfield(_Column, _Row) = "."

Next
Next

;```````````````````````````````````````````````````````````````````````
;  Fills the bB pfcolors array with black.
;
For _Row = 0 To _bB_Rows

_bB_pfcolors(_Row) = "$00"

Next

;```````````````````````````````````````````````````````````````````````
;  Fills the bB bkcolors array with white.
;
For _Row = 0 To _bB_Rows

_bB_bkcolors(_Row) = "$0E"

Next


;***********************************************************************
;***********************************************************************
;
;- DATA SECTION FOR NTSC COLOR CHART
;
;  (The .s stands for STRING.)
;
DataSection

NTSC:
Data.s "$00", "#000000", "$02", "#1A1A1A", "$04", "#393939", "$06", "#5B5B5B", "$08", "#7E7E7E", "$0A", "#A2A2A2", "$0C", "#C7C7C7", "$0E", "#EDEDED"
Data.s "$10", "#190200", "$12", "#3A1F00", "$14", "#5D4100", "$16", "#826400", "$18", "#A78800", "$1A", "#CCAD00", "$1C", "#F2D219", "$1E", "#FEFA40"
Data.s "$20", "#370000", "$22", "#5E0800", "$24", "#832700", "$26", "#A94900", "$28", "#CF6C00", "$2A", "#F58F17", "$2C", "#FEB438", "$2E", "#FEDF6F"
Data.s "$30", "#470000", "$32", "#730000", "$34", "#981300", "$36", "#BE3216", "$38", "#E45335", "$3A", "#FE7657", "$3C", "#FE9C81", "$3E", "#FEC6BB"
Data.s "$40", "#440008", "$42", "#6F001F", "$44", "#960640", "$46", "#BB2462", "$48", "#E14585", "$4A", "#FE67AA", "$4C", "#FE8CD6", "$4E", "#FEB7F6"
Data.s "$50", "#2D004A", "$52", "#570067", "$54", "#7D058C", "$56", "#A122B1", "$58", "#C743D7", "$5A", "#ED65FE", "$5C", "#FE8AF6", "$5E", "#FEB5F7"
Data.s "$60", "#0D0082", "$62", "#3300A2", "$64", "#550FC9", "$66", "#782DF0", "$68", "#9C4EFE", "$6A", "#C372FE", "$6C", "#EB98FE", "$6E", "#FEC0F9"
Data.s "$70", "#000091", "$72", "#0A05BD", "$74", "#2822E4", "$76", "#4842FE", "$78", "#6B64FE", "$7A", "#908AFE", "$7C", "#B7B0FE", "$7E", "#DFD8FE"
Data.s "$80", "#000072", "$82", "#001CAB", "$84", "#033CD6", "$86", "#205EFD", "$88", "#4081FE", "$8A", "#64A6FE", "$8C", "#89CEFE", "$8E", "#B0F6FE"
Data.s "$90", "#00103A", "$92", "#00316E", "$94", "#0055A2", "$96", "#0579C8", "$98", "#239DEE", "$9A", "#44C2FE", "$9C", "#68E9FE", "$9E", "#8FFEFE"
Data.s "$A0", "#001F02", "$A2", "#004326", "$A4", "#006957", "$A6", "#008D7A", "$A8", "#1BB19E", "$AA", "#3BD7C3", "$AC", "#5DFEE9", "$AE", "#86FEFE"
Data.s "$B0", "#002403", "$B2", "#004A05", "$B4", "#00700C", "$B6", "#09952B", "$B8", "#28BA4C", "$BA", "#49E06E", "$BC", "#6CFE92", "$BE", "#97FEB5"
Data.s "$C0", "#002102", "$C2", "#004604", "$C4", "#086B00", "$C6", "#289000", "$C8", "#49B509", "$CA", "#6BDB28", "$CC", "#8FFE49", "$CE", "#BBFE69"
Data.s "$D0", "#001501", "$D2", "#103600", "$D4", "#305900", "$D6", "#537E00", "$D8", "#76A300", "$DA", "#9AC800", "$DC", "#BFEE1E", "$DE", "#E8FE3E"
Data.s "$E0", "#1A0200", "$E2", "#3B1F00", "$E4", "#5E4100", "$E6", "#836400", "$E8", "#A88800", "$EA", "#CEAD00", "$EC", "#F4D218", "$EE", "#FEFA40"
Data.s "$F0", "#380000", "$F2", "#5F0800", "$F4", "#842700", "$F6", "#AA4900", "$F8", "#D06B00", "$FA", "#F68F18", "$FC", "#FEB439", "$FE", "#FEDF70"

EndDataSection
munfraid
Posts: 104
Joined: Sat Mar 24, 2018 1:33 pm

Re: Would an ellipse, line, and box be possible?

Post by munfraid »

Random Terrain wrote: Wed Aug 04, 2021 5:17 amThat tool is more advanced. It can do all kinds of things that may not be possible with SpiderBasic.
Everything in that tool can be done with SpiderBasic. In the end, both use the same web technologies. Some things are easier to achieve than others, of course.
Random Terrain wrote: Wed Aug 04, 2021 5:17 amI'd be interested in adding ellipse, line, and box buttons like that tool has, but I don't see how it can be done since we're not just drawing on a canvas. Everything has to be converted to arrays and it would have to be done with whatever resolution the user selects (32x11, 32x22, 23x44, 32x88, 32x176).
You’re right, the drawing has to be converted to the arrays. I would try to do the drawing onto a hidden image with unscaled pixels, in your case 176 x 32. Then read the line and column data from the hidden image, convert to current scaling and row mode and transfer to your array, then draw the playfield.
Random Terrain wrote: Wed Aug 04, 2021 5:17 amThat tool also has the ability to copy and paste any part of the playfield. How would you even start making that feature with SpiderBasic?
For the user selection draw a rectangle in the desired appearance. To copy the selection use GrabImage() or just remember start an end position of the rectangle (column and row). To paste it, insert the data from the grabbed image into the playfield array or copy the array data from the stored position to the new postion, and draw.
Random Terrain wrote: Wed Aug 04, 2021 5:17 amThe last thing that stands out to me from that tool is the undo button. What kind of magic is that? How could you have an undo feature that can remember a single dot drawn or an ellipse or a pasted section?
No magic necessary. Well, you have to store somehow the steps the user made. I use to do such things with a Structured List. Whenever the user draws for example a pixel, first create a new list entry and store the existing values (position, colours, ...) before drawing. When it's not a pixel but an ellipse, store this information too, together with start and end position. Later, when „Undo“ was pressed, jump to the last list entry and perform drawing with the stored values. Then delete this list entry. That’s basically all. Remember to limit the size of your list to avoid running into memory problems.
User avatar
Random Terrain
Posts: 63
Joined: Fri Jul 09, 2021 9:48 pm
Location: USA
Contact:

Re: Would an ellipse, line, and box be possible?

Post by Random Terrain »

munfraid wrote: Wed Aug 04, 2021 10:25 am
Random Terrain wrote: Wed Aug 04, 2021 5:17 amThat tool is more advanced. It can do all kinds of things that may not be possible with SpiderBasic.
Everything in that tool can be done with SpiderBasic. In the end, both use the same web technologies. Some things are easier to achieve than others, of course.
Random Terrain wrote: Wed Aug 04, 2021 5:17 amI'd be interested in adding ellipse, line, and box buttons like that tool has, but I don't see how it can be done since we're not just drawing on a canvas. Everything has to be converted to arrays and it would have to be done with whatever resolution the user selects (32x11, 32x22, 23x44, 32x88, 32x176).
You’re right, the drawing has to be converted to the arrays. I would try to do the drawing onto a hidden image with unscaled pixels, in your case 176 x 32. Then read the line and column data from the hidden image, convert to current scaling and row mode and transfer to your array, then draw the playfield.
Random Terrain wrote: Wed Aug 04, 2021 5:17 amThat tool also has the ability to copy and paste any part of the playfield. How would you even start making that feature with SpiderBasic?
For the user selection draw a rectangle in the desired appearance. To copy the selection use GrabImage() or just remember start an end position of the rectangle (column and row). To paste it, insert the data from the grabbed image into the playfield array or copy the array data from the stored position to the new postion, and draw.
Random Terrain wrote: Wed Aug 04, 2021 5:17 amThe last thing that stands out to me from that tool is the undo button. What kind of magic is that? How could you have an undo feature that can remember a single dot drawn or an ellipse or a pasted section?
No magic necessary. Well, you have to store somehow the steps the user made. I use to do such things with a Structured List. Whenever the user draws for example a pixel, first create a new list entry and store the existing values (position, colours, ...) before drawing. When it's not a pixel but an ellipse, store this information too, together with start and end position. Later, when „Undo“ was pressed, jump to the last list entry and perform drawing with the stored values. Then delete this list entry. That’s basically all. Remember to limit the size of your list to avoid running into memory problems.
Thanks. I'll start experimenting.
Post Reply