Commit cf352982103f231fa19157eadd90a0f1e7d06f29
Exists in
master
and in
1 other branch
add gitignore
Showing
123 changed files
with
1214 additions
and
422 deletions
Show diff stats
Too many changes.
To preserve performance only 100 of 123 files displayed.
settings_local.py.tmpl
| 1 | # -*- coding: utf-8 -*- | 1 | # -*- coding: utf-8 -*- |
| 2 | -# Corretor Server Configuration | 2 | +# WikiLibras Server Configuration |
| 3 | SERVER_HOST = "localhost" | 3 | SERVER_HOST = "localhost" |
| 4 | SERVER_PORT = 8003 | 4 | SERVER_PORT = 8003 |
| 5 | AGREEMENT_NUMBER = 2 | 5 | AGREEMENT_NUMBER = 2 |
| 6 | +API_HOST = "http://localhost:5001" | ||
| 6 | 7 | ||
| 7 | # PyBossa Configuration | 8 | # PyBossa Configuration |
| 8 | PYBOSSA_APP_NAME = "WikiLibras" | 9 | PYBOSSA_APP_NAME = "WikiLibras" |
view/assets/css/main.css
| @@ -17,8 +17,9 @@ body { | @@ -17,8 +17,9 @@ body { | ||
| 17 | } | 17 | } |
| 18 | 18 | ||
| 19 | .col-centered { | 19 | .col-centered { |
| 20 | + display: block; | ||
| 20 | float: none; | 21 | float: none; |
| 21 | - margin: 0 auto; | 22 | + margin: 0px auto; |
| 22 | } | 23 | } |
| 23 | 24 | ||
| 24 | .btn-default { | 25 | .btn-default { |
| @@ -51,19 +52,19 @@ body { | @@ -51,19 +52,19 @@ body { | ||
| 51 | } | 52 | } |
| 52 | 53 | ||
| 53 | #initial-screen { | 54 | #initial-screen { |
| 54 | - display: block; | 55 | + display: none; |
| 55 | } | 56 | } |
| 56 | 57 | ||
| 57 | #configuration-screen { | 58 | #configuration-screen { |
| 58 | display: none; | 59 | display: none; |
| 59 | } | 60 | } |
| 60 | 61 | ||
| 61 | -/* Reference Video */ | ||
| 62 | -.ref-video { | ||
| 63 | - border-style: solid; | ||
| 64 | - border-color: #b1cdeb; | ||
| 65 | - border-radius: 5px; | ||
| 66 | - border-width: 5px; | 62 | +#render-screen { |
| 63 | + display: none; | ||
| 64 | +} | ||
| 65 | + | ||
| 66 | +#thanks-screen { | ||
| 67 | + display: none; | ||
| 67 | } | 68 | } |
| 68 | 69 | ||
| 69 | .video-body-main { | 70 | .video-body-main { |
| @@ -71,6 +72,14 @@ body { | @@ -71,6 +72,14 @@ body { | ||
| 71 | width: 100%; | 72 | width: 100%; |
| 72 | } | 73 | } |
| 73 | 74 | ||
| 75 | +.video-border { | ||
| 76 | + border-style: solid; | ||
| 77 | + border-color: #b1cdeb; | ||
| 78 | + border-radius: 5px; | ||
| 79 | + border-width: 5px; | ||
| 80 | +} | ||
| 81 | + | ||
| 82 | +/* Reference Video */ | ||
| 74 | #maximize-icon-container { | 83 | #maximize-icon-container { |
| 75 | display: none; | 84 | display: none; |
| 76 | } | 85 | } |
| @@ -93,6 +102,32 @@ body { | @@ -93,6 +102,32 @@ body { | ||
| 93 | display: none; | 102 | display: none; |
| 94 | } | 103 | } |
| 95 | 104 | ||
| 105 | +#avatar-left-hand { | ||
| 106 | + display: none; | ||
| 107 | +} | ||
| 108 | + | ||
| 109 | +#avatar-body-face { | ||
| 110 | + position: absolute; | ||
| 111 | + left: 277px; | ||
| 112 | + z-index: 1000; | ||
| 113 | +} | ||
| 114 | + | ||
| 115 | +#avatar-body-right-hand { | ||
| 116 | + position: absolute; | ||
| 117 | + top: 270px; | ||
| 118 | + left: 115px; | ||
| 119 | + z-index: 1000; | ||
| 120 | + left: 115px; | ||
| 121 | +} | ||
| 122 | + | ||
| 123 | +#avatar-body-left-hand { | ||
| 124 | + position: absolute; | ||
| 125 | + top: 270px; | ||
| 126 | + left: 427px; | ||
| 127 | + z-index: 1000; | ||
| 128 | + left: 427px; | ||
| 129 | +} | ||
| 130 | + | ||
| 96 | #facial-edit { | 131 | #facial-edit { |
| 97 | top: 110px; | 132 | top: 110px; |
| 98 | left: 410px; | 133 | left: 410px; |
| @@ -129,11 +164,13 @@ body { | @@ -129,11 +164,13 @@ body { | ||
| 129 | } | 164 | } |
| 130 | 165 | ||
| 131 | .avatar-img { | 166 | .avatar-img { |
| 167 | + height: 100%; | ||
| 132 | -webkit-transition: width 1.5s ease-in-out, height 1.5s ease-in-out; | 168 | -webkit-transition: width 1.5s ease-in-out, height 1.5s ease-in-out; |
| 133 | -moz-transition: width 1.5s ease-in-out, height 1.5s ease-in-out; | 169 | -moz-transition: width 1.5s ease-in-out, height 1.5s ease-in-out; |
| 134 | -o-transition: width 1.5s ease-in-out, height 1.5s ease-in-out; | 170 | -o-transition: width 1.5s ease-in-out, height 1.5s ease-in-out; |
| 135 | -ms-transition: width 1.5s ease-in-out, height 1.5s ease-in-out; | 171 | -ms-transition: width 1.5s ease-in-out, height 1.5s ease-in-out; |
| 136 | transition: width 1.5s ease-in-out, height 1.5s ease-in-out; | 172 | transition: width 1.5s ease-in-out, height 1.5s ease-in-out; |
| 173 | + -webkit-transition: width 1.5s ease-in-out, height 1.5s ease-in-out; | ||
| 137 | } | 174 | } |
| 138 | 175 | ||
| 139 | .avatar-img-zoom-in { | 176 | .avatar-img-zoom-in { |
| @@ -147,7 +184,7 @@ body { | @@ -147,7 +184,7 @@ body { | ||
| 147 | position: relative; | 184 | position: relative; |
| 148 | height: 100%; | 185 | height: 100%; |
| 149 | left: 0px; | 186 | left: 0px; |
| 150 | - margin: 0 auto; | 187 | + margin-left: 103px; |
| 151 | } | 188 | } |
| 152 | 189 | ||
| 153 | .avatar-facial-img-zoom-in { | 190 | .avatar-facial-img-zoom-in { |
| @@ -158,7 +195,13 @@ body { | @@ -158,7 +195,13 @@ body { | ||
| 158 | 195 | ||
| 159 | .avatar-right-hand-img-zoom-in { | 196 | .avatar-right-hand-img-zoom-in { |
| 160 | position: relative; | 197 | position: relative; |
| 161 | - height: 100%; | 198 | + height: 115%; |
| 199 | + left: -27px; | ||
| 200 | +} | ||
| 201 | + | ||
| 202 | +.avatar-left-hand-img-zoom-in { | ||
| 203 | + position: relative; | ||
| 204 | + height: 115%; | ||
| 162 | left: -27px; | 205 | left: -27px; |
| 163 | } | 206 | } |
| 164 | 207 | ||
| @@ -272,6 +315,14 @@ ul.rig.columns-4 li { | @@ -272,6 +315,14 @@ ul.rig.columns-4 li { | ||
| 272 | width: 20%; | 315 | width: 20%; |
| 273 | } | 316 | } |
| 274 | 317 | ||
| 318 | +#right-hand-moviment ul.rig.columns-2 li { | ||
| 319 | + width: 60%; | ||
| 320 | +} | ||
| 321 | + | ||
| 322 | +#left-hand-moviment ul.rig.columns-2 li { | ||
| 323 | + width: 60%; | ||
| 324 | +} | ||
| 325 | + | ||
| 275 | .selection-panel-option { | 326 | .selection-panel-option { |
| 276 | max-width: 100%; | 327 | max-width: 100%; |
| 277 | border-radius: 5px; | 328 | border-radius: 5px; |
| @@ -283,7 +334,7 @@ ul.rig.columns-4 li { | @@ -283,7 +334,7 @@ ul.rig.columns-4 li { | ||
| 283 | cursor: pointer; | 334 | cursor: pointer; |
| 284 | } | 335 | } |
| 285 | 336 | ||
| 286 | -.selection-panel-option-hover { | 337 | +.selection-panel-option:hover, .selection-panel-option[select=true] { |
| 287 | border-color: #9678b0; | 338 | border-color: #9678b0; |
| 288 | } | 339 | } |
| 289 | 340 | ||
| @@ -300,15 +351,15 @@ ul.rig.columns-4 li { | @@ -300,15 +351,15 @@ ul.rig.columns-4 li { | ||
| 300 | display: none; | 351 | display: none; |
| 301 | } | 352 | } |
| 302 | 353 | ||
| 303 | -.expression-velocity-option .selection-panel-option { | 354 | +.single-column-option-container .selection-panel-option { |
| 304 | height: 100px; | 355 | height: 100px; |
| 305 | } | 356 | } |
| 306 | 357 | ||
| 307 | -.expression-velocity-option { | 358 | +.single-column-option-container { |
| 308 | padding-bottom: 20px; | 359 | padding-bottom: 20px; |
| 309 | } | 360 | } |
| 310 | 361 | ||
| 311 | -.velocity-option { | 362 | +.single-column-option { |
| 312 | display: inline-block; | 363 | display: inline-block; |
| 313 | padding-right: 25px; | 364 | padding-right: 25px; |
| 314 | } | 365 | } |
| @@ -344,4 +395,55 @@ ul.rig.columns-4 li { | @@ -344,4 +395,55 @@ ul.rig.columns-4 li { | ||
| 344 | /* Hand Configuration */ | 395 | /* Hand Configuration */ |
| 345 | #moviment-type { | 396 | #moviment-type { |
| 346 | display: none; | 397 | display: none; |
| 398 | +} | ||
| 399 | + | ||
| 400 | +/* Render Screen */ | ||
| 401 | +#render-avatar { | ||
| 402 | + display: none; | ||
| 403 | +} | ||
| 404 | + | ||
| 405 | +#render-main { | ||
| 406 | + height: 542px; | ||
| 407 | +} | ||
| 408 | + | ||
| 409 | +#render-screen .col-sm-12 { | ||
| 410 | + padding-left: 0px; | ||
| 411 | +} | ||
| 412 | + | ||
| 413 | +#render-loading { | ||
| 414 | + display: none; | ||
| 415 | +} | ||
| 416 | + | ||
| 417 | +#loading-container { | ||
| 418 | + position: relative; | ||
| 419 | + height: 407px; | ||
| 420 | +} | ||
| 421 | + | ||
| 422 | +#render-loading img { | ||
| 423 | + width: 100px; | ||
| 424 | + height: 100px; | ||
| 425 | + position: absolute; | ||
| 426 | + top: 0; | ||
| 427 | + bottom: 0; | ||
| 428 | + left: 0; | ||
| 429 | + right: 0; | ||
| 430 | + margin: auto; | ||
| 431 | +} | ||
| 432 | + | ||
| 433 | +/* Thanks Screen */ | ||
| 434 | +#thanks-screen h3 { | ||
| 435 | + margin-bottom: 0px; | ||
| 436 | +} | ||
| 437 | + | ||
| 438 | +#thanks-screen h6 { | ||
| 439 | + margin-top: 0px; | ||
| 440 | + margin-bottom: 60px; | ||
| 441 | +} | ||
| 442 | + | ||
| 443 | +#thanks-screen img { | ||
| 444 | + width: 100%; | ||
| 445 | +} | ||
| 446 | + | ||
| 447 | +#completed-all-task-msg { | ||
| 448 | + display: none; | ||
| 347 | } | 449 | } |
| 348 | \ No newline at end of file | 450 | \ No newline at end of file |
| @@ -0,0 +1,145 @@ | @@ -0,0 +1,145 @@ | ||
| 1 | +/*! | ||
| 2 | + * JavaScript Cookie v2.0.4 | ||
| 3 | + * https://github.com/js-cookie/js-cookie | ||
| 4 | + * | ||
| 5 | + * Copyright 2006, 2015 Klaus Hartl & Fagner Brack | ||
| 6 | + * Released under the MIT license | ||
| 7 | + */ | ||
| 8 | +(function (factory) { | ||
| 9 | + if (typeof define === 'function' && define.amd) { | ||
| 10 | + define(factory); | ||
| 11 | + } else if (typeof exports === 'object') { | ||
| 12 | + module.exports = factory(); | ||
| 13 | + } else { | ||
| 14 | + var _OldCookies = window.Cookies; | ||
| 15 | + var api = window.Cookies = factory(); | ||
| 16 | + api.noConflict = function () { | ||
| 17 | + window.Cookies = _OldCookies; | ||
| 18 | + return api; | ||
| 19 | + }; | ||
| 20 | + } | ||
| 21 | +}(function () { | ||
| 22 | + function extend () { | ||
| 23 | + var i = 0; | ||
| 24 | + var result = {}; | ||
| 25 | + for (; i < arguments.length; i++) { | ||
| 26 | + var attributes = arguments[ i ]; | ||
| 27 | + for (var key in attributes) { | ||
| 28 | + result[key] = attributes[key]; | ||
| 29 | + } | ||
| 30 | + } | ||
| 31 | + return result; | ||
| 32 | + } | ||
| 33 | + | ||
| 34 | + function init (converter) { | ||
| 35 | + function api (key, value, attributes) { | ||
| 36 | + var result; | ||
| 37 | + | ||
| 38 | + // Write | ||
| 39 | + | ||
| 40 | + if (arguments.length > 1) { | ||
| 41 | + attributes = extend({ | ||
| 42 | + path: '/' | ||
| 43 | + }, api.defaults, attributes); | ||
| 44 | + | ||
| 45 | + if (typeof attributes.expires === 'number') { | ||
| 46 | + var expires = new Date(); | ||
| 47 | + expires.setMilliseconds(expires.getMilliseconds() + attributes.expires * 864e+5); | ||
| 48 | + attributes.expires = expires; | ||
| 49 | + } | ||
| 50 | + | ||
| 51 | + try { | ||
| 52 | + result = JSON.stringify(value); | ||
| 53 | + if (/^[\{\[]/.test(result)) { | ||
| 54 | + value = result; | ||
| 55 | + } | ||
| 56 | + } catch (e) {} | ||
| 57 | + | ||
| 58 | + if (!converter.write) { | ||
| 59 | + value = encodeURIComponent(String(value)) | ||
| 60 | + .replace(/%(23|24|26|2B|3A|3C|3E|3D|2F|3F|40|5B|5D|5E|60|7B|7D|7C)/g, decodeURIComponent); | ||
| 61 | + } else { | ||
| 62 | + value = converter.write(value, key); | ||
| 63 | + } | ||
| 64 | + | ||
| 65 | + key = encodeURIComponent(String(key)); | ||
| 66 | + key = key.replace(/%(23|24|26|2B|5E|60|7C)/g, decodeURIComponent); | ||
| 67 | + key = key.replace(/[\(\)]/g, escape); | ||
| 68 | + | ||
| 69 | + return (document.cookie = [ | ||
| 70 | + key, '=', value, | ||
| 71 | + attributes.expires && '; expires=' + attributes.expires.toUTCString(), // use expires attribute, max-age is not supported by IE | ||
| 72 | + attributes.path && '; path=' + attributes.path, | ||
| 73 | + attributes.domain && '; domain=' + attributes.domain, | ||
| 74 | + attributes.secure ? '; secure' : '' | ||
| 75 | + ].join('')); | ||
| 76 | + } | ||
| 77 | + | ||
| 78 | + // Read | ||
| 79 | + | ||
| 80 | + if (!key) { | ||
| 81 | + result = {}; | ||
| 82 | + } | ||
| 83 | + | ||
| 84 | + // To prevent the for loop in the first place assign an empty array | ||
| 85 | + // in case there are no cookies at all. Also prevents odd result when | ||
| 86 | + // calling "get()" | ||
| 87 | + var cookies = document.cookie ? document.cookie.split('; ') : []; | ||
| 88 | + var rdecode = /(%[0-9A-Z]{2})+/g; | ||
| 89 | + var i = 0; | ||
| 90 | + | ||
| 91 | + for (; i < cookies.length; i++) { | ||
| 92 | + var parts = cookies[i].split('='); | ||
| 93 | + var name = parts[0].replace(rdecode, decodeURIComponent); | ||
| 94 | + var cookie = parts.slice(1).join('='); | ||
| 95 | + | ||
| 96 | + if (cookie.charAt(0) === '"') { | ||
| 97 | + cookie = cookie.slice(1, -1); | ||
| 98 | + } | ||
| 99 | + | ||
| 100 | + try { | ||
| 101 | + cookie = converter.read ? | ||
| 102 | + converter.read(cookie, name) : converter(cookie, name) || | ||
| 103 | + cookie.replace(rdecode, decodeURIComponent); | ||
| 104 | + | ||
| 105 | + if (this.json) { | ||
| 106 | + try { | ||
| 107 | + cookie = JSON.parse(cookie); | ||
| 108 | + } catch (e) {} | ||
| 109 | + } | ||
| 110 | + | ||
| 111 | + if (key === name) { | ||
| 112 | + result = cookie; | ||
| 113 | + break; | ||
| 114 | + } | ||
| 115 | + | ||
| 116 | + if (!key) { | ||
| 117 | + result[name] = cookie; | ||
| 118 | + } | ||
| 119 | + } catch (e) {} | ||
| 120 | + } | ||
| 121 | + | ||
| 122 | + return result; | ||
| 123 | + } | ||
| 124 | + | ||
| 125 | + api.get = api.set = api; | ||
| 126 | + api.getJSON = function () { | ||
| 127 | + return api.apply({ | ||
| 128 | + json: true | ||
| 129 | + }, [].slice.call(arguments)); | ||
| 130 | + }; | ||
| 131 | + api.defaults = {}; | ||
| 132 | + | ||
| 133 | + api.remove = function (key, attributes) { | ||
| 134 | + api(key, '', extend(attributes, { | ||
| 135 | + expires: -1 | ||
| 136 | + })); | ||
| 137 | + }; | ||
| 138 | + | ||
| 139 | + api.withConverter = init; | ||
| 140 | + | ||
| 141 | + return api; | ||
| 142 | + } | ||
| 143 | + | ||
| 144 | + return init(function () {}); | ||
| 145 | +})); |
view/assets/js/wikilibras.js
| @@ -2,7 +2,30 @@ | @@ -2,7 +2,30 @@ | ||
| 2 | 2 | ||
| 3 | var videos_url = ""; | 3 | var videos_url = ""; |
| 4 | var base_url = ""; | 4 | var base_url = ""; |
| 5 | + var api_url = ""; | ||
| 5 | var current_task_id = -1; | 6 | var current_task_id = -1; |
| 7 | + var base_parameter_json = {}; | ||
| 8 | + var moviment_parameter_json = {}; | ||
| 9 | + | ||
| 10 | + function _getLoggedUser() { | ||
| 11 | + var pybossa_rembember_token = Cookies.get("remember_token"); | ||
| 12 | + var splitted_token_id = pybossa_rembember_token.split("|"); | ||
| 13 | + return splitted_token_id.length > 0 ? splitted_token_id[0] | ||
| 14 | + : "anonymous"; | ||
| 15 | + } | ||
| 16 | + | ||
| 17 | + function _setupParameterJSON(sign_name) { | ||
| 18 | + base_parameter_json["userId"] = _getLoggedUser(); | ||
| 19 | + base_parameter_json["sinal"] = sign_name; | ||
| 20 | + base_parameter_json["interpolacao"] = "normal"; | ||
| 21 | + base_parameter_json["movimentos"] = []; | ||
| 22 | + // TODO remover propriedade articulação | ||
| 23 | + moviment_parameter_json = { | ||
| 24 | + "facial" : {}, | ||
| 25 | + "mao_direita" : {}, | ||
| 26 | + "mao_esquerda" : {} | ||
| 27 | + }; | ||
| 28 | + } | ||
| 6 | 29 | ||
| 7 | function _loadTaskInfo(task) { | 30 | function _loadTaskInfo(task) { |
| 8 | current_task_id = task.id; | 31 | current_task_id = task.id; |
| @@ -10,6 +33,8 @@ | @@ -10,6 +33,8 @@ | ||
| 10 | var ref_vid_link = videos_url + sign_name + "_REF.webm"; | 33 | var ref_vid_link = videos_url + sign_name + "_REF.webm"; |
| 11 | $(".sign-label").text(sign_name); | 34 | $(".sign-label").text(sign_name); |
| 12 | $(".ref-video").attr("src", ref_vid_link); | 35 | $(".ref-video").attr("src", ref_vid_link); |
| 36 | + | ||
| 37 | + _setupParameterJSON(task.info.sign_name); | ||
| 13 | } | 38 | } |
| 14 | 39 | ||
| 15 | function _changeImage(img, url) { | 40 | function _changeImage(img, url) { |
| @@ -27,64 +52,82 @@ | @@ -27,64 +52,82 @@ | ||
| 27 | _changeImage(img, hover_img_url); | 52 | _changeImage(img, hover_img_url); |
| 28 | } | 53 | } |
| 29 | 54 | ||
| 30 | - function _selectIcon(iconName, isSelect) { | ||
| 31 | - var icon_id = ".icon_container[name=" + iconName + "]"; | 55 | + function _selectIcon(iconName, isSelect, panel) { |
| 56 | + panel = typeof panel == "undefined" ? "" : "[panel=" + panel + "]"; | ||
| 57 | + var icon_id = ".icon_container[name=" + iconName + "]" + panel; | ||
| 32 | _enableIconHover(icon_id, isSelect); | 58 | _enableIconHover(icon_id, isSelect); |
| 33 | $(icon_id).attr("select", isSelect); | 59 | $(icon_id).attr("select", isSelect); |
| 34 | } | 60 | } |
| 35 | 61 | ||
| 36 | - function _deselectIcon(iconName) { | ||
| 37 | - _selectIcon(iconName, false); | 62 | + function _deselectIcon(iconName, parent) { |
| 63 | + _selectIcon(iconName, false, parent); | ||
| 38 | } | 64 | } |
| 39 | 65 | ||
| 40 | - function _setupCheckIcon(option) { | ||
| 41 | - var img = $(".icon_container[name=" + option + "]").find("img").first(); | ||
| 42 | - var check_img_url = base_url + "/img/" + option + "-icon-check.png"; | 66 | + function _setupCheckIcon(option, isCheck, panel) { |
| 67 | + panel = typeof panel == "undefined" ? "" : "[panel=" + panel + "]"; | ||
| 68 | + var img = $(".icon_container[name=" + option + "]" + panel).find("img") | ||
| 69 | + .first(); | ||
| 70 | + var check_img_url = base_url + "/img/" + option; | ||
| 71 | + | ||
| 72 | + if (isCheck) { | ||
| 73 | + check_img_url += "-icon-check.png"; | ||
| 74 | + } else { | ||
| 75 | + check_img_url += "-icon.png"; | ||
| 76 | + } | ||
| 77 | + | ||
| 43 | _changeImage(img, check_img_url); | 78 | _changeImage(img, check_img_url); |
| 44 | - $(".icon_container[name=" + option + "]").attr("complete", true); | 79 | + $(".icon_container[name=" + option + "]" + panel).attr("complete", isCheck); |
| 45 | } | 80 | } |
| 46 | 81 | ||
| 47 | function _isSelectingState() { | 82 | function _isSelectingState() { |
| 48 | return $("#configuration-panel .icon_container[select=true]").length > 0; | 83 | return $("#configuration-panel .icon_container[select=true]").length > 0; |
| 49 | } | 84 | } |
| 50 | 85 | ||
| 51 | - function _isConfigurationComplete(option) { | ||
| 52 | - return $(".icon_container[name=" + option + "][complete=true]").length > 0; | 86 | + function _isConfigurationComplete(config) { |
| 87 | + var total_config = $("#" + config | ||
| 88 | + + "-subconfiguration-options .icon_container").length; | ||
| 89 | + var completed_config = $("#" + config | ||
| 90 | + + "-subconfiguration-options .icon_container[complete=true]").length; | ||
| 91 | + return total_config == completed_config; | ||
| 53 | } | 92 | } |
| 54 | 93 | ||
| 55 | function _canHover(el) { | 94 | function _canHover(el) { |
| 56 | - return (!_isSelectingState() && typeof $(el).attr("complete") == "undefined") | ||
| 57 | - || typeof $(el).attr("select") == "undefined"; | 95 | + var incompleteConfig = typeof $(el).attr("complete") == "undefined" |
| 96 | + || $(el).attr("complete") == "false"; | ||
| 97 | + return (!_isSelectingState() && incompleteConfig) | ||
| 98 | + || (typeof $(el).attr("select") == "undefined" && incompleteConfig); | ||
| 58 | } | 99 | } |
| 59 | 100 | ||
| 60 | - function _getCurrentSelection() { | 101 | + function _getCurrentMainConfiguration() { |
| 61 | return _isSelectingState() ? $( | 102 | return _isSelectingState() ? $( |
| 62 | "#configuration-panel .icon_container[select=true]").attr( | 103 | "#configuration-panel .icon_container[select=true]").attr( |
| 63 | "name") : ""; | 104 | "name") : ""; |
| 64 | } | 105 | } |
| 65 | 106 | ||
| 66 | function _addZoomInToAvatar(option, callback) { | 107 | function _addZoomInToAvatar(option, callback) { |
| 67 | - $("#avatar-default").fadeOut( | ||
| 68 | - 500, | ||
| 69 | - function() { | ||
| 70 | - $("#avatar-container").removeClass("col-sm-7"); | ||
| 71 | - $("#avatar-container").addClass("col-sm-5"); | ||
| 72 | - $("#selection-container").removeClass("col-sm-2"); | ||
| 73 | - $("#selection-container").addClass("col-sm-4"); | ||
| 74 | - $("#avatar-" + option).fadeIn( | ||
| 75 | - 500, | ||
| 76 | - function() { | ||
| 77 | - $("#avatar-container").removeClass( | ||
| 78 | - "avatar-container-zoom-out"); | ||
| 79 | - $("#avatar-container").addClass( | ||
| 80 | - "avatar-container-zoom-in"); | ||
| 81 | - $("#avatar-" + option).removeClass( | ||
| 82 | - "avatar-img-zoom-out"); | ||
| 83 | - $("#avatar-" + option).addClass( | ||
| 84 | - "avatar-" + option + "-img-zoom-in"); | ||
| 85 | - callback(); | ||
| 86 | - }); | ||
| 87 | - }); | 108 | + $("#avatar-default") |
| 109 | + .fadeOut( | ||
| 110 | + 500, | ||
| 111 | + function() { | ||
| 112 | + $("#avatar-container").removeClass("col-sm-7"); | ||
| 113 | + $("#avatar-container").addClass("col-sm-5"); | ||
| 114 | + $("#selection-container").removeClass("col-sm-2"); | ||
| 115 | + $("#selection-container").addClass("col-sm-4"); | ||
| 116 | + $("#avatar-container").removeClass( | ||
| 117 | + "avatar-container-zoom-out"); | ||
| 118 | + $("#avatar-container").addClass( | ||
| 119 | + "avatar-container-zoom-in"); | ||
| 120 | + $("#avatar-" + option).removeClass( | ||
| 121 | + "avatar-img-zoom-out"); | ||
| 122 | + $("#avatar-" + option).fadeIn( | ||
| 123 | + 500, | ||
| 124 | + function() { | ||
| 125 | + $("#avatar-" + option).addClass( | ||
| 126 | + "avatar-" + option | ||
| 127 | + + "-img-zoom-in"); | ||
| 128 | + callback(); | ||
| 129 | + }); | ||
| 130 | + }); | ||
| 88 | } | 131 | } |
| 89 | 132 | ||
| 90 | function _addZoomOutToAvatar(option, callback) { | 133 | function _addZoomOutToAvatar(option, callback) { |
| @@ -114,13 +157,11 @@ | @@ -114,13 +157,11 @@ | ||
| 114 | function _clearPreviousSelection() { | 157 | function _clearPreviousSelection() { |
| 115 | $(".selection-panel-body").hide(); | 158 | $(".selection-panel-body").hide(); |
| 116 | $(".subconfiguration-options").hide(); | 159 | $(".subconfiguration-options").hide(); |
| 117 | - $(".subconfiguration-panel .icon_container[select=true]").attr( | ||
| 118 | - "select", false); | ||
| 119 | if (_isSelectingState()) { | 160 | if (_isSelectingState()) { |
| 120 | - var current_option = _getCurrentSelection(); | 161 | + var current_option = _getCurrentMainConfiguration(); |
| 121 | _selectIcon(current_option, false); | 162 | _selectIcon(current_option, false); |
| 122 | if (_isConfigurationComplete(current_option)) { | 163 | if (_isConfigurationComplete(current_option)) { |
| 123 | - _setupCheckIcon(current_option); | 164 | + _setupCheckIcon(current_option, true); |
| 124 | } | 165 | } |
| 125 | $("#avatar-" + current_option).fadeOut(500); | 166 | $("#avatar-" + current_option).fadeOut(500); |
| 126 | } | 167 | } |
| @@ -131,51 +172,180 @@ | @@ -131,51 +172,180 @@ | ||
| 131 | _selectIcon(option, true); | 172 | _selectIcon(option, true); |
| 132 | if (option == "facial") { | 173 | if (option == "facial") { |
| 133 | _setupFacialSelectionPanel(); | 174 | _setupFacialSelectionPanel(); |
| 134 | - } else if (option == "right-hand") { | ||
| 135 | - _setupHandSelectionPanel(option); | ||
| 136 | } else { | 175 | } else { |
| 137 | - return; | 176 | + _setupHandSelectionPanel(option); |
| 138 | } | 177 | } |
| 139 | _setupGUIOnSelection(option); | 178 | _setupGUIOnSelection(option); |
| 140 | } | 179 | } |
| 141 | 180 | ||
| 142 | function _hideSelectionPanel() { | 181 | function _hideSelectionPanel() { |
| 143 | - $("#selection-panel").fadeOut(300); | ||
| 144 | - var current_option = _getCurrentSelection(); | ||
| 145 | - if (_isConfigurationComplete(current_option)) { | ||
| 146 | - _setupCheckIcon(current_option); | 182 | + _setupCurrentSubConfiguration(true, false); |
| 183 | + | ||
| 184 | + var config = _getCurrentMainConfiguration(); | ||
| 185 | + _deselectIcon(config); | ||
| 186 | + if (_isConfigurationComplete(config)) { | ||
| 187 | + _finishConfiguration(config); | ||
| 147 | } | 188 | } |
| 148 | - _addZoomOutToAvatar(current_option, function() { | 189 | + |
| 190 | + _addZoomOutToAvatar(config, function() { | ||
| 149 | $("#ready-button").fadeIn(300); | 191 | $("#ready-button").fadeIn(300); |
| 150 | $(".edit-container").fadeIn(300); | 192 | $(".edit-container").fadeIn(300); |
| 151 | }); | 193 | }); |
| 194 | + $("#selection-panel").fadeOut(300); | ||
| 195 | + } | ||
| 196 | + | ||
| 197 | + function _canRenderSignVideo() { | ||
| 198 | + return _isConfigurationComplete("facial") | ||
| 199 | + && (_isConfigurationComplete("right-hand") || _isConfigurationComplete("left-hand")); | ||
| 152 | } | 200 | } |
| 153 | 201 | ||
| 154 | - function _finishConfiguration() { | ||
| 155 | - var current_option = _getCurrentSelection(); | ||
| 156 | - _deselectIcon(current_option); | ||
| 157 | - _setupCheckIcon(current_option); | ||
| 158 | - $("#" + current_option + "-edit .check-icon").show(); | 202 | + function _finishConfiguration(config) { |
| 203 | + _setupCheckIcon(config, true); | ||
| 204 | + _setupCheckIcon("avatar-" + config, true); | ||
| 205 | + $("#" + config + "-edit .check-icon").show(); | ||
| 206 | + | ||
| 207 | + if (_canRenderSignVideo()) { | ||
| 208 | + $("#ready-button").removeClass("disabled"); | ||
| 209 | + } | ||
| 159 | } | 210 | } |
| 160 | 211 | ||
| 161 | - function _showNextConfiguration() { | ||
| 162 | - // Add a check on current selected | ||
| 163 | - var option = $(".subconfiguration-panel .icon_container[select=true]") | ||
| 164 | - .attr("name"); | ||
| 165 | - var next = $(".subconfiguration-panel .icon_container[select=true]") | 212 | + function _unfinishConfiguration(config, panel) { |
| 213 | + _setupCheckIcon(config, false, panel); | ||
| 214 | + _setupCheckIcon("avatar-" + config, false, panel); | ||
| 215 | + $("#" + config + "-edit .check-icon").hide(); | ||
| 216 | + | ||
| 217 | + if (!_canRenderSignVideo()) { | ||
| 218 | + $("#ready-button").addClass("disabled"); | ||
| 219 | + } | ||
| 220 | + } | ||
| 221 | + ; | ||
| 222 | + | ||
| 223 | + // Subconfigurations | ||
| 224 | + function _getCurrentSubConfiguration() { | ||
| 225 | + var config = _getCurrentMainConfiguration(); | ||
| 226 | + return $( | ||
| 227 | + "#" | ||
| 228 | + + config | ||
| 229 | + + "-subconfiguration-options .icon_container[select=true]") | ||
| 230 | + .attr("panel"); | ||
| 231 | + } | ||
| 232 | + | ||
| 233 | + function _getNextSubConfiguration() { | ||
| 234 | + var config = _getCurrentMainConfiguration(); | ||
| 235 | + return $( | ||
| 236 | + "#" | ||
| 237 | + + config | ||
| 238 | + + "-subconfiguration-options .icon_container[select=true]") | ||
| 166 | .attr("next"); | 239 | .attr("next"); |
| 167 | - _deselectIcon(option); | ||
| 168 | - _setupCheckIcon(option); | ||
| 169 | - | 240 | + } |
| 241 | + | ||
| 242 | + function _getPreviousSubConfiguration() { | ||
| 243 | + var config = _getCurrentMainConfiguration(); | ||
| 244 | + return $( | ||
| 245 | + "#" | ||
| 246 | + + config | ||
| 247 | + + "-subconfiguration-options .icon_container[select=true]") | ||
| 248 | + .attr("previous"); | ||
| 249 | + } | ||
| 250 | + | ||
| 251 | + function _setupCurrentSubConfiguration(onHide, onFinish) { | ||
| 252 | + var current_subconfig = _getCurrentSubConfiguration(); | ||
| 253 | + | ||
| 254 | + if (!onHide) { | ||
| 255 | + _selectSubConfigurationIcon(current_subconfig, false); | ||
| 256 | + } | ||
| 257 | + | ||
| 258 | + // Add a check if the user finished a configuration | ||
| 259 | + if (onFinish && _hasSelectedAnOption(current_subconfig)) { | ||
| 260 | + _setupCheckSubConfigurationIcon(current_subconfig); | ||
| 261 | + } | ||
| 262 | + | ||
| 170 | // Hide the current selection panel | 263 | // Hide the current selection panel |
| 171 | - $("#" + option).hide(); | 264 | + $("#" + current_subconfig).hide(); |
| 265 | + } | ||
| 172 | 266 | ||
| 173 | - if (next == "end") { | ||
| 174 | - _hideSelectionPanel(); | ||
| 175 | - _finishConfiguration(); | 267 | + function _hasMultipleConfigurations(config) { |
| 268 | + return $("#" + config).is("[multiple-config]"); | ||
| 269 | + } | ||
| 270 | + | ||
| 271 | + function _setupMultipleConfiguration(config) { | ||
| 272 | + var sub_config_id = "#" + config + " [sub-config]"; | ||
| 273 | + var has_active_config = $(sub_config_id).is(":visible"); | ||
| 274 | + | ||
| 275 | + var main_config = _getCurrentMainConfiguration(); | ||
| 276 | + var icon_name = _getSubConfigurationIconName(config); | ||
| 277 | + var icon_id = "#" + main_config | ||
| 278 | + + "-subconfiguration-options .icon_container[name=" + icon_name | ||
| 279 | + + "]"; | ||
| 280 | + var sub_config = ""; | ||
| 281 | + | ||
| 282 | + if (!has_active_config) { | ||
| 283 | + sub_config = config + "-1"; | ||
| 284 | + if (!$(icon_id).is("[tmp-next]")) { | ||
| 285 | + $(icon_id).attr("tmp-next", $(icon_id).attr("next")); | ||
| 286 | + $(icon_id).attr("next", config); | ||
| 287 | + } | ||
| 288 | + } else { | ||
| 289 | + sub_config = $(sub_config_id + ":visible").attr("next"); | ||
| 290 | + } | ||
| 291 | + $(sub_config_id).hide(); | ||
| 292 | + | ||
| 293 | + if (sub_config == "end") { | ||
| 294 | + var tmp_next = $(icon_id).attr("tmp-next"); | ||
| 295 | + $(icon_id).removeAttr("tmp-next"); | ||
| 296 | + $(icon_id).attr("next", tmp_next); | ||
| 297 | + config = tmp_next; | ||
| 298 | + } else { | ||
| 299 | + if (sub_config.indexOf("fingers-position-2") != -1) { | ||
| 300 | + var finger_group = $( | ||
| 301 | + "#" | ||
| 302 | + + main_config | ||
| 303 | + + "-fingers-position-1 .selection-panel-option[select=true]") | ||
| 304 | + .attr("group"); | ||
| 305 | + $(".finger-group").hide(); | ||
| 306 | + $(".finger-group[group=" + finger_group + "]").show(); | ||
| 307 | + } | ||
| 308 | + $("#" + sub_config).show(); | ||
| 309 | + } | ||
| 310 | + return config; | ||
| 311 | + } | ||
| 312 | + | ||
| 313 | + function _getSubConfigurationIconName(subconfig) { | ||
| 314 | + subconfig = subconfig.replace("right-hand", "hand"); | ||
| 315 | + subconfig = subconfig.replace("left-hand", "hand"); | ||
| 316 | + return subconfig; | ||
| 317 | + } | ||
| 318 | + | ||
| 319 | + function _selectSubConfigurationIcon(subconfig, isSelect) { | ||
| 320 | + var iconName = _getSubConfigurationIconName(subconfig); | ||
| 321 | + _selectIcon(iconName, isSelect, subconfig); | ||
| 322 | + } | ||
| 323 | + | ||
| 324 | + function _setupCheckSubConfigurationIcon(subconfig) { | ||
| 325 | + var iconName = _getSubConfigurationIconName(subconfig); | ||
| 326 | + _setupCheckIcon(iconName, true, subconfig); | ||
| 327 | + } | ||
| 328 | + | ||
| 329 | + function _showSubConfiguration(next_config) { | ||
| 330 | + var current_config = _getCurrentSubConfiguration(); | ||
| 331 | + var next_has_multiple_config = _hasMultipleConfigurations(next_config); | ||
| 332 | + | ||
| 333 | + if (current_config == next_config && !next_has_multiple_config) | ||
| 334 | + return; | ||
| 335 | + | ||
| 336 | + var onFinish = true; | ||
| 337 | + if (next_has_multiple_config) { | ||
| 338 | + next_config = _setupMultipleConfiguration(next_config); | ||
| 339 | + onFinish = next_config != current_config; | ||
| 340 | + } | ||
| 341 | + | ||
| 342 | + _setupCurrentSubConfiguration(false, onFinish); | ||
| 343 | + | ||
| 344 | + if (next_config != "end") { | ||
| 345 | + _selectSubConfigurationIcon(next_config, true); | ||
| 346 | + $("#" + next_config).show(); | ||
| 176 | } else { | 347 | } else { |
| 177 | - _selectIcon(next, true); | ||
| 178 | - $("#" + next).show(); | 348 | + _hideSelectionPanel(); |
| 179 | } | 349 | } |
| 180 | } | 350 | } |
| 181 | 351 | ||
| @@ -187,16 +357,41 @@ | @@ -187,16 +357,41 @@ | ||
| 187 | }); | 357 | }); |
| 188 | } | 358 | } |
| 189 | 359 | ||
| 360 | + // TODO REFACT | ||
| 190 | function _setupFacialSelectionPanel() { | 361 | function _setupFacialSelectionPanel() { |
| 191 | - _selectIcon("facial-expression", true); | ||
| 192 | - $("#facial-expression").fadeIn(300); | 362 | + var previous_select = $("#facial-subconfiguration-options .icon_container[select=true]").length > 0; |
| 363 | + if (previous_select) { | ||
| 364 | + var subconfig = $( | ||
| 365 | + "#facial-subconfiguration-options .icon_container[select=true]") | ||
| 366 | + .attr("panel"); | ||
| 367 | + $("#" + subconfig).fadeIn(300); | ||
| 368 | + } else { | ||
| 369 | + _selectIcon("facial-expression", true); | ||
| 370 | + $("#facial-expression").fadeIn(300); | ||
| 371 | + } | ||
| 193 | $("#facial-subconfiguration-options").fadeIn(300); | 372 | $("#facial-subconfiguration-options").fadeIn(300); |
| 194 | } | 373 | } |
| 195 | 374 | ||
| 375 | + // TODO REFACT | ||
| 196 | function _setupHandSelectionPanel(option) { | 376 | function _setupHandSelectionPanel(option) { |
| 197 | - _selectIcon("hand-moviment", true); | ||
| 198 | - $("#hand-moviment").fadeIn(300); | ||
| 199 | - $("#hand-subconfiguration-options").fadeIn(300); | 377 | + var previous_select = $("#" + option |
| 378 | + + "-subconfiguration-options .icon_container[select=true]").length > 0; | ||
| 379 | + if (previous_select) { | ||
| 380 | + var subconfig = $( | ||
| 381 | + "#" | ||
| 382 | + + option | ||
| 383 | + + "-subconfiguration-options .icon_container[select=true]") | ||
| 384 | + .attr("panel"); | ||
| 385 | + | ||
| 386 | + if (_hasMultipleConfigurations(subconfig)) { | ||
| 387 | + $("#" + subconfig + "-1").show(); | ||
| 388 | + } | ||
| 389 | + $("#" + subconfig).fadeIn(300); | ||
| 390 | + } else { | ||
| 391 | + _selectIcon("hand-moviment", true, option + "-moviment"); | ||
| 392 | + $("#" + option + "-moviment").fadeIn(300); | ||
| 393 | + } | ||
| 394 | + $("#" + option + "-subconfiguration-options").fadeIn(300); | ||
| 200 | } | 395 | } |
| 201 | 396 | ||
| 202 | function _setupConfigurationPanel() { | 397 | function _setupConfigurationPanel() { |
| @@ -225,53 +420,198 @@ | @@ -225,53 +420,198 @@ | ||
| 225 | }); | 420 | }); |
| 226 | } | 421 | } |
| 227 | 422 | ||
| 423 | + // Selection Panel | ||
| 424 | + function _hasSelectedAnOption(subconfig) { | ||
| 425 | + return $("#" + subconfig + " .selection-panel-option[select=true]").length > 0; | ||
| 426 | + } | ||
| 427 | + | ||
| 428 | + // JSON | ||
| 429 | + function _getFirstKey(json) { | ||
| 430 | + var first_key = undefined; | ||
| 431 | + for (first_key in json) | ||
| 432 | + ; | ||
| 433 | + return first_key; | ||
| 434 | + } | ||
| 435 | + | ||
| 436 | + function _updateParameterJSON(config, value) { | ||
| 437 | + if (typeof config == "undefined" || typeof value == "undefined") | ||
| 438 | + return; | ||
| 439 | + | ||
| 440 | + var current_main_config = _getCurrentMainConfiguration(); | ||
| 441 | + current_main_config = current_main_config == "right-hand" ? "mao_direita" | ||
| 442 | + : current_main_config; | ||
| 443 | + current_main_config = current_main_config == "left-hand" ? "mao_esquerda" | ||
| 444 | + : current_main_config; | ||
| 445 | + value = !isNaN(value) ? parseInt(value) : value; | ||
| 446 | + | ||
| 447 | + if (config == "movimento") { | ||
| 448 | + var first_key = _getFirstKey(moviment_parameter_json[current_main_config]); | ||
| 449 | + if (typeof first_key == "undefined") { | ||
| 450 | + moviment_parameter_json[current_main_config][value] = { | ||
| 451 | + "articulacao" : 71 | ||
| 452 | + }; | ||
| 453 | + } else if (first_key != value) { | ||
| 454 | + moviment_parameter_json[current_main_config][value] = moviment_parameter_json[current_main_config][first_key]; | ||
| 455 | + delete moviment_parameter_json[current_main_config][first_key]; | ||
| 456 | + } | ||
| 457 | + } else if (current_main_config.indexOf("mao") != -1) { | ||
| 458 | + | ||
| 459 | + var first_key = _getFirstKey(moviment_parameter_json[current_main_config]); | ||
| 460 | + if (typeof first_key == "undefined") { | ||
| 461 | + first_key = "placeholder"; | ||
| 462 | + moviment_parameter_json[current_main_config][first_key] = { | ||
| 463 | + "articulacao" : 71 | ||
| 464 | + }; | ||
| 465 | + } | ||
| 466 | + moviment_parameter_json[current_main_config][first_key][config] = value; | ||
| 467 | + } else { | ||
| 468 | + moviment_parameter_json[current_main_config][config] = value; | ||
| 469 | + } | ||
| 470 | + } | ||
| 471 | + | ||
| 472 | + function _selectConfig(el) { | ||
| 473 | + var current_config_id = $(".selection-panel-body").has(el).attr("id"); | ||
| 474 | + var current_config_name = $(".selection-panel-body").has(el).attr( | ||
| 475 | + "name"); | ||
| 476 | + var config_value = $(el).attr("value"); | ||
| 477 | + $("#" + current_config_id + " .selection-panel-option[select=true]") | ||
| 478 | + .removeClass("selection-panel-option-hover"); | ||
| 479 | + $("#" + current_config_id + " .selection-panel-option[select=true]") | ||
| 480 | + .removeAttr("select"); | ||
| 481 | + $(el).attr("select", true); | ||
| 482 | + | ||
| 483 | + _updateParameterJSON(current_config_name, config_value); | ||
| 484 | + } | ||
| 485 | + | ||
| 228 | function _setupSelectionPanel() { | 486 | function _setupSelectionPanel() { |
| 229 | $("#selection-panel .x").off("click").on("click", function() { | 487 | $("#selection-panel .x").off("click").on("click", function() { |
| 230 | _hideSelectionPanel(); | 488 | _hideSelectionPanel(); |
| 231 | }); | 489 | }); |
| 232 | - $(".selection-panel-option") | ||
| 233 | - .off("mouseover") | ||
| 234 | - .on( | ||
| 235 | - "mouseover", | ||
| 236 | - function() { | ||
| 237 | - var hasSelected = $(".selection-panel-option[select=true]").length > 0; | ||
| 238 | - if (!hasSelected) { | ||
| 239 | - $(this) | ||
| 240 | - .addClass( | ||
| 241 | - "selection-panel-option-hover"); | ||
| 242 | - } | ||
| 243 | - }); | ||
| 244 | - $(".selection-panel-option") | ||
| 245 | - .off("mouseout") | ||
| 246 | - .on( | ||
| 247 | - "mouseout", | ||
| 248 | - function() { | ||
| 249 | - var hasSelected = $(".selection-panel-option[select=true]").length > 0; | ||
| 250 | - if (!hasSelected) { | ||
| 251 | - $(this).removeClass( | ||
| 252 | - "selection-panel-option-hover"); | ||
| 253 | - } | ||
| 254 | - }); | ||
| 255 | - | ||
| 256 | $(".selection-panel-body .selection-panel-option").off("click").on( | 490 | $(".selection-panel-body .selection-panel-option").off("click").on( |
| 257 | - "click", | 491 | + "click", function() { |
| 492 | + _selectConfig(this); | ||
| 493 | + var next = _getNextSubConfiguration(); | ||
| 494 | + _showSubConfiguration(next); | ||
| 495 | + }); | ||
| 496 | + $(".subconfiguration-options .icon_container").off("click").on("click", | ||
| 497 | + function() { | ||
| 498 | + var subconfig = $(this).attr("panel"); | ||
| 499 | + _showSubConfiguration(subconfig); | ||
| 500 | + }); | ||
| 501 | + $(".arrow[name=right-arrow]").off("click").on("click", function() { | ||
| 502 | + var next = _getNextSubConfiguration(); | ||
| 503 | + _showSubConfiguration(next); | ||
| 504 | + }); | ||
| 505 | + $(".arrow[name=left-arrow]").off("click").on("click", function() { | ||
| 506 | + var previous = _getPreviousSubConfiguration(); | ||
| 507 | + _showSubConfiguration(previous); | ||
| 508 | + }); | ||
| 509 | + } | ||
| 510 | + | ||
| 511 | + // Render Screen | ||
| 512 | + function _submitParameterJSON(callback) { | ||
| 513 | + base_parameter_json["movimentos"] = []; | ||
| 514 | + base_parameter_json["movimentos"].push(moviment_parameter_json); | ||
| 515 | + console.log(base_parameter_json); | ||
| 516 | + | ||
| 517 | + $.ajax({ | ||
| 518 | + type : "POST", | ||
| 519 | + url : api_url + "/sign", | ||
| 520 | + data : JSON.stringify(base_parameter_json), | ||
| 521 | + contentType : "application/json", | ||
| 522 | + success : function(response) { | ||
| 523 | + console.log(response); | ||
| 524 | + callback(); | ||
| 525 | + }, | ||
| 526 | + error : function(xhr, textStatus, error) { | ||
| 527 | + alert(xhr.responseText); | ||
| 528 | + } | ||
| 529 | + }); | ||
| 530 | + } | ||
| 531 | + | ||
| 532 | + function _showRenderedAvatar() { | ||
| 533 | + var user_id = base_parameter_json["userId"]; | ||
| 534 | + var sign_name = base_parameter_json["sinal"]; | ||
| 535 | + var rendered_avatar_url = api_url + "/public/" + user_id + "/" | ||
| 536 | + + sign_name + ".webm"; | ||
| 537 | + $("#render-avatar video").attr("src", rendered_avatar_url); | ||
| 538 | + $("#render-avatar").fadeIn(300); | ||
| 539 | + } | ||
| 540 | + | ||
| 541 | + function _setupRenderScreen() { | ||
| 542 | + $("#configuration-screen").hide(); | ||
| 543 | + $("#render-avatar").hide(); | ||
| 544 | + $("#render-screen").show(); | ||
| 545 | + $("#render-loading").fadeIn(300); | ||
| 546 | + $("#finish-button").addClass("disabled"); | ||
| 547 | + $("#render-ref video").prop("controls", false); | ||
| 548 | + $("#render-ref video").get(0).pause(); | ||
| 549 | + | ||
| 550 | + _submitParameterJSON(function() { | ||
| 551 | + $("#render-loading").fadeOut(300); | ||
| 552 | + $("#render-ref video").prop("controls", true); | ||
| 553 | + $("#render-ref video").get(0).play(); | ||
| 554 | + $("#finish-button").removeClass("disabled"); | ||
| 555 | + _showRenderedAvatar(); | ||
| 556 | + }); | ||
| 557 | + } | ||
| 558 | + | ||
| 559 | + function _clearGUI() { | ||
| 560 | + $(".selection-panel-option").removeAttr("select"); | ||
| 561 | + $(".icon_container").removeAttr("select"); | ||
| 562 | + $(".icon_container[complete=true]").each( | ||
| 258 | function() { | 563 | function() { |
| 259 | - $(".selection-panel-option[select=true]").removeClass( | ||
| 260 | - "selection-panel-option-hover"); | ||
| 261 | - $(".selection-panel-option[select=true]").removeAttr( | ||
| 262 | - "select"); | ||
| 263 | - $(this).attr("select", "true"); | ||
| 264 | - _showNextConfiguration(); | 564 | + _unfinishConfiguration($(this).attr("name"), $(this).attr( |
| 565 | + "panel")); | ||
| 265 | }); | 566 | }); |
| 266 | } | 567 | } |
| 267 | 568 | ||
| 268 | function _setupGUI(task, deferred) { | 569 | function _setupGUI(task, deferred) { |
| 570 | + _clearGUI(); | ||
| 571 | + _setupConfigurationPanel(); | ||
| 572 | + _setupSelectionPanel(); | ||
| 573 | + | ||
| 574 | + $("#initial-screen").fadeIn(300); | ||
| 269 | $("#start-button").off("click").on("click", function() { | 575 | $("#start-button").off("click").on("click", function() { |
| 270 | $("#initial-screen").hide(); | 576 | $("#initial-screen").hide(); |
| 271 | $("#configuration-screen").show(); | 577 | $("#configuration-screen").show(); |
| 272 | }); | 578 | }); |
| 273 | - _setupConfigurationPanel(); | ||
| 274 | - _setupSelectionPanel(); | 579 | + $("#ready-button").off("click").on("click", function() { |
| 580 | + _setupRenderScreen(); | ||
| 581 | + }); | ||
| 582 | + $("#render-edit").off("click").on("click", function() { | ||
| 583 | + $("#render-screen").hide(); | ||
| 584 | + $("#configuration-screen").show(); | ||
| 585 | + }); | ||
| 586 | + $("#finish-button").off("click").on("click", function() { | ||
| 587 | + $("#render-screen").hide(); | ||
| 588 | + $("#thanks-screen").show(); | ||
| 589 | + _saveAnswer(task, deferred) | ||
| 590 | + }); | ||
| 591 | + } | ||
| 592 | + | ||
| 593 | + function _saveAnswer(task, deferred) { | ||
| 594 | + var answer = {} | ||
| 595 | + answer["status"] = "FINISHED"; | ||
| 596 | + answer["parameter_json"] = base_parameter_json; | ||
| 597 | + | ||
| 598 | + /*pybossa.saveTask(task.id, answer).done(function() { | ||
| 599 | + setTimeout(function() { | ||
| 600 | + $("#thanks-screen").hide(); | ||
| 601 | + deferred.resolve(); | ||
| 602 | + }, 2500); | ||
| 603 | + });*/ | ||
| 604 | + | ||
| 605 | + setTimeout(function() { | ||
| 606 | + $("#thanks-screen").hide(); | ||
| 607 | + deferred.resolve(); | ||
| 608 | + }, 2500); | ||
| 609 | + } | ||
| 610 | + | ||
| 611 | + function _showCompletedAllTaskMsg() { | ||
| 612 | + $("#completed-task-msg").hide(); | ||
| 613 | + $("#completed-all-task-msg").show(); | ||
| 614 | + $("#thanks-screen").fadeIn(300); | ||
| 275 | } | 615 | } |
| 276 | 616 | ||
| 277 | pybossa.presentTask(function(task, deferred) { | 617 | pybossa.presentTask(function(task, deferred) { |
| @@ -279,8 +619,10 @@ | @@ -279,8 +619,10 @@ | ||
| 279 | _loadTaskInfo(task); | 619 | _loadTaskInfo(task); |
| 280 | _setupGUI(task, deferred) | 620 | _setupGUI(task, deferred) |
| 281 | $("#main-container").fadeIn(500); | 621 | $("#main-container").fadeIn(500); |
| 622 | + console.log(base_parameter_json); | ||
| 623 | + console.log(moviment_parameter_json); | ||
| 282 | } else { | 624 | } else { |
| 283 | - $("#main-container").hide(); | 625 | + _showCompletedAllTaskMsg(); |
| 284 | } | 626 | } |
| 285 | }); | 627 | }); |
| 286 | 628 | ||
| @@ -290,9 +632,10 @@ | @@ -290,9 +632,10 @@ | ||
| 290 | } | 632 | } |
| 291 | 633 | ||
| 292 | // Public methods | 634 | // Public methods |
| 293 | - wikilibras.run = function(serverhost, projectname) { | 635 | + wikilibras.run = function(serverhost, projectname, apihost) { |
| 294 | base_url = serverhost; | 636 | base_url = serverhost; |
| 295 | videos_url = base_url + "/videos/"; | 637 | videos_url = base_url + "/videos/"; |
| 638 | + api_url = apihost; | ||
| 296 | _run(projectname); | 639 | _run(projectname); |
| 297 | }; | 640 | }; |
| 298 | 641 |
| @@ -0,0 +1,134 @@ | @@ -0,0 +1,134 @@ | ||
| 1 | +{% macro selectionPanel() -%} | ||
| 2 | +<div id="facial-expression" class="selection-panel-body" panel="facial" | ||
| 3 | + name="expressao"> | ||
| 4 | + <div class="panel-header"> | ||
| 5 | + <h8>Expressão</h8> | ||
| 6 | + </div> | ||
| 7 | + <div class="selection-panel-inner-body"> | ||
| 8 | + <ul class="rig columns-3"> | ||
| 9 | + <li><img class="selection-panel-option" | ||
| 10 | + src="{{ server }}/img/exf/0000.png" value="0" /> 1.</li> | ||
| 11 | + <li><img class="selection-panel-option" | ||
| 12 | + src="{{ server }}/img/exf/0001.png" value="1" /> 2.</li> | ||
| 13 | + <li><img class="selection-panel-option" | ||
| 14 | + src="{{ server }}/img/exf/0002.png" value="2" /> 3.</li> | ||
| 15 | + <li><img class="selection-panel-option" | ||
| 16 | + src="{{ server }}/img/exf/0003.png" value="3" /> 4.</li> | ||
| 17 | + <li><img class="selection-panel-option" | ||
| 18 | + src="{{ server }}/img/exf/0004.png" value="4" /> 5.</li> | ||
| 19 | + <li><img class="selection-panel-option" | ||
| 20 | + src="{{ server }}/img/exf/0005.png" value="5" /> 6.</li> | ||
| 21 | + <li><img class="selection-panel-option" | ||
| 22 | + src="{{ server }}/img/exf/0006.png" value="6" /> 7.</li> | ||
| 23 | + <li><img class="selection-panel-option" | ||
| 24 | + src="{{ server }}/img/exf/0007.png" value="7" /> 8.</li> | ||
| 25 | + <li><img class="selection-panel-option" | ||
| 26 | + src="{{ server }}/img/exf/0008.png" value="8" /> 9.</li> | ||
| 27 | + <li><img class="selection-panel-option" | ||
| 28 | + src="{{ server }}/img/exf/0009.png" value="9" />10.</li> | ||
| 29 | + <li><img class="selection-panel-option" | ||
| 30 | + src="{{ server }}/img/exf/0010.png" value="10" />11.</li> | ||
| 31 | + <li><img class="selection-panel-option" | ||
| 32 | + src="{{ server }}/img/exf/0011.png" value="11" />12.</li> | ||
| 33 | + <li><img class="selection-panel-option" | ||
| 34 | + src="{{ server }}/img/exf/0012.png" value="12" />13.</li> | ||
| 35 | + <li><img class="selection-panel-option" | ||
| 36 | + src="{{ server }}/img/exf/0013.png" value="13" />14.</li> | ||
| 37 | + <li><img class="selection-panel-option" | ||
| 38 | + src="{{ server }}/img/exf/0014.png" value="14" />15.</li> | ||
| 39 | + <li><img class="selection-panel-option" | ||
| 40 | + src="{{ server }}/img/exf/0015.png" value="15" />16.</li> | ||
| 41 | + <li><img class="selection-panel-option" | ||
| 42 | + src="{{ server }}/img/exf/0016.png" value="16" />17.</li> | ||
| 43 | + <li><img class="selection-panel-option" | ||
| 44 | + src="{{ server }}/img/exf/0017.png" value="17" />18.</li> | ||
| 45 | + <li><img class="selection-panel-option" | ||
| 46 | + src="{{ server }}/img/exf/0018.png" value="18" />19.</li> | ||
| 47 | + <li><img class="selection-panel-option" | ||
| 48 | + src="{{ server }}/img/exf/0019.png" value="19" />20.</li> | ||
| 49 | + <li><img class="selection-panel-option" | ||
| 50 | + src="{{ server }}/img/exf/0020.png" value="20" />21.</li> | ||
| 51 | + </ul> | ||
| 52 | + </div> | ||
| 53 | +</div> | ||
| 54 | +<div id="facial-expression-velocity" class="selection-panel-body" | ||
| 55 | + panel="facial" name="transicao"> | ||
| 56 | + <div class="panel-header"> | ||
| 57 | + <h8>Velocidade de Transição</h8> | ||
| 58 | + </div> | ||
| 59 | + <div class="single-column-option-container"> | ||
| 60 | + <div class="single-column-option"> | ||
| 61 | + <img class="selection-panel-option" | ||
| 62 | + src="{{ server }}/img/exf/0000.png" value="lento" /> | ||
| 63 | + </div> | ||
| 64 | + <img class="single-column-option" | ||
| 65 | + src="{{ server }}/img/slow-velocity-icon.png" /> Lento | ||
| 66 | + </div> | ||
| 67 | + <div class="single-column-option-container"> | ||
| 68 | + <div class="single-column-option"> | ||
| 69 | + <img class="selection-panel-option" | ||
| 70 | + src="{{ server }}/img/exf/0000.png" value="normal" /> | ||
| 71 | + </div> | ||
| 72 | + <img class="single-column-option" | ||
| 73 | + src="{{ server }}/img/normal-velocity-icon.png" /> Normal | ||
| 74 | + </div> | ||
| 75 | + <div class="single-column-option-container"> | ||
| 76 | + <div class="single-column-option"> | ||
| 77 | + <img class="selection-panel-option" | ||
| 78 | + src="{{ server }}/img/exf/0000.png" value="rapido" /> | ||
| 79 | + </div> | ||
| 80 | + <img class="single-column-option" | ||
| 81 | + src="{{ server }}/img/fast-velocity-icon.png" /> Rápido | ||
| 82 | + </div> | ||
| 83 | +</div> | ||
| 84 | +<div id="facial-expression-duration" class="selection-panel-body" | ||
| 85 | + panel="facial" name="duracao"> | ||
| 86 | + <div class="panel-header"> | ||
| 87 | + <h8>Duração da Expressão</h8> | ||
| 88 | + </div> | ||
| 89 | + <div class="single-column-option-container"> | ||
| 90 | + <div class="single-column-option"> | ||
| 91 | + <img class="selection-panel-option" | ||
| 92 | + src="{{ server }}/img/exf/0000.png" value="lento" /> | ||
| 93 | + </div> | ||
| 94 | + <img class="single-column-option" | ||
| 95 | + src="{{ server }}/img/long-duration-icon.png" /> Longa | ||
| 96 | + </div> | ||
| 97 | + <div class="single-column-option-container"> | ||
| 98 | + <div class="single-column-option"> | ||
| 99 | + <img class="selection-panel-option" | ||
| 100 | + src="{{ server }}/img/exf/0000.png" value="normal" /> | ||
| 101 | + </div> | ||
| 102 | + <img class="single-column-option" | ||
| 103 | + src="{{ server }}/img/normal-duration-icon.png" /> Normal | ||
| 104 | + </div> | ||
| 105 | + <div class="single-column-option-container"> | ||
| 106 | + <div class="single-column-option"> | ||
| 107 | + <img class="selection-panel-option" | ||
| 108 | + src="{{ server }}/img/exf/0000.png" value="rapido" /> | ||
| 109 | + </div> | ||
| 110 | + <img class="single-column-option" | ||
| 111 | + src="{{ server }}/img/short-duration-icon.png" /> Breve | ||
| 112 | + </div> | ||
| 113 | +</div> | ||
| 114 | +{%- endmacro %} {%- macro subconfigPanel() -%} | ||
| 115 | +<div id="facial-subconfiguration-options" | ||
| 116 | + class="subconfiguration-options col-sm-10"> | ||
| 117 | + <div class="icon_container" name="facial-expression" | ||
| 118 | + panel="facial-expression" previous="facial-expression" | ||
| 119 | + next="facial-expression-velocity"> | ||
| 120 | + <img src="{{ server }}/img/facial-expression-icon.png" /> | ||
| 121 | + </div> | ||
| 122 | + <div class="icon_container" name="facial-expression-velocity" | ||
| 123 | + panel="facial-expression-velocity" previous="facial-expression" | ||
| 124 | + next="facial-expression-duration"> | ||
| 125 | + <img style="position: relative; top: -4px;" | ||
| 126 | + src="{{ server }}/img/facial-expression-velocity-icon.png" /> | ||
| 127 | + </div> | ||
| 128 | + <div class="icon_container" name="facial-expression-duration" | ||
| 129 | + panel="facial-expression-duration" | ||
| 130 | + previous="facial-expression-velocity" next="end"> | ||
| 131 | + <img src="{{ server }}/img/facial-expression-duration-icon.png" /> | ||
| 132 | + </div> | ||
| 133 | +</div> | ||
| 134 | +{%- endmacro %} |
| @@ -0,0 +1,271 @@ | @@ -0,0 +1,271 @@ | ||
| 1 | +{% macro selectionPanel(name) -%} | ||
| 2 | +{% if name == 'right-hand' %} | ||
| 3 | +{% set fingers_position_dir = "cmd" %} | ||
| 4 | +{% set orientation_dir = "ord" %} | ||
| 5 | +{% else %} | ||
| 6 | +{% set fingers_position_dir = "cme" %} | ||
| 7 | +{% set orientation_dir = "ore" %} | ||
| 8 | +{% endif %} | ||
| 9 | + | ||
| 10 | +<div id="{{ name }}-moviment" class="selection-panel-body" name="movimento"> | ||
| 11 | + <div class="panel-header"> | ||
| 12 | + <h8>Escolha o movimento mais parecido</h8> | ||
| 13 | + </div> | ||
| 14 | + <div class="selection-panel-inner-body"> | ||
| 15 | + <ul class="rig columns-2"> | ||
| 16 | + <li><img class="selection-panel-option" | ||
| 17 | + src="{{ server }}/img/mov/CALAR.gif" value="pontual"/>Pontual</li> | ||
| 18 | + <!-- | ||
| 19 | + <li><img class="selection-panel-option" | ||
| 20 | + src="{{ server }}/img/exf/0000.png" value="retilineo"/>Retilíneo</li> | ||
| 21 | + <li><img class="selection-panel-option" | ||
| 22 | + src="{{ server }}/img/exf/0000.png" value="circular"/>Circular</li> | ||
| 23 | + <li><img class="selection-panel-option" | ||
| 24 | + src="{{ server }}/img/exf/0000.png" value="semicircular"/>Semi-Circular</li> | ||
| 25 | + <li><img class="selection-panel-option" | ||
| 26 | + src="{{ server }}/img/exf/0000.png" value="helicoidal"/>Espiral</li> | ||
| 27 | + <li><img class="selection-panel-option" | ||
| 28 | + src="{{ server }}/img/exf/0000.png" value="senoidal"/>Curvas</li> | ||
| 29 | + <li><img class="selection-panel-option" | ||
| 30 | + src="{{ server }}/img/exf/0000.png" value="contato"/>Contato</li> | ||
| 31 | + --> | ||
| 32 | + </ul> | ||
| 33 | + </div> | ||
| 34 | +</div> | ||
| 35 | +<div id="{{ name }}-fingers-position" multiple-config> | ||
| 36 | + <div id="{{ name }}-fingers-position-1" class="selection-panel-body" | ||
| 37 | + style="display: none;" next="{{ name }}-fingers-position-2" sub-config> | ||
| 38 | + <div class="panel-header"> | ||
| 39 | + <h8>Escolha a posição mais parecida dos dedos</h8> | ||
| 40 | + </div> | ||
| 41 | + <div class="selection-panel-inner-body"> | ||
| 42 | + <ul class="rig columns-3"> | ||
| 43 | + <li><img class="selection-panel-option" | ||
| 44 | + src="{{ server }}/img/{{ fingers_position_dir }}/0007.png" | ||
| 45 | + group="0" /> 0.</li> | ||
| 46 | + <li><img class="selection-panel-option" | ||
| 47 | + src="{{ server }}/img/{{ fingers_position_dir }}/0014.png" | ||
| 48 | + group="1" /> 1.</li> | ||
| 49 | + <li><img class="selection-panel-option" | ||
| 50 | + src="{{ server }}/img/{{ fingers_position_dir }}/0045.png" | ||
| 51 | + group="2" /> 2.</li> | ||
| 52 | + <li><img class="selection-panel-option" | ||
| 53 | + src="{{ server }}/img/{{ fingers_position_dir }}/0048.png" | ||
| 54 | + group="3" /> 3.</li> | ||
| 55 | + <li><img class="selection-panel-option" | ||
| 56 | + src="{{ server }}/img/{{ fingers_position_dir }}/0040.png" | ||
| 57 | + group="4" /> 4.</li> | ||
| 58 | + <li><img class="selection-panel-option" | ||
| 59 | + src="{{ server }}/img/{{ fingers_position_dir }}/0000.png" | ||
| 60 | + group="5" /> 5.</li> | ||
| 61 | + </ul> | ||
| 62 | + </div> | ||
| 63 | + </div> | ||
| 64 | + <div id="{{ name }}-fingers-position-2" class="selection-panel-body" | ||
| 65 | + style="display: none;" next="end" sub-config name="configuracao"> | ||
| 66 | + <div class="panel-header"> | ||
| 67 | + <h8>Escolha a posição dos dedos</h8> | ||
| 68 | + </div> | ||
| 69 | + <div class="selection-panel-inner-body"> | ||
| 70 | + <div class="finger-group" group="0"> | ||
| 71 | + <ul class="rig columns-4"> | ||
| 72 | + <li><img class="selection-panel-option" | ||
| 73 | + src="{{ server }}/img/{{ fingers_position_dir }}/0001.png" value="1"/> 1.</li> | ||
| 74 | + <li><img class="selection-panel-option" | ||
| 75 | + src="{{ server }}/img/{{ fingers_position_dir }}/0002.png" value="2"/> 2.</li> | ||
| 76 | + <li><img class="selection-panel-option" | ||
| 77 | + src="{{ server }}/img/{{ fingers_position_dir }}/0007.png" value="7"/> 3.</li> | ||
| 78 | + <li><img class="selection-panel-option" | ||
| 79 | + src="{{ server }}/img/{{ fingers_position_dir }}/0008.png" value="8"/> 4.</li> | ||
| 80 | + <li><img class="selection-panel-option" | ||
| 81 | + src="{{ server }}/img/{{ fingers_position_dir }}/0009.png" value="9"/> 5.</li> | ||
| 82 | + <li><img class="selection-panel-option" | ||
| 83 | + src="{{ server }}/img/{{ fingers_position_dir }}/0010.png" value="10"/> 6.</li> | ||
| 84 | + <li><img class="selection-panel-option" | ||
| 85 | + src="{{ server }}/img/{{ fingers_position_dir }}/0011.png" value="11"/> 7.</li> | ||
| 86 | + <li><img class="selection-panel-option" | ||
| 87 | + src="{{ server }}/img/{{ fingers_position_dir }}/0016.png" value="16"/> 8.</li> | ||
| 88 | + <li><img class="selection-panel-option" | ||
| 89 | + src="{{ server }}/img/{{ fingers_position_dir }}/0017.png" value="17"/> 9.</li> | ||
| 90 | + <li><img class="selection-panel-option" | ||
| 91 | + src="{{ server }}/img/{{ fingers_position_dir }}/0018.png" value="18"/> 10.</li> | ||
| 92 | + <li><img class="selection-panel-option" | ||
| 93 | + src="{{ server }}/img/{{ fingers_position_dir }}/0019.png" value="19"/> 11.</li> | ||
| 94 | + <li><img class="selection-panel-option" | ||
| 95 | + src="{{ server }}/img/{{ fingers_position_dir }}/0020.png" value="20"/> 12.</li> | ||
| 96 | + <li><img class="selection-panel-option" | ||
| 97 | + src="{{ server }}/img/{{ fingers_position_dir }}/0021.png" value="21"/> 13.</li> | ||
| 98 | + <li><img class="selection-panel-option" | ||
| 99 | + src="{{ server }}/img/{{ fingers_position_dir }}/0022.png" value="22"/> 14.</li> | ||
| 100 | + <li><img class="selection-panel-option" | ||
| 101 | + src="{{ server }}/img/{{ fingers_position_dir }}/0023.png" value="23"/> 15.</li> | ||
| 102 | + <li><img class="selection-panel-option" | ||
| 103 | + src="{{ server }}/img/{{ fingers_position_dir }}/0024.png" value="24"/> 16.</li> | ||
| 104 | + <li><img class="selection-panel-option" | ||
| 105 | + src="{{ server }}/img/{{ fingers_position_dir }}/0058.png" value="58"/> 17.</li> | ||
| 106 | + <li><img class="selection-panel-option" | ||
| 107 | + src="{{ server }}/img/{{ fingers_position_dir }}/0059.png" value="59"/> 18.</li> | ||
| 108 | + <li><img class="selection-panel-option" | ||
| 109 | + src="{{ server }}/img/{{ fingers_position_dir }}/0060.png" value="60"/> 19.</li> | ||
| 110 | + </ul> | ||
| 111 | + </div> | ||
| 112 | + <div class="finger-group" group="1"> | ||
| 113 | + <ul class="rig columns-4"> | ||
| 114 | + <li><img class="selection-panel-option" | ||
| 115 | + src="{{ server }}/img/{{ fingers_position_dir }}/0003.png" value="3"/> 1.</li> | ||
| 116 | + <li><img class="selection-panel-option" | ||
| 117 | + src="{{ server }}/img/{{ fingers_position_dir }}/0005.png" value="5"/> 2.</li> | ||
| 118 | + <li><img class="selection-panel-option" | ||
| 119 | + src="{{ server }}/img/{{ fingers_position_dir }}/0006.png" value="6"/> 3.</li> | ||
| 120 | + <li><img class="selection-panel-option" | ||
| 121 | + src="{{ server }}/img/{{ fingers_position_dir }}/0012.png" value="12"/> 4.</li> | ||
| 122 | + <li><img class="selection-panel-option" | ||
| 123 | + src="{{ server }}/img/{{ fingers_position_dir }}/0013.png" value="13"/> 5.</li> | ||
| 124 | + <li><img class="selection-panel-option" | ||
| 125 | + src="{{ server }}/img/{{ fingers_position_dir }}/0014.png" value="14"/> 6.</li> | ||
| 126 | + <li><img class="selection-panel-option" | ||
| 127 | + src="{{ server }}/img/{{ fingers_position_dir }}/0030.png" value="30"/> 7.</li> | ||
| 128 | + <li><img class="selection-panel-option" | ||
| 129 | + src="{{ server }}/img/{{ fingers_position_dir }}/0052.png" value="52"/> 8.</li> | ||
| 130 | + </ul> | ||
| 131 | + </div> | ||
| 132 | + <div class="finger-group" group="2"> | ||
| 133 | + <ul class="rig columns-4"> | ||
| 134 | + <li><img class="selection-panel-option" | ||
| 135 | + src="{{ server }}/img/{{ fingers_position_dir }}/0004.png" value="4"/> 1.</li> | ||
| 136 | + <li><img class="selection-panel-option" | ||
| 137 | + src="{{ server }}/img/{{ fingers_position_dir }}/0015.png" value="15"/> 2.</li> | ||
| 138 | + <li><img class="selection-panel-option" | ||
| 139 | + src="{{ server }}/img/{{ fingers_position_dir }}/0029.png" value="29"/> 3.</li> | ||
| 140 | + <li><img class="selection-panel-option" | ||
| 141 | + src="{{ server }}/img/{{ fingers_position_dir }}/0031.png" value="31"/> 4.</li> | ||
| 142 | + <li><img class="selection-panel-option" | ||
| 143 | + src="{{ server }}/img/{{ fingers_position_dir }}/0032.png" value="32"/> 5.</li> | ||
| 144 | + <li><img class="selection-panel-option" | ||
| 145 | + src="{{ server }}/img/{{ fingers_position_dir }}/0035.png" value="35"/> 6.</li> | ||
| 146 | + <li><img class="selection-panel-option" | ||
| 147 | + src="{{ server }}/img/{{ fingers_position_dir }}/0036.png" value="36"/> 7.</li> | ||
| 148 | + <li><img class="selection-panel-option" | ||
| 149 | + src="{{ server }}/img/{{ fingers_position_dir }}/0045.png" value="45"/> 8.</li> | ||
| 150 | + <li><img class="selection-panel-option" | ||
| 151 | + src="{{ server }}/img/{{ fingers_position_dir }}/0051.png" value="51"/> 9.</li> | ||
| 152 | + </ul> | ||
| 153 | + </div> | ||
| 154 | + <div class="finger-group" group="3"> | ||
| 155 | + <ul class="rig columns-4"> | ||
| 156 | + <li><img class="selection-panel-option" | ||
| 157 | + src="{{ server }}/img/{{ fingers_position_dir }}/0033.png" value="33"/> 1.</li> | ||
| 158 | + <li><img class="selection-panel-option" | ||
| 159 | + src="{{ server }}/img/{{ fingers_position_dir }}/0034.png" value="34"/> 2.</li> | ||
| 160 | + <li><img class="selection-panel-option" | ||
| 161 | + src="{{ server }}/img/{{ fingers_position_dir }}/0037.png" value="37"/> 3.</li> | ||
| 162 | + <li><img class="selection-panel-option" | ||
| 163 | + src="{{ server }}/img/{{ fingers_position_dir }}/0039.png" value="39"/> 4.</li> | ||
| 164 | + <li><img class="selection-panel-option" | ||
| 165 | + src="{{ server }}/img/{{ fingers_position_dir }}/0043.png" value="43"/> 5.</li> | ||
| 166 | + <li><img class="selection-panel-option" | ||
| 167 | + src="{{ server }}/img/{{ fingers_position_dir }}/0044.png" value="44"/> 6.</li> | ||
| 168 | + <li><img class="selection-panel-option" | ||
| 169 | + src="{{ server }}/img/{{ fingers_position_dir }}/0046.png" value="46"/> 7.</li> | ||
| 170 | + <li><img class="selection-panel-option" | ||
| 171 | + src="{{ server }}/img/{{ fingers_position_dir }}/0047.png" value="47"/> 8.</li> | ||
| 172 | + <li><img class="selection-panel-option" | ||
| 173 | + src="{{ server }}/img/{{ fingers_position_dir }}/0048.png" value="48"/> 9.</li> | ||
| 174 | + <li><img class="selection-panel-option" | ||
| 175 | + src="{{ server }}/img/{{ fingers_position_dir }}/0049.png" value="49"/> 10.</li> | ||
| 176 | + <li><img class="selection-panel-option" | ||
| 177 | + src="{{ server }}/img/{{ fingers_position_dir }}/0050.png" value="50"/> 11.</li> | ||
| 178 | + </ul> | ||
| 179 | + </div> | ||
| 180 | + <div class="finger-group" group="4"> | ||
| 181 | + <ul class="rig columns-4"> | ||
| 182 | + <li><img class="selection-panel-option" | ||
| 183 | + src="{{ server }}/img/{{ fingers_position_dir }}/0038.png" value="38"/> 1.</li> | ||
| 184 | + <li><img class="selection-panel-option" | ||
| 185 | + src="{{ server }}/img/{{ fingers_position_dir }}/0040.png" value="40"/> 2.</li> | ||
| 186 | + <li><img class="selection-panel-option" | ||
| 187 | + src="{{ server }}/img/{{ fingers_position_dir }}/0041.png" value="41"/> 3.</li> | ||
| 188 | + <li><img class="selection-panel-option" | ||
| 189 | + src="{{ server }}/img/{{ fingers_position_dir }}/0042.png" value="42"/> 4.</li> | ||
| 190 | + </ul> | ||
| 191 | + </div> | ||
| 192 | + <div class="finger-group" group="5"> | ||
| 193 | + <ul class="rig columns-4"> | ||
| 194 | + <li><img class="selection-panel-option" | ||
| 195 | + src="{{ server }}/img/{{ fingers_position_dir }}/0025.png" value="25"/> 1.</li> | ||
| 196 | + <li><img class="selection-panel-option" | ||
| 197 | + src="{{ server }}/img/{{ fingers_position_dir }}/0026.png" value="26"/> 2.</li> | ||
| 198 | + <li><img class="selection-panel-option" | ||
| 199 | + src="{{ server }}/img/{{ fingers_position_dir }}/0027.png" value="27"/> 3.</li> | ||
| 200 | + <li><img class="selection-panel-option" | ||
| 201 | + src="{{ server }}/img/{{ fingers_position_dir }}/0028.png" value="28"/> 4.</li> | ||
| 202 | + <li><img class="selection-panel-option" | ||
| 203 | + src="{{ server }}/img/{{ fingers_position_dir }}/0053.png" value="53"/> 5.</li> | ||
| 204 | + <li><img class="selection-panel-option" | ||
| 205 | + src="{{ server }}/img/{{ fingers_position_dir }}/0054.png" value="54"/> 6.</li> | ||
| 206 | + <li><img class="selection-panel-option" | ||
| 207 | + src="{{ server }}/img/{{ fingers_position_dir }}/0055.png" value="55"/> 7.</li> | ||
| 208 | + <li><img class="selection-panel-option" | ||
| 209 | + src="{{ server }}/img/{{ fingers_position_dir }}/0056.png" value="56"/> 8.</li> | ||
| 210 | + <li><img class="selection-panel-option" | ||
| 211 | + src="{{ server }}/img/{{ fingers_position_dir }}/0057.png" value="57"/> 9.</li> | ||
| 212 | + </ul> | ||
| 213 | + </div> | ||
| 214 | + </div> | ||
| 215 | + </div> | ||
| 216 | +</div> | ||
| 217 | +<div id="{{ name }}-orientation" class="selection-panel-body" name="orientacao"> | ||
| 218 | + <div class="panel-header"> | ||
| 219 | + <h8>Palma da mão</h8> | ||
| 220 | + </div> | ||
| 221 | + <div class="selection-panel-inner-body"> | ||
| 222 | + <ul class="rig columns-3"> | ||
| 223 | + <li><img class="selection-panel-option" | ||
| 224 | + src="{{ server }}/img/{{ orientation_dir }}/01.png" value="68"/>1.</li> | ||
| 225 | + <li><img class="selection-panel-option" | ||
| 226 | + src="{{ server }}/img/{{ orientation_dir }}/02.png" value="66"/>2.</li> | ||
| 227 | + <li><img class="selection-panel-option" | ||
| 228 | + src="{{ server }}/img/{{ orientation_dir }}/03.png" value="64"/>3.</li> | ||
| 229 | + <li><img class="selection-panel-option" | ||
| 230 | + src="{{ server }}/img/{{ orientation_dir }}/04.png" value="2"/>4.</li> | ||
| 231 | + <li><img class="selection-panel-option" | ||
| 232 | + src="{{ server }}/img/{{ orientation_dir }}/05.png" value="9"/>5.</li> | ||
| 233 | + <li><img class="selection-panel-option" | ||
| 234 | + src="{{ server }}/img/{{ orientation_dir }}/06.png" value="16"/>6.</li> | ||
| 235 | + <li><img class="selection-panel-option" | ||
| 236 | + src="{{ server }}/img/{{ orientation_dir }}/07.png" value="92"/>7.</li> | ||
| 237 | + <li><img class="selection-panel-option" | ||
| 238 | + src="{{ server }}/img/{{ orientation_dir }}/08.png" value="90"/>8.</li> | ||
| 239 | + <li><img class="selection-panel-option" | ||
| 240 | + src="{{ server }}/img/{{ orientation_dir }}/09.png" value="88"/>9.</li> | ||
| 241 | + <li><img class="selection-panel-option" | ||
| 242 | + src="{{ server }}/img/{{ orientation_dir }}/10.png" value="4"/>10.</li> | ||
| 243 | + <li><img class="selection-panel-option" | ||
| 244 | + src="{{ server }}/img/{{ orientation_dir }}/11.png" value="11"/>11.</li> | ||
| 245 | + <li><img class="selection-panel-option" | ||
| 246 | + src="{{ server }}/img/{{ orientation_dir }}/12.png" value="18"/>12.</li> | ||
| 247 | + </ul> | ||
| 248 | + </div> | ||
| 249 | +</div> | ||
| 250 | +{%- endmacro %} | ||
| 251 | + | ||
| 252 | +{%- macro subconfigPanel(name) -%} | ||
| 253 | +<div id="{{ name }}-subconfiguration-options" | ||
| 254 | + class="subconfiguration-options col-sm-10"> | ||
| 255 | + <div class="icon_container" name="hand-moviment" | ||
| 256 | + panel="{{ name }}-moviment" previous="{{ name }}-moviment" | ||
| 257 | + next="{{ name }}-fingers-position"> | ||
| 258 | + <img src="{{ server }}/img/hand-moviment-icon.png" /> | ||
| 259 | + </div> | ||
| 260 | + <div class="icon_container" name="hand-fingers-position" | ||
| 261 | + panel="{{ name }}-fingers-position" previous="{{ name }}-moviment" | ||
| 262 | + next="{{ name }}-orientation"> | ||
| 263 | + <img src="{{ server }}/img/hand-fingers-position-icon.png" /> | ||
| 264 | + </div> | ||
| 265 | + <div class="icon_container" name="hand-orientation" | ||
| 266 | + panel="{{ name }}-orientation" previous="{{ name }}-fingers-position" | ||
| 267 | + next="end"> | ||
| 268 | + <img src="{{ server }}/img/hand-orientation-icon.png" /> | ||
| 269 | + </div> | ||
| 270 | +</div> | ||
| 271 | +{%- endmacro %} |
30.4 KB
36.9 KB
30.5 KB
17.3 KB
21.1 KB
17 KB
216 KB
17.6 KB
21.6 KB
17.3 KB
135 KB
1.87 KB
1.86 KB
489 KB
489 KB
489 KB
489 KB
489 KB
489 KB
489 KB
489 KB
489 KB
489 KB
489 KB
489 KB
489 KB
489 KB
489 KB
489 KB
489 KB
489 KB
489 KB
489 KB
489 KB
489 KB
489 KB
489 KB
489 KB
489 KB
489 KB
489 KB
489 KB
489 KB
489 KB
489 KB
489 KB
489 KB
489 KB
489 KB
489 KB
489 KB
489 KB
489 KB
489 KB
489 KB
489 KB
489 KB
489 KB
489 KB
489 KB
489 KB
489 KB
489 KB
489 KB
489 KB
489 KB
489 KB
489 KB
489 KB
489 KB
489 KB
489 KB
489 KB
489 KB
view/img/hand-configuration-icon-check.png
5.48 KB
view/img/hand-configuration-icon-hover.png
1.81 KB
view/img/hand-configuration-icon.png
1.68 KB
2.85 KB
682 Bytes
680 Bytes
view/img/hand-moviment-icon-check.png
view/img/hand-moviment-icon-hover.png
view/img/hand-moviment-icon.png
2.99 KB
964 Bytes
961 Bytes
3.75 KB
78 KB
469 KB
567 KB
91.7 KB
59.8 KB
106 KB
107 KB