<commit_before># timewidget
HTML5 Time and time span selection widget using canvas. See [demo here](http://www.students.tut.fi/~kortesmv/timewidget/).

## Current status
- alpha
- drawing and selecting mechanics
- outputs into hidden input field
- selection doesn't work intuitively

Features:
- scales both to small and big nicely.
- snap to 1, 5, 10, 15, 20 or 30 minutes
- optimize drawing
- colors and snap in options

Todo:
- output both beginning and end
- multiple timespans
(- colors from css)
- make snap widget specific
- fix sector shading
- draw guides for snap
- 24h range for selection

Depencies:
- jQuery or Zepto

## Usage

Use `x-timewidget` -tag in html. This will be filled with the timewidget. You can choose the size by specifying width in css.

```html
<x-timewidget style="width: 3em;"></x-timewidget>
```

Load time-widget.js in the html file and call `timewidget.activate()` to create the widgets.

````html
<script src="lib/zepto.min.js"></script>
<script src="js/time-widget.js"></script>

<script type="text/javascript">
$(document).ready(function() {
  console.debug("ready");
  timewidget.activate();
});
</script>
```
<commit_msg>options<commit_after># timewidget
HTML5 Time and time span selection widget using canvas. See [demo here](http://www.students.tut.fi/~kortesmv/timewidget/).

## Current status
- alpha
- drawing and selecting mechanics
- outputs into hidden input field
- selection doesn't work intuitively

Features:
- scales both to small and big nicely.
- snap to 1, 5, 10, 15, 20 or 30 minutes
- optimize drawing
- colors and snap in options

Todo:
- output both beginning and end
- multiple timespans
(- colors from css)
- make snap widget specific
- fix sector shading
- draw guides for snap
- 24h range for selection

Depencies:
- jQuery or Zepto

## Usage

Use `x-timewidget` -tag in html. This will be filled with the timewidget. You can choose the size by specifying width in css.

```html
<x-timewidget style="width: 3em;"></x-timewidget>
```

Load time-widget.js in the html file and call `timewidget.activate()` to create the widgets.

````html
<script src="lib/zepto.min.js"></script>
<script src="js/time-widget.js"></script>

<script type="text/javascript">
$(document).ready(function() {
  console.debug("ready");
    timewidget.activate();
});
</script>
```

### options

Following options may be passed.
- snap : 1,2,5,10,15,20,30
- color1, color2, color3 : any css parseable color definition

```javascript
timewidget.setup({snap:10, color1: "cyan", color2: "orange"});

```


{'fraction_non_alphanumeric': 0.12716535433070866, 'fraction_numerical': 0.01811023622047244, 'mean_word_length': 4.206967213114754, 'pattern_counts': {'":': 0, '<': 19, '<?xml version=': 0, '>': 19, 'https://': 0, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6828237', 'n_tokens_mistral': 829, 'n_tokens_neox': 768, 'n_words': 294}