Very basic implementation of the graph

osu.Desktop.VisualTests/Tests/TestCaseSongProgressBar.cs

@@ -1,26 +1,35 @@
-using System;
+using System;
-using osu.Framework.Graphics;
+using OpenTK.Graphics;
-using osu.Framework.GameModes.Testing;
 using osu.Game.Graphics.UserInterface;
+using osu.Framework.Graphics;
+using osu.Framework.GameModes.Testing;
+using osu.Framework.Graphics.Sprites;
+using osu.Framework.GameModes.Testing;
+using osu.Framework.Graphics.Colour;
 
-namespace osu.Desktop.VisualTests
+namespace osu.Desktop.VisualTests
-{
+{
-    public class TestCaseSongProgressBar : TestCase
+    public class TestCaseSongProgressBar : TestCase
-    {
+    {
-        public override string Name => @"SongProgressBar";
+        public override string Name => @"SongProgressBar";
-
+
-        public override string Description => @"Tests the song progress bar";
+        public override string Description => @"Tests the song progress bar";
-
+
-        public override void Reset()
+        public override void Reset()
-        {
+        {
-            base.Reset();
+            base.Reset();
-
+
-            Add(new SongProgressBar
+            Add(new Box
             {
-                Anchor = Anchor.BottomCentre,
+                ColourInfo = ColourInfo.GradientVertical(Color4.WhiteSmoke, Color4.Gray),
-                Origin = Anchor.BottomCentre,
+                RelativeSizeAxes = Framework.Graphics.Axes.Both,
-                RelativeSizeAxes = Axes.X
+            });
-            });
+            Add(new SongProgressBar
-        }
+            {
-    }
+                Anchor = Anchor.BottomCentre,
-}
+                Origin = Anchor.BottomCentre,
+                RelativeSizeAxes = Axes.X
+            });
+        }
+    }
+}

osu.Game/Graphics/UserInterface/SongProgressBar.cs

@@ -11,13 +11,14 @@ namespace osu.Game.Graphics.UserInterface
     public class SongProgressBar : Container
     {
         private const int bar_height = 5;
-        private const int graph_height = 40;
+        private const int graph_height = 34;
         private const int handle_height = 25;
         private const int handle_width = 14;
         private Color4 fill_colour = new Color4(221, 255, 255, 255);
         private Color4 glow_colour = new Color4(221, 255, 255, 150);
 
         private Container fill;
+        private SongProgressGraph progressGraph;
         private WorkingBeatmap current;
 
         [BackgroundDependencyLoader]
@@ -33,6 +34,7 @@ protected override void Update()
             if (current?.TrackLoaded ?? false)
             {
                 fill.Width = (float)(current.Track.CurrentTime / current.Track.Length);
+                progressGraph.Progress = fill.Width;
             }
         }
 
@@ -43,7 +45,7 @@ public SongProgressBar()
 
             Children = new Drawable[]
             {
-                new SongProgressGraph
+                progressGraph = new SongProgressGraph
                 {
                     RelativeSizeAxes = Axes.X,
                     Origin = Anchor.BottomCentre,
@@ -116,7 +118,7 @@ public SongProgressBar()
                             Origin = Anchor.BottomRight,
                             Anchor = Anchor.BottomRight,
                             Width = 2,
-                            Height = bar_height + graph_height ,
+                            Height = bar_height + graph_height,
                             Children = new Drawable[]
                             {
                                 new Box

osu.Game/Graphics/UserInterface/SongProgressGraph.cs

@@ -1,9 +1,61 @@
-using osu.Framework.Graphics.Containers;
+using OpenTK;
+using System;
+using System.Collections.Generic;
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Primitives;
 
 namespace osu.Game.Graphics.UserInterface
 {
-    public class SongProgressGraph : Container
+    public class SongProgressGraph : BufferedContainer
     {
-        // TODO: Implement the song progress graph
+        private List<SongProgressGraphColumn> columns = new List<SongProgressGraphColumn>();
+
+        public override bool HandleInput => false;
+
+        private float progress;
+        public float Progress
+        {
+            get
+            {
+                return progress;
+            }
+            set
+            {
+                if (value == progress) return;
+                progress = value;
+
+                for (int i = 0; i < columns.Count; i++)
+                {
+                    columns[i].State = i <= (columns.Count * progress) ? SongProgressGraphColumnState.Lit : SongProgressGraphColumnState.Dimmed;
+                }
+
+                ForceRedraw();
+            }
+        }
+
+        public SongProgressGraph()
+        {
+            CacheDrawnFrameBuffer = true;
+            PixelSnapping = true;
+
+            Margin = new MarginPadding
+            {
+                Left = 1,
+                Right = 1
+            };
+
+            var random = new Random();
+            for (int column = 0; column < 1200; column += 3)
+            {
+                columns.Add(new SongProgressGraphColumn
+                {
+                    Position = new Vector2(column, 0),
+                    Filled = random.Next(1, 11),
+                    State = SongProgressGraphColumnState.Dimmed
+                });
+
+                Add(columns[columns.Count - 1]);
+            }
+        }
     }
 }

osu.Game/Graphics/UserInterface/SongProgressGraphColumn.cs

@@ -0,0 +1,81 @@
+using OpenTK;
+using OpenTK.Graphics;
+using System.Collections.Generic;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Sprites;
+
+namespace osu.Game.Graphics.UserInterface
+{
+    public class SongProgressGraphColumn : Container
+    {
+        private int rows = 11;
+        private Color4 empty_colour = Color4.White.Opacity(50);
+        private Color4 lit_colour = new Color4(221, 255, 255, 255);
+        private Color4 dimmed_colour = Color4.White.Opacity(175);
+
+        private List<Box> drawableRows = new List<Box>();
+
+        private int filled;
+        public int Filled
+        {
+            get
+            {
+                return filled;
+            }
+            set
+            {
+                if (value == filled) return;
+                filled = value;
+            }
+        }
+
+        private SongProgressGraphColumnState state;
+        public SongProgressGraphColumnState State
+        {
+            get
+            {
+                return state;
+            }
+            set
+            {
+                if (value == state) return;
+                state = value;
+
+                fillActive(value == SongProgressGraphColumnState.Lit ? lit_colour : dimmed_colour);
+            }
+        }
+
+        private void fillActive(Color4 color)
+        {
+            for (int i = 0; i < drawableRows.Count; i++)
+            {
+                drawableRows[i].Colour = i <= Filled ? color : empty_colour;
+            }
+        }
+
+        public SongProgressGraphColumn()
+        {
+            Size = new Vector2(4, rows * 3);
+
+            for (int row = 0; row < rows * 3; row += 3)
+            {
+                drawableRows.Add(new Box
+                {
+                    Size = new Vector2(2),
+                    Position = new Vector2(0, row + 1)
+                });
+
+                Add(drawableRows[drawableRows.Count - 1]);
+            }
+
+            // Reverse drawableRows so when iterating through them they start at the bottom
+            drawableRows.Reverse();
+        }
+    }
+
+    public enum SongProgressGraphColumnState
+    {
+        Lit, Dimmed
+    }
+}

osu.Game/osu.Game.csproj

@@ -257,6 +257,7 @@
     <Compile Include="Overlays\Pause\QuitButton.cs" />
     <Compile Include="Graphics\UserInterface\SongProgressBar.cs" />
     <Compile Include="Graphics\UserInterface\SongProgressGraph.cs" />
+    <Compile Include="Graphics\UserInterface\SongProgressGraphColumn.cs" />
   </ItemGroup>
   <ItemGroup>
     <ProjectReference Include="$(SolutionDir)\osu-framework\osu.Framework\osu.Framework.csproj">