Question #1
How do I get that ScrollAreaGadget window to update every time the "Generate bB Code" button is clicked?
Question #2
How can I make the text inside of the ScrollAreaGadget window selectable? The user will need to copy and paste the code. I searched for what seemed like an hour and can't find anything about highlighting or selecting text.
Thanks.
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_07m_30d_0408t"
;***********************************************************************
;***********************************************************************
;
;- 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
#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 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>." + "<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=8183#p8183'>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 = 32 ; 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 ; 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 ; ///// ADDED /////
Global _Current_FG.s ; Current foreground Atari color.
Global _Current_BG.s ; Current background Atari color.
Global _bB_Rows = 88 ; Default rows for the bB arrays.
Global _Row ; Used for loops.
Global _Column ; Used for loops.
;```````````````````````````````````````````````````````````````````````
; Arrays.
;
Global Dim _Playfield_Pixels(_32_Columns, _176_Rows)
Global Dim _Playfield_Foreground_Colors(_176_Rows)
Global Dim _Playfield_Background_Colors(_176_Rows)
Global Dim _bB_playfield.s(32, 176)
Global Dim _bB_pfcolors.s(176)
Global Dim _bB_bkcolors.s(176)
;***********************************************************************
;
; Puts the starting default colors into the foreground and background.
;
For _Loop = 0 To _176_Rows-1
_Playfield_Foreground_Colors(_Loop) = colorFG
_Playfield_Background_Colors(_Loop) = colorBG
Next
;```````````````````````````````````````````````````````````````````````
; Fills the bB playfield array with dots.
;
For _Row = 0 To _bB_Rows-1
For _Column = 0 To 31
_bB_playfield(_Column, _Row) = "."
Next
Next
;```````````````````````````````````````````````````````````````````````
; Fills the bB pfcolors array with black.
;
For _Row = 0 To _bB_Rows-1
_bB_pfcolors(_Row) = "$00"
Next
;```````````````````````````````````````````````````````````````````````
; Fills the bB bkcolors array with black.
;
For _Row = 0 To _bB_Rows-1
_bB_bkcolors(_Row) = "$00"
Next
;***********************************************************************
;***********************************************************************
;
;- PROCEDURES START HERE
; (Similar To subroutines in older BASIC languages.)
;
;***********************************************************************
;***********************************************************************
;***********************************************************************
;***********************************************************************
;
;- CLEAR PLAYFIELD
;
Procedure ClearPlayfield()
Protected _Column
Protected _Row
;```````````````````````````````````````````````````````````````````````
; Clears the arrays.
;
Dim _Playfield_Pixels(_32_Columns, _176_Rows)
Dim _Playfield_Foreground_Colors(_176_Rows)
Dim _Playfield_Background_Colors(_176_Rows)
;```````````````````````````````````````````````````````````````````````
; Clears the playfield canvas.
;
StartDrawing(CanvasOutput(#Canvas_Playfield))
Box(0, 0, _32_Columns*_Column_Scale, _176_Rows*_Row_Scale, #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 arrays.
;
For _Loop = 0 To _176_Rows-1
_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-1
For _Column = 0 To 31
_bB_playfield(_Column, _Row) = "."
Next
Next
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 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>"
bBCode + "<br>"
bBCode + " playfield:"
bBCode + "<br>"
For _Row = 0 To _bB_Rows-1
bBCode + " "
For _Column = 0 To 31
bBCode + _bB_playfield(_Column, _Row)
Next
bBCode + "<br>"
Next
bBCode + "End"
bBCode + "<br><br><br>"
bBCode + " pfcolors:"
bBCode + "<br>"
For _Row = 1 To _bB_Rows-1
bBCode + " "
bBCode + _bB_pfcolors(_Row)
bBCode + "<br>"
Next
bBCode + "End"
bBCode + "<br><br><br>"
bBCode + " bkcolors:"
bBCode + "<br>"
For _Row = 1 To _bB_Rows-1
bBCode + " "
bBCode + _bB_bkcolors(_Row)
bBCode + "<br>"
Next
bBCode + "End"
bBCode + "<br><br><br>"
bBCode + "__Main_Loop"
bBCode + "<br><br><br>"
bBCode + " ;***************************************************************"
bBCode + "<br>"
bBCode + " ;"
bBCode + "<br>"
Select _bB_Rows
Case 176
bBCode + " ; 176 rows that are 1 scanline high except the top and bottom"
bBCode + "<br>"
bBCode + " ; rows (which seem to be 2 scanlines high). All of the colors"
bBCode + "<br>"
bBCode + " ; seem to be 2 scanlines high."
bBCode + "<br>"
bBCode + " ;"
bBCode + "<br>"
bBCode + " DF6FRACINC = 255 ; Background colors."
bBCode + "<br>"
bBCode + " DF4FRACINC = 255 ; Playfield colors."
bBCode + "<br><br>"
bBCode + " DF0FRACINC = 255 ; Column 0."
bBCode + "<br>"
bBCode + " DF1FRACINC = 255 ; Column 1."
bBCode + "<br>"
bBCode + " DF2FRACINC = 255 ; Column 2."
bBCode + "<br>"
bBCode + " DF3FRACINC = 255 ; Column 3."
Case 88
bBCode + " ; 88 rows that are 2 scanlines high."
bBCode + "<br>"
bBCode + " ;"
bBCode + "<br>"
bBCode + " DF6FRACINC = 255 ; Background colors."
bBCode + "<br>"
bBCode + " DF4FRACINC = 255 ; Playfield colors."
bBCode + "<br><br>"
bBCode + " DF0FRACINC = 128 ; Column 0."
bBCode + "<br>"
bBCode + " DF1FRACINC = 128 ; Column 1."
bBCode + "<br>"
bBCode + " DF2FRACINC = 128 ; Column 2."
bBCode + "<br>"
bBCode + " DF3FRACINC = 128 ; Column 3."
Case 44
bBCode + " ; 44 rows that are 4 scanlines high."
bBCode + "<br>"
bBCode + " ;"
bBCode + "<br>"
bBCode + " DF6FRACINC = 128 ; Background colors."
bBCode + "<br>"
bBCode + " DF4FRACINC = 128 ; Playfield colors."
bBCode + "<br><br>"
bBCode + " DF0FRACINC = 64 ; Column 0."
bBCode + "<br>"
bBCode + " DF1FRACINC = 64 ; Column 1."
bBCode + "<br>"
bBCode + " DF2FRACINC = 64 ; Column 2."
bBCode + "<br>"
bBCode + " DF3FRACINC = 64 ; Column 3."
Case 22
bBCode + " ; 22 rows that are 8 scanlines high."
bBCode + "<br>"
bBCode + " ;"
bBCode + "<br>"
bBCode + " DF6FRACINC = 64 ; Background colors."
bBCode + " DF4FRACINC = 64 ; Playfield colors."
bBCode + "<br><br>"
bBCode + " DF0FRACINC = 32 ; Column 0."
bBCode + "<br>"
bBCode + " DF1FRACINC = 32 ; Column 1."
bBCode + "<br>"
bBCode + " DF2FRACINC = 32 ; Column 2."
bBCode + "<br>"
bBCode + " DF3FRACINC = 32 ; Column 3."
Case 11
bBCode + " ; 11 rows that are 16 scanlines high."
bBCode + "<br>"
bBCode + " ;"
bBCode + "<br>"
bBCode + " DF6FRACINC = 32 ; Background colors."
bBCode + "<br>"
bBCode + " DF4FRACINC = 32 ; Playfield colors."
bBCode + "<br><br>"
bBCode + " DF0FRACINC = 16 ; Column 0."
bBCode + "<br>"
bBCode + " DF1FRACINC = 16 ; Column 1."
bBCode + "<br>"
bBCode + " DF2FRACINC = 16 ; Column 2."
bBCode + "<br>"
bBCode + " DF3FRACINC = 16 ; Column 3."
EndSelect
bBCode + "<br><br><br>"
bBCode + " ;***************************************************************"
bBCode + "<br>"
bBCode + " ;"
bBCode + "<br>"
bBCode + " ; Displays the screen."
bBCode + "<br>"
bBCode + " ;"
bBCode + "<br>"
bBCode + " drawscreen"
bBCode + "<br><br><br>"
bBCode + " goto __Main_Loop"
bBCode + "</pre>"
ProcedureReturn bBCode
EndProcedure
;***********************************************************************
;***********************************************************************
;
;- 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
Protected _Ctrl_Key_Memory
;***********************************************************************
;
; 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
;,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
;```````````````````````````````````````````````````````````````````````
;
; Playfield check.
;
Case #Canvas_Playfield
Select type ; ///// ADDED /////
Case #PB_EventType_LeftButtonDown ; ///// ADDED /////
EnableDrawing = #True ; ///// ADDED /////
Case #PB_EventType_MouseLeave ; ///// ADDED /////
EnableDrawing = #False ; ///// ADDED /////
EndSelect
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)) ; ///// CHANGED /////
;```````````````````````````````````````````````````````````````````````
; 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
_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, y) = "X"
;```````````````````````````````````````````````````````````````````````
; Erase.
;
ElseIf _Button_Mode = #Button_Erase
_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, y) = "."
;```````````````````````````````````````````````````````````````````````
; Paint Foreground Row.
;
ElseIf _Button_Mode = #Button_Paint_FG_Row
_Playfield_Foreground_Colors(y*_Row_Height) = colorFG
For _Loop = 0 To _32_Columns-1
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
Next
_bB_pfcolors(y) = _Current_FG
;```````````````````````````````````````````````````````````````````````
; Paint Background Row.
;
ElseIf _Button_Mode = #Button_Paint_BG_Row
_Playfield_Background_Colors(y*_Row_Height) = colorBG
Box(0, y*_Row_Height*_Row_Scale, _32_Columns*_Column_Scale, _Row_Height*_Row_Scale, colorBG)
For _Loop = 0 To _32_Columns-1
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
Next
_bB_bkcolors(y) = _Current_BG
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
ClearPlayfield()
Select _Row_Height
Case 1
Dim _bB_playfield.s(32, 176)
Dim _bB_pfcolors.s(176)
Dim _bB_bkcolors.s(176)
_bB_Rows = 176
Case 2
Dim _bB_playfield.s(32, 88)
Dim _bB_pfcolors.s(88)
Dim _bB_bkcolors.s(88)
_bB_Rows = 88
Case 4
Dim _bB_playfield.s(32, 44)
Dim _bB_pfcolors.s(44)
Dim _bB_bkcolors.s(44)
_bB_Rows = 44
Case 8
Dim _bB_playfield.s(32, 22)
Dim _bB_pfcolors.s(22)
Dim _bB_bkcolors.s(22)
_bB_Rows = 22
Case 16
Dim _bB_playfield.s(32, 11)
Dim _bB_pfcolors.s(11)
Dim _bB_bkcolors.s(11)
_bB_Rows = 11
EndSelect
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()
;,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
;```````````````````````````````````````````````````````````````````````
;
; Once this is working, it will convert what is seen on the canvas
; into code that batari Basic users will be able to use in their
; programs.
;
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_Procedure()
GID = GadgetID(#bB_Gadget)
! $(v_gid.div).empty();
! $(v_gid.div).append($(v_bb_codetable));
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)
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,
_32_Columns*_Column_Scale, _176_Rows*_Row_Scale, #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()
Global bB_CodeTable.s = bB_Procedure()
initUI()
BindEvent(#PB_Event_Gadget, @GadgetEvents())
BindEvent(#PB_Event_CloseWindow, @WindowEvents())
BindEvent(#PB_Event_Timer, @TimerEvents())
BindEvent(#PB_Event_CloseWindow, @CloseWindowEvent())
;***********************************************************************
;***********************************************************************
;
;- 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