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.
Canvas Mouse Pointer Drawing Question
- Random Terrain
- Posts: 63
- Joined: Fri Jul 09, 2021 9:48 pm
- Location: USA
- Contact:
Re: Canvas Mouse Pointer Drawing Question
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)
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)
- Random Terrain
- Posts: 63
- Joined: Fri Jul 09, 2021 9:48 pm
- Location: USA
- Contact:
Re: Canvas Mouse Pointer Drawing Question
Thanks. It doesn't seem to be just the code I'm using. It happens here too: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)
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
Re: Canvas Mouse Pointer Drawing Question
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.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?
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
- Random Terrain
- Posts: 63
- Joined: Fri Jul 09, 2021 9:48 pm
- Location: USA
- Contact:
Re: Canvas Mouse Pointer Drawing Question
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.
- Random Terrain
- Posts: 63
- Joined: Fri Jul 09, 2021 9:48 pm
- Location: USA
- Contact:
Re: Canvas Mouse Pointer Drawing Question
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
Thanks.
Re: Canvas Mouse Pointer Drawing Question
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.Random Terrain wrote: ↑Wed Jul 28, 2021 5:50 pmIf you have time, can you put the ///// ADDED ///// code where it needs to go?
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
- Random Terrain
- Posts: 63
- Joined: Fri Jul 09, 2021 9:48 pm
- Location: USA
- Contact:
Re: Canvas Mouse Pointer Drawing Question
Thanks. No way I could do that on my own yet.