:prev_state: False Remotify ######## .. image:: 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 *************** .. image:: 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 ------------------------ .. image:: browsergroupgroup.png Project Collections Viewer -------------------------- .. image:: 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 ------------------- .. image:: browserprojectload.png Project Viewer Run ------------------ .. image:: browserprojectrun.png Remotify Manager Tools ********************** .. image:: 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. .. image:: remotifynosubscription.png .. _`Account` : ../account/account.html 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. .. image:: webplayerroot.png +----------------------------------+---------------------------------------------------------------------------------------------+ | Icon | Function | +==================================+=============================================================================================+ | .. image:: addproject.png | Adds a new Group Child to the root directiory | +----------------------------------+---------------------------------------------------------------------------------------------+ | .. image:: publishshare.png | Publishes the project, making it public and copying a url link to the clipboard | +----------------------------------+---------------------------------------------------------------------------------------------+ | .. image:: 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. .. image:: grouptools.png +----------------------------------+-------------------------------------------------------------------------------------------------+ | Icon | Function | +==================================+=================================================================================================+ | .. image:: addproject.png | Adds a new Group as a child of this group. | +----------------------------------+-------------------------------------------------------------------------------------------------+ | .. image:: uparrow.png | Decrements the selected group order moving it up one place in the list | +----------------------------------+-------------------------------------------------------------------------------------------------+ | .. image:: downarrow.png | Increments the selected group order moving it down one place in the list | +----------------------------------+-------------------------------------------------------------------------------------------------+ | .. image:: delete.png | Deletes the selected group if empty removing the group from the cloud. | +----------------------------------+-------------------------------------------------------------------------------------------------+ | .. image:: publishshare.png | Publishes the project, making it public and copying a url link to the clipboard | +----------------------------------+-------------------------------------------------------------------------------------------------+ | .. image:: unpublish.png | UnPublishes the project making it private and not visible in the browser | +----------------------------------+-------------------------------------------------------------------------------------------------+ | .. image:: updatethumbnail.png | Opens a dialog to select an 290x200 png image to be the new thumbnail. | +----------------------------------+-------------------------------------------------------------------------------------------------+ | .. image:: 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. .. image:: projecttools.png +----------------------------------+---------------------------------------------------------------------------------------------+ | Icon | Function | +==================================+=============================================================================================+ | .. image:: uparrow.png | Decrements the selected project order moving it up one place in the list | +----------------------------------+---------------------------------------------------------------------------------------------+ | .. image:: downarrow.png | Increments the selected project order moving it down one place in the list | +----------------------------------+---------------------------------------------------------------------------------------------+ | .. image:: delete.png | Deletes the selected project removing it from the cloud store | +----------------------------------+---------------------------------------------------------------------------------------------+ | .. image:: publishshare.png | Publishes the project, making it public and copying a url link to the clipboard | +----------------------------------+---------------------------------------------------------------------------------------------+ | .. image:: unpublish.png | UnPublishes the project making it private and not visible in the browser | +----------------------------------+---------------------------------------------------------------------------------------------+ | .. image:: 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*. .. image:: 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 ================== .. image:: 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 | +============================+===========================================================+ | .. image:: 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