add vial-fill shader with liquid effect and smooth tween transitions; increase corner radius to 12px; replace progress bars with shader-based vial fill

This commit is contained in:
Eric Smith 2026-05-20 15:03:47 -04:00
parent 92110cfee7
commit 3eb089b776
6 changed files with 147 additions and 73 deletions

View file

@ -4,46 +4,52 @@ class_name CpuModule
@onready var title_label: Label = %Title
@onready var label: Label = %Label
@onready var progress: ProgressBar = %ProgressBar
@onready var vial_fill: ColorRect = %VialFill
var _collector: CpuCollector
var _displayed_fill: float = 0.0
var _fill_tween: Tween
func initialize() -> void:
module_title = "CPU"
_collector = CpuCollector.new()
_style()
module_title = "CPU"
_collector = CpuCollector.new()
_setup_shader()
_style()
func refresh(data: Dictionary) -> void:
var usage: float = _collector.collect()
if usage < 0.0:
return
var usage: float = _collector.collect()
if usage < 0.0:
return
var pct: int = roundi(usage)
label.text = "%d%%" % pct
progress.value = pct
var pct: int = roundi(usage)
label.text = "%d%%" % pct
# Smoothly tween the vial fill
var target: float = usage / 100.0
if _fill_tween and _fill_tween.is_valid():
_fill_tween.kill()
_fill_tween = create_tween()
_fill_tween.tween_method(_set_fill, _displayed_fill, target, 0.4).set_ease(Tween.EASE_OUT).set_trans(Tween.TRANS_CUBIC)
func _set_fill(value: float) -> void:
_displayed_fill = value
var mat := vial_fill.material as ShaderMaterial
if mat:
mat.set_shader_parameter("fill", value)
func _setup_shader() -> void:
var mat := ShaderMaterial.new()
mat.shader = preload("res://shaders/vial_fill.gdshader")
mat.set_shader_parameter("liquid_color", Color(0.2, 0.5, 0.8, 1.0))
mat.set_shader_parameter("fill", 0.0)
vial_fill.material = mat
func _style() -> void:
title_label.add_theme_color_override("font_color", Color(0.7, 0.7, 0.8, 1.0))
label.add_theme_color_override("font_color", Color(0.9, 0.9, 1.0, 1.0))
label.add_theme_font_size_override("font_size", 48)
var fg := StyleBoxFlat.new()
fg.bg_color = Color(0.2, 0.5, 0.8, 1.0)
fg.corner_radius_top_left = 4
fg.corner_radius_top_right = 4
fg.corner_radius_bottom_right = 4
fg.corner_radius_bottom_left = 4
var bg := StyleBoxFlat.new()
bg.bg_color = Color(0.1, 0.1, 0.14, 1.0)
bg.corner_radius_top_left = 4
bg.corner_radius_top_right = 4
bg.corner_radius_bottom_right = 4
bg.corner_radius_bottom_left = 4
progress.add_theme_stylebox_override("fill", fg)
progress.add_theme_stylebox_override("background", bg)
title_label.add_theme_color_override("font_color", Color(0.7, 0.7, 0.8, 1.0))
label.add_theme_color_override("font_color", Color(0.9, 0.9, 1.0, 1.0))
label.add_theme_font_size_override("font_size", 48)