need to remove guiding bars
This commit is contained in:
Michael Freno
243
examples/NineSliceCornerScalingDemo.lua
Normal file
243
examples/NineSliceCornerScalingDemo.lua
Normal file
@@ -0,0 +1,243 @@
|
||||
local FlexLove = require("FlexLove")
|
||||
local Gui = FlexLove.GUI
|
||||
local Theme = FlexLove.Theme
|
||||
local Color = FlexLove.Color
|
||||
|
||||
---@class CornerScalingDemo
|
||||
---@field window Element
|
||||
---@field currentMode string
|
||||
---@field modeButtons table
|
||||
local CornerScalingDemo = {}
|
||||
CornerScalingDemo.__index = CornerScalingDemo
|
||||
|
||||
function CornerScalingDemo.init()
|
||||
local self = setmetatable({}, CornerScalingDemo)
|
||||
|
||||
self.currentMode = "none"
|
||||
self.modeButtons = {}
|
||||
|
||||
-- Try to load theme
|
||||
local themeLoaded = pcall(function()
|
||||
Theme.load("space")
|
||||
Theme.setActive("space")
|
||||
end)
|
||||
|
||||
-- Create main window
|
||||
self.window = Gui.new({
|
||||
x = 50,
|
||||
y = 50,
|
||||
width = 900,
|
||||
height = 650,
|
||||
backgroundColor = Color.new(0.1, 0.1, 0.15, 0.95),
|
||||
border = { top = true, bottom = true, left = true, right = true },
|
||||
borderColor = Color.new(0.6, 0.6, 0.7, 1),
|
||||
positioning = "flex",
|
||||
flexDirection = "vertical",
|
||||
gap = 20,
|
||||
padding = { top = 20, right = 20, bottom = 20, left = 20 },
|
||||
})
|
||||
|
||||
-- Title
|
||||
Gui.new({
|
||||
parent = self.window,
|
||||
height = 40,
|
||||
text = "NineSlice Corner Scaling Demo",
|
||||
textSize = 24,
|
||||
textAlign = "center",
|
||||
textColor = Color.new(1, 1, 1, 1),
|
||||
backgroundColor = Color.new(0.15, 0.15, 0.25, 1),
|
||||
})
|
||||
|
||||
-- Status
|
||||
Gui.new({
|
||||
parent = self.window,
|
||||
height = 30,
|
||||
text = themeLoaded and "✓ Theme loaded - Scaling demonstration active"
|
||||
or "⚠ Theme not loaded - Please ensure theme assets exist",
|
||||
textSize = 14,
|
||||
textAlign = "center",
|
||||
textColor = themeLoaded and Color.new(0.3, 0.9, 0.3, 1) or Color.new(0.9, 0.6, 0.3, 1),
|
||||
backgroundColor = Color.new(0.08, 0.08, 0.12, 0.8),
|
||||
})
|
||||
|
||||
-- Mode selector section
|
||||
local modeSection = Gui.new({
|
||||
parent = self.window,
|
||||
height = 80,
|
||||
backgroundColor = Color.new(0.12, 0.12, 0.18, 1),
|
||||
padding = { top = 15, right = 15, bottom = 15, left = 15 },
|
||||
positioning = "flex",
|
||||
flexDirection = "vertical",
|
||||
gap = 10,
|
||||
})
|
||||
|
||||
Gui.new({
|
||||
parent = modeSection,
|
||||
height = 20,
|
||||
text = "Select Scaling Mode:",
|
||||
textSize = 14,
|
||||
textColor = Color.new(0.8, 0.9, 1, 1),
|
||||
backgroundColor = Color.new(0, 0, 0, 0),
|
||||
})
|
||||
|
||||
-- Button container
|
||||
local buttonContainer = Gui.new({
|
||||
parent = modeSection,
|
||||
height = 40,
|
||||
positioning = "flex",
|
||||
flexDirection = "horizontal",
|
||||
gap = 15,
|
||||
backgroundColor = Color.new(0, 0, 0, 0),
|
||||
})
|
||||
|
||||
-- Helper to create mode button
|
||||
local function createModeButton(mode, label)
|
||||
local button = Gui.new({
|
||||
parent = buttonContainer,
|
||||
width = 180,
|
||||
height = 40,
|
||||
text = label,
|
||||
textAlign = "center",
|
||||
textSize = 14,
|
||||
textColor = Color.new(1, 1, 1, 1),
|
||||
backgroundColor = self.currentMode == mode and Color.new(0.3, 0.6, 0.9, 1) or Color.new(0.25, 0.25, 0.35, 1),
|
||||
callback = function(element, event)
|
||||
if event.type == "click" then
|
||||
self:setMode(mode)
|
||||
end
|
||||
end,
|
||||
})
|
||||
self.modeButtons[mode] = button
|
||||
return button
|
||||
end
|
||||
|
||||
createModeButton("none", "No Scaling (Default)")
|
||||
createModeButton("nearest", "Nearest Neighbor")
|
||||
createModeButton("bilinear", "Bilinear Interpolation")
|
||||
|
||||
-- Comparison section
|
||||
local comparisonSection = Gui.new({
|
||||
parent = self.window,
|
||||
height = 420,
|
||||
backgroundColor = Color.new(0.08, 0.08, 0.12, 1),
|
||||
padding = { top = 20, right = 20, bottom = 20, left = 20 },
|
||||
positioning = "flex",
|
||||
flexDirection = "vertical",
|
||||
gap = 15,
|
||||
})
|
||||
|
||||
-- Description
|
||||
Gui.new({
|
||||
parent = comparisonSection,
|
||||
height = 60,
|
||||
text = "The panels below demonstrate different scaling modes.\n" ..
|
||||
"• No Scaling: Corners remain at original size (may appear small at high DPI)\n" ..
|
||||
"• Nearest Neighbor: Sharp, pixelated scaling (ideal for pixel art)\n" ..
|
||||
"• Bilinear: Smooth, filtered scaling (ideal for high-quality graphics)",
|
||||
textSize = 12,
|
||||
textColor = Color.new(0.7, 0.8, 0.9, 1),
|
||||
backgroundColor = Color.new(0, 0, 0, 0),
|
||||
})
|
||||
|
||||
-- Demo panels container
|
||||
local panelsContainer = Gui.new({
|
||||
parent = comparisonSection,
|
||||
positioning = "flex",
|
||||
flexDirection = "horizontal",
|
||||
gap = 20,
|
||||
backgroundColor = Color.new(0, 0, 0, 0),
|
||||
})
|
||||
|
||||
-- Helper to create demo panel
|
||||
local function createDemoPanel(size, label)
|
||||
local container = Gui.new({
|
||||
parent = panelsContainer,
|
||||
width = (900 - 80 - 40) / 3, -- Divide available space
|
||||
positioning = "flex",
|
||||
flexDirection = "vertical",
|
||||
gap = 10,
|
||||
backgroundColor = Color.new(0, 0, 0, 0),
|
||||
})
|
||||
|
||||
Gui.new({
|
||||
parent = container,
|
||||
height = 20,
|
||||
text = label,
|
||||
textSize = 12,
|
||||
textAlign = "center",
|
||||
textColor = Color.new(0.8, 0.9, 1, 1),
|
||||
backgroundColor = Color.new(0, 0, 0, 0),
|
||||
})
|
||||
|
||||
local panel = Gui.new({
|
||||
parent = container,
|
||||
width = size,
|
||||
height = size,
|
||||
backgroundColor = Color.new(0.2, 0.3, 0.4, 0.5),
|
||||
theme = themeLoaded and "panel" or nil,
|
||||
padding = { top = 15, right = 15, bottom = 15, left = 15 },
|
||||
})
|
||||
|
||||
Gui.new({
|
||||
parent = panel,
|
||||
text = "Themed\nPanel",
|
||||
textSize = 14,
|
||||
textAlign = "center",
|
||||
textColor = Color.new(1, 1, 1, 1),
|
||||
backgroundColor = Color.new(0, 0, 0, 0),
|
||||
})
|
||||
|
||||
return panel
|
||||
end
|
||||
|
||||
createDemoPanel(120, "Small (120x120)")
|
||||
createDemoPanel(160, "Medium (160x160)")
|
||||
createDemoPanel(200, "Large (200x200)")
|
||||
|
||||
-- Info footer
|
||||
Gui.new({
|
||||
parent = self.window,
|
||||
height = 30,
|
||||
text = "Resize the window to see how scaling adapts to different DPI settings",
|
||||
textSize = 11,
|
||||
textAlign = "center",
|
||||
textColor = Color.new(0.5, 0.6, 0.7, 1),
|
||||
backgroundColor = Color.new(0.08, 0.08, 0.12, 1),
|
||||
})
|
||||
|
||||
return self
|
||||
end
|
||||
|
||||
function CornerScalingDemo:setMode(mode)
|
||||
self.currentMode = mode
|
||||
|
||||
-- Update button colors
|
||||
for modeName, button in pairs(self.modeButtons) do
|
||||
button.backgroundColor = modeName == mode and Color.new(0.3, 0.6, 0.9, 1) or Color.new(0.25, 0.25, 0.35, 1)
|
||||
end
|
||||
|
||||
-- Update theme components based on mode
|
||||
local activeTheme = Theme.getActive()
|
||||
if activeTheme and activeTheme.components then
|
||||
for componentName, component in pairs(activeTheme.components) do
|
||||
if mode == "none" then
|
||||
component.scaleCorners = false
|
||||
elseif mode == "nearest" then
|
||||
component.scaleCorners = true
|
||||
component.scalingAlgorithm = "nearest"
|
||||
elseif mode == "bilinear" then
|
||||
component.scaleCorners = true
|
||||
component.scalingAlgorithm = "bilinear"
|
||||
end
|
||||
|
||||
-- Clear cache to force re-rendering
|
||||
if component._scaledRegionCache then
|
||||
component._scaledRegionCache = {}
|
||||
end
|
||||
end
|
||||
end
|
||||
|
||||
print("Scaling mode changed to: " .. mode)
|
||||
end
|
||||
|
||||
return CornerScalingDemo.init()
|
||||
@@ -1,181 +0,0 @@
|
||||
-- Simple Theme Color Access Demo
|
||||
-- Shows how to access theme colors without creating GUI elements
|
||||
|
||||
package.path = package.path .. ";./?.lua;../?.lua"
|
||||
|
||||
local FlexLove = require("FlexLove")
|
||||
local Theme = FlexLove.Theme
|
||||
local Color = FlexLove.Color
|
||||
|
||||
-- Initialize minimal love stubs
|
||||
love = {
|
||||
graphics = {
|
||||
newFont = function(size) return { getHeight = function() return size end } end,
|
||||
newImage = function() return {} end,
|
||||
newQuad = function() return {} end,
|
||||
},
|
||||
}
|
||||
|
||||
print("=== Theme Color Access - Simple Demo ===\n")
|
||||
|
||||
-- Load and activate the space theme
|
||||
Theme.load("space")
|
||||
Theme.setActive("space")
|
||||
|
||||
print("✓ Theme 'space' loaded and activated\n")
|
||||
|
||||
-- ============================================
|
||||
-- METHOD 1: Basic Color Access (Recommended)
|
||||
-- ============================================
|
||||
print("METHOD 1: Theme.getColor(colorName)")
|
||||
print("------------------------------------")
|
||||
|
||||
local primaryColor = Theme.getColor("primary")
|
||||
local secondaryColor = Theme.getColor("secondary")
|
||||
local textColor = Theme.getColor("text")
|
||||
local textDarkColor = Theme.getColor("textDark")
|
||||
|
||||
print(string.format("primary = Color(r=%.2f, g=%.2f, b=%.2f, a=%.2f)",
|
||||
primaryColor.r, primaryColor.g, primaryColor.b, primaryColor.a))
|
||||
print(string.format("secondary = Color(r=%.2f, g=%.2f, b=%.2f, a=%.2f)",
|
||||
secondaryColor.r, secondaryColor.g, secondaryColor.b, secondaryColor.a))
|
||||
print(string.format("text = Color(r=%.2f, g=%.2f, b=%.2f, a=%.2f)",
|
||||
textColor.r, textColor.g, textColor.b, textColor.a))
|
||||
print(string.format("textDark = Color(r=%.2f, g=%.2f, b=%.2f, a=%.2f)",
|
||||
textDarkColor.r, textDarkColor.g, textDarkColor.b, textDarkColor.a))
|
||||
|
||||
-- ============================================
|
||||
-- METHOD 2: Get All Color Names
|
||||
-- ============================================
|
||||
print("\nMETHOD 2: Theme.getColorNames()")
|
||||
print("--------------------------------")
|
||||
|
||||
local colorNames = Theme.getColorNames()
|
||||
print("Available colors:")
|
||||
for i, name in ipairs(colorNames) do
|
||||
print(string.format(" %d. %s", i, name))
|
||||
end
|
||||
|
||||
-- ============================================
|
||||
-- METHOD 3: Get All Colors at Once
|
||||
-- ============================================
|
||||
print("\nMETHOD 3: Theme.getAllColors()")
|
||||
print("-------------------------------")
|
||||
|
||||
local allColors = Theme.getAllColors()
|
||||
print("All colors with values:")
|
||||
for name, color in pairs(allColors) do
|
||||
print(string.format(" %-10s = (%.2f, %.2f, %.2f, %.2f)",
|
||||
name, color.r, color.g, color.b, color.a))
|
||||
end
|
||||
|
||||
-- ============================================
|
||||
-- METHOD 4: Safe Access with Fallback
|
||||
-- ============================================
|
||||
print("\nMETHOD 4: Theme.getColorOrDefault(colorName, fallback)")
|
||||
print("-------------------------------------------------------")
|
||||
|
||||
-- Try to get a color that exists
|
||||
local existingColor = Theme.getColorOrDefault("primary", Color.new(1, 0, 0, 1))
|
||||
print(string.format("Existing color 'primary': (%.2f, %.2f, %.2f) ✓",
|
||||
existingColor.r, existingColor.g, existingColor.b))
|
||||
|
||||
-- Try to get a color that doesn't exist (will use fallback)
|
||||
local missingColor = Theme.getColorOrDefault("accent", Color.new(1, 0, 0, 1))
|
||||
print(string.format("Missing color 'accent' (fallback): (%.2f, %.2f, %.2f) ✓",
|
||||
missingColor.r, missingColor.g, missingColor.b))
|
||||
|
||||
-- ============================================
|
||||
-- PRACTICAL EXAMPLES
|
||||
-- ============================================
|
||||
print("\n=== Practical Usage Examples ===\n")
|
||||
|
||||
print("Example 1: Using colors in element creation")
|
||||
print("--------------------------------------------")
|
||||
print([[
|
||||
local button = Gui.new({
|
||||
width = 200,
|
||||
height = 50,
|
||||
backgroundColor = Theme.getColor("primary"),
|
||||
textColor = Theme.getColor("text"),
|
||||
text = "Click Me!"
|
||||
})
|
||||
]])
|
||||
|
||||
print("\nExample 2: Creating color variations")
|
||||
print("-------------------------------------")
|
||||
print([[
|
||||
local primary = Theme.getColor("primary")
|
||||
|
||||
-- Darker version (70% brightness)
|
||||
local primaryDark = Color.new(
|
||||
primary.r * 0.7,
|
||||
primary.g * 0.7,
|
||||
primary.b * 0.7,
|
||||
primary.a
|
||||
)
|
||||
|
||||
-- Lighter version (130% brightness)
|
||||
local primaryLight = Color.new(
|
||||
math.min(1, primary.r * 1.3),
|
||||
math.min(1, primary.g * 1.3),
|
||||
math.min(1, primary.b * 1.3),
|
||||
primary.a
|
||||
)
|
||||
|
||||
-- Semi-transparent version
|
||||
local primaryTransparent = Color.new(
|
||||
primary.r,
|
||||
primary.g,
|
||||
primary.b,
|
||||
0.5 -- 50% opacity
|
||||
)
|
||||
]])
|
||||
|
||||
print("\nExample 3: Safe color access")
|
||||
print("-----------------------------")
|
||||
print([[
|
||||
-- With fallback to white if color doesn't exist
|
||||
local bgColor = Theme.getColorOrDefault("background", Color.new(1, 1, 1, 1))
|
||||
|
||||
-- With fallback to theme's secondary color
|
||||
local borderColor = Theme.getColorOrDefault(
|
||||
"border",
|
||||
Theme.getColor("secondary")
|
||||
)
|
||||
]])
|
||||
|
||||
print("\nExample 4: Dynamic color selection")
|
||||
print("-----------------------------------")
|
||||
print([[
|
||||
-- Get all available colors
|
||||
local colors = Theme.getAllColors()
|
||||
|
||||
-- Pick a random color
|
||||
local colorNames = {}
|
||||
for name in pairs(colors) do
|
||||
table.insert(colorNames, name)
|
||||
end
|
||||
local randomColorName = colorNames[math.random(#colorNames)]
|
||||
local randomColor = colors[randomColorName]
|
||||
]])
|
||||
|
||||
print("\n=== Quick Reference ===\n")
|
||||
print("Theme.getColor(name) -- Get a specific color")
|
||||
print("Theme.getColorOrDefault(n, fb) -- Get color with fallback")
|
||||
print("Theme.getAllColors() -- Get all colors as table")
|
||||
print("Theme.getColorNames() -- Get array of color names")
|
||||
print("Theme.hasActive() -- Check if theme is active")
|
||||
print("Theme.getActive() -- Get active theme object")
|
||||
|
||||
print("\n=== Available Colors in 'space' Theme ===\n")
|
||||
for i, name in ipairs(colorNames) do
|
||||
local color = allColors[name]
|
||||
print(string.format("%-10s RGB(%.0f, %.0f, %.0f)",
|
||||
name,
|
||||
color.r * 255,
|
||||
color.g * 255,
|
||||
color.b * 255))
|
||||
end
|
||||
|
||||
print("\n=== Demo Complete ===")
|
||||
Reference in New Issue
Block a user