Release commit

InfoBar.gd

@@ -0,0 +1,17 @@
+extends HBoxContainer
+
+
+# Called when the node enters the scene tree for the first time.
+func _ready() -> void:
+	%ButHelp.button_down.connect(_help_show)
+
+
+
+func _help_show():
+	if %PanelHelp.visible == false:
+		UI.tween_alpha(%PanelHelp, false, false)
+		get_node("/root/Main")._on_window_resized()
+	else:
+		%PanelHelp._help_exit()
+
+

Main.gd

@@ -44,16 +44,22 @@ func _ready() -> void:
 	get_viewport().size_changed.connect(_on_window_resized)
 	%MenuButtonL.get_popup().id_pressed.connect(_MenuButtonL_pressed)
 	%MenuButtonR.get_popup().id_pressed.connect(_MenuButtonR_pressed)
+
+	#Effects
+	for i in %HUD.get_children():
+		if i != %PanelHelp: #PanelHelp should stay hidden
+			UI.tween_alpha(i, false, false)
 
 func _unhandled_input(event):
-	if event is InputEventMouseButton:
+	if event is InputEventMouseButton: #Prepare to drag slider
 		mouse_pos = %ViewTop.get_local_mouse_position()
 
 		if mouse_pos > Vector2(0,0) and mouse_pos < %ViewBottom.size and compare_focused == false:
 			compare_focused = true
 		else:
 			compare_focused = false
-		#Switch to mode 1, cycle through images.
+
+	#Switch to mode 1, cycle through images.
 	if Input.is_action_just_pressed("ui_previous") and !Input.is_key_pressed(KEY_CTRL):
 		if mode == 0: mode_switch(1)
 		compare_files_current = max(compare_files_current - 1, 0)
@@ -62,14 +68,24 @@ func _unhandled_input(event):
 		if mode == 0: mode_switch(1)
 		compare_files_current = min(compare_files_current + 1, compare_files.size() - 1)
 		_MenuButtonL_pressed(compare_files_current)
+
+	#Other hotkeys
+	if Input.is_action_just_pressed("ui_camera_center"): %UtilityBar._camera_center()
+	if Input.is_action_just_pressed("ui_zoom_reset"): %UtilityBar._zoom_reset()
+	if Input.is_action_just_pressed("ui_compare_reset"): %UtilityBar._compare_reset()
+	if Input.is_action_just_pressed("ui_help"): %InfoBar._help_show()
 
 func _process(delta: float) -> void:
 	mouse_pos = %ViewTop.get_local_mouse_position()
 	if Input.is_mouse_button_pressed(1) and compare_top.texture != null and compare_bottom.texture != null and compare_focused == true:
 		if mouse_pos > Vector2(0,0) and mouse_pos < %ViewBottom.size:
 			%ViewTop.size.x = mouse_pos.x
-			vsep_timer = vsep_delay
-			%VSeparator.visible = true
+
+			#Slider stuff
+			vsep_timer = vsep_delay	
+			if %VSeparator.visible == false or %VSeparator.modulate != Color("ffffff"):
+				%VSeparator.visible = true
+				%VSeparator.modulate = Color("ffffff")
 			%VSeparator.size.y = %ViewBottom.size.y
 			%VSeparator.position = Vector2(mouse_pos.x + compare_offset.x - %VSeparator.size.x/2,compare_offset.y)
 			mode_switch(0)
@@ -81,12 +97,9 @@ func _process(delta: float) -> void:
 		vsep_timer -= 1
 
 	if vsep_timer == 0 and %VSeparator.visible == true:
-		%VSeparator.visible = false
+		UI.tween_alpha(%VSeparator, true, true)
 
-	if compare_top.texture == null or compare_bottom.texture == null:
-		%Tip.visible = true
-	else:
-		%Tip.visible = false
+
 
 
 func views_resize(): #Mainly here to handle comparisons with different-sized images
@@ -162,6 +175,9 @@ func process_files(files): #Allow selection of image in the UI
 	if first_start == true and compare_files.size() > 1: #Autoload images once we have a full comparison
 		_MenuButtonL_pressed(0)
 		_MenuButtonR_pressed(1)
+		UI.tween_alpha(compare_top, false, false)
+		UI.tween_alpha(compare_bottom, false, false)
+		UI.tween_alpha(%Tip, true, true)
 
 		%Camera2D.position = %ViewTop.size/2
 		compare_files_current = 0
@@ -194,14 +210,16 @@ func compare_image_load(path, texturerect): #Loads the actual image into the com
 	views_resize()
 
 func comparison_reset():
-	compare_top.texture = null
-	compare_bottom.texture = null
 	compare_files_current = -1
 	previous_image_dimensions = Vector2(0,0)
 	compare_files = []
 	%MenuButtonL.get_popup().clear()
 	%MenuButtonR.get_popup().clear()
 	temp_files_clear()
+	UI.texture_tween_alpha(compare_top, true)
+	UI.texture_tween_alpha(compare_bottom, true)
+	UI.tween_alpha(%Tip, false, false)
+	UI.tween_alpha(%VSeparator, true, true)
 
 
 func _notification(notification): #On exit
@@ -234,7 +252,9 @@ func _on_window_resized():
 
 	%TopBar.position = Vector2(window_width/2 - %TopBar.size.x/2, 32)
 	%Tip.position = window_dimensions/2 - %Tip.size/2
+	if %PanelHelp.visible == true: %PanelHelp.position = window_dimensions/2 - %PanelHelp.custom_minimum_size/2
 	%UtilityBar.position = Vector2(64, window_height - 128)
+
 	%InfoBar.position = Vector2(window_width - 64 - %InfoBar.size.x, window_height - 128)
 
 func temp_files_clear():

Main.tscn

@@ -1,13 +1,18 @@
-[gd_scene load_steps=9 format=3 uid="uid://1rxr1ouddgbt"]
+[gd_scene load_steps=14 format=3 uid="uid://1rxr1ouddgbt"]
 
 [ext_resource type="Script" path="res://Main.gd" id="1_kmuaj"]
+[ext_resource type="Texture2D" uid="uid://c0xwld3gdkpos" path="res://assets/icon_drop.png" id="3_cqwdm"]
 [ext_resource type="Theme" uid="uid://duthmaywmgemh" path="res://assets/Main.tres" id="3_vdeiu"]
 [ext_resource type="Texture2D" uid="uid://cyax4i0sgj5e0" path="res://assets/icon_reset.png" id="4_0py1c"]
 [ext_resource type="Script" path="res://UtilityBar.gd" id="4_an5dr"]
 [ext_resource type="Script" path="res://Camera2D.gd" id="4_dqgki"]
 [ext_resource type="Texture2D" uid="uid://0wdohl1e8st8" path="res://assets/icon_image_reset.png" id="5_fgbhl"]
 [ext_resource type="Texture2D" uid="uid://d4ifpormas2as" path="res://assets/icon_focus.png" id="6_hkw8q"]
 [ext_resource type="Texture2D" uid="uid://cm4ri8xxrdlpj" path="res://assets/icon_help.png" id="8_gh5p6"]
+[ext_resource type="Script" path="res://InfoBar.gd" id="9_leqtl"]
+[ext_resource type="Texture2D" uid="uid://ccwpn54jj8as6" path="res://assets/logo.png" id="10_4d0et"]
+[ext_resource type="Script" path="res://PanelHelp.gd" id="11_0tg4f"]
+[ext_resource type="FontFile" uid="uid://c4sdsntgoqvby" path="res://assets/Poppins-SemiBold.ttf" id="11_3ttfp"]
 
 [node name="Main" type="Node"]
 script = ExtResource("1_kmuaj")
@@ -60,8 +65,10 @@ stretch_mode = 4
 
 [node name="VSeparator" type="VSeparator" parent="."]
 unique_name_in_owner = true
+visible = false
+custom_minimum_size = Vector2(4, 64)
 offset_right = 4.0
-offset_bottom = 3.0
+offset_bottom = 408.0
 mouse_filter = 1
 
 [node name="Camera2D" type="Camera2D" parent="."]
@@ -74,16 +81,27 @@ script = ExtResource("4_dqgki")
 camera_speed = 1000
 
 [node name="HUD" type="CanvasLayer" parent="."]
+unique_name_in_owner = true
 
-[node name="Tip" type="Label" parent="HUD"]
+[node name="Tip" type="VBoxContainer" parent="HUD"]
 unique_name_in_owner = true
 modulate = Color(1, 1, 1, 0.588235)
-offset_left = 649.0
-offset_top = 453.0
-offset_right = 1353.0
-offset_bottom = 641.0
+offset_left = 673.0
+offset_top = 251.0
+offset_right = 1293.0
+offset_bottom = 699.0
+
+[node name="IconDrop" type="TextureRect" parent="HUD/Tip"]
+layout_mode = 2
+size_flags_horizontal = 4
+size_flags_vertical = 4
+texture = ExtResource("3_cqwdm")
+stretch_mode = 2
+
+[node name="LabelTip" type="Label" parent="HUD/Tip"]
+layout_mode = 2
 theme = ExtResource("3_vdeiu")
-theme_override_colors/font_color = Color(0.0588235, 0.619608, 0.87451, 1)
+theme_override_colors/font_color = Color(0.0588235, 0.619608, 0.87451, 0.588235)
 theme_override_font_sizes/font_size = 64
 text = "Drag in two images
 to get started."
@@ -160,6 +178,7 @@ offset_top = 1013.0
 offset_right = 1904.0
 offset_bottom = 1069.0
 alignment = 2
+script = ExtResource("9_leqtl")
 
 [node name="ButHelp" type="Button" parent="HUD/InfoBar"]
 unique_name_in_owner = true
@@ -168,3 +187,69 @@ size_flags_vertical = 4
 tooltip_text = "Reset comparison."
 theme = ExtResource("3_vdeiu")
 icon = ExtResource("8_gh5p6")
+
+[node name="PanelHelp" type="PanelContainer" parent="HUD"]
+unique_name_in_owner = true
+visible = false
+custom_minimum_size = Vector2(800, 621)
+offset_right = 800.0
+offset_bottom = 621.0
+theme = ExtResource("3_vdeiu")
+script = ExtResource("11_0tg4f")
+
+[node name="VBoxContainer" type="VBoxContainer" parent="HUD/PanelHelp"]
+layout_mode = 2
+size_flags_vertical = 0
+
+[node name="TextureRect" type="TextureRect" parent="HUD/PanelHelp/VBoxContainer"]
+layout_mode = 2
+texture = ExtResource("10_4d0et")
+stretch_mode = 5
+
+[node name="LabelHeader" type="Label" parent="HUD/PanelHelp/VBoxContainer"]
+layout_mode = 2
+size_flags_vertical = 1
+theme_override_colors/font_color = Color(0.0588235, 0.619608, 0.87451, 1)
+theme_override_font_sizes/font_size = 48
+text = "Simple Image Compare!"
+horizontal_alignment = 1
+
+[node name="LabelInfo" type="RichTextLabel" parent="HUD/PanelHelp/VBoxContainer"]
+unique_name_in_owner = true
+layout_mode = 2
+theme_override_colors/default_color = Color(0.0588235, 0.619608, 0.87451, 1)
+theme_override_font_sizes/normal_font_size = 16
+theme_override_font_sizes/bold_font_size = 16
+theme_override_font_sizes/italics_font_size = 16
+theme_override_font_sizes/bold_italics_font_size = 16
+theme_override_font_sizes/mono_font_size = 16
+bbcode_enabled = true
+text = "Easy image comparisons. A completely free and open source application. Visit the [url=www.github.com/Sirosky/Simple-Image-Compare]Github[/url] for more information.
+
+Material Symbols used under [url=www.apache.org/licenses/LICENSE-2.0]Apache License 2.0[/url]."
+fit_content = true
+
+[node name="HSeparator" type="HSeparator" parent="HUD/PanelHelp/VBoxContainer"]
+layout_mode = 2
+
+[node name="LabelControls" type="RichTextLabel" parent="HUD/PanelHelp/VBoxContainer"]
+layout_mode = 2
+theme_override_colors/default_color = Color(0.0588235, 0.619608, 0.87451, 1)
+theme_override_fonts/bold_font = ExtResource("11_3ttfp")
+bbcode_enabled = true
+text = "[b]LMB[/b] drag over image: Activate slider comparison mode and drag the slider.
+[b]Q/E[/b] or [b]Scroll[/b]: Activate full image comparison and cycle through the images.
+[b]WASD[/b], [b]arrow keys[/b], or [b]RMB[/b] drag: Pan the camera.
+[b]Control + Scroll[/b]: Zoom.
+[b]Control + R[/b]: Reset the comparison.
+[b]C[/b]: Center the camera.
+[b]R[/b] or [b]Z[/b]: Reset zoom.
+[b]H[/b]: Display help."
+fit_content = true
+
+[node name="ButExit" type="Button" parent="HUD/PanelHelp/VBoxContainer"]
+unique_name_in_owner = true
+layout_mode = 2
+theme = ExtResource("3_vdeiu")
+theme_override_colors/font_color = Color(0.0588235, 0.619608, 0.87451, 1)
+text = "Got it."

PanelHelp.gd

@@ -0,0 +1,19 @@
+extends PanelContainer
+
+
+# Called when the node enters the scene tree for the first time.
+func _ready() -> void:
+
+	%ButExit.button_down.connect(_help_exit)
+	%LabelInfo.meta_clicked.connect(_on_meta_clicked)
+
+
+# Called every frame. 'delta' is the elapsed time since the previous frame.
+func _process(delta: float) -> void:
+	if visible == true: size = Vector2(800, 621) #Bandaid fix, because for some stupid reason the y coordinate keeps exploding.
+
+func _help_exit():
+	UI.tween_alpha(self, true, true)
+
+func _on_meta_clicked(meta):
+	OS.shell_open(meta)

UtilityBar.gd

@@ -4,7 +4,7 @@ extends HBoxContainer
 
 # Called when the node enters the scene tree for the first time.
 func _ready() -> void:
-	%ButImageReset.button_down.connect(_comparison_reset)
+	%ButImageReset.button_down.connect(_compare_reset)
 	%ButZoomReset.button_down.connect(_zoom_reset)
 	%ButCenter.button_down.connect(_camera_center)
 
@@ -13,7 +13,7 @@ func _ready() -> void:
 func _process(delta: float) -> void:
 	%LabelZoom.text = str(snapped(%Camera2D.zoom.x * 100, .01)) + "%"
 
-func _comparison_reset():
+func _compare_reset():
 	Main.comparison_reset()
 
 func _camera_center():

assets/Main.tres

@@ -1,6 +1,7 @@
-[gd_resource type="Theme" load_steps=9 format=3 uid="uid://duthmaywmgemh"]
+[gd_resource type="Theme" load_steps=10 format=3 uid="uid://duthmaywmgemh"]
 
 [ext_resource type="FontFile" uid="uid://dm6vwmc55lvkd" path="res://assets/Poppins-Regular.ttf" id="1_m4k4e"]
+[ext_resource type="StyleBox" uid="uid://c0yftf86nm8tx" path="res://assets/style_panel.tres" id="2_gg47a"]
 
 [sub_resource type="StyleBoxFlat" id="StyleBoxFlat_d7t3s"]
 content_margin_left = 4.0
@@ -96,5 +97,6 @@ MenuButton/colors/font_pressed_color = Color(0.556863, 0.772549, 0.870588, 1)
 MenuButton/constants/outline_size = 3
 MenuButton/font_sizes/font_size = 24
 MenuButton/fonts/font = ExtResource("1_m4k4e")
+PanelContainer/styles/panel = ExtResource("2_gg47a")
 PopupMenu/styles/hover = SubResource("StyleBoxFlat_lvbdd")
 PopupMenu/styles/panel = SubResource("StyleBoxFlat_q65hh")

assets/Poppins-SemiBold.ttf.import

@@ -0,0 +1,33 @@
+[remap]
+
+importer="font_data_dynamic"
+type="FontFile"
+uid="uid://c4sdsntgoqvby"
+path="res://.godot/imported/Poppins-SemiBold.ttf-9d86f25f37c92107ed16fc627f040ecf.fontdata"
+
+[deps]
+
+source_file="res://assets/Poppins-SemiBold.ttf"
+dest_files=["res://.godot/imported/Poppins-SemiBold.ttf-9d86f25f37c92107ed16fc627f040ecf.fontdata"]
+
+[params]
+
+Rendering=null
+antialiasing=1
+generate_mipmaps=false
+multichannel_signed_distance_field=false
+msdf_pixel_range=8
+msdf_size=48
+allow_system_fallback=true
+force_autohinter=false
+hinting=1
+subpixel_positioning=1
+oversampling=0.0
+Fallbacks=null
+fallbacks=[]
+Compress=null
+compress=true
+preload=[]
+language_support={}
+script_support={}
+opentype_features={}

assets/UI.gd

@@ -0,0 +1,42 @@
+extends Node
+
+
+#Tween the alpha value of a node, used for UI nodes. Can also hide and delete nodes once done tweening.
+func tween_alpha(node: Object, to_transparent:bool, hide:bool):
+	#to_transparent = whether we're tweening to becoming transparent. Otherwise, tweens to non-transparency.
+	#delete = whether to delete the node at the end of the tween
+	var tween = node.create_tween()
+	var result
+	node.visible = true
+
+	if to_transparent == true: #Check whether we're tweening to transparency or in reverse
+		node.modulate = Color("ffffff")
+		result = Color("ffffff00")
+	else: #Transparent to non-transparent
+		node.modulate = Color("ffffff00")
+		result = Color("ffffff")
+
+	tween.tween_property(node, "modulate", result,.3).set_trans(Tween.TRANS_SINE)
+
+	#If we're just hiding, make sure to set the visibility to false
+	if hide == true and to_transparent == true:  
+		tween.tween_callback(node.hide)
+
+func texture_tween_alpha(node: Object, to_transparent:bool):
+	var tween = node.create_tween()
+	tween.finished.connect(_texture_tween_finished.bind((node)))
+	var result
+	node.visible = true
+
+	if to_transparent == true: #Check whether we're tweening to transparency or in reverse
+		node.modulate = Color("ffffff")
+		result = Color("ffffff00")
+	else: #Transparent to non-transparent
+		node.modulate = Color("ffffff00")
+		result = Color("ffffff")
+
+	tween.tween_property(node, "modulate", result,.3).set_trans(Tween.TRANS_SINE)
+
+
+func _texture_tween_finished(node):
+	node.texture = null