[sip-comm-dev] The new Conference UI


#1

Dear developers !

In the past few days I was working on creating a user interface for our new
call conferencing functionality.

First, I looked at our existing Call Dialog Box and tried to see how it
looks like when we add more participants in to it.
Check the following link to see what I got.
http://img525.imageshack.us/img525/456/callold.jpg

We thought, that component orientation needs to be changed in order to
create a much beautiful conference UI.
Also it had to facilitate the newly created sound level indicators as well.
So I came up with a new design for our conference UI.
Check the following link to see the new UI.
http://img525.imageshack.us/img525/990/callnew.jpg

I reused most of the existing code in creating the new UI.
You can check the source code from here.
https://sip-communicator.dev.java.net/svn/sip-communicator/branches/gsoc09/sli

I'm waiting for your valuable suggestions and comments for improving the UI
much more.

Cheers
Dilshan


#2

Hi Dilshan,

Sorry for the late reply. I've looked at the screenshots as you send them, but wanted to try it from source before writing to you.

Dear developers !

In the past few days I was working on creating a user interface for our new call conferencing functionality.

First, I looked at our existing Call Dialog Box and tried to see how it looks like when we add more participants in to it.
Check the following link to see what I got.
http://img525.imageshack.us/img525/456/callold.jpg

Agree, it's not looking good at all.

We thought, that component orientation needs to be changed in order to create a much beautiful conference UI.
Also it had to facilitate the newly created sound level indicators as well.
So I came up with a new design for our conference UI.
Check the following link to see the new UI.
http://img525.imageshack.us/img525/990/callnew.jpg

You've done a very good job here! I've tried it myself and it looks great. I had some remarks about white panels, but they're looking differently now, may be you have changed something or it's just the mac version (see attached image)?

···

On Jul 28, 2009, at 1:39 PM, Dilshan Kanchana wrote:


#3

Hi!

Sorry for the late reply. I've looked at the screenshots as you send them,

but wanted to try it from source before writing to you.

I'm glad to have your reply Yana. Thank you so much.[?]

We thought, that component orientation needs to be changed in order to
create a much beautiful conference UI.
Also it had to facilitate the newly created sound level indicators as
well.
So I came up with a new design for our conference UI.
Check the following link to see the new UI.
http://img525.imageshack.us/img525/990/callnew.jpg

You've done a very good job here! I've tried it myself and it looks great.
I had some remarks about white panels, but they're looking differently now,
may be you have changed something or it's just the mac version (see attached
image)?

Ya.. I have changed them a bit. Now the white panels have rounded corners..
I hope the new look is much better than the earlier one.

I have some more questions, hope you don't mind. I saw that you've set the
ConferencePanel to be used by default. This is just for test purposes,
right?

Yes. it is. As the conference itself has not been implemented yet, I didn't
had a way to dynamically choose between the CallPanel and the
ConferencePanel. So, for the moment I kept the ConferecePanel as default.

Something that bothers me is the sound indicator size. I like the new look

very much. However when the window is enlarged the indicator stays the same
in the middle of the panel and the panel looks quite empty. What we could do
is add some more sound level bars each time the panel is enlarged and remove
them when it's diminished. This way we could layout the image in the left
and the sound level indicator would fill the space that lefts.

Mm... This needs some working because currently the NO_OF_SOUND_LEVELS is
kept as a constant. I'll work on it. Can you suggest me the proper
LayoutManager that I should use in order to facilitate this adding and
removing functionality when the panel size changes?
As a much easier alternate approach what if we just change the width of a
sound level bar when the panel is resized?

We should also think of a way to differentiate the local participant with a

particular title color or border. We could also add "me" in the title. WDYT?

This is easy. I'll do it right now.

Cheers...
Dilshan.


#4

Hi Dilshan,

Hi!

Sorry for the late reply. I've looked at the screenshots as you send them, but wanted to try it from source before writing to you.

I'm glad to have your reply Yana. Thank you so much.<330.png>

:slight_smile: my pleasure

We thought, that component orientation needs to be changed in order to create a much beautiful conference UI.
Also it had to facilitate the newly created sound level indicators as well.
So I came up with a new design for our conference UI.
Check the following link to see the new UI.
http://img525.imageshack.us/img525/990/callnew.jpg

You've done a very good job here! I've tried it myself and it looks great. I had some remarks about white panels, but they're looking differently now, may be you have changed something or it's just the mac version (see attached image)?

Ya.. I have changed them a bit. Now the white panels have rounded corners.. I hope the new look is much better than the earlier one.

It is.

I have some more questions, hope you don't mind. I saw that you've set the ConferencePanel to be used by default. This is just for test purposes, right?

Yes. it is. As the conference itself has not been implemented yet, I didn't had a way to dynamically choose between the CallPanel and the ConferencePanel. So, for the moment I kept the ConferecePanel as default.

Ok.

Something that bothers me is the sound indicator size. I like the new look very much. However when the window is enlarged the indicator stays the same in the middle of the panel and the panel looks quite empty. What we could do is add some more sound level bars each time the panel is enlarged and remove them when it's diminished. This way we could layout the image in the left and the sound level indicator would fill the space that lefts.

Mm... This needs some working because currently the NO_OF_SOUND_LEVELS is kept as a constant. I'll work on it. Can you suggest me the proper LayoutManager that I should use in order to facilitate this adding and removing functionality when the panel size changes?
As a much easier alternate approach what if we just change the width of a sound level bar when the panel is resized?

I had a quick look at your code and I think that one way to resolve the issue is to add a ComponentListener to the ParticipantSoundLevelIndicator. On componentResized you can add/remove bars from the panel. Then you can use a BorderLayout in the ConferenceParticipantPanel and add the sound indicator in the Center area. I'm not sure if this would work smoothly, it's just an idea to try.

Otherwise, when you said that the number of sound levels is kept as a constant, I verified and noticed that you set the NO_OF_SOUND_LEVELS to 6 in the SoundLevelCalculator (in the media package) and then you presume in the gui that the number of sound levels is 6, which is not very accurate. Instead you should fix a range in the SoundLevelCalculator (from MIN to MAX) and note that range in the javadoc of all the listeners on the way to the gui. In the gui then you can keep whatever number of sound level bars you want (some multiple of max for example) and just calculate how the level you get from the listener / MAX should be represented in your gui number of bars.

Hope this helps!
Yana

···

On Aug 4, 2009, at 1:02 PM, Dilshan Kanchana wrote:

We should also think of a way to differentiate the local participant with a particular title color or border. We could also add "me" in the title. WDYT?

This is easy. I'll do it right now.

Cheers...
Dilshan.

---------------------------------------------------------------------
To unsubscribe, e-mail: dev-unsubscribe@sip-communicator.dev.java.net
For additional commands, e-mail: dev-help@sip-communicator.dev.java.net