op Snapshot

op Snapshot is an Electron based tool to take a screenshot of your application.

op Snapshot will store the screenshot in the clipboard as well as in the OS temporary folder.

This tool consist of a triggerpoint (usally a button on your application) and a predefined Bootstrap modal window.

**Note: ** You will need Electron] and Bootstrap

Example of usage in an application

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

Prerequisites

To use op Snapshot, you will need to have a couple of things:

• Electron
• Bootstrap
• FontAwesome

Installing

Install op-snapshot NPM package

npm install op-snapshot

Create the trigger for taking a snapshot

Feel free to alter the example below to match with your applications styles and UI.

For an example of how to use this, try the following:

<!-- location to inject the modal window -->
<div id="opSnaphotContainer"></div>

<!-- create the button.  Wrapping it in "snapshotContainer" allows for hiding this object prior to snapshot -->
<div id="snapshotContainer">
   <button type="button" id="btnSnapshot" class="btn btn-primary">
       <i class="fas fa-camera"></i>
       Take a Snapshot
   </button>
</div>

<script>
  $(function(){
      let opSnapshot = require('./op-snapshot');

      // *** Ensure the relative path is correct for you project ***
      $("#opSnaphotContainer").load('../node_modules/op-snapshot/src/op-snapshot.html');

      window.addEventListener('load', function () {
          setTimeout(function() {
              let options = {
                  "title": document.title,
                  "clickElemId": "btnSnapshot",
                  "hideElemIds": ['snapshotContainer']
              }
              opSnapshot.init(options);
          }, 500)
      }, false);
  });
</script>

Displaying the Release Results

Once the user clicks the button, a modal window with a thumbnail of the screenshot and instructions will appear.

Authors

• Philip Eckenroth - Initial work