real time, timer/counter

mdmaala · ‎03-14-2019

hello! Good afternoon,

i want to create a timer, wherein when I push the switch to turn on the green light, the timer starts and then stops after when the switch is turned off . then when I turn it on again, the timer should reset again to zero, and start a new timer . is this possible?

thank you so much!

kamlesh_vaghela · ‎03-14-2019

@mdmaala,

You can achieve this by using Javascript and CSS in your dashboard.

Check below dashboard code.
timer.xml

<dashboard script="timer.js" stylesheet="timer.css">
  <label>Timer</label>
  <row>
    <panel>
      <html>
        <h2>Toggle Switch</h2>

        <label class="switch">
          <input type="checkbox" />
          <span class="slider round"></span>
        </label>
        <div id="divCount" style="height: 1.5em; font-size: 2em; color: red;"></div>
      </html>
    </panel>
  </row>
</dashboard>

timer.js

require(["jquery", "splunkjs/mvc", "splunkjs/mvc/simplexml/ready!"], function($, mvc) {

    var count = 0;
    function Increament() {
        count++;
        console.log(count);
        document.getElementById("divCount").innerHTML = "Timer: "+count;
    }
    var myVar;

    $(document).ready(function () {
        var checkbox = document.querySelector('input[type="checkbox"]');

        checkbox.addEventListener('change', function () {
            if (checkbox.checked) {
              // do this
              console.log('Checked');
              myVar = setInterval(Increament, 1000);
            } else {
              // do that
              console.log('Not checked');
               clearInterval(myVar);
               count = 0;
               document.getElementById("divCount").innerHTML = "Timer: "+count;
            }
          });

    });


});

timer.css

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

Please try and let me know if any issue.

Thanks

mdmaala · ‎03-14-2019

thank u so much @kamlesh_vaghela , i'll try and i'll get back to let you know if this worked. thank you so much!

nickhills · ‎03-14-2019

That's not really the type of function Splunk offers.
Whilst I'm not saying that this can't be done, you probably shouldn't.

What's your use case?

If my comment helps, please give it a thumbs up!

real time, timer/counter

Introducing the 2024 SplunkTrust!

Introducing the 2024 Splunk MVPs!

Splunk Custom Visualizations App End of Life