From f59bec5bbe5e0af67b96a44e678521b81cda8446 Mon Sep 17 00:00:00 2001 From: JKuijperM Date: Tue, 26 Mar 2024 11:08:02 +0100 Subject: [PATCH] Modified the progress bar functionality. In the previous version, works with images/textures, now is by a shader --- Assets/flair_circle_border.png | Bin 4657 -> 0 bytes Assets/flair_circle_border.png.import | 34 -------- Assets/flair_circle_red_0.png | Bin 1032 -> 0 bytes Assets/flair_circle_red_0.png.import | 34 -------- Scenes/TimerHUD.tscn | 73 ++++++++++-------- Scenes/circular_progress_bar.tscn | 58 ++++++++++---- .../Shaders/circular_progress_bar.gdshader | 34 ++++++++ Scripts/TimerHUD.gd | 41 +++++++--- Scripts/circular_progress_bar.gd | 8 +- project.godot | 8 ++ 10 files changed, 157 insertions(+), 133 deletions(-) delete mode 100644 Assets/flair_circle_border.png delete mode 100644 Assets/flair_circle_border.png.import delete mode 100644 Assets/flair_circle_red_0.png delete mode 100644 Assets/flair_circle_red_0.png.import create mode 100644 Scripts/Shaders/circular_progress_bar.gdshader diff --git a/Assets/flair_circle_border.png b/Assets/flair_circle_border.png deleted file mode 100644 index 17a4b74c698793b9033084b5399df840b374e4a5..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 4657 zcmeHLdsGuw8Xt&OjIyl{6co2(M2q4iGn2_vA|i>9)j$M9q+4K;nZ&6i6O$nch!|XL z5p_jZPq+1fwe%bmx?Ah2$JeR|zHsYf6+GG^1s~Pc3R;h-RrXFmz_UGP59e(EW6qh( zz4!aw-~GPd_uYFkv&xtlA1oXrgdiwbpP)?!Pal5=3Bd2qP3xb6$MO8sbS|0nzz!#C zVRC4g%X82$?PV+w*b2a-mFOE%91dV&p z@E7~I@J)nmV#5}}_IXi?h>4-snnJnOV;jHBy2lCEY=BF$P8Sx|w=mhCj-NgMvqM9k zPf5+~cu3cbD)(G|^x@cfisAC{2V?hGSN^fiy|lV;MM&+a+)H2Wd$H#RdL+Jj*@~y7 zkpWY8)cbz^JR*3NZ^7{2%_`6|%q`oR4R_ooV&A^|#)9E367iZMR#k~p! zgs^4ldQHNK8R4~ADY~5@!=_azsftAR++nAZYengiwv}n)=7?V`pA@VwS^Zg4hNIQI z`(9IXRpp;5;h;jFa+-4T!Gu*EvxSH$TKUtdLrc~j^7t-PpjUn@3EX7~+v%Ni?si)3 zw)ySYa_AWviKQf!kCwKEXFX|cdn~TrbNKuV)w4~9&p>4f;q*ar82i?FdxrYX(&o3K z^ujh(TY2p0h{Br(e|$Lh&W;m-=ZA)Ud^vh?ar#vEm){((qAF^nHKguJWY+0}RgT8y zs~e3_TwE*p8Xaw|ExiH()ZKo>n}qG<-3b4-|joQ&UPp-u)VA(>Wlk-m-`MRUHZX> z6bu-eBN*LaGc*ds9^ZHGyoX1`Km7Md;lQRBYyLTT(9mxKi)8!v*H2G;+cz|KZ-F2@ zJaB~WY~~ZMhqbaD+nC2s1g2)^_QqNBu7RR+GoZNA4Rh3H)+Qz?)6HA$RCE3!vx*YMOczFb)quc8 zb0qAw<=9SXP# zE(*}oh!%33LoJbbJRY$}DrTKl38qr1Bq%PyaReX`SDu|Cy@=g4fv4!?(9$lmlW}ki zYlnGG(!}O+8j%Rt;aC3I90o%-z1`KN0?j7n@aN$(jhPUi+BT@L-~3|A`H zqmpFW#pXKAw9ZZ2xe2`~;`Ih&Hv=D%m9aVeK>_hzTZ}Sy;~crp96yFKOXwWh21s4N zKkPL;$5?vAdd)Z9;t!{{BVf61{@2j2V)ugq%3x4yS#vJGs9viP@&2kQ*33|9f761a z7)cT+f|61SAyg!dkQgmTP%~-5WEh1}Dn&0Uz1_u;b~DXW0dg?|c+4b<%W#}Rlq!`O zA#hxVC`~F7p-2_2LcvW?%3c&nP6kvZnbX@Vo{9ogN|O|oS!6PVu&20k%r5Dt)*NqD&a;!6zWpgwl-dmWb>^2*~hN4K0)RG(xRzq<@jY`$HEEU7le4B_uF*Vu?&r*yf z?|-5B?E^=5COv_1f%WtJL!Emng+I$*{>=o#{%xTq&7C2*NHzD z)(Uh4T7d%fYXwJk<#6)r-gp+$e1d>v2r5N-B$JCIUBOED6XR91(USktBiaw>b;N*q zonzqW0wu!kz1iZ+*)+0{bG1&roJW2^3o{(s5~t#_&8qZeku&y*c=r! zYRT7UN1jv=_at+@16D`rYqi6c=}OC>O3CM$WyFEA33x!AUa5o@R4&+o*mmO3zCp*n zIiMXGbIU!@H}&Plrkha2FV!`Zem}Pjs)@O{5-NFgQVo%%sf)5nL zm>ZYQDE5wNtbhK=ht=ys2A9^`Pi(&a-pU|>%1ba4!+xb=4S z^&)LW9*3>0)As%OfBjyH+Q$@bC#JWhM$Pk*UrUGvaK6bGlVD&@VBl$BG+<-X|JfEKZ~Ez$)Ag&8VZM*s5taWc2c!bu#`6@`awN<(4t(~NkzrSr9FyRI z#-&AoJ>&hoxfwUS&0n^tc=yQ-e;H={%Dz}T-EdnNL+RQ4mM4qWSq5)q%s5^4 z(&<6OU8V=;e)0ZX^*!A>;yQ!CjE^mD{tuXsYGfS+c=_v zVdLR{to9u;4Z$oXFYSdzlo&bWW2LhBwhPo9(>>tD`$+2GM}=^s10Naw+|$`t#}Z)M zu%+B%l^o+0rv-Nz!j)Z=8s46A@UYut(r{Qer|NZm@XqNAleVuFPgwm!_<`69yN1Vt z5nKlpOP19&aPns!NIvkD*}{g8p|*pi(@f-FYdAw9_ne#n_6t|voSiCKJDowyEKOXn zxz#km&f+w~nHl0tuh-vZ`Rm*8bIl~ifCveOGy{F+2Zr03bhzg7G#q{;z&hbo2Y&1!nt>t$<&h6#*_~Wl`vUmRa>%S>>i{7p)ZfDYe>bzx|lK%5H zx3GRrb8qx4*{;h=DWwuWc)OCjk8#T}Y;-N&(m3&S({|qN zRkPQHMVR%k^sIURym@|G1=cEv4b|j%7Q;XK^G;uZT}Ln^z!ZwT7ob z){5P1y3Cwn&)|bq%Vs}Va^FJiKx)>kUvJ{;9*7+;yWn1ME&f_C&%)1Nj1BLlzmD8r znA7n3#f?ku+o##tutnK^6zy9w<%v>y4c`|FwR7wDChAUNI6m3#a^%yr3ynLEFj`Mm zU{_JkY253=v?k}*UiD>pa}KWjUAx&!jy=w<+OXwCy@c~`iJaS7!f$d}l2(Vbgz8;h zcaLLDQS3a?IjLq&_Zp@h@r!-FxW+tp;l=GbCYOxNE0<1Q9bdNev+<=0@3l{snD}`*>si+J*;ea>h#?Z2}xZ{>v2+*?0l*KYe-w>HV5!i6Jn l>(qkB_Bw0_7+~4u1AnXefi-R6%u^YFz|+;wWt~$(699>i=NJG0 diff --git a/Assets/flair_circle_red_0.png.import b/Assets/flair_circle_red_0.png.import deleted file mode 100644 index a9161c9..0000000 --- a/Assets/flair_circle_red_0.png.import +++ /dev/null @@ -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 diff --git a/Scenes/TimerHUD.tscn b/Scenes/TimerHUD.tscn index bad323a..08c119c 100644 --- a/Scenes/TimerHUD.tscn +++ b/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_top = -140.0 -offset_right = -37.0 -offset_bottom = -117.0 +offset_left = -88.5 +offset_top = -138.0 +offset_right = -25.5 +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_top = -140.0 -offset_right = 72.0 -offset_bottom = -117.0 +offset_left = 20.0 +offset_top = -138.0 +offset_right = 84.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_bottom = -50.0 +offset_top = -98.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_top = -100.0 -offset_right = 20.0 -offset_bottom = -60.0 +offset_left = 1.52588e-05 +offset_top = -104.0 +offset_right = 1.52588e-05 +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"] diff --git a/Scenes/circular_progress_bar.tscn b/Scenes/circular_progress_bar.tscn index ac8d51c..4c0fd32 100644 --- a/Scenes/circular_progress_bar.tscn +++ b/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_bottom = 40.0 +offset_left = -15.0 +offset_top = -15.0 +offset_right = 15.0 +offset_bottom = 15.0 script = ExtResource("2_c3xrc") -[node name="TextureProgressBar" type="TextureProgressBar" parent="."] -offset_left = -64.0 -offset_top = -64.0 -offset_right = 64.0 -offset_bottom = 64.0 -value = 33.0 -fill_mode = 4 -texture_under = ExtResource("1_uwsh4") -texture_over = ExtResource("3_o171a") -texture_progress = ExtResource("1_uwsh4") -tint_under = Color(0, 0, 0, 0.278431) -tint_progress = Color(0, 0, 0.964706, 1) +[node name="Panel" type="Panel" parent="."] +material = SubResource("ShaderMaterial_ht6os") +layout_mode = 1 +anchors_preset = -1 +anchor_left = 0.5 +anchor_top = 0.5 +anchor_right = 0.5 +anchor_bottom = 0.5 +offset_left = -155.0 +offset_top = -155.0 +offset_right = 155.0 +offset_bottom = 155.0 diff --git a/Scripts/Shaders/circular_progress_bar.gdshader b/Scripts/Shaders/circular_progress_bar.gdshader new file mode 100644 index 0000000..b4e34fb --- /dev/null +++ b/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); + } +} \ No newline at end of file diff --git a/Scripts/TimerHUD.gd b/Scripts/TimerHUD.gd index 799f676..7b600c9 100644 --- a/Scripts/TimerHUD.gd +++ b/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 - $CircularProgressBar.set_max_value(total_seconds) - $CircularProgressBar.set_value(total_seconds) + max_seconds = default_minutes * 60 + default_seconds + current_seconds = max_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 - seconds -= 1 - total_seconds -= 1 - $RemainingTime.text = str(minutes) + ":" + str(seconds) - $CircularProgressBar.set_value(total_seconds) + else: + $Timer.stop() + elif seconds > 0: + seconds -= 1 + current_seconds -= 1 + + 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(): diff --git a/Scripts/circular_progress_bar.gd b/Scripts/circular_progress_bar.gd index 472dcc8..b2043e9 100644 --- a/Scripts/circular_progress_bar.gd +++ b/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 - -func set_min_value(value): - $TextureProgressBar.min_value = value + $Panel.material.set_shader_parameter("value", value) -func set_max_value(value): - $TextureProgressBar.max_value = value diff --git a/project.godot b/project.godot index 2e5afc9..c66ed97 100644 --- a/project.godot +++ b/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"