StackCenter 2 - Now in Public Beta!

Question

Visit now: http://stackcenter.quickmediasolutions.com/beta/

Feedback is appreciated!

About

StackCenter 2 has been brewing for quite some time now. Since the global inbox was introduced, the original StackCenter was rendered mostly useless and the need for a replacement was born.

And now, I present StackCenter 2! Its goal is to be a dashboard for everything StackExchange such as rep. graphs, images, or whatever! Currently, there are 3 widgets and it is now possible to write your own - just follow the link on your dashboard's home page.

After registering, simply click on the 'add widgets...' link to get started. Some things might not work quite right. (This is in beta after all.)

Any feedback you can provide is welcome!

License

Closed source at this point.

Platform

StackCenter should run fine on any web browser that has JavaScript enabled. (StackCenter 2 uses a lot of JavaScript.)

Contact

Email: [email protected]

Code

PHP (using the CakePHP framework), JavaScript, and of course, HTML

Answer 1

Introduction to writing widgets:

Writing a widget is very simple and I'll begin by describing a simple example below.

1. Start by logging in to your account or registering if you don't have one.
2. Click the link at the bottom of your page that says "To design a widget, click here."
3. Enter the details of your widget, such as its name and title. For our example we'll use:
   Name: helloworld
   Title: Hello World Widget
   Description: The Hello World widget demonstrates the process of writing a widget for StackCenter.

4. Now for the HTML and JS code... we'll start by creating a small DIV in the widget like this:

   <div id='helloworld_main_div'><i>Loading...</i></div>
   

5. The next step is to write the JS code that will be run when the widget is initialized. The code for our example will change the text of the DIV to 'Hello World!'. We will be using jQuery for this.

   // Set the text of the DIV
   $('#helloworld_main_div').html('Hello World!');
   

6. And that's it! Click the 'Submit Widget' button to submit your widget and you will be able to add it to your home page.

In a later tutorial, I will explain some of the wf_* functions that your code can call to interact with the environment.

Answer 2

Using the wf_* functions in your code:

Although the first example described the basic process of creating a widget and what is involved, I didn't go into any detail on how the widgets can interact with the environment.

When your code is invoked, it is provided with a special variable 'key' that you will need to pass to all of the functions that you will use.

In order to make this as clear as possible, I'll create another example - this one that displays the user's global flair image given their GUID (which can easily be retrieved):

1. Create a new widget and use the HTML code from the previous tutorial.

2. Start with the following JS code:

   // Remember that this section of code is passed a parameter
   // 'key' that we will need for the wf_* functions.
   
   // Get the user's GUID
   var user_guid = wf_getUserGUID(key);
   
   // Now construct the URL of the image we will display in the widget
   var image_url =
       'http://stackimage.quickmediasolutions.com/global.php?guid='
       + user_guid;
   
   // Set the contents of the DIV to the image
   $('#' + wf_getRootDiv(key)).html('<img src="' + image_url + '" />');
   

3. Now try it out - you will see your global flair appear in the widget.

That was pretty easy - once again, notice that each of the wf_* functions require your 'key' in order to work. The wf_getUserGUID function returns the association ID of the user. (This is derived from the information the user supplies when registering.) The wf_getRootDiv function returns the id of the widget's DIV. That is the DIV where your widget's content should go.

In a later tutorial, I will describe how the settings dialog and code work as well as the wf_readSetting and wf_writeSetting functions. Also, I will explain the wf_makeAPIRequest function.

Answer 3

Bug Report

---

When I click on the options click change the widgets settings I have to resize the box so I can see the optons.

Things to add

---

With the login have a glogal login so that you can go on Stack Image and you don't have to type your ID Numbers.