Archive

real time, timer/counter

Communicator

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!

Tags (1)
0 Karma

SplunkTrust
SplunkTrust

@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

0 Karma

Communicator

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!

0 Karma

Ultra Champion

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?

0 Karma
State of Splunk Careers

Access the Splunk Careers Report to see real data that shows how Splunk mastery increases your value and job satisfaction.

Find out what your skills are worth!