Wondering what’s next for npm?Check out our public roadmap! »

    seeclarke

    1.1.2 • Public • Published

    SeeClarke.js

    "Any sufficiently advanced technology is indistinguishable from magic."
    - Arthur C. Clarke

    build

    Add client-side, head-tracked pointers to your HTML5 projects just...like...✨...that!


    IE / Edge
    IE / Edge
    Firefox
    Firefox
    Chrome
    Chrome
    Safari
    Safari
    iOS Safari
    iOS Safari
    Samsung
    Samsung
    Edge last 5+ last 5+ last 3+ last 2+ last 2+

    Table of Contents:


    About

    SeeClarke.js is a thin wrapper around PoseNet and TensorFlow.js that calculates head-tracked cursor positions for a variable number of users at once, and is fast enough to work on mid-ranged mobile devices. Currently, SeeClarke only handles the calculations and it's up to you to decide what to do with it, for instance (click links to play with demos):

    You can see the visual evolution of this project in this Twitter thread.

    Demos

    🧙 These demos link to CodePens, but are also available in /demo/ for offline testing!

    Basic Cursor Positioning Page Scrolling
    https://media.giphy.com/media/55vsITBRKRlaosFK7I/giphy.gif https://media.giphy.com/media/5b9d1dQlV7CzRJ5ueC/giphy.gif
    Focusing Elements Panning Google Maps
    https://media.giphy.com/media/3mJS1rtNDmSSh1dUKy/giphy.gif Panning Google Maps
    Looking Around Street Views Looking Around YouTube 360
    https://media.giphy.com/media/pjZpFaxj9jBFqS54vR/giphy.gif https://giphy.com/gifs/83fHb6D3QQ7xb1WHBT

    Developing Locally

    The following Node commands are available from the project root:

    npm run dev   # Runs the project in development mode with live reloading 
    npm run build # Builds the project into /public 
    npm run test  # Runs unit tests 

    Platforms

    The following is a list of all the platforms and environments that we currently support:

    HTML5 Projects

    🧙 Clarke: The first thing you'll want to do is get access to the SeeClarke class, so that you can instantiate it. Let's explore 2 options below!

    Installing Via Script Tag: The easiest way to get started, allowing you to quickly test in sandboxes like CodePen, JSFiddle, or any site on the web:

    <!-- For the latest version -->
    <script src="https://unpkg.com/seeclarke/dist/seeclarke.min.js"></script>
     
    <!-- For a specific version (in this case, 0.0.3) -->
    <script src="https://unpkg.com/seeclarke@0.0.3/dist/seeclarke.min.js"></script>

    Installing Via NPM: You'll first want to add the package as a dependency to your project with:

    # In your existing projects root 
    npm install --save seeclarke

    You'll then be able to import it with:

    const SeeClarke = require('seeclarke')

    🧙 Clarke: Now that we have SeeClarke, let's instantiate it with the new operator and have it autostart! Head over with Al to the options page and he'll explain the different types of configs for you!

    // Instantiate an instance of SeeClarke and autostart it
    const seeclarke = new SeeClarke({autostart: true})

    Using the Values:

    window.addEventListener('onSeeClarkePoseUpdates', (ev) => {
      // Grab the SeeClarke instance that called this
      const context = ev.details.context
     
      // You can now access any of the properties, including the poses
      const poses = context.poses
     
      // Loop through poses to get their details
      poses.forEach((pose, index) => {
        // Relative to top left
        let x = pose.pointedAt.x
        let y = pose.pointedAt.y
        // This number represents the "pixels away" from the screen
        // - The closer you are the smaller this value and vice versa
        let z = pose.pointedAt.z
     
        // Do stuff with the x, y here!
        // @SEE CodePen demos: https://codepen.io/collection/nryEYd/
      })
    })

    Other Platforms Coming Soon

    👻 Casper: Heads up! We're also planning support for the following: CLI's (via NodeJS), apps, IoT's, headerless environments, smart watches, game consoles, AR/VR/MR environments, vehicles, smart homes, smart factories, space stations, dreams, and realities!


    Browsers Support

    Browser Busters

    The following is a list of features that are currently breaking browser support:

    Browser Breaking Features
    IE11 getUserMedia
    Opera Mini getUsermedia, WebGL

    Polyfills

    The following polyfills are providing support for older browsers:

    Polyfill Affected Browsers Fix Notes
    getUserMedia Chrome <= 49
    iOS <= 10.3
    /src/polyfills.js We're basically only supporting the API change from navigator.getUserMedia to navigator.mediaDevices.getUserMedia
    CustomEvent IE, Safari Nightly Builds custom-event-polyfill  

    Keywords

    none

    Install

    npm i seeclarke

    DownloadsWeekly Downloads

    15

    Version

    1.1.2

    License

    ISC

    Unpacked Size

    49.7 kB

    Total Files

    14

    Last publish

    Collaborators

    • avatar