Remotify

../../_images/architecture.png

Remotify is a publishing system that enables virtual circuits to be published to the internet and played in a Browser.

You can think of Remotify as a Cloud File and Folder manager where the Files are VBB Projects and the folders are Groups of VBB Projects.

Remotify manager maintains a tree heirachy view of the Groups and Projects.

The basic procedure is

  1. Create Group

  2. Add Project to Group

  3. Publish Group or Individual Projects in the group

  4. Paste the publish Link to the browser

When publishing url link is copied to the clipboard which can be used in a Browser to Play the virtual hardware project

HTML5 WebPlayer

../../_images/html5icon.png

The WebPlayer is a lightweight Html javascript client that connects a Html5 Canvas renderer to a docker container instance of the .Net CORE version of the VBB runtime connected over SignalR. The docker container is hosted as an Azure container instance and spun up on demand per user session so all users have their own dedicated instances giving consistent scaleable performance for each user.

Despite being an economical approach there is a cost associated with hosting cloud sessions and hence the basic subscriptions covers development and casual personal use of the WebPlayer only. If useage grows beyond fair use a seperate usage based susbcription will apply.

HTML5 Canvas currently works on the latest versions of

  • Chrome

  • Edge

Published Group

When a group is published a url will be saved to the clipboard. The url can then be pasted directly to a browser or an alternate such as notepad. The url can then be shared by email or a link in a content management system. When the url is opened or pasted into a browser it will load the group access page with the Name, Description and Thumbnail taken from the group editor fields and the projects.

There are two types of Browser view

  • Collections of Groups

  • Collections of Projects

Group Collections Viewer

../../_images/browsergroupgroup.png

Project Collections Viewer

../../_images/browsergroup.png

Published Project

When a published project is opened from a Group view or by directly pasting or linking the project url the project will load into a project Viewer. If this is the first project accessed in a browser session then a session container will be spun up which currently takes around 30 seconds. In the future standby containers will be used to reduce this intial spin up time. If when switching to a new project within the same session the browser uses can track the current session and reuses the same container. Hence there is no additional spin up time when switching between projects as long as the same browser window is used and standard navigate back button is used to navigate the groups collection heirachy. Each session has a time limit after which it will expire. This can depend on the user account.

Project Viewer Load

../../_images/browserprojectload.png

Project Viewer Run

../../_images/browserprojectrun.png

Remotify Manager Tools

../../_images/remotifymain.png

  1. Subscription : A subscription and Virtual Breadboard account is required to activate Remotify

  2. Remotify : Remotify is accessed from the Navigation View Menu

  3. WebPlayer Play Lists : The root directory of the web group collections

  4. Group : A Group is a collection of Groups or Projects

  5. Project : A Virtual Breadboard Project stored in a Group

  6. Group/Project Toolbar : The Toolbar of the currently selected Group or Project

  7. Current Project : The VBB project currently open when Remotify Menu was selected

1. Subscription Status

To activate the Remotify Manager requires :

  • PRO or CLASSROOM Subscription

  • Virtual Breadboard Account

For more information about accounts see here : Account

If not activated the Remotify Manager will show the following message.

../../_images/remotifynosubscription.png

2. Remotify Menu

Remotify is accessed from the Navigation View Menu. This

3. WebPlayer Play Lists

The root remotify group contains all the Group or Project collections. There can be only groups or projects at the same level of the heirachy. The Name, Description and Thumbnail are not editable for the root remotify group.

../../_images/webplayerroot.png

Icon

Function
../../_images/addproject.png

Adds a new Group Child to the root directiory
../../_images/publishshare.png

Publishes the project, making it public and copying a url link to the clipboard
../../_images/unpublish.png

UnPublishes the project making it private and not visible in the browser

4. Group

A Group is a collection of Groups or Projects. When selected a group will be highlighted with a blue strip in the heirachy and the group information will be displayed in the Group pane.

5. Project

A Virtual Breadboard Project stored in a Group. When selected a project will be highlighted with a blue strip in the heirachy and the project information will be displayed in the Project pane.

6. Selected Group/Project Toolbar

6.1 Selected Group Toolbar

The Group definition is edited in the Group Pane. The Name, Description can be edited to be displayed in the Browser Group Viewer to inform the nature of the projects in the group. The Thumbnail is also editable and must be a 290x200 png image.

../../_images/grouptools.png

Icon

Function
../../_images/addproject.png

Adds a new Group as a child of this group.
../../_images/uparrow.png

Decrements the selected group order moving it up one place in the list
../../_images/downarrow.png

Increments the selected group order moving it down one place in the list
../../_images/delete.png

Deletes the selected group if empty removing the group from the cloud.
../../_images/publishshare.png

Publishes the project, making it public and copying a url link to the clipboard
../../_images/unpublish.png

UnPublishes the project making it private and not visible in the browser
../../_images/updatethumbnail.png

Opens a dialog to select an 290x200 png image to be the new thumbnail.
../../_images/savechanges.png

Saves the new group definition to the remotify cloud.

6.2 Selected Project Toolbar

The Project definition is viewed in the Project Pane. The Name, Description are copied over from the Info designsheet in the VBB Project. The remotify project can be opened and later saved directly to the remotify cloud making remotify a type of cloud drive for VBB projects. The toolbar tools are used to manage the visibility and membership of the project in it’s group.

../../_images/projecttools.png

Icon

Function
../../_images/uparrow.png

Decrements the selected project order moving it up one place in the list
../../_images/downarrow.png

Increments the selected project order moving it down one place in the list
../../_images/delete.png

Deletes the selected project removing it from the cloud store
../../_images/publishshare.png

Publishes the project, making it public and copying a url link to the clipboard
../../_images/unpublish.png

UnPublishes the project making it private and not visible in the browser
../../_images/openproject.png

Opens the remote remotify project as the current project
Opening Remote Project

When opening a remote project the title of the project will be prefixed with remotify.

../../_images/remotproject.png

When a remotify project is saved it it will be updated directly in the cloud. In this way remotify acts as a cloud drive for VBB projects.

7. Current Project

../../_images/currentproject.png

When navigating to the Remotify Manager there is a project currently open in the background. A snapshot of this project is shown in the Current Project pane. The Name and Summary are taken from the project information of the current project and the Thumnail is automatically generated from the active Breadboard. The Project tools are used to connect the project with a Remotify Group.

Icon

Function
../../_images/addproject.png

Add Project to the currently selected group

Troubleshooting

  • Firefox does not seem to work with the way VBB uses the Html5 Canvas at this time.

  • Projects should be single Breadboard projects.

  • A Group should contain only projects or groups but not both otherwise the web player will not function correctly.

Roadmap

  • ESP8266 is not currently available - backend version needs to be updated.

  • Connect Avatars to Remotify Browsers via RasPi Server to create remote labs