added ColorCheckPage and ColorGradientField

fixed ServicePage references in functions
added lerp function to util.lua
This commit is contained in:
Hersi 2022-04-03 23:24:17 +02:00
parent a0ba0b7390
commit b08c1fb580
5 changed files with 159 additions and 15 deletions

View File

@ -58,6 +58,10 @@ local function areaOverlap(x, y, areaX, areaY, areaW, areaH)
return x > areaX and y > areaY and x < areaX + areaW and y < areaY + areaH
end
local function lerp(x, x0, y0, x1, y1)
return y0 + (x - x0) * (y1 - y0) / (x1 - x0)
end
return {
splitString = splitString,
filter = filter,
@ -65,5 +69,6 @@ return {
round = round,
sign = sign,
roundToZero = roundToZero,
areaOverlap = areaOverlap
areaOverlap = areaOverlap,
lerp = lerp
}

View File

@ -0,0 +1,40 @@
require("common.class")
local util = require("common.util")
local ServiceField = require("titlescreen.service.servicefield")
---@class ColorGradientField: ServiceField
---@field height number
local ColorGradientField = {
GRADIENT_X_OFFSET = 128,
GRADIENT_WIDTH = 512,
GRADIENT_STEPS = 32
}
function ColorGradientField:new(o)
o = Inherit(self, ServiceField, o)
o.value = o.value or {0, 0, 0, 255}
o.height = o.height or self.SERVICE_DEFAULT_FONT_SIZE
return o
end
function ColorGradientField:activate() end
function ColorGradientField:focus() end
function ColorGradientField:deactivate() end
function ColorGradientField:drawValue(deltaTime)
local stepW = self.GRADIENT_WIDTH / self.GRADIENT_STEPS
for i = 0, self.GRADIENT_STEPS - 1 do
local posX = self.GRADIENT_X_OFFSET + i * stepW
local colorA = math.ceil(util.lerp(i, 0, 0, self.GRADIENT_STEPS - 1, self.value[4]))
gfx.BeginPath()
gfx.Rect(posX, 0, stepW, self.height)
gfx.FillColor(self.value[1], self.value[2], self.value[3], colorA)
gfx.Fill()
end
end
return ColorGradientField

View File

@ -0,0 +1,88 @@
require("common.class")
local ServicePage = require("titlescreen.service.servicepage")
local ColorGradientField = require("titlescreen.service.fields.color_gradient_field")
---@class ColorCheckPage: ServicePage
local ColorCheckPage = {
SERVICE_DEFAULT_SPACING = 8,
LINE_COLOR = {255, 255, 255, 255},
LINE_WIDTH = 4,
ARROW_SIZE = 16,
ARROW_MARGIN = 2,
ARROW_LINE_WIDTH = 1
}
---Create a new ColorCheckPage instance
---
---Inherits from ServicePage
---@param o ServicePage
---@return ColorCheckPage
function ColorCheckPage:new(o)
o = Inherit(self, ServicePage, o)
o.title = o.title or "COLOR CHECK"
o.footer = o.footer or {
"START BUTTON = EXIT",
"BACK BUTTON = EXIT"
}
local height = self.SERVICE_DEFAULT_FONT_SIZE + self.SERVICE_DEFAULT_SPACING
o:addField(ColorGradientField:new{label = "RED", value = {255, 0, 0, 255}, height = height})
o:addField(ColorGradientField:new{label = "YELLOW", value = {255, 255, 0, 255}, height = height})
o:addField(ColorGradientField:new{label = "GREEN", value = {0, 255, 0, 255}, height = height})
o:addField(ColorGradientField:new{label = "CYAN", value = {0, 255, 255, 255}, height = height})
o:addField(ColorGradientField:new{label = "BLUE", value = {0, 0, 255, 255}, height = height})
o:addField(ColorGradientField:new{label = "MAGENTA", value = {255, 0, 255, 255}, height = height})
o:addField(ColorGradientField:new{label = "WHITE", value = {255, 255, 255, 255}, height = height})
return o
end
function ColorCheckPage:handleButtonInput(button)
if button == game.BUTTON_BCK or button == game.BUTTON_STA then
if self.viewHandler then
self.viewHandler:back()
end
end
end
function ColorCheckPage:drawBackground(deltaTime)
ServicePage.drawBackground(self, deltaTime)
gfx.Save()
gfx.Translate(ServicePage.SERVICE_DEFAULT_MARGIN[1], 0)
local fieldH = self.SERVICE_DEFAULT_FONT_SIZE + self.SERVICE_DEFAULT_SPACING
local lineY = self.SERVICE_DEFAULT_MARGIN[2] + #self.content * fieldH
gfx.BeginPath()
gfx.Rect(ColorGradientField.GRADIENT_X_OFFSET, lineY,
ColorGradientField.GRADIENT_WIDTH, self.LINE_WIDTH)
gfx.FillColor(table.unpack(self.LINE_COLOR))
gfx.Fill()
local arrowY = lineY + self.LINE_WIDTH
local stepW = ColorGradientField.GRADIENT_WIDTH / ColorGradientField.GRADIENT_STEPS
gfx.BeginPath()
for i = 0, 3 do
local posX = ColorGradientField.GRADIENT_X_OFFSET + i * stepW
gfx.MoveTo(posX + self.ARROW_MARGIN, arrowY + self.ARROW_SIZE - self.ARROW_MARGIN)
gfx.LineTo(posX + stepW / 2, arrowY + self.ARROW_MARGIN)
gfx.LineTo(posX + stepW - self.ARROW_MARGIN, arrowY + self.ARROW_SIZE - self.ARROW_MARGIN)
end
gfx.StrokeColor(table.unpack(self.LINE_COLOR))
gfx.StrokeWidth(self.ARROW_LINE_WIDTH)
gfx.Stroke()
local textCenterX = ColorGradientField.GRADIENT_X_OFFSET + 2 * stepW
local textY = arrowY + self.ARROW_SIZE
gfx.BeginPath()
gfx.TextAlign(gfx.TEXT_ALIGN_CENTER | gfx.TEXT_ALIGN_TOP)
gfx.FontSize(self.SERVICE_DEFAULT_FONT_SIZE)
gfx.LoadSkinFont(self.SERVICE_DEFAULT_FONT_FACE)
gfx.FillColor(table.unpack(self.SERVICE_DEFAULT_FONT_COLOR))
gfx.Text("COLORLESS", textCenterX, textY)
gfx.Restore()
end
return ColorCheckPage

View File

@ -2,6 +2,7 @@ require("common.class")
local ServicePage = require("titlescreen.service.servicepage")
local InputCheckPage = require("titlescreen.service.pages.input_check")
local ScreenCheckPage = require("titlescreen.service.pages.screen_check")
local ColorCheckPage = require("titlescreen.service.pages.color_check")
local LinkServiceField = require("titlescreen.service.fields.link_service_field")
@ -35,6 +36,16 @@ function MainMenuPage:new(o)
}
}
})
o:addField(LinkServiceField:new{
label = "COLOR CHECK",
value = ColorCheckPage:new{
title = "COLOR CHECK",
footer = {
"START BUTTON = EXIT",
"BACK BUTTON = EXIT"
}
}
})
o:refreshFields()

View File

@ -38,15 +38,15 @@ end
---Add field to page
---@param field Field
function ServicePage:addField(field)
field.posX = ServicePage.SERVICE_DEFAULT_MARGIN[1]
field.posY = ServicePage.SERVICE_DEFAULT_MARGIN[2] + #self.content * (ServicePage.SERVICE_DEFAULT_FONT_SIZE + ServicePage.SERVICE_DEFAULT_SPACING)
field.posX = self.SERVICE_DEFAULT_MARGIN[1]
field.posY = self.SERVICE_DEFAULT_MARGIN[2] + #self.content * (self.SERVICE_DEFAULT_FONT_SIZE + self.SERVICE_DEFAULT_SPACING)
Page.addField(self, field)
end
function ServicePage:refreshFields()
for index, field in ipairs(self.content) do
field.posX = ServicePage.SERVICE_DEFAULT_MARGIN[1]
field.posY = ServicePage.SERVICE_DEFAULT_MARGIN[2] + (index - 1) * (ServicePage.SERVICE_DEFAULT_FONT_SIZE + ServicePage.SERVICE_DEFAULT_SPACING)
field.posX = self.SERVICE_DEFAULT_MARGIN[1]
field.posY = self.SERVICE_DEFAULT_MARGIN[2] + (index - 1) * (self.SERVICE_DEFAULT_FONT_SIZE + self.SERVICE_DEFAULT_SPACING)
if index == self.selectedIndex then
field:focus()
else
@ -64,12 +64,12 @@ function ServicePage:drawBackground(deltaTime)
end
function ServicePage:drawHeader(deltaTime)
local pageTopTitleMargin = ServicePage.SERVICE_DEFAULT_FONT_SIZE
local lineHeight = ServicePage.SERVICE_DEFAULT_FONT_SIZE + ServicePage.SERVICE_DEFAULT_SPACING
local pageTopTitleMargin = self.SERVICE_DEFAULT_FONT_SIZE
local lineHeight = self.SERVICE_DEFAULT_FONT_SIZE + self.SERVICE_DEFAULT_SPACING
gfx.BeginPath()
gfx.FontSize(ServicePage.SERVICE_DEFAULT_FONT_SIZE)
gfx.LoadSkinFont(ServicePage.SERVICE_DEFAULT_FONT_FACE)
gfx.FillColor(table.unpack(ServicePage.SERVICE_DEFAULT_FONT_COLOR))
gfx.FontSize(self.SERVICE_DEFAULT_FONT_SIZE)
gfx.LoadSkinFont(self.SERVICE_DEFAULT_FONT_FACE)
gfx.FillColor(table.unpack(self.SERVICE_DEFAULT_FONT_COLOR))
gfx.TextAlign(gfx.TEXT_ALIGN_CENTER | gfx.TEXT_ALIGN_TOP)
if type(self.title) == "table" then
for index, line in ipairs(self.title) do
@ -83,12 +83,12 @@ end
function ServicePage:drawFooter(deltaTime)
local footer = self.content[self.selectedIndex] and self.content[self.selectedIndex].footer or self.footer
local bottomPageMargin = ServicePage.SERVICE_DEFAULT_MARGIN[4]
local lineHeight = ServicePage.SERVICE_DEFAULT_FONT_SIZE + ServicePage.SERVICE_DEFAULT_SPACING
local bottomPageMargin = self.SERVICE_DEFAULT_MARGIN[4]
local lineHeight = self.SERVICE_DEFAULT_FONT_SIZE + self.SERVICE_DEFAULT_SPACING
gfx.BeginPath()
gfx.FontSize(ServicePage.SERVICE_DEFAULT_FONT_SIZE)
gfx.LoadSkinFont(ServicePage.SERVICE_DEFAULT_FONT_FACE)
gfx.FillColor(table.unpack(ServicePage.SERVICE_DEFAULT_FONT_COLOR))
gfx.FontSize(self.SERVICE_DEFAULT_FONT_SIZE)
gfx.LoadSkinFont(self.SERVICE_DEFAULT_FONT_FACE)
gfx.FillColor(table.unpack(self.SERVICE_DEFAULT_FONT_COLOR))
gfx.TextAlign(gfx.TEXT_ALIGN_CENTER | gfx.TEXT_ALIGN_BOTTOM)
if type(footer) == "table" then
local yFooterBase = dim.design.height - bottomPageMargin - #footer * lineHeight