How to move my slash commands to the options panel?

[briskman3000]

So my brain hurts from trying to figure this out. I tried to look at some of the other addons that I have installed, but they all seem to use libraries for this, which I don't use or really understand.

So I currently use a set of slash commands to handle the only configurable portion of my addon, the color in which the text is displayed for the user.

Currently this is how I accomplish this:

--Set color variables default values to avoid first load errors 
cvred = 1
cvgreen = .996
cvblue = .545
cvalpha = 1
 
--Hard coded color options table 
local colorTable = {
    ["blue"] = {0, 0, 1},
    ["green"] = {0, 1, 0},
    ["red"] = {1, 0, 0},
    ["black"] = {0, 0, 0},
    ["white"] = {1, 1, 1},
    ["lightblue"] = {0, 1, 1},
    ["lightred"] = {1, .5, .5},
    ["pink"] = {1, .5, 1},
    ["purple"] = {.7, 0, 1},
    ["orange"] = {1, 0.5, 1},
    ["default"] = {1, .996, .545}
}
 
--Color Picker
function ShowColorPicker(cvred, cvgreen, cvblue, cvalpha, changedCallback)
 ColorPickerFrame:SetColorRGB(cvred, cvgreen, cvblue);
 ColorPickerFrame.hasOpacity, ColorPickerFrame.opacity = (cvalpha ~= nil), cvalpha;
 ColorPickerFrame.previousValues = {cvred, cvgreen, cvblue, cvalpha};
 ColorPickerFrame.func, ColorPickerFrame.opacityFunc, ColorPickerFrame.cancelFunc =  changedCallback, changedCallback, changedCallback;
 ColorPickerFrame:Hide();
 ColorPickerFrame:Show(); 
 end
 
local function myColorCallback(restore)
 local newR, newG, newB, newA;
 if restore then
  newR, newG, newB, newA = unpack(restore);  
 else
  newA, newR, newG, newB = OpacitySliderFrame:GetValue(), ColorPickerFrame:GetColorRGB();  
 end 
  cvred, cvgreen, cvblue, cvalpha = newR, newG, newB, newA;
end
 
--Slash Command to change the color of the output 
SLASH_CONVERTRATINGS1, SLASH_CONVERTRATINGS2 = '/convertratings', '/cvr';
function SlashCmdList.CONVERTRATINGS(msg, editBox)
    --Grab the first input word as the command and the rest of the input as a user variable 
    local command, rest = msg:match("^(%S*)%s*(.-)$");
    --Hard coded color options parsing 
    
    if (colorTable[string.lower(command)]) then
        cvred, cvgreen, cvblue = unpack(colorTable[string.lower(command)]);
        print("Convert Ratings output color set to "..string.lower(command));
    elseif string.lower(command) == 'custom' and rest == "" then
        ShowColorPicker(cvred, cvgreen, cvblue, nil, myColorCallback);
    else
        --when no valid args entered, output this stuff 
        print("Convert Ratings: Valid color options are red, green, blue, black, white, lightblue, lightred, pink, purple, orange or custom")
        print("Convert Ratings: The custom option will bring up the Color Picker for you to choose a color.")
        print("Convert Ratings: To reset to the default color, use /convertratings default")
    end
end

I figured the first thing I would try to get working is adding a button to the options panel, which when you click on it, it calls my already defined color picker functions.

--Create a Frame to add to the default options panel
local cvrpanel = CreateFrame("Frame")
cvrpanel.name = "Convert Ratings"
 
--Options Panel Title
local cvropttitle = cvrpanel:CreateFontString("ARTWORK", nil, "GameFontNormalLarge")
cvropttitle:SetPoint("TOP")
cvropttitle:SetText("Convert Ratings")
 
--Add a button to open the custom color picker
local cvrbutton = CreateFrame("Button", nil, cvrpanel, "UIPanelButtonTemplate")
cvrbutton:SetPoint("TOPLEFT", cvrpanel, 0, -40)
cvrbutton:SetText("Custom Color")
cvrbutton:SetWidth(150)
cvrbutton:HookScript("OnClick", ShowColorPicker)
    
--Add our panel to the options frame    
InterfaceOptions_AddCategory(cvrpanel)

This successfully adds a new panel to the ingame options window with the desired title displayed and the clickable button. However, when I actually click on the button, it throws an error:

5x ConvertRatings/ConvertRatings.lua:27: bad argument #1 to 'SetColorRGB' (Usage: self:SetColorRGB(rgb))
[string "=[C]"]: in function `SetColorRGB'
[string "@ConvertRatings/ConvertRatings.lua"]:27: in function <ConvertRatings/ConvertRatings.lua:26>

Locals:
(*temporary) = ColorPickerFrame {
 0 = <userdata>
 Center = Texture {
 }
 PixelSnapDisabled = true
 TopLeftCorner = Texture {
 }
 OnBackdropLoaded = <function> defined @SharedXML/Backdrop.lua:152
 Border = Frame {
 }
 BottomEdge = Texture {
 }
 GetBackdropColor = <function> defined @SharedXML/Backdrop.lua:390
 SetupTextureCoordinates = <function> defined @SharedXML/Backdrop.lua:214
 OnBackdropSizeChanged = <function> defined @SharedXML/Backdrop.lua:182
 HasBackdropInfo = <function> defined @SharedXML/Backdrop.lua:278
 SetBackdropBorderColor = <function> defined @SharedXML/Backdrop.lua:422
 RightEdge = Texture {
 }
 BottomRightCorner = Texture {
 }
 BottomLeftCorner = Texture {
 }
 GetEdgeSize = <function> defined @SharedXML/Backdrop.lua:188
 template = "Transparent"
 TopRightCorner = Texture {
 }
 TopEdge = Texture {
 }
 ApplyBackdrop = <function> defined @SharedXML/Backdrop.lua:294
 SetBackdrop = <function> defined @SharedXML/Backdrop.lua:329
 ClearBackdrop = <function> defined @SharedXML/Backdrop.lua:282
 backdropInfo = <table> {
 }
 GetBackdropBorderColor = <function> defined @SharedXML/Backdrop.lua:409
 GetBackdrop = <function> defined @SharedXML/Backdrop.lua:347
 SetBorderBlendMode = <function> defined @SharedXML/Backdrop.lua:266
 SetupPieceVisuals = <function> defined @SharedXML/Backdrop.lua:246
 SetBackdropColor = <function> defined @SharedXML/Backdrop.lua:399
 LeftEdge = Texture {
 }
 Header = Frame {
 }
}
(*temporary) = Button {
 SetTextToFit = <function> defined @SharedXML/SecureUIPanelTemplates.lua:440
 Right = Texture {
 }
 Left = Texture {
 }
 fitTextWidthPadding = 40
 FitToText = <function> defined @SharedXML/SecureUIPanelTemplates.lua:445
 Text = TopText {
 }
 0 = <userdata>
 Middle = Texture {
 }
 fitTextCanWidthDecrease = true
}
(*temporary) = "LeftButton"
(*temporary) = false

So my next though would be that I needed to change the hookscript line to:

cvrbutton:HookScript("OnClick", ShowColorPicker(cvred, cvgreen, cvblue, nil, myColorCallback))

but that just throws a different error when you load in:

2x ConvertRatings/ConvertRatings.lua:79: Usage: Button:HookScript("frameScriptTypeName", function[, bindingType])
[string "=[C]"]: in function `HookScript'
[string "@ConvertRatings/ConvertRatings.lua"]:79: in main chunk

Locals:
(*temporary) = Button {
 SetTextToFit = <function> defined @SharedXML/SecureUIPanelTemplates.lua:440
 Right = Texture {
 }
 Left = Texture {
 }
 fitTextWidthPadding = 40
 FitToText = <function> defined @SharedXML/SecureUIPanelTemplates.lua:445
 Text = TopText {
 }
 0 = <userdata>
 Middle = Texture {
 }
 fitTextCanWidthDecrease = true
}
(*temporary) = "OnClick"

My next thought was maybe I should change it from HookScript, to SetScript but just gave me the same errors referencing SetScript instead of HookScript.

What probably glaring issue am I not seeing here? Why does changing it from a slash command to a button press fuck it all up?