blinker / firefox.plugin / data / tutorial / tutorial-full.html @ master
History | View | Annotate | Download (17.713 KB)
| 1 | 76dd22bd | KevinTaron | <html>
|
|---|---|---|---|
| 2 | <head>
|
||
| 3 | <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> |
||
| 4 | <script src="../lib/jquery/jquery-2.2.4.min.js"></script> |
||
| 5 | <script src="../lib/jquery-ui/jquery-ui.js"></script> |
||
| 6 | <link rel=stylesheet href="../lib/jquery-ui/jquery-ui.css"> |
||
| 7 | <script src="tutorial.js"></script> |
||
| 8 | <link rel=stylesheet href="tutorial.css"> |
||
| 9 | <title>Blickbrowser - Tutorial OnScreen</title> |
||
| 10 | </head>
|
||
| 11 | <body>
|
||
| 12 | |||
| 13 | <div id="content" class="tutorial"> |
||
| 14 | |||
| 15 | <div class="container inputcont"> |
||
| 16 | <form action=""> |
||
| 17 | <h1>Tutorial</h1> |
||
| 18 | |||
| 19 | <ol>
|
||
| 20 | <li>
|
||
| 21 | <h2><span class="number">1</span> Text Inputs</h2> |
||
| 22 | <p>If you gaze over a text-input field you can input text via GAZE. <br> |
||
| 23 | Try it. |
||
| 24 | </p>
|
||
| 25 | <input type="text" class="gaze-keyboard" id="keyboard" placeholder="Enter your Text here" data-gaze="true" data-gaze-type="text" data-gaze-model="onscreen"> |
||
| 26 | |||
| 27 | <br><br> |
||
| 28 | |||
| 29 | <p>If you gaze over a email-input field you can input an e-mail address via GAZE. <br> |
||
| 30 | Try it. |
||
| 31 | </p>
|
||
| 32 | <input type="email" class="gaze-keyboard" id="keyboard" placeholder="Enter your E-Mail here" data-gaze="true" data-gaze-type="text" data-gaze-model="onscreen"> |
||
| 33 | |||
| 34 | <br><br> |
||
| 35 | |||
| 36 | <p>If you gaze over a password-input field you can input a password via GAZE. <br> |
||
| 37 | Try it. |
||
| 38 | </p>
|
||
| 39 | <input type="password" class="gaze-keyboard" id="keyboard" placeholder="Enter your Password here" data-gaze="true" data-gaze-type="text" data-gaze-model="onscreen"> |
||
| 40 | |||
| 41 | <br><br> |
||
| 42 | |||
| 43 | <p>If you gaze over a number-input field you can input a number via GAZE. <br> |
||
| 44 | Try it. |
||
| 45 | </p>
|
||
| 46 | <input type="number" class="gaze-keyboard" id="keyboard" placeholder="Enter your number here" data-gaze="true" data-gaze-type="text" data-gaze-model="onscreen"> |
||
| 47 | |||
| 48 | <br><br> |
||
| 49 | |||
| 50 | <p>If you gaze over a search-input field you can input a search via GAZE. <br> |
||
| 51 | Try it. |
||
| 52 | </p>
|
||
| 53 | <input type="search" class="gaze-keyboard" id="keyboard" placeholder="Enter your search term here" data-gaze="true" data-gaze-type="text" data-gaze-model="onscreen"> |
||
| 54 | |||
| 55 | <br><br> |
||
| 56 | |||
| 57 | <p>If you gaze over a tel-input field you can input a tel via GAZE. <br> |
||
| 58 | Try it. |
||
| 59 | </p>
|
||
| 60 | <input type="tel" class="gaze-keyboard" id="keyboard" placeholder="Enter your phone number here" data-gaze="true" data-gaze-type="text" data-gaze-model="onscreen"> |
||
| 61 | |||
| 62 | <br><br> |
||
| 63 | |||
| 64 | <p>If you gaze over a url-input field you can input a tel via GAZE. <br> |
||
| 65 | Try it. |
||
| 66 | </p>
|
||
| 67 | <input type="url" class="gaze-keyboard" id="keyboard" placeholder="Enter your url here" data-gaze="true" data-gaze-type="text" data-gaze-model="onscreen"> |
||
| 68 | |||
| 69 | <br><br> |
||
| 70 | |||
| 71 | <p>If you gaze over a date-input field you can input a date via GAZE. <br> |
||
| 72 | Try it. |
||
| 73 | </p>
|
||
| 74 | <input type="date" class="gaze-keyboard" id="keyboard" placeholder="Enter your date here" data-gaze="true" data-gaze-type="text" data-gaze-model="onscreen"> |
||
| 75 | |||
| 76 | <br><br> |
||
| 77 | |||
| 78 | <p>If you gaze over a time-input field you can input a time via GAZE. <br> |
||
| 79 | Try it. |
||
| 80 | </p>
|
||
| 81 | <input type="time" class="gaze-keyboard" id="keyboard" placeholder="Enter your time here" data-gaze="true" data-gaze-type="text" data-gaze-model="onscreen"> |
||
| 82 | |||
| 83 | <br><br> |
||
| 84 | </li>
|
||
| 85 | <li>
|
||
| 86 | <h2><span class="number">2</span> Action Inputs</h2> |
||
| 87 | <p>If you gaze over actions elements you can activate the action. <br> |
||
| 88 | Try it. |
||
| 89 | </p>
|
||
| 90 | |||
| 91 | <a href="http://www.google.de" data-gaze="true" data-gaze-type="action" data-gaze-model="onscreen">Google Test-Link</a> <br><br> |
||
| 92 | |||
| 93 | <label data-gaze="true" data-gaze-type="choice" data-gaze-model="onscreen"> |
||
| 94 | <input id="checkbox" type="checkbox" name="" value="" >Checkbox |
||
| 95 | </label>
|
||
| 96 | |||
| 97 | <button data-gaze="true" data-gaze-type="action" data-gaze-model="onscreen">Button</button> |
||
| 98 | <h3> You have clicked the Button: <span class="clicknumber">0</span> times</h3> |
||
| 99 | |||
| 100 | <br>
|
||
| 101 | <p>Here is the video action example</p> |
||
| 102 | <video width="480" height="320" allowfullscreen controls data-gaze="true" |
||
| 103 | data-gaze-type="action" data-gaze-model="onscreen" |
||
| 104 | data-gaze-input="media"> |
||
| 105 | <source src="vids/movie.mp4" type="video/mp4"> |
||
| 106 | <source src="vids/movie.ogg" type="video/ogg"> |
||
| 107 | </video>
|
||
| 108 | |||
| 109 | <br>
|
||
| 110 | <p>Here is the audio action example</p> <br> |
||
| 111 | <audio controls data-gaze="true" |
||
| 112 | data-gaze-type="action" data-gaze-model="onscreen"> |
||
| 113 | <source src="vids/audio.mp3" type="audio/mpeg"> |
||
| 114 | Your browser does not support the audio tag. |
||
| 115 | </audio>
|
||
| 116 | |||
| 117 | <br>
|
||
| 118 | <input type="submit" name="action" value="Absenden" data-gaze="true" data-gaze-type="action" data-gaze-model="onscreen"></input> <br> <br> |
||
| 119 | |||
| 120 | <input type="reset" name="action" value="Zurücksetzen" data-gaze="true" data-gaze-type="action" data-gaze-model="onscreen"></input> |
||
| 121 | |||
| 122 | </li>
|
||
| 123 | <li>
|
||
| 124 | <h2><span class="number">3</span> Choice Inputs</h2> |
||
| 125 | <p>If you gaze over a radio field you can switch the selection. <br> |
||
| 126 | Try it. |
||
| 127 | </p>
|
||
| 128 | <label data-gaze="true" data-gaze-type="choice" data-gaze-model="onscreen"> |
||
| 129 | <input type="radio" name="choice1" value="Choice 1" placeholder="choice1">Choice 1 |
||
| 130 | </label><br> |
||
| 131 | <label data-gaze="true" data-gaze-type="choice" data-gaze-model="onscreen"> |
||
| 132 | <input type="radio" name="choice1" value="Choice 2" placeholder="choice2">Choice 2 |
||
| 133 | </label>
|
||
| 134 | |||
| 135 | <p>If you gaze over a range field you can choose between the range. <br> |
||
| 136 | Try it. |
||
| 137 | </p>
|
||
| 138 | <input data-gaze="true" data-gaze-type="choice" data-gaze-model="onscreen" type="range" name="points" min="0" max="10"> |
||
| 139 | |||
| 140 | <p>If you gaze over a select field you can switch the selection. <br> |
||
| 141 | Try it. |
||
| 142 | </p>
|
||
| 143 | <select data-gaze="true" data-gaze-type="choice" data-gaze-model="onscreen"> |
||
| 144 | <option value="choice1">Choice 1</option> |
||
| 145 | <option value="choice2">Choice 2</option> |
||
| 146 | <option value="choice3">Choice 3</option> |
||
| 147 | <option value="choice4">Choice 4</option> |
||
| 148 | </select>
|
||
| 149 | |||
| 150 | <p>Here is an example select field with many choice options.
|
||
| 151 | </p>
|
||
| 152 | <select data-gaze="true" data-gaze-type="choice" data-gaze-model="onscreen"> |
||
| 153 | <option value="AF">Afghanistan</option> |
||
| 154 | <option value="AX">Åland Islands</option> |
||
| 155 | <option value="AL">Albania</option> |
||
| 156 | <option value="DZ">Algeria</option> |
||
| 157 | <option value="AS">American Samoa</option> |
||
| 158 | <option value="AD">Andorra</option> |
||
| 159 | <option value="AO">Angola</option> |
||
| 160 | <option value="AI">Anguilla</option> |
||
| 161 | <option value="AQ">Antarctica</option> |
||
| 162 | <option value="AG">Antigua and Barbuda</option> |
||
| 163 | <option value="AR">Argentina</option> |
||
| 164 | <option value="AM">Armenia</option> |
||
| 165 | <option value="AW">Aruba</option> |
||
| 166 | <option value="AU">Australia</option> |
||
| 167 | <option value="AT">Austria</option> |
||
| 168 | <option value="AZ">Azerbaijan</option> |
||
| 169 | <option value="BS">Bahamas</option> |
||
| 170 | <option value="BH">Bahrain</option> |
||
| 171 | <option value="BD">Bangladesh</option> |
||
| 172 | <option value="BB">Barbados</option> |
||
| 173 | <option value="BY">Belarus</option> |
||
| 174 | <option value="BE">Belgium</option> |
||
| 175 | <option value="BZ">Belize</option> |
||
| 176 | <option value="BJ">Benin</option> |
||
| 177 | <option value="BM">Bermuda</option> |
||
| 178 | <option value="BT">Bhutan</option> |
||
| 179 | <option value="BO">Bolivia, Plurinational State of</option> |
||
| 180 | <option value="BQ">Bonaire, Sint Eustatius and Saba</option> |
||
| 181 | <option value="BA">Bosnia and Herzegovina</option> |
||
| 182 | <option value="BW">Botswana</option> |
||
| 183 | <option value="BV">Bouvet Island</option> |
||
| 184 | <option value="BR">Brazil</option> |
||
| 185 | <option value="IO">British Indian Ocean Territory</option> |
||
| 186 | <option value="BN">Brunei Darussalam</option> |
||
| 187 | <option value="BG">Bulgaria</option> |
||
| 188 | <option value="BF">Burkina Faso</option> |
||
| 189 | <option value="BI">Burundi</option> |
||
| 190 | <option value="KH">Cambodia</option> |
||
| 191 | <option value="CM">Cameroon</option> |
||
| 192 | <option value="CA">Canada</option> |
||
| 193 | <option value="CV">Cape Verde</option> |
||
| 194 | <option value="KY">Cayman Islands</option> |
||
| 195 | <option value="CF">Central African Republic</option> |
||
| 196 | <option value="TD">Chad</option> |
||
| 197 | <option value="CL">Chile</option> |
||
| 198 | <option value="CN">China</option> |
||
| 199 | <option value="CX">Christmas Island</option> |
||
| 200 | <option value="CC">Cocos (Keeling) Islands</option> |
||
| 201 | <option value="CO">Colombia</option> |
||
| 202 | <option value="KM">Comoros</option> |
||
| 203 | <option value="CG">Congo</option> |
||
| 204 | <option value="CD">Congo, the Democratic Republic of the</option> |
||
| 205 | <option value="CK">Cook Islands</option> |
||
| 206 | <option value="CR">Costa Rica</option> |
||
| 207 | <option value="CI">Côte d'Ivoire</option> |
||
| 208 | <option value="HR">Croatia</option> |
||
| 209 | <option value="CU">Cuba</option> |
||
| 210 | <option value="CW">Curaçao</option> |
||
| 211 | <option value="CY">Cyprus</option> |
||
| 212 | <option value="CZ">Czech Republic</option> |
||
| 213 | <option value="DK">Denmark</option> |
||
| 214 | <option value="DJ">Djibouti</option> |
||
| 215 | <option value="DM">Dominica</option> |
||
| 216 | <option value="DO">Dominican Republic</option> |
||
| 217 | <option value="EC">Ecuador</option> |
||
| 218 | <option value="EG">Egypt</option> |
||
| 219 | <option value="SV">El Salvador</option> |
||
| 220 | <option value="GQ">Equatorial Guinea</option> |
||
| 221 | <option value="ER">Eritrea</option> |
||
| 222 | <option value="EE">Estonia</option> |
||
| 223 | <option value="ET">Ethiopia</option> |
||
| 224 | <option value="FK">Falkland Islands (Malvinas)</option> |
||
| 225 | <option value="FO">Faroe Islands</option> |
||
| 226 | <option value="FJ">Fiji</option> |
||
| 227 | <option value="FI">Finland</option> |
||
| 228 | <option value="FR">France</option> |
||
| 229 | <option value="GF">French Guiana</option> |
||
| 230 | <option value="PF">French Polynesia</option> |
||
| 231 | <option value="TF">French Southern Territories</option> |
||
| 232 | <option value="GA">Gabon</option> |
||
| 233 | <option value="GM">Gambia</option> |
||
| 234 | <option value="GE">Georgia</option> |
||
| 235 | <option value="DE">Germany</option> |
||
| 236 | <option value="GH">Ghana</option> |
||
| 237 | <option value="GI">Gibraltar</option> |
||
| 238 | <option value="GR">Greece</option> |
||
| 239 | <option value="GL">Greenland</option> |
||
| 240 | <option value="GD">Grenada</option> |
||
| 241 | <option value="GP">Guadeloupe</option> |
||
| 242 | <option value="GU">Guam</option> |
||
| 243 | <option value="GT">Guatemala</option> |
||
| 244 | <option value="GG">Guernsey</option> |
||
| 245 | <option value="GN">Guinea</option> |
||
| 246 | <option value="GW">Guinea-Bissau</option> |
||
| 247 | <option value="GY">Guyana</option> |
||
| 248 | <option value="HT">Haiti</option> |
||
| 249 | <option value="HM">Heard Island and McDonald Islands</option> |
||
| 250 | <option value="VA">Holy See (Vatican City State)</option> |
||
| 251 | <option value="HN">Honduras</option> |
||
| 252 | <option value="HK">Hong Kong</option> |
||
| 253 | <option value="HU">Hungary</option> |
||
| 254 | <option value="IS">Iceland</option> |
||
| 255 | <option value="IN">India</option> |
||
| 256 | <option value="ID">Indonesia</option> |
||
| 257 | <option value="IR">Iran, Islamic Republic of</option> |
||
| 258 | <option value="IQ">Iraq</option> |
||
| 259 | <option value="IE">Ireland</option> |
||
| 260 | <option value="IM">Isle of Man</option> |
||
| 261 | <option value="IL">Israel</option> |
||
| 262 | <option value="IT">Italy</option> |
||
| 263 | <option value="JM">Jamaica</option> |
||
| 264 | <option value="JP">Japan</option> |
||
| 265 | <option value="JE">Jersey</option> |
||
| 266 | <option value="JO">Jordan</option> |
||
| 267 | <option value="KZ">Kazakhstan</option> |
||
| 268 | <option value="KE">Kenya</option> |
||
| 269 | <option value="KI">Kiribati</option> |
||
| 270 | <option value="KP">Korea, Democratic People's Republic of</option> |
||
| 271 | <option value="KR">Korea, Republic of</option> |
||
| 272 | <option value="KW">Kuwait</option> |
||
| 273 | <option value="KG">Kyrgyzstan</option> |
||
| 274 | <option value="LA">Lao People's Democratic Republic</option> |
||
| 275 | <option value="LV">Latvia</option> |
||
| 276 | <option value="LB">Lebanon</option> |
||
| 277 | <option value="LS">Lesotho</option> |
||
| 278 | <option value="LR">Liberia</option> |
||
| 279 | <option value="LY">Libya</option> |
||
| 280 | <option value="LI">Liechtenstein</option> |
||
| 281 | <option value="LT">Lithuania</option> |
||
| 282 | <option value="LU">Luxembourg</option> |
||
| 283 | <option value="MO">Macao</option> |
||
| 284 | <option value="MK">Macedonia, the former Yugoslav Republic of</option> |
||
| 285 | <option value="MG">Madagascar</option> |
||
| 286 | <option value="MW">Malawi</option> |
||
| 287 | <option value="MY">Malaysia</option> |
||
| 288 | <option value="MV">Maldives</option> |
||
| 289 | <option value="ML">Mali</option> |
||
| 290 | <option value="MT">Malta</option> |
||
| 291 | <option value="MH">Marshall Islands</option> |
||
| 292 | <option value="MQ">Martinique</option> |
||
| 293 | <option value="MR">Mauritania</option> |
||
| 294 | <option value="MU">Mauritius</option> |
||
| 295 | <option value="YT">Mayotte</option> |
||
| 296 | <option value="MX">Mexico</option> |
||
| 297 | <option value="FM">Micronesia, Federated States of</option> |
||
| 298 | <option value="MD">Moldova, Republic of</option> |
||
| 299 | <option value="MC">Monaco</option> |
||
| 300 | <option value="MN">Mongolia</option> |
||
| 301 | <option value="ME">Montenegro</option> |
||
| 302 | <option value="MS">Montserrat</option> |
||
| 303 | <option value="MA">Morocco</option> |
||
| 304 | <option value="MZ">Mozambique</option> |
||
| 305 | <option value="MM">Myanmar</option> |
||
| 306 | <option value="NA">Namibia</option> |
||
| 307 | <option value="NR">Nauru</option> |
||
| 308 | <option value="NP">Nepal</option> |
||
| 309 | <option value="NL">Netherlands</option> |
||
| 310 | <option value="NC">New Caledonia</option> |
||
| 311 | <option value="NZ">New Zealand</option> |
||
| 312 | <option value="NI">Nicaragua</option> |
||
| 313 | <option value="NE">Niger</option> |
||
| 314 | <option value="NG">Nigeria</option> |
||
| 315 | <option value="NU">Niue</option> |
||
| 316 | <option value="NF">Norfolk Island</option> |
||
| 317 | <option value="MP">Northern Mariana Islands</option> |
||
| 318 | <option value="NO">Norway</option> |
||
| 319 | <option value="OM">Oman</option> |
||
| 320 | <option value="PK">Pakistan</option> |
||
| 321 | <option value="PW">Palau</option> |
||
| 322 | <option value="PS">Palestinian Territory, Occupied</option> |
||
| 323 | <option value="PA">Panama</option> |
||
| 324 | <option value="PG">Papua New Guinea</option> |
||
| 325 | <option value="PY">Paraguay</option> |
||
| 326 | <option value="PE">Peru</option> |
||
| 327 | <option value="PH">Philippines</option> |
||
| 328 | <option value="PN">Pitcairn</option> |
||
| 329 | <option value="PL">Poland</option> |
||
| 330 | <option value="PT">Portugal</option> |
||
| 331 | <option value="PR">Puerto Rico</option> |
||
| 332 | <option value="QA">Qatar</option> |
||
| 333 | <option value="RE">Réunion</option> |
||
| 334 | <option value="RO">Romania</option> |
||
| 335 | <option value="RU">Russian Federation</option> |
||
| 336 | <option value="RW">Rwanda</option> |
||
| 337 | <option value="BL">Saint Barthélemy</option> |
||
| 338 | <option value="SH">Saint Helena, Ascension and Tristan da Cunha</option> |
||
| 339 | <option value="KN">Saint Kitts and Nevis</option> |
||
| 340 | <option value="LC">Saint Lucia</option> |
||
| 341 | <option value="MF">Saint Martin (French part)</option> |
||
| 342 | <option value="PM">Saint Pierre and Miquelon</option> |
||
| 343 | <option value="VC">Saint Vincent and the Grenadines</option> |
||
| 344 | <option value="WS">Samoa</option> |
||
| 345 | <option value="SM">San Marino</option> |
||
| 346 | <option value="ST">Sao Tome and Principe</option> |
||
| 347 | <option value="SA">Saudi Arabia</option> |
||
| 348 | <option value="SN">Senegal</option> |
||
| 349 | <option value="RS">Serbia</option> |
||
| 350 | <option value="SC">Seychelles</option> |
||
| 351 | <option value="SL">Sierra Leone</option> |
||
| 352 | <option value="SG">Singapore</option> |
||
| 353 | <option value="SX">Sint Maarten (Dutch part)</option> |
||
| 354 | <option value="SK">Slovakia</option> |
||
| 355 | <option value="SI">Slovenia</option> |
||
| 356 | <option value="SB">Solomon Islands</option> |
||
| 357 | <option value="SO">Somalia</option> |
||
| 358 | <option value="ZA">South Africa</option> |
||
| 359 | <option value="GS">South Georgia and the South Sandwich Islands</option> |
||
| 360 | <option value="SS">South Sudan</option> |
||
| 361 | <option value="ES">Spain</option> |
||
| 362 | <option value="LK">Sri Lanka</option> |
||
| 363 | <option value="SD">Sudan</option> |
||
| 364 | <option value="SR">Suriname</option> |
||
| 365 | <option value="SJ">Svalbard and Jan Mayen</option> |
||
| 366 | <option value="SZ">Swaziland</option> |
||
| 367 | <option value="SE">Sweden</option> |
||
| 368 | <option value="CH">Switzerland</option> |
||
| 369 | <option value="SY">Syrian Arab Republic</option> |
||
| 370 | <option value="TW">Taiwan, Province of China</option> |
||
| 371 | <option value="TJ">Tajikistan</option> |
||
| 372 | <option value="TZ">Tanzania, United Republic of</option> |
||
| 373 | <option value="TH">Thailand</option> |
||
| 374 | <option value="TL">Timor-Leste</option> |
||
| 375 | <option value="TG">Togo</option> |
||
| 376 | <option value="TK">Tokelau</option> |
||
| 377 | <option value="TO">Tonga</option> |
||
| 378 | <option value="TT">Trinidad and Tobago</option> |
||
| 379 | <option value="TN">Tunisia</option> |
||
| 380 | <option value="TR">Turkey</option> |
||
| 381 | <option value="TM">Turkmenistan</option> |
||
| 382 | <option value="TC">Turks and Caicos Islands</option> |
||
| 383 | <option value="TV">Tuvalu</option> |
||
| 384 | <option value="UG">Uganda</option> |
||
| 385 | <option value="UA">Ukraine</option> |
||
| 386 | <option value="AE">United Arab Emirates</option> |
||
| 387 | <option value="GB">United Kingdom</option> |
||
| 388 | <option value="US">United States</option> |
||
| 389 | <option value="UM">United States Minor Outlying Islands</option> |
||
| 390 | <option value="UY">Uruguay</option> |
||
| 391 | <option value="UZ">Uzbekistan</option> |
||
| 392 | <option value="VU">Vanuatu</option> |
||
| 393 | <option value="VE">Venezuela, Bolivarian Republic of</option> |
||
| 394 | <option value="VN">Viet Nam</option> |
||
| 395 | <option value="VG">Virgin Islands, British</option> |
||
| 396 | <option value="VI">Virgin Islands, U.S.</option> |
||
| 397 | <option value="WF">Wallis and Futuna</option> |
||
| 398 | <option value="EH">Western Sahara</option> |
||
| 399 | <option value="YE">Yemen</option> |
||
| 400 | <option value="ZM">Zambia</option> |
||
| 401 | <option value="ZW">Zimbabwe</option> |
||
| 402 | </select>
|
||
| 403 | |||
| 404 | |||
| 405 | </li>
|
||
| 406 | </ol>
|
||
| 407 | </form>
|
||
| 408 | |||
| 409 | |||
| 410 | </div>
|
||
| 411 | |||
| 412 | </div>
|
||
| 413 | |||
| 414 | </body>
|
||
| 415 | </html> |