From 505176d9cabe76cff7cdac6b4d4ef1c77ccb00d9 Mon Sep 17 00:00:00 2001 From: Nemrav <> Date: Fri, 28 Jul 2023 22:07:02 -0300 Subject: add piecharts --- .../ProvinceOverviewPanel/ProvinceOverviewPanel.gd | 6 + .../ProvinceOverviewPanel.tscn | 129 ++++++++++- game/src/Game/Theme/PieChart/LayeredChart.gd | 28 +++ game/src/Game/Theme/PieChart/LayeredChart.tscn | 249 +++++++++++++++++++++ game/src/Game/Theme/PieChart/PieChart.gd | 235 +++++++++++++++++++ game/src/Game/Theme/PieChart/PieChart.gdshader | 87 +++++++ game/src/Game/Theme/PieChart/PieChart.tscn | 147 ++++++++++++ game/src/Game/Theme/PieChart/PieChartMat.tres | 21 ++ game/src/Game/Theme/PieChart/chart_test.gd | 32 +++ 9 files changed, 931 insertions(+), 3 deletions(-) create mode 100644 game/src/Game/Theme/PieChart/LayeredChart.gd create mode 100644 game/src/Game/Theme/PieChart/LayeredChart.tscn create mode 100644 game/src/Game/Theme/PieChart/PieChart.gd create mode 100644 game/src/Game/Theme/PieChart/PieChart.gdshader create mode 100644 game/src/Game/Theme/PieChart/PieChart.tscn create mode 100644 game/src/Game/Theme/PieChart/PieChartMat.tres create mode 100644 game/src/Game/Theme/PieChart/chart_test.gd (limited to 'game') diff --git a/game/src/Game/GameSession/ProvinceOverviewPanel/ProvinceOverviewPanel.gd b/game/src/Game/GameSession/ProvinceOverviewPanel/ProvinceOverviewPanel.gd index 9a3690e..04a035c 100644 --- a/game/src/Game/GameSession/ProvinceOverviewPanel/ProvinceOverviewPanel.gd +++ b/game/src/Game/GameSession/ProvinceOverviewPanel/ProvinceOverviewPanel.gd @@ -7,6 +7,7 @@ extends PanelContainer @export var _rgo_icon_texture_rect : TextureRect @export var _rgo_name_label : Label @export var _buildings_container : Container +@export var _pop_culture_chart : PieChart const _missing_suffix : String = "_MISSING" @@ -121,6 +122,11 @@ func _update_info() -> void: for i in max(buildings.size(), _building_rows.size()): _set_building_row(i, buildings[i] if i < buildings.size() else {}) + #PLACEHOLDER for updating piechart + _pop_culture_chart.addOrReplaceLabel("NORTH_GERMAN",50,"North German Culture",Color.DIM_GRAY) + _pop_culture_chart.addOrReplaceLabel("FRENCH",25,"French Culture",Color.BLUE) + _pop_culture_chart.addOrReplaceLabel("SOUTH_GERMAN",7,"South German Culture",Color.FIREBRICK) + show() else: hide() diff --git a/game/src/Game/GameSession/ProvinceOverviewPanel/ProvinceOverviewPanel.tscn b/game/src/Game/GameSession/ProvinceOverviewPanel/ProvinceOverviewPanel.tscn index 7c82f10..9b4c45b 100644 --- a/game/src/Game/GameSession/ProvinceOverviewPanel/ProvinceOverviewPanel.tscn +++ b/game/src/Game/GameSession/ProvinceOverviewPanel/ProvinceOverviewPanel.tscn @@ -1,8 +1,118 @@ -[gd_scene load_steps=2 format=3 uid="uid://byq323jbel48u"] +[gd_scene load_steps=6 format=3 uid="uid://byq323jbel48u"] [ext_resource type="Script" path="res://src/Game/GameSession/ProvinceOverviewPanel/ProvinceOverviewPanel.gd" id="1_3n8k5"] - -[node name="ProvinceOverviewPanel" type="PanelContainer" node_paths=PackedStringArray("_province_name_label", "_region_name_label", "_life_rating_bar", "_total_population_label", "_rgo_icon_texture_rect", "_rgo_name_label", "_buildings_container")] +[ext_resource type="PackedScene" uid="uid://cr7p1k2xm7mum" path="res://src/Game/Theme/PieChart/PieChart.tscn" id="2_3oytt"] + +[sub_resource type="Shader" id="Shader_2k3yf"] +code = "shader_type canvas_item; + +// The center in UV coordinates, which will always +//be 0.5, the actual radius will be controlled by the control node +//const vec2 center = vec2(0.5,0.5); +uniform float radius = 0.4; + +//shadow +uniform vec2 shadow_displacement = vec2(0.75,0.75); +uniform float shadow_tightness = 10; +uniform float shadow_radius = 0.7; +uniform float shadow_thickness = 1.0; + +// Control of the slices +uniform float stopAngles[5]; +uniform vec3 colours[5]; + +// Trim +uniform vec3 trim_colour; +uniform float trim_size = 0.05; + +// The center is spotlighted by the gradient, +//control its size and falloff with these +uniform float gradient_falloff = 3.6; +uniform float gradient_base = 3.1; + +// control whether this is a donut instead of a pie chart +uniform bool donut = false; +uniform bool donut_inner_trim = false; +uniform float donut_inner_radius = 0.15; + +// get the polar coordinates of a pixel relative to the center +vec2 getPolar(vec2 UVin, vec2 center){ + vec2 relcoord = (UVin-center); + float dist = length(relcoord); + float theta = PI/2.0 + atan((relcoord.y)/(relcoord.x)); + if(UVin.x < 0.5){ + theta += PI; + } + return vec2(dist,theta); +} + +// from thebookofshaders, returns a gradient falloff +float parabola( float base, float x, float k ){ + return pow( base*x*(1.0-x), k ); +} + +float parabola_shadow(float base, float x){ + return base*x*x; +} + +void fragment() { + vec2 coords = getPolar(UV,vec2(0.5,0.5)); + float dist = coords.x; + float theta = coords.y; + + vec2 shadow_polar = getPolar(UV,vec2(0.0+shadow_displacement.x,0.0+shadow_displacement.y)); + float shadow_peak = radius+(radius-donut_inner_radius)/2.0; + float shadow_gradient = shadow_thickness+parabola_shadow(shadow_tightness*-10.0,shadow_polar.x+shadow_peak-shadow_radius); + + // inner hole of the donut => make it transparent + if(donut && dist <= donut_inner_radius){ + COLOR = vec4(0.1,0.1,0.1,shadow_gradient); + } + // inner trim + else if(donut && donut_inner_trim && dist <= donut_inner_radius + trim_size){ + COLOR = vec4(trim_colour,1.0); + } + // interior + else if(dist <= radius-trim_size){ + for(int i=0;i void: + slices[labelName] = SliceData.new(quantity,tooltip,colour) + _recalculate() + +func updateLabelQuantity(labelName:String,quantity:float) -> void: + if slices.has(labelName): + slices[labelName].quantity = quantity + _recalculate() + +func updateLabelColour(labelName:String,colour:Color) -> void: + if slices.has(labelName): + slices[labelName].colour = colour + _recalculate() + +func updateLabelTooltip(labelName:String,tooltip:String) -> void: + if slices.has(labelName): + slices[labelName].tooltip = tooltip + +func RemoveLabel(labelName:String) -> bool: + var out = slices.erase(labelName) + _recalculate() + return out + +#Perhaps in the future, a method to reorder the labels? + + +#In editor only, force the shader parameters to update whenever _draw +#is called so developers can see their changes +#otherwise, for performance, reduce the number of material resets +func _draw(): + if Engine.is_editor_hint(): + if not material: + _reset_material() + _setShaderParams() + _recalculate() + +func _ready(): + _reset_material() + _setShaderParams() + +func _reset_material(): + texture = CanvasTexture.new() + var mat_res = load("res://src/Game/Theme/PieChart/PieChartMat.tres") + material = mat_res.duplicate(true) + custom_minimum_size = Vector2(50.0,50.0) + size_flags_horizontal = Control.SIZE_SHRINK_CENTER + size_flags_vertical = Control.SIZE_SHRINK_CENTER + _recalculate() + +func _setShaderParams(): + material.set_shader_parameter("donut",donut) + material.set_shader_parameter("donut_inner_trim",donut_inner_trim) + material.set_shader_parameter("radius",radius) + material.set_shader_parameter("donut_inner_radius",donut_inner_radius/2.0) + + material.set_shader_parameter("trim_colour",Vector3(trim_colour.r,trim_colour.g,trim_colour.b)) + material.set_shader_parameter("trim_size",trim_size) + material.set_shader_parameter("gradient_falloff",slice_gradient_falloff) + material.set_shader_parameter("gradient_base",slice_gradient_base) + + material.set_shader_parameter("shadow_displacement",shadow_displacement) + material.set_shader_parameter("shadow_tightness",shadow_focus) + material.set_shader_parameter("shadow_radius",shadow_radius) + material.set_shader_parameter("shadow_thickness",shadow_thickness) + + +#Update the slice angles based on the new slice data +func _recalculate() -> void: + #where the slices are the public interface, these are the actual paramters + #which will be sent to the shader + var angles: Array = [] + var colours: Array = [] + + var total:float = 0 + for slice in slices.values(): + total += slice.quantity + + var current_arc_start:float = 0 + var current_arc_finish:float = 0 + + for slice in slices.values(): + slice.percentage = slice.quantity / total + var rads_to_cover:float = slice.percentage * 2.0*PI + current_arc_finish = current_arc_start + rads_to_cover + slice.final_angle = current_arc_finish + current_arc_start = current_arc_finish + angles.push_back(current_arc_finish) + colours.push_back(Vector3(slice.colour.r,slice.colour.g,slice.colour.b) ) + material.set_shader_parameter("stopAngles",angles) + material.set_shader_parameter("colours",colours) + + +#Process mouse to select the appropriate tooltip for the slice +func _gui_input(event:InputEvent): + if event is InputEventMouse: + var pos = event.position + var _handled:bool = _handleTooltip(pos) + +func _on_mouse_exited(): + RichTooltip.visible = false + +#takes a mouse position, and sets an appropriate tooltip for the slice the mouse +#is hovered over. Returns a boolean on whether the tooltip was handled. +func _handleTooltip(pos:Vector2) -> bool: + #is it within the circle? + var center = Vector2(size.x/2.0, size.x/2.0) + var radius = size.x/2.0 + var distance = center.distance_to(pos) + #print(distance >= donut_inner_radius/2.0) + var real_donut_inner_radius:float = radius * donut_inner_radius + if distance <= radius and (not donut or distance >= real_donut_inner_radius): + var angle = _convertAngle(center.angle_to_point(pos)) + for label in slices.keys(): + var slice = slices.get(label) + if angle <= slice.final_angle: + RichTooltip.visible = true + RichTooltip.text = _createTooltip(label) + RichTooltip.position = pos + Vector2(5,5) + get_global_rect().position #get_global_rect().position + + RichTooltip.reset_size() + + return true + else: + #Technically the corners of the bounding box + #are part of the chart, but we don't want a tooltip there + RichTooltip.visible = false + return false + +#create a list of all the values and percentages +# but with the hovered one on top and highlighted +func _createTooltip(labelHovered:String) -> String: + var tooltip:String = "" + var hoveredSlice = slices.get(labelHovered) + var formatted_percent = _formatpercent(hoveredSlice.percentage) + #TOOD: perhaps this is a bit much, but final feedback should determine this + tooltip += "[font_size=10][i][u][b]>> {name} {percentage}% <<[/b][/u][/i]".format( + {"name":hoveredSlice.tooltip,"percentage":formatted_percent}) + + for label in slices.keys(): + if label == labelHovered: continue + var slice = slices.get(label) + var percent = _formatpercent(slice.percentage) + tooltip += "\n{name} {percentage}%".format( + {"name":slice.tooltip,"percentage":percent}) + tooltip += "[/font_size]" + return tooltip + +#angle from center.angle_to_point is measured from the +x axis +#, but the chart starts from +y +#the input angle is also -180 to 180, where we want 0 to 360 +func _convertAngle(angleIn:float) -> float: + #make the angle start from +y, range is now -90 to 270 + var angle = angleIn + PI/2.0 + #adjust range to be 0 to 360 + if angle < 0: + angle = 2.0*PI + angle + return angle + +func _formatpercent(percentIn:float) -> float: + return snappedf((percentIn * 100),0.1) + + + diff --git a/game/src/Game/Theme/PieChart/PieChart.gdshader b/game/src/Game/Theme/PieChart/PieChart.gdshader new file mode 100644 index 0000000..1707b3d --- /dev/null +++ b/game/src/Game/Theme/PieChart/PieChart.gdshader @@ -0,0 +1,87 @@ +shader_type canvas_item; + +// The center in UV coordinates, which will always +//be 0.5, the actual radius will be controlled by the control node +//const vec2 center = vec2(0.5,0.5); +uniform float radius = 0.4; + +//shadow +uniform vec2 shadow_displacement = vec2(0.75,0.75); +uniform float shadow_tightness = 10; +uniform float shadow_radius = 0.7; +uniform float shadow_thickness = 1.0; + +// Control of the slices +uniform float stopAngles[5]; +uniform vec3 colours[5]; + +// Trim +uniform vec3 trim_colour; +uniform float trim_size = 0.05; + +// The center is spotlighted by the gradient, +//control its size and falloff with these +uniform float gradient_falloff = 3.6; +uniform float gradient_base = 3.1; + +// control whether this is a donut instead of a pie chart +uniform bool donut = false; +uniform bool donut_inner_trim = false; +uniform float donut_inner_radius = 0.15; + +// get the polar coordinates of a pixel relative to the center +vec2 getPolar(vec2 UVin, vec2 center){ + vec2 relcoord = (UVin-center); + float dist = length(relcoord); + float theta = PI/2.0 + atan((relcoord.y)/(relcoord.x)); + if(UVin.x < 0.5){ + theta += PI; + } + return vec2(dist,theta); +} + +// from thebookofshaders, returns a gradient falloff +float parabola( float base, float x, float k ){ + return pow( base*x*(1.0-x), k ); +} + +float parabola_shadow(float base, float x){ + return base*x*x; +} + +void fragment() { + vec2 coords = getPolar(UV,vec2(0.5,0.5)); + float dist = coords.x; + float theta = coords.y; + + vec2 shadow_polar = getPolar(UV,vec2(0.0+shadow_displacement.x,0.0+shadow_displacement.y)); + float shadow_peak = radius+(radius-donut_inner_radius)/2.0; + float shadow_gradient = shadow_thickness+parabola_shadow(shadow_tightness*-10.0,shadow_polar.x+shadow_peak-shadow_radius); + + // inner hole of the donut => make it transparent + if(donut && dist <= donut_inner_radius){ + COLOR = vec4(0.1,0.1,0.1,shadow_gradient); + } + // inner trim + else if(donut && donut_inner_trim && dist <= donut_inner_radius + trim_size){ + COLOR = vec4(trim_colour,1.0); + } + // interior + else if(dist <= radius-trim_size){ + for(int i=0;i