Modified the progress bar functionality. In the previous version, works with images/textures, now is by a shader

Assets/flair_circle_border.png.import

@@ -1,34 +0,0 @@
-[remap]
-
-importer="texture"
-type="CompressedTexture2D"
-uid="uid://rxgucw2h8hhv"
-path="res://.godot/imported/flair_circle_border.png-f959b9f81865685d9d36d1555ad3758b.ctex"
-metadata={
-"vram_texture": false
-}
-
-[deps]
-
-source_file="res://Assets/flair_circle_border.png"
-dest_files=["res://.godot/imported/flair_circle_border.png-f959b9f81865685d9d36d1555ad3758b.ctex"]
-
-[params]
-
-compress/mode=0
-compress/high_quality=false
-compress/lossy_quality=0.7
-compress/hdr_compression=1
-compress/normal_map=0
-compress/channel_pack=0
-mipmaps/generate=false
-mipmaps/limit=-1
-roughness/mode=0
-roughness/src_normal=""
-process/fix_alpha_border=true
-process/premult_alpha=false
-process/normal_map_invert_y=false
-process/hdr_as_srgb=false
-process/hdr_clamp_exposure=false
-process/size_limit=0
-detect_3d/compress_to=1

Assets/flair_circle_red_0.png.import

@@ -1,34 +0,0 @@
-[remap]
-
-importer="texture"
-type="CompressedTexture2D"
-uid="uid://c2bey6otu2m8m"
-path="res://.godot/imported/flair_circle_red_0.png-334fd82b10ab8788f4839cec87194492.ctex"
-metadata={
-"vram_texture": false
-}
-
-[deps]
-
-source_file="res://Assets/flair_circle_red_0.png"
-dest_files=["res://.godot/imported/flair_circle_red_0.png-334fd82b10ab8788f4839cec87194492.ctex"]
-
-[params]
-
-compress/mode=0
-compress/high_quality=false
-compress/lossy_quality=0.7
-compress/hdr_compression=1
-compress/normal_map=0
-compress/channel_pack=0
-mipmaps/generate=false
-mipmaps/limit=-1
-roughness/mode=0
-roughness/src_normal=""
-process/fix_alpha_border=true
-process/premult_alpha=false
-process/normal_map_invert_y=false
-process/hdr_as_srgb=false
-process/hdr_clamp_exposure=false
-process/size_limit=0
-detect_3d/compress_to=1

Scenes/TimerHUD.tscn

@@ -18,12 +18,12 @@ anchor_top = 0.5
 anchor_right = 0.5
 anchor_bottom = 0.5
 offset_left = -240.0
-offset_top = -68.5
+offset_top = -183.0
 offset_right = 240.0
-offset_bottom = 68.5
+offset_bottom = -46.0
 grow_horizontal = 2
 grow_vertical = 2
-text = "x:x"
+text = "xx:xx"
 label_settings = SubResource("LabelSettings_gikwe")
 horizontal_alignment = 1
 vertical_alignment = 1
@@ -35,9 +35,9 @@ anchor_top = 1.0
 anchor_right = 0.5
 anchor_bottom = 1.0
 offset_left = -50.0
-offset_top = -210.0
+offset_top = -208.0
 offset_right = 50.0
-offset_bottom = -160.0
+offset_bottom = -158.0
 grow_horizontal = 2
 grow_vertical = 0
 size_flags_vertical = 6
@@ -50,9 +50,9 @@ anchor_top = 1.0
 anchor_right = 0.5
 anchor_bottom = 1.0
 offset_left = -153.5
-offset_top = -210.0
+offset_top = -208.0
 offset_right = -53.5
-offset_bottom = -160.0
+offset_bottom = -158.0
 grow_horizontal = 2
 grow_vertical = 0
 text = "Pause
@@ -65,9 +65,9 @@ anchor_top = 1.0
 anchor_right = 0.5
 anchor_bottom = 1.0
 offset_left = 52.98
-offset_top = -210.0
+offset_top = -208.0
 offset_right = 152.98
-offset_bottom = -160.0
+offset_bottom = -158.0
 grow_horizontal = 2
 grow_vertical = 0
 text = "Stop
@@ -80,54 +80,51 @@ anchor_top = 1.0
 anchor_right = 0.5
 anchor_bottom = 1.0
 offset_left = 166.0
-offset_top = -199.0
+offset_top = -197.0
 offset_right = 206.0
-offset_bottom = -168.0
+offset_bottom = -166.0
 grow_horizontal = 2
 grow_vertical = 0
 size_flags_vertical = 6
 text = "Edit"
 
 [node name="MinutesLabel" type="Label" parent="."]
-visible = false
 anchors_preset = 7
 anchor_left = 0.5
 anchor_top = 1.0
 anchor_right = 0.5
 anchor_bottom = 1.0
-offset_left = -77.0
+offset_left = -88.5
-offset_top = -140.0
+offset_top = -138.0
-offset_right = -37.0
+offset_right = -25.5
-offset_bottom = -117.0
+offset_bottom = -115.0
 grow_horizontal = 2
 grow_vertical = 0
 text = "Minutes"
 
 [node name="SecondsLabel" type="Label" parent="."]
-visible = false
 anchors_preset = 7
 anchor_left = 0.5
 anchor_top = 1.0
 anchor_right = 0.5
 anchor_bottom = 1.0
-offset_left = 32.0
+offset_left = 20.0
-offset_top = -140.0
+offset_top = -138.0
-offset_right = 72.0
+offset_right = 84.0
-offset_bottom = -117.0
+offset_bottom = -115.0
 grow_horizontal = 2
 grow_vertical = 0
 text = "Seconds"
 
 [node name="SpinBoxMinutes" type="SpinBox" parent="."]
-visible = false
 anchors_preset = 7
 anchor_left = 0.5
 anchor_top = 1.0
 anchor_right = 0.5
 anchor_bottom = 1.0
 offset_left = -100.0
-offset_top = -100.0
+offset_top = -98.0
-offset_bottom = -50.0
+offset_bottom = -48.0
 grow_horizontal = 2
 grow_vertical = 0
 max_value = 60.0
@@ -135,16 +132,15 @@ alignment = 2
 editable = false
 
 [node name="SpinBoxSeconds" type="SpinBox" parent="."]
-visible = false
 anchors_preset = 7
 anchor_left = 0.5
 anchor_top = 1.0
 anchor_right = 0.5
 anchor_bottom = 1.0
 offset_left = 10.0
-offset_top = -100.0
+offset_top = -98.0
 offset_right = 110.0
-offset_bottom = -50.0
+offset_bottom = -48.0
 grow_horizontal = 2
 grow_vertical = 0
 max_value = 59.0
@@ -157,12 +153,27 @@ anchor_left = 0.5
 anchor_top = 0.5
 anchor_right = 0.5
 anchor_bottom = 0.5
-offset_left = -20.0
+offset_left = 1.52588e-05
-offset_top = -100.0
+offset_top = -104.0
-offset_right = 20.0
+offset_right = 1.52588e-05
-offset_bottom = -60.0
+offset_bottom = -104.0
 grow_horizontal = 2
 grow_vertical = 2
+size_flags_vertical = 4
+
+[node name="VolumeSlider" type="HSlider" parent="."]
+anchors_preset = 8
+anchor_left = 0.5
+anchor_top = 0.5
+anchor_right = 0.5
+anchor_bottom = 0.5
+offset_left = -144.0
+offset_top = 90.0
+offset_right = 152.0
+offset_bottom = 110.0
+grow_horizontal = 2
+grow_vertical = 2
+value = 50.0
 
 [connection signal="timeout" from="Timer" to="." method="_on_timer_timeout"]
 [connection signal="pressed" from="PlayButton" to="." method="_on_play_button_pressed"]

Scenes/circular_progress_bar.tscn

@@ -1,25 +1,49 @@
-[gd_scene load_steps=4 format=3 uid="uid://cxho0ur4g4r2c"]
+[gd_scene load_steps=8 format=3 uid="uid://cxho0ur4g4r2c"]
 
-[ext_resource type="Texture2D" uid="uid://c2bey6otu2m8m" path="res://Assets/flair_circle_red_0.png" id="1_uwsh4"]
 [ext_resource type="Script" path="res://Scripts/circular_progress_bar.gd" id="2_c3xrc"]
-[ext_resource type="Texture2D" uid="uid://rxgucw2h8hhv" path="res://Assets/flair_circle_border.png" id="3_o171a"]
+[ext_resource type="Shader" path="res://Scripts/Shaders/circular_progress_bar.gdshader" id="4_8eawh"]
+
+[sub_resource type="Gradient" id="Gradient_0ph84"]
+offsets = PackedFloat32Array(1)
+colors = PackedColorArray(0, 0, 0, 0.521569)
+
+[sub_resource type="GradientTexture1D" id="GradientTexture1D_fwgo2"]
+gradient = SubResource("Gradient_0ph84")
+
+[sub_resource type="Gradient" id="Gradient_0ugux"]
+offsets = PackedFloat32Array(1)
+colors = PackedColorArray(0, 0, 0.921569, 1)
+
+[sub_resource type="GradientTexture1D" id="GradientTexture1D_kdn2m"]
+gradient = SubResource("Gradient_0ugux")
+
+[sub_resource type="ShaderMaterial" id="ShaderMaterial_ht6os"]
+shader = ExtResource("4_8eawh")
+shader_parameter/value = 25.0
+shader_parameter/thickness = 15.0
+shader_parameter/offset = null
+shader_parameter/smoothing = 5.0
+shader_parameter/fg = SubResource("GradientTexture1D_kdn2m")
+shader_parameter/bg = SubResource("GradientTexture1D_fwgo2")
 
 [node name="CircularProgressBar" type="Control"]
 layout_mode = 3
 anchors_preset = 0
-offset_right = 40.0
+offset_left = -15.0
-offset_bottom = 40.0
+offset_top = -15.0
+offset_right = 15.0
+offset_bottom = 15.0
 script = ExtResource("2_c3xrc")
 
-[node name="TextureProgressBar" type="TextureProgressBar" parent="."]
+[node name="Panel" type="Panel" parent="."]
-offset_left = -64.0
+material = SubResource("ShaderMaterial_ht6os")
-offset_top = -64.0
+layout_mode = 1
-offset_right = 64.0
+anchors_preset = -1
-offset_bottom = 64.0
+anchor_left = 0.5
-value = 33.0
+anchor_top = 0.5
-fill_mode = 4
+anchor_right = 0.5
-texture_under = ExtResource("1_uwsh4")
+anchor_bottom = 0.5
-texture_over = ExtResource("3_o171a")
+offset_left = -155.0
-texture_progress = ExtResource("1_uwsh4")
+offset_top = -155.0
-tint_under = Color(0, 0, 0, 0.278431)
+offset_right = 155.0
-tint_progress = Color(0, 0, 0.964706, 1)
+offset_bottom = 155.0

Scripts/Shaders/circular_progress_bar.gdshader

@@ -0,0 +1,34 @@
+shader_type canvas_item;
+
+uniform float value: hint_range(0, 100); // %
+uniform float thickness: hint_range(0, 100) = 30.; // % thickness
+uniform sampler2D fg: source_color;
+uniform sampler2D bg: hint_default_black ;
+uniform float offset: hint_range(0, 100); // %
+uniform float smoothing: hint_range(0, 100) = 5.;
+
+void fragment() {
+	vec2 point = UV - vec2(0.5);
+	//float PI = 3.14159265358979323846;
+	float ang = (1. - atan(point.x, point.y) / PI) * 50. - offset;
+	if (ang < 0.)
+		ang += 100.;
+	float s = smoothing / 1000.;
+	float k = PI / 2. / s;
+	float r1 = .5 - thickness / 200.;
+	float r2 = .5;
+	float r = length(point);
+	float uy = (r2 - r) / (r2 - r1);
+	if (r > r2 || r < r1)
+		COLOR.a = 0.;
+	else {
+		if (ang <= value) 
+			COLOR = texture(fg, vec2(ang / 100., uy));
+		else
+			COLOR = texture(bg, vec2(ang / 100., uy));
+		if ((r2 - r) < s)
+			COLOR.a = sin((r2 - r) * k);
+		if ((r - r1) < s)
+			COLOR.a = sin((r - r1) * k);
+	}
+}

Scripts/TimerHUD.gd

@@ -3,7 +3,8 @@ extends CanvasLayer
 @export var default_minutes = 1
 var seconds
 var minutes
-var total_seconds
+var max_seconds
+var current_seconds
 var timer_is_playing = false
 signal play_timer
 
@@ -17,10 +18,17 @@ func _ready():
 	$SpinBoxMinutes.value = default_minutes
 	$SpinBoxSeconds.get_line_edit().context_menu_enabled = false
 	$SpinBoxSeconds.value = default_seconds
+	$SpinBoxMinutes.visible = false
+	$SpinBoxSeconds.visible = false
+	$MinutesLabel.visible = false
+	$SecondsLabel.visible = false
+
 	# Calculate the total seconds
-	total_seconds = default_minutes * 60 + default_seconds
+	max_seconds = default_minutes * 60 + default_seconds
-	$CircularProgressBar.set_max_value(total_seconds)
+	current_seconds = max_seconds
-	$CircularProgressBar.set_value(total_seconds)
+	#$CircularProgressBar.set_max_value(current_seconds)
+	$CircularProgressBar.set_value(calculate_equivalent_progress(current_seconds))
+	
 	
 
 
@@ -33,11 +41,14 @@ func reset_timer():
 	seconds = default_seconds
 	minutes = default_minutes
 	# Calculate the total seconds
-	total_seconds = default_minutes * 60 + default_seconds
+	max_seconds = default_minutes * 60 + default_seconds
+	current_seconds = max_seconds
 
 func reset_remaining_time_label():
 	## Resets the value of the label
-	$RemainingTime.text = str(default_minutes) + ":" + str(default_seconds)
+	var minutes_str = str(default_minutes) if default_minutes >= 10 else "0" + str(default_minutes)
+	var seconds_str = str(default_seconds) if default_seconds >= 10 else "0" + str(default_seconds)
+	$RemainingTime.text = minutes_str + ":" + seconds_str
 
 func stop_timer():
 	## Stops the timer, sets as 'false' the timer_is_playing flag and also
@@ -45,6 +56,10 @@ func stop_timer():
 	timer_is_playing = false
 	$Timer.paused = false
 	$Timer.stop()
+	$CircularProgressBar.set_value(calculate_equivalent_progress(max_seconds))
+	
+func calculate_equivalent_progress(value):
+	return (value * 100) / max_seconds
 
 func _on_play_button_pressed():
 	
@@ -61,10 +76,16 @@ func _on_timer_timeout():
 		if minutes > 0:
 			minutes -= 1
 			seconds == 60
+		else:
+			$Timer.stop()
+	elif seconds > 0:
 		seconds -= 1
-	total_seconds -= 1
+	current_seconds -= 1
-	$RemainingTime.text = str(minutes) + ":" + str(seconds)
+	
-	$CircularProgressBar.set_value(total_seconds)
+	var minutes_str = str(minutes) if minutes >= 10 else "0" + str(minutes)
+	var seconds_str = str(seconds) if seconds >= 10 else "0" + str(seconds)
+	$RemainingTime.text = minutes_str + ":" + seconds_str
+	$CircularProgressBar.set_value(calculate_equivalent_progress(current_seconds))
 
 
 func _on_pause_button_pressed():

Scripts/circular_progress_bar.gd

@@ -5,16 +5,10 @@ extends Control
 func _ready():
 	pass
 
-
 # Called every frame. 'delta' is the elapsed time since the previous frame.
 func _process(delta):
 	pass
 
 func set_value(value):
-	$TextureProgressBar.value = value	
+	$Panel.material.set_shader_parameter("value", value)
 	
-func set_min_value(value):
-	$TextureProgressBar.min_value = value
-	
-func set_max_value(value):
-	$TextureProgressBar.max_value = value

project.godot

@@ -28,6 +28,14 @@ window/main_scene="res://Scenes/TimerHUD.tscn"
 
 enabled=PackedStringArray("res://addons/kanban_tasks/plugin.cfg")
 
+[file_customization]
+
+folder_colors={
+"res://Assets/": "purple",
+"res://Scenes/": "blue",
+"res://Scripts/": "green"
+}
+
 [rendering]
 
 renderer/rendering_method="gl_compatibility"