How do I get the bB code window to update?

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:

How do I get the bB code window to update?

Post by Random Terrain »

If you click on the "Generate bB Code" button, a ScrollAreaGadget window pops up, but it only updates once at the beginning of the program and never updates after that. I adapted code from the NTSC table, so that's probably the problem.

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
User avatar
Peter
Posts: 1086
Joined: Mon Feb 24, 2014 10:17 pm
Location: 127.0.0.1:9080
Contact:

Re: How do I get the bB code window to update?

Post by Peter »

Regarding your first question:

bB_Procedure() returns the bBCode, so you have to change line 1083 in your code to :

Code: Select all

bB_CodeTable = bB_Procedure()
then remove line 1244:

Code: Select all

Global bB_CodeTable.s = bB_Procedure()
and insert:

Code: Select all

Global bB_CodeTable.s
at the top of your code.

Regarding your second question:

insert at line 1088 this one:

Code: Select all

! $(v_gid.div).css("user-select", "text");
P.S.: Overall, I see a lot of potential for improvement in your code. Maybe you could start by indenting the code to make it easier to read. You can do this by pressing <Ctrl> + <A> and then <Ctrl> + <I>. This will automatically indent the code by the SpiderBasic IDE.
User avatar
Random Terrain
Posts: 63
Joined: Fri Jul 09, 2021 9:48 pm
Location: USA
Contact:

Re: How do I get the bB code window to update?

Post by Random Terrain »

 
Thanks! That fixed it.

Peter wrote: Fri Jul 30, 2021 9:53 am P.S.: Overall, I see a lot of potential for improvement in your code. Maybe you could start by indenting the code to make it easier to read. You can do this by pressing <Ctrl> + <A> and then <Ctrl> + <I>. This will automatically indent the code by the SpiderBasic IDE.
 
I must be the only person on the planet that has a hard time reading indented code. If you put "indented code is not easier to read" into Google, there isn't even one result. For me it's like trying to read a whole page of centered text.

Image

Or trying to read code that is following the jagged lines of a polygraph:

Image

I get lost jerking my eyes back and forth all over the page trying to read indented code. The following excerpt from the page below explains what I'm talking about:

https://uxmovement.com/content/why-you- ... raph-text/
Left aligned text is easier to read than centered text for paragraphs. This is because when you center your text, the starting place of each line changes. This forces your users to work harder to find where each line begins to continue reading. Without a straight left edge, there is no consistent place where users can move their eyes to when they complete each line.
 
Whether it's code or paragraphs, I can read faster and it doesn't hurt my eyes as much if it's in a straight line down the left side and not spread out all over the place in a jagged fashion.
Post Reply