Derma Sliding Switch

[MexicanR]

I'm trying to create a sliding on/off switch animation similar to the one you'd find in an iPhone's settings. I figure that you would use [img]http://wiki.garrysmod.com/favicon.ico[/img] [url=http://wiki.garrysmod.com/page/Global/Lerp]Lerp[/url] but I'm not quite sure how to implement it into my code; below you can find my DButton code.

local ynum = 0

local function Circle(x, y, radius, seg)
  local cir = {}
  table.insert(cir, {x = x, y = y, u = 0.5, v = 0.5 })

  for i = 0, seg do
    local a = math.rad((i / seg) * -360)
    table.insert(cir, {x = x + math.sin(a) * radius, y = y + math.cos(a) * radius, u = math.sin(a) / 2 + 0.5, v = math.cos(a) / 2 + 0.5})
  end

  local a = math.rad(0) -- This is needed for non absolute segment counts
  table.insert(cir, {x = x + math.sin(a) * radius, y = y + math.cos(a) * radius, u = math.sin(a) / 2 + 0.5, v = math.cos(a) / 2 + 0.5})
  surface.DrawPoly(cir)
end

local settingSlider = vgui.Create("DButton", DFrame)
settingSlider:SetPos(DFrame:GetWide() - 70, 126)
settingSlider:SetSize(50, 30)
settingSlider:SetText("")
settingSlider.IsOn = settingsTbl.setting1
settingSlider.Paint = function(s, w, h)
if s.IsOn then
draw.RoundedBox(15, 0, 0, w, h, Color(0, 100, 0, 255))
surface.SetDrawColor(Config.PrimaryColor)
draw.NoTexture()
Circle(w - 15, h - 15, 15, 360)
else
draw.RoundedBox(15, 0, 0, w, h, Color(100, 0, 0, 255))
surface.SetDrawColor(Config.PrimaryColor)
draw.NoTexture()
Circle(15, h - 15, 15, 360)
end
end

settingSlider.DoClick = function()
if settingSlider.IsOn then
settingSlider.IsOn = false
settingsTbl.setting1 = false
else
settingSlider.IsOn = true
settingsTbl.setting1 = true
end
end

[XP_CodesThings]

To use the Lerp method, first get a value between 0-1 depending on how far along the knob is on the slider. 0 is all the way to the left, 1 is all the way to the right. To find the midpoint of the knob circle, do...

Lerp( <value from 0-1>, minimum X, maximum X )

For instance, this code moves a circle back and forth across the screen over time.

var midpoint = Lerp(math.sin(RealTime()), 20, ScrW()-20)
surface.DrawCircle(midpoint, ScrH()/2, 20, Color(255,255,255))