Graphic sb
-
Upload
xscconan -
Category
Technology
-
view
330 -
download
3
description
Transcript of Graphic sb
![Page 1: Graphic sb](https://reader034.fdocuments.in/reader034/viewer/2022042509/559b896d1a28ab62158b4695/html5/thumbnails/1.jpg)
Graphic Voice Page Control Tool
Michael
![Page 2: Graphic sb](https://reader034.fdocuments.in/reader034/viewer/2022042509/559b896d1a28ab62158b4695/html5/thumbnails/2.jpg)
In order to get better user experience, we suggest the graphic tool for solve those requirements. It has easily operation in UI design, more powerfulexpansibility. We can get a directly view of a voice page and easily for download selected voice pages’ construct Excel, XML, ER Diagram
Why graphic tool?
Requirements
1. Ability to download a searchable/read-only version of Voice Site (Ex: Excel, XML, ER Diagram Hendy Putra etc)2. Show parent pages for a page3. Error Pop-Up if trying to delete a page that other pages point to
![Page 3: Graphic sb](https://reader034.fdocuments.in/reader034/viewer/2022042509/559b896d1a28ab62158b4695/html5/thumbnails/3.jpg)
Implementation
Using SVG for create image Using AJAX for data communication by SB API.
Database Changes
targetPageId destinationPageId domId node1 node2
0ac53296-02-133afe940d6-9af5e7c2-b95
0ac53296-02-133afe940d6-9af5e7c2-b95
pageTypeSelection
M595.4096767535219,668.71
M695.4096767535219,668.71
Add an new table for store the relation ship informationand the node of line’s position.
For compatible old voice page, API will be execute in fist time system initialization, data will be inserted into the table, data is parsed from the voice xml.And the table will be updated, when relation changed
![Page 4: Graphic sb](https://reader034.fdocuments.in/reader034/viewer/2022042509/559b896d1a28ab62158b4695/html5/thumbnails/4.jpg)
Mockup Work Flow for better understanding what it is
Click for choice voice page
Click for show diagram
![Page 5: Graphic sb](https://reader034.fdocuments.in/reader034/viewer/2022042509/559b896d1a28ab62158b4695/html5/thumbnails/5.jpg)
It will spend a bit time for initialize system and loading js or image files in frist time
![Page 6: Graphic sb](https://reader034.fdocuments.in/reader034/viewer/2022042509/559b896d1a28ab62158b4695/html5/thumbnails/6.jpg)
Drag-ableDrag-able
Double click for editDrag-able
Home page and selected page
End page
Normal page Selected page
All of relation with selected voice pages will display here with links
![Page 7: Graphic sb](https://reader034.fdocuments.in/reader034/viewer/2022042509/559b896d1a28ab62158b4695/html5/thumbnails/7.jpg)
![Page 8: Graphic sb](https://reader034.fdocuments.in/reader034/viewer/2022042509/559b896d1a28ab62158b4695/html5/thumbnails/8.jpg)
Delete
![Page 9: Graphic sb](https://reader034.fdocuments.in/reader034/viewer/2022042509/559b896d1a28ab62158b4695/html5/thumbnails/9.jpg)
Maybe we can do following expandable features in future
![Page 10: Graphic sb](https://reader034.fdocuments.in/reader034/viewer/2022042509/559b896d1a28ab62158b4695/html5/thumbnails/10.jpg)
Tool panel, we can drag a page item for create
buttons for print page and save as image or xml file
Minimize tool panelhide tool panel
Node for change the line’s position
Home page
End the call
Page comment will popup when mouse over
![Page 11: Graphic sb](https://reader034.fdocuments.in/reader034/viewer/2022042509/559b896d1a28ab62158b4695/html5/thumbnails/11.jpg)
Check out phone number and assign an new onefloat
![Page 12: Graphic sb](https://reader034.fdocuments.in/reader034/viewer/2022042509/559b896d1a28ab62158b4695/html5/thumbnails/12.jpg)
![Page 13: Graphic sb](https://reader034.fdocuments.in/reader034/viewer/2022042509/559b896d1a28ab62158b4695/html5/thumbnails/13.jpg)
![Page 14: Graphic sb](https://reader034.fdocuments.in/reader034/viewer/2022042509/559b896d1a28ab62158b4695/html5/thumbnails/14.jpg)
![Page 15: Graphic sb](https://reader034.fdocuments.in/reader034/viewer/2022042509/559b896d1a28ab62158b4695/html5/thumbnails/15.jpg)
![Page 16: Graphic sb](https://reader034.fdocuments.in/reader034/viewer/2022042509/559b896d1a28ab62158b4695/html5/thumbnails/16.jpg)
float
![Page 17: Graphic sb](https://reader034.fdocuments.in/reader034/viewer/2022042509/559b896d1a28ab62158b4695/html5/thumbnails/17.jpg)
float
![Page 18: Graphic sb](https://reader034.fdocuments.in/reader034/viewer/2022042509/559b896d1a28ab62158b4695/html5/thumbnails/18.jpg)
![Page 19: Graphic sb](https://reader034.fdocuments.in/reader034/viewer/2022042509/559b896d1a28ab62158b4695/html5/thumbnails/19.jpg)
Click for select a voice page item
Click the button for edit goto relation
![Page 20: Graphic sb](https://reader034.fdocuments.in/reader034/viewer/2022042509/559b896d1a28ab62158b4695/html5/thumbnails/20.jpg)
Highlight for exist relationClick button for add relation with destination object
![Page 21: Graphic sb](https://reader034.fdocuments.in/reader034/viewer/2022042509/559b896d1a28ab62158b4695/html5/thumbnails/21.jpg)
Drag the arrows for create relation with the destination voice page
![Page 22: Graphic sb](https://reader034.fdocuments.in/reader034/viewer/2022042509/559b896d1a28ab62158b4695/html5/thumbnails/22.jpg)
Click button for add relation ship with destination object
Destination page will be selected in drop down box when clicked
![Page 23: Graphic sb](https://reader034.fdocuments.in/reader034/viewer/2022042509/559b896d1a28ab62158b4695/html5/thumbnails/23.jpg)
Double click the voice page item
![Page 24: Graphic sb](https://reader034.fdocuments.in/reader034/viewer/2022042509/559b896d1a28ab62158b4695/html5/thumbnails/24.jpg)
Click for change typeChange page nameChange page number
Change home pageCopy voice pageDelete voice pageShow detail of voice page
![Page 25: Graphic sb](https://reader034.fdocuments.in/reader034/viewer/2022042509/559b896d1a28ab62158b4695/html5/thumbnails/25.jpg)