Discussion Board

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
**FLASH INTERACTIONS INTERFACE DESCRIPTION**

Interface will include two parts of data: input and output variables.

\\ **Input parameters** will be accessed with SetVariable() method and will be immediately passed on each user action affecting on resulting image.
\\ Input parameters are:
  -  Label area size, which include LABEL_WIDTH and LABEL_HEIGHT variables;
  -  Minimal font size depending on size selected: FONT_MIN_SIZE;
  -  Minimal size of line block depending on size selected: LINE_MIN_WIDTH and LINE_MIN_HEIGHT;
  -  Maximal size of image block depending on size selected: IMAGE_MAX_WIDTH and IMAGE_MAX_HEIGHT;
  -  Line data will consist of four parameters, describing text block: LINE_TEXT, LINE_FONT, LINE_BOLD, LINE_ITALIC;
  -  Label image colour for both text and image: LABEL_COLOUR;
  -  Border presence for label: LABEL_BORDER;
  -  Name of image, selected from motifs or uploaded by user: IMAGE_INPUT_NAME;
  -  Name for image that is a result of user actions, saved by flash editor: IMAGE_OUTPUT_NAME;
  -  Path to image that is a result of user actions, saved by flash editor: IMAGE_OUTPUT_PATH;

\\ Generally we have an array of lines with a number of elements from 0 to LINE_MAX_FOR_SIZE (maximal number of lines for size selected).

\\ Input parameters will changes on such user actions as label size selection, text entering, font and font style selection, color selection, image selection (or uploading) and label border enabling.

\\ **Output parameters** will be accessed with GetVariable() method as processing logic required.
\\ Output parameters are:
  -  Flag indicating that one more line can be added on Label area yet: LINE_CAN_BE_ADDED;
  - <del> Flag indicating that one more character can be added into a line text: CHAR_CAN_BE_ADDED;</del>
  -  Flag indicating that image can be added into label design: IMAGE_CAN_BE_ADDED;

\\ LINE_CAN_BE_ADDED parameter will be read right before new line addition. It will depends of free space on Label area, available for new line block addition;
\\ <del>CHAR_CAN_BE_ADDED parameter will be read after each character typing into line input field. It will depends of size of line block on Label area.</del>
\\ IMAGE_CAN_BE_ADDED parameter will be read right before image addition. It will depends of free space on Label area, available for image block addition;

\\ **Templates** are placed in /tpl directory of site root.
  -  layout.tpl is a main layout page for other page content blocks insertion.
  -  main_nl.tpl is a content block for a main page on norwegian language.
  -  txt_line_nl.tpl is a single text line block to be added into design area.
  -  design_area_nl.tpl is a separate design area block used to add new label design.
  -  cart_item_nl.tpl is a separate shopping cart item (QC) block to be added with new label design.
  -  category_link_nl.tpl is a block for single category tab forming.
  -  main_nl_add_head.tpl is an additional header data (js includes, flash object registering, flash object styling);
  -  motiv_link_nl.tpl is a block for single icon in icon grid (motifs selector);
  -  motiv_selected_nl.tpl is an image block, highlighting selected image in grid; 

----
**Организация взаимодействия js <-> flash**
\\ As I know, Flash has no native support for complex data types like array, so //may be lines array should be presented as a formatted string with dividers in order to two dimentional array will be passed?// 

//Можно прямо из джавового скрипта вызывать функцию внутри swf-ки, тогда можно просто этой функции все параметры (одним мноомерным массивом) передавать когда пользователь что-то изменил, пример//: http://navnestempel.almeydahost.com/flash/index.html

Тогда предлагаю сделать так:
\\ Все параметры, которые будут передаваться флэш-редактору (ФР) разделить на две части:
  *  параметры, которые касаются дизайна вцелом;
  *  параметры текстовых строк;

//Параметры дизайна// организуем следующим образом:

Для передачи используем массив **design_params**.

**design_params[0]** будет содержать имена переменных, а именно: ''label_width, label_height, font_min_size, line_min_width, line_min_heigth, image_max_width, image_max_height, label_color, label_border, selected_image''. Например: ''design_params[0][label_width, label_height, font_min_size, line_min_width, ...]''.

**design_params[section_no]** будет содержать значения переменных для секции дизайна ''section_no'' в соответствии с их индексацией в design_params[0]. Т.е. индекс значения элемента в design_params[section_no] будет строго соответствовать индексу имени элемента в design_params[0]. Например: ''design_params[section_no][60, 10, 8, 30, ...]'' - значения элементов в соответствии с их именами в приведенном выше примере для design_params[0].

Собственно передача в js выглядит так: ''obj.sendToActionscript(design_params[0],design_params[parseInt(n)]);'' 
\\ **Сколько она раз вызывается из ДжаваСкрипта?** (сам флеш мне говорит что примерно по 7 раз заодно изменение при изменении масштаба) \\ Просто мне надо хранить предыдущие значения ширины-высоты для пропорционального изменения координат картинок/текста. \\ //Она вызывается для каждого из параметров ''label_width, label_height, font_min_size, line_min_width, line_min_heigth, image_max_width, image_max_height'', которые обновляются при смене размеров. Если тебя это не устраивает - могу попробовать переписать эту часть.// \\ Хорошо, или можно просто мне отдавать прежний размер лейбла - как удобнее будет. \\ //Переписал, теперь на смену размера один вызов. Прежний размер лейбла не храню...//

//Параметры строк// организуем так:

Для передачи данных используем массив **text_lines_params**.

**text_lines_params[section_no][line_no]** будет содержать значения переменных текстовой строки ''line_no'' для секции дизайна ''section_no''. При этом считаем, что:
  *  **text_lines_params[section_no][line_no][0]** - значение текстового поля строки;
  *  **text_lines_params[section_no][line_no][1]** - имя фонта для строки;
  *  **text_lines_params[section_no][line_no][2]** - использование стиля **BOLD** для строки;
  *  **text_lines_params[section_no][line_no][3]** - использование стиля //ITALIC// для строки;
\\ Например: ''text_lines_params[section_no][line_no][qwerty, Arial, false, true]''.

Собственно передача в js выглядит так: ''obj.sendToActionscript(text_lines_params[parseInt(n)][parseInt(value)]);''
Т.е. в обоих случаях передается только последняя часть - одномерный массив.

** Проверка возможности добавления блоков текста и изображения **

Мне нужно от тебя имена переменных, в которых ты будешь выставлять признаки LINE_CAN_BE_ADDED и IMAGE_CAN_BE_ADDED и имя метода, с помощью которого эти значения можно будет прочитать (GetVariable(...)?). Признак CHAR_CAN_BE_ADDED во флэш-редакторе можно упразднить, поскольку это решено ресайзом текста внутри блока.

** Получение сгенерированного изображения **

В **design_params** добавляем 2 параметра:

  *  IMAGE_OUTPUT_NAME - имя снимка дизайна, под которым он должен быть сохранен, чтобы быть найденным java и php скриптами.
  *  IMAGE_OUTPUT_PATH - путь к снимку дизайна, куда он должен быть сохранен (будет браться из конфигурации).

т.е. требуется сохранить снимок дизайна как IMAGE_OUTPUT_PATH/IMAGE_OUTPUT_NAME.jpg

В **design_params[0]** добавлены имена переменных 'image_output_path' и 'image_output_name', в **design_params[section_no]** - их значения. Скрипт jpg_encoder_download.php, необходимый для получения данных из редактора и сохранения файла положил в папку flash/. Т.е. можно пробовать сохранять изображение лейбла.

В **design_params[0]** добавлено имя переменной 'image_script_name', в **design_params[section_no]** - ее значение. Содержит имя скрипта (например, ''jpg_encoder_download.php''), получающего данные от флэш-редактора для их сохранения в виде конечного изображения лейбла.

----
\\ **Проблемы с HTML**
  -  Диалог для выбора иконок (motiv selector) - нужно изображение images/selected.png корректно разместить под выбранной иконкой фоном так же, как на merkalt.no для обозначения выбранной иконки из таблицы. Сейчас оно после выбора располагается не под выбранной иконкой, а __в следующем ряду иконок__.

  *  ввел в цсс еще один класс -  **SELECTED** все что нужно это присвоить блоку его когда блок выбран (если такое возможно реализовать, пока повеил на onmousedown для блока motiv_link_nl.tpl) \\ //для того элемента с которого убрали выделение// - класс **OFF**

----
  *  **Вопрос:** Есть ли возможность передавать мне путь до картинки (то есть не просто ее имя а полный путь к примеру: motifs/section1/ant.jpg) \\ //Сделано, можешь пользовать.//

  *  **Передача параметров текстовой строки:** если не сложно, можно использовать не obj.sendToActionScript, а obj.**updateTextData**(text_lines_params[parseInt(n)][parseInt(value)])? \\ //Сделано, пробуй использовать.// \\ передается нормально, думаю нужно еще добавить **text_lines_params[section_no][line_no][4]** - где будет индекс строки чтобы определять где вносить изменения \\ //Сделано, пробуй использовать//

  * **Проблемы с селектором иконок:** какие классы пользуются (соответственно) когда мы наводим мышку на иконку и когда нажимаем (буду искать в них разницу и править) \\ //Смотри шаблоны (папка ''tpl/''): **motiv_link_nl.tpl** - обертка для иконки в селекторе, **motiv_selected_nl.tpl** - изображение, добавляемое при выборе в первый ''div'' из **motiv_link_nl.tpl**, сразу после ''<div class="OFF" onmouseover="this.className='ON'" onmouseout="this.className='OFF'"></div>''. Если нужно подробнее - посмотри функцию ''changemotif_actions'' (строка 925 в ''js/render.js'').// 

==== Замечания по работе редактора ====

//может быть, какие-то вещи, например ресайз, еще в разработке. тогда просто рассматривай это как напоминание при работе//

**Общее:**
  *  объекты - если по какой-то причине объекты накладываются друг на друга, редактор начинает глючить - невозможно растащить их или изменить размер.
  *  строки - если для какой-либо строки передается пустое знаечение, соответствующий объект должен быть удален из области редактора.
  *  изображения - если для изображения передается пустой путь, объект должен удаляться.
  *  блоки - ''blocks could be moved and resized only in active state'' (см. описание для "Label Area" на [[http://wiki.deitsolutions.com/doku.php?id=merkalt:navnestempel_ui_schema]]). как сейчас различаются активное и неактивное состояния блоков?

**Селектор размера:**
  *  при изменении размера в меньшую сторону объекты не ресайзятся для того, чтобы уместиться в область нового размера.

  *  при изменении размера объекты остаются за пределами границ области, если произошло уменьшение размера по вертикали или горизонтали.
  *  удаление лишних строк (превышающих максимально возможное количество для размера) при изменении размера - см. Общее / строки.

**Строки:**
  *  при смене цвета на красный или зеленый остается черный ободок вокруг символов в текстовом объекте. это так и задумано?
  *  вновь добавляемая строка всегда черного цвета вне зависмости от того, какой цвет выбран.
  *  ''the new line will be placed into free place and auto - adjusted in sizes'' (описание для "Lines" на [[http://wiki.deitsolutions.com/doku.php?id=merkalt:navnestempel_ui_schema]]). новые объекты всегда добавляются в левый вехний угол, если там есть хоть немного места. а надо бы выбирать место для вставки объекта исходя из его минимально возможных размеров.
  *  при вводе сейчас, если места недостаточно, текст начинает скроллировать. мне кажется, вообще не должно быть скроллинга. если есть возможность, надо сделать проверку, сколько символов может быть отображено в объекте заданного размера. если количество видимых в объекте символов достигло максимума, т.е. вводимые далее символы не будут видимы в объекте - должен выставляться признак этого для JS (CHAR_CAN_BE_ADDED = false) и новые символы не будут вводиться с формы.
  *  селектор шрифта не работает.
  *  удаление строки - см. Общее / строки..
  *  добавление строки - если свободного места нет - выставлять признак LINE_CAN_BE_ADDED в FALSE.

**Селектор границы** не работает.

**Изображения:**
  *  если для изображения нет свободного свободного места, оно вылетает за пределы границ лейбла. я думаю, надо будет еще ввести тогда признак возможности вставки изображения (IMAGE_CAN_BE_ADDED) в зависмости от наличествующего свободного места и минимальных размеров изображения для текущего размера лейбла. т.е. если места нет, то выставляешь этот признак в FALSE, а я буду проверять его перед тем, как добавить картинку в дизайн.
  *  удаление изображения через "Slett motiv" - см. Общее / изображения.

----
// \\ мне кажется надо ввести вызов функции из флеша уведомляющей о невозможности добавить блок (текст или картинку тк пользователь может существующие так растянуть что остальное попросту не влезет) \\ пример: добавление строки при отсутствии свободного места \\ {{:merkalt:fe_test_001.jpg|}} //

02.06.2009

\\ <del>1.  селектор шрифта для строки не работают.</del>
\\ <del>3. Ввод строки вызывает (часто, но не всегда) следующую ошибку:</del>
\\ {{:merkalt:fe_test_003.jpg|}}
\\ 4. Смена размера лейбла вызывает ошибки. Во-первых, не удаляются лишние строки. Возникает все то же **uncaught exeption** и нормальное функционирование JS прерывается (менял с 40х40 на 60х10: обрати внимание на "Linje 3" - она очистилась джаваскриптом,но при передаче параметров строки во флеш что-то сломалось): \\ {{:merkalt:fe_test_002.jpg|}} \\ Во-вторых, не работает ресайз и перемещение объектов при смене размера: \\ сделали дизайн для 40х40... \\ {{:merkalt:fe_test_004.jpg|}} \\ ... изменили размер на 60х10... \\ {{:merkalt:fe_test_005.jpg|}}
\\ 5. Удаление изображения из дизайна не работает - остается пустой блок.
\\ 6. Проблема с выбором места для новой строки (даже если есть свободное место) осталась. Первая строка вводится и ресайзится, вторая все равно лезет между левой границей и первой строкой... \\ {{:merkalt:fe_test_006.jpg|}}
\\ 7. Дизайн после ввода изображения, если для него нет достаточного места выглядит примерно так: \\ {{:merkalt:fe_test_007.jpg|}}
\\ 8. <del>Текст, введенный в строку в русском регистре, в объектах не отображается. А будет ли он отображаться, если будет вводиться голландский текст?</del>
\\ 9. Кнопка Slett stempel для одного (или первого) дизайна должна вызывать очистку области дизайна. Объекты после ее нажатия остаются.
\\ // для нее можно вызов влешевой функции написать? clear_design //
\\ если тебе так удобнее - можешь сделать
\\ ок

\\ нашел глюк (или это так задумано?): \\ 
 если создать текстовые поля 1,2,3 \\ 
 потом 2 удалить чтоб было 1 и 3, и добавить новый то будет 1, 3, 3
\\ //"1, 3, 3" - это что имеется ввиду?//

\\ по исправлениям: -
  *  кирилица функционирует 100%, в список символов ввел так же всякие дополнительные (с точечками сверху и тд) буквы, вроде Голландский не содержит других.
  *  для ТАХОМЫ не сущетсвует в природе (и просторах инета) стиля italic
  *  смена шрифтов работает нормально (стили если таковые для данного шрифта предусмотренны) применяются так же сразу. 
\\ в **image_output_path** можно ли записать имя скрипта которому я отдаю файл? 
\\ //может быть стоит для этого завести отдельную переменную?//
\\ хорошо, что-нибуть типа script_name
\\ //добавлено: image_script_name //
\\ в **image_output_name** мне расширение jpg или jpeg делать? (если это имеет значение конечно)
\\ //jpg//
\\ сейчас флеш правильно составляет путь?
\\ //с путем надо так: jpg_encoder_download.php?name=/home/.reku/andreas_ho/navnestempel.almeydahost.com/2009060807482276.jpg //
\\ теперь вроде правильно (flash/ в начале тк пхп относительно самой страницы где находится модуль флеша находится в этой папке)
\\ //ты данные-то постишь? чет не работает так, похоже. может, flash/ попробовать убрать?//
\\ счас сделаю для теста переход по ссылке которую генерирует флеш flash/ убрал
\\ //снапшоты теперь сохраняются, переход по ссылке можно убрать. работает вроде бы.//
\\ убрал, все еще работае надеюсь?
\\ //работает, но снапшот не полный: http://navnestempel.almeydahost.com/output/2009060809220936.jpg //
\\ сейчас нормальный размер передает?
\\ //да, вроде бы полный размер попадает теперь//

\\ 13.06.2009
\\ Вызов функции obj.sendToActionscript(design_params[0],design_params[parseInt(n)]); вызывает какой-то сбой - после sendToActionscript выполнение js прерывается, и дальнейшая работа джаваскрипта становится неустойчивой. Если этот вызов отключить - js работает корректно. Нужно бы выяснить, из-за чего это происходит - может быть, дело в передаваемых параметрах или в чем-то еще?
\\ исправил. у меня опечатка в вызове была (извиняюсь)
\\ когда флеш не может разместить любой элемент (кратинка/текст - неважно), я предлагаю пользователю выводить alert'ом сообщение об этом, например: "there is no enough free space to place element" и сам элемент не будет добавляться на сцену. Для вызова мне нужно только имя JS функции (если будем реализовывать таким образом)

Посмотри выше:
\\ ** Проверка возможности добавления блоков текста и изображения **

Т.е. мне нужен признак, который я буду читать перед добавлением объектов. И сам буду выводить сообщение, если добавление невозможно. Это реализуемо?
\\ \\ // для проверки оставшегося места брать максимальные размеры блоков (картинки/текста)?//
\\ \\ я думаю, что минимальные. и вообще, когда вставляешь объект (в частности, картинку), мне кажется, нужно использовать минимальные размеры для объекта, если иное не оговаривалось специально. потому, что после вставки строкового объекта в лейбл размером, к примеру, 40х40, вставка картинки уже глючит. если бы объект картинки принимал минимальный размер, такого быне было, я думаю.
\\ \\ // и признаки делть раздельно или один?.//
\\ \\ если ты о признаках для объектов текста и картинки, то лучше раздельно
\\ \\ // и передавать параметры в функцию (так проще из флешка) с каким именем?//
\\ \\ видишь ли, мне нужны эти признаки ПЕРЕД добавлением строки или вставкой картинки. т.е. при нажатии юзером кнопки "добавить строку" или при выборе картинки из грида, __перед__ тем как добавить данные в дизайн и послать тебе обновленные параметры дизайна, я сам должен решить на основании твоих признаков, можно ли это добавление/обновление сделать или нет. потому что твое сообщение о том, что места нет для добавления объектов, которое вернет флэш, мне уже ничем не поможет - у меня-то данные и ХТМЛ код на этот момент будут уже добавлены. мне-то потом их как удалять?
\\ \\ в чем, собственно говоря, сложность-то для тебя? в самом начале (при инициализации) и после того, как добавляешь какой-нить объект, проверяй по минимальным размерам картинок и текста, можно ли еще добавить то и другое, и если что-то добавить нельзя, выставляй соответствующую переменную. а я ее буду читать с помощью GetVar(...). или есть какие-то сложности с этим? может, я чего не понимаю?

\\ setVariable(variable_name, variable_state) (пример: // setVriable("LINE_CAN_BE_ADDED", "true")// 
\\ getVariable(variable_name), возвращает при вызове состояние переменной (пример: // getVriable("IMAGE_CAN_BE_ADDED")//
\\ переменные: // LINE_CAN_BE_ADDED, IMAGE_CAN_BE_ADDED, snapshot_saved //
\\ // ок, попробую. //
\\ единственная трудность пока написать толковый алгоритм (для определения возможности добавления блоков)
\\ у картинки нет минимального размера (мне точно **не** передается для нее такавой), я могу поставить скажем 20х20 пикселей.
\\ //да, действительно минимальные значения только для текста. значит, наверное, придется добавить и для картинок. думаю, они могут быть разные для разных размеров лейблов.//

\\ 15.06.2009
\\ 1. Генерация файла изображения должна происходить не только по выходу указателя мыши из области дизайна. Пользователь может изменить цвет лейбла, опцию наличия рамки и т.д., не помещая после этого указатель мыши в область дизайна. Т.е. получается, что нужно выполнять сохранение снапшота дизайна на каждое изменение параметров дизайна.
\\ 2. Необходимо выставлять во флеше признак того, что снапшот сохранен. Этот признак (переменная) должен быть доступен для чтения/записи из джаваскрипта.
\\ //переменная snapshot_saved , мне к ней обращаться надо и если надо, то в каких условиях?//
\\ просто выставляй ее по факту сохранения снапшота в **true**. снимать этот признак буду уже я.
\\ 3. Некоторые операции во флеш-редакторе, например, применение свойств текстовой строки, занимают достаточно длительное время. Наверное, стоит ввести какой-то прогресс-индикатор, показывающий пользователю, что что-то происходит во время этих операций?
\\ // сделал пока таким окошком, могу в это время LINE_CAN_BE_ADDED и IMAGE_CAN_BE_ADDED временно в false обращать если надо //
\\ да, наверное лучше сделать так

\\ 23.06.2009
\\ Странно, но ни одна переменная не работает как надо. Забиваю дизайн блоками полностью, не оставляя свободного места вообще, проверяю LINE_CAN_BE_ADDED или IMAGE_CAN_BE_ADDED - они всегда **true**, а snapshot_saved, напротив, всегда **false**, хотя снапшот сброшен...