Forked from: reo.matsumura's Samples.DigitalInOut View Diff (574)

HAKUNAMATATA - main

ku6ryo

2013-08-04 04:33:49

License: MIT License

Fork: 3

Fav: 0

View: 1631

Play
Stop
Reload

Fullscreen

Smart Phone

Fork tree

Readme
JavaScript 375 lines
HTML 35 lines
CSS 70 lines

HAKUNAMATATA - main

/**
 * This is the code for the project HAKUNAMATATA.
 * @author Ryo Kuroyanagi
 */

/**
 * Namespace to store utility functions.
 */
var util = function() {};

/**
 * Bind a function wiht the specified scope.
 */
util.bind = function(func, target) {
    return function() { func.apply(target, arguments); };
};

/**
 * Class to handle all instances.
 */
var Brain = function() {
    /**
     * Twitter Api handler.
     */
    this.twitter = new Twitter();//TWITTER_KEYS);

/**
     * Setting UI.
     */
    this.settingUi = null;

/** Array
     * @type {Array}
     */
    this.scenes = [];

/**
     * Twitter id of the target user.
     * @param {String}
     */
    this.targetUser = '';
};

/**
 * Initialize.
 */
Brain.prototype.init = function() {
    this.settingUi = new SettingUi();
    
    var self = this;
    this.settingUi.authenticateBtn.bind('click', function() {
        var keys = self.settingUi.getValues();
        self.twitter.setApiKeys(keys);
        self.twitter.checkAuth(function(status) {
            $('#message').text(status);
        });
        //self.twitter.get(Twitter.USER_TIMELINE_API_URL, content);
    });

/** Adds Event Listeners on change evnets */
    this.settingUi.consumerKeyBox.bind('change', function() { self.onChange(); });
    this.settingUi.consumerSecretBox.bind('change', function() { self.onChange(); });
    this.settingUi.accessTokenBox.bind('change', function() { self.onChange(); });
    this.settingUi.accessTokenSecretBox.bind('change', function() { self.onChange(); });
    this.settingUi.targetBox.bind('change', function() { self.onChange(); });
    
    /** If localStorage has previous settings, inserts the data. */
    if (localStorage.settings) {
        var settings = JSON.parse(localStorage.settings);
        this.settingUi.setValues(settings);
        this.targetUser = settings.target;
    }
    
    /** Sets up scenes */
    this.scenes.push($('#settings-scene'));
    this.scenes.push($('#timeline-scene'));
    
    $('#show-timeline').bind('click', function() {
        self.twitter.getHomeTimeline(50, util.bind(self.callBackOfTwitter, self));
    });
};

/**
 * Selects scene and switches to the scene of given index.
 * @param {Number} index Index of the target scene.
 */
Brain.prototype.selectScene = function(index) {
    $.each(this.scenes, function(i, scene) {
        if (i == index) {
            scene.removeClass('hidden');
        } else {
            scene.addClass('hidden');
        }
    });
};

/**
 * Event handler for on change events fired by input boxes.
 */
Brain.prototype.onChange = function() {
    var values = this.settingUi.getValues();
    localStorage.settings = JSON.stringify(values);
    this.targetUser = values.target;
};

/**
 * Initialize KONASHI.
 */
Brain.prototype.initKonashi = function() {
  
  $(function(){
    $("#button").bind('click', function(){
        k.find();
    });
  });

var intervalId;

k.ready(function(){
    k.pinModeAll(254);
    intervalId = setInterval(function(){
      k.analogReadRequest(k.AIO0);
    }, 200); 
  });

k.connected(function(){
    document.body.style.backgroundColor = 'red';
  });

k.updatePioInput(function(data){
    console.log(data);
  });

k.disconnected(function(data){
    clearInterval(intervalId);
  });

};

/**
 * Callback after getting timeline.
 * @param {Array} tweets Array of tweets.
 */
Brain.prototype.callBackOfTwitter = function(tweets) {
    var containsTarget = false;
    var self = this;
    $.each(tweets, function(index, tweet) {
        var row = document.createElement('tr');
        var userCell = $('<td>').addClass('username').text(tweet.user.name);
        var img = $('<img>').attr('src', tweet.user.profile_image_url_https);
        userCell.append(img);
        var textCell = $('<td>').addClass('tweet').text(tweet.text);
        $(row).append(userCell);
        $(row).append(textCell);
        $("#timeline-table").append(row);
        if (tweet.in_reply_to_screen_name == self.targetUser) { containsTarget = true; }
    });
    console.log(tweets);
    if (containsTarget) { document.body.style.backgroundColor = 'red'; }
    //if (flag) k.digitalWrite(k.PIO1, k.HIGH);
    //  debugger;
    this.selectScene(1);
};

/**
 * Class to handle UI elements for settings.
 */
var SettingUi = function() {
  this.consumerKeyBox = $('#tw-consumer-key');
  this.consumerSecretBox = $('#tw-consumer-secret');
  this.accessTokenBox = $('#tw-access-token');
  this.accessTokenSecretBox = $('#tw-access-token-secret');

this.targetBox = $('#tw-target');

this.authenticateBtn = $('#authenticate');
};

/**
 * Gets values in the input boxes.
 * return {Object}
 */
SettingUi.prototype.getValues = function() {
  return {
    'consumerKey': this.consumerKeyBox.val(),
    'consumerSecret': this.consumerSecretBox.val(),
    'accessToken': this.accessTokenBox.val(),
    'accessTokenSecret': this.accessTokenSecretBox.val(),
    'target': this.targetBox.val()
  };
};

/**
 * Sets given values to text boxes.
 * @param {Object}
 */
SettingUi.prototype.setValues = function(values) {
  if (values) {
    this.consumerKeyBox.val(values.consumerKey || '');
    this.consumerSecretBox.val(values.consumerSecret || '');
    this.accessTokenBox.val(values.accessToken || '');
    this.accessTokenSecretBox.val(values.accessTokenSecret || '');
    this.targetBox.val(values.target || '');
  }
};

/**
 * Class to handle Twitter API.
 */
var Twitter = function(opt_keys) {
  this.consumerKey = '';
  this.consumerSecret = '';
  this.accessToken = '';
  this.accessTokenSecret = '';
  if (opt_keys !== undefined) this.setApiKeys(opt_keys);
};

/**
 * Status when an authentication is succeeded.
 * @type {String}
 * @const
 */
Twitter.AUTH_SUCCESS = 'success';

/**
 * Status when an authentication is failed.
 * @type {String}
 * @const
 */
Twitter.AUTH_FAILURE = 'failure';

/**
 * API URL to get the home timeline.
 * @type {String}
 * @const
 */
Twitter.HOME_TIMELINE_API_URL = 'https://api.twitter.com/1.1/statuses/home_timeline.json';

/**
 * API URL to get the user timeline.
 * @type {String}
 * @const
 */
Twitter.USER_TIMELINE_API_URL = 'https://api.twitter.com/1.1/statuses/user_timeline.json';

/**
 * API URL to tweet.
 * @type {String}
 * @const
 */
Twitter.TWEET_API_URL = 'http://api.twitter.com/1.1/statuses/update';

/**
 * @param {Object} keys Keys of Twitter API.
 */
Twitter.prototype.setApiKeys = function(keys) {
  this.consumerKey = keys.consumerKey || '';
  this.consumerSecret = keys.consumerSecret || '';
  this.accessToken = keys.accessToken || '';
  this.accessTokenSecret = keys.accessTokenSecret || '';
};

/**
 * Checks whether authentication is succeeded or not.
 * @param {Function} callback
 */
Twitter.prototype.checkAuth = function(callback) {
    this.get(Twitter.USER_TIMELINE_API_URL, function(tweets) {
        if (tweets.length > 0) {
            callback(Twitter.AUTH_SUCCESS);
        } else {
            callback(Twitter.AUTH_FAILUER);
        }
    }, {count: '1'});
};

/**
 * Gets the user timeline.
 * @param {Number} count
 * @param {Function} callback Function to be executed after JSONP access.
 */ 
Twitter.prototype.getUserTimeline = function(count, callback) {
    this.get(Twitter.USER_TIMELINE_API_URL, callback, {count: count});
};

/**
 * Gets the home timeline.
 * @param {Number} count
 * @param {Function} callback Function to be executed after JSONP access.
 */
Twitter.prototype.getHomeTimeline = function(count, callback) {
    this.get(Twitter.HOME_TIMELINE_API_URL, callback, {count: count});
};

/**
 * Accesses API and get JSON data and parse it into JS Object.
 * @param {String} api API URL.
 * @param {Function} callback Callback function.
 * @param {Object} opt_params
 */
Twitter.prototype.get = function(api, callback, opt_params) {
    var accessor = {
        consumerSecret: this.consumerSecret,
        tokenSecret: this.accessTokenSecret
    };

if (opt_params !== undefined) {
        for (var key in opt_params) {
            message.parameters[key] = opt_params[key];
        }
    }

OAuth.setTimestampAndNonce(message);
    OAuth.SignatureMethod.sign(message, accessor);
    var target = OAuth.addToURL(message.action, message.parameters);
    var options = {
        type: message.method,
        url: target,
        dataType: "jsonp",
        jsonp: false,
        cache: true
    };
    $.ajax(options);
};

/** Initialize. */
var brain =  new Brain();
$(function(){
  brain.init();
});

<script src="http://konashi.ux-xu.com/kjs/konashi-bridge.min.js"></script>

<script src="http://oauth.googlecode.com/svn/code/javascript/oauth.js"></script>
<script src="http://oauth.googlecode.com/svn/code/javascript/sha1.js"></script>

<div id="screen-container">
    <div id="settings-scene" class="scene">
        <table id="settings-table">
            <tr><td><button id="button" type="button">Connect Konashi</button></td></tr>
            <tr><td><input id="tw-consumer-key" type="text" class=""></td></tr>
            <tr><td><input id="tw-consumer-secret" type="text" class=""></td></tr>
            <tr><td><input id="tw-access-token" type="text" class=""></td></tr>
            <tr><td><input id="tw-access-token-secret" type="text" class=""></td></tr>
            <tr><td><input id="tw-target" type="text" class=""></td></tr>
            <tr><td><button id="authenticate" type="button">Connect Twitter</button></td></tr>
            <tr><td><button id="show-timeline" type="button">Show Timeline</button></td></tr>
        </table>
        <div id="message"></div>
    </div>
    <div id="timeline-scene" class="scene hidden">
        <table id="timeline-table"></table>
    </div>
</div>

HAKUNAMATATA - main

* {
    margin: 0;
    padding: 0;
}

.scene {
    box-sizing: border-box;
    height: 100%;
    position: absolute;
    padding: 50px;
    width: 100%;
}

.scene.hidden {
    display: none;
}

#settings-scene {
    background-color: rgb(229, 245, 255);
    text-align: center;
}

#settings-table {
    text-align: center;
    width: 100%;
}

#settings-table input {
    border: 1px solid rgb(200, 200, 200);
    border-radius: 3px;
    color: rgb(100, 100, 100);
    font-size: 20px;
    height: 30px;
    margin: 5px;
    outline: none;
    padding: 0 10px;
    width: 100%;
}

#setting-table input:focus {
    border-color: rgb(0, 0, 0);
}

#settings-table button {
    background-color: rgb(150, 150, 255);
    border: 1px solid rgb(100, 100, 255);
    border-radius: 3px;
    color: white;
    font-size: 20px;
    height: 30px;
    width: 80%;
}

#settings-table button:hover {
    background-color: rgb(0, 0, 255);
}

#timeline-table {
    height: 100%;
    overflow-y: scroll;
    text-align: center;
    width: 100%;
}

#timeline-table td {
    font-size: 10px;
}
}

/** * This is the code for the project HAKUNAMATATA. * @author Ryo Kuroyanagi */ /** * Namespace to store utility functions. */ var util = function() {}; /** * Bind a function wiht the specified scope. */ util.bind = function(func, target) { return function() { func.apply(target, arguments); }; }; /** * Class to handle all instances. */ var Brain = function() { /** * Twitter Api handler. */ this.twitter = new Twitter();//TWITTER_KEYS); /** * Setting UI. */ this.settingUi = null; /** Array * @type {Array} */ this.scenes = []; /** * Twitter id of the target user. * @param {String} */ this.targetUser = ''; }; /** * Initialize. */ Brain.prototype.init = function() { this.settingUi = new SettingUi(); var self = this; this.settingUi.authenticateBtn.bind('click', function() { var keys = self.settingUi.getValues(); self.twitter.setApiKeys(keys); self.twitter.checkAuth(function(status) { $('#message').text(status); }); //self.twitter.get(Twitter.USER_TIMELINE_API_URL, content); }); /** Adds Event Listeners on change evnets */ this.settingUi.consumerKeyBox.bind('change', function() { self.onChange(); }); this.settingUi.consumerSecretBox.bind('change', function() { self.onChange(); }); this.settingUi.accessTokenBox.bind('change', function() { self.onChange(); }); this.settingUi.accessTokenSecretBox.bind('change', function() { self.onChange(); }); this.settingUi.targetBox.bind('change', function() { self.onChange(); }); /** If localStorage has previous settings, inserts the data. */ if (localStorage.settings) { var settings = JSON.parse(localStorage.settings); this.settingUi.setValues(settings); this.targetUser = settings.target; } /** Sets up scenes */ this.scenes.push($('#settings-scene')); this.scenes.push($('#timeline-scene')); $('#show-timeline').bind('click', function() { self.twitter.getHomeTimeline(50, util.bind(self.callBackOfTwitter, self)); }); }; /** * Selects scene and switches to the scene of given index. * @param {Number} index Index of the target scene. */ Brain.prototype.selectScene = function(index) { $.each(this.scenes, function(i, scene) { if (i == index) { scene.removeClass('hidden'); } else { scene.addClass('hidden'); } }); }; /** * Event handler for on change events fired by input boxes. */ Brain.prototype.onChange = function() { var values = this.settingUi.getValues(); localStorage.settings = JSON.stringify(values); this.targetUser = values.target; }; /** * Initialize KONASHI. */ Brain.prototype.initKonashi = function() { $(function(){ $("#button").bind('click', function(){ k.find(); }); }); var intervalId; k.ready(function(){ k.pinModeAll(254); intervalId = setInterval(function(){ k.analogReadRequest(k.AIO0); }, 200); }); k.connected(function(){ document.body.style.backgroundColor = 'red'; }); k.updatePioInput(function(data){ console.log(data); }); k.disconnected(function(data){ clearInterval(intervalId); }); }; /** * Callback after getting timeline. * @param {Array} tweets Array of tweets. */ Brain.prototype.callBackOfTwitter = function(tweets) { var containsTarget = false; var self = this; $.each(tweets, function(index, tweet) { var row = document.createElement('tr'); var userCell = $('<td>').addClass('username').text(tweet.user.name); var img = $('<img>').attr('src', tweet.user.profile_image_url_https); userCell.append(img); var textCell = $('<td>').addClass('tweet').text(tweet.text); $(row).append(userCell); $(row).append(textCell); $("#timeline-table").append(row); if (tweet.in_reply_to_screen_name == self.targetUser) { containsTarget = true; } }); console.log(tweets); if (containsTarget) { document.body.style.backgroundColor = 'red'; } //if (flag) k.digitalWrite(k.PIO1, k.HIGH); // debugger; this.selectScene(1); }; /** * Class to handle UI elements for settings. */ var SettingUi = function() { this.consumerKeyBox = $('#tw-consumer-key'); this.consumerSecretBox = $('#tw-consumer-secret'); this.accessTokenBox = $('#tw-access-token'); this.accessTokenSecretBox = $('#tw-access-token-secret'); this.targetBox = $('#tw-target'); this.authenticateBtn = $('#authenticate'); }; /** * Gets values in the input boxes. * return {Object} */ SettingUi.prototype.getValues = function() { return { 'consumerKey': this.consumerKeyBox.val(), 'consumerSecret': this.consumerSecretBox.val(), 'accessToken': this.accessTokenBox.val(), 'accessTokenSecret': this.accessTokenSecretBox.val(), 'target': this.targetBox.val() }; }; /** * Sets given values to text boxes. * @param {Object} */ SettingUi.prototype.setValues = function(values) { if (values) { this.consumerKeyBox.val(values.consumerKey || ''); this.consumerSecretBox.val(values.consumerSecret || ''); this.accessTokenBox.val(values.accessToken || ''); this.accessTokenSecretBox.val(values.accessTokenSecret || ''); this.targetBox.val(values.target || ''); } }; /** * Class to handle Twitter API. */ var Twitter = function(opt_keys) { this.consumerKey = ''; this.consumerSecret = ''; this.accessToken = ''; this.accessTokenSecret = ''; if (opt_keys !== undefined) this.setApiKeys(opt_keys); }; /** * Status when an authentication is succeeded. * @type {String} * @const */ Twitter.AUTH_SUCCESS = 'success'; /** * Status when an authentication is failed. * @type {String} * @const */ Twitter.AUTH_FAILURE = 'failure'; /** * API URL to get the home timeline. * @type {String} * @const */ Twitter.HOME_TIMELINE_API_URL = 'https://api.twitter.com/1.1/statuses/home_timeline.json'; /** * API URL to get the user timeline. * @type {String} * @const */ Twitter.USER_TIMELINE_API_URL = 'https://api.twitter.com/1.1/statuses/user_timeline.json'; /** * API URL to tweet. * @type {String} * @const */ Twitter.TWEET_API_URL = 'http://api.twitter.com/1.1/statuses/update'; /** * @param {Object} keys Keys of Twitter API. */ Twitter.prototype.setApiKeys = function(keys) { this.consumerKey = keys.consumerKey || ''; this.consumerSecret = keys.consumerSecret || ''; this.accessToken = keys.accessToken || ''; this.accessTokenSecret = keys.accessTokenSecret || ''; }; /** * Checks whether authentication is succeeded or not. * @param {Function} callback */ Twitter.prototype.checkAuth = function(callback) { this.get(Twitter.USER_TIMELINE_API_URL, function(tweets) { if (tweets.length > 0) { callback(Twitter.AUTH_SUCCESS); } else { callback(Twitter.AUTH_FAILUER); } }, {count: '1'}); }; /** * Gets the user timeline. * @param {Number} count * @param {Function} callback Function to be executed after JSONP access. */ Twitter.prototype.getUserTimeline = function(count, callback) { this.get(Twitter.USER_TIMELINE_API_URL, callback, {count: count}); }; /** * Gets the home timeline. * @param {Number} count * @param {Function} callback Function to be executed after JSONP access. */ Twitter.prototype.getHomeTimeline = function(count, callback) { this.get(Twitter.HOME_TIMELINE_API_URL, callback, {count: count}); }; /** * Accesses API and get JSON data and parse it into JS Object. * @param {String} api API URL. * @param {Function} callback Callback function. * @param {Object} opt_params */ Twitter.prototype.get = function(api, callback, opt_params) { var accessor = { consumerSecret: this.consumerSecret, tokenSecret: this.accessTokenSecret }; var message = { method: "GET", action: api, parameters: { oauth_version: "1.0", oauth_signature_method: "HMAC-SHA1", oauth_consumer_key: this.consumerKey, oauth_token: this.accessToken } }; var funcName = 'twitter' + (new Date).getTime(); message.parameters['callback'] = funcName; window[funcName] = function(json) { callback(json); delete window[funcName]; }; if (opt_params !== undefined) { for (var key in opt_params) { message.parameters[key] = opt_params[key]; } } OAuth.setTimestampAndNonce(message); OAuth.SignatureMethod.sign(message, accessor); var target = OAuth.addToURL(message.action, message.parameters); var options = { type: message.method, url: target, dataType: "jsonp", jsonp: false, cache: true }; $.ajax(options); }; /** Initialize. */ var brain = new Brain(); $(function(){ brain.init(); });<script src="http://jsrun.it/assets/g/3/W/u/g3WuF"></script>  <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>   <script src="http://konashi.ux-xu.com/kjs/konashi-bridge.min.js"></script>  <script src="http://oauth.googlecode.com/svn/code/javascript/oauth.js"></script> <script src="http://oauth.googlecode.com/svn/code/javascript/sha1.js"></script> <div id="screen-container"> <div id="settings-scene" class="scene"> <table id="settings-table"> <tr><td><button id="button" type="button">Connect Konashi</button></td></tr> <tr><td><input id="tw-consumer-key" type="text" class=""></td></tr> <tr><td><input id="tw-consumer-secret" type="text" class=""></td></tr> <tr><td><input id="tw-access-token" type="text" class=""></td></tr> <tr><td><input id="tw-access-token-secret" type="text" class=""></td></tr> <tr><td><input id="tw-target" type="text" class=""></td></tr> <tr><td><button id="authenticate" type="button">Connect Twitter</button></td></tr> <tr><td><button id="show-timeline" type="button">Show Timeline</button></td></tr> </table> <div id="message"></div> </div> <div id="timeline-scene" class="scene hidden"> <table id="timeline-table"></table> </div> </div> * { margin: 0; padding: 0; } .scene { box-sizing: border-box; height: 100%; position: absolute; padding: 50px; width: 100%; } .scene.hidden { display: none; } #settings-scene { background-color: rgb(229, 245, 255); text-align: center; } #settings-table { text-align: center; width: 100%; } #settings-table input { border: 1px solid rgb(200, 200, 200); border-radius: 3px; color: rgb(100, 100, 100); font-size: 20px; height: 30px; margin: 5px; outline: none; padding: 0 10px; width: 100%; } #setting-table input:focus { border-color: rgb(0, 0, 0); } #settings-table button { background-color: rgb(150, 150, 255); border: 1px solid rgb(100, 100, 255); border-radius: 3px; color: white; font-size: 20px; height: 30px; width: 80%; } #settings-table button:hover { background-color: rgb(0, 0, 255); } #timeline-table { height: 100%; overflow-y: scroll; text-align: center; width: 100%; } #timeline-table td { font-size: 10px; } }

Play on jsdo.it games
- Author
- Share
- ブログに埋め込む
- QR
- Tag
Download

Complete!

Description What kind of game?

Control Device

	Smartphone Controllerjsdo.it WebSocket Controller»
	Mouse
	Keyboard
	Touch Device

Fullscreen

Activated
Inactivated

jsdo.it games から削除する Submit

ku6ryo

Size

Width: px
Height: px

code

<script type="text/javascript" src="http://jsdo.it/blogparts/pKiA/js"></script>

QR Code

Discussion

Questions on this code?

Forked

sort by

forked: HAKUNAMATATA - main

ohisama1

227/24/70

forked: HAKUNAMATATA - main

keinitta

376/35/70

Hyoka (氷華）

ku6ryo

1
0
1331

779/52/168
- konashi
- sample

HAKUNAMATATA - main

Description What kind of game?

Control Device

Fullscreen

Author

Default Panel

Size

code

Discussion

Tags

Forked