Commit bb7233b2edeb920035fb502f22df212de62c53fd

Authored by Adabriand Furtado
1 parent d6679032
Exists in master and in 1 other branch dynamic

Suporte para hospedar a aplicação no Apache e integração da tela de ponto de articulação.

contrib/apache/wikilibras.conf.tmpl 0 → 100644
... ... @@ -0,0 +1,19 @@
  1 +<VirtualHost *:80>
  2 + ServerName localhost
  3 +
  4 + WSGIDaemonProcess wikilibras user=user1 group=group1 threads=5
  5 + WSGIScriptAlias / <path-to-project>/contrib/wikilibras.wsgi
  6 + Alias /view <path-to-project>/view
  7 +
  8 + <Directory <path-to-project>>
  9 + WSGIProcessGroup wikilibras
  10 + WSGIApplicationGroup %{GLOBAL}
  11 + Order deny,allow
  12 + Allow from all
  13 + </Directory>
  14 +
  15 + ServerAdmin webmaster@localhost
  16 +
  17 + ErrorLog ${APACHE_LOG_DIR}/error.log
  18 + CustomLog ${APACHE_LOG_DIR}/access.log combined
  19 +</VirtualHost>
... ...
contrib/wikilibras.wsgi.tmpl 0 → 100644
... ... @@ -0,0 +1,11 @@
  1 +# Check the official documentation http://flask.pocoo.org/docs/deploying/mod_wsgi/
  2 +# Activate the virtual env (we assume that virtualenv is in the env folder)
  3 +activate_this = '<path-to-project>/env/bin/activate_this.py'
  4 +execfile(activate_this, dict(__file__=activate_this))
  5 +import logging, sys
  6 +sys.stdout = sys.stderr
  7 +logging.basicConfig(stream=sys.stderr)
  8 +sys.path.insert(0,'<path-to-project>')
  9 +
  10 +# Run the web-app
  11 +from main import app as application
... ...
main.py
... ... @@ -10,12 +10,6 @@ app = Flask(__name__)
10 10 CORS(app)
11 11 controller = None
12 12  
13   -@app.route("/<path:path>")
14   -def send_static_files(path):
15   - root_dir = os.path.abspath(os.path.dirname(__file__))
16   - file_dir = os.path.join(root_dir, "view")
17   - return send_from_directory(file_dir, path)
18   -
19 13 @app.route("/update_project")
20 14 def update_project():
21 15 try:
... ... @@ -39,13 +33,19 @@ def finish_task():
39 33 except:
40 34 pyutil.print_stack_trace()
41 35 raise
42   -
  36 +
43 37 def read_settings(app):
44 38 here = os.path.abspath(__file__)
45 39 config_path = os.path.join(os.path.dirname(here), 'settings_local.py')
46 40 if os.path.exists(config_path):
47 41 app.config.from_pyfile(config_path)
48   - app.config['HOST_ENDPOINT'] = "http://" + app.config['SERVER_HOST'] + ":" + str(app.config['SERVER_PORT'])
  42 +
  43 + if app.config['APACHE_HOST']:
  44 + app.config['HOST_ENDPOINT'] = "http://" + app.config['SERVER_HOST'] + app.config['APACHE_HOST_ENDPOINT']
  45 + app.config['HOST_STATIC_FILES_ENDPOINT'] = "http://" + app.config['SERVER_HOST'] + app.config['APACHE_STATIC_FILES_ENDPOINT']
  46 + else:
  47 + app.config['HOST_ENDPOINT'] = "http://" + app.config['SERVER_HOST'] + ":" + str(app.config['SERVER_PORT'])
  48 + app.config['HOST_STATIC_FILES_ENDPOINT'] = app.config['HOST_ENDPOINT']
49 49  
50 50 def setup_controller():
51 51 global controller
... ... @@ -53,10 +53,20 @@ def setup_controller():
53 53 env = Environment(loader=PackageLoader('main', 'view'))
54 54 controller = Wikilibras(app.config, env)
55 55  
  56 +def setup_static_files_service(app):
  57 + if not app.config['APACHE_HOST']:
  58 + @app.route("/<path:path>")
  59 + def send_static_files(path):
  60 + root_dir = os.path.abspath(os.path.dirname(__file__))
  61 + file_dir = os.path.join(root_dir, "view")
  62 + return send_from_directory(file_dir, path)
  63 +
56 64 def run():
57   - setup_controller()
58 65 app.run(host=app.config['SERVER_HOST'], port=app.config['SERVER_PORT'])
59 66  
  67 +setup_controller()
  68 +setup_static_files_service(app)
  69 +
60 70 if __name__ == '__main__':
61 71 try:
62 72 run()
... ...
settings_local.py.tmpl
... ... @@ -5,6 +5,11 @@ SERVER_PORT = 8003
5 5 AGREEMENT_NUMBER = 2
6 6 API_HOST = "http://localhost:5001"
7 7  
  8 +# Apache Configuration
  9 +APACHE_HOST = False
  10 +APACHE_HOST_ENDPOINT = "/wikilibras-backend"
  11 +APACHE_STATIC_FILES_ENDPOINT = "/wikilibras"
  12 +
8 13 # PyBossa Configuration
9 14 PYBOSSA_APP_NAME = "WikiLibras"
10 15 PYBOSSA_APP_SHORT_NAME = "wikilibras"
... ...
view/assets/css/articulation.css 0 → 100644
... ... @@ -0,0 +1,98 @@
  1 +.gray-background {
  2 + background-repeat: no-repeat;
  3 + background-position: center 15px, 0 0;
  4 + background-size: 67% 95%, 100% 100%;
  5 + min-width: 285px;
  6 + min-height: 361px
  7 +}
  8 +
  9 +.gray-front-avatar {
  10 + background-image: url(../../img/pa/gray-front-avatar.png), url(../../img/pa/default-base.png);
  11 +}
  12 +
  13 +.gray-side-avatar {
  14 + background-image: url(../../img/pa/gray-side-avatar.png), url(../../img/pa/default-base.png);
  15 +}
  16 +
  17 +.module-x-y {
  18 + display: none
  19 +}
  20 +
  21 +.module-x-y.active {
  22 + display: block
  23 +}
  24 +
  25 +.grid {
  26 + position: relative
  27 +}
  28 +
  29 +.grid .grid-selectors {
  30 + width: 315px;
  31 + height: 361px;
  32 + margin: 5%;
  33 + z-index: 10
  34 +}
  35 +
  36 +.grid .grid-selectors .grid-row {
  37 + height: 20%;
  38 + padding-top: 10%;
  39 + text-align: justify;
  40 + z-index: 20
  41 +}
  42 +
  43 +.grid .grid-selectors .grid-row .ball-selector {
  44 + background-color: #A0D0E8;
  45 + border-radius: 50%;
  46 + z-index: 100;
  47 + width: 13px;
  48 + height: 13px;
  49 + display: inline-block;
  50 + margin-right: 6%;
  51 + margin-bottom: 13%;
  52 + float: left
  53 +}
  54 +
  55 +.grid .grid-selectors .grid-row .ball-selector:nth-last-of-type(1) {
  56 + margin-right: 0
  57 +}
  58 +
  59 +.grid .grid-selectors .grid-row .ball-selector .point-a-selector {
  60 + margin-left: -.5px;
  61 + margin-top: -7.5px
  62 +}
  63 +
  64 +.grid .avatar-base {
  65 + position: absolute;
  66 + width: 100%;
  67 + height: 100%;
  68 + z-index: 0;
  69 + top: 0;
  70 + left: 0
  71 +}
  72 +
  73 +.grid .grid-selectors .grid-row .ball-selector.active,
  74 +.grid .grid-selectors .grid-row .ball-selector:hover {
  75 + box-shadow: 0 0 10px #fff
  76 +}
  77 +
  78 +.grid .grid-selectors .grid-row .ball-selector:hover {
  79 + cursor: pointer
  80 +}
  81 +
  82 +.actions .btn {
  83 + margin-top: 15px
  84 +}
  85 +
  86 +.module-z .grid-selectors .grid-row {
  87 + margin-right: 58%;
  88 + padding-top: 3%;
  89 +}
  90 +
  91 +.module-z .grid-selectors .grid-row .ball-selector {
  92 + float: right;
  93 + margin-right: 15%
  94 +}
  95 +
  96 +.module-z .grid-selectors .grid-row .ball-selector:nth-last-of-type(1) {
  97 + margin-right: 15%
  98 +}
0 99 \ No newline at end of file
... ...
view/assets/css/main.css 100755 → 100644
  1 +@import url("articulation.css");
  2 +
1 3 /* Main */
2 4 @font-face {
3 5 font-family: 'Titillium Web';
... ... @@ -323,7 +325,7 @@ ul.rig.columns-4 li {
323 325 width: 60%;
324 326 }
325 327  
326   -.selection-panel-option {
  328 +.box-panel-option {
327 329 max-width: 100%;
328 330 border-radius: 5px;
329 331 border: 3px solid rgb(128, 168, 210);
... ... @@ -334,7 +336,7 @@ ul.rig.columns-4 li {
334 336 cursor: pointer;
335 337 }
336 338  
337   -.selection-panel-option:hover, .selection-panel-option[select=true] {
  339 +.box-panel-option:hover, .box-panel-option[select=true] {
338 340 border-color: #9678b0;
339 341 }
340 342  
... ... @@ -351,7 +353,7 @@ ul.rig.columns-4 li {
351 353 display: none;
352 354 }
353 355  
354   -.single-column-option-container .selection-panel-option {
  356 +.single-column-option-container .box-panel-option {
355 357 height: 100px;
356 358 }
357 359  
... ... @@ -369,11 +371,13 @@ ul.rig.columns-4 li {
369 371 display: none;
370 372 }
371 373  
372   -#hand-subconfiguration-options {
373   - display: none;
  374 +.subconfiguration-options {
  375 + overflow-x: hidden;
  376 + white-space: nowrap;
374 377 }
375 378  
376 379 .subconfiguration-panel {
  380 + display: none;
377 381 padding: 10px;
378 382 margin-top: 10px;
379 383 margin-bottom: 10px;
... ... @@ -392,6 +396,10 @@ ul.rig.columns-4 li {
392 396 padding-top: 5px;
393 397 }
394 398  
  399 +.arrow[name=right-arrow] {
  400 + padding-left: 10px;
  401 +}
  402 +
395 403 /* Hand Configuration */
396 404 #moviment-type {
397 405 display: none;
... ...
view/assets/fonts/Helvetica.otf 100755 → 100644
No preview for this file type
view/assets/fonts/TitilliumWeb-Black.ttf 100755 → 100644
No preview for this file type
view/assets/fonts/TitilliumWeb-Bold.ttf 100755 → 100644
No preview for this file type
view/assets/fonts/TitilliumWeb-BoldItalic.ttf 100755 → 100644
No preview for this file type
view/assets/fonts/TitilliumWeb-ExtraLight.ttf 100755 → 100644
No preview for this file type
view/assets/fonts/TitilliumWeb-ExtraLightItalic.ttf 100755 → 100644
No preview for this file type
view/assets/fonts/TitilliumWeb-Italic.ttf 100755 → 100644
No preview for this file type
view/assets/fonts/TitilliumWeb-Light.ttf 100755 → 100644
No preview for this file type
view/assets/fonts/TitilliumWeb-LightItalic.ttf 100755 → 100644
No preview for this file type
view/assets/fonts/TitilliumWeb-Regular.ttf 100755 → 100644
No preview for this file type
view/assets/fonts/TitilliumWeb-SemiBold.ttf 100755 → 100644
No preview for this file type
view/assets/fonts/TitilliumWeb-SemiBoldItalic.ttf 100755 → 100644
No preview for this file type
view/assets/js/articulation.js 0 → 100644
... ... @@ -0,0 +1,61 @@
  1 +(function(articulation, $, undefined) {
  2 +
  3 + function _updateASelector(container, ballSelector, serverhost) {
  4 + $(container + " .ball-selector.active").each(function() {
  5 + $(this).removeClass("active"), $(this).find(".point-a-selector").remove()
  6 + }), ballSelector.addClass("active"), ballSelector.append('<div class="point-a-selector"><img src="' + serverhost +
  7 + '/img/pa/A-Seletor.png" class="point-a-selector" alt=""></div>')
  8 + }
  9 +
  10 + function _setupModuleZ(hand, y) {
  11 + if (typeof y == "undefined") return;
  12 + var articulation_z = "#" + hand + "-articulation .module-z";
  13 + $(articulation_z + " .ball-selector").hide();
  14 + $(articulation_z + " .row-number-" + y + " .ball-selector").show();
  15 + }
  16 +
  17 + function _setupBallSelector(serverhost, hand) {
  18 + var articulation_x_y = "#" + hand + "-articulation .module-x-y";
  19 + $(articulation_x_y + " .ball-selector").on("click", function(a) {
  20 + var b = $(a.target),
  21 + c = b.parent(".grid-row"),
  22 + d = $(articulation_x_y),
  23 + f = b.attr("data-x"),
  24 + g = c.attr("data-y");
  25 + d.attr("data-x", f), d.attr("data-y", g), _updateASelector(articulation_x_y, b, serverhost)
  26 + _setupModuleZ(hand, g);
  27 + _updateParameterJSON(hand);
  28 + });
  29 + var articulation_z = "#" + hand + "-articulation .module-z";
  30 + $(articulation_z + " .ball-selector").on("click", function(a) {
  31 + var b = $(a.target),
  32 + c = b.parent(".grid-row"),
  33 + e = $(articulation_z),
  34 + h = b.attr("data-z");
  35 + b.attr("data-z") && e.attr("data-z", h), _updateASelector(articulation_z, b, serverhost);
  36 + _updateParameterJSON(hand);
  37 + });
  38 + }
  39 +
  40 + function _updateParameterJSON(hand) {
  41 + var value = _readValue(hand);
  42 + wikilibras.updateParameterJSON("articulacao", value);
  43 + }
  44 +
  45 + function _readValue(hand) {
  46 + var articulation_x_y = "#" + hand + "-articulation .module-x-y";
  47 + var articulation_z = "#" + hand + "-articulation .module-z";
  48 + var x = parseInt($(articulation_x_y).attr("data-x"));
  49 + var y = parseInt($(articulation_x_y).attr("data-y"));
  50 + var z = $(articulation_z).attr("data-z");
  51 + z = z == ""? 1 : parseInt(z);
  52 + var value = (z-1)*10 + x + 30*(y-1);
  53 + //console.log(value);
  54 + return value;
  55 + }
  56 +
  57 + articulation.setup = function(serverhost) {
  58 + _setupBallSelector(serverhost, "right-hand");
  59 + _setupBallSelector(serverhost, "left-hand");
  60 + };
  61 +}(window.articulation = window.articulation || {}, jQuery));
0 62 \ No newline at end of file
... ...
view/assets/js/wikilibras.js
... ... @@ -2,6 +2,7 @@
2 2  
3 3 var videos_url = "";
4 4 var base_url = "";
  5 + var server_backend_url = "";
5 6 var api_url = "";
6 7 var current_task_id = -1;
7 8 var base_parameter_json = {};
... ... @@ -19,7 +20,6 @@
19 20 base_parameter_json["sinal"] = sign_name;
20 21 base_parameter_json["interpolacao"] = "normal";
21 22 base_parameter_json["movimentos"] = [];
22   - // TODO remover propriedade articulação
23 23 moviment_parameter_json = {
24 24 "facial" : {},
25 25 "mao_direita" : {},
... ... @@ -157,6 +157,8 @@
157 157 function _clearPreviousSelection() {
158 158 $(".selection-panel-body").hide();
159 159 $(".subconfiguration-options").hide();
  160 + $(".subconfiguration-panel").hide();
  161 +
160 162 if (_isSelectingState()) {
161 163 var current_option = _getCurrentMainConfiguration();
162 164 _selectIcon(current_option, false);
... ... @@ -267,8 +269,18 @@
267 269 function _hasMultipleConfigurations(config) {
268 270 return $("#" + config).is("[multiple-config]");
269 271 }
  272 +
  273 + function _handleFingersPositionSubConfiguration(main_config) {
  274 + var finger_group = $(
  275 + "#"
  276 + + main_config
  277 + + "-fingers-position-1 .selection-panel-option[select=true]")
  278 + .attr("group");
  279 + $(".finger-group").hide();
  280 + $(".finger-group[group=" + finger_group + "]").show();
  281 + }
270 282  
271   - function _setupMultipleConfiguration(config) {
  283 + function _setupMultipleConfiguration(config, selectEvent) {
272 284 var sub_config_id = "#" + config + " [sub-config]";
273 285 var has_active_config = $(sub_config_id).is(":visible");
274 286  
... ... @@ -279,7 +291,7 @@
279 291 + "]";
280 292 var sub_config = "";
281 293  
282   - if (!has_active_config) {
  294 + if (!has_active_config || !selectEvent) {
283 295 sub_config = config + "-1";
284 296 if (!$(icon_id).is("[tmp-next]")) {
285 297 $(icon_id).attr("tmp-next", $(icon_id).attr("next"));
... ... @@ -295,15 +307,12 @@
295 307 $(icon_id).removeAttr("tmp-next");
296 308 $(icon_id).attr("next", tmp_next);
297 309 config = tmp_next;
  310 + if (_hasMultipleConfigurations(config)) {
  311 + config = _setupMultipleConfiguration(config, selectEvent);
  312 + }
298 313 } else {
299 314 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();
  315 + _handleFingersPositionSubConfiguration(main_config);
307 316 }
308 317 $("#" + sub_config).show();
309 318 }
... ... @@ -326,7 +335,7 @@
326 335 _setupCheckIcon(iconName, true, subconfig);
327 336 }
328 337  
329   - function _showSubConfiguration(next_config) {
  338 + function _showSubConfiguration(next_config, selectEvent) {
330 339 var current_config = _getCurrentSubConfiguration();
331 340 var next_has_multiple_config = _hasMultipleConfigurations(next_config);
332 341  
... ... @@ -335,7 +344,7 @@
335 344  
336 345 var onFinish = true;
337 346 if (next_has_multiple_config) {
338   - next_config = _setupMultipleConfiguration(next_config);
  347 + next_config = _setupMultipleConfiguration(next_config, selectEvent);
339 348 onFinish = next_config != current_config;
340 349 }
341 350  
... ... @@ -344,6 +353,11 @@
344 353 if (next_config != "end") {
345 354 _selectSubConfigurationIcon(next_config, true);
346 355 $("#" + next_config).show();
  356 +
  357 + var main_config = _getCurrentMainConfiguration();
  358 + if (_isHandMovimentComplete(main_config)) {
  359 + $(".subconfiguration-panel").fadeIn(300);
  360 + }
347 361 } else {
348 362 _hideSelectionPanel();
349 363 }
... ... @@ -357,7 +371,6 @@
357 371 });
358 372 }
359 373  
360   - // TODO REFACT
361 374 function _setupFacialSelectionPanel() {
362 375 var previous_select = $("#facial-subconfiguration-options .icon_container[select=true]").length > 0;
363 376 if (previous_select) {
... ... @@ -370,9 +383,14 @@
370 383 $("#facial-expression").fadeIn(300);
371 384 }
372 385 $("#facial-subconfiguration-options").fadeIn(300);
  386 + $(".subconfiguration-panel").fadeIn(300);
373 387 }
374 388  
375   - // TODO REFACT
  389 + function _isHandMovimentComplete(main_config) {
  390 + return $("#" + main_config
  391 + + "-subconfiguration-options .icon_container[complete=true][name=hand-moviment]").length > 0;
  392 + }
  393 +
376 394 function _setupHandSelectionPanel(option) {
377 395 var previous_select = $("#" + option
378 396 + "-subconfiguration-options .icon_container[select=true]").length > 0;
... ... @@ -391,7 +409,11 @@
391 409 _selectIcon("hand-moviment", true, option + "-moviment");
392 410 $("#" + option + "-moviment").fadeIn(300);
393 411 }
  412 +
394 413 $("#" + option + "-subconfiguration-options").fadeIn(300);
  414 + if (_isHandMovimentComplete(option)) {
  415 + $(".subconfiguration-panel").fadeIn(300);
  416 + }
395 417 }
396 418  
397 419 function _setupConfigurationPanel() {
... ... @@ -447,9 +469,7 @@
447 469 if (config == "movimento") {
448 470 var first_key = _getFirstKey(moviment_parameter_json[current_main_config]);
449 471 if (typeof first_key == "undefined") {
450   - moviment_parameter_json[current_main_config][value] = {
451   - "articulacao" : 71
452   - };
  472 + moviment_parameter_json[current_main_config][value] = {};
453 473 } else if (first_key != value) {
454 474 moviment_parameter_json[current_main_config][value] = moviment_parameter_json[current_main_config][first_key];
455 475 delete moviment_parameter_json[current_main_config][first_key];
... ... @@ -459,27 +479,29 @@
459 479 var first_key = _getFirstKey(moviment_parameter_json[current_main_config]);
460 480 if (typeof first_key == "undefined") {
461 481 first_key = "placeholder";
462   - moviment_parameter_json[current_main_config][first_key] = {
463   - "articulacao" : 71
464   - };
  482 + moviment_parameter_json[current_main_config][first_key] = {};
465 483 }
466 484 moviment_parameter_json[current_main_config][first_key][config] = value;
467 485 } else {
468 486 moviment_parameter_json[current_main_config][config] = value;
469 487 }
470 488 }
  489 +
  490 + function _readConfigValue(el, config_name) {
  491 + if (typeof config_name == "undefined" || config_name == "articulacao") return;
  492 +
  493 + return $(el).attr("value");
  494 + }
471 495  
472 496 function _selectConfig(el) {
473 497 var current_config_id = $(".selection-panel-body").has(el).attr("id");
474 498 var current_config_name = $(".selection-panel-body").has(el).attr(
475 499 "name");
476   - var config_value = $(el).attr("value");
477   - $("#" + current_config_id + " .selection-panel-option[select=true]")
478   - .removeClass("selection-panel-option-hover");
479 500 $("#" + current_config_id + " .selection-panel-option[select=true]")
480 501 .removeAttr("select");
481 502 $(el).attr("select", true);
482   -
  503 +
  504 + var config_value = _readConfigValue(el, current_config_name);
483 505 _updateParameterJSON(current_config_name, config_value);
484 506 }
485 507  
... ... @@ -491,20 +513,20 @@
491 513 "click", function() {
492 514 _selectConfig(this);
493 515 var next = _getNextSubConfiguration();
494   - _showSubConfiguration(next);
  516 + _showSubConfiguration(next, true);
495 517 });
496 518 $(".subconfiguration-options .icon_container").off("click").on("click",
497 519 function() {
498 520 var subconfig = $(this).attr("panel");
499   - _showSubConfiguration(subconfig);
  521 + _showSubConfiguration(subconfig, false);
500 522 });
501 523 $(".arrow[name=right-arrow]").off("click").on("click", function() {
502 524 var next = _getNextSubConfiguration();
503   - _showSubConfiguration(next);
  525 + _showSubConfiguration(next, false);
504 526 });
505 527 $(".arrow[name=left-arrow]").off("click").on("click", function() {
506 528 var previous = _getPreviousSubConfiguration();
507   - _showSubConfiguration(previous);
  529 + _showSubConfiguration(previous, false);
508 530 });
509 531 }
510 532  
... ... @@ -565,12 +587,8 @@
565 587 "panel"));
566 588 });
567 589 }
568   -
569   - function _setupGUI(task, deferred) {
570   - _clearGUI();
571   - _setupConfigurationPanel();
572   - _setupSelectionPanel();
573   -
  590 +
  591 + function _setupMainScreen(task, deferred) {
574 592 $("#initial-screen").fadeIn(300);
575 593 $("#start-button").off("click").on("click", function() {
576 594 $("#initial-screen").hide();
... ... @@ -590,6 +608,15 @@
590 608 });
591 609 }
592 610  
  611 + function _setupGUI(task, deferred) {
  612 + _clearGUI();
  613 + _setupConfigurationPanel();
  614 + _setupSelectionPanel();
  615 + _setupMainScreen(task, deferred);
  616 +
  617 + articulation.setup(base_url);
  618 + }
  619 +
593 620 function _saveAnswer(task, deferred) {
594 621 var answer = {}
595 622 answer["status"] = "FINISHED";
... ... @@ -619,8 +646,6 @@
619 646 _loadTaskInfo(task);
620 647 _setupGUI(task, deferred)
621 648 $("#main-container").fadeIn(500);
622   - console.log(base_parameter_json);
623   - console.log(moviment_parameter_json);
624 649 } else {
625 650 _showCompletedAllTaskMsg();
626 651 }
... ... @@ -632,11 +657,16 @@
632 657 }
633 658  
634 659 // Public methods
635   - wikilibras.run = function(serverhost, projectname, apihost) {
  660 + wikilibras.run = function(serverhost, serverbackend, projectname, apihost) {
636 661 base_url = serverhost;
  662 + server_back_url = serverbackend;
637 663 videos_url = base_url + "/videos/";
638 664 api_url = apihost;
639 665 _run(projectname);
640 666 };
  667 +
  668 + wikilibras.updateParameterJSON = function(config, value) {
  669 + _updateParameterJSON(config, value);
  670 + }
641 671  
642 672 }(window.wikilibras = window.wikilibras || {}, jQuery));
643 673 \ No newline at end of file
... ...
view/facial-configuration.html
... ... @@ -6,47 +6,47 @@
6 6 </div>
7 7 <div class="selection-panel-inner-body">
8 8 <ul class="rig columns-3">
9   - <li><img class="selection-panel-option"
  9 + <li><img class="box-panel-option selection-panel-option"
10 10 src="{{ server }}/img/exf/0000.png" value="0" /> 1.</li>
11   - <li><img class="selection-panel-option"
  11 + <li><img class="box-panel-option selection-panel-option"
12 12 src="{{ server }}/img/exf/0001.png" value="1" /> 2.</li>
13   - <li><img class="selection-panel-option"
  13 + <li><img class="box-panel-option selection-panel-option"
14 14 src="{{ server }}/img/exf/0002.png" value="2" /> 3.</li>
15   - <li><img class="selection-panel-option"
  15 + <li><img class="box-panel-option selection-panel-option"
16 16 src="{{ server }}/img/exf/0003.png" value="3" /> 4.</li>
17   - <li><img class="selection-panel-option"
  17 + <li><img class="box-panel-option selection-panel-option"
18 18 src="{{ server }}/img/exf/0004.png" value="4" /> 5.</li>
19   - <li><img class="selection-panel-option"
  19 + <li><img class="box-panel-option selection-panel-option"
20 20 src="{{ server }}/img/exf/0005.png" value="5" /> 6.</li>
21   - <li><img class="selection-panel-option"
  21 + <li><img class="box-panel-option selection-panel-option"
22 22 src="{{ server }}/img/exf/0006.png" value="6" /> 7.</li>
23   - <li><img class="selection-panel-option"
  23 + <li><img class="box-panel-option selection-panel-option"
24 24 src="{{ server }}/img/exf/0007.png" value="7" /> 8.</li>
25   - <li><img class="selection-panel-option"
  25 + <li><img class="box-panel-option selection-panel-option"
26 26 src="{{ server }}/img/exf/0008.png" value="8" /> 9.</li>
27   - <li><img class="selection-panel-option"
  27 + <li><img class="box-panel-option selection-panel-option"
28 28 src="{{ server }}/img/exf/0009.png" value="9" />10.</li>
29   - <li><img class="selection-panel-option"
  29 + <li><img class="box-panel-option selection-panel-option"
30 30 src="{{ server }}/img/exf/0010.png" value="10" />11.</li>
31   - <li><img class="selection-panel-option"
  31 + <li><img class="box-panel-option selection-panel-option"
32 32 src="{{ server }}/img/exf/0011.png" value="11" />12.</li>
33   - <li><img class="selection-panel-option"
  33 + <li><img class="box-panel-option selection-panel-option"
34 34 src="{{ server }}/img/exf/0012.png" value="12" />13.</li>
35   - <li><img class="selection-panel-option"
  35 + <li><img class="box-panel-option selection-panel-option"
36 36 src="{{ server }}/img/exf/0013.png" value="13" />14.</li>
37   - <li><img class="selection-panel-option"
  37 + <li><img class="box-panel-option selection-panel-option"
38 38 src="{{ server }}/img/exf/0014.png" value="14" />15.</li>
39   - <li><img class="selection-panel-option"
  39 + <li><img class="box-panel-option selection-panel-option"
40 40 src="{{ server }}/img/exf/0015.png" value="15" />16.</li>
41   - <li><img class="selection-panel-option"
  41 + <li><img class="box-panel-option selection-panel-option"
42 42 src="{{ server }}/img/exf/0016.png" value="16" />17.</li>
43   - <li><img class="selection-panel-option"
  43 + <li><img class="box-panel-option selection-panel-option"
44 44 src="{{ server }}/img/exf/0017.png" value="17" />18.</li>
45   - <li><img class="selection-panel-option"
  45 + <li><img class="box-panel-option selection-panel-option"
46 46 src="{{ server }}/img/exf/0018.png" value="18" />19.</li>
47   - <li><img class="selection-panel-option"
  47 + <li><img class="box-panel-option selection-panel-option"
48 48 src="{{ server }}/img/exf/0019.png" value="19" />20.</li>
49   - <li><img class="selection-panel-option"
  49 + <li><img class="box-panel-option selection-panel-option"
50 50 src="{{ server }}/img/exf/0020.png" value="20" />21.</li>
51 51 </ul>
52 52 </div>
... ... @@ -58,7 +58,7 @@
58 58 </div>
59 59 <div class="single-column-option-container">
60 60 <div class="single-column-option">
61   - <img class="selection-panel-option"
  61 + <img class="box-panel-option selection-panel-option"
62 62 src="{{ server }}/img/exf/0000.png" value="lento" />
63 63 </div>
64 64 <img class="single-column-option"
... ... @@ -66,7 +66,7 @@
66 66 </div>
67 67 <div class="single-column-option-container">
68 68 <div class="single-column-option">
69   - <img class="selection-panel-option"
  69 + <img class="box-panel-option selection-panel-option"
70 70 src="{{ server }}/img/exf/0000.png" value="normal" />
71 71 </div>
72 72 <img class="single-column-option"
... ... @@ -74,7 +74,7 @@
74 74 </div>
75 75 <div class="single-column-option-container">
76 76 <div class="single-column-option">
77   - <img class="selection-panel-option"
  77 + <img class="box-panel-option selection-panel-option"
78 78 src="{{ server }}/img/exf/0000.png" value="rapido" />
79 79 </div>
80 80 <img class="single-column-option"
... ... @@ -88,7 +88,7 @@
88 88 </div>
89 89 <div class="single-column-option-container">
90 90 <div class="single-column-option">
91   - <img class="selection-panel-option"
  91 + <img class="box-panel-option selection-panel-option"
92 92 src="{{ server }}/img/exf/0000.png" value="lento" />
93 93 </div>
94 94 <img class="single-column-option"
... ... @@ -96,7 +96,7 @@
96 96 </div>
97 97 <div class="single-column-option-container">
98 98 <div class="single-column-option">
99   - <img class="selection-panel-option"
  99 + <img class="box-panel-option selection-panel-option"
100 100 src="{{ server }}/img/exf/0000.png" value="normal" />
101 101 </div>
102 102 <img class="single-column-option"
... ... @@ -104,7 +104,7 @@
104 104 </div>
105 105 <div class="single-column-option-container">
106 106 <div class="single-column-option">
107   - <img class="selection-panel-option"
  107 + <img class="box-panel-option selection-panel-option"
108 108 src="{{ server }}/img/exf/0000.png" value="rapido" />
109 109 </div>
110 110 <img class="single-column-option"
... ... @@ -122,8 +122,7 @@
122 122 <div class="icon_container" name="facial-expression-velocity"
123 123 panel="facial-expression-velocity" previous="facial-expression"
124 124 next="facial-expression-duration">
125   - <img style="position: relative; top: -4px;"
126   - src="{{ server }}/img/facial-expression-velocity-icon.png" />
  125 + <img src="{{ server }}/img/facial-expression-velocity-icon.png" />
127 126 </div>
128 127 <div class="icon_container" name="facial-expression-duration"
129 128 panel="facial-expression-duration"
... ...
view/hand-configuration.html
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 %}
  1 +{% macro selectionPanel(name) -%} {% if name == 'right-hand' %} {% set
  2 +fingers_position_dir = "cmd" %} {% set orientation_dir = "ord" %} {%
  3 +else %} {% set fingers_position_dir = "cme" %} {% set orientation_dir =
  4 +"ore" %} {% endif %}
9 5  
10   -<div id="{{ name }}-moviment" class="selection-panel-body" name="movimento">
  6 +<div id="{{ name }}-moviment" class="selection-panel-body"
  7 + name="movimento">
11 8 <div class="panel-header">
12 9 <h8>Escolha o movimento mais parecido</h8>
13 10 </div>
14 11 <div class="selection-panel-inner-body">
15 12 <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"
  13 + <li><video src="{{ server }}/img/mov/PONTUAL.webm"
  14 + preload="metadata" value="pontual"
  15 + class="box-panel-option selection-panel-option" autoplay loop>
  16 + <source type="video/webm">
  17 + </video> Pontual</li>
  18 + <!--
  19 + <li><img class="box-panel-option selection-panel-option"
20 20 src="{{ server }}/img/exf/0000.png" value="retilineo"/>Retilíneo</li>
21   - <li><img class="selection-panel-option"
  21 + <li><img class="box-panel-option selection-panel-option"
22 22 src="{{ server }}/img/exf/0000.png" value="circular"/>Circular</li>
23   - <li><img class="selection-panel-option"
  23 + <li><img class="box-panel-option selection-panel-option"
24 24 src="{{ server }}/img/exf/0000.png" value="semicircular"/>Semi-Circular</li>
25   - <li><img class="selection-panel-option"
  25 + <li><img class="box-panel-option selection-panel-option"
26 26 src="{{ server }}/img/exf/0000.png" value="helicoidal"/>Espiral</li>
27   - <li><img class="selection-panel-option"
  27 + <li><img class="box-panel-option selection-panel-option"
28 28 src="{{ server }}/img/exf/0000.png" value="senoidal"/>Curvas</li>
29   - <li><img class="selection-panel-option"
  29 + <li><img class="box-panel-option selection-panel-option"
30 30 src="{{ server }}/img/exf/0000.png" value="contato"/>Contato</li>
31 31 -->
32 32 </ul>
33 33 </div>
34 34 </div>
  35 +
  36 +<div id="{{ name }}-articulation" multiple-config>
  37 + <div id="{{ name }}-articulation-1" class="selection-panel-body"
  38 + style="display: none;" next="{{ name }}-articulation-2" sub-config>
  39 + <div class="panel-header">
  40 + <h8>Onde é feito o sinal?</h8>
  41 + </div>
  42 + <div class="selection-panel-inner-body">
  43 + <div data-x="" data-y=""
  44 + class="module-x-y grid gray-background gray-front-avatar active">
  45 + <div class=grid-selectors>
  46 + <div class="grid-row row-number-1" data-y=1>
  47 + <div class="ball-selector selection-panel-option ball-1" data-x=1></div>
  48 + <div class="ball-selector selection-panel-option ball-2" data-x=2></div>
  49 + <div class="ball-selector selection-panel-option ball-3" data-x=3></div>
  50 + <div class="ball-selector selection-panel-option ball-4" data-x=4></div>
  51 + <div class="ball-selector selection-panel-option ball-5" data-x=5></div>
  52 + <div class="ball-selector selection-panel-option ball-6" data-x=6></div>
  53 + <div class="ball-selector selection-panel-option ball-7" data-x=7></div>
  54 + <div class="ball-selector selection-panel-option ball-8" data-x=8></div>
  55 + <div class="ball-selector selection-panel-option ball-9" data-x=9></div>
  56 + <div class="ball-selector selection-panel-option ball-10"
  57 + data-x=10></div>
  58 + </div>
  59 + <div class="grid-row row-number-2" data-y=2>
  60 + <div class="ball-selector selection-panel-option ball-1" data-x=1></div>
  61 + <div class="ball-selector selection-panel-option ball-2" data-x=2></div>
  62 + <div class="ball-selector selection-panel-option ball-3" data-x=3></div>
  63 + <div class="ball-selector selection-panel-option ball-4" data-x=4></div>
  64 + <div class="ball-selector selection-panel-option ball-5" data-x=5></div>
  65 + <div class="ball-selector selection-panel-option ball-6" data-x=6></div>
  66 + <div class="ball-selector selection-panel-option ball-7" data-x=7></div>
  67 + <div class="ball-selector selection-panel-option ball-8" data-x=8></div>
  68 + <div class="ball-selector selection-panel-option ball-9" data-x=9></div>
  69 + <div class="ball-selector selection-panel-option ball-10"
  70 + data-x=10></div>
  71 + </div>
  72 + <div class="grid-row row-number-3" data-y=3>
  73 + <div class="ball-selector selection-panel-option ball-1" data-x=1></div>
  74 + <div class="ball-selector selection-panel-option ball-2" data-x=2></div>
  75 + <div class="ball-selector selection-panel-option ball-3" data-x=3></div>
  76 + <div class="ball-selector selection-panel-option ball-4" data-x=4></div>
  77 + <div class="ball-selector selection-panel-option ball-5" data-x=5></div>
  78 + <div class="ball-selector selection-panel-option ball-6" data-x=6></div>
  79 + <div class="ball-selector selection-panel-option ball-7" data-x=7></div>
  80 + <div class="ball-selector selection-panel-option ball-8" data-x=8></div>
  81 + <div class="ball-selector selection-panel-option ball-9" data-x=9></div>
  82 + <div class="ball-selector selection-panel-option ball-10"
  83 + data-x=10></div>
  84 + </div>
  85 + <div class="grid-row row-number-4" data-y=4>
  86 + <div class="ball-selector selection-panel-option ball-1" data-x=1></div>
  87 + <div class="ball-selector selection-panel-option ball-2" data-x=2></div>
  88 + <div class="ball-selector selection-panel-option ball-3" data-x=3></div>
  89 + <div class="ball-selector selection-panel-option ball-4" data-x=4></div>
  90 + <div class="ball-selector selection-panel-option ball-5" data-x=5></div>
  91 + <div class="ball-selector selection-panel-option ball-6" data-x=6></div>
  92 + <div class="ball-selector selection-panel-option ball-7" data-x=7></div>
  93 + <div class="ball-selector selection-panel-option ball-8" data-x=8></div>
  94 + <div class="ball-selector selection-panel-option ball-9" data-x=9></div>
  95 + <div class="ball-selector selection-panel-option ball-10"
  96 + data-x=10></div>
  97 + </div>
  98 + <div class="grid-row row-number-5" data-y=5>
  99 + <div class="ball-selector selection-panel-option ball-1" data-x=1></div>
  100 + <div class="ball-selector selection-panel-option ball-2" data-x=2></div>
  101 + <div class="ball-selector selection-panel-option ball-3" data-x=3></div>
  102 + <div class="ball-selector selection-panel-option ball-4" data-x=4></div>
  103 + <div class="ball-selector selection-panel-option ball-5" data-x=5></div>
  104 + <div class="ball-selector selection-panel-option ball-6" data-x=6></div>
  105 + <div class="ball-selector selection-panel-option ball-7" data-x=7></div>
  106 + <div class="ball-selector selection-panel-option ball-8" data-x=8></div>
  107 + <div class="ball-selector selection-panel-option ball-9" data-x=9></div>
  108 + <div class="ball-selector selection-panel-option ball-10"
  109 + data-x=10></div>
  110 + </div>
  111 + </div>
  112 + </div>
  113 + </div>
  114 + </div>
  115 +
  116 + <div id="{{ name }}-articulation-2" class="selection-panel-body"
  117 + style="display: none;" next="end" sub-config name="articulacao">
  118 + <div class="panel-header">
  119 + <h8>Escolha a distância entre a mão e o corpo</h8>
  120 + </div>
  121 + <div class="selection-panel-inner-body">
  122 + <div data-z="" class="module-z grid gray-background gray-side-avatar">
  123 + <div class="grid-selectors pull-right">
  124 + <div class="grid-row row-number-1">
  125 + <div class="ball-selector selection-panel-option ball-number-1"
  126 + data-z=1></div>
  127 + <div class="ball-selector selection-panel-option ball-number-2"
  128 + data-z=2></div>
  129 + <div class="ball-selector selection-panel-option ball-number-3"
  130 + data-z=3></div>
  131 + </div>
  132 + <div class="grid-row row-number-2">
  133 + <div class="ball-selector selection-panel-option ball-1" data-z=1></div>
  134 + <div class="ball-selector selection-panel-option ball-2" data-z=2></div>
  135 + <div class="ball-selector selection-panel-option ball-3" data-z=3></div>
  136 + </div>
  137 + <div class="grid-row row-number-3">
  138 + <div class="ball-selector selection-panel-option ball-1" data-z=1></div>
  139 + <div class="ball-selector selection-panel-option ball-2" data-z=2></div>
  140 + <div class="ball-selector selection-panel-option ball-3" data-z=3></div>
  141 + </div>
  142 + <div class="grid-row row-number-4">
  143 + <div class="ball-selector selection-panel-option ball-1" data-z=1></div>
  144 + <div class="ball-selector selection-panel-option ball-2" data-z=2></div>
  145 + <div class="ball-selector selection-panel-option ball-3" data-z=3></div>
  146 + </div>
  147 + <div class="grid-row row-number-5">
  148 + <div class="ball-selector selection-panel-option ball-1" data-z=1></div>
  149 + </div>
  150 + </div>
  151 + </div>
  152 + </div>
  153 + </div>
  154 +</div>
  155 +
35 156 <div id="{{ name }}-fingers-position" multiple-config>
36 157 <div id="{{ name }}-fingers-position-1" class="selection-panel-body"
37 158 style="display: none;" next="{{ name }}-fingers-position-2" sub-config>
... ... @@ -40,22 +161,22 @@
40 161 </div>
41 162 <div class="selection-panel-inner-body">
42 163 <ul class="rig columns-3">
43   - <li><img class="selection-panel-option"
  164 + <li><img class="box-panel-option selection-panel-option"
44 165 src="{{ server }}/img/{{ fingers_position_dir }}/0007.png"
45 166 group="0" /> 0.</li>
46   - <li><img class="selection-panel-option"
  167 + <li><img class="box-panel-option selection-panel-option"
47 168 src="{{ server }}/img/{{ fingers_position_dir }}/0014.png"
48 169 group="1" /> 1.</li>
49   - <li><img class="selection-panel-option"
  170 + <li><img class="box-panel-option selection-panel-option"
50 171 src="{{ server }}/img/{{ fingers_position_dir }}/0045.png"
51 172 group="2" /> 2.</li>
52   - <li><img class="selection-panel-option"
  173 + <li><img class="box-panel-option selection-panel-option"
53 174 src="{{ server }}/img/{{ fingers_position_dir }}/0048.png"
54 175 group="3" /> 3.</li>
55   - <li><img class="selection-panel-option"
  176 + <li><img class="box-panel-option selection-panel-option"
56 177 src="{{ server }}/img/{{ fingers_position_dir }}/0040.png"
57 178 group="4" /> 4.</li>
58   - <li><img class="selection-panel-option"
  179 + <li><img class="box-panel-option selection-panel-option"
59 180 src="{{ server }}/img/{{ fingers_position_dir }}/0000.png"
60 181 group="5" /> 5.</li>
61 182 </ul>
... ... @@ -69,196 +190,261 @@
69 190 <div class="selection-panel-inner-body">
70 191 <div class="finger-group" group="0">
71 192 <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>
  193 + <li><img class="box-panel-option selection-panel-option"
  194 + src="{{ server }}/img/{{ fingers_position_dir }}/0001.png"
  195 + value="1" /> 1.</li>
  196 + <li><img class="box-panel-option selection-panel-option"
  197 + src="{{ server }}/img/{{ fingers_position_dir }}/0002.png"
  198 + value="2" /> 2.</li>
  199 + <li><img class="box-panel-option selection-panel-option"
  200 + src="{{ server }}/img/{{ fingers_position_dir }}/0007.png"
  201 + value="7" /> 3.</li>
  202 + <li><img class="box-panel-option selection-panel-option"
  203 + src="{{ server }}/img/{{ fingers_position_dir }}/0008.png"
  204 + value="8" /> 4.</li>
  205 + <li><img class="box-panel-option selection-panel-option"
  206 + src="{{ server }}/img/{{ fingers_position_dir }}/0009.png"
  207 + value="9" /> 5.</li>
  208 + <li><img class="box-panel-option selection-panel-option"
  209 + src="{{ server }}/img/{{ fingers_position_dir }}/0010.png"
  210 + value="10" /> 6.</li>
  211 + <li><img class="box-panel-option selection-panel-option"
  212 + src="{{ server }}/img/{{ fingers_position_dir }}/0011.png"
  213 + value="11" /> 7.</li>
  214 + <li><img class="box-panel-option selection-panel-option"
  215 + src="{{ server }}/img/{{ fingers_position_dir }}/0016.png"
  216 + value="16" /> 8.</li>
  217 + <li><img class="box-panel-option selection-panel-option"
  218 + src="{{ server }}/img/{{ fingers_position_dir }}/0017.png"
  219 + value="17" /> 9.</li>
  220 + <li><img class="box-panel-option selection-panel-option"
  221 + src="{{ server }}/img/{{ fingers_position_dir }}/0018.png"
  222 + value="18" /> 10.</li>
  223 + <li><img class="box-panel-option selection-panel-option"
  224 + src="{{ server }}/img/{{ fingers_position_dir }}/0019.png"
  225 + value="19" /> 11.</li>
  226 + <li><img class="box-panel-option selection-panel-option"
  227 + src="{{ server }}/img/{{ fingers_position_dir }}/0020.png"
  228 + value="20" /> 12.</li>
  229 + <li><img class="box-panel-option selection-panel-option"
  230 + src="{{ server }}/img/{{ fingers_position_dir }}/0021.png"
  231 + value="21" /> 13.</li>
  232 + <li><img class="box-panel-option selection-panel-option"
  233 + src="{{ server }}/img/{{ fingers_position_dir }}/0022.png"
  234 + value="22" /> 14.</li>
  235 + <li><img class="box-panel-option selection-panel-option"
  236 + src="{{ server }}/img/{{ fingers_position_dir }}/0023.png"
  237 + value="23" /> 15.</li>
  238 + <li><img class="box-panel-option selection-panel-option"
  239 + src="{{ server }}/img/{{ fingers_position_dir }}/0024.png"
  240 + value="24" /> 16.</li>
  241 + <li><img class="box-panel-option selection-panel-option"
  242 + src="{{ server }}/img/{{ fingers_position_dir }}/0058.png"
  243 + value="58" /> 17.</li>
  244 + <li><img class="box-panel-option selection-panel-option"
  245 + src="{{ server }}/img/{{ fingers_position_dir }}/0059.png"
  246 + value="59" /> 18.</li>
  247 + <li><img class="box-panel-option selection-panel-option"
  248 + src="{{ server }}/img/{{ fingers_position_dir }}/0060.png"
  249 + value="60" /> 19.</li>
110 250 </ul>
111 251 </div>
112 252 <div class="finger-group" group="1">
113 253 <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>
  254 + <li><img class="box-panel-option selection-panel-option"
  255 + src="{{ server }}/img/{{ fingers_position_dir }}/0003.png"
  256 + value="3" /> 1.</li>
  257 + <li><img class="box-panel-option selection-panel-option"
  258 + src="{{ server }}/img/{{ fingers_position_dir }}/0005.png"
  259 + value="5" /> 2.</li>
  260 + <li><img class="box-panel-option selection-panel-option"
  261 + src="{{ server }}/img/{{ fingers_position_dir }}/0006.png"
  262 + value="6" /> 3.</li>
  263 + <li><img class="box-panel-option selection-panel-option"
  264 + src="{{ server }}/img/{{ fingers_position_dir }}/0012.png"
  265 + value="12" /> 4.</li>
  266 + <li><img class="box-panel-option selection-panel-option"
  267 + src="{{ server }}/img/{{ fingers_position_dir }}/0013.png"
  268 + value="13" /> 5.</li>
  269 + <li><img class="box-panel-option selection-panel-option"
  270 + src="{{ server }}/img/{{ fingers_position_dir }}/0014.png"
  271 + value="14" /> 6.</li>
  272 + <li><img class="box-panel-option selection-panel-option"
  273 + src="{{ server }}/img/{{ fingers_position_dir }}/0030.png"
  274 + value="30" /> 7.</li>
  275 + <li><img class="box-panel-option selection-panel-option"
  276 + src="{{ server }}/img/{{ fingers_position_dir }}/0052.png"
  277 + value="52" /> 8.</li>
130 278 </ul>
131 279 </div>
132 280 <div class="finger-group" group="2">
133 281 <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>
  282 + <li><img class="box-panel-option selection-panel-option"
  283 + src="{{ server }}/img/{{ fingers_position_dir }}/0004.png"
  284 + value="4" /> 1.</li>
  285 + <li><img class="box-panel-option selection-panel-option"
  286 + src="{{ server }}/img/{{ fingers_position_dir }}/0015.png"
  287 + value="15" /> 2.</li>
  288 + <li><img class="box-panel-option selection-panel-option"
  289 + src="{{ server }}/img/{{ fingers_position_dir }}/0029.png"
  290 + value="29" /> 3.</li>
  291 + <li><img class="box-panel-option selection-panel-option"
  292 + src="{{ server }}/img/{{ fingers_position_dir }}/0031.png"
  293 + value="31" /> 4.</li>
  294 + <li><img class="box-panel-option selection-panel-option"
  295 + src="{{ server }}/img/{{ fingers_position_dir }}/0032.png"
  296 + value="32" /> 5.</li>
  297 + <li><img class="box-panel-option selection-panel-option"
  298 + src="{{ server }}/img/{{ fingers_position_dir }}/0035.png"
  299 + value="35" /> 6.</li>
  300 + <li><img class="box-panel-option selection-panel-option"
  301 + src="{{ server }}/img/{{ fingers_position_dir }}/0036.png"
  302 + value="36" /> 7.</li>
  303 + <li><img class="box-panel-option selection-panel-option"
  304 + src="{{ server }}/img/{{ fingers_position_dir }}/0045.png"
  305 + value="45" /> 8.</li>
  306 + <li><img class="box-panel-option selection-panel-option"
  307 + src="{{ server }}/img/{{ fingers_position_dir }}/0051.png"
  308 + value="51" /> 9.</li>
152 309 </ul>
153 310 </div>
154 311 <div class="finger-group" group="3">
155 312 <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>
  313 + <li><img class="box-panel-option selection-panel-option"
  314 + src="{{ server }}/img/{{ fingers_position_dir }}/0033.png"
  315 + value="33" /> 1.</li>
  316 + <li><img class="box-panel-option selection-panel-option"
  317 + src="{{ server }}/img/{{ fingers_position_dir }}/0034.png"
  318 + value="34" /> 2.</li>
  319 + <li><img class="box-panel-option selection-panel-option"
  320 + src="{{ server }}/img/{{ fingers_position_dir }}/0037.png"
  321 + value="37" /> 3.</li>
  322 + <li><img class="box-panel-option selection-panel-option"
  323 + src="{{ server }}/img/{{ fingers_position_dir }}/0039.png"
  324 + value="39" /> 4.</li>
  325 + <li><img class="box-panel-option selection-panel-option"
  326 + src="{{ server }}/img/{{ fingers_position_dir }}/0043.png"
  327 + value="43" /> 5.</li>
  328 + <li><img class="box-panel-option selection-panel-option"
  329 + src="{{ server }}/img/{{ fingers_position_dir }}/0044.png"
  330 + value="44" /> 6.</li>
  331 + <li><img class="box-panel-option selection-panel-option"
  332 + src="{{ server }}/img/{{ fingers_position_dir }}/0046.png"
  333 + value="46" /> 7.</li>
  334 + <li><img class="box-panel-option selection-panel-option"
  335 + src="{{ server }}/img/{{ fingers_position_dir }}/0047.png"
  336 + value="47" /> 8.</li>
  337 + <li><img class="box-panel-option selection-panel-option"
  338 + src="{{ server }}/img/{{ fingers_position_dir }}/0048.png"
  339 + value="48" /> 9.</li>
  340 + <li><img class="box-panel-option selection-panel-option"
  341 + src="{{ server }}/img/{{ fingers_position_dir }}/0049.png"
  342 + value="49" /> 10.</li>
  343 + <li><img class="box-panel-option selection-panel-option"
  344 + src="{{ server }}/img/{{ fingers_position_dir }}/0050.png"
  345 + value="50" /> 11.</li>
178 346 </ul>
179 347 </div>
180 348 <div class="finger-group" group="4">
181 349 <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>
  350 + <li><img class="box-panel-option selection-panel-option"
  351 + src="{{ server }}/img/{{ fingers_position_dir }}/0038.png"
  352 + value="38" /> 1.</li>
  353 + <li><img class="box-panel-option selection-panel-option"
  354 + src="{{ server }}/img/{{ fingers_position_dir }}/0040.png"
  355 + value="40" /> 2.</li>
  356 + <li><img class="box-panel-option selection-panel-option"
  357 + src="{{ server }}/img/{{ fingers_position_dir }}/0041.png"
  358 + value="41" /> 3.</li>
  359 + <li><img class="box-panel-option selection-panel-option"
  360 + src="{{ server }}/img/{{ fingers_position_dir }}/0042.png"
  361 + value="42" /> 4.</li>
190 362 </ul>
191 363 </div>
192 364 <div class="finger-group" group="5">
193 365 <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>
  366 + <li><img class="box-panel-option selection-panel-option"
  367 + src="{{ server }}/img/{{ fingers_position_dir }}/0025.png"
  368 + value="25" /> 1.</li>
  369 + <li><img class="box-panel-option selection-panel-option"
  370 + src="{{ server }}/img/{{ fingers_position_dir }}/0026.png"
  371 + value="26" /> 2.</li>
  372 + <li><img class="box-panel-option selection-panel-option"
  373 + src="{{ server }}/img/{{ fingers_position_dir }}/0027.png"
  374 + value="27" /> 3.</li>
  375 + <li><img class="box-panel-option selection-panel-option"
  376 + src="{{ server }}/img/{{ fingers_position_dir }}/0028.png"
  377 + value="28" /> 4.</li>
  378 + <li><img class="box-panel-option selection-panel-option"
  379 + src="{{ server }}/img/{{ fingers_position_dir }}/0053.png"
  380 + value="53" /> 5.</li>
  381 + <li><img class="box-panel-option selection-panel-option"
  382 + src="{{ server }}/img/{{ fingers_position_dir }}/0054.png"
  383 + value="54" /> 6.</li>
  384 + <li><img class="box-panel-option selection-panel-option"
  385 + src="{{ server }}/img/{{ fingers_position_dir }}/0055.png"
  386 + value="55" /> 7.</li>
  387 + <li><img class="box-panel-option selection-panel-option"
  388 + src="{{ server }}/img/{{ fingers_position_dir }}/0056.png"
  389 + value="56" /> 8.</li>
  390 + <li><img class="box-panel-option selection-panel-option"
  391 + src="{{ server }}/img/{{ fingers_position_dir }}/0057.png"
  392 + value="57" /> 9.</li>
212 393 </ul>
213 394 </div>
214 395 </div>
215 396 </div>
216 397 </div>
217   -<div id="{{ name }}-orientation" class="selection-panel-body" name="orientacao">
  398 +
  399 +<div id="{{ name }}-orientation" class="selection-panel-body"
  400 + name="orientacao">
218 401 <div class="panel-header">
219 402 <h8>Palma da mão</h8>
220 403 </div>
221 404 <div class="selection-panel-inner-body">
222 405 <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>
  406 + <li><img class="box-panel-option selection-panel-option"
  407 + src="{{ server }}/img/{{ orientation_dir }}/01.png" value="68" />1.</li>
  408 + <li><img class="box-panel-option selection-panel-option"
  409 + src="{{ server }}/img/{{ orientation_dir }}/02.png" value="66" />2.</li>
  410 + <li><img class="box-panel-option selection-panel-option"
  411 + src="{{ server }}/img/{{ orientation_dir }}/03.png" value="64" />3.</li>
  412 + <li><img class="box-panel-option selection-panel-option"
  413 + src="{{ server }}/img/{{ orientation_dir }}/04.png" value="2" />4.</li>
  414 + <li><img class="box-panel-option selection-panel-option"
  415 + src="{{ server }}/img/{{ orientation_dir }}/05.png" value="9" />5.</li>
  416 + <li><img class="box-panel-option selection-panel-option"
  417 + src="{{ server }}/img/{{ orientation_dir }}/06.png" value="16" />6.</li>
  418 + <li><img class="box-panel-option selection-panel-option"
  419 + src="{{ server }}/img/{{ orientation_dir }}/07.png" value="92" />7.</li>
  420 + <li><img class="box-panel-option selection-panel-option"
  421 + src="{{ server }}/img/{{ orientation_dir }}/08.png" value="90" />8.</li>
  422 + <li><img class="box-panel-option selection-panel-option"
  423 + src="{{ server }}/img/{{ orientation_dir }}/09.png" value="88" />9.</li>
  424 + <li><img class="box-panel-option selection-panel-option"
  425 + src="{{ server }}/img/{{ orientation_dir }}/10.png" value="4" />10.</li>
  426 + <li><img class="box-panel-option selection-panel-option"
  427 + src="{{ server }}/img/{{ orientation_dir }}/11.png" value="11" />11.</li>
  428 + <li><img class="box-panel-option selection-panel-option"
  429 + src="{{ server }}/img/{{ orientation_dir }}/12.png" value="18" />12.</li>
247 430 </ul>
248 431 </div>
249 432 </div>
250   -{%- endmacro %}
251   -
252   -{%- macro subconfigPanel(name) -%}
  433 +{%- endmacro %} {%- macro subconfigPanel(name) -%}
253 434 <div id="{{ name }}-subconfiguration-options"
254 435 class="subconfiguration-options col-sm-10">
255 436 <div class="icon_container" name="hand-moviment"
256 437 panel="{{ name }}-moviment" previous="{{ name }}-moviment"
257   - next="{{ name }}-fingers-position">
  438 + next="{{ name }}-articulation">
258 439 <img src="{{ server }}/img/hand-moviment-icon.png" />
259 440 </div>
  441 + <div class="icon_container" name="hand-articulation"
  442 + panel="{{ name }}-articulation" previous="{{ name }}-moviment"
  443 + next="{{ name }}-fingers-position">
  444 + <img src="{{ server }}/img/hand-articulation-icon.png" />
  445 + </div>
260 446 <div class="icon_container" name="hand-fingers-position"
261   - panel="{{ name }}-fingers-position" previous="{{ name }}-moviment"
  447 + panel="{{ name }}-fingers-position" previous="{{ name }}-articulation"
262 448 next="{{ name }}-orientation">
263 449 <img src="{{ server }}/img/hand-fingers-position-icon.png" />
264 450 </div>
... ...
view/img/hand-articulation-icon-check.png 0 → 100644

1.63 KB

view/img/hand-articulation-icon-hover.png 0 → 100644

981 Bytes

view/img/hand-articulation-icon.png 0 → 100644

977 Bytes

view/img/mov/CALAR_old.gif

567 KB

view/img/mov/PONTUAL.webm 0 → 100644
No preview for this file type
view/img/pa/A-Seletor.png 0 → 100644

253 Bytes

view/img/pa/default-base.png 0 → 100644

443 Bytes

view/img/pa/gray-front-avatar.png 0 → 100644

29.8 KB

view/img/pa/gray-side-avatar.png 0 → 100644

14.6 KB

view/template.html
1 1 <link rel="stylesheet" href="{{ server }}/assets/css/main.css">
2 2  
3   -<script src="{{ server }}/assets/js/js.cookie.js"></script>
4   -<script src="{{ server }}/assets/js/wikilibras.js"></script>
5   -
6 3 {% import 'hand-configuration.html' as handConfig with context %} {%
7 4 import 'facial-configuration.html' as facialConfig with context %}
8 5  
... ... @@ -195,6 +192,11 @@ import &#39;facial-configuration.html&#39; as facialConfig with context %}
195 192 </div>
196 193 </div>
197 194 </div>
  195 +
  196 +<script src="{{ server }}/assets/js/js.cookie.js"></script>
  197 +<script src="{{ server }}/assets/js/articulation.js"></script>
  198 +<script src="{{ server }}/assets/js/wikilibras.js"></script>
  199 +
198 200 <script type="text/javascript">
199   - wikilibras.run("{{ server }}", "{{ app_shortname }}", "{{ api_host }}");
  201 + wikilibras.run("{{ server }}", "{{ server_backend }}", "{{ app_shortname }}", "{{ api_host }}");
200 202 </script>
201 203 \ No newline at end of file
... ...
wikilibras.py
... ... @@ -33,7 +33,7 @@ class Wikilibras:
33 33  
34 34 def __update_project_info(self, project):
35 35 template = self.env.get_template('template.html')
36   - project.info['task_presenter'] = template.render(server=self.config['HOST_ENDPOINT'], app_shortname=self.config['PYBOSSA_APP_SHORT_NAME'], api_host=self.config['API_HOST'])
  36 + project.info['task_presenter'] = template.render(server=self.config['HOST_STATIC_FILES_ENDPOINT'], server_backend=self.config['HOST_ENDPOINT'], app_shortname=self.config['PYBOSSA_APP_SHORT_NAME'], api_host=self.config['API_HOST'])
37 37 project.info['thumbnail'] = self.config['HOST_ENDPOINT'] + "/img/thumbnail.png"
38 38 project.info['sched'] = "incremental"
39 39 project.allow_anonymous_contributors = False
... ...