1. Home
  2. Knowledge Base
  3. Ghostlab: Features
  4. Screenshots

Screenshots

Ghostlab allows you to take screenshots of any connected device. Please note that we are not talking about native screenshots (e.g. when you do a “Print Screen” on a computer, or press the respective button combination on a mobile phone). Ghostlab uses our own forks of html2canvas and Fabric.js to obtain a visual representation of the page currently displaying on a client. It takes a screenshot of the viewport, not the entire page (that might be an option in the future).

To take a screenshot on a client, simply use the camera icon in the client list. Once you click it, it will start recording the screenshot on the device. In case Ghostlab is not already showing the Screenshot perspective, it will switch over to it.

Since we’re not taking native screenshots, note that we don’t always perfectly represent what the browser is showing – at times, it can even be quite off. If that is the case, please get in touch with our support team and file an issue – this will allow us to improve the screenshot functionality.
To take a screenshot on a client, click its camera icon in the client list.

To take a screenshot on a client, click its camera icon in the client list.

The screenshot you have just requested will show up as loading – Ghostlab will wait until the client sends the screenshot over, and update the placeholder with the screenshot. It can happen that it takes really long to create a screenshot on a client, or that an exception occurs. After thirty seconds of a requested screenshot in the loading state, Ghostlab will show a message that it’s taking long to get the screenshot. Also, you will have the ability to cancel the screenshot.

Once you have requested a screenshot, a placeholder will show up indicating loading. If the loading takes more than 30 seconds, Ghostlab will indicate this and give you the option to cancel the screenshot.

Screenshots are stored on your local disk – by default, Ghostlab attempts to place them in a subdirectory “ghostlab_screenshots” in your home folder, using a separate folder with a random name for every site. For every site, you can change the location where the screenshots are stored in the Site settings. When you look at the screenshot folder, you will see jpeg and json files. The jpeg files are the actual screenshots (or a thumbnail of them), the json files contain the metadata and the annotations you make.

Once the screenshot is ready, you will see it as a thumbnail in the screenshot perspective, alongside with an automatically assigned name based on the client. You can change the name of the screenshot by double-clicking into it. You can delete screenshots by clicking on their trash icon, save them to a folder on your computer by clicking the export icon, or choose to edit them via the edit icon or by double-clicking the thumbnail. You can sort the list of screenshots by date (created or modified) and by name.

Once the screenshot is done, its thumbnail will replace the placeholder. You can now export it, or open in in the Screenshot editor.

In the Screenshot editor, use any tool on the palette to annotate your screenshot. Changes are saved automatically.

The screenshot editor will show on top of the screenshot perspective, leaving the client list visible. The screenshot editor allows you to view the whole screenshot in detail, zoom in and out, and, most importantly, annotate it. When a screenshot opens up in the editor, you will notice that it contains a header section with some metadata about the client on which it was taken and its size.

You can use the tool palette in the editor to annotate a screenshot. Pick any color and tool you like and go for it! You can resize shapes and text either arbitrarily, or proportionally by holding down the Shift key. When any shape  is selected, pressing Esc will result in deselecting the shape. When no shape is selected, pressing Esc will close the screenshot editor. There is no Save button, as any annotations you make are automatically saved.

When you are done annotating your screenshot, close the editor by clicking Escape (if no shape is selected) or pressing the close icon top right. You can export the annotated screenshot via the export icon or by drag and drop.

 

Was this article helpful?

Related Articles