There are two main user interface (GUI) items: contact list and communication room. These can be implemented in ActionScript using Flex.
A contact list represents a list of users with their presence information. Each item in the list has four parts: the name, the short message, status icon and profile picture – the status icon on the left, profile picture on the right, and name and short message vertically in the center. If the short message is not available for a contact item, the name is vertically centered. The first item in the list is your own data, and is editable. Clicking on your own status icon allows you to change your presence status. Similarly clicking on your own name, short message or profile picture allows you to change that item. Changing the name of a contact item, causes a local alias for that contact, and this alias name is hidden from that contact. If you have any new incoming friend request or any other notification, those are displayed after the first item. The rest of the items in the list can be grouped with one level of hierarchy.
Clicking or double clicking on the contact list item dispatches some events, which can be captured and acted upon by the application. The last item in the list is used for adding a new friend. The status icon is replaced by a add friend icon, and the user can type the email or identifier of the friend in the name. Once added, the contact item is displayed as pending friend, until the target friend accepts your request. A new last item is created to allow adding more friends to your contact list.
The items in the list are displayed with alternating background color. The presence status icon is displayed with green, grey, yellow or red color corresponding to online, offline, away or busy status, respectively. The status icon also shows the media capabilities of the contact. A camera icon indicates capability to do video call. A phone icon indicates that the contact is currently busy in a call. The pencil icon indicates that the contact is typing a text message. When you click on the status icon of the other contact, it displays an inline menu or button bar, which contains option to interact with the user or delete him from your list.
The profile picture can be a static snapshot taken from the camera or uploaded and edited from the PC of the contact. Alternatively, a video presence option allows the user to configure his camera to periodically capture snapshot and update the profile picture.
If the focus is on the contact list and the user starts typing something, then the filter text input box appears which allows the user to filter or search the contact list. The filter is applied in real-time as the user is typing text in the input box.
The contact list displays a scroll bar if it cannot fit in the displayable area. If the number of contacts is huge, then pagination mode is automatically enabled. In this mode, the client does not get the full contact list from the server, but gets a single page as needed. By default the online contacts are displayed first, followed by away, then busy and finally offline. You can sort the list based on other criteria such as name or presence of profile picture by clicking on the top row item for that criteria. A change in the presence status could cause a contact item to move its position in the list. The user interface displays this using animation similar to Adium.
There are three layouts for the contact list: the vertical list as described above, the history view and tile view. In history view, the vertical list is sorted by the most recently communicated contact first. In the tile view, only the contact’s profile picture appears along with a border whose color indicates its presence status. If the profile picture is missing, then a default avatar is chosen for the contact from a pre-defined list of images.
Before the contact list is created or obtained, the user interface may display a login form, which allows the user to authenticate or register a new account. If the client is disconnected from the server or is reattempting connection, appropriate user interface may be displayed to indicate this state.
The communicator represents the interaction with one or more other people. The user interface combines the traditional instant messaging, group chat and video conferencing scenarios. This is a tabbed view where each tab indicates a single chat or conference session. Similar to Adium, it will allow splitting a chat from existing tabs or merging a chat into an existing tab. The tabs will be displayed at the bottom, so that the user will see the chat subject immediately above his text input box. By default a one-to-one chat displays the other user’s name in the tab. User can click on the tab name to change it locally, or if he is moderator, then globally.
The instant messaging user interface will be similar to traditional chat interface. Instead of displaying a time for each message, it will typically display the time of first message in a chat, and display time if no more message is received in the last minute. This avoids having to display the times for every message during heavy chat conversations. Each user’s name will have a slightly different color shade to easily differentiate the user in a multi-party chat. The chat view will allow copy-pasting the entire or part of the content. A link present in the chat view is automatically clickable. Additionally, you can send special commands in curly-braces, which are interpreted by the system to perform special actions. Examples of such actions are described later, and the system will allow attaching new actions to new commands. The emoticons will automatically be interpreted and displayed by the chat view. You can change the font-size or color of the chat view locally. The input text box allows multi-line input as well as special tags such as sub set of HTML. When a one-to-one chat is started, the system loads the last few chat history messages for your reference.
All chat communications are moderated. By default the initiator is the moderator in one-to-one chat. The initiator can promote an existing member to moderator. The initiator can mark the chat as public in which case all new members become moderators. A moderator can remove or block any other regular member in the chat. A moderator can add a new member by dragging a contact from the contact list to this view or by dragging a contact from another communicator to this one. Additionally special commands in curly braces from the moderator can invite a new user in the chat. The initiator can mark the chat as permanent in which case the chat context continues even when all the participants have left the conversation. The permanent chat context can be bookmarked and exported to web pages.
A multi-party chat automatically enabled the participant list view, which indicates all the members in the chat. The status icon of a member turns into pencil icon if the member is typing a message. The status icon also shows the current media of the member in the chat – camera indicates video call, microphone indicates audio call and default is chat only. A video call implicitly has audio and text chat, and an audio call implicitly has text chat. The participant list view also marks the moderators differently. You can minimize or hide the participant list view. A two-part chat does not show the participant list view. If you mouse over the member name in the chat history view, you can see a drop down menu, which allows you to know more about that member, and if you are the moderator, then control the member participation.
The text chat and participant list views are two examples of views in the communicator user interface. Additionally each user with video enabled is displayed in a video view. A shared file or media or application in the chat is also displayed as a view. All the views are treated equally, can be resized, or reconfigured to different layout. For example, the default tile view will place all the views in the tile mode. If text chat is enabled, then that could become the big view whereas others could occupy the right side of the remaining space. The participant list view can be docked to the left side bar of the communicator user interface. Double clicking on a view changes the layout of the user interface, e.g., changing among tile, big, maximized view. In the maximized view only a single view occupies the full display area, e.g., when a shared video is being played in the chat. A moderator can lock the user interface, in which case only a moderator can change the layout for all users. By default the user interface is unlocked, where anyone can change the layout locally for his display.
The communicator has plugin architecture where a new application can be defined and used in the user interface over the existing chat. This allows adding new applications such as file sharing, history storage, video chat, call recording, screen sharing, multi-party games, shared text editing, shared video watching, tagging your conversation, exporting your chat as webpage report or video file, adding audibles or video short clips, playing youtube video, sharing slideshare view, shared playlist viewing, and so on. The communicator system will expose APIs to interact with existing views such as chat view, as well as allow adding new views in the user interface.
The real-time or synchronous communication is one part of the communicator room. The other part is the offline or asynchronous communication. As mentioned before, a communicator view can be permanent in which case it exists even when no other members are active. When you signup, you automatically get a Inbox communicator which has a playlist of all your received video and text messages. Anyone can leave a message in your Inbox communicator but only you can view or delete them. You can create additional permanent communicators similar to email folders. You can also create additional permanent communicators and mark them public, so that others can view those rooms. This allows you to create your public rooms where you can put pictures or videos and have you friends visit them. Such offline communicator rooms typically store a playlist of media. For example, a play list of all the video comments, replies and threads, chat recording of your conversation.
Recent comments
9 years 2 weeks ago
8 years 38 weeks ago
9 years 8 weeks ago
9 years 8 weeks ago
9 years 10 weeks ago
9 years 10 weeks ago
9 years 18 weeks ago
9 years 22 weeks ago
9 years 17 weeks ago
9 years 31 weeks ago