css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation


Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

  <nav class="navbar navbar-inverse navbar-fixed-top"><div class="container"> <div class="navbar-header"><a class="navbar-brand" href="https://github.com/thingdomio/thingdom-js">Thingdom-JS Example</a> </div><div id="navbar" class="navbar-collapse collapse"></div> </nav>

  <div class="container">

    <div id="thingdom" class="panel panel-default">
      <div class="hidden panel-heading"><h2 class="panel-title">Real Codes Already?</h2></div>
      <div class="panel-body">
      <p><strong>Step One: Authenticate and initialize Thingdom</strong></p>
      <p>You&#39ll want to instantiate a new Thingdom object by passing in your API Secret:</p>
      <pre>var thingdom = new Thingdom( &#39EnterYourAPISecretHere&#39 );</pre>
      <p>This instantiates a new Thingdom object:</p>
      <p><a id="newThingdom" class="btn btn-success" href="#" role="button">Try It</a></p>
      <pre id="newThingdomResult" class="pre-scrollable">New <var>thingdom</var> value is displayed here</pre>
      </div> <!-- .panel-body -->
    </div> <!-- #thingdom .panel.panel-default -->


    <div id="thing" class="panel panel-default">
      <div class="panel-body">
        <p><strong>Step Two: Create or get your Thing</strong></p>
        <p>You'll need to call your Thing with its name and a product type and pass in a callback from within your scope.</p>
        <p>In practice that looks a little like this:</p>
        <pre class="pre-scrollable">var thing; thingdom.getThing( &#39Example Thing&#39, &#39javascript_example&#39, function( newThing ) { thing = newThing } );</pre>
        <p><small>This is fine as an example but you should definitely try to use patterns, methods, and variables that make sense for your own code.</small></p>
        <p><a id="newThing" class="btn btn-success" href="#" role="button">Try It</a></p>
        <pre id="newThingResult" class="pre-scrollable">New <var>thing</var> value is displayed here</pre>
      </div> <!-- .panel-body -->
    </div> <!-- #thing .panel.panel-default -->


    <div id="feed" class="panel panel-default">
      <div class="panel-body">
        <p><strong>Step Three: Post a feed to your Thing</strong></p>
        <p class="well well-sm">Before you continue you should download the <a href="https://itunes.apple.com/us/app/thingdom/id807761969?mt=8" target="_blank">iOS <i class="fa fa-apple"></i></a> or <a href="https://play.google.com/store/apps/details?id=com.thingdom.mobile" target="_blank">Android <i class="fa fa-android"></i></a> apps onto your device(s) of choice. To really appreciate the <em>magic</em> of what&#39s about to happen, it helps a lot to see all this happen on a device in front of you. Once you launch Thingdom Mobile the first time you should be prompted to enter a Thing code.</p>
        <p class="hidden">To get the Thng Code from the Thing this example is using, click Show Code.</p>
        <div class="well btn-group btn-group-justified">
          <a id="showThingCode" class="btn btn-default btn-primary" href="#" role="button">Show Code</a>
          <a id="thingCodeNode" class="btn btn-default" role="button"><span class="text-muted">Thing Code</span></a>
        <pre class="pre-scrollable">thing.feed( "Example feed message...", "js_web_feed" );</pre>
        <p>When you click Try It you'll trigger a feed message.</p>
        <p><a id="postDefaultFeed" class="btn btn-success" href="#" role="button">Try It</a></p>
        <pre id="defaultFeedResult" class="pre-scrollable">...</pre>
        <p>Try passing in your own input:</p>
        <div class="input-group">
          <input id="customFeedString" type="text" placeholder="Stick some text in here..." class="form-control">
          <span class="input-group-btn">
            <a id="postCustomFeed" class="btn btn-default" role="button">Custom Message</a>
        <pre id="customFeedResult" class="pre-scrollable">...</pre>
      </div> <!-- .panel-body -->
    </div> <!-- #feed .panel.panel-default -->

    <div id="status" class="panel panel-default">
      <div class="panel-body">
        <p><strong>Step 4: Update your Thing's Status</strong></p>
        <pre class="pre-scrollable">thing.status( "js_web_status", "online" );</pre>
        <p>Click Try It to update your Thing's status to <span class="text-success text-muted">online</span></p>
        <p><a id="postOnlineStatus" class="btn btn-success" href="#" role="button">Try It</a></p>
        <pre id="onlineStatusResult" class="pre-scrollable">...</pre>
        <pre class="pre-scrollable">thing.status( "js_web_status", "offline" );</pre>
        <p>Click Try It to update your Thing's status to <span class="text-info text-muted">offline</span></p>
        <p><a id="postOfflineStatus" class="btn btn-success" href="#" role="button">Try It</a></p>
        <pre id="offlineStatusResult" class="pre-scrollable">...</pre>
      </div> <!-- .panel-body -->
    </div> <!-- #status .panel.panel-default -->

    <div id="resources" class="panel panel-primary">
      <div class="panel-heading"><h2 class="panel-title">Resources</h2></div>
      <div class="panel-body">
        <p>Here are some links to resources to help you understand both what Thingdom is.</p>
        <div class="list-group">
          <a class="list-group-item" href="https://thingdom.io" target="_blank">
            <h4 class="list-group-item-heading">Thingdom Website</h4>
            <span class="list-group-item-text">Learn about <em>what</em> Thingdom is and how it works. Most of the links below can be found there as well a links to our apps on iTunes and Google Play.</span>
          <a class="list-group-item" href="https://dev.thingdom.io/" target="_blank">
             <h4 class="list-group-item-heading">Thingdom Developer Portal</h4>
             <span class="list-group-item-text">Once you have signed up for your free Thingdom account, the developer portal allows you to define your own thing product types, status types, and feed types. <strong class="text-danger">Signing up</strong> is crucial to get YOUR OWN API Secret to use within your own project.</span>
          <a class="list-group-item" href="https://dev.thingdom.io/docs/api/1.1/" target="_blank">
            <h4 class="list-group-item-heading">Thingdom REST API Documentation</h4>
            <span class="list-group-item-text">Learn about how to communicate with the Thingdom API. There are examples that you can try out on your own using the online REST client hurl.it</span>
          <a class="list-group-item" href="https://github.com/thingdomio" target="_blank">
            <h4 class="list-group-item-heading">Thingdom GitHub Page</h4>
            <span class="list-group-item-text">Repositories for all the opensource Thingdom wrappers and examples.</span>
          <a class="list-group-item" href="https://github.com/thingdomio/thingdom-js" target="_blank">
            <h4 class="list-group-item-heading">Official Thingdom-JS Wrapper</h4>
            <span class="list-group-item-text">The Thingdom-JS wrapper that will be used in this example today</span>
        </div> <!-- / .list-group -->
      </div> <!-- / .panel-body -->
    </div> <!-- / #resources .panel.panel-primary -->


              body {
  padding-top: 64px;
.textshadow .blurry-text {
   color: transparent;
   text-shadow: 0 0 9px rgba(0,0,0,0.75);
              $( function() {
  var $newThingdomBtn       = $( 'a#newThingdom' ),
      $newThingdomResult    = $( 'pre#newThingdomResult'),
      $newThingBtn          = $( 'a#newThing' ),
      $newThingResult       = $( 'pre#newThingResult'),
      $showThingCodeBtn     = $( 'a#showThingCode' ),
      $thingCodeNode        = $( 'a#thingCodeNode' ),
      $thingCodeNodeSpan    = $( 'a#thingCodeNode > span'),
      $postDefaultFeedBtn   = $( 'a#postDefaultFeed' ),
      $defaultFeedResult    = $( 'pre#defaultFeedResult' ),
      $postCustomFeedBtn    = $( 'a#postCustomFeed' ),
      $customFeedResult     = $( 'pre#customFeedResult' ),
      $postOnlineStatusBtn  = $( 'a#postOnlineStatus' ),
      $onlineStatusResult   = $( 'pre#onlineStatusResult' ),
      $postOfflineStatusBtn = $( 'a#postOfflineStatus' ),
      $offlineStatusResult  = $( 'pre#offlineStatusResult' );

  var prettyUpJSON = function( jsonObject ) {
    return JSON.stringify( jsonObject, ' ', 2 );

  var thingdom, 
      createThingdom = function( cb ) { 
        thingdom = new Thingdom( 'EnterYourAPISecretHere' ); 
        var timer = setTimeout( function() { var thingdomJson = { thingdom: { getThing: "@method( (string) name, (semi-optional string) product_type, ( function ) callback  )", lastError: thingdom.lastError } }; cb( prettyUpJSON( thingdomJson ) ); }, 500 );
      createThing = function( cb ) { 
        thingdom.getThing( 'Example Request', 'javascript_example', function( newThing ) { thing = newThing; } ); 
        var timer = setTimeout( function() { var thingJSON = { thing: { thing_code: thing.thing_code, feed: "@method( (string) message, (semi-optional string) feed_category )", status: "@method( (string) status_key (string) value (optional string) unit )", statusArray: "@method( (array of object(s)) statusArr ) )" } }; cb( prettyUpJSON( thingJSON ) ); }, 500 ); 
      getThingCode = function() { return thing.thing_code; }, 
      postDefaultFeed = function( cb ) { thing.feed( "Example feed message from example at: " + window.location.origin + window.location.pathname, "js_web_feed" ); cb(); }, 
      postCustomFeed = function( userString, cb ) { thing.feed( "You Sent: " + userString, "js_web_feed" ); cb( userString ); },
      postOnlineStatus = function( cb ) { thing.status( "js_web_status", "online" ); cb(); },
      postOfflineStatus = function( cb ) { thing.status( "js_web_status", "offline" ); cb(); };

  $newThingdomBtn.click( function( e ) {
    var displayOutcome = function( currentThingdomString ) {
      $newThingdomResult.html( currentThingdomString );
    createThingdom( displayOutcome );
  $newThingBtn.click( function( e ) { 
    var displayOutcome = function( currentThingString ) {
      $newThingResult.html( currentThingString );
    createThing( displayOutcome );
  } );
  $showThingCodeBtn.click( function( e ) {
    $thingCodeNodeSpan.html( getThingCode() );
  } );
  $postDefaultFeedBtn.click( function( e ) {
    var displayOutcome = function() {
      $defaultFeedResult.html( 'Boom! Right?!?' );
    postDefaultFeed( displayOutcome );
  } );
  $postCustomFeedBtn.click( function( e ) {
    var $customFeedString  = $( 'input#customFeedString' ).val(),
        displayOutcome = function( passedString ) {
          $customFeedResult.html( 'Sent: ' + passedString );
    postCustomFeed( JSON.stringify( $customFeedString ), displayOutcome );
  } );
  $postOnlineStatusBtn.click( function( e ) {
    var displayOutcome = function() {
      $onlineStatusResult.html( 'Online' );
      $offlineStatusResult.html( '...' );
    postOnlineStatus( displayOutcome );
  } );

  $postOfflineStatusBtn.click( function( e ) {
    var displayOutcome = function() {
      $onlineStatusResult.html( '...' );
      $offlineStatusResult.html( 'Offline' );
    postOfflineStatus( displayOutcome );
  } );
} );

// javascript:(function(){var s=document.createElement("script");s.onload=function(){bootlint.showLintReportForCurrentDocument([]);};s.src="https://maxcdn.bootstrapcdn.com/bootlint/latest/bootlint.min.js";document.body.appendChild(s)})();
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................