Download as
Browse Code »

Commit cf352982103f231fa19157eadd90a0f1e7d06f29

Authored by Cassio Cabral
2 parents fac3f706 d6679032
Exists in master and in 1 other branch dynamic

add gitignore

Showing 123 changed files with 1214 additions and 422 deletions   Show diff stats

Too many changes.
Reload with full diff Plain diff Email patch

To preserve performance only 100 of 123 files displayed.

settings_local.py.tmpl
  Diff comments   View file @cf35298
1 1 # -*- coding: utf-8 -*-
2   -# Corretor Server Configuration
  2 +# WikiLibras Server Configuration
3 3 SERVER_HOST = "localhost"
4 4 SERVER_PORT = 8003
5 5 AGREEMENT_NUMBER = 2
  6 +API_HOST = "http://localhost:5001"
6 7  
7 8 # PyBossa Configuration
8 9 PYBOSSA_APP_NAME = "WikiLibras"
... ...
view/assets/css/main.css
  Diff comments   View file @cf35298
... ... @@ -17,8 +17,9 @@ body {
17 17 }
18 18  
19 19 .col-centered {
  20 + display: block;
20 21 float: none;
21   - margin: 0 auto;
  22 + margin: 0px auto;
22 23 }
23 24  
24 25 .btn-default {
... ... @@ -51,19 +52,19 @@ body {
51 52 }
52 53  
53 54 #initial-screen {
54   - display: block;
  55 + display: none;
55 56 }
56 57  
57 58 #configuration-screen {
58 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 70 .video-body-main {
... ... @@ -71,6 +72,14 @@ body {
71 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 83 #maximize-icon-container {
75 84 display: none;
76 85 }
... ... @@ -93,6 +102,32 @@ body {
93 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 131 #facial-edit {
97 132 top: 110px;
98 133 left: 410px;
... ... @@ -129,11 +164,13 @@ body {
129 164 }
130 165  
131 166 .avatar-img {
  167 + height: 100%;
132 168 -webkit-transition: width 1.5s ease-in-out, height 1.5s ease-in-out;
133 169 -moz-transition: width 1.5s ease-in-out, height 1.5s ease-in-out;
134 170 -o-transition: width 1.5s ease-in-out, height 1.5s ease-in-out;
135 171 -ms-transition: width 1.5s ease-in-out, height 1.5s ease-in-out;
136 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 176 .avatar-img-zoom-in {
... ... @@ -147,7 +184,7 @@ body {
147 184 position: relative;
148 185 height: 100%;
149 186 left: 0px;
150   - margin: 0 auto;
  187 + margin-left: 103px;
151 188 }
152 189  
153 190 .avatar-facial-img-zoom-in {
... ... @@ -158,7 +195,13 @@ body {
158 195  
159 196 .avatar-right-hand-img-zoom-in {
160 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 205 left: -27px;
163 206 }
164 207  
... ... @@ -272,6 +315,14 @@ ul.rig.columns-4 li {
272 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 326 .selection-panel-option {
276 327 max-width: 100%;
277 328 border-radius: 5px;
... ... @@ -283,7 +334,7 @@ ul.rig.columns-4 li {
283 334 cursor: pointer;
284 335 }
285 336  
286   -.selection-panel-option-hover {
  337 +.selection-panel-option:hover, .selection-panel-option[select=true] {
287 338 border-color: #9678b0;
288 339 }
289 340  
... ... @@ -300,15 +351,15 @@ ul.rig.columns-4 li {
300 351 display: none;
301 352 }
302 353  
303   -.expression-velocity-option .selection-panel-option {
  354 +.single-column-option-container .selection-panel-option {
304 355 height: 100px;
305 356 }
306 357  
307   -.expression-velocity-option {
  358 +.single-column-option-container {
308 359 padding-bottom: 20px;
309 360 }
310 361  
311   -.velocity-option {
  362 +.single-column-option {
312 363 display: inline-block;
313 364 padding-right: 25px;
314 365 }
... ... @@ -344,4 +395,55 @@ ul.rig.columns-4 li {
344 395 /* Hand Configuration */
345 396 #moviment-type {
346 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 450 \ No newline at end of file
... ...
view/assets/js/js.cookie.js 0 → 100644
  Diff comments   View file @cf35298
... ... @@ -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
  Diff comments   View file @cf35298
... ... @@ -2,7 +2,30 @@
2 2  
3 3 var videos_url = "";
4 4 var base_url = "";
  5 + var api_url = "";
5 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 30 function _loadTaskInfo(task) {
8 31 current_task_id = task.id;
... ... @@ -10,6 +33,8 @@
10 33 var ref_vid_link = videos_url + sign_name + "_REF.webm";
11 34 $(".sign-label").text(sign_name);
12 35 $(".ref-video").attr("src", ref_vid_link);
  36 +
  37 + _setupParameterJSON(task.info.sign_name);
13 38 }
14 39  
15 40 function _changeImage(img, url) {
... ... @@ -27,64 +52,82 @@
27 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 58 _enableIconHover(icon_id, isSelect);
33 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 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 82 function _isSelectingState() {
48 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 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 102 return _isSelectingState() ? $(
62 103 "#configuration-panel .icon_container[select=true]").attr(
63 104 "name") : "";
64 105 }
65 106  
66 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 133 function _addZoomOutToAvatar(option, callback) {
... ... @@ -114,13 +157,11 @@
114 157 function _clearPreviousSelection() {
115 158 $(".selection-panel-body").hide();
116 159 $(".subconfiguration-options").hide();
117   - $(".subconfiguration-panel .icon_container[select=true]").attr(
118   - "select", false);
119 160 if (_isSelectingState()) {
120   - var current_option = _getCurrentSelection();
  161 + var current_option = _getCurrentMainConfiguration();
121 162 _selectIcon(current_option, false);
122 163 if (_isConfigurationComplete(current_option)) {
123   - _setupCheckIcon(current_option);
  164 + _setupCheckIcon(current_option, true);
124 165 }
125 166 $("#avatar-" + current_option).fadeOut(500);
126 167 }
... ... @@ -131,51 +172,180 @@
131 172 _selectIcon(option, true);
132 173 if (option == "facial") {
133 174 _setupFacialSelectionPanel();
134   - } else if (option == "right-hand") {
135   - _setupHandSelectionPanel(option);
136 175 } else {
137   - return;
  176 + _setupHandSelectionPanel(option);
138 177 }
139 178 _setupGUIOnSelection(option);
140 179 }
141 180  
142 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 191 $("#ready-button").fadeIn(300);
150 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 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 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 347 } else {
177   - _selectIcon(next, true);
178   - $("#" + next).show();
  348 + _hideSelectionPanel();
179 349 }
180 350 }
181 351  
... ... @@ -187,16 +357,41 @@
187 357 });
188 358 }
189 359  
  360 + // TODO REFACT
190 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 372 $("#facial-subconfiguration-options").fadeIn(300);
194 373 }
195 374  
  375 + // TODO REFACT
196 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 397 function _setupConfigurationPanel() {
... ... @@ -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 486 function _setupSelectionPanel() {
229 487 $("#selection-panel .x").off("click").on("click", function() {
230 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 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 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 569 function _setupGUI(task, deferred) {
  570 + _clearGUI();
  571 + _setupConfigurationPanel();
  572 + _setupSelectionPanel();
  573 +
  574 + $("#initial-screen").fadeIn(300);
269 575 $("#start-button").off("click").on("click", function() {
270 576 $("#initial-screen").hide();
271 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 617 pybossa.presentTask(function(task, deferred) {
... ... @@ -279,8 +619,10 @@
279 619 _loadTaskInfo(task);
280 620 _setupGUI(task, deferred)
281 621 $("#main-container").fadeIn(500);
  622 + console.log(base_parameter_json);
  623 + console.log(moviment_parameter_json);
282 624 } else {
283   - $("#main-container").hide();
  625 + _showCompletedAllTaskMsg();
284 626 }
285 627 });
286 628  
... ... @@ -290,9 +632,10 @@
290 632 }
291 633  
292 634 // Public methods
293   - wikilibras.run = function(serverhost, projectname) {
  635 + wikilibras.run = function(serverhost, projectname, apihost) {
294 636 base_url = serverhost;
295 637 videos_url = base_url + "/videos/";
  638 + api_url = apihost;
296 639 _run(projectname);
297 640 };
298 641  
... ...
view/facial-configuration.html 0 → 100644
  Diff comments   View file @cf35298
... ... @@ -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 %}
... ...
view/hand-configuration.html 0 → 100644
  Diff comments   View file @cf35298
... ... @@ -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 %}
... ...
view/img/avatar-facial-icon-check.png 0 → 100644
View file @cf35298

30.4 KB
view/img/avatar-facial-icon-hover.png 0 → 100644
View file @cf35298

36.9 KB
view/img/avatar-facial-icon.png 0 → 100644
View file @cf35298

30.5 KB
view/img/avatar-left-hand-icon-check.png 0 → 100644
View file @cf35298

17.3 KB
view/img/avatar-left-hand-icon-hover.png 0 → 100644
View file @cf35298

21.1 KB
view/img/avatar-left-hand-icon.png 0 → 100644
View file @cf35298

17 KB
view/img/avatar-left-hand.png 0 → 100644
View file @cf35298

216 KB
view/img/avatar-right-hand-icon-check.png 0 → 100644
View file @cf35298

17.6 KB
view/img/avatar-right-hand-icon-hover.png 0 → 100644
View file @cf35298

21.6 KB
view/img/avatar-right-hand-icon.png 0 → 100644
View file @cf35298

17.3 KB
view/img/avatar-thanks.png 0 → 100644
View file @cf35298

135 KB
view/img/big-edit-icon-hover.png 0 → 100644
View file @cf35298

1.87 KB
view/img/big-edit-icon.png 0 → 100644
View file @cf35298

1.86 KB
view/img/cme/0000.png 0 → 100644
View file @cf35298

489 KB
view/img/cme/0001.png 0 → 100644
View file @cf35298

489 KB
view/img/cme/0002.png 0 → 100644
View file @cf35298

489 KB
view/img/cme/0003.png 0 → 100644
View file @cf35298

489 KB
view/img/cme/0004.png 0 → 100644
View file @cf35298

489 KB
view/img/cme/0005.png 0 → 100644
View file @cf35298

489 KB
view/img/cme/0006.png 0 → 100644
View file @cf35298

489 KB
view/img/cme/0007.png 0 → 100644
View file @cf35298

489 KB
view/img/cme/0008.png 0 → 100644
View file @cf35298

489 KB
view/img/cme/0009.png 0 → 100644
View file @cf35298

489 KB
view/img/cme/0010.png 0 → 100644
View file @cf35298

489 KB
view/img/cme/0011.png 0 → 100644
View file @cf35298

489 KB
view/img/cme/0012.png 0 → 100644
View file @cf35298

489 KB
view/img/cme/0013.png 0 → 100644
View file @cf35298

489 KB
view/img/cme/0014.png 0 → 100644
View file @cf35298

489 KB
view/img/cme/0015.png 0 → 100644
View file @cf35298

489 KB
view/img/cme/0016.png 0 → 100644
View file @cf35298

489 KB
view/img/cme/0017.png 0 → 100644
View file @cf35298

489 KB
view/img/cme/0018.png 0 → 100644
View file @cf35298

489 KB
view/img/cme/0019.png 0 → 100644
View file @cf35298

489 KB
view/img/cme/0020.png 0 → 100644
View file @cf35298

489 KB
view/img/cme/0021.png 0 → 100644
View file @cf35298

489 KB
view/img/cme/0022.png 0 → 100644
View file @cf35298

489 KB
view/img/cme/0023.png 0 → 100644
View file @cf35298

489 KB
view/img/cme/0024.png 0 → 100644
View file @cf35298

489 KB
view/img/cme/0025.png 0 → 100644
View file @cf35298

489 KB
view/img/cme/0026.png 0 → 100644
View file @cf35298

489 KB
view/img/cme/0027.png 0 → 100644
View file @cf35298

489 KB
view/img/cme/0028.png 0 → 100644
View file @cf35298

489 KB
view/img/cme/0029.png 0 → 100644
View file @cf35298

489 KB
view/img/cme/0030.png 0 → 100644
View file @cf35298

489 KB
view/img/cme/0031.png 0 → 100644
View file @cf35298

489 KB
view/img/cme/0032.png 0 → 100644
View file @cf35298

489 KB
view/img/cme/0033.png 0 → 100644
View file @cf35298

489 KB
view/img/cme/0034.png 0 → 100644
View file @cf35298

489 KB
view/img/cme/0035.png 0 → 100644
View file @cf35298

489 KB
view/img/cme/0036.png 0 → 100644
View file @cf35298

489 KB
view/img/cme/0037.png 0 → 100644
View file @cf35298

489 KB
view/img/cme/0038.png 0 → 100644
View file @cf35298

489 KB
view/img/cme/0039.png 0 → 100644
View file @cf35298

489 KB
view/img/cme/0040.png 0 → 100644
View file @cf35298

489 KB
view/img/cme/0041.png 0 → 100644
View file @cf35298

489 KB
view/img/cme/0042.png 0 → 100644
View file @cf35298

489 KB
view/img/cme/0043.png 0 → 100644
View file @cf35298

489 KB
view/img/cme/0044.png 0 → 100644
View file @cf35298

489 KB
view/img/cme/0045.png 0 → 100644
View file @cf35298

489 KB
view/img/cme/0046.png 0 → 100644
View file @cf35298

489 KB
view/img/cme/0047.png 0 → 100644
View file @cf35298

489 KB
view/img/cme/0048.png 0 → 100644
View file @cf35298

489 KB
view/img/cme/0049.png 0 → 100644
View file @cf35298

489 KB
view/img/cme/0050.png 0 → 100644
View file @cf35298

489 KB
view/img/cme/0051.png 0 → 100644
View file @cf35298

489 KB
view/img/cme/0052.png 0 → 100644
View file @cf35298

489 KB
view/img/cme/0053.png 0 → 100644
View file @cf35298

489 KB
view/img/cme/0054.png 0 → 100644
View file @cf35298

489 KB
view/img/cme/0055.png 0 → 100644
View file @cf35298

489 KB
view/img/cme/0056.png 0 → 100644
View file @cf35298

489 KB
view/img/cme/0057.png 0 → 100644
View file @cf35298

489 KB
view/img/cme/0058.png 0 → 100644
View file @cf35298

489 KB
view/img/cme/0059.png 0 → 100644
View file @cf35298

489 KB
view/img/cme/0060.png 0 → 100644
View file @cf35298

489 KB
view/img/hand-configuration-icon-check.png
View file @fac3f70

5.48 KB
view/img/hand-configuration-icon-hover.png
View file @fac3f70

1.81 KB
view/img/hand-configuration-icon.png
View file @fac3f70

1.68 KB
view/img/hand-fingers-position-icon-check.png 0 → 100644
View file @cf35298

2.85 KB
view/img/hand-fingers-position-icon-hover.png 0 → 100644
View file @cf35298

682 Bytes
view/img/hand-fingers-position-icon.png 0 → 100644
View file @cf35298

680 Bytes
view/img/hand-moviment-icon-check.png
View file @cf35298

3.8 KB | W: | H:

3.64 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
view/img/hand-moviment-icon-hover.png
View file @cf35298

992 Bytes | W: | H:

1.24 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
view/img/hand-moviment-icon.png
View file @cf35298

1.02 KB | W: | H:

1.24 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
view/img/hand-orientation-icon-check.png 0 → 100644
View file @cf35298

2.99 KB
view/img/hand-orientation-icon-hover.png 0 → 100644
View file @cf35298

964 Bytes
view/img/hand-orientation-icon.png 0 → 100644
View file @cf35298

961 Bytes
view/img/left-hand-icon-check.png 0 → 100644
View file @cf35298

3.75 KB
view/img/loading.gif 0 → 100644
View file @cf35298

78 KB
view/img/mov/CALAR.gif 0 → 100644
View file @cf35298

469 KB
view/img/mov/CALAR_old.gif 0 → 100644
View file @cf35298

567 KB
view/img/ord/01.png 0 → 100644
View file @cf35298

91.7 KB
view/img/ord/02.png 0 → 100644
View file @cf35298

59.8 KB
view/img/ord/03.png 0 → 100644
View file @cf35298

106 KB
view/img/ord/04.png 0 → 100644
View file @cf35298

107 KB