Core API Calls at a Glance

This page provides a quick summary of the core API calls used when implementing PureWeb.

For this summary, C++ was used for the service-side snippets, and HTML5 for the client-side snippets.

On the Service

Views

The majority of the pixel streaming work is done using the IRenderedView interface.
class MyView : public CSI::PureWeb::Server::IRenderedView
{
public:
    MyView();
When PureWeb is ready to acquire a new image from this view. You must write to either RenderTarget::Bitmap or RenderTarget::ContentInfo.
    virtual void RenderView(CSI::PureWeb::Server::RenderTarget target);
Called when a client changes the view size. This can happen during browser resize, or when a mobile device is rotated.
    virtual void SetClientSize(CSI::PureWeb::Size clientSize);
Returns the size of this view. This is also used to calculate the size of the buffer provided by RenderView. If this size and the client size are different, PureWeb will scale appropriately, minimizing bandwidth where possible.
    virtual CSI::PureWeb::Size GetActualSize();
Pass a mouse event from the client view to the service application.
    virtual void PostMouseEvent(const CSI::PureWeb::Ui::PureWebMouseEventArgs& mouseEvent);
Pass a key event from the client view to the service application.
    virtual void PostKeyEvent(const CSI::PureWeb::Ui::PureWebKeyboardEventArgs& keyEvent);
Views are identified by a string that must match a similar implementation on the client.
    CSI::String ViewName;
 
};

The name is registered to a service instance of the view.

ViewName = "MainView";
StateManager()::Instance()->ViewManager.RegisterView(ViewName, this);
Notify PureWeb that your image has changed and clients should be updated.
StateManager()::Instance()->ViewManager.RenderViewDeferred(ViewName);

 

Application State

Writing a single value; type is inferred.

StateManager::Instance()->XmlStateManager().SetValueAs("/Pi", CSI::Math::PI());
Making atomic changes; type is explicit.
{
    TypelessStateLock lock(StateManager::Instance()->LockAppState());

    lock.SetValueAs<double>("/A/B/C", 3.14159);
    lock.SetValue("/D", "Foo");
}
Notify me when a leaf changes.
CSI::String path = "/A";
StateManager::Instance()->XmlStateManager()
    .AddValueChangedHandler(path, Bind(this, &MyApp::CChanged));
Notify me when any child changes.
CSI::String path = "/A/B/C";
StateManager::Instance()->XmlStateManager()
    .AddChildChangedHandler(path, Bind(this, &MyApp::ChildOfAChanged));

Example handler.
void MyApp::ChildOfAChanged(ValueChangedEventArgs args)
{
    ~ Do something useful ~
}

 

Commands

Register a command to be handled on the UI thread.

StateManager::Instance()->CommandManager()
    .AddUiHandler("ClearScreen", Bind(this, &MyApp::OnExecuteClearScreen));

Register a command to be handled on another thread.

StateManager::Instance()->CommandManager()
    .AddIOHandler("LoadData", Bind(this, &MyApp::OnLoadData));

What a command handler looks like:

  • sessionId: the session that issued the command
  • typeless: the payload of the command
  • response: a payload to return to the client
void MyApp::OnLoadData(CSI::Guid sessionId, CSI::Typeless typeless, CSI::Typeless& response)
{
    ~ Do something useful ~
}

On the Client

Connecting

Connecting is done using standard web protocols (HTTP or WebSockets), with or without SSL.

var url = "https://softlayer.cloud.calgaryscientific.com/pureweb/app?name=RMS&client=html5";
pureweb.framework.getClient().connect(uri, {login: 'admin', password: 'admin'});

 

Views

Provide a div id, and the view name. PureWeb handles everything else.

var scribbleView = new pureweb.client.View({id: 'mainView', viewName: 'MainView'});

Choose an encoding (H.264 | JPEG | PNG | TILING), or use the defaults.

var encoderFormatInteractive = new pureweb.client.EncoderFormat('video/h264', 50, {});
var encoderFormatFullQuality = new pureweb.client.EncoderFormat('image/png', 100, {});
var encoderConfig =
    new pureweb.client.EncoderConfiguration(encoderFormatInteractive, encoderFormatFullQuality);

 

Application State

When making client-side changes to application state, PureWeb is ideally suited for leveraging MVVM patterns by binding to the application state directly.

Writing a single value.

stateManager.setValue('/Pi', 3.14159);

Making atomic changes.

var stateLock = stateManager.acquireLock();
stateLock.setValue('/A/B/C', 3.14159);
stateLock.setValue('/D/', Foo);
Notify me when a leaf changes.
var stateManager = pureweb.framework.getClient().getState().getStateManager();
stateManager.addValueChangedHandler('/A/B/C', Changed);
Notify me when a child changes.
stateManager.addChildChangedHandler('/A', ChildOfAChanged);

Commands

Executing a command.

pureweb.getClient().queueCommand("ClearScreen");

Executing a command with a payload and callback.

pureweb.getClient().queueCommand("LoadData", {path: "/path/to/data"}, function(response){}
    ~ Do something useful with the response ~
));