Longtouch Buttons

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

 1<!--
 2  Test/Development/Documentation page
 3  - enable web server file access
 4  - upload to web dir, e.g. scp testpage.htm test1.local:/sd/dev/
 5  - open in framework by e.g. http://test1.local/#/dev/testpage.htm
 6-->
 7
 8<div class="panel panel-primary">
 9  <div class="panel-heading">Longtouch Buttons</div>
10  <div class="panel-body">
11
12    <p>Note: open this test page with a mobile / touch screen device or simulate
13    a mobile device using the web debugger of your browser.</p>
14    
15    <p>The buttons below should work normally on a non-touch device.</p>
16    
17    <p>On a touch screen device, touching the buttons starts a countdown
18    of 1.5 seconds, showing an overlay with a progress bar and giving vibration
19    signals (on devices supporting this). The button action is triggered only
20    after the countdown has finished while holding the touch.</p>
21    
22    <p>This feature is meant to a) secure certain buttons against unintentional activation
23    and to b) allow secure usage of these buttons while driving, i.e. when the mobile phone /
24    tablet is mounted to a car holder.</p>
25    
26    <p>Standard candidates for this are buttons triggering deep modifications, i.e.
27    changing the car tuning or drive mode.</p>
28    
29    <p>To activate the feature on a button, simply add the class <code>btn-longtouch</code> to the button.
30    To activate it on a group of buttons, add the class to the container of the buttons.</p>
31    
32    <p>The progress overlay shows the button title if set (HTML supported), else the button text.</p>
33    
34    <form action="#">
35      <div class="btn-group btn-group-justified btn-longtouch">
36        <div class="btn-group btn-group-lg">
37          <button type="submit" name="load" value="0" id="prof-0" class="btn btn-default"><strong>STD</strong></button>
38        </div>
39        <div class="btn-group btn-group-lg">
40          <button type="submit" name="load" value="1" id="prof-1" class="btn btn-default" title="Power Mode"><strong>PWR</strong></button>
41        </div>
42        <div class="btn-group btn-group-lg">
43          <button type="submit" name="load" value="2" id="prof-2" class="btn btn-success"><strong>ECO</strong></button>
44        </div>
45        <div class="btn-group btn-group-lg">
46          <button type="submit" name="load" value="3" id="prof-3" class="btn btn-default" title="Winter Mode"><strong>ICE</strong></button>
47        </div>
48      </div>
49    </form>
50  
51  </div>
52</div>