Differences

This shows you the differences between two versions of the page.

--- merkalt:navnestempel_ui_schema [2009/10/14 13:40] – daruma
+++ merkalt:navnestempel_ui_schema [2009/10/15 13:59] (current) – daruma
@@ Line 33: / Line 33: @@
 == Lines ==
-Each stamp size has a maximum number of lines to be added for design //so the number of lines will be from 0 to MAX_FOR_SIZE, this will be controlled by the code of **Add new line**. Initially on label creation there are 0 lines. **Add new line** click produces an addition of new **Line Group**, which including text input to add line, font selector, check boxes for text style selection and removal 'x' icon to delete line from design. Text added into the line or text style changes will be immediately shown in Label Area, the new line will be placed into free place and auto - adjusted in sizes. The line will be added to Label Area only when the first character in line field entered. As soon as line content is empty, the appropriate text block will be removed from Label Area. Also we need to define a condition, when the new line couldn't be added because no free space, with appropriate notification. There will be also a special restriction on the number of characters in the text line based on size selected// The interface of label design area needs to be adjusted that in different circumstances there could be different number of **Line Groups**.
+Each stamp size has a maximum number of lines to be added for design //so the number of lines will be from 0 to MAX_FOR_SIZE, this will be controlled by the code of **Add new line**. Initially on label creation there are 0 lines. **Add new line** click produces an addition of new **Line Group**, which including text input to add line, font selector, check boxes for text style selection and removal 'x' icon to delete line from design. The new line will be placed into Creation Area and auto - adjusted in sizes. The line will be added to Creation Area only when the first character in line field entered. As soon as line content is empty, the appropriate text block will be removed from Label or Creation Area. The changes of text in the line or text style changes will be immediately shown in Label or Creation Area depending on where corresponding block is. There will be also a special restriction on the number of characters in the text line based on size selected// The interface of label design area needs to be adjusted that in different circumstances there could be different number of **Line Groups**.
-**Font selector** - select of font for each text line. Each font will be in separate .swf-file in "/fonts"-folder. Flash will load each font on demand, if it isn't already loaded. It will save load time for main part with unnecessary traffic.
+**Font selector** - select of font for each text line. Each font will be in separate .swf-file in "/fonts"-folder.
 **Text style selector** - check boxes for selecting of style (**bold** or/and //italic//) for each text line.
@@ Line 41: / Line 41: @@
 == Flash Area ==
-Flash Area is the container for Label Area. Flash Area size is the max size from the stamp sizes (please note that sizes are done in mms) 40 x 90 + paddings.
+Flash Area is the container for Label Area, Creation Area and Layers List. Creation Area located at the top of Flash Area, Label Area – in the middle, and Layers List – at the bottom of Flash Area. Label Area size is the max size from the stamp sizes (please note that sizes are done in mms) 40 x 90 + paddings. The height of Creation Area is restricted by minimal height of image block.
 == Label Area ==
-Label Area is used to store customization design. It is a bordered area inside Flash Area. It is important to keep aspect ratio of Label Area. Label Area could contain one image and several lines. One image or one line forms a **block**. Blocks could be resized and moved, without crossing (overlaying) borders of other blocks. Blocks could be moved and resized only in active state (//active state is set when user is clicked on block, block is bordered in active state with small resize icon. if the user clicked on block and move mouse the block will be moved. If the user is clicked on resize icon and move mouse, the block will be resized. There will be minimal sizes of font and minimal width and height, block couldn't be made less than such sizes. There will be also maximum size of image, image block couldn't be made more than MAX_IMAGE_WIDTH or MAX_IMAGE_HEIGHT. When user drag block, if two blocks will collide on each other, user wouldn't be able to drag block in collision direction. If user clicks on free space - none of blocks will be selected. //)
+Label Area is used to store customization design. It is a bordered area inside Flash Area. It is important to keep aspect ratio of Label Area. Label Area could contain one image and several lines. One image or one line forms a **block**. Blocks could be resized and moved, overlapping of another blocks is allowed. In order to make accessible fully overlapped blocks, Layers List is used. Blocks could be moved and resized only in active state (//active state is set when user is clicked on block, block is bordered in active state with small resize icon in the bottom right corner. if the user clicked on block and move mouse the block will be moved. If the user is clicked on resize icon and move mouse, the block will be resized. There will be minimal sizes of font and minimal width and height, block couldn't be made less than such sizes. There will be also maximum size of image, image block couldn't be made more than MAX_IMAGE_WIDTH or MAX_IMAGE_HEIGHT. If user clicks on free space - none of blocks will be selected. //)
 Any change in Label Area will result in changes of resulting jpeg image which will be 600 DPI resolution and sizes in pixels approximately equal to stamp sizes in mms.
+== Creation Area ==
+Creation Area is the container for anew created block. Each new block (image or text) appears in this Area at first. Than user could either drag this new block to Label Area or delete it. Dropping of the block to Label Area immediately refreshes resulting jpeg image and creates appropriate pictogram in Layers List. Until this area contains one block, another block could not be added, and warning message will be returned to user on his attempt to insert second block in Creation Area. Resizing of block in Creation Area is not allowed.
+\\ \\ //Each block belongs to its own layer. Each layer will have certain "level" (z-index) in the stack of layers. Last added block has the highest "level", first added - the lowest "level". Block with highest "level" overlaps all blocks with lowest "levels". So the content of this block displayed over the content of the blocks with lower 'level".//
+== Layers List ==
+Layers List is the scrollable right-to-left area, containing pictograms of added blocks. Textual blocks represented in the List as boxes with three first symbols of their text + "…". Image block represented as box with the "picture" icon. The main purpose of this List consists in changing of the "level" of block layer and making block selectable and draggable. Another purpose consists in deleting layers with blocks from design. Single click on the block pictogram selects corresponding block in design area. The border of such selected block gets the "active" state. After block selected, three special controls (buttons or boxes with text) for operations with block become enabled. Using this controls user could delete block from design, make block’s layer invisible or hide "active" border of block. Deleting of the block from the Layers List involves changes in main page appearance too – corresponding Line Group disappears from page layout. If user deletes image block than currently selected image name will be cleared. The pictograms are draggable objects. Pictograms dragging allow change the "level" of the layer of selected block by arranging pictograms in the Layers List area.
 \\ **Add new design** is added into every Label design area as in merkalt.no
@@ Line 60: / Line 70: @@
 \\ **Delete motif** - this button click will delete image block from Label Area.
-\\ **Add own image** - this button click will launch file selector to file upload //using SWFUpload package. If the file is in unsupported format or not uploaded - there will be a notification message to user, nothing will happen with Label Area. If file is ok,  image will be added/replaced (current image removed, the new will be set on its place) to the Label Area. Image will be auto resampled on upload case of image sizes is more then available free space, keeping aspect ratio. The button click also hides **motifs selector area**//
+\\ **Add own image** - this button click will launch file selector to file upload //using SWFUpload package. If the file is in unsupported format or not uploaded - there will be a notification message to user, nothing will happen with Label or Creation Area. If file is ok,  image will be added / replaced (current image removed, the new will be set on its place) to the Label or Creation Area. Image will be auto resampled on upload case of image sizes is more then maximal allowed image sizes, keeping aspect ratio. The button click also hides **motifs selector area**//
-The stamps comes only red, green and black. No need for "advanced" color selection. All text and image on one stamp must be same color.
+\\ //As soon as image selected from motifs or uploaded, it immediately appears in Creation Area. In the case of image block already exist in Label area, the content of this block will be replaced with new selected image without changing the dimensions of the block.//
-A stamp can only print or not print on a certain area. No grays that is the problem with color conversion. The most simple is that we will define color range for white and all other will be counted as black.
-\\ //As soon as image selected from motifs or uploaded, it immediately appears in Label Area. If no image were defined yet the **largest free space** on Label area will be selected for image block placing and the block will be placed at the **left side** of selected free space area. In the case of image block already exist in Label area, the content of this block will be replaced with new selected image.//
+\\ **COLOR SELECTOR** //Change of color will result changes of all texts and image colors.//
-\\ **COLOUR SELECTOR** //Change of colour will result changes of all texts colours.//
+The stamps comes only red, blue and black. No need for "advanced" color selection. All text and image on one stamp must be same color.
+A stamp can only print or not print on a certain area. No grays that is the problem with color conversion. The most simple is that we will define color range for white and all other will be counted as black.
 \\ **LABEL BORDER SELECTOR** - group of radio buttons which allow to define if label stamp has border or not.
@@ Line 85: / Line 95: @@
 === Other changes ===
-//Email notification should include new functionality like size select, payment option etc. . If the user selected Paypal payment he proceeds to Paypal, otherwise via standard route to the 'thank you' form. The new site will be based on template system.//
+//Email notification should include new functionality like size select, payment option etc. If the user selected Paypal payment he proceeds to Paypal, otherwise via standard route to the 'thank you' form. The new site will be based on template system.
+\\ If design includes overlapped blocks, this should be noted in order notification e-mail (either in subject or in e-mail body) for the possibility of checking the quality of user design.//
 === Questions ===
@@ Line 92: / Line 103: @@
 \\ No. But as this is the business edition on the site it would be nice to have on Billing address and one Shipping address. Automaticly filling out shipping if it is the same as Billing.
-=== Additional changes to label designer functionality ===
-  - Inter-blocks collisions check will be eliminated - one block could partially or fully overlap another. Each block will belong to it's own layer. Each layer will have certain "level" in the stack of layers. Last added block will has the highest "level", first added - the lowest "level". Block with highest "level" will overlap all blocks with lowest "levels". So the content of this block will be displayed over the content of the blocks, the "level" of which is lower.
-  - In order to make accessible fully overlapped blocks, list of existing blocks will be added. The "list" of blocks (those which was placed into design) will be added **below** design area. It will be scrollable right-to-left area, containing pictograms of added blocks. Textual blocks will be represented in the "list" as boxes with several first symbols of their text. Image block - with thumbnail of image or some "picture" icon. The purpose of this "list" - changing the "level" of block and making block selectable and draggable. Another purpose - deleting blocks from design. Single click on the block pictogram will select corresponding block in design area. After block selected, special //sign//, say "crossed box", will appear near the block's pictogram. Clicking on this special //sign// will delete block from design. Deleting block from the "blocks list" must involve changes in main page appearance too. The pictograms will be realized as draggable objects. Dragging will allow to change the "level" of the layer of selected block by arranging pictograms in the "blocks list" area.
-  - One more special area for just inserted block will be added *above* design area. Each new block (image or text) will appear in this area at first. Than user could either drag this new block to design or delete it. Until this area contains one block, another block could not be added, and warning message will be returned to user on his attempt to do this.
-  - If design includes overlapped blocks, this will be noted in order notification e-mail (either in subject or in e-mail body) for the possibility of checking the quality of user design.
-** Questions **
-  * How much symbols exactly will represent textual block in the "blocks list"? Three is enough?
-\\ I think three would do it but ad "..." at the end.
-\\ //Ok.//
-  * May be it also take a sense to add some "deselect block" //sign// near block's pictogram. It could be useful for hiding of an "active" border of currently selected block?
-\\ Not 100 % sure if I understand.
-\\ // When blocks will overlap, borders of block would overlap the content of other blocks. Suggested option could be used in order to hide the border (or may be turn borders invisible at all) of currently active block on preview. //
-  * Should new added block be represented in "blocks list" right after adding or only after it was dragged in design area from the area above?
-\\ Maybe only after dragged into the preview area?
-\\ //Ok.//