[dev] [commit] r967 - patches templates/admin wwwbase/admin wwwbase/js wwwbase/styles
automailer at dexonline.ro
automailer at dexonline.ro
Thu Aug 29 19:49:58 EEST 2013
Author: grigoroiualex
Date: Thu Aug 29 19:49:58 2013
New Revision: 967
Log:
Added lexemeId field to Visual table so that it will know what image to load for a definition. Now, when a new image is uploaded, it asks to fill in the matching word and afterwards it shows the tagging page. The matching word can be modified at any time.
Added:
patches/00099.sql
Modified:
templates/admin/visualTag.ihtml
wwwbase/admin/visualTag.php
wwwbase/js/visualTag.js
wwwbase/styles/flex.css
Added: patches/00099.sql
==============================================================================
--- /dev/null 00:00:00 1970 (empty, because file is newly added)
+++ patches/00099.sql Thu Aug 29 19:49:58 2013 (r967)
@@ -0,0 +1 @@
+ALTER TABLE Visual ADD lexemeId INT(11) AFTER path;
Modified: templates/admin/visualTag.ihtml
==============================================================================
--- templates/admin/visualTag.ihtml Thu Aug 29 03:18:44 2013 (r966)
+++ templates/admin/visualTag.ihtml Thu Aug 29 19:49:58 2013 (r967)
@@ -1,80 +1,106 @@
<br/>
{if $anyUntaggedImages}
- <div class="visualTagCanvas">
- <img src="{$imagePath}" id="jcrop"/>
- <label>Coordonatele centrului selecției:
- <input id="x" type="text" size="4" name="x"/>
- <input id="y" type="text" size="4" name="y"/>
- </label>
- <button type="button" id="clrSel">Șterge selecția</button>
- <form action="visualTag.php" method="post">
- <input type="hidden" value="{$imageId}" name="imageId"/>
- <button type="submit" name="action" value="finishedTagging">
- Etichetarea este completă
- </button>
- </form>
- <button type="button" id="toggleHelp">Click pentru Ajutor</button>
+ {if !$imgLexemeId}
+ <div class="visualTagCanvas">
+ <img src="{$imagePath}"/>
+ </div>
<div>
- <p id="helpText">
- Pasul 1: Selectează textul ținând apăsat click stânga și modificând selecția.
- Apoi, apasă primul buton „Setează coordonatele”.<br/>
- Pasul 2: Click pe imagine în locul în care indică săgeata.
- Apoi, apasă cel de-al doilea buton „Setează coordonatele”.<br/>
- Pasul 3: Selectează „Da”, dacă lexemul etichetei reprezintă imaginea pe
- de-a-ntregul, altfel selectează „Nu” (lexemul reprezintă un subansamblu
- al imaginii). Dacă lași neselectat, valoarea implicită va fi „Da”.<br/>
- Pasul 4: Click pe butonul „Salvează eticheta” pentru a salva adăugirile
- în baza de date. Dacă ai uitat vreun câmp necompletat, vei fi anunțat.<br/>
- Pasul 5: După ce ai terminat de adăugat toate etichetele, click pe
- butonul „Etichetarea este completă” și se va încărca următoare imagine
- neetichetată din baza de date, dacă aceasta există.
- </p>
+ <form action="visualTag.php" method="post" onsubmit="return validateLexeme()">
+ <label>Cuvântul care descrie cel mai bine imaginea:<br/>
+ <input type="hidden" value="{$imageId}" name="imageId"/>
+ <input id="selectImgLexeme" type="hidden"/>
+ <input id="imgLexemeId" type="text" size="4" name="imgLexemeId"/>
+ </label>
+ <button type="submit" name="action" value="setImgLexemeId">Salvează</button>
+ </form>
</div>
- </div>
-
- <div>
- <form action="visualTag.php" method="post" onsubmit="return validateTag()">
- <label>Id imagine:
- <input type="text" size="4" value="{$imageId}" name="imageId"/>
- </label><br/>
-
- <label>Cuvânt:
- <input id="selectLexeme" type="hidden"/>
- </label><br/>
-
- <label>Id lexem
- <input id="lexemeId" type="text" size="10" name="lexemeId"/>
- </label><br/>
-
- <label>Lexem
- <input id="lexeme" type="text" size="15" name="lexeme"/>
- </label><br/>
-
- <label>Coordonatele centrului etichetei:
- <input id="xTag" type="text" size="4" name="xTag"/>
- <input id="yTag" type="text" size="4" name="yTag"/>
- <button id="setCoordTag" type="button">Setează coordonatele</button>
- </label><br/>
-
- <label>Coordonatele zonei etichetate:
- <input id="xImg" type="text" size="4" name="xImg"/>
- <input id="yImg" type="text" size="4" name="yImg"/>
- <button id="setCoordImg" type="button">Setează coordonatele</button>
- </label><br/>
- <button id="saveSel" type="submit" name="action" value="save">Salvează eticheta</button>
- </form>
-
- <h3>Etichete salvate</h3>
- {foreach from=$savedTags item=tag}
+ {else}
+ <div class="visualTagCanvas">
+ <img src="{$imagePath}" id="jcrop"/>
+ <label>Coordonatele centrului selecției:
+ <input id="x" type="text" size="4" name="x"/>
+ <input id="y" type="text" size="4" name="y"/>
+ </label>
+ <button type="button" id="clrSel">Șterge selecția</button>
<form action="visualTag.php" method="post">
- <label>{$tag->label}
- <input type="hidden" name="savedTagId" value="{$tag->id}"/>
- <button type="submit" name="action" value="delete">Șterge eticheta</button>
- </label>
+ <input type="hidden" value="{$imageId}" name="imageId"/>
+ <button type="submit" name="action" value="finishedTagging">
+ Etichetarea este completă
+ </button>
</form>
- {/foreach}
- </div>
+ <button type="button" id="toggleHelp">Click pentru Ajutor</button>
+ <div id="helpText">
+ <p>
+ Pasul 1: Selectează textul ținând apăsat click stânga și modificând selecția.
+ Apoi, apasă primul buton „Setează coordonatele”.<br/>
+ Pasul 2: Click pe imagine în locul în care indică săgeata.
+ Apoi, apasă cel de-al doilea buton „Setează coordonatele”.<br/>
+ Pasul 3: Selectează „Da”, dacă lexemul etichetei reprezintă imaginea pe
+ de-a-ntregul, altfel selectează „Nu” (lexemul reprezintă un subansamblu
+ al imaginii). Dacă lași neselectat, valoarea implicită va fi „Da”.<br/>
+ Pasul 4: Click pe butonul „Salvează eticheta” pentru a salva adăugirile
+ în baza de date. Dacă ai uitat vreun câmp necompletat, vei fi anunțat.<br/>
+ Pasul 5: După ce ai terminat de adăugat toate etichetele, click pe
+ butonul „Etichetarea este completă” și se va încărca următoare imagine
+ neetichetată din baza de date, dacă aceasta există.
+ </p>
+ </div>
+ </div>
+
+ <div>
+ <form action="visualTag.php" method="post">
+ <input type="hidden" value="{$imageId}" name="imageId"/>
+ <p>
+ Informații imagine<br/><br/>
+ Imaginea este atribuită cuvântului: {$lexemeName}.
+ </p>
+ <button type="submit" name="action" value="resetImgLexemeId">Modifică</button>
+ </form>
+ <form action="visualTag.php" method="post" onsubmit="return validateTag()">
+ <input type="hidden" value="{$imageId}" name="imageId"/>
+
+ <p>Informații etichetă</p>
+
+ <label>Cuvânt:
+ <input id="selectLexeme" type="hidden"/>
+ </label><br/>
+
+ <label>Id lexem:
+ <input id="lexemeId" type="text" size="10" name="lexemeId"/>
+ </label><br/>
+
+ <label>Lexem:
+ <input id="lexeme" type="text" size="15" name="lexeme"/>
+ </label><br/>
+
+ <label>Coordonatele centrului etichetei:
+ <input id="xTag" type="text" size="4" name="xTag"/>
+ <input id="yTag" type="text" size="4" name="yTag"/>
+ <button id="setCoordTag" type="button">Setează coordonatele</button>
+ </label><br/>
+
+ <label>Coordonatele zonei etichetate:
+ <input id="xImg" type="text" size="4" name="xImg"/>
+ <input id="yImg" type="text" size="4" name="yImg"/>
+ <button id="setCoordImg" type="button">Setează coordonatele</button>
+ </label><br/>
+
+ <button id="saveSel" type="submit" name="action" value="save">Salvează eticheta</button>
+ </form>
+
+ <h3>Etichete salvate</h3>
+ {foreach from=$savedTags item=tag}
+ <form action="visualTag.php" method="post">
+ <label>{$tag->label}
+ <input type="hidden" name="savedTagId" value="{$tag->id}"/>
+ <button type="submit" name="action" value="delete">Șterge eticheta</button>
+ </label>
+ </form>
+ {/foreach}
+ </div>
+ {/if}
+
{else}
<p>Toate imaginile au fost revizuite. Mulțumim!</p>
{/if}
Modified: wwwbase/admin/visualTag.php
==============================================================================
--- wwwbase/admin/visualTag.php Thu Aug 29 03:18:44 2013 (r966)
+++ wwwbase/admin/visualTag.php Thu Aug 29 19:49:58 2013 (r967)
@@ -7,8 +7,10 @@
$rootPath = util_getImgRoot() . '/';
$savedTags = '';
+$action = util_getRequestParameter('action');
-if(util_getRequestParameter('action') == 'save') {
+
+if($action == 'save') {
$imageId = util_getRequestParameter('imageId');
$lexemeId = util_getrequestParameter('lexemeId');
$lexeme = util_getRequestParameter('lexeme');
@@ -30,7 +32,7 @@
util_redirect(util_getWwwRoot() . 'admin/visualTag.php');
-} else if(util_getRequestParameter('action') == 'delete') {
+} else if($action == 'delete') {
$tagId = util_getRequestParameter('savedTagId');
$line = VisualTag::get_by_id($tagId);
@@ -40,12 +42,40 @@
util_redirect(util_getWwwRoot() . 'admin/visualTag.php');
-} else if(util_getRequestParameter('action') == 'finishedTagging') {
+} else if($action == 'finishedTagging') {
$imageId = util_getRequestParameter('imageId');
$line = Visual::get_by_id($imageId);
- $line->revised = 1;
- $line->save();
+
+ if(!empty($line)) {
+ $line->revised = 1;
+ $line->save();
+ }
+
+ util_redirect(util_getWwwRoot() . 'admin/visualTag.php');
+
+} else if($action == 'setImgLexemeId') {
+ $imgLexemeId = util_getRequestParameter('imgLexemeId');
+ $imageId = util_getRequestParameter('imageId');
+
+ $line = Visual::get_by_id($imageId);
+
+ if(!empty($line)){
+ $line->lexemeId = $imgLexemeId;
+ $line->save();
+ }
+
+ util_redirect(util_getWwwRoot() . 'admin/visualTag.php');
+
+} else if($action == 'resetImgLexemeId') {
+ $imageId = util_getRequestParameter('imageId');
+
+ $line = Visual::get_by_id($imageId);
+
+ if(!empty($line)) {
+ $line->lexemeId = '';
+ $line->save();
+ }
util_redirect(util_getWwwRoot() . 'admin/visualTag.php');
}
@@ -55,12 +85,19 @@
if(!empty($line)) {
$imagePath = $rootPath . $line->path;
$imageId = $line->id;
+ $imgLexemeId = $line->lexemeId;
+ if($imgLexemeId) {
+ $lexemeName = Lexem::get_by_id($imgLexemeId);
+ $lexemeName = $lexemeName->formUtf8General;
+ SmartyWrap::assign('lexemeName', $lexemeName);
+ }
$tags = VisualTag::get_all_by_imageId($imageId);
SmartyWrap::assign('savedTags', $tags);
SmartyWrap::assign('imagePath', $imagePath);
SmartyWrap::assign('imageId', $imageId);
+ SmartyWrap::assign('imgLexemeId', $imgLexemeId);
}
SmartyWrap::assign('sectionTitle', 'Etichetare imagini pentru definiții');
Modified: wwwbase/js/visualTag.js
==============================================================================
--- wwwbase/js/visualTag.js Thu Aug 29 03:18:44 2013 (r966)
+++ wwwbase/js/visualTag.js Thu Aug 29 19:49:58 2013 (r967)
@@ -76,7 +76,7 @@
var data = {id: element.val(), text: element.val()};
callback(data);
},
- placeholder: "Scrie lexemul",
+ placeholder: 'Scrie lexemul',
allowclear: true,
minimumInputLength: 1,
context: this,
@@ -87,13 +87,7 @@
results: function(data, page) { return { results: data.results }; },
},
formatResult: select2Format,
- /*function(data) {
- return data.text;
- },*/
- formatSelection: select2Format,
- /*function(data) {
- return data.text;
- },*/
+ formatSelection: function(data) { return data.text; },
width: '200px',
}).on('change', function(e) {
@@ -103,6 +97,31 @@
$('#lexemeId').val(id);
$('#lexeme').val(text);
});
+
+ $('#selectImgLexeme').select2({
+ initSelection: function(element, callback) {
+ var data = {id: element.val(), text: element.val()};
+ callback(data);
+ },
+ placeholder: 'Scrie lexemul',
+ allowclear: true,
+ minimumInputLength: 1,
+ context: this,
+ ajax: {
+ url: wwwRoot + 'ajax/visualTag.php',
+ dataType: 'json',
+ data: function(term, page) { return {term: term}; },
+ results: function(data, page) { return { results: data.results }; },
+ },
+ formatResult: select2Format,
+ formatSelection: function(data) { return data.text; },
+ width: '200px',
+
+ }).on('change', function(e) {
+ var id = $(this).select2('data').id;
+
+ $('#imgLexemeId').val(id);
+ });
});
function validateTag() {
@@ -126,6 +145,15 @@
}
};
+function validateLexeme() {
+ var lexeme = $('#imgLexemeId').val();
+
+ if(!lexeme) {
+ alert('Ai uitat să completezi ce lexem descrie cel mai bine imaginea');
+ return false;
+ }
+};
+
function select2Format(lex) {
- return lex.text + ' ' + lex.description;
-}
+ return lex.text + '<br/><i>' + lex.description + '</i>';
+};
Modified: wwwbase/styles/flex.css
==============================================================================
--- wwwbase/styles/flex.css Thu Aug 29 03:18:44 2013 (r966)
+++ wwwbase/styles/flex.css Thu Aug 29 19:49:58 2013 (r967)
@@ -379,6 +379,12 @@
.visualTagCanvas {
float: left;
width: 500px;
+ height: 500px;
+}
+
+.visualTagCanvas img {
+ max-width: 500px;
+ max-height: 500px;
}
#helpText {
More information about the Dev
mailing list