HTML/JavaScript interface

Please post requests related to the sipsorcery library to the GitHub repo https://github.com/sipsorcery/sipsorcery/issues.
Locked
Jesdisciple
Posts: 4
Joined: Thu Jul 01, 2010 10:11 am

HTML/JavaScript interface

Post by Jesdisciple » Thu Jul 01, 2010 11:38 am

Hi all. I have been looking into connecting Skype with Google Voice, and SIP Sorcery is recommended by this very useful guide. As I'm running Ubuntu Linux a Google search turned up this thread, which leads me to the purpose of this post.

In the thread at the previous link, Aaron noted that he would be happy to have someone design a browser-native interface for the switchboard. I am a hobbyist Web developer, and, although I have many projects I would like to complete, this might interest me enough to be undertaken. Unfortunately Moonlight still can't run the current interface, so I wonder whether any documentation (and screenshots) is available for it from which I could derive an HTML/JS clone?

Best wishes,
Chris

Aaron
Site Admin
Posts: 4652
Joined: Thu Jul 12, 2007 12:13 am

Re: HTML/JavaScript interface

Post by Aaron » Thu Jul 01, 2010 11:58 am

Hi Chris,

I plan to post a mini user guide on the sipsorcery.com site in the next week or so which will include screenshots from the Silverlight client.

Basically there are 3 main functions a client needs to perform and in the Silverligh client's case those functions translate directly to 3 different screens:

1. Manage SIP accounts and monitor their respective bindings,
2. Manage SIP Providers and monitor their respective registrations,
3. Manage dialplans.

Again in the Silvelright client's case the functions on each screen are handled by distinct areas:

1. SIP Accounts:
- The top half of the screen is a table that lists all the user's SIP accounts. Clicking on a SIP account displays its details and allows it to be edited. Clicking an Add button displays the same details screen but with blank values ready for a new account to be created,
- The bottom half of the screen is a readonly table that lists all the user's current SIP account bindings.

2. SIP Providers:
- The top half of the screen lists all the user's SIP Providers. Clicking on a SIP provider displays its details and allows it to be edited. Clicking an Add button displays the same details screen but with blank values ready for a new account to be created,
- The bottom half of the screen is a readonly table that lists all the users current SIP provider registrations.

3. Dial Plans:
- The top half of the sceen lists all the user's dial plans,
- The bottom half of the screen displays the details for a specific dial plan when one is selected by the user with the main portion being devoted to the actual Ruby dial plan script which can be quite lengthy,
- Clicking the Add button displays the same details fields but with blank values ready for a new dial plan to be created.

There are a few other bits and pieces such as a monitoring screen and an account managment page where things like password and email address can be updated but they are secondary relative to the 3 screens listed above.

Regards,
Aaron

Jesdisciple
Posts: 4
Joined: Thu Jul 01, 2010 10:11 am

Re: HTML/JavaScript interface

Post by Jesdisciple » Thu Jul 01, 2010 12:48 pm

Alright, thanks. Interfacing with the server probably isn't necessary for any of the UI, but I will also eventually need to have a reference for how to call the server-side scripts which actually do everything. I'll resume looking into this tomorrow or late tonight (CST).

Jesdisciple
Posts: 4
Joined: Thu Jul 01, 2010 10:11 am

Re: HTML/JavaScript interface

Post by Jesdisciple » Fri Jul 02, 2010 3:55 am

I didn't consider the information that I need to get from the server when I made my previous statement, but I could use dummy info in order to put off designing a server-side script to generate the HTML. This would be an especially good idea if, as I presume, you are using ASP/C#, because I've never worked with ASP (although I did take a college XNA/C# game design class recently).

That would also help fill in some details for your above description, as I can't yet envision exactly what the interface needs to contain - partly because I don't know a lot of the jargon for the VoIP field. Specifically in #1 and 2, what type(s) of tables you intend is unclear, as some are really just simple lists that were prevented from stretching waaaay down the screen while others actually display uniform details for a set of items (tabular data). In the second case, how many details are shown and what they are called is not obvious to me, and I have similar problems with #3.
Last edited by Jesdisciple on Sat Jul 03, 2010 6:49 pm, edited 1 time in total.

Jesdisciple
Posts: 4
Joined: Thu Jul 01, 2010 10:11 am

Re: HTML/JavaScript interface

Post by Jesdisciple » Sat Jul 03, 2010 6:46 pm

What's the status on this? Are we waiting for the user guide, calling off the new interface, other...? If you are interested in my help, it's best to let me get started soon as my interest can wane easily if I don't indulge it. On the other hand, I understand that this may be important to you but not as much as other things; in that case, I just want to know. Regardless of how long it is until I can start, I do want to know when things are set up as my interest can sometimes be revived.

AviMarcus
Posts: 153
Joined: Sun May 16, 2010 7:07 am

Re: HTML/JavaScript interface

Post by AviMarcus » Sat Jul 03, 2010 7:21 pm

Ah, so, can this basically be done with the jQuery code that Aaron posted today on the blog?

http://sipsorcery.wordpress.com/2010/07 ... th-jquery/

I'm trying to use that to export the CDR, but due to my lack of experience, and it well, not doing anything when I open it, I don't know how I'm supposed to modify it.
Help document SIP Sorcery on the wiki!
If you solved an issue you were having or figured out how to do something, please share on the wiki! It will save everyone lots of time and frustration.

Aaron
Site Admin
Posts: 4652
Joined: Thu Jul 12, 2007 12:13 am

Re: HTML/JavaScript interface

Post by Aaron » Sun Jul 04, 2010 8:23 am

Here are the Silveright screenshots for the 3 core screens. The HTML tables would need to duplicate those. As far as getting the information to populate the HTML tables thats where the provisioning web service comes in. There are any number of ways to consume that service a completely client side approach is to use javascript a simple example of which is on the blog jquery example.
sipaccounts.png
sipaccounts.png (47.53 KiB) Viewed 4133 times
sipproviders.png
sipproviders.png (45.25 KiB) Viewed 4133 times
dialplans.png
dialplans.png (45.34 KiB) Viewed 4133 times

Locked