Create skin other than buttons
This commit is contained in:
parent
c042ced031
commit
67af92b047
195
loveframes/skins/Clock/skin.lua
Normal file
195
loveframes/skins/Clock/skin.lua
Normal file
@ -0,0 +1,195 @@
|
||||
-- Module function
|
||||
return function(loveframes)
|
||||
|
||||
local skin = {}
|
||||
|
||||
skin.name = "Clock"
|
||||
skin.author = "Brandon Dyck"
|
||||
skin.version = "0.1"
|
||||
|
||||
skin.directives = {}
|
||||
|
||||
skin.controls = {
|
||||
small_font = love.graphics.newFont(11),
|
||||
border_width = 2,
|
||||
border_color = {0.56, 0.56, 1},
|
||||
body_color = {0.85, 0.85, 0.85},
|
||||
text_color = {0, 0, 0},
|
||||
padding = 3,
|
||||
}
|
||||
skin.controls.button_text_font = skin.controls.small_font
|
||||
skin.controls.panel_body_color = skin.controls.body_color
|
||||
skin.controls.textinput_body_color = {1,1,1}
|
||||
skin.controls.textinput_indicator_width = 2
|
||||
skin.controls.textinput_text_color = skin.controls.text_color
|
||||
skin.controls.textinput_highlight_color = {0, 0, 0.6}
|
||||
skin.controls.textinput_selected_text_color = {1, 1, 1}
|
||||
|
||||
local function printOnPixel(text, x, y)
|
||||
love.graphics.print(text, math.floor(x+0.5), math.floor(y+0.5))
|
||||
end
|
||||
|
||||
local function outlinedRectangle(x, y, width, height)
|
||||
love.graphics.push("all")
|
||||
local line = skin.controls.border_width
|
||||
local halfline = line / 2
|
||||
love.graphics.setColor(skin.controls.border_color)
|
||||
love.graphics.setLineWidth(skin.controls.border_width)
|
||||
love.graphics.setLineJoin("miter")
|
||||
love.graphics.setLineStyle("smooth")
|
||||
love.graphics.rectangle("line", x + halfline, y + halfline, width - line, height - line)
|
||||
love.graphics.pop()
|
||||
end
|
||||
|
||||
function skin.button(object)
|
||||
|
||||
end
|
||||
|
||||
function skin.numberbox(object) end
|
||||
|
||||
function skin.textinput(object)
|
||||
-- I don't use multiline text, so I won't bother implementing it.
|
||||
-- In fact, I won't bother with most features.
|
||||
local x, y = object:GetPos()
|
||||
local width, height = object:GetSize()
|
||||
local text = object:GetText()
|
||||
local placeholder = object:GetPlaceholderText()
|
||||
local font = object:GetFont()
|
||||
local textWidth = font:getWidth(text)
|
||||
local textHeight = font:getHeight()
|
||||
local isSelected = object:IsAllTextSelected()
|
||||
local textX = object:GetTextX()
|
||||
local textY = object:GetTextY()
|
||||
|
||||
love.graphics.setColor(skin.controls.textinput_body_color)
|
||||
love.graphics.rectangle("fill", x, y, width, height)
|
||||
|
||||
if isSelected then
|
||||
love.graphics.setColor(skin.controls.textinput_highlight_color)
|
||||
love.graphics.rectangle("fill", textX, textY, textWidth, textHeight)
|
||||
end
|
||||
|
||||
love.graphics.setColor(skin.controls.text_color)
|
||||
if object:GetIndicatorVisibility() and object:GetFocus() then
|
||||
local indX = object:GetIndicatorX()
|
||||
local indY = object:GetIndicatorY()
|
||||
local indW = skin.controls.textinput_indicator_width
|
||||
love.graphics.rectangle("fill", indX, indY, indW, textHeight)
|
||||
end
|
||||
|
||||
love.graphics.setFont(font)
|
||||
if isSelected then
|
||||
love.graphics.setColor(skin.controls.textinput_selected_text_color)
|
||||
end
|
||||
printOnPixel(#text > 0 and text or placeholder, textX, textY)
|
||||
end
|
||||
|
||||
function skin.panel(object)
|
||||
local x, y = object:GetPos()
|
||||
local width, height = object:GetSize()
|
||||
love.graphics.setColor(skin.controls.panel_body_color)
|
||||
love.graphics.rectangle("fill", x, y, width, height)
|
||||
end
|
||||
|
||||
function skin.collapsiblecategory(object)
|
||||
local text = object:GetText()
|
||||
local child = object:GetObject()
|
||||
local closedHeight = object:GetClosedHeight()
|
||||
local open = object:GetOpen()
|
||||
local x, y = object:GetPos()
|
||||
local width, height = object:GetSize()
|
||||
|
||||
love.graphics.setColor(skin.controls.body_color)
|
||||
love.graphics.rectangle("fill", x, y, width, height)
|
||||
outlinedRectangle(x, y, width, height)
|
||||
|
||||
local offset = skin.controls.padding + skin.controls.border_width
|
||||
love.graphics.setColor(skin.controls.text_color)
|
||||
love.graphics.setFont(skin.controls.small_font)
|
||||
printOnPixel(text, x + offset, y + offset)
|
||||
|
||||
local arrow
|
||||
if open then
|
||||
arrow = "–"
|
||||
else
|
||||
arrow = "+"
|
||||
end
|
||||
local arrowWidth = skin.controls.button_text_font:getWidth(arrow)
|
||||
printOnPixel(arrow, x + width - arrowWidth - offset, y + offset)
|
||||
end
|
||||
|
||||
-- Taken from the included Blue theme by Nikolai Resokav.
|
||||
function skin.text(object)
|
||||
local textdata = object.formattedtext
|
||||
local x = object.x
|
||||
local y = object.y
|
||||
local shadow = object.shadow
|
||||
local shadowxoffset = object.shadowxoffset
|
||||
local shadowyoffset = object.shadowyoffset
|
||||
local shadowcolor = object.shadowcolor
|
||||
local inlist, list = object:IsInList()
|
||||
local printfunc = function(text, x, y)
|
||||
love.graphics.print(text, math.floor(x + 0.5), math.floor(y + 0.5))
|
||||
end
|
||||
|
||||
for k, v in ipairs(textdata) do
|
||||
local textx = v.x
|
||||
local texty = v.y
|
||||
local text = v.text
|
||||
local color = v.color
|
||||
local font = v.font
|
||||
local link = v.link
|
||||
local theight = font:getHeight("a")
|
||||
if inlist then
|
||||
local listy = list.y
|
||||
local listhieght = list.height
|
||||
if (y + texty) <= (listy + listhieght) and y + ((texty + theight)) >= listy then
|
||||
love.graphics.setFont(font)
|
||||
if shadow then
|
||||
love.graphics.setColor(unpack(shadowcolor))
|
||||
printfunc(text, x + textx + shadowxoffset, y + texty + shadowyoffset)
|
||||
end
|
||||
if link then
|
||||
local linkcolor = v.linkcolor
|
||||
local linkhovercolor = v.linkhovercolor
|
||||
local hover = v.hover
|
||||
if hover then
|
||||
love.graphics.setColor(linkhovercolor)
|
||||
else
|
||||
love.graphics.setColor(linkcolor)
|
||||
end
|
||||
else
|
||||
love.graphics.setColor(unpack(color))
|
||||
end
|
||||
printfunc(text, x + textx, y + texty)
|
||||
end
|
||||
else
|
||||
love.graphics.setFont(font)
|
||||
if shadow then
|
||||
love.graphics.setColor(unpack(shadowcolor))
|
||||
printfunc(text, x + textx + shadowxoffset, y + texty + shadowyoffset)
|
||||
end
|
||||
if link then
|
||||
local linkcolor = v.linkcolor
|
||||
local linkhovercolor = v.linkhovercolor
|
||||
local hover = v.hover
|
||||
if hover then
|
||||
love.graphics.setColor(linkhovercolor)
|
||||
else
|
||||
love.graphics.setColor(linkcolor)
|
||||
end
|
||||
else
|
||||
love.graphics.setColor(unpack(color))
|
||||
end
|
||||
printfunc(text, x + textx, y + texty)
|
||||
end
|
||||
end
|
||||
end
|
||||
|
||||
|
||||
|
||||
|
||||
loveframes.RegisterSkin(skin)
|
||||
|
||||
-- End module function
|
||||
end
|
||||
31
main.lua
31
main.lua
@ -38,9 +38,38 @@ function love.textinput(text)
|
||||
loveframes.textinput(text)
|
||||
end
|
||||
|
||||
-- TODO delete this when the skin is done
|
||||
function setupSkin(fontsize)
|
||||
local font = love.graphics.newFont(fontsize)
|
||||
loveframes.basicfont = font
|
||||
loveframes.config["ACTIVESKIN"] = "Blue"
|
||||
local skin = loveframes.GetActiveSkin()
|
||||
skin.controls.smallfont = font
|
||||
loveframes.RegisterTemplate({
|
||||
name = "Clock",
|
||||
properties = {
|
||||
numberbox = {
|
||||
height = fontsize+10
|
||||
},
|
||||
textinput = {
|
||||
width = font:getWidth("999")+10
|
||||
},
|
||||
collapsiblecategory = {
|
||||
height = fontsize+10,
|
||||
closedheight = fontsize+10
|
||||
}
|
||||
}
|
||||
})
|
||||
end
|
||||
|
||||
function love.load()
|
||||
if arg[#arg] == "-debug" then require("mobdebug").start() end
|
||||
|
||||
loveframes.SetActiveSkin("Clock")
|
||||
|
||||
local fontsize = love.graphics.getHeight() / 20
|
||||
-- setupSkin(fontsize)
|
||||
|
||||
local margin = love.graphics.getHeight() / 20
|
||||
|
||||
local diameter = love.graphics.getHeight() - 2 * margin
|
||||
@ -100,7 +129,7 @@ function love.load()
|
||||
|
||||
local exitNote = "Press \"Esc\" to exit."
|
||||
local exitNoteWidth = love.graphics.getWidth() - column2X - margin
|
||||
local exitNoteFont = love.graphics.newFont(love.graphics.getHeight()/20)
|
||||
local exitNoteFont = love.graphics.newFont(fontsize)
|
||||
local _, wraps = exitNoteFont:getWrap(exitNote, exitNoteWidth)
|
||||
local exitNoteY = love.graphics.getHeight() - table.maxn(wraps) * exitNoteFont:getHeight() - margin
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user