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>