Canvas Mouse Pointer Drawing Question

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:

Canvas Mouse Pointer Drawing Question

Post by Random Terrain »

When drawing on the canvas, if I move the mouse pointer outside of the canvas area while the left mouse button is still pressed, then let go of the left mouse button and move the mouse pointer back over the canvas, it will draw as if the left mouse button is still held down. It will keep doing that until I left click within the canvas area.

Is there a way to force the canvas to make sure the left mouse button is still pressed before drawing? If not, is there at least a way to reset the left mouse button if the mouse pointer leaves the canvas area so it will no longer keep drawing when moving the mouse pointer back over the canvas area?


Thanks.
User avatar
Paul
Posts: 195
Joined: Wed Feb 26, 2014 6:46 pm
Location: Canada
Contact:

Re: Canvas Mouse Pointer Drawing Question

Post by Paul »

The best way to get help is to post some example code that you need help with or are having problems with.
If someone has no executable code they can simply copy/paste into the IDE to look at and test, you may be waiting quite a long time for help (unless someone in the forum is extremely bored and has absolutely nothing better to do)
User avatar
Random Terrain
Posts: 63
Joined: Fri Jul 09, 2021 9:48 pm
Location: USA
Contact:

Re: Canvas Mouse Pointer Drawing Question

Post by Random Terrain »

Paul wrote: Mon Jul 26, 2021 12:59 am The best way to get help is to post some example code that you need help with or are having problems with.
If someone has no executable code they can simply copy/paste into the IDE to look at and test, you may be waiting quite a long time for help (unless someone in the forum is extremely bored and has absolutely nothing better to do)
Thanks. It doesn't seem to be just the code I'm using. It happens here too:

https://www.spiderbasic.com/documentati ... et.sb.html

Code: Select all

;
; ------------------------------------------------------------
;
;   SpiderBasic - CanvasGadget example file
;
;    (c) Fantaisie Software
;
; ------------------------------------------------------------
;

Enumeration 10
  #IMAGE_Content  ; stores the previous CanvasGadget content while the mouse is down
  #IMAGE_Color
EndEnumeration

Enumeration
  #GADGET_Canvas
  #GADGET_Color 
  #GADGET_Brush
  #GADGET_Line
  #GADGET_Box
  #GADGET_Circle
  #GADGET_Clear 
EndEnumeration

Global CurrentColor, CurrentMode, StartX, StartY

; Draw the mouse action result depending on the currently selected mode and event type
;
Procedure DrawAction(x, y, EventType)

  If StartDrawing(CanvasOutput(#GADGET_Canvas))
    Select CurrentMode
    
      Case #GADGET_Brush
        If EventType = #PB_EventType_LeftButtonDown Or EventType = #PB_EventType_MouseMove
          Circle(x, y, 5, CurrentColor)
        EndIf
        
      Case #GADGET_Line
        DrawImage(ImageID(#IMAGE_Content), 0, 0)
        LineXY(StartX, StartY, x, y, CurrentColor)
      
      Case #GADGET_Box
        DrawImage(ImageID(#IMAGE_Content), 0, 0)
        Box(StartX, StartY, x-StartX, y-StartY, CurrentColor)
        
      Case #GADGET_Circle
        DrawImage(ImageID(#IMAGE_Content), 0, 0)
        
        If x > StartX
          rx = x - StartX
        Else
          rx = StartX - x
        EndIf
        
        If y > StartY
          ry = y - StartY
        Else
          ry = StartY - y
        EndIf
        
        If GetGadgetAttribute(#GADGET_Canvas, #PB_Canvas_Modifiers) & #PB_Canvas_Control
          ry = rx
        EndIf
        
        Ellipse(StartX, StartY, rx, ry, CurrentColor)
      
    EndSelect
    
    StopDrawing()
  EndIf

EndProcedure

CurrentMode  = #GADGET_Brush
CreateImage(#IMAGE_Color, 55, 35, 24)
CreateImage(#IMAGE_Content, 380, 380, 24)


Procedure GenerateRandomColor()
  CurrentColor = RGB(Random(255), Random(255), Random(255))
  If StartDrawing(ImageOutput(#IMAGE_Color))
    Box(0, 0, ImageWidth(#IMAGE_Color), ImageHeight(#IMAGE_Color), CurrentColor)
    StopDrawing()
  EndIf  
EndProcedure


Procedure ClearCanvas()
  If StartDrawing(CanvasOutput(#GADGET_Canvas))
    Box(0, 0, GadgetWidth(#GADGET_Canvas), GadgetHeight(#GADGET_Canvas), $FFFFFF)
    StopDrawing()
  EndIf
EndProcedure


Procedure GadgetEvent()

  Select EventGadget()
    Case #GADGET_Canvas
      X = GetGadgetAttribute(#GADGET_Canvas, #PB_Canvas_MouseX)
      Y = GetGadgetAttribute(#GADGET_Canvas, #PB_Canvas_MouseY)
      Type = EventType()
    
      Select EventType()
      
        Case #PB_EventType_LeftButtonDown
          ;
          ; This stores the current content of the CanvasGadget in #IMAGE_Content,
          ; so it can be re-drawn while the mouse moves
          ;
          If StartDrawing(ImageOutput(#IMAGE_Content))
            DrawImage(GetGadgetAttribute(#GADGET_Canvas, #PB_Canvas_Image), 0, 0)
            StopDrawing()
          EndIf
          
          StartX = X
          StartY = Y
          DrawAction(X, Y, EventType())
        
        Case #PB_EventType_LeftButtonUp
          DrawAction(X, Y, EventType())                        
        
        Case #PB_EventType_MouseMove
          If GetGadgetAttribute(#GADGET_Canvas, #PB_Canvas_Buttons) & #PB_Canvas_LeftButton
            DrawAction(X, Y, EventType())            
          EndIf
                  
      EndSelect
    
    Case #GADGET_Color
      GenerateRandomColor()
      SetGadgetAttribute(#GADGET_Color, #PB_Button_Image, ImageID(#IMAGE_Color))
      
    Case #GADGET_Brush, #GADGET_Line, #GADGET_Box, #GADGET_Circle
      EventGadget = EventGadget()
      For Gadget = #GADGET_Brush To #GADGET_Circle
        If Gadget = EventGadget
          SetGadgetState(Gadget, 1) 
        Else
          SetGadgetState(Gadget, 0) ; unset the state of all other gadgets
        EndIf
      Next Gadget          
      CurrentMode = EventGadget             
  
    Case #GADGET_Clear
      ClearCanvas()
            
  EndSelect
  
EndProcedure


If OpenWindow(0, 0, 0, 480, 400, "CanvasGadget", #PB_Window_TitleBar | #PB_Window_ScreenCentered)
  CanvasGadget(#GADGET_Canvas, 10, 10, 380, 380, #PB_Canvas_Border)
  ClearCanvas()
  
  GenerateRandomColor()
  ButtonImageGadget(#GADGET_Color, 400, 10, 70, 50, ImageID(#IMAGE_Color))
  
  ButtonGadget(#GADGET_Brush,  400, 100, 70, 25, "Brush",  #PB_Button_Toggle)
  ButtonGadget(#GADGET_Line,   400, 130, 70, 25, "Line",   #PB_Button_Toggle)
  ButtonGadget(#GADGET_Box,    400, 160, 70, 25, "Box",    #PB_Button_Toggle)
  ButtonGadget(#GADGET_Circle, 400, 190, 70, 25, "Circle", #PB_Button_Toggle)
    
  ButtonGadget(#GADGET_Clear,  400, 280, 70, 25, "Clear")
  
  SetGadgetState(#GADGET_Brush, 1)
  SetGadgetAttribute(#GADGET_Canvas, #PB_Canvas_Cursor, #PB_Cursor_Cross)
  
  BindEvent(#PB_Event_Gadget, @GadgetEvent())
  
  CompilerIf #PB_Compiler_OS <> #PB_OS_Web
    Repeat 
      Event = WaitWindowEvent() 
    Until Event = #PB_Event_CloseWindow  ; If the user has pressed on the window close button
  CompilerEndIf

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

Re: Canvas Mouse Pointer Drawing Question

Post by munfraid »

Random Terrain wrote: Sun Jul 25, 2021 10:09 pm [..] is there at least a way to reset the left mouse button if the mouse pointer leaves the canvas area so it will no longer keep drawing when moving the mouse pointer back over the canvas area?
Yes, catch the event #PB_EventType_MouseLeave. Here your code example using this method. I added seven lines (27, 33, 34, 114, 136, 137); each one with the comment ; ///// ADDED ///// at the end, so you can easily follow what was done.

Code: Select all

;
; ------------------------------------------------------------
;
;   SpiderBasic - CanvasGadget example file
;
;    (c) Fantaisie Software
;
; ------------------------------------------------------------
;

Enumeration 10
  #IMAGE_Content  ; stores the previous CanvasGadget content while the mouse is down
  #IMAGE_Color
EndEnumeration

Enumeration
  #GADGET_Canvas
  #GADGET_Color 
  #GADGET_Brush
  #GADGET_Line
  #GADGET_Box
  #GADGET_Circle
  #GADGET_Clear 
EndEnumeration

Global CurrentColor, CurrentMode, StartX, StartY
Global EnableDrawing = #False     ;///// ADDED /////

; Draw the mouse action result depending on the currently selected mode and event type
;
Procedure DrawAction(x, y, EventType)
  
  If EnableDrawing = #False   ;///// ADDED /////
    ProcedureReturn 0         ;///// ADDED /////
  EndIf                       ;///// ADDED /////

  If StartDrawing(CanvasOutput(#GADGET_Canvas))
    Select CurrentMode
    
      Case #GADGET_Brush
        If EventType = #PB_EventType_LeftButtonDown Or EventType = #PB_EventType_MouseMove
          Circle(x, y, 5, CurrentColor)
        EndIf
        
      Case #GADGET_Line
        DrawImage(ImageID(#IMAGE_Content), 0, 0)
        LineXY(StartX, StartY, x, y, CurrentColor)
      
      Case #GADGET_Box
        DrawImage(ImageID(#IMAGE_Content), 0, 0)
        Box(StartX, StartY, x-StartX, y-StartY, CurrentColor)
        
      Case #GADGET_Circle
        DrawImage(ImageID(#IMAGE_Content), 0, 0)
        
        If x > StartX
          rx = x - StartX
        Else
          rx = StartX - x
        EndIf
        
        If y > StartY
          ry = y - StartY
        Else
          ry = StartY - y
        EndIf
        
        If GetGadgetAttribute(#GADGET_Canvas, #PB_Canvas_Modifiers) & #PB_Canvas_Control
          ry = rx
        EndIf
        
        Ellipse(StartX, StartY, rx, ry, CurrentColor)
      
    EndSelect
    
    StopDrawing()
  EndIf

EndProcedure

CurrentMode  = #GADGET_Brush
CreateImage(#IMAGE_Color, 55, 35, 24)
CreateImage(#IMAGE_Content, 380, 380, 24)


Procedure GenerateRandomColor()
  CurrentColor = RGB(Random(255), Random(255), Random(255))
  If StartDrawing(ImageOutput(#IMAGE_Color))
    Box(0, 0, ImageWidth(#IMAGE_Color), ImageHeight(#IMAGE_Color), CurrentColor)
    StopDrawing()
  EndIf  
EndProcedure


Procedure ClearCanvas()
  If StartDrawing(CanvasOutput(#GADGET_Canvas))
    Box(0, 0, GadgetWidth(#GADGET_Canvas), GadgetHeight(#GADGET_Canvas), $FFFFFF)
    StopDrawing()
  EndIf
EndProcedure


Procedure GadgetEvent()

  Select EventGadget()
    Case #GADGET_Canvas
      X = GetGadgetAttribute(#GADGET_Canvas, #PB_Canvas_MouseX)
      Y = GetGadgetAttribute(#GADGET_Canvas, #PB_Canvas_MouseY)
      Type = EventType()
    
      Select EventType()
          
        Case #PB_EventType_LeftButtonDown
          EnableDrawing = #True   ;///// ADDED /////
          ;
          ; This stores the current content of the CanvasGadget in #IMAGE_Content,
          ; so it can be re-drawn while the mouse moves
          ;
          If StartDrawing(ImageOutput(#IMAGE_Content))
            DrawImage(GetGadgetAttribute(#GADGET_Canvas, #PB_Canvas_Image), 0, 0)
            StopDrawing()
          EndIf
          
          StartX = X
          StartY = Y
          DrawAction(X, Y, EventType())
        
        Case #PB_EventType_LeftButtonUp
          DrawAction(X, Y, EventType())                        
        
        Case #PB_EventType_MouseMove
          If GetGadgetAttribute(#GADGET_Canvas, #PB_Canvas_Buttons) & #PB_Canvas_LeftButton
            DrawAction(X, Y, EventType())            
          EndIf
          
        Case #PB_EventType_MouseLeave     ;///// ADDED /////
          EnableDrawing = #False          ;///// ADDED /////
                  
      EndSelect
    
    Case #GADGET_Color
      GenerateRandomColor()
      SetGadgetAttribute(#GADGET_Color, #PB_Button_Image, ImageID(#IMAGE_Color))
      
    Case #GADGET_Brush, #GADGET_Line, #GADGET_Box, #GADGET_Circle
      EventGadget = EventGadget()
      For Gadget = #GADGET_Brush To #GADGET_Circle
        If Gadget = EventGadget
          SetGadgetState(Gadget, 1) 
        Else
          SetGadgetState(Gadget, 0) ; unset the state of all other gadgets
        EndIf
      Next Gadget          
      CurrentMode = EventGadget             
  
    Case #GADGET_Clear
      ClearCanvas()
            
  EndSelect
  
EndProcedure


If OpenWindow(0, 0, 0, 480, 400, "CanvasGadget", #PB_Window_TitleBar | #PB_Window_ScreenCentered)
  CanvasGadget(#GADGET_Canvas, 10, 10, 380, 380, #PB_Canvas_Border)
  ClearCanvas()
  
  GenerateRandomColor()
  ButtonImageGadget(#GADGET_Color, 400, 10, 70, 50, ImageID(#IMAGE_Color))
  
  ButtonGadget(#GADGET_Brush,  400, 100, 70, 25, "Brush",  #PB_Button_Toggle)
  ButtonGadget(#GADGET_Line,   400, 130, 70, 25, "Line",   #PB_Button_Toggle)
  ButtonGadget(#GADGET_Box,    400, 160, 70, 25, "Box",    #PB_Button_Toggle)
  ButtonGadget(#GADGET_Circle, 400, 190, 70, 25, "Circle", #PB_Button_Toggle)
    
  ButtonGadget(#GADGET_Clear,  400, 280, 70, 25, "Clear")
  
  SetGadgetState(#GADGET_Brush, 1)
  SetGadgetAttribute(#GADGET_Canvas, #PB_Canvas_Cursor, #PB_Cursor_Cross)
  
  BindEvent(#PB_Event_Gadget, @GadgetEvent())
  
  CompilerIf #PB_Compiler_OS <> #PB_OS_Web
    Repeat 
      Event = WaitWindowEvent() 
    Until Event = #PB_Event_CloseWindow  ; If the user has pressed on the window close button
  CompilerEndIf

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

Re: Canvas Mouse Pointer Drawing Question

Post by Random Terrain »

munfraid wrote: Mon Jul 26, 2021 9:54 am Yes, catch the event #PB_EventType_MouseLeave. Here your code example using this method. I added seven lines (27, 33, 34, 114, 136, 137); each one with the comment ; ///// ADDED ///// at the end, so you can easily follow what was done.
Thanks. After I'm more awake, I'll study the code and use #PB_EventType_MouseLeave in the code you posted in another thread. I've made many adjustments to it. Before the day is over, I hope to have a working code output window. When I'm done, I'll post the latest code in that thread.
User avatar
Random Terrain
Posts: 63
Joined: Fri Jul 09, 2021 9:48 pm
Location: USA
Contact:

Re: Canvas Mouse Pointer Drawing Question

Post by Random Terrain »

munfraid wrote: Mon Jul 26, 2021 9:54 am
Yes, catch the event #PB_EventType_MouseLeave. Here your code example using this method. I added seven lines (27, 33, 34, 114, 136, 137); each one with the comment ; ///// ADDED ///// at the end, so you can easily follow what was done.
I thought I'd be able to insert the code at the correct spots in the other program you made, but it seems I'm not smart enough yet. Here's the clean code before the many attempts to make it work.

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_24d_1559t"



;***********************************************************************
;***********************************************************************
;
;- 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_Color_Table
#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>. 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.

;```````````````````````````````````````````````````````````````````````
;  Arrays.
;
Global Dim _Playfield_Pixels(_32_Columns, _176_Rows)
Global Dim _Playfield_Foreground_Colors(_176_Rows)
Global Dim _Playfield_Background_Colors(_176_Rows)



;***********************************************************************
;
;  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




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




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

;```````````````````````````````````````````````````````````````````````
;  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

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

EndProcedure




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

Select EventTimer()

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)

Protected _Selected_Color = Val(ReplaceString(Color.s, "#", "$"))
_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
SetGadgetState(#Button_Paint_FG_Row, 1)  ; Puts a check mark on the Paint FG button.
_Button_Mode = #Button_Paint_FG_Row      ; Selects the Paint FG button.

;```````````````````````````````````````````````````````````````````````
;  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));


;,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
;```````````````````````````````````````````````````````````````````````
;  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
SetGadgetState(#Button_Paint_BG_Row, 1)  ; Puts a check mark on the Paint BG button.
_Button_Mode = #Button_Paint_BG_Row      ; Selects the Paint BG button.

;```````````````````````````````````````````````````````````````````````
;  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));

EndSelect

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

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


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


;,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
;```````````````````````````````````````````````````````````````````````
;
;  Playfield check.
;
Case #Canvas_Playfield

If EventType() = #PB_EventType_LeftButtonDown Or (EventType() = #PB_EventType_MouseMove And GetGadgetAttribute(#Canvas_Playfield, #PB_Canvas_Buttons) & #PB_Canvas_LeftButton) 

If 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
_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))

;```````````````````````````````````````````````````````````````````````
;  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))

;```````````````````````````````````````````````````````````````````````
;  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

;```````````````````````````````````````````````````````````````````````
;  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

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()
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
; set drawing mode
For _Loop = #Button_Draw To #Button_Paint_BG_Row
SetGadgetState(_Loop, 0)
Next
SetGadgetState(_Which_Gadget, 1)  ; Puts a check mark on the correct button.
_Button_Mode = _Which_Gadget      ; Selects the correct button.


;,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
;```````````````````````````````````````````````````````````````````````
;- 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_Color_Table, 0, 0, WindowWidth(#Window_NTSC_Color_Chart), WindowHeight(#Window_NTSC_Color_Chart))

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

;```````````````````````````````````````````````````````````````````````
;  Inline JavaScript 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()


;,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
;```````````````````````````````````````````````````````````````````````
;
;  FUTURE CODE: This 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)-300, 
300, 500, "bB Code");, #PB_Window_BorderLess)

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)

;```````````````````````````````````````````````````````````````````````
;  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, 80, 30,
"Draw", #PB_Button_Toggle )

;```````````````````````````````````````````````````````````````````````
;  BUTTON: Erase playfield pixel.
;
ButtonGadget(#Button_Erase, GadgetX(#Text_for_Row_Mode)+85, GadgetY(#Text_for_Editing_Mode)+fontUiNormalSize+_Spacer, 80, 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, 100, 30,
"Paint FG Row", #PB_Button_Toggle )

;```````````````````````````````````````````````````````````````````````
;  BUTTON: Paint BG row.
;
ButtonGadget(#Button_Paint_BG_Row, GadgetX(#Button_Paint_FG_Row)+105, GadgetY(#Text_for_Editing_Mode)+fontUiNormalSize+_Spacer+35, 100, 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())



;***********************************************************************
;***********************************************************************
;
;- 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
If you have time, can you put the ///// ADDED ///// code where it needs to go? I've added comments to almost every inch of the program, so you'd think I'd be able to figure it out, but no.


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

Re: Canvas Mouse Pointer Drawing Question

Post by munfraid »

Random Terrain wrote: Wed Jul 28, 2021 5:50 pmIf you have time, can you put the ///// ADDED ///// code where it needs to go?
It works slightly different here because the programm flow ist different from the other code. I put the requiered lines into your code, again with the comment ADDED. Check the lines 109, 503-508 and the CHANGED line 512.

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_24d_1559t"



;***********************************************************************
;***********************************************************************
;
;- 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_Color_Table
#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>. 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 /////

;```````````````````````````````````````````````````````````````````````
;  Arrays.
;
Global Dim _Playfield_Pixels(_32_Columns, _176_Rows)
Global Dim _Playfield_Foreground_Colors(_176_Rows)
Global Dim _Playfield_Background_Colors(_176_Rows)



;***********************************************************************
;
;  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




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




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

;```````````````````````````````````````````````````````````````````````
;  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

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

EndProcedure




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

Select EventTimer()

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)

Protected _Selected_Color = Val(ReplaceString(Color.s, "#", "$"))
_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
SetGadgetState(#Button_Paint_FG_Row, 1)  ; Puts a check mark on the Paint FG button.
_Button_Mode = #Button_Paint_FG_Row      ; Selects the Paint FG button.

;```````````````````````````````````````````````````````````````````````
;  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));


;,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
;```````````````````````````````````````````````````````````````````````
;  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
SetGadgetState(#Button_Paint_BG_Row, 1)  ; Puts a check mark on the Paint BG button.
_Button_Mode = #Button_Paint_BG_Row      ; Selects the Paint BG button.

;```````````````````````````````````````````````````````````````````````
;  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));

EndSelect

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

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


;***********************************************************************
;
;  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                             ;///// ADDED /////

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))

;```````````````````````````````````````````````````````````````````````
;  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))

;```````````````````````````````````````````````````````````````````````
;  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

;```````````````````````````````````````````````````````````````````````
;  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

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()
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
; set drawing mode
For _Loop = #Button_Draw To #Button_Paint_BG_Row
SetGadgetState(_Loop, 0)
Next
SetGadgetState(_Which_Gadget, 1)  ; Puts a check mark on the correct button.
_Button_Mode = _Which_Gadget      ; Selects the correct button.


;,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
;```````````````````````````````````````````````````````````````````````
;- 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_Color_Table, 0, 0, WindowWidth(#Window_NTSC_Color_Chart), WindowHeight(#Window_NTSC_Color_Chart))

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

;```````````````````````````````````````````````````````````````````````
;  Inline JavaScript 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()


;,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
;```````````````````````````````````````````````````````````````````````
;
;  FUTURE CODE: This 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)-300, 
300, 500, "bB Code");, #PB_Window_BorderLess)

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)

;```````````````````````````````````````````````````````````````````````
;  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, 80, 30,
"Draw", #PB_Button_Toggle )

;```````````````````````````````````````````````````````````````````````
;  BUTTON: Erase playfield pixel.
;
ButtonGadget(#Button_Erase, GadgetX(#Text_for_Row_Mode)+85, GadgetY(#Text_for_Editing_Mode)+fontUiNormalSize+_Spacer, 80, 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, 100, 30,
"Paint FG Row", #PB_Button_Toggle )

;```````````````````````````````````````````````````````````````````````
;  BUTTON: Paint BG row.
;
ButtonGadget(#Button_Paint_BG_Row, GadgetX(#Button_Paint_FG_Row)+105, GadgetY(#Text_for_Editing_Mode)+fontUiNormalSize+_Spacer+35, 100, 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())



;***********************************************************************
;***********************************************************************
;
;- 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
Random Terrain
Posts: 63
Joined: Fri Jul 09, 2021 9:48 pm
Location: USA
Contact:

Re: Canvas Mouse Pointer Drawing Question

Post by Random Terrain »

munfraid wrote: Thu Jul 29, 2021 8:21 am It works slightly different here because the programm flow ist different from the other code. I put the requiered lines into your code, again with the comment ADDED. Check the lines 109, 503-508 and the CHANGED line 512.
Thanks. No way I could do that on my own yet.
Post Reply