Longtouch ButtonsΒΆ

btn-longtouch.htm (hint: right click, save as)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!--
  Test/Development/Documentation page
  - enable web server file access
  - upload to web dir, e.g. scp testpage.htm test1.local:/sd/dev/
  - open in framework by e.g. http://test1.local/#/dev/testpage.htm
-->

<div class="panel panel-primary">
  <div class="panel-heading">Longtouch Buttons</div>
  <div class="panel-body">

    <p>Note: open this test page with a mobile / touch screen device or simulate
    a mobile device using the web debugger of your browser.</p>
    
    <p>The buttons below should work normally on a non-touch device.</p>
    
    <p>On a touch screen device, touching the buttons starts a countdown
    of 1.5 seconds, showing an overlay with a progress bar and giving vibration
    signals (on devices supporting this). The button action is triggered only
    after the countdown has finished while holding the touch.</p>
    
    <p>This feature is meant to a) secure certain buttons against unintentional activation
    and to b) allow secure usage of these buttons while driving, i.e. when the mobile phone /
    tablet is mounted to a car holder.</p>
    
    <p>Standard candidates for this are buttons triggering deep modifications, i.e.
    changing the car tuning or drive mode.</p>
    
    <p>To activate the feature on a button, simply add the class <code>btn-longtouch</code> to the button.
    To activate it on a group of buttons, add the class to the container of the buttons.</p>
    
    <p>The progress overlay shows the button title if set (HTML supported), else the button text.</p>
    
    <form action="#">
      <div class="btn-group btn-group-justified btn-longtouch">
        <div class="btn-group btn-group-lg">
          <button type="submit" name="load" value="0" id="prof-0" class="btn btn-default"><strong>STD</strong></button>
        </div>
        <div class="btn-group btn-group-lg">
          <button type="submit" name="load" value="1" id="prof-1" class="btn btn-default" title="Power Mode"><strong>PWR</strong></button>
        </div>
        <div class="btn-group btn-group-lg">
          <button type="submit" name="load" value="2" id="prof-2" class="btn btn-success"><strong>ECO</strong></button>
        </div>
        <div class="btn-group btn-group-lg">
          <button type="submit" name="load" value="3" id="prof-3" class="btn btn-default" title="Winter Mode"><strong>ICE</strong></button>
        </div>
      </div>
    </form>
  
  </div>
</div>