wads 0.1.3 → 0.2.0

data/lib/wads.rb

@@ -4,4 +4,4 @@ require_relative "wads/version"
 require_relative "wads/data_structures"
 require_relative "wads/widgets"
 require_relative "wads/textinput"
-
+require_relative "wads/app"

data/run-graph

@@ -0,0 +1,3 @@
+#!/usr/bin/env bash
+
+ruby samples/graph.rb

data/run-star-wars

@@ -0,0 +1,3 @@
+#!/usr/bin/env bash
+
+ruby samples/star_wars.rb

data/run-stocks

@@ -0,0 +1,3 @@
+#!/usr/bin/env bash
+
+ruby samples/stocks.rb

data/run-theme-test

@@ -0,0 +1,3 @@
+#!/usr/bin/env bash
+
+ruby samples/theme_test.rb $1 $2 $3

data/samples/basic_gosu_with_graph_widget.rb

@@ -0,0 +1,66 @@
+require 'gosu'
+require_relative '../lib/wads'
+
+include Wads
+    #
+    # The WadsApp class provides a simple starting point to quickly build a native
+    # Ruby application using Gosu as an underlying library. It provides all the necessary
+    # hooks to get started. All you need to do is supply the parent Wads widget using
+    # the set_display(widget) method. See one of the Wads samples for example usage.
+    #
+    class BasicGosuAppWithGraph < Gosu::Window
+        def initialize
+            super(800, 600)
+            self.caption = 'Basic Gosu App with Graph Widget'
+            @font = Gosu::Font.new(22)
+            @graph_widget = GraphWidget.new(10, 110,           # x, y coordinate of top left corder
+                                            780, 480,          # width x height
+                                            create_graph,
+                                            GRAPH_DISPLAY_EXPLORER) 
+            @update_count = 0
+        end 
+
+        def create_graph
+            g = Graph.new 
+            g.add("A")
+            g.add("B")
+            g.add("C")
+            g.add("D")
+            g.add("E")
+            g.add("F")
+            g.connect("A", "B")
+            g.connect("A", "C")
+            g.connect("B", "D")
+            g.connect("B", "E")
+            g.connect("E", "F")
+            g
+        end
+
+        def update
+            # Calling handle_update on the grpah widget is required if you want interactivity
+            # specifically, for drag and drop of the nodes
+            @update_count = @update_count + 1
+            @graph_widget.handle_update @update_count, mouse_x, mouse_y
+        end 
+    
+        def draw
+            @font.draw_text("Sample App with Wads Graph Widget", 240, 49, 1, 1, 1, COLOR_WHITE)
+            @graph_widget.draw
+        end
+
+        def button_down id
+            close if id == Gosu::KbEscape
+            # Delegate button events to the graph widget if you want the
+            # user to be able to interact with it
+            @graph_widget.button_down id, mouse_x, mouse_y
+        end
+    
+        def button_up id
+            # Delegate button events to the graph widget if you want the
+            # user to be able to interact with it
+            @graph_widget.button_up id, mouse_x, mouse_y
+        end
+    end 
+
+
+BasicGosuAppWithGraph.new.show

data/samples/graph.rb

@@ -0,0 +1,72 @@
+require 'gosu'
+require_relative '../lib/wads'
+
+include Wads 
+
+class SampleGraphApp < WadsApp
+
+    SAMPLE_GRAPH_DEFINITION_FILE = "./data/sample_graph.csv"
+
+    def initialize
+        super(800, 600, "Wads Sample Graph App", GraphDisplay.new(create_sample_graph))
+    end 
+
+    #
+    # Below are three different ways you can construct a graph
+    #
+    def create_sample_graph
+        g = Graph.new 
+        g.add("A")
+        g.add("B")
+        g.add("C")
+        g.add("D")
+        g.add("E")
+        g.add("F")
+        g.connect("A", "B")
+        g.connect("A", "C")
+        g.connect("B", "D")
+        g.connect("B", "E")
+        g.connect("E", "F")
+        g
+    end
+
+    def create_sample_graph_using_nodes
+        root = Node.new("A")
+        b = root.add("B")
+        b.add("D")
+        b.add("E").add("F")
+        root.add("C")
+        Graph.new(root)
+    end
+
+    def create_sample_graph_from_file
+        Graph.new(SAMPLE_GRAPH_DEFINITION_FILE)
+    end
+end
+
+class GraphDisplay < Widget
+
+    def initialize(graph)
+        super(0, 0, 800, 600)
+        set_layout(LAYOUT_TOP_MIDDLE_BOTTOM)
+        @graph = graph
+
+        image = get_layout.add_image("./media/Banner.png", { ARG_SECTION => SECTION_TOP})
+        image.add_text("Wads Sample App", 10, 20, nil, true)
+        image.add_text("Version #{Wads::VERSION}", 13, 54)
+
+        panel = get_layout.add_horizontal_panel({ ARG_SECTION => SECTION_BOTTOM})
+        panel.add_button("Exit", 0, panel.height - 30) do
+            WidgetResult.new(true)
+        end
+        panel.center_children
+        panel.disable_border
+
+        @graph_display = get_layout.add_graph_display(@graph, GRAPH_DISPLAY_EXPLORER,
+                                                      { ARG_SECTION => SECTION_CENTER})
+        disable_border
+    end 
+end
+
+#WadsConfig.instance.set_current_theme(WadsNoIconTheme.new)
+SampleGraphApp.new.show

data/samples/star_wars.rb

@@ -0,0 +1,112 @@
+require 'gosu'
+require 'json'
+require_relative '../lib/wads'
+
+include Wads 
+
+class SampleStarWarsApp < WadsApp
+    
+    STAR_WARS_DATA_FILE = "./data/starwars-episode-4-interactions.json"
+
+    def initialize
+        super(800, 800, "Wads Sample Star Wars App", StarWarsDisplay.new(process_star_wars_data))
+    end 
+
+    def process_star_wars_data 
+        star_wars_json = File.read(STAR_WARS_DATA_FILE)
+        data_hash = JSON.parse(star_wars_json)
+        characters = data_hash['nodes']
+        interactions = data_hash['links']
+
+        # The interactions in the data set reference the characters by their
+        # zero based index, so we keep a reference in our graph by index.
+        # The character's value is the number of scenes in which they appear.
+        graph = Graph.new
+        characters.each do |character|
+            node_tags = {}
+            node_color_str = character['colour']
+            # This is a bit of a hack, but our background is black so black text
+            # will not show up. Change this to white
+            if node_color_str == "#000000"
+                node_color_str = "#FFFFFF"
+            end
+            # Convert hex string (ex. "#EE00AA") into int hex representation
+            # understood by Gosu color (ex. 0xFFEE00AA)
+            node_color = "0xFF#{node_color_str[1..-1]}".to_i(16)
+            node_tags['color'] = node_color
+            graph.add_node(Node.new(character['name'], character['value'], node_tags))
+        end
+        interactions.each do |interaction| 
+            character_one = graph.node_by_index(interaction['source'])
+            character_two = graph.node_by_index(interaction['target'])
+            number_of_scenes_together = interaction['value']
+            edge_tags = {}
+            edge_tags["scenes"] = number_of_scenes_together
+            graph.add_edge(character_one, character_two, edge_tags)
+        end
+        graph
+    end
+end
+
+class StarWarsDisplay < Widget
+    attr_accessor :graph
+
+    def initialize(graph)
+        super(0, 0, 800, 800)
+        set_layout(LAYOUT_TOP_MIDDLE_BOTTOM)
+        @graph = graph
+
+        image = get_layout.add_image("./media/Banner.png", { ARG_SECTION => SECTION_TOP})
+        image.add_text("Wads Sample App", 10, 20, nil, true)
+        image.add_text("Version #{Wads::VERSION}", 13, 54)
+
+        get_layout.add_document(sample_content, { ARG_SECTION => SECTION_CENTER})
+
+        panel = get_layout.add_horizontal_panel({ ARG_SECTION => SECTION_BOTTOM})
+        panel.add_button("Exit", 0, panel.height - 30) do
+            WidgetResult.new(true)
+        end
+        panel.center_children
+        panel.disable_border
+
+        @data_table = get_layout.add_single_select_table(
+            ["Character", "Number of Scenes"], 4, { ARG_SECTION => SECTION_CENTER})
+
+        @graph.node_list.each do |character|
+            @data_table.add_row([character.name, character.value], character.get_tag(ARG_COLOR))
+        end
+        @graph_display = get_layout.add_graph_display(@graph, GRAPH_DISPLAY_EXPLORER,
+                                                      { ARG_SECTION => SECTION_CENTER})
+
+        disable_border
+    end
+
+    def sample_content
+        <<~HEREDOC
+          This sample analysis shows the interactions between characters in the Star Wars
+          Episode 4: A New Hope. Click on a character to see more detail.
+        HEREDOC
+    end
+
+    def handle_key_press id, mouse_x, mouse_y
+        if id == Gosu::KbUp
+            @data_table.scroll_up
+        elsif id == Gosu::KbDown
+            @data_table.scroll_down
+        end 
+        WidgetResult.new(false)
+    end
+
+    def handle_mouse_down mouse_x, mouse_y
+        if @data_table.contains_click(mouse_x, mouse_y)
+            val = @data_table.set_selected_row(mouse_y, 0)
+            if not val.nil?
+                node = @graph.find_node(val)
+                #@graph_display.set_center_node(node, 2)
+                @graph_display.set_explorer_display(node)
+            end  
+        end
+    end
+end
+
+SampleStarWarsApp.new.show

data/samples/stocks.rb

@@ -0,0 +1,126 @@
+require 'gosu'
+require_relative '../lib/wads'
+
+include Wads 
+
+class SampleStocksApp < WadsApp
+    
+    STOCKS_DATA_FILE = "./data/NASDAQ.csv"
+
+    def initialize
+        super(800, 600, "Wads Sample Stocks App", StocksDisplay.new(process_stock_data))
+    end 
+
+    def process_stock_data 
+        # The data file comes from https://finance.yahoo.com
+        # The format of this file is as follows:
+        #
+        # Date,Open,High,Low,Close,Adj Close,Volume
+        # 2000-01-03,4186.189941,4192.189941,3989.709961,4131.149902,4131.149902,1510070000
+        # 2000-01-04,4020.000000,4073.250000,3898.229980,3901.689941,3901.689941,1511840000
+        # ...
+        # 2020-12-30,12906.509766,12924.929688,12857.759766,12870.000000,12870.000000,5292210000
+        # 2020-12-31,12877.089844,12902.070313,12821.230469,12888.280273,12888.280273,4771390000
+        
+        stats = Stats.new("NASDAQ")
+        previous_close = nil
+        
+        puts "Read the data file #{STOCKS_DATA_FILE}"
+        File.readlines(STOCKS_DATA_FILE).each do |line|
+            line = line.chomp  # remove the carriage return
+
+            # Ignore header and any empty lines, process numeric data lines
+            if line.length > 0 and line[0].match(/[0-9]/)
+                values = line.split(",")
+                date = Date.strptime(values[0], "%Y-%m-%d")
+                weekday = Date::DAYNAMES[date.wday]
+
+                open_value = values[1].to_f
+                close_value = values[4].to_f
+
+                if previous_close.nil?
+                    # Just use the first day to set the baseline
+                    previous_close = close_value
+                else 
+                    change_from_previous_close = close_value - previous_close
+                    change_intraday = close_value - open_value
+                    change_overnight = open_value - previous_close
+                    
+                    change_percent = change_from_previous_close / previous_close
+
+                    stats.add(weekday, change_percent)
+                    stats.add("#{weekday} prev close", change_from_previous_close)
+                    stats.add("#{weekday} intraday", change_intraday)
+                    stats.add("#{weekday} overnight", change_overnight)
+
+                    previous_close = close_value
+                end
+            end
+        end
+
+        stats
+    end
+end
+
+class StocksDisplay < Widget
+
+    def initialize(stats)
+        super(0, 0, 800, 600)
+        set_layout(LAYOUT_TOP_MIDDLE_BOTTOM)
+
+        image = get_layout.add_image("./media/Banner.png", { ARG_SECTION => SECTION_TOP})
+        image.add_text("Wads Sample App", 10, 20, nil, true)
+        image.add_text("Version #{Wads::VERSION}", 13, 54)
+
+        get_layout.add_document(sample_content, { ARG_SECTION => SECTION_CENTER})
+
+        panel = get_layout.add_horizontal_panel({ ARG_SECTION => SECTION_BOTTOM})
+        panel.add_button("Exit", 0, panel.height - 30) do
+            WidgetResult.new(true)
+        end
+        panel.center_children
+
+        @data_table = get_layout.add_single_select_table(         
+                ["Day", "Min", "Avg", "StdDev", "Max", "p10", "p90"], 5,
+                { ARG_SECTION => SECTION_CENTER})
+        Date::DAYNAMES[1..5].each do |day|
+            min = format_percent(stats.min(day))
+            avg = format_percent(stats.average(day))
+            std = format_percent(stats.std_dev(day))
+            max = format_percent(stats.max(day))
+            p10 = format_percent(stats.percentile(day, 0.1))
+            p90 = format_percent(stats.percentile(day, 0.90))
+            @data_table.add_row([day, min, avg, std, max, p10, p90])
+        end
+
+        @selection_text = nil
+    end 
+
+    def format_percent(val)
+        "#{(val * 100).round(3)}%"
+    end
+
+    def sample_content
+        <<~HEREDOC
+          This sample stock analysis uses NASDAQ data from https://finance.yahoo.com looking
+          at closing data through the years 2000 to 2020. The percent gain or loss is broken
+          down per day, as shown in the table below.
+        HEREDOC
+    end
+
+    def render 
+        @selection_text.draw unless @selection_text.nil?
+    end 
+
+    def handle_mouse_down mouse_x, mouse_y
+        if @data_table.contains_click(mouse_x, mouse_y)
+            val = @data_table.set_selected_row(mouse_y, 0)
+            if not val.nil?
+                @selection_text = Text.new(relative_x(5), relative_y(500), "You selected #{val}, a great day!")
+            end    
+        end
+    end 
+end
+
+WadsConfig.instance.set_current_theme(WadsBrightTheme.new)
+SampleStocksApp.new.show

data/samples/theme_test.rb

@@ -0,0 +1,256 @@
+require 'gosu'
+require_relative '../lib/wads'
+
+include Wads 
+
+class ThemeTestApp < WadsApp
+    def initialize
+        super(800, 600, "Wads Theme Test App", ThemeTestDisplay.new)
+    end 
+end
+
+class ThemeTestDisplay < Widget
+    def initialize
+        super(0, 0, 800, 600)
+        disable_border
+
+        if ARGV.length == 0
+            render_basic_widgets
+        elsif ARGV[0] == "-h" or ARGV[0] == "h" or ARGV[0] == "help"
+            puts "Wads Theme Tester"
+            puts " "
+            display_help 
+        elsif ARGV[0] == "border"
+            render_border_layout
+        elsif ARGV[0] == "three"
+            render_top_middle_bottom_layout
+        elsif ARGV[0] == "header"
+            render_header_layout
+        elsif ARGV[0] == "footer"
+            render_footer_layout
+        elsif ARGV[0] == "vertical"
+            render_vertical_layout
+        elsif ARGV[0] == "horizontal"
+            render_horizontal_layout
+        elsif ARGV[0] == "eastwest"
+            render_east_west_layout
+        elsif ARGV[0] == "plot"
+            render_plot
+        elsif ARGV[0] == "form"
+            render_form
+        elsif ARGV[0] == "overlay"
+            render_overlay
+        else 
+            puts "Argument #{ARGV[0]} is invalid."
+            display_help 
+        end
+    end 
+
+    def display_help 
+        puts "Valid arguments are:"
+        puts "  border     show BorderLayout"
+        puts "  three      show TopMiddleBottomLayout"
+        puts "  header     show HeaderContentLayout"
+        puts "  footer     show ContentFooterLayout"
+        puts "  vertical   show VerticalColumnLayout"
+        puts "  eastwest   show EastWestLayout"
+        puts "  plot       show a simple plot using HeaderContentLayout"
+        puts "  form       test a form"
+        puts "  overlay    show an overlay widget"
+        exit
+    end 
+
+    def render_basic_widgets
+        set_layout(LAYOUT_TOP_MIDDLE_BOTTOM)
+
+        # Example of using the layout for absolute positioning
+        # and then relative positioning of a child widget
+        # within that
+        image = get_layout.add_image("./media/Banner.png", { ARG_SECTION => SECTION_TOP})
+        image.add_text("Banner", 10, 10)
+
+        get_layout.add_text("Hello", { ARG_SECTION => SECTION_CENTER})
+        get_layout.add_text("There", { ARG_SECTION => SECTION_CENTER})
+        get_layout.add_button("Test Button", { ARG_SECTION => SECTION_CENTER}) do 
+            puts "User hit the test button"
+        end
+
+        table = get_layout.add_multi_select_table(["A", "B", "C"], 4, { ARG_SECTION => SECTION_CENTER})
+        table.add_row(["These", "are", "values in row 1"])
+        table.add_row(["These", "are", "values in row 2"])
+        table.add_row(["These", "are", "values in row 3"])
+        table.add_row(["These", "are", "values in row 4"])
+
+        panel = get_layout.add_horizontal_panel({ ARG_SECTION => SECTION_BOTTOM})
+        panel.add_button("Exit", 380, panel.height - 30) do
+            WidgetResult.new(true)
+        end
+    end
+
+    def render_header_layout
+        set_layout(LAYOUT_HEADER_CONTENT)
+
+        header = get_layout.add_max_panel({ ARG_SECTION => SECTION_HEADER,
+                                            ARG_THEME => WadsNatureTheme.new })
+        header.get_layout.add_text("I am the header section",
+                                   { ARG_TEXT_ALIGN => TEXT_ALIGN_CENTER,
+                                     ARG_USE_LARGE_FONT => true})
+
+        main = get_layout.add_max_panel({ ARG_SECTION => SECTION_CONTENT,
+                                          ARG_THEME => WadsNatureTheme.new })
+        main.get_layout.add_document(sample_content)
+        table = main.get_layout.add_multi_select_table(["A", "B", "C"], 4, { ARG_SECTION => SECTION_WEST})
+        table.add_row(["Key1", "Value1", "ValueD"])
+        table.add_row(["Key2", "Value2", "ValueE"])
+        table.add_row(["Key3", "Value3", "ValueF"])
+    end
+
+    def render_border_layout
+        set_layout(LAYOUT_BORDER)
+        header = get_layout.add_max_panel({ ARG_SECTION => SECTION_NORTH})
+        header.get_layout.add_text("I am the header section", { ARG_TEXT_ALIGN => TEXT_ALIGN_CENTER})
+
+        west = get_layout.add_vertical_panel({ ARG_SECTION => SECTION_WEST})
+        west.get_layout.add_button("Do stuff") do 
+            puts "Hit the do stuff button"
+        end
+        west.get_layout.add_button("More stuff") do 
+            puts "Hit the more stuff button"
+        end
+
+        get_layout.add_document(sample_content, { ARG_SECTION => SECTION_CENTER})
+
+        east = get_layout.add_vertical_panel({ ARG_SECTION => SECTION_EAST})
+        east.get_layout.add_text("item1")
+        east.get_layout.add_text("item2")
+
+        footer = get_layout.add_max_panel({ ARG_SECTION => SECTION_SOUTH})
+        footer.get_layout.add_text("I am the footer section", { ARG_TEXT_ALIGN => TEXT_ALIGN_CENTER})
+    end
+
+    def render_top_middle_bottom_layout
+        set_layout(LAYOUT_TOP_MIDDLE_BOTTOM)
+        header = get_layout.add_max_panel({ ARG_SECTION => SECTION_TOP})
+        header.get_layout.add_text("I am the header section", { ARG_TEXT_ALIGN => TEXT_ALIGN_CENTER})
+
+        get_layout.add_document(sample_content, { ARG_SECTION => SECTION_MIDDLE})
+
+        footer = get_layout.add_max_panel({ ARG_SECTION => SECTION_BOTTOM})
+        footer.get_layout.add_text("I am the footer section", { ARG_TEXT_ALIGN => TEXT_ALIGN_CENTER})
+    end
+
+    def sample_content
+        <<~HEREDOC
+        This is the content section.
+        A document can contain multi-line text.
+        Typically you provide the content
+        using a squiggly heredoc.
+        HEREDOC
+    end
+
+    def render_footer_layout
+        set_layout(LAYOUT_CONTENT_FOOTER)
+
+        get_layout.add_document(sample_content, { ARG_SECTION => SECTION_CONTENT})
+
+        footer = get_layout.add_max_panel({ ARG_SECTION => SECTION_FOOTER,
+                                            ARG_THEME => WadsBrightTheme.new })
+        footer.get_layout.add_text("I am the footer section", { ARG_TEXT_ALIGN => TEXT_ALIGN_CENTER})
+    end
+
+    def render_vertical_layout 
+        set_layout(LAYOUT_VERTICAL_COLUMN)
+        get_layout.add_image("./media/Banner.png")
+        get_layout.add_text("This is text below the image")
+        get_layout.add_text("Each widget will get placed below the previous in a vertical column.")
+    end
+
+    def render_east_west_layout 
+        set_layout(LAYOUT_EAST_WEST)
+        table = get_layout.add_multi_select_table(["A", "B", ""], 4, { ARG_SECTION => SECTION_WEST})
+        table.add_row(["Key1", "Value1"])
+        table.add_row(["Key2", "Value2"])
+        table.add_row(["Key3", "Value3"])
+
+        get_layout.add_document(sample_content, { ARG_SECTION => SECTION_EAST})
+    end
+
+    def render_plot
+        set_layout(LAYOUT_HEADER_CONTENT)
+
+        header = get_layout.add_max_panel({ ARG_SECTION => SECTION_HEADER,
+                                            ARG_THEME => WadsBrightTheme.new })
+        # The zero x coord doesn't matter here because we center it below
+        # Centering only adjusts the x coordinate
+        header.add_text("This is a plot of sine (yellow) and cosine (pink) waves", 0, 35)
+        header.center_children
+        header.disable_border
+
+        plot = get_layout.add_plot({ ARG_SECTION => SECTION_CONTENT})
+        plot.define_range(VisibleRange.new(-5, 5, -5, 5))
+        plot.enable_border
+        x = -5
+        while x < 5
+            plot.add_data_point("Sine", x, Math.sin(x), COLOR_LIME)
+            plot.add_data_point("Cosine", x, Math.cos(x), COLOR_PINK)
+            x = x + 0.05
+        end
+
+        # Draw the 0 horizontal and vertical axes
+        plot.add_child(Line.new(plot.draw_x(0), plot.draw_y(-5), plot.draw_x(0), plot.draw_y(5), COLOR_GRAY))
+        plot.add_child(Line.new(plot.draw_x(-5), plot.draw_y(0), plot.draw_x(5), plot.draw_y(0), COLOR_GRAY))
+    end
+
+    def render_form
+        set_layout(LAYOUT_CONTENT_FOOTER)
+
+        content_panel = get_layout.add_max_panel({ ARG_SECTION => SECTION_CONTENT,
+                                                   ARG_LAYOUT  => LAYOUT_EAST_WEST,
+                                                   ARG_PANEL_WIDTH => 200 })
+
+        label_panel = content_panel.add_panel(SECTION_WEST)
+        label_panel.get_layout.add_text("First Name", { ARG_TEXT_ALIGN => TEXT_ALIGN_RIGHT})
+        label_panel.get_layout.add_text("Middle Name", { ARG_TEXT_ALIGN => TEXT_ALIGN_RIGHT})
+        label_panel.get_layout.add_text("Last Name", { ARG_TEXT_ALIGN => TEXT_ALIGN_RIGHT})
+
+        field_panel = content_panel.add_panel(SECTION_EAST)
+        @first_name = field_panel.get_layout.add_text_input(200)
+        @middle_name = field_panel.get_layout.add_text_input(200)
+        @last_name = field_panel.get_layout.add_text_input(200)
+
+        footer_panel = get_layout.add_max_panel({ ARG_SECTION => SECTION_FOOTER})
+        footer_panel.get_layout.add_button("Display Full Name", {ARG_TEXT_ALIGN => TEXT_ALIGN_CENTER}) do
+            footer_panel.get_layout.add_text("The full name is #{@first_name.text} #{@middle_name.text} #{@last_name.text}.")
+        end
+    end
+
+    def render_overlay
+        set_layout(LAYOUT_HEADER_CONTENT)
+
+        header = get_layout.add_max_panel({ ARG_SECTION => SECTION_HEADER})
+        header.get_layout.add_text("I am the header section", { ARG_TEXT_ALIGN => TEXT_ALIGN_CENTER})
+
+        main = get_layout.add_max_panel({ ARG_SECTION => SECTION_CONTENT})
+        main.get_layout.add_document(sample_content)
+
+        main.get_layout.add_button("Display InfoBox", {ARG_TEXT_ALIGN => TEXT_ALIGN_CENTER}) do
+            add_overlay(create_overlay_widget)
+        end
+    end
+
+    def create_overlay_widget 
+        InfoBox.new(100, 60, 600, 400, "Sample Overlay", overlay_content, { ARG_THEME => WadsBrightTheme.new})
+    end
+
+    def overlay_content
+        <<~HEREDOC
+        This is a sample overlay widget which typically
+        you would use to display important information
+        upon request. The InfoBox widget is used for
+        this purpose.
+        HEREDOC
+
+    end
+end
+
+ThemeTestApp.new.show