Zamknięty

76487 JavaScript: semi-edytor map obrazkowych HTML

Zlecę wykonanie narzędzia wspomagającego opis osób na zdjęciach w celu generowania map obrazkowych. Opis wymagań długi, ale za to wymagania dobrze określone.

Kontekst:

Prowadzę stronę genealogiczną, dla której dane są zapisane w pliku XML w jakimś tam formacie (mniejsza w jakim, ale to NIE jest XHTML). Plik ten edytuję _ręcznie_. Z tego pliku przy pomocy transformacji XSL generuję sobie statyczną stronę WWW do prezentacji. Chcę wprowadzić zdjęcia rodzinne, na których twarze rozpoznanych osób byłyby określone sekcją AREA w odpowiedniej mapie HTML.

Przypadek użycia 1:

Wyobraźmy sobie, że prezentuję moją stronę genealogiczną mojemu dziadkowi. Otwieram zdjęcie, na której są wyłącznie nierozpoznane osoby. Dziadek wskazuje palcem 2 twarze mówiąc \"To jest Jan Nowak, a to Adam Kowalski\". Chciałbym w pobliżu zdjęcia umieścić odnośnik, który uaktywni \"Edytor map\", gdzie myszką zaznaczę pierwszą twarz (wciskam klawisz myszy, przeciągam kształt prostokąta i puszczam mysz), po czym jestem pytany za pomocą dialogu o identyfikator osoby (np. \"P143\"). Prostokąt pozostaje widoczny (ważne), a ja zabieram się do zaznaczenia Adama Kowalskiego, znów zaznaczam twarz prostokątem i wyskakuje dialog, w którym podaję inny identyfikator (np. \"P17\"). Dziadek nie potrafi już nikogo więcej wskazać, więc klikam na odnośnik w rodzaju \"Zamknij edytor\", który powoduje zamknięcie edytora, a do pamięci w schowku zostaje skopiowany kod (ale uwaga: kod o nieustalonym formacie, o tym w szczegółach), który mogę sobie wkleić w moim pliku XML i z niego w przyszłości wygenerować stronę z uaktualnioną mapą.

Przypadek użycia 2 (rozszerzenie przypadku 1):

Powiedzmy, że po przypadku użycia 1. wygenerowałem stronę na nowo, w jakiś sposób wygenerowałem sobie kod HTML który wyświetla ładną mapkę HTML z 2 sekcjami AREA wskazującymi na Jana Nowaka i Adama Kowalskiego. Dokładnie kod wygląda następująco:

<map name=\"xxx\">

  <area shape=\"rect\" coords=\"0,0,82,126\" href=\"[url removed, login to view]\" alt=\"xxx\" />

  <area shape=\"rect\" coords=\"90,58,3,12\" href=\"[url removed, login to view]\" alt=\"xxxx\" />

</map>

Z wygenerowaną ładnie stroną biorę laptopa i jadę do babci. Otwieram jej to samo zdjęcie, na którym mam już zaznaczonego Kowalskiego i Nowaka. Babcia wskazuje 3 osobę \"To przecież Anna Matusiak\". Zatem ja ponownie klikam \"Otwórz edytor\" przy zdjęciu i przechodzimy w tryb zaznaczania. Edytor wczytuje sobie dane z elementów map i area z pliku HTML i używa wczytanych danych do zaznaczenia na zdjęciu osób wcześniej już rozpoznanych widocznymi prostokątami (zapamiętuje współrzędne prostokątów oraz ). Zaznaczam teraz Annę Matusiak, znów wyskakuje okienko pytające o jej identyfikator, podaję \"P50\". Dodał się 3. prostokąt, babcia nie jest w stanie już nikogo rozpoznać, więc zamykam edytor i do schowka zostają skopiowane współrzędne i identyfikatory wszystkich 3 rozpoznanych osób (zwracam uwagę, że identyfikatory dla Kowalskiego i Nowaka zostały pobrane z wartości atrybutu href, po odcięciu rozszerzenia .html).

Umieszczenie edytora na stronie:

Będzie się odbywać przez umieszczenie w kodzie odnośnika z podaną klasą map-editor, którego obiektem docelowym będzie dany obrazek. Przykład:

<a href=\"[url removed, login to view]\" class=\"map-editor\">Włącz edytorek</a>

Kliknięcie odnośnika otworzy dane zdjęcie w oknie modalnym, gdzie nastąpi edycja. Jeśli to potrzebne to może być dodany atrybut onclick z zadanym przez wykonawcę kodem.

Format zapisu danych wyjściowych z edytora:

Brak ustalonego stałego formatu. Być może będę go modyfikować, więc chciałbym tylko aby gdzieś w dostarczonym pliku javascript była linijka w rodzaju:

var format = \"aaaaa… $x bbbbbbb… $y cccccc… $w dddddddd… $h eeeeeeee… $id\"

określającej format zapisu pojedynczego prostokąta dla danej osoby, gdzie $x, $y, $w, $h, $id są zmiennymi oznaczającymi odpowiednio współrzędna x, współrzędna y, szerokość, wysokość, identyfikator zaznaczonej osoby. Także potem generując wynik kod javascriptowy może zastosować podstawienie.

Pozostałe wymagania:

- działanie wyłącznie przy użyciu javascriptu, żadnych odwołań do strony serwera, ponieważ strona być może będzie umieszczona na serwerze nie obsługującym nawet PHP

- można wykorzystywać wszelkie pomocne biblioteki typu jquery

- zaznaczanie prostokąta odbywa się tak, że wciskam przycisk myszy w lewym górnym rogu twarzy, przeciągam mysz i puszczam przycisk w prawym dolnym rogu. W momencie puszczenia wyskakuje okienko z pytaniem o identyfikator

- kliknięcie na obrazku, gdy włączony jest edytorek, rozpoczyna od razu rysowanie prostokąta. Zatem nie może być tak, że mając już otwarty edytor muszę klikać jakiś przycisk w stylu \"dodaj kolejny prostokąt\" przy dodawaniu każdego prostokąta

- brak możliwości edycji istniejących prostokątów lub zmieniania ich identyfikatorów, za to musi być możliwość usunięcia wskazanego prostokąta klikając na nim prawym przyciskiem myszy

- obsługa jedynie prostokątów, żadnych innych figur

- nie potrzeba wykonywać żadnego sprawdzania danych (walidacji). Jeśli istnieje już jakaś mapa z danymi dla danego obrazka (a więc map, area itd.) to ma zawsze poprawny format:

<map name=\"cokolwiek\">

  <area shape=\"rect\" coords=\"0,0,82,126\" href=\"[url removed, login to view]\" alt=\"cokolwiek\" />

  <area shape=\"rect\" coords=\"90,58,3,12\" href=\"[url removed, login to view]\" alt=\"cokolwiek\" />

</map>

- przy otwartym edytorze wszystkie zaznaczone do tej pory prostokąty są widoczne, wypełnione szarym kolorem z półprzeźroczystością 50%

- obsługiwane przeglądarki: Firefox od wersji 3.5 i Chrome od 9.0

- przyzwoita jakość kodu (nie musi to być perełka, po prostu ma to wyglądać przyzwoicie, podzielone na funkcje, bez hacków). Nie znam za bardzo JavaScriptu (sam piszę tylko w Javie), ale w razie czego chciałbym móc w przyszłości ewentualnie wprowadzać drobne zmiany samodzielnie

- plik .js dostarczony mi nieskompresowany, bez użycia obfuscatora

- autor wyraża zgodę na kopiowanie i modyfikowanie kodu bez ograniczeń (a więc \"otwarcie\" kodu) z zachowaniem podpisu autora, jeśli takowy umieści

Mile widziany jakiś kod źródłowy w JavaScripcie potencjalnych zleceniodawców.

Umiejętności: CSS, Projekty graficzne, HTML, PHP, Projektowanie stron www

Zobacz więcej: xml jpg graphic, uga graphic design, odno, nika nika, kowalski, klas, js editor, jana, graphic html editor, editor js, adam d, wi x, anna s, html 5 editor, Tami, rz, nik, map i, generuj, gam

O pracodawcy:
( 2 ocen ) Poland

Numer ID Projektu: #5649312