dpfens / stopwatch Goto Github PK

A more functional stopwatch for Javascript

Home Page: https://dpfens.github.io/stopwatch

JavaScript 37.98% HTML 1.79% CSS 15.09% Shell 0.19% TypeScript 44.94%

stopwatch time javascript splits nodejs web

stopwatch's Introduction

Stopwatch

A simple Javascript stopwatch. The stopwatch records metadata about the stopwatch execution, such as when the stopwatch was started, stopped, and resumed. All stopwatch measurements are taken using UTC time, to account for timezone changes. The stopwatch also records when each split was taken and if/when the split was modified.

Usage

Basic usage

var stopwatchInstance  = new BasicStopWatch();

stopwatchInstance.start();

to get the total duration:

var currentTotalDuration = stopwatchInstance.totalDuration();

To stop the stopwatch:

var totalDuration = stopwatchInstance.stop()

To resume a stopped stopwatch:

stopwatchInstance.resume();

To reset a stopwatch, use the reset method:

stopwatchInstance.reset();

But, let's say that you (or an end-user) hit the start button too early/late. Use the setStartValue with the correct unix-timestamp of when the stopwatch should have started to correct the stopwatch.

var correctStart = new Date(2020, 13, 18),
    correctStartTimestamp = correctStart.getTime();
stopwatchInstance.setStartValue(correctStartTimestamp);

NOTE: setStartValue will modify the first split and lap to account for the difference between the old startValue and the new one. The modification will be reflected in the metadata.lastModified date.

This can also be done for the stop using setStopValue function:

var correctStop = new Date(2020, 13, 22),
    correctStopTimestamp = correctStart.getTime();
stopwatchInstance.setStopValue(correctStopTimestamp);

NOTE: setStopValue will modify the last split and lap to account for the difference between the old stopValue and the new one. The modification will be reflected in the metadata.lastModified date.

Splits

To use a stopwatch that support splits, using the SplitStopwatch:

var stopwatchInstance = new SplitStopwatch();

To take a split for the current time use the addSplit method:

var splitValue = stopwatchInstance.addSplit();

To find the duration of the stopwatch since the last split, use the splitDuration method. The value will be returned in milliseconds:

currentSplitDuration = stopwatchInstance.splitDuration();

To read all the existing splits taken on the stopwatch:

for (var i = 0; i < stopwatchInstance.splits.length; i++) {
    var splitValue = stopwatchInstance.splits[i];
    console.log(splitValue);
}

Use the update method to change a split at a given index to a given value. This method will recalculate the next split to account for the change to the previous split:

var index = 1;
    value = 257000; // 4 minutes, 17 seconds
stopwatchInstance.update(index, value);

which will set the second split to 257000 milliseconds

To add a new split to the stopwatch, use the addRelativeSplit(value), where the value is the number of milliseconds since the start of the stopwatch:

var value = 240000;
stopwatchInstance.addRelativeSplit(value);

If there is a split after the one specified, its duration will be modified to account for the newly-added split.

To delete a split, use the removeSplit method, where the index specifies the index of the split to remove. This method will also modify the next split to account for the change.

var index = 2;
stopwatchInstance.removeSplit(index);

Laps

To record laps, use the LapStopwatch:

var lapDistance = 400,
    lapUnits = 'Meters',
    stopwatchInstance = new LapStopwatch(lapDistance, lapUnits);

To record a lap, use the addLap method:

var lap = stopwatchInstance.addLap();

to get the current lap duration, use the lapDuration method:

var currentLapDuration = stopwatchInstance.lapDuration();

State

To get metadata about a stopwatch, using the metadata property:

var metadata = stopwatch.metadata;

To get the start time of a stopwatch, use the startValue property:

var startTimestamp = stopwatch.startValue;

To find out if the stopwatch is currently being used to time something, use the isRunning method:

if (stopwatchInstance.isRunning()) {
    stopwatchInstance.stop();
}

To find out if the stopwatch has been used and not been reset, use the isActive method:

if (!stopwatchInstance.isActive()) {
    stopwatchInstance.start();
}

To iterate over existing splits in the stopwatch:

for (var i = 0; i < splitStopwatch.splits.length; i++) {
  var split = splitStopwatch.splits[i];
}

To iterate over existing laps in the stopwatch:

for (var i = 0; i < lapStopwatch.laps.length; i++) {
  var lap = lapStopwatch.laps[i];
}

stopwatch's People

Contributors

Stargazers

Watchers

stopwatch's Issues

Stopwatch-specific Activity Log

Record all the actions taken on a given stopwatch, and when they were taken. The log for each stopwatch could be deleted when the stopwatch is deleted.

This would need to be another screen/view on each stopwatch. May need to switch to a tab-based interface under the clock of each stopwatch to keep the UI from getting too cluttered.

User Interface Enhancements

Overall

Indicate which tab the user is currently on
Transition between tabs
Make the About page a HTML different page entirely
Add splash page?
Add an FAQ tab?
- Explain what it means to clone a stopwatch (with scenarios)

Settings

Make it clear what the settings edit
- Add "Stopwatch" as a main header
Add help text to some inputs to make it clear what they are editing
For "Font Size", show the user what the current font-size is
- Better yet, render a stopwatch to show all settings changes

Stopwatch

Add ability to label splits

Add a Dark mode

Add a dark mode to the website.

Athletes/Coaches/Spectators may not have access to a charger, and having a dark mode could reduce battery consumption. It would also be useful for night races, reviewing times at night, etc.

Split Labels not updating

Split labels are not being saved when updated.

System for organizing archived races

From reddit:

I’d love to be able to archive with a race name / tag

Maybe even have tags in the customise section as well.

As users accumulate many records, they would need a way to quickly find relevant races. Tags might be the best/simplest way to go. Maybe a search box to search by the name of the stopwatch.

Enlarge and separate Split and Stop buttons

u/EverybodyWangChung52 made a good point about the start and stop buttons:

The stop/split buttons should be made larger and some separation so users don't accidentally stop the stopwatch when they have a lot going on.

Add support for tracking laps

The a user provides a lap distance and lap units, add a Lap button to track laps. Laps are a more specialized lap, in that laps have a constant distance, where splits can be taken at any distance interval. Laps track the time since the last lap, and splits track the time since the last split of any kind. This gives the user fast multi-tiered tracking of users and matches the existing mental model for tracking competitors in a race.

multi-tenant stopwatch

Make stopwatches accessible for multiple users so that multiple users can record splits.

Will need to make this application a hosted application. Use WebSockets for broadcasting splits to users of each given stopwatch.

May also need a different interface for visualizing races with splits recorded by many users, and for filtering out other users' splits.

Add logic to "split" a split at a certain time, to create another split

StopWatch.prototype.splitSplit = function(index, timestamp) {
    return newSplit;
}

This method should be called something that denotes that in order to add a split, that time must be taken from a pre-existing split to make room for it,

Make bulk actions on multiple stopwatches at the same time

Would be great to be able to set and clone stopwatches then start all of them at once. Would work great for sprints where you won’t have time to start a stopwatch, clone it a few times, personalise them and hit stop on each before the race finishes.

This is a good idea. I think it would be best that users can select which stopwatches they want to be able to take bulk actions on, so they let other stopwatches continue running. This will also give them the ability to create whatever combinations they need in any given situation.

Convert Laps to/from Splits

Related to #16, add functionality for promoting splits to laps, and demoting laps to splits.

Stopwatch-Specific "Undo" feature

Adds functionality to undo the last action of each stopwatch. Stack-based, so once the most recent action is un-done, then the one before it can be un-done.

Related to #17.

Export data

Give users the option to export their data to a file. This would probably be best suited for the settings tab, as that is where data is kept.

Should users be given the option to import data from compatible files?

Notes

Add the ability to add long-form notes to a stopwatch to document anything that isn't covered by other functionality.

Cannot delete archived stopwatches.

ReferenceError: removeArchivedStopwatch is not defined

Also the Delete icon is missing, and stack the icons

Race stopwatches

Race Stopwatch

A stopwatch with additional functionality based around laps and pace:

laps - If a lapDistance is provided, allow a lapSplit to be taken. This can be extended to include a method which returns the lapDuration.
pace - Methods to give the pace of a lap, the fastest/slowest/average lap pace.

Add logic to merge splits

Add logic to merge multiple splits into a single split. Something like:

StopWatch.prototype.merge = function(startIndex, endIndex) {

    return newSplit;
}

Cases to handle:

If an endIndex is not provided, merge all splits after startIndex;
If the last split is merged, update lastSplit and localGap accordingly

This is to account for the fact that time cannot be removed from a stopwatch, so delete would be ambiguous, and we would not know if the time needs to be applied to the previous/next split already recorded.

dpfens / stopwatch Goto Github PK

stopwatch's Introduction

Stopwatch

Usage

Basic usage

Splits

Laps

State

stopwatch's People

Contributors

Stargazers

Watchers

stopwatch's Issues

Overall

Settings

Stopwatch

Race Stopwatch

Recommend Projects

Recommend Topics

Recommend Org