From 4e76f40aea4c588041a5346118de255b8c1e26f1 Mon Sep 17 00:00:00 2001
From: raphael <raphael.fritsch@reutlingen-university.de>
Date: Tue, 5 Feb 2019 13:51:59 +0100
Subject: [PATCH] add indicator on thickness slider to show the tool affected

---
 README.md         | 1 -
 public/index.html | 3 ++-
 public/js/main.js | 8 +++++++-
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 82ab6ca..12c2392 100644
--- a/README.md
+++ b/README.md
@@ -43,7 +43,6 @@ Call your site with GET parameters to change the WhiteboardID or the Username
 * You shoud be able to customize without ever toutching the whiteboard.js (take a look at index.html & main.js)
 
 ## ToDo
-* Show indicator on slider which tool is active (Pen, Text...)
 * Make undo function more reliable on texts
 * Add more callbacks for errors and things ...
 
diff --git a/public/index.html b/public/index.html
index 8833e51..05e9c6b 100644
--- a/public/index.html
+++ b/public/index.html
@@ -63,7 +63,8 @@
 			</button>
 		</div>
 
-		<div style="width: 190px;  height: 44px; border: 1px solid green;" class="btn-group">
+		<div style="position:relative; width: 190px;  height: 44px; border: 1px solid green;" class="btn-group">
+			<div class="activeToolIcon" style="position:absolute; top:2px; left:2px; font-size: 0.6em;"><i class="fa fa-pencil-alt"></i></div>
 			<img style="position: absolute; left: 11px; top: 16px; height:14px; width:130px;" src="./img/slider-background.svg">
 			<input title="Thickness" id="whiteboardThicknessSlider" style="position: absolute; left:9px; width: 130px; top: 15px;"
 			 type="range" min="1" max="50" value="3">
diff --git a/public/js/main.js b/public/js/main.js
index cb052ad..c2965ad 100644
--- a/public/js/main.js
+++ b/public/js/main.js
@@ -62,7 +62,13 @@ $(document).ready(function () {
     $(".whiteboardTool").click(function () {
         $(".whiteboardTool").removeClass("active");
         $(this).addClass("active");
-        whiteboard.setTool($(this).attr("tool"));
+        var activeTool = $(this).attr("tool");
+        whiteboard.setTool(activeTool);
+        if(activeTool == "mouse" || activeTool == "recSelect") {
+            $(".activeToolIcon").empty();
+        } else {
+            $(".activeToolIcon").html($(this).html()); //Set Active icon the same as the button icon
+        }        
     });
 
     // upload image button