HTML 5

3D Presentation Framework built on Polymer.js (Web Components)

Introduction

KinoScribe is a 3D Presentation framework built using Polymer.js (Google's Web Component's Library). Using KinoScribe you can create 3D Presentations in which you can layout your side in 3D using

  • Custom Layout - You define all 3D Coordinates, Rotations etc
  • Preset Layouts - Where you use one of the Preset Layouts like "Left to Right", "Top to Bottom", "Box", "Spiral", "Album"

Video Demo

https://www.youtube.com/watch?v=l4Dauw3oJ1o

Home Page

Visit - http://www.kinoscribe.com for live demo

Code Examples

Visit - http://www.kinoscribe.com for live demo

Browser Compatibility

  • Chrome
  • Firefox

Yet to be tested on Safari and IE 10+

Usage

<!doctype html> <html> <head> <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes"> <title>kino-slides Demo</title>

<script src="../platform/platform.js"></script> <link rel="import" href="kinoscribe.html"> <style> kino-slide .slide{ display: block; width: 800px; height: 600px; padding: 40px 60px; background-color: white; border: 1px solid rgba(0, 0, 0, .3); border-radius: 10px; box-shadow: 0 2px 6px rgba(0, 0, 0, .1); color: rgb(102, 102, 102); text-shadow: 0 2px 2px rgba(0, 0, 0, .1); font-family: 'Open Sans', Arial, sans-serif; font-size: 30px; line-height: 36px; letter-spacing: -1px; } </style> </head> <body unresolved>

<kino-pres> <kino-slide x="1000" type="transition" > <section class="slide"> Slide 1 </section> </kino-slide>

<kino-slide x="2500" z="-1000"> <section class="slide"> Slide 2 </section> </kino-slide>

<kino-slide x="4000" z="-2000" scale="3"> <section class="slide"> Slide 3 </section> </kino-slide>

<kino-slide x="5500" z="-3000" rotateZ="45"> <section class="slide"> Slide 4 </section> </kino-slide>

<kino-slide x="7000" rotateX="90" rotateY="90"> <section class="slide"> Slide 5 </section>

</kino-slide> <kino-slide x="8500" z="-1000" > <section class="slide"> Slide 6 </section> </kino-slide>

</body> </html>

Authors

  • Rohit Ghatol - @rohitghatol
  • Nikhil Walvekar - @walvekarnikhil

Learning Jasmine @ Houston.js

@ Houston.js - Learned Jasmine real quick Overview

Jasmine is a Testing Tool for JavaScript

Classes Under Test

Classes under test as follows

var CrewMember = function (name) {
    this.name = name;
}

var Ship = function (name) {
    this.name = name;
    this.crew = [];
    this.goWarp = function () {
        console.log("Going Wrap");
    }

    this.notifyWhenOutofWarp = function(callback){
        setTimeout(callback, 1000);
    }
}

Simplest Test

describe("Crew Member", function () {
    var crew = null;

    beforeEach(function () {
        crew = new CrewMember("Kirk");
    });

    it("should have a name", function () {
        expect(crew.name).toEqual("Kirk");
    });

});

Spy, Run, Wait Feature of Jasmine

describe("Ship", function () {
    var crew = null;
    var ship = null;

    beforeEach(function () {
        crew = new CrewMember("Kirk");
        ship = new Ship("Enterprise");
        spyOn(ship, 'goWarp');
        ship.crew.push(crew);
    });

    it("should have a crew", function () {
        expect(ship.crew.length).toEqual(1);
    });
    it("should go to Warp", function () {
        ship.goWarp();
        expect(ship.goWarp).toHaveBeenCalled();
    });

    it("should call callback when notifyWhenOutofWarp is done", function(){
       var flag = false;
       runs(function() {
           ship.notifyWhenOutofWarp(function() {
               flag = true;        
           });
       });
       waitsFor(function() {
           return flag;
       }, "The notifyWhenOutofWarp(callback) call succeeded", 2000);

       runs(function() {
           expect(flag).toEqual(true);
       });

    });

});

Running Example

[iajsfiddle fiddle="NxgqB" height="500px" width="100%" show="result,js,html" skin="default"]

,

KinoCards - QR Code Business Card Creator for Synerzip

,

KinoCards is a QR Code Business Card Creator. As an Minimal Viable Product, it only supports Synerzip Business Card. Also it does not supports any storage or login functionality in its version 1.

Front Side of Business Card
Inline image 3
QR Codes on Business Card are really helpful. If you ever get a Business Card with a QR Code, take your Smart Phone, start any popular QRCode Scanner App (e.g QR Droid for Android, QR Reader for iPhone, QR Code Reader for Windows Phone). Scan the Business Card (as shown below) and it will import the contact details as a VCard.
Back Side of Business Card
Inline image 4
On the back side of the Business Card is another QR Code, which takes you to a page with entire Social Profile.
How to use from Android Phone (and similarly any other Smart Phone)
 
Step 1
 
Install QR Droid on Android
Step 2
 
Inline image 2
Step 3 
Fill in your details and see the Business cards being created. Download the images for printing.
Step 4
User QR Droid on Android to point to the front of Business Card and see it will prompt you to add the contact in your Address Book
Inline image 9
Inline image 5
Step 5
User QR Droid on Android to point to the back of Business Card and see it will prompt you and open a web page with details about your twitter,linkedin, github pages
 Inline image 10
Inline image 6
Inline image 7
Features in Future
The UI is not yet polished, it will be made polished in next couple of days using Twitter BootStrap. Also we will add the functionality to Login with Synerzip Google Apps, where you can store your profile and browse other people's profile (and scan their business card to import contact directly to your address book).
This MVP (Minimal Viable Product) was done in 6 hours using NodeJs and KnockoutJS and QR Code and HTML5 Canvas APIs.

TechNext Talk - Building Single Page Applications

Building Single Page Applications (in Browsers)

Online Reservations
Register on Meetup to reserve a seat - http://www.meetup.com/TechNext/events/69134552/
When
Saturday, July 21, 20124:00 PM To 6:00 PM
Where

Synerzip Softech Recreational Area

3rd Floor, Revolution Mall, next to CityPride Kothrud, Sheth U M Rathi Path, Pune, Maharashtra, India Kothrud, Pune (map)

Building Single Page Applications (in Browsers)

This session will talk about All Browser based technologies, old, proven, emerging and exciting.

Ajax came in picture around 2005ish and since then became defacto. Then Technologies like Dojo, jQuery, GWT emerged changing how Web Applications where built. Emerging services like Twitter, Facebook defined a new way of writing Web Application called "Single Page Application". And recently we are seeing a surge of frameworks like Sencha Touch 2, ExtJs, Backbone, Spline, Knockout, AngularJs, KindoUI, RequireJs, HandlerBar, Underscore and so many things appear. Its hard to understand where what fits in.

This session will focus on

1. First Understanding Single Page Applications

2. Looking at different Aspects of it

3. Fitting popular Frameworks in different aspects of Single Page Applications

4. We will go and see few of these frameworks at a very high level

Please note this session will not have any major code dives like the others we had in past, but there will be some small code demos. The main purpose of this session is to educate we need to start taking "Single Page Applications" seriously and understand it thoroughly and be able to choose right frameworks for it.

This session will teach you about

1. MVC, MVP and MVVM patterns in the JavaScript world

2. Tell you why History is so important in your Single Page Applications and how to handle it

3. How to do Modular Development using AMD?

4. What are Data Bound Views, What is Micro Templates?

5. How to support HTML 5 properly?

If this session does not suffice we will schedule a follow up session for the same 2 weeks after this one.

  • You must be a member to post a comment. Join or login.