phone-in-browser

A. About

Embed a "functional" phone in your web app. Currently there are 2 apps available in the phone: Chat App and Gallery App.

B. Requirements

  1. phone-in-browser's CSS and JS files.
  2. Font Awesome v5.5.0
  3. Roboto Font
  4. jQuery v3.3.1

C. Version

1.0.0

D. Usage

To try phone-in-browser, just create a HTML file and copy the codes below. This is the minimal setup.

<html>
    <head>
        <title>Example</title>

        <!-- Font Awesome -->
        <link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">
        
        <!-- Roboto Font -->
        <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
        
        <!-- phone-in-browser CSS file -->
        <link rel="stylesheet" type="text/css" href="http://blog.hanmajid.com/css/phone-in-browser/phone-in-browser.min.css">
    </head>                
    <body>
        <div id="my-phone"></div>

        <!-- jQuery -->
        <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
        
        <!-- phone-in-browser JS file -->
        <script src="http://blog.hanmajid.com/js/phone-in-browser/phone-in-browser.min.js"></script>
        <script>
            // initialize the phone-in-browser
            var ph = phone('#my-phone');
        </script>
    <body>
<html>

E. Options

1. Phone Options
Name Description Type Default
isOn If true, phone is on when first loaded. boolean true
battery Battery percentage. integer 80
isInternet If true, the phone has Internet connection (Can be seen in phone header). boolean true
gallery List of images stored in the phone. GalleryObject (See Object Format section below) 2 albums (Camera and Downloads)

Example:

var ph = phone('#my-phone', {
    isOn: false,
    battery: 99,
    isInternet: false,
    gallery: [ ... ] // see GalleryObject in Objects Format section
});
2. Chat App Options

Chat App is LINE-like app for chatting.

Name Description Type Default
profile Your Chat App profile. Object (See example below) (See example below)
friends Your Chat App friends. Array of Objects (See example below) (See example below)
posts Your Chat App timeline posts. Array of Objects (See example below) (See example below)

Example:

var p = phone('#my-phone', {
    // default Chat App options
    line: {
        profile: {
            avatar: 'http://blog.hanmajid.com/images/me-3.jpg',
            name: 'Farhan Majid',
            status: 'hanmajid.com'
        },
        friends: [
            {
                avatar: 'https://api.adorable.io/avatars/285/abott@adorable.png',
                name: 'Abott',
                status: '',
                profileCover: 'https://picsum.photos/300/400',
                messages: [
                    {
                        isYou: false,
                        text: 'Hi',
                        timestamp: '14.46'
                    },
                    {
                        isYou: true,
                        text: 'Hello',
                        timestamp: '14.40'
                    },
                ]
            },
            {
                avatar: 'https://api.adorable.io/avatars/285/Nana@adorable.png',
                name: 'Nana',
                status: 'lol',
                profileCover: 'https://picsum.photos/270/360',
            }
        ],
        posts: [
            {
                avatar: 'https://api.adorable.io/avatars/285/Nana@adorable.png',
                name: 'Nana',
                text: 'Happy borthday to me!',
                timestamp: 'Nov 12 18:53',
                likes: 1,
                comments: [],
                shares: 2,
            },
        ]
    }
});

F. APIs

1. Power Button
var ph = phone('#my-phone');
ph.powerButton();
2. Home Button
var ph = phone('#my-phone');
ph.homeButton();
3. Back Button
var ph = phone('#my-phone');
ph.backButton();

G. Object Format

1. GalleryObject
This is the default value of gallery option. You can see these images with Gallery app. Follow this structure and modify the contents to change the images you want to store on the phone.
gallery: {
    albums: [
        {
            name: "Camera",
            images: [
                {
                    filename: "Landscape",
                    timestamp: "11/22/2018 15:17:46",
                    width: 1200,
                    height: 1200,
                    url: "https://upload.wikimedia.org/wikipedia/commons/thumb/6/67/Inside_the_Batad_rice_terraces.jpg/220px-Inside_the_Batad_rice_terraces.jpg",
                },
            ]
        },
        {
            name: "Downloads",
            images: [
                {
                    filename: "Kitty",
                    timestamp: "11/22/2018 15:17:46",
                    width: 1200,
                    height: 1200,
                    url: "https://placekitten.com/300/300",
                },
                {
                    filename: "Katty",
                    timestamp: "11/22/2018 15:17:46",
                    width: 1200,
                    height: 1200,
                    url: "https://placekitten.com/200/200",
                }, 
                {
                    filename: "Ketty",
                    timestamp: "11/22/2018 15:17:46",
                    width: 1200,
                    height: 1200,
                    url: "https://placekitten.com/400/400",
                }, 
                {
                    filename: "Kotty",
                    timestamp: "11/22/2018 15:17:46",
                    width: 1200,
                    height: 1200,
                    url: "https://placekitten.com/210/210",
                }, 
            ]
        }
    ]
}