Add control panel and toggle button group examples

source/control_panel_example.hpp

@@ -0,0 +1,89 @@
+#pragma once
+
+#include <string>
+
+#include "emp/prefab/Card.hpp"
+#include "emp/prefab/CodeBlock.hpp"
+#include "emp/prefab/ControlPanel.hpp"
+#include "emp/tools/string_utils.hpp"
+#include "emp/web/Div.hpp"
+#include "emp/web/Document.hpp"
+
+int simulation_counter = 0;
+int refresh_counter = 0;
+
+void control_panel_example( emp::web::Document& doc ) {
+  emp::prefab::Card control_panel_ex("INIT_CLOSED");
+  doc << control_panel_ex;
+  card_ex.AddHeaderContent("<h3>Control Panel</h3>");
+  control_panel_ex << "<h3>Live Demo:</h3><hr>";
+
+  emp::prefab::ControlPanel controls{1000, "MILLISECONDS"};
+  emp::Div text_region;
+  text_region << emp::web::Live([](){
+    ++refresh_counter;
+    return emp::to_string("Number of refreshes: ", refresh_counter);
+  });
+  text_region << "<br>";
+  text_region << emp::web::Live([](){
+    int last_sim_count = simulation_counter;
+    last_sim_count = 0;
+    return emp::to_string("Simulation calls this period: ", refresh_counter);
+  });
+  emp::web::Div laps;
+  text_region << laps;
+  controls.AddToRefreshList(text_region);
+  controls.SetSimulation([]() { ++simulation_counter; });
+  controls << emp::web::Button([lap, lap_count=0](){
+    laps << "Lap " << lap_count << ": " << simulation_counter;
+    ++lap_counter;
+  }, "Lap").SetAttr("class", "btn btn-primary");
+
+  controls << ButtonGroup{}; // Streaming a button group acts like a newline
+  controls << emp::web::Button([lap](){
+    lap.ClearChildren();
+  }, "Reset Laps").SetAttr("class", "btn btn-danger");
+
+  control_panel_ex << controls;
+  control_panel_ex << text_region;
+
+
+  const std::string control_panel_code =
+    R"(
+      // Global variables: refresh_counter and simulation_counter
+
+      emp::prefab::ControlPanel controls{1000, "MILLISECONDS"};
+
+      emp::Div text_region;
+      text_region << emp::web::Live([](){
+        ++refresh_counter;
+        return emp::to_string("Number of refreshes: ", refresh_counter);
+      });
+      text_region << "<br>";
+      text_region << emp::web::Live([](){
+        int last_sim_count = simulation_counter;
+        last_sim_count = 0;
+        return emp::to_string("Simulation calls this period: ", refresh_counter);
+      });
+      emp::web::Div laps;
+      text_region << laps;
+      controls.AddToRefreshList(text_region);
+      controls.SetSimulation([]() { ++simulation_counter; });
+      controls << emp::web::Button([lap, lap_count=0](){
+        laps << "Lap " << lap_count << ": " << simulation_counter;
+        ++lap_counter;
+      }, "Lap").SetAttr("class", "btn btn-primary");
+
+      controls << ButtonGroup{}; // Streaming a button group acts like a newline
+      controls << emp::web::Button([lap](){
+        lap.ClearChildren();
+      }, "Reset Laps").SetAttr("class", "btn btn-danger");
+
+      doc << controls;
+      doc << text_region;
+    )";
+
+  emp::prefab::CodeBlock card_code_block(control_panel_code, "c++");
+  control_panel_ex << control_panel_code;
+
+}

source/empirical_info.hpp

@@ -19,7 +19,7 @@ void empirical_info( emp::web::Document& doc ) {
   );
   empirical_info << "<p style=\"display: inline-block\">This is part of <a href=\"https://github.com/devosoft/Empirical\" target=\"_blank\">Empirical</a>, a library of tools for developing efficient, reliable, and accessible scientific software.</p>";
 
-  doc << "<p>These prefabricated tools were created to help you quickly create interesting web applicications without being overwhelmed with the underlying HTML, CSS, and Bootstrap classes required. These tools use Empirical's web tools to provide structure for the site, and many of the prefab tools inherit from web tools so you can add your own styling and stream them into other web components in a similar way.</p>";
+  doc << "<p>These prefabricated tools were created to help you quickly create interesting web applications without being overwhelmed with the underlying HTML, CSS, and Bootstrap classes required. These tools use Empirical's web tools to provide structure for the site, and many of the prefab tools inherit from web tools so you can add your own styling and stream them into other web components in a similar way.</p>";
   doc << "<p>To uses any of these tools, you'll want to add the Bootstrap, Empirical prefab components, and friends' stylesheets + js to the head of your html file. Of course you can override the style of any of the classes in these files with your own CSS file if it is linked after these two.";
 
   const std::string styles_code =

source/toggle_button_group_example.hpp

@@ -0,0 +1,131 @@
+#pragma once
+
+#include <string>
+
+#include "emp/prefab/Card.hpp"
+#include "emp/prefab/CodeBlock.hpp"
+#include "emp/prefab/ButtonGroup.hpp"
+#include "emp/prefab/ToggleButtonGroup.hpp"
+#include "emp/prefab/FontAwesomeIcon.hpp"
+#include "emp/tools/string_utils.hpp"
+#include "emp/web/Div.hpp"
+#include "emp/web/Document.hpp"
+
+void toggle_button_group_example( emp::web::Document& doc ) {
+  emp::prefab::Card tbg_ex("INIT_CLOSED");
+  doc << tbg_ex;
+  card_ex.AddHeaderContent("<h3>Toggle Button Group</h3>");
+  tbg_ex << "<h3>Live Demo:</h3><hr>";
+
+  tbg_ex << "<h5>On its own:<h5>";
+  emp::prefab::ToggleButtonGroup reaction{
+    emp::prefab::FontAwesomeIcon("fa-smile-o"), emp::prefab::FontAwesomeIcon("fa-frown-o"),
+    "success", "danger"
+  };
+  emp::web::Div reaction_post;
+  reaction.SetCallback([reaction_post](bool happy) {
+    if (happy) {
+      reaction_post << "Happy!";
+    } else {
+      reaction_post << "Sad :(";
+    }
+  });
+  tbg_ex << reaction;
+  tbg_ex << reaction_post;
+  tbg_ex << "<h5>In button groups:<h5>";
+  ButtonGroup grouping;
+  grouping << emp::prefab::ToggleButtonGroup{ "Default", "Coloring" };
+  grouping << emp::prefab::ToggleButtonGroup{
+    "Custom", "Coloring", "light", "dark"
+  };
+  grouping << emp::prefab::ToggleButtonGroup{
+    emp::prefab::FontAwesomeIcon("fa-motorcycle"),
+    emp::prefab::FontAwesomeIcon("fa-car"),
+    "primary", "secondary"
+  };
+  tbg_ex << grouping;
+
+  tbg_ex << "<h5>Hiding the inactive label:<h5>";
+  ButtonGroup hidden;
+  hidden << emp::prefab::ToggleButtonGroup{
+    "Default", "Coloring",
+    "success", "warning",
+    false
+  };
+  hidden << emp::prefab::ToggleButtonGroup{
+    "Custom", "Coloring", "light", "dark",
+    false
+  };
+  hidden << emp::prefab::ToggleButtonGroup{
+    emp::prefab::FontAwesomeIcon("fa-motorcycle"), emp::prefab::FontAwesomeIcon("fa-car"),
+    "primary", "secondary",
+    false
+  };
+  tbg_ex << hidden;
+
+  tbg_ex << "<h5>Graying out an inactive label:<h5>";
+  tbg_ex << emp::prefab::ToggleButtonGroup{
+    emp::prefab::FontAwesomeIcon("fa-tree"), emp::prefab::FontAwesomeIcon("fa-tint"),
+    "success", "primary",
+    false, true
+  };
+
+  const std::string tbg_code =
+  R"(
+  doc << "<h5>On its own:<h5>";
+  emp::prefab::ToggleButtonGroup reaction{
+    emp::prefab::FontAwesomeIcon("fa-smile-o"), emp::prefab::FontAwesomeIcon("fa-frown-o"),
+    "success", "danger"
+  };
+  emp::web::Div reaction_post;
+  reaction.SetCallback([reaction_post](bool happy) {
+    if (happy) {
+      reaction_post << "Happy!";
+    } else {
+      reaction_post << "Sad :(";
+    }
+  });
+  doc << reaction;
+  doc << reaction_post;
+  doc << "<h5>In button groups:<h5>";
+  ButtonGroup grouping;
+  grouping << emp::prefab::ToggleButtonGroup{ "Default", "Coloring" };
+  grouping << emp::prefab::ToggleButtonGroup{
+    "Custom", "Coloring", "light", "dark"
+  };
+  grouping << emp::prefab::ToggleButtonGroup{
+    emp::prefab::FontAwesomeIcon("fa-motorcycle"),
+    emp::prefab::FontAwesomeIcon("fa-car"),
+    "primary", "secondary"
+  };
+  doc << grouping;
+
+  doc << "<h5>Hiding the inactive label:<h5>";
+  ButtonGroup hidden;
+  hidden << emp::prefab::ToggleButtonGroup{
+    "Default", "Coloring",
+    "success", "warning",
+    false
+  };
+  hidden << emp::prefab::ToggleButtonGroup{
+    "Custom", "Coloring", "light", "dark",
+    false
+  };
+  hidden << emp::prefab::ToggleButtonGroup{
+    emp::prefab::FontAwesomeIcon("fa-motorcycle"), emp::prefab::FontAwesomeIcon("fa-car"),
+    "primary", "secondary",
+    false
+  };
+  doc << hidden;
+
+  doc << "<h5>Graying out an inactive label:<h5>";
+  doc << emp::prefab::ToggleButtonGroup{
+    emp::prefab::FontAwesomeIcon("fa-tree"), emp::prefab::FontAwesomeIcon("fa-tint"),
+    "success", "primary",
+    false, true
+  };
+  )";
+
+  emp::prefab::CodeBlock tbg_code_block(control_panel_code, "c++");
+  tbg_ex << tbg_code_block;
+}

source/web/empirical-prefab-demo-web.cpp

@@ -16,11 +16,13 @@
 #include "../collapse_example.hpp"
 #include "../comment_box_example.hpp"
 #include "../config_panel_example.hpp"
+#include "../control_panel_example.hpp"
 #include "../empirical_info.hpp"
 #include "../font_awesome_icon_example.hpp"
 #include "../loading_icon_example.hpp"
 #include "../modal_example.hpp"
 #include "../readout_panel_example.hpp"
+#include "../toggle_button_group_example.hpp"
 #include "../toggle_switch_example.hpp"
 
 emp::web::Document doc("emp_base");
@@ -36,10 +38,12 @@ int main() {
   collapse_example( doc );
   comment_box_example( doc );
   config_panel_example( doc );
+  control_panel_example( doc );
   font_awesome_icon_example( doc );
   loading_icon_example( doc );
   modal_example( doc );
   readout_panel_example( doc );
+  toggle_button_group_example( doc );
   toggle_switch_example( doc );
 
   emp::prefab::CloseLoadingModal();