Ajay Badgujar

Clamping value using Math library JavaScript

October 13, 2018/0 Comments/in Code Snippets, JavaScript, JavaScript, Math, Web /by Ajay Bagujar

You may be never heard about clamping value in JavaScript. Yes correct its because there is nothing built in available in JavaScript to clamp the values.

Here I have shared few options how we can define clamp function with Math library.

Option 1: Readable

Math.clamp = function(value, min, max){
            if(value < min){
                return min;
            }else if(value > max){
                return max;
            }else{
                return value;
            }
        }

        console.log(Math.clamp(7, 5, 10)); // result 7
        console.log(Math.clamp(2, 5, 10)); // result 5
        console.log(Math.clamp(12, 5, 10)); // result 10

Math.clamp = function(value, min, max){

if(value < min){

return min;

}else if(value > max){

return max;

}else{

return value;

}

console.log(Math.clamp(7, 5, 10)); // result 7

console.log(Math.clamp(2, 5, 10)); // result 5

console.log(Math.clamp(12, 5, 10)); // result 10

Option 2: Compact with readable

Math.clamp = function(val, min, max){
            return Math.min(Math.max(min, val), max);
        }

        console.log(Math.clamp(7, 5, 10)); // result 7
        console.log(Math.clamp(2, 5, 10)); // result 5
        console.log(Math.clamp(12, 5, 10)); // result 10

Math.clamp = function(val, min, max){

return Math.min(Math.max(min, val), max);

}

console.log(Math.clamp(7, 5, 10)); // result 7

console.log(Math.clamp(2, 5, 10)); // result 5

console.log(Math.clamp(12, 5, 10)); // result 10

Option 3 : More compact code

Math.clamp = function(a, b, c){
            Math.max(b,Math.min(c,a));
        }

        console.log(Math.clamp(7, 5, 10)); // result 7
        console.log(Math.clamp(2, 5, 10)); // result 5
        console.log(Math.clamp(12, 5, 10)); // result 10

Math.clamp = function(a, b, c){

Math.max(b,Math.min(c,a));

}

console.log(Math.clamp(7, 5, 10)); // result 7

console.log(Math.clamp(2, 5, 10)); // result 5

console.log(Math.clamp(12, 5, 10)); // result 10

Enjoy…

Keep users in loop

October 11, 2018/0 Comments/in Management /by Ajay Bagujar

In my past days when I was a developer or in other words I can say when I started my career as a Multimedia Programmer in that time I always noticed one thing very common in every project. The thing is getting all requirements from client and going for the coding and testing under secret environment. Initially I was not aware that why project management group wanted to work on every project secretly. Well finally I never get the answer for this question. But yes, same situation I heard from most of my friends too, who are from same industry. And after all users didn’t understand what exactly we are doing. Once the project get completed, our big guys opens all the secrets and the users were expected to appreciate our brilliance of what we had produced. Well… but here most of the time what i experienced was very common reaction from users and that is “Oh well, you did a good job, but what I really wanted was… “ and so on….

But now the days the pattern of work is completely changed. In most of the companies users involvement starts at the very beginning stage of development as there is something visible to show them. It’s always better to know what are the problems with what we are developing at the early stage rather than after completion of project.

The time to rebuild the logic, rebuild functionalities, retesting, and the rework on the software, as well as to integration with other platforms or third party services involved, can delay the project substantially.And both Budget and Timeline are comes in the risk, If the changes are so major that it has to go through Change Control Board process for approval.

While if there are any minor issues or changes in programming decisions then it makes sense to the software developers or project manager, but I am not sure this may create some kind of confusion while software going in use or if their decisions goes wrong.

Conclusion

So conclusion is it is always better to get involved your users as early as possible. So while developing the software it will get tested module to module simultaneously and we can avoid rework and meet the project deadline as well cut the development cost to maintain/improve the good relations with our client.

Creating a Toggle Button using HTML5 CSS3 and JavaScript

October 7, 2018/0 Comments/in CSS, CSS3, HTML5, JavaScript, Web /by Ajay Bagujar

Let’s look how to create Toggle Button. We will cover prettying up using CSS and CSS3.

Before we get started, we need to create a HTML page. So lets create a HTML page.

Setting up HTML page

In my case I always use Visual Studio Code editor to create my any web applications. So create a new index.html file in your new project folder. Just type ‘html’ word and you will get a list of html templates. Select ‘html5’. Here is your HTML basic code must be generated

Now link style.css, script.js, toggle-button.css and toggle.js. So your HTML something look like below code.

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript Toggle Button</title>
    <link href="style.css" rel="stylesheet" type="text/css"/>
    <link href="toggle-btn.css" rel="stylesheet" type="text/css"/>
    <script src="toggle-btn.js"></script>
</head>
<body>
    <script src="script.js"></script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>JavaScript Toggle Button</title>

</head>

<body>

</body>

</html>

Now create style.css, script.js, toggle-button.css and toggle.js in your project folder.

HTML Structure for Toggle Button

Let’s add HTML for Toggle Button.

<div id="js-toggle-btn-1" class="js-toggle-btn">
        <div class="container">
            <div class="handle"></div>
        </div>        
    </div><!-- end of #js-toggle-btn-1 -->

</div>

</div>

As you can see inside button parent div we have created a container and inside that a handle to switch on off.

Style a Toggle Button

Now we have to style it. Open toggle-btn.css and first style the container as a button background. Here will apply horizontal linear gradient to container background. See the CSS below.

.js-toggle-btn{
    cursor: pointer;
}

.js-toggle-btn .container{
    position: relative;    
    width:100px;
    height: 50px;

    background: #21ce21; /* Old browsers */
    background: -moz-linear-gradient(left, #21ce21 50%, #e0e0e0 50%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #21ce21 50%,#e0e0e0 50%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #21ce21 50%,#e0e0e0 50%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

.js-toggle-btn{

cursor: pointer;

}

.js-toggle-btn .container{

position: relative;

width:100px;

height: 50px;

background: #21ce21; /* Old browsers */

background: -moz-linear-gradient(left, #21ce21 50%, #e0e0e0 50%); /* FF3.6-15 */

background: -webkit-linear-gradient(left, #21ce21 50%,#e0e0e0 50%); /* Chrome10-25,Safari5.1-6 */

background: linear-gradient(to right, #21ce21 50%,#e0e0e0 50%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

}

The button must be look like below snapshot.

As you can see we have set the container size 100 x 50 pixels And we have setup container half background color
as green and half background as gray.

Now style the button handle. Set its width and height 50 pixels as well set animation-fill-mode as forward and duration 0.1s.

.js-toggle-btn .container .handle{
    width: 50px;
    height:50px;
    position: absolute;
    top:0px;
    animation-fill-mode : forwards;
    background-color:#111111;    
    animation-duration: .1s;
}

.js-toggle-btn .container .handle{

width: 50px;

height:50px;

position: absolute;

top:0px;

animation-fill-mode : forwards;

background-color:#111111;

animation-duration: .1s;

}

Now to move the handle button, we will use CSS animation. Define two animation sequences in CSS. One for to move to the right to ON the switch and other one for move to left to switch OFF button.

@keyframes kf-toggle-on{
    from{left:0px;}
    to{left:50px;}
}

@keyframes kf-toggle-off{
    from{left:50px;}
    to{left:0px;}
}

@keyframes kf-toggle-on{

from{left:0px;}

to{left:50px;}

}

@keyframes kf-toggle-off{

from{left:50px;}

to{left:0px;}

}

In above code you can see, How I have setup start and end point of handle position setting its left position value.

Once you done everything with CSS. The preview must be look like below image.

Make Toggle Button Interactive

Now its time to make the button interactive. So open the toggle-btn.js you created and define ToggleButton class. See the code below.

// toggle-btn.js
class ToggleButton{

    constructor(id){
        this.id = id;

        // get element
        this.element = document.getElementById(id);

        // get handle element
        this.handle = this.element.getElementsByClassName('handle')[0];

        // Set initial stage of button
        this.state = 'off';

        // Add the click event to the element to toggle on off button
        this.element.addEventListener('click', this.on_click.bind(this));
    }

    // Click handler to on off button
    on_click(e){
        
        // Switch ON button if state is OFF by assigning a ON animation
        if(this.state == 'off'){
            this.handle.style.animationName = "kf-toggle-on";
            this.state = 'on';
        }else{ // Switch OFF button if state is ON by assigning a OFF animation
            this.handle.style.animationName = "kf-toggle-off";
            this.state = 'off';
        }
    }

}

// toggle-btn.js

class ToggleButton{

constructor(id){

this.id = id;

// get element

this.element = document.getElementById(id);

// get handle element

this.handle = this.element.getElementsByClassName('handle')[0];

// Set initial stage of button

this.state = 'off';

// Add the click event to the element to toggle on off button

this.element.addEventListener('click', this.on_click.bind(this));

}

// Click handler to on off button

on_click(e){

// Switch ON button if state is OFF by assigning a ON animation

if(this.state == 'off'){

this.handle.style.animationName = "kf-toggle-on";

this.state = 'on';

}else{ // Switch OFF button if state is ON by assigning a OFF animation

this.handle.style.animationName = "kf-toggle-off";

this.state = 'off';

}

In above code you can see in on_click(e) handler how the animation name is switched as per its current state.

Implementing Toggle Button

Once class is created now its time make it functional in HTML page. So open the script.js and add the below code.

// script.js
var mybtn = new ToggleButton("js-toogle-btn-1");

1 2	// script.js var mybtn = new ToggleButton("js-toogle-btn-1");

Now refresh the page and try clicking on button.

Download source from here

Creating Custom Combobox or Select box using HTML CSS and JavaScript

September 30, 2018/0 Comments/in Uncategorized /by Ajay Bagujar

Combobox or as you know Select box in HTML5 is most common form element used in many websites. But sometime due to limitation of HTML select box we cant style it as per our requirement or we have to use some kind of css or javascript trick to get the result. But still we can say it is right way. So what is correct way? Yes… we have to create custom element instead use HTML select box. But how to create it. So lets see how we can create it.

Before start creating Combobox we will need HTML document created. So first create HTML file named index.html.

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Custom Combobox</title>
    <link href="style.css" rel="stylesheet" type="text/css"/>
    <link href="custom-combo.css" rel="stylesheet" type="text/css"/>
    <script src="custom-combo.js"></script>
</head>
<body>
    

    <script src="script.js"></script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Custom Combobox</title>

</head>

<body>

</body>

</html>

Now add below html into body tag

<div id="custom-combobox-1" class="custom-combobox">
        <div class="selected-option"></div>
        <div class="options">
            <div class="option active">Default</div>
            <div class="option">Option 1</div>
            <div class="option">Option 2</div>
            <div class="option">Option 3</div>
            <div class="option">Option 4</div>
        </div>
    </div><!--end of #custom-combobox-1 -->

<div class="option active">Default</div>

<div class="option">Option 1</div>

<div class="option">Option 2</div>

<div class="option">Option 3</div>

<div class="option">Option 4</div>

</div>

</div>

After create HTML file create more 4 files sytle.css, script.js, custom-combo.js and custom-combo.css

You can sytle the html page and set combobox placement in html page by adding css into style.css.

/*style.css*/
body{
    margin:0px;
}

#custom-combobox-1{
    width:120px;
    left:100px;
    top:100px;
    position: absolute;
}

/*style.css*/

body{

margin:0px;

}

#custom-combobox-1{

width:120px;

left:100px;

top:100px;

position: absolute;

}

Now assign style to Combobox as well. Add below CSS into custom-combo.css.

/*custom-combo.css*/
.custom-combobox {
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
  cursor: pointer;
  border: thin solid #bababa;
}
.custom-combobox .selected-option {
  background-image: url("down-arrow-white.png");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding: 5px 10px;
  background-color: #3d696f;
  color: white;
}
.custom-combobox .selected-option:hover {
  background-color: #b0cdd1;
  color: white;
}
.custom-combobox .options {
  display: none;
}
.custom-combobox .options .option {
  padding: 5px 10px;
  border-top: solid thin #bababa;
}
.custom-combobox .options .option.active, .custom-combobox .options .option:hover {
  background-color: #b0cdd1;
  color: white;
}

/*custom-combo.css*/

.custom-combobox {

font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;

cursor: pointer;

border: thin solid #bababa;

}

.custom-combobox .selected-option {

background-image: url("down-arrow-white.png");

background-repeat: no-repeat;

background-position: right 10px center;

padding: 5px 10px;

background-color: #3d696f;

color: white;

}

.custom-combobox .selected-option:hover {

background-color: #b0cdd1;

color: white;

}

.custom-combobox .options {

display: none;

}

.custom-combobox .options .option {

padding: 5px 10px;

border-top: solid thin #bababa;

}

.custom-combobox .options .option.active, .custom-combobox .options .option:hover {

background-color: #b0cdd1;

color: white;

}

Once you style the Combobox, the Combobox will something look like below screenshot.

Open the custom-combo.js then add below JavaScript Code into the file. The comments in the below code will help you to understand the code.

// custom-combo.js
class CustomCombo{

    constructor(id){
        // Get the combobox element
        this.element = document.getElementById(id);

        // Get the options parent element
        this.options_container = this.element.getElementsByClassName("options")[0];

        // Get the all options in array
        this.option_doms = this.element.getElementsByClassName("option");

        // Get the element to show selected option
        this.selected_option = this.element.getElementsByClassName("selected-option")[0];

        // Show first option selected default.
        this.selected_option.innerHTML = this.option_doms[0].innerHTML;

        // Initialize component
        this.init();
    }

    init(){
        // Set options container hidden by default
        this.options_container.style.display = "none";

        // Add click event to selected option element to hide show the options
        this.selected_option.addEventListener("click", this.on_click.bind(this));
        
        // Add click event to document to hide options list when click outside of the combobox
        document.addEventListener("click" , this.closecombo.bind(this));       

        // Add click event to all options to pick that option.
        for(var i=0; i<this.option_doms.length; i++){
            this.option_doms[i].addEventListener("click", this.on_select_option.bind(this));
        }
    }

    // Click handler to show hide options list
    on_click(e){
        e.stopPropagation();
        if(this.options_container.style.display == "none"){
            this.options_container.style.display = "block";   
        }else{
            this.options_container.style.display = "none";
        }    
    }

    // Click handler to hide options list while click outside of the combobox
    closecombo(e){
        this.options_container.style.display = "none";
    }
    
    // Select handler to pick the option and set it as current selected option
    on_select_option(e){
        for(var i=0; i<this.option_doms.length; i++){
            this.option_doms[i].classList.remove("active");
        }
        var option = e.target;
        option.classList.add("active");
        this.selected_option.innerHTML = option.innerHTML;
    }
}

// custom-combo.js

class CustomCombo{

constructor(id){

// Get the combobox element

this.element = document.getElementById(id);

// Get the options parent element

this.options_container = this.element.getElementsByClassName("options")[0];

// Get the all options in array

this.option_doms = this.element.getElementsByClassName("option");

// Get the element to show selected option

this.selected_option = this.element.getElementsByClassName("selected-option")[0];

// Show first option selected default.

this.selected_option.innerHTML = this.option_doms[0].innerHTML;

// Initialize component

this.init();

}

init(){

// Set options container hidden by default

this.options_container.style.display = "none";

// Add click event to selected option element to hide show the options

this.selected_option.addEventListener("click", this.on_click.bind(this));

// Add click event to document to hide options list when click outside of the combobox

document.addEventListener("click" , this.closecombo.bind(this));

// Add click event to all options to pick that option.

for(var i=0; i<this.option_doms.length; i++){

this.option_doms[i].addEventListener("click", this.on_select_option.bind(this));

}

// Click handler to show hide options list

on_click(e){

e.stopPropagation();

if(this.options_container.style.display == "none"){

this.options_container.style.display = "block";

}else{

this.options_container.style.display = "none";

}

// Click handler to hide options list while click outside of the combobox

closecombo(e){

this.options_container.style.display = "none";

}

// Select handler to pick the option and set it as current selected option

on_select_option(e){

for(var i=0; i<this.option_doms.length; i++){

this.option_doms[i].classList.remove("active");

}

var option = e.target;

option.classList.add("active");

this.selected_option.innerHTML = option.innerHTML;

}

Now open script.js and initialize CustomComobox by passing id of the combobox html element. See the code below.

// script.js
var mycombo1 = new CustomCombo("custom-combobox-1");

1 2	// script.js var mycombo1 = new CustomCombo("custom-combobox-1");

And here is your custom combbox ready to use.

Download source from here

Creating Simple Range Slider Component Using JavaScript

September 23, 2018/0 Comments/in HTML5, JavaScript, Web /by Ajay Bagujar

Writing components is little bit difficult task while developing a web based application, specially when you are a beginner or you don’t know how to write it and implement it.

So lets see how we can create a simple Range Slider component using HTML/CSS/JavaScript.

Before writing JavaScript for component, first we will need a HTML Page. Also we will need a style.css to style the page and script.js to initialize the component. After create HTML page the code will something look like below.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Range Slider</title> 
    <link href="style.css" rel="stylesheet" type="text/css"/>  
</head>
<body>    

    <script src="script.js"></script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Range Slider</title>

</head>

<body>

</body>

</html>

Now add Range Slider HTML inside document body.

<body>
    <div id="range-slider-1" class="range-slider outer-container">
        <div class="inner-container">
            <div class="slider-bar"></div>
            <div class="handle"></div>            
        </div><!-- .inner-container -->
    </div><!-- #range-slider-1 -->

    <script src="script.js"></script>
</body>

<body>

</div>

</div>

</body>

Now create a file named range-slider.css and write the style for it. Then link css to main HTML.

.range-slider {
  position: absolute;
  width: 400px;
  background-color: #f0f0f0;
  border-radius: 18px;
}
.range-slider .inner-container {
  position: relative;
  width: 100%;
  height: 35px;
}
.range-slider .inner-container .handle {
  width: 35px;
  height: 35px;
  position: absolute;
  top: 0px;
  left: 0px;
  border-radius: 100%;
  background-color: silver;
  cursor: pointer;
}
.range-slider .inner-container .slider-bar {
  position: absolute;
  width: 100%;
  height: 5px;
  margin-top: 15px;
  background-color: #5a5a5a;
}

.range-slider {

position: absolute;

width: 400px;

background-color: #f0f0f0;

border-radius: 18px;

}

.range-slider .inner-container {

position: relative;

width: 100%;

height: 35px;

}

.range-slider .inner-container .handle {

width: 35px;

height: 35px;

position: absolute;

top: 0px;

left: 0px;

border-radius: 100%;

background-color: silver;

cursor: pointer;

}

.range-slider .inner-container .slider-bar {

position: absolute;

width: 100%;

height: 5px;

margin-top: 15px;

background-color: #5a5a5a;

}

So on the browser it will something look like below screenshot.

Now Create a range-slider.js and link it to main page inside title.
Then write the following code into the file.

class RangeSlider {

    // Constructor
    constructor(options) {
        this.id = options.id;
        this.element = document.getElementById(this.id);

        // Get the slider handle
        this.handle = this.element.getElementsByClassName("handle")[0];

        // Add mouse down event to slider handle
        this.handle.addEventListener("mousedown", this.on_handle_pressed.bind(this));

        // Set minimum and maximum bound of moving handle.
        // Minimum bound will be 0. So handle will not go outside of the slider from left side      
        this.minbound = 0;

        // Maximum bound should be set as witdth of the range slider minus handle width. So handle 
        // will not go outside of the slider from right side.
        this.maxbound = this.element.getBoundingClientRect().width - this.handle.getBoundingClientRect().width;
    }

    // Handle pressed handler
    on_handle_pressed(e) {

        // Get the pressed handle DOM
        this.handle = e.currentTarget;
        
        // Bind this class to move and up handlers. So in up handler it can be removable.
        this.binded_on_handle_move = this.on_handle_move.bind(this);
        this.binded_on_handle_up = this.on_handle_up.bind(this);

        // Add mouse move and mouse up event to document to move slider handle and stop handle.
        document.addEventListener("mousemove", this.binded_on_handle_move);
        document.addEventListener("mouseup", this.binded_on_handle_up);

    }

    // Handle move handler
    on_handle_move(e) {

        // Get the movement X of mouse pointer
        var movementX = e.movementX;

        // Get the handle current relative position
        var left = this.handle.offsetLeft;

        // Add mouse x movement and handle left postion
        left = left + movementX;

        // Set the value to handle x position
        if (left >= this.minbound && left <= this.maxbound) {
            this.handle.style.left = left + "px";
        }
    }

    // Handle stop handler
    on_handle_up(e) {
        // Stop handle movement by removing events from document.
        document.removeEventListener("mousemove", this.binded_on_handle_move);
        document.removeEventListener("mouseup", this.binded_on_handle_up);
    }
}

class RangeSlider {

// Constructor

constructor(options) {

this.id = options.id;

this.element = document.getElementById(this.id);

// Get the slider handle

this.handle = this.element.getElementsByClassName("handle")[0];

// Add mouse down event to slider handle

this.handle.addEventListener("mousedown", this.on_handle_pressed.bind(this));

// Set minimum and maximum bound of moving handle.

// Minimum bound will be 0. So handle will not go outside of the slider from left side

this.minbound = 0;

// Maximum bound should be set as witdth of the range slider minus handle width. So handle

// will not go outside of the slider from right side.

this.maxbound = this.element.getBoundingClientRect().width - this.handle.getBoundingClientRect().width;

}

// Handle pressed handler

on_handle_pressed(e) {

// Get the pressed handle DOM

this.handle = e.currentTarget;

// Bind this class to move and up handlers. So in up handler it can be removable.

this.binded_on_handle_move = this.on_handle_move.bind(this);

this.binded_on_handle_up = this.on_handle_up.bind(this);

// Add mouse move and mouse up event to document to move slider handle and stop handle.

document.addEventListener("mousemove", this.binded_on_handle_move);

document.addEventListener("mouseup", this.binded_on_handle_up);

}

// Handle move handler

on_handle_move(e) {

// Get the movement X of mouse pointer

var movementX = e.movementX;

// Get the handle current relative position

var left = this.handle.offsetLeft;

// Add mouse x movement and handle left postion

left = left + movementX;

// Set the value to handle x position

if (left >= this.minbound && left <= this.maxbound) {

this.handle.style.left = left + "px";

}

// Handle stop handler

on_handle_up(e) {

// Stop handle movement by removing events from document.

document.removeEventListener("mousemove", this.binded_on_handle_move);

document.removeEventListener("mouseup", this.binded_on_handle_up);

}

Initiate the Range Slider into script.js.

var range_slider_1 = new RangeSlider({id:"range-slider-1"});

1	var range_slider_1 = new RangeSlider({id:"range-slider-1"});

And now try moving slider handle in browser.

Download Source Code from here

Creating simple block breaking game using CreateJS

October 19, 2017/0 Comments/in CreateJS, Game Design, HTML5, JavaScript /by Ajay Bagujar

Breaking bricks is the most popular game you may played sometime online or offline and you would like to make it as a beginning of game development.
Creating simple block breaking game using CreateJS
Here I am going to show you how simply you can create break it game in HTML5 using CreateJS. CreateJS is the collection of libraries which allow us to create interactive content on HTML5.
Understanding game and development flow.
Before start code the game. We need to first understand how game will be played and what will be the development flow.
The game is simple. The player must be prevent the ball to go out the stage by moving paddle left and right .

And the flow of development . . .

Setting up game file structure and interface
Declaring game constants and variables
Initializing the Game
Creating Rest of the Game Elements
Moving Paddle with Mouse Input
Creating Game Loop
Run and Test the Game

Setting up game file structure and interface

Now we have complete understanding of game and its flow. Let’s create first HTML file and include createjs cdn into it. Add game souce code file and name it game.js file. Add canvas into HTML, set canvas width 800 and height 600 which background color black.

<!DOCTYPE html>
<html>
    <head>
        <title>Break It</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
        <script src="game.js"></script>
    </head>
    <body onload=”init()”>
        <div id="title">Break It</div>
        <div id="container">
            <canvas id="canvas" width="800" height="500" style="background-color:#000;"></canvas>
        </div>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Break It</title>

</head>

<div id="title">Break It</div>

</div>

</body>

</html>

Now style the game fontend interface by adding css style.

<style>
            body{
                margin: 0px;
            }
            
            #title{
                width: 300px;
                text-align: center;
                font-size: 36px;
                font-family: Arial;
                margin: 10px auto;
            }
            
            #container{                
                margin-left: auto;
                margin-right: auto;
                width: 800px;
            }
            
            canvas{
                
            }
        </style>

<style>

body{

margin: 0px;

}

#title{

width: 300px;

text-align: center;

font-size: 36px;

font-family: Arial;

margin: 10px auto;

}

#container{

margin-left: auto;

margin-right: auto;

width: 800px;

}

canvas{

}

</style>

After setup html file you must see something like below on browser.

Creating simple block breaking game using CreateJS

Now move into the game logic…

Declaring game constants and variables

Before start write game logic lets declair required constants and variables which will be used in throughout the game. Generaly constants and variables are declaired at the top of the script.

// Game Constants
const SIDE_WALL_THICKNESS = 10;
const SIDE_WALL_COLOR = "#bababa";
const PADDLE_WIDTH = 100;
const BLOCK_OFFSET = 30;
const BLOCK_SIZE = 30;
const BALL_SPEED = 5;
const BALL_RADIUS = 10;

// Game Constants

const SIDE_WALL_THICKNESS = 10;

const SIDE_WALL_COLOR = "#bababa";

const PADDLE_WIDTH = 100;

const BLOCK_OFFSET = 30;

const BLOCK_SIZE = 30;

const BALL_SPEED = 5;

const BALL_RADIUS = 10;

Constants represents the value won’t change during the game play. The first two constants are defined for side wall thickness and its color. Then paddle width, blocks distance from wall and block size. And lastly ball speed and its radius.

Then variables

// Game Variables
var stage, canvas, paddle, ball;
var blocks = [];

// Game Variables

var stage, canvas, paddle, ball;

var blocks = [];

In the first set of variables is created for stage and other visual elements such as paddle and ball. The blocks array will initally start with empty and will be used to store all the blocks while creating, reading and deleting each individual block runtime.

Initializing the Game

Here we will initialize the game from init function which we call after load all the essantial assets and game elements which we required in game.

Since we are not using any image graphics elements or sounds in this game, so there will be no content to preload. Lets call call init function after load html body.

<body onload=”init()”>

1	<body onload=”init()”>

And now init function.

function init(){
    canvas = document.getElementById('canvas');
    stage = new createjs.Stage(canvas);
    stage.on("stagemousemove",movePaddle);
    buildSideWalls();
    createPaddle();
    createBlocks();
    createBall();  
    startGame();
}

function init(){

canvas = document.getElementById('canvas');

stage = new createjs.Stage(canvas);

stage.on("stagemousemove",movePaddle);

buildSideWalls();

createPaddle();

createBlocks();

createBall();

startGame();

}

CreateJS has its own methods to create stage by getting canvas reference, that you can see first two lines of code in above function. The third line of code is for add the listner to stage on mouse move, so user can move the paddle by moving mouse left and right. Other four functions to create game elements like side walls, paddle, ball and blocks. And the startGame function will trigger the gameLoop and handle all the animations of game. See the function below.

function startGame(){
    createjs.Ticker.setFPS(60);
    createjs.Ticker.addEventListener("tick", function(e){
        gameLoop();
        stage.update();
    });
}

function startGame(){

createjs.Ticker.setFPS(60);

createjs.Ticker.addEventListener("tick", function(e){

gameLoop();

stage.update();

});

}

Creating Rest of the Game Elements

Now its time to create all game elements like we discussed above, that is side walls, paddle, ball and blocks.

First we need to build the walls all the sides of the stage as a boundry of game so ball will no go outside the stage.

function buildSideWalls(){
    var wall = new createjs.Shape();
    wall.graphics.beginFill(SIDE_WALL_COLOR);
    wall.graphics.drawRect(0, 0, SIDE_WALL_THICKNESS, canvas.height);
    stage.addChild(wall);
    wall = new createjs.Shape();
    wall.graphics.beginFill(SIDE_WALL_COLOR);
    wall.graphics.drawRect(0,0, SIDE_WALL_THICKNESS, canvas.height);
    wall.x = canvas.width - SIDE_WALL_THICKNESS;
    stage.addChild(wall);
    wall = new createjs.Shape();
    wall.graphics.beginFill(SIDE_WALL_COLOR);
    wall.graphics.drawRect(0, 0, canvas.width, SIDE_WALL_THICKNESS);
    stage.addChild(wall);
    wall = new createjs.Shape();
    wall.graphics.beginFill(SIDE_WALL_COLOR);
    wall.graphics.drawRect(0, 0, canvas.width, SIDE_WALL_THICKNESS);
    wall.y = canvas.height - SIDE_WALL_THICKNESS;
    stage.addChild(wall); 
}

function buildSideWalls(){

var wall = new createjs.Shape();

wall.graphics.beginFill(SIDE_WALL_COLOR);

wall.graphics.drawRect(0, 0, SIDE_WALL_THICKNESS, canvas.height);

stage.addChild(wall);

wall = new createjs.Shape();

wall.graphics.beginFill(SIDE_WALL_COLOR);

wall.graphics.drawRect(0,0, SIDE_WALL_THICKNESS, canvas.height);

wall.x = canvas.width - SIDE_WALL_THICKNESS;

stage.addChild(wall);

wall = new createjs.Shape();

wall.graphics.beginFill(SIDE_WALL_COLOR);

wall.graphics.drawRect(0, 0, canvas.width, SIDE_WALL_THICKNESS);

stage.addChild(wall);

wall = new createjs.Shape();

wall.graphics.beginFill(SIDE_WALL_COLOR);

wall.graphics.drawRect(0, 0, canvas.width, SIDE_WALL_THICKNESS);

wall.y = canvas.height - SIDE_WALL_THICKNESS;

stage.addChild(wall);

}

In above code we have created four walls on left, right, top and bottom edge of the stage one by one. And below is the result you can see.

Creating simple block breaking game using CreateJS

Now create paddle and ball.

function createPaddle(){
    paddle = new createjs.Shape();
    paddle.width = PADDLE_WIDTH;
    paddle.height = 20;
    paddle.regX = paddle.width/2;
    paddle.graphics.beginFill("#1144ff");    
    paddle.graphics.drawRect(0, 0, paddle.width, paddle.height);
    paddle.x = paddle.width/2 + SIDE_WALL_THICKNESS;
    paddle.y = canvas.height - paddle.height - SIDE_WALL_THICKNESS;
    stage.addChild(paddle);    
}

function createBall(){
    ball = new createjs.Shape();
    ball.width = 20;
    ball.height = 20;
    ball.graphics.beginFill("#fff");
    ball.graphics.drawCircle(0,0,BALL_RADIUS);
    ball.xVel = BALL_SPEED;
    ball.yVel = BALL_SPEED;
    ball.x = canvas.width/2;
    ball.y = canvas.height/2;
    stage.addChild(ball);    
}

function createPaddle(){

paddle = new createjs.Shape();

paddle.width = PADDLE_WIDTH;

paddle.height = 20;

paddle.regX = paddle.width/2;

paddle.graphics.beginFill("#1144ff");

paddle.graphics.drawRect(0, 0, paddle.width, paddle.height);

paddle.x = paddle.width/2 + SIDE_WALL_THICKNESS;

paddle.y = canvas.height - paddle.height - SIDE_WALL_THICKNESS;

stage.addChild(paddle);

}

function createBall(){

ball = new createjs.Shape();

ball.width = 20;

ball.height = 20;

ball.graphics.beginFill("#fff");

ball.graphics.drawCircle(0,0,BALL_RADIUS);

ball.xVel = BALL_SPEED;

ball.yVel = BALL_SPEED;

ball.x = canvas.width/2;

ball.y = canvas.height/2;

stage.addChild(ball);

}

Creating simple block breaking game using CreateJS

Now we have created paddle as wel ball. You can see in createBall function we have set x and y velocity for ball to control the ball x and y speed with its direction on the stage. We will see this in next section.

Let’s see how to create all blocks. See the function below.

Here I am going to create all the blocks and place them in two rows with alternate color. Simultaneously I will store each block into blocks array so I can access each block later in game loop to check collision between block and the ball.

function createBlocks(){
    var blockColors = ['#325184', '#5f8432'];
    
    for(var i=0; i<48; i++){
        var block = new createjs.Shape();
        
        if(i < 24){
            blockColors = ['#325184', '#5f8432'];
        }else{
            blockColors = ['#5f8432', '#325184'];
        }
        
        block.graphics.beginFill(blockColors[i%2]);
        block.graphics.drawRect(0, 0, BLOCK_SIZE, BLOCK_SIZE);       
        block.x = (((i > 23)? i - 24 : i) * BLOCK_SIZE) + SIDE_WALL_THICKNESS + BLOCK_OFFSET;
        block.y = SIDE_WALL_THICKNESS + BLOCK_OFFSET + ((i > 23)? BLOCK_OFFSET : 0);
        block.width = block.height = BLOCK_SIZE;
        blocks.push(block);
        stage.addChild(block);
    }
}

function createBlocks(){

var blockColors = ['#325184', '#5f8432'];

for(var i=0; i<48; i++){

var block = new createjs.Shape();

if(i < 24){

blockColors = ['#325184', '#5f8432'];

}else{

blockColors = ['#5f8432', '#325184'];

}

block.graphics.beginFill(blockColors[i%2]);

block.graphics.drawRect(0, 0, BLOCK_SIZE, BLOCK_SIZE);

block.x = (((i > 23)? i - 24 : i) * BLOCK_SIZE) + SIDE_WALL_THICKNESS + BLOCK_OFFSET;

block.y = SIDE_WALL_THICKNESS + BLOCK_OFFSET + ((i > 23)? BLOCK_OFFSET : 0);

block.width = block.height = BLOCK_SIZE;

blocks.push(block);

stage.addChild(block);

}

Creating simple block breaking game using CreateJS

Now it’s time to move paddle on mouse move.

Moving Paddle with Mouse Input

You might be seen in this kind of games generally paddles are moved by left and right key or keyboard inputs. But what about moving paddle on mouse left right movement. To do this first of all we have to add listener mouse move listener to stage to get mouse x co-ordinates when mouse will move on stage.

stage.on("stagemousemove",movePaddle);

1	stage.on("stagemousemove",movePaddle);

The above line of code we have added in init() function after created the stage.

Now create the movePaddle() function which will call on mouse move event.

function movePaddle(e){
    
        var mouseX = e.stageX;   
        var leftMoveLimit = SIDE_WALL_THICKNESS + (paddle.width/2);
        var rightMoveLimit = canvas.width - (paddle.width/2) - SIDE_WALL_THICKNESS;
        
        if(mouseX < leftMoveLimit){
            paddle.nextX = leftMoveLimit;
        }else if(mouseX > rightMoveLimit){
            paddle.nextX = rightMoveLimit;
        }else{
            paddle.nextX = mouseX;
        }       
    
    paddle.x = paddle.nextX;
    //console.log(paddle.x);
}

function movePaddle(e){

var mouseX = e.stageX;

var leftMoveLimit = SIDE_WALL_THICKNESS + (paddle.width/2);

var rightMoveLimit = canvas.width - (paddle.width/2) - SIDE_WALL_THICKNESS;

if(mouseX < leftMoveLimit){

paddle.nextX = leftMoveLimit;

}else if(mouseX > rightMoveLimit){

paddle.nextX = rightMoveLimit;

}else{

paddle.nextX = mouseX;

}

paddle.x = paddle.nextX;

//console.log(paddle.x);

}

As you already know we just want to move paddle left and right. So we will only use mouse X coordinates. Add the above logic in your code and see the result.

Creating simple block breaking game using CreateJS

Creating Game Loop

Now we have created all the elements with moving paddle. Now it’s time to create game loop and check ball collision with walls blocks and paddle one by one and change the ball direction.

function startGame(){
    createjs.Ticker.setFPS(60);
    createjs.Ticker.addEventListener("tick", function(e){
        gameLoop();
        stage.update();
    });
}

function gameLoop(){
    checkWalls();
    checkPaddle();
    checkBlocks();
    updateBallNextPos();
}

In gameLoop() function you can see we have called three functions to check ball collision with each kind of element and the last one is to update ball position and the direction once we complete the checking collision.

function checkWalls(){
    ball.nextX = ball.x + ball.xVel;
    ball.nextY = ball.y + ball.yVel;
    
    if(ball.nextX > (canvas.width - SIDE_WALL_THICKNESS - BALL_RADIUS) || ball.nextX < (SIDE_WALL_THICKNESS + BALL_RADIUS)){
        ball.xVel = ball.xVel * -1;
        ball.nextX = ball.x + ball.xVel;
    }
    
    if(ball.nextY < (SIDE_WALL_THICKNESS + BALL_RADIUS)){
        ball.yVel = ball.yVel * -1;
        ball.nextY = ball.y + ball.yVel;
    }else if(ball.nextY > (canvas.height + 500)){
        ball.yVel = BALL_SPEED;
        ball.nextY = canvas.height/2;        
    }    
}

function checkPaddle(){
    if((ball.nextY + BALL_RADIUS) == paddle.y && (paddle.x - (paddle.width/2)) < ball.x &&  (paddle.x + (paddle.width/2)) > ball.x){
        ball.yVel = ball.yVel * -1;
        ball.nextY = ball.y + ball.yVel;
    }        
}

function checkBlocks(){
    var ballLeftBound = ball.nextX - BALL_RADIUS;
    var ballRightBound = ball.nextX + BALL_RADIUS;
    var ballTopBound = ball.nextY - BALL_RADIUS;
    var ballBottomBound = ball.nextY + BALL_RADIUS;
    
    for(var i=0; i<blocks.length; i++){
        var block = blocks[i];
        var blockLeftBound = block.x;
        var blockRightBound = block.x + block.width;
        var blockTopBound = block.y;
        var blockBottomBound = block.y + block.height;
        
        //Check collision from left side of block
        if(ball.xVel > 0 && blockLeftBound == ballRightBound && blockTopBound < ballBottomBound && blockBottomBound > ballTopBound){
            ball.xVel = ball.xVel * -1;            
            stage.removeChild(block);
            blocks.splice(i, 1);
            ball.nextX = ball.x + ball.xVel;
            break;
        }else if(ball.xVel < 0 && blockRightBound == ballLeftBound && blockTopBound < ballBottomBound && blockBottomBound > ballTopBound){
            // Check collision from right side of block
            ball.xVel = ball.xVel * -1;            
            stage.removeChild(block);
            blocks.splice(i, 1);
            ball.nextX = ball.x + ball.xVel;
            break;
        }else if(ball.yVel > 0 && blockTopBound == ballBottomBound && blockLeftBound < ballRightBound && blockRightBound > ballLeftBound){
            // Check collision from top side of block
            ball.yVel *= -1;
            stage.removeChild(block);
            blocks.splice(i, 1);
            ball.nextY = ball.y + ball.yVel;
            break;
        }else if(ball.yVel < 0 && blockBottomBound == ballTopBound && blockLeftBound < ballRightBound && blockRightBound > ballLeftBound ){
            // Check collistion from bottom side of block
            ball.yVel *= -1;
            stage.removeChild(block);
            blocks.splice(i, 1);
            ball.nextY = ball.y + ball.yVel;
            break;
        }
    } // end for
}

function updateBallNextPos(){
    console.log(ball.y);
    ball.x = ball.nextX;
    ball.y = ball.nextY;
}

function startGame(){

createjs.Ticker.setFPS(60);

createjs.Ticker.addEventListener("tick", function(e){

gameLoop();

stage.update();

});

}

function gameLoop(){

checkWalls();

checkPaddle();

checkBlocks();

updateBallNextPos();

}

In gameLoop() function you can see we have called three functions to check ball collision with each kind of element and the last one is to update ball position and the direction once we complete the checking collision.

function checkWalls(){

ball.nextX = ball.x + ball.xVel;

ball.nextY = ball.y + ball.yVel;

if(ball.nextX > (canvas.width - SIDE_WALL_THICKNESS - BALL_RADIUS) || ball.nextX < (SIDE_WALL_THICKNESS + BALL_RADIUS)){

ball.xVel = ball.xVel * -1;

ball.nextX = ball.x + ball.xVel;

}

if(ball.nextY < (SIDE_WALL_THICKNESS + BALL_RADIUS)){

ball.yVel = ball.yVel * -1;

ball.nextY = ball.y + ball.yVel;

}else if(ball.nextY > (canvas.height + 500)){

ball.yVel = BALL_SPEED;

ball.nextY = canvas.height/2;

}

function checkPaddle(){

if((ball.nextY + BALL_RADIUS) == paddle.y && (paddle.x - (paddle.width/2)) < ball.x && (paddle.x + (paddle.width/2)) > ball.x){

ball.yVel = ball.yVel * -1;

ball.nextY = ball.y + ball.yVel;

}

function checkBlocks(){

var ballLeftBound = ball.nextX - BALL_RADIUS;

var ballRightBound = ball.nextX + BALL_RADIUS;

var ballTopBound = ball.nextY - BALL_RADIUS;

var ballBottomBound = ball.nextY + BALL_RADIUS;

for(var i=0; i<blocks.length; i++){

var block = blocks[i];

var blockLeftBound = block.x;

var blockRightBound = block.x + block.width;

var blockTopBound = block.y;

var blockBottomBound = block.y + block.height;

//Check collision from left side of block

if(ball.xVel > 0 && blockLeftBound == ballRightBound && blockTopBound < ballBottomBound && blockBottomBound > ballTopBound){

ball.xVel = ball.xVel * -1;

stage.removeChild(block);

blocks.splice(i, 1);

ball.nextX = ball.x + ball.xVel;

break;

}else if(ball.xVel < 0 && blockRightBound == ballLeftBound && blockTopBound < ballBottomBound && blockBottomBound > ballTopBound){

// Check collision from right side of block

ball.xVel = ball.xVel * -1;

stage.removeChild(block);

blocks.splice(i, 1);

ball.nextX = ball.x + ball.xVel;

break;

}else if(ball.yVel > 0 && blockTopBound == ballBottomBound && blockLeftBound < ballRightBound && blockRightBound > ballLeftBound){

// Check collision from top side of block

ball.yVel *= -1;

stage.removeChild(block);

blocks.splice(i, 1);

ball.nextY = ball.y + ball.yVel;

break;

}else if(ball.yVel < 0 && blockBottomBound == ballTopBound && blockLeftBound < ballRightBound && blockRightBound > ballLeftBound ){

// Check collistion from bottom side of block

ball.yVel *= -1;

stage.removeChild(block);

blocks.splice(i, 1);

ball.nextY = ball.y + ball.yVel;

break;

}

} // end for

}

function updateBallNextPos(){

console.log(ball.y);

ball.x = ball.nextX;

ball.y = ball.nextY;

}

Run and Test the Game

Finally the game is ready to test. So let’s run the game and test it.
Creating simple block breaking game using CreateJS

Creating Android Custom Component: Check Box

October 27, 2014/0 Comments/in Android /by Ajay Bagujar

Suppose, you are developing a data driven application of something related settings or kind of stuff, and where you want to implement on-off or show-hide kind of functionality. To implement such kind of functionalities we use Check Box or On-Off button components as front end. Most of the programming languages provides us some built-in components with default UI. Like you can find in while developing Android application. See the Image Below.

How to create android custom component

Well…! you have the components/widgets with default UI. But what about If you need a Check Box with Custom UI and Functionalities. So let’s see how we can do it.

Setting up project and assets

Create a new project named “Custom CheckBox” with Main.java and main.xml with white background layout.

Main.java

public class Main extends Activity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);
	}
}

public class Main extends Activity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.main);

}

main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="{relativePackage}.${activityClass}"
    android:background="#fff" 
    >    
    
</RelativeLayout>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context="{relativePackage}.${activityClass}"

android:background="#fff"

</RelativeLayout>

Create a new folder under res>drawable-nodpi and add Check Box Graphics which we are going to use in further component development.

checked.png

Building Checkbox Interface

Now start building interface by extending View Class. Create a Custom Checkbox class named CCheckBox and extend it with View Class. See the code below.
CCheckBox.java

public class CCheckBox extends View {

	public CCheckBox(Context context, AttributeSet attrs) {
		super(context, attrs);	
	}

	@Override
	protected void onDraw(Canvas canvas) {		
		super.onDraw(canvas);	
	}
	
}

public class CCheckBox extends View {

public CCheckBox(Context context, AttributeSet attrs) {

super(context, attrs);

}

@Override

protected void onDraw(Canvas canvas) {

super.onDraw(canvas);

}

Setup the width and height of the view when it will create or resize.

@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {		
	super.onSizeChanged(w, h, oldw, oldh);
	this.width = w;
	this.height = h;
}

@Override

protected void onSizeChanged(int w, int h, int oldw, int oldh) {

super.onSizeChanged(w, h, oldw, oldh);

this.width = w;

this.height = h;

}

Now draw the custom graphics of checkbox on Canvas.

@Override
	protected void onDraw(Canvas canvas) {		
		super.onDraw(canvas);
		drawCheck(canvas);
		invalidate();
	}
	
	private void drawCheck(Canvas canvas){
		if(this.state){			
			Paint epaint = new Paint();
			Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.checked);		
			Matrix matrix = new Matrix();
			matrix.setScale(this.width*1.0f/bitmap.getWidth(), this.height*1.0f/bitmap.getHeight());		
			canvas.drawBitmap(bitmap, matrix, epaint);
		}else{
			addCircle(canvas, width/2, height/2, width/2, offPaint);
		}
		
	}
	
	private void addCircle(Canvas canvas, float cx, float cy, float radius, Paint paint){		
		paint.setStyle(Paint.Style.FILL);
		canvas.drawCircle(cx, cy, radius, paint);
		paint.setStyle(Paint.Style.STROKE);
		paint.setStrokeWidth(1.0f);
		canvas.drawCircle(cx, cy, radius, paint);		
	}

@Override

protected void onDraw(Canvas canvas) {

super.onDraw(canvas);

drawCheck(canvas);

invalidate();

}

private void drawCheck(Canvas canvas){

if(this.state){

Paint epaint = new Paint();

Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.checked);

Matrix matrix = new Matrix();

matrix.setScale(this.width*1.0f/bitmap.getWidth(), this.height*1.0f/bitmap.getHeight());

canvas.drawBitmap(bitmap, matrix, epaint);

}else{

addCircle(canvas, width/2, height/2, width/2, offPaint);

}

private void addCircle(Canvas canvas, float cx, float cy, float radius, Paint paint){

paint.setStyle(Paint.Style.FILL);

canvas.drawCircle(cx, cy, radius, paint);

paint.setStyle(Paint.Style.STROKE);

paint.setStrokeWidth(1.0f);

canvas.drawCircle(cx, cy, radius, paint);

}

Custom Methods

Create getter and setter functions to get the state of the CheckBox.

	// getter and setter function
	public boolean isSelected(){
		return state;
	}
	
	public void setSelect(boolean _state){
		this.state = _state;
	}

// getter and setter function

public boolean isSelected(){

return state;

}

public void setSelect(boolean _state){

this.state = _state;

}

Implement of Touch Event

Now add the checked and unchecked logic under TouchEvent handler

	// event handling
	@Override
	public boolean onTouchEvent(MotionEvent event) {
		int action = event.getAction();
		if(action == MotionEvent.ACTION_UP){
			if(this.state){
				this.state = false;
			}else{
				this.state = true;
			}
		}
		return true;
	}

// event handling

@Override

public boolean onTouchEvent(MotionEvent event) {

int action = event.getAction();

if(action == MotionEvent.ACTION_UP){

if(this.state){

this.state = false;

}else{

this.state = true;

}

return true;

}

Complete Class

CCheckBox.java

package com.ajaybadgujar.customcheckbox;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;

public class CCheckBox extends View {
	
	private int width = 0;
	private int height = 0;
	private Paint onPaint = new Paint();
	private Paint offPaint = new Paint();
	private boolean state = true;

	public CCheckBox(Context context, AttributeSet attrs) {
		super(context, attrs);
		onPaint.setColor(Color.rgb(1, 157, 154));
		offPaint.setColor(Color.rgb(223, 223, 223));
	}
	
	@Override
	protected void onDraw(Canvas canvas) {		
		super.onDraw(canvas);
		drawCheck(canvas);
		invalidate();
	}
	
	private void drawCheck(Canvas canvas){
		if(this.state){			
			Paint epaint = new Paint();
			Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.checked);		
			Matrix matrix = new Matrix();
			matrix.setScale(this.width*1.0f/bitmap.getWidth(), this.height*1.0f/bitmap.getHeight());		
			canvas.drawBitmap(bitmap, matrix, epaint);
		}else{
			addCircle(canvas, width/2, height/2, width/2, offPaint);
		}
		
	}
	
	private void addCircle(Canvas canvas, float cx, float cy, float radius, Paint paint){		
		paint.setStyle(Paint.Style.FILL);
		canvas.drawCircle(cx, cy, radius, paint);
		paint.setStyle(Paint.Style.STROKE);
		paint.setStrokeWidth(1.0f);
		canvas.drawCircle(cx, cy, radius, paint);		
	}
	
	
	@Override
	protected void onSizeChanged(int w, int h, int oldw, int oldh) {		
		super.onSizeChanged(w, h, oldw, oldh);
		this.width = w;
		this.height = h;
	}	
	
	// getter and setter function
	public boolean isSelected(){
		return state;
	}
	
	public void setSelect(boolean _state){
		this.state = _state;
	}
	
	// event handling
	@Override
	public boolean onTouchEvent(MotionEvent event) {
		int action = event.getAction();
		if(action == MotionEvent.ACTION_UP){
			if(this.state){
				this.state = false;
			}else{
				this.state = true;
			}
		}
		return true;
	}

}

package com.ajaybadgujar.customcheckbox;

import android.content.Context;

import android.graphics.Bitmap;

import android.graphics.BitmapFactory;

import android.graphics.Canvas;

import android.graphics.Color;

import android.graphics.Matrix;

import android.graphics.Paint;

import android.util.AttributeSet;

import android.view.MotionEvent;

import android.view.View;

public class CCheckBox extends View {

private int width = 0;

private int height = 0;

private Paint onPaint = new Paint();

private Paint offPaint = new Paint();

private boolean state = true;

public CCheckBox(Context context, AttributeSet attrs) {

super(context, attrs);

onPaint.setColor(Color.rgb(1, 157, 154));

offPaint.setColor(Color.rgb(223, 223, 223));

}

@Override

protected void onDraw(Canvas canvas) {

super.onDraw(canvas);

drawCheck(canvas);

invalidate();

}

private void drawCheck(Canvas canvas){

if(this.state){

Paint epaint = new Paint();

Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.checked);

Matrix matrix = new Matrix();

matrix.setScale(this.width*1.0f/bitmap.getWidth(), this.height*1.0f/bitmap.getHeight());

canvas.drawBitmap(bitmap, matrix, epaint);

}else{

addCircle(canvas, width/2, height/2, width/2, offPaint);

}

private void addCircle(Canvas canvas, float cx, float cy, float radius, Paint paint){

paint.setStyle(Paint.Style.FILL);

canvas.drawCircle(cx, cy, radius, paint);

paint.setStyle(Paint.Style.STROKE);

paint.setStrokeWidth(1.0f);

canvas.drawCircle(cx, cy, radius, paint);

}

@Override

protected void onSizeChanged(int w, int h, int oldw, int oldh) {

super.onSizeChanged(w, h, oldw, oldh);

this.width = w;

this.height = h;

}

// getter and setter function

public boolean isSelected(){

return state;

}

public void setSelect(boolean _state){

this.state = _state;

}

// event handling

@Override

public boolean onTouchEvent(MotionEvent event) {

int action = event.getAction();

if(action == MotionEvent.ACTION_UP){

if(this.state){

this.state = false;

}else{

this.state = true;

}

return true;

}

How to use

Open main.xml from res>layouts and add the CCheckBox widget which you have created. See the code below.
main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="{relativePackage}.${activityClass}"
    android:background="#fff" 
    >    
    
    <com.ajaybadgujar.customcheckbox.CCheckBox
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true" 
        />

</RelativeLayout>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context="{relativePackage}.${activityClass}"

android:background="#fff"

<com.ajaybadgujar.customcheckbox.CCheckBox

android:layout_width="48dp"

android:layout_height="48dp"

android:layout_centerHorizontal="true"

android:layout_centerVertical="true"

</RelativeLayout>

Run the application and see the result.

Creating custom checkbox in android

Android Using ImageButton

May 21, 2014/0 Comments/in Android, Android Code Snippets, Code Snippets /by Ajay Bagujar

Most of the time in the application we want to say more about, what button will function on click. But its not possible to write entire statement/description as label of button. And there is option for it to set image/picture as Icon on the button.

In the given below xml you can see, how we can set Image on Button and ImageButton.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    
    <ImageButton 
        android:id="@+id/imgBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/arrows_icon"
        />
    
    <Button 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:drawableTop="@drawable/arrows_icon"
        android:text="Download"        
        />
    
    <Button 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:drawableLeft="@drawable/arrows_icon"
        android:text="Download"        
        />
    
    <Button 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:drawableRight="@drawable/arrows_icon"
        android:text="Download"        
        />
    
    <Button 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:drawableBottom="@drawable/arrows_icon"
        android:text="Download"        
        />
    
    <Button 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:drawableTop="@drawable/arrows_icon" 
        android:drawableLeft="@drawable/arrows_icon" 
        android:drawableRight="@drawable/arrows_icon" 
        android:drawableBottom="@drawable/arrows_icon"
        android:text="Download"     
        />

</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical" >

<ImageButton

android:id="@+id/imgBtn"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:src="@drawable/arrows_icon"

<Button

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:drawableTop="@drawable/arrows_icon"

android:text="Download"

<Button

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:drawableLeft="@drawable/arrows_icon"

android:text="Download"

<Button

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:drawableRight="@drawable/arrows_icon"

android:text="Download"

<Button

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:drawableBottom="@drawable/arrows_icon"

android:text="Download"

<Button

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:drawableTop="@drawable/arrows_icon"

android:drawableLeft="@drawable/arrows_icon"

android:drawableRight="@drawable/arrows_icon"

android:drawableBottom="@drawable/arrows_icon"

android:text="Download"

</LinearLayout>

And the result will look something like below.

The ImageButton allows you to display image but not text as a label.

If you want use Image/Picture/Icon with the text label, you have to use Button, which allows you to set Image as well as text also. To set Image along with text use attribute android:drawableTop, android:drawableLeft, android:drawableRight and android:drawableBottom. With the respective order this all attributes allows you to display image at the top, left, right and bottom.

Event you can use all these attributes combinations. Like below.

 <Button 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:drawableTop="@drawable/arrows_icon" 
        android:drawableLeft="@drawable/arrows_icon" 
        android:drawableRight="@drawable/arrows_icon" 
        android:drawableBottom="@drawable/arrows_icon"
        android:text="Download"     
        />

<Button

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:drawableTop="@drawable/arrows_icon"

android:drawableLeft="@drawable/arrows_icon"

android:drawableRight="@drawable/arrows_icon"

android:drawableBottom="@drawable/arrows_icon"

android:text="Download"

There another way to set Image on Button, which is setting image on button programmatically.

Look at the Button view set in xml below.

<Button 
        android:id="@+id/btnImageText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        />

<Button

android:id="@+id/btnImageText"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

Now set Image and Text programmatically.

Button mybutton = (Button)findViewById(R.id.btnImageText);
mybutton.setText("Download");
// bound order - left, top, right, bottom
mybutton.setCompoundDrawableWithIntrinsicBounds(0, R.drawable.arrows_icon, 0, 0);

Button mybutton = (Button)findViewById(R.id.btnImageText);

mybutton.setText("Download");

// bound order - left, top, right, bottom

mybutton.setCompoundDrawableWithIntrinsicBounds(0, R.drawable.arrows_icon, 0, 0);

The output will look like below.

Android Using Buttons and Ways to Handling Event

May 19, 2014/0 Comments/in Android, Android Code Snippets, Code Snippets /by Ajay Bagujar

In android development life-cycle, Button view is most common view used on activity. This article shows you basic types of Button view and how we can implement event handlers in different ways.

Lets create layout xml first with some Buttons.

main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"    
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    >
    
    <Button
        android:id="@+id/btn1" 
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="BUTTON 1"/>
    
    <Button 
        android:id="@+id/btn2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="BUTTON 2"/>    
    
    <Button 
        android:id="@+id/btn3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="BUTTON 3"
        android:onClick="onBtnClick"
        />
    
    <ToggleButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="BUTTON 4 Toggle"
        android:onClick="onToggleClick"
        />

</LinearLayout>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical"

<Button

android:id="@+id/btn1"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:text="BUTTON 1"/>

<Button

android:id="@+id/btn2"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:text="BUTTON 2"/>

<Button

android:id="@+id/btn3"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:text="BUTTON 3"

android:onClick="onBtnClick"

<ToggleButton

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="BUTTON 4 Toggle"

android:onClick="onToggleClick"

</LinearLayout>

Implementing onClick handlers in various ways.

public class MainActivity extends ActionBarActivity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		
		// Button 1
		Button btn1 = (Button) findViewById(R.id.btn1);
		btn1.setOnClickListener(new OnClickListener() {
			
			@Override
			public void onClick(View v) {
				
				Toast.makeText(getApplicationContext(), "Button 1 Clicked", Toast.LENGTH_LONG).show();
				
			}
		});
		
		
		// Button 2
		Button btn2 = (Button) findViewById(R.id.btn2);
		btn2.setOnClickListener(btnClickListener);
		
	}	
	
	// anonymous class call by button 2 as on click listener 
	private OnClickListener btnClickListener = new OnClickListener() {
		
		@Override
		public void onClick(View v) {
			
			Toast.makeText(getApplicationContext(), "Button 2 Clicked", Toast.LENGTH_LONG).show();
			
		}
	};	
	
	// Button 3
	public void onBtnClick(View view){
		Toast.makeText(getApplicationContext(), "Button 3 Clicked", Toast.LENGTH_LONG).show();
	}
	
	// Button 4 Toggle
	public void onToggleClick(View view){
		ToggleButton btn4 = (ToggleButton) view;
		Toast.makeText(getApplicationContext(), "Toggle Button 4 mode is " + btn4.isChecked(), Toast.LENGTH_LONG).show();
	}

}

public class MainActivity extends ActionBarActivity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

// Button 1

Button btn1 = (Button) findViewById(R.id.btn1);

btn1.setOnClickListener(new OnClickListener() {

@Override

public void onClick(View v) {

Toast.makeText(getApplicationContext(), "Button 1 Clicked", Toast.LENGTH_LONG).show();

}

});

// Button 2

Button btn2 = (Button) findViewById(R.id.btn2);

btn2.setOnClickListener(btnClickListener);

}

// anonymous class call by button 2 as on click listener

private OnClickListener btnClickListener = new OnClickListener() {

@Override

public void onClick(View v) {

Toast.makeText(getApplicationContext(), "Button 2 Clicked", Toast.LENGTH_LONG).show();

}

};

// Button 3

public void onBtnClick(View view){

Toast.makeText(getApplicationContext(), "Button 3 Clicked", Toast.LENGTH_LONG).show();

}

// Button 4 Toggle

public void onToggleClick(View view){

ToggleButton btn4 = (ToggleButton) view;

Toast.makeText(getApplicationContext(), "Toggle Button 4 mode is " + btn4.isChecked(), Toast.LENGTH_LONG).show();

}

Handling Event Way 1

Notice the first button (Button 1) has the android:id attribute. To handle the click event programmatically, refer the button and call its setOnClickListener method, then set to it an instace of the OnClickListener class. Under the class implement onClick() method;

// Button 1
		Button btn1 = (Button) findViewById(R.id.btn1);
		btn1.setOnClickListener(new OnClickListener() {
			
			@Override
			public void onClick(View v) {
				
				Toast.makeText(getApplicationContext(), "Button 1 Clicked", Toast.LENGTH_LONG).show();
				
			}
		});

// Button 1

Button btn1 = (Button) findViewById(R.id.btn1);

btn1.setOnClickListener(new OnClickListener() {

@Override

public void onClick(View v) {

Toast.makeText(getApplicationContext(), "Button 1 Clicked", Toast.LENGTH_LONG).show();

}

});

Handling Event Way 2

The next button is same like Button 2. Only the the difference is, instead of creating inner class of event handler, an anonymous class is created here.

// anonymous class call by button 2 as on click listener 
	private OnClickListener btnClickListener = new OnClickListener() {
		
		@Override
		public void onClick(View v) {
			
			Toast.makeText(getApplicationContext(), "Button 2 Clicked", Toast.LENGTH_LONG).show();
			
		}
	};

// anonymous class call by button 2 as on click listener

private OnClickListener btnClickListener = new OnClickListener() {

@Override

public void onClick(View v) {

Toast.makeText(getApplicationContext(), "Button 2 Clicked", Toast.LENGTH_LONG).show();

}

};

And then set it to click event handler to this class.

// Button 2
Button btn2 = (Button) findViewById(R.id.btn2);
btn2.setOnClickListener(btnClickListener);

// Button 2

Button btn2 = (Button) findViewById(R.id.btn2);

btn2.setOnClickListener(btnClickListener);

Handling Event Way 3

The third Button has android:onClick.

<Button 
        android:id="@+id/btn3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="BUTTON 3"
        android:onClick="onBtnClick"
        />

<Button

android:id="@+id/btn3"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:text="BUTTON 3"

android:onClick="onBtnClick"

And set to onBtnClick() method which is declared in activity.

// Button 3
public void onBtnClick(View view){
	Toast.makeText(getApplicationContext(), "Button 3 Clicked", Toast.LENGTH_LONG).show();
}

// Button 3

public void onBtnClick(View view){

Toast.makeText(getApplicationContext(), "Button 3 Clicked", Toast.LENGTH_LONG).show();

}

Handling Event for Toggle Button

The ToggleButton is same like Basic Button, Only the difference is it shows it’s state toggled (true/false) indicating by blue/green line depends on theme you selected.

// Button 4 Toggle
	public void onToggleClick(View view){
		ToggleButton btn4 = (ToggleButton) view;
		Toast.makeText(getApplicationContext(), "Toggle Button 4 mode is " + btn4.isChecked(), Toast.LENGTH_LONG).show();
	}

// Button 4 Toggle

public void onToggleClick(View view){

ToggleButton btn4 = (ToggleButton) view;

Toast.makeText(getApplicationContext(), "Toggle Button 4 mode is " + btn4.isChecked(), Toast.LENGTH_LONG).show();

}

How to define style and use it in Android

March 26, 2014/0 Comments/in Android, Android Code Snippets, Code Snippets /by Ajay Bagujar

While developing certain mobile applications such as Game or some kind of data driven application, you always need to follow some design standards like text color, font, size etc. or the image/logo at particular position on each screen and for that you need to define same properties to each
TextView or ImageView widgets on each screen or like so.

And what about if you want to change the logo position from left to right or change the size of text or color. You have to open each layout file and make changes for each TextView or Widget.

But instead of doing this all repeating task we can define all this properties at on place and link to the related widget by defining style. See the example illustrated below.

Create new xml named mystyle.xml(you can choose file name as you want) under res>values directory.

mystyle.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="SettingsHeaderFrame">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">wrap_content</item>
    </style>
    
    <style name="SettingsHeaderLogo">
        <item name="android:layout_width">40dp</item>
        <item name="android:layout_height">40dp</item>
    </style>
    
    <style name="SettingsHeaderTitle">
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">wrap_content</item>
    </style>
    
    <style name="SettingsListContainer">
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">wrap_content</item>
    </style>    
</resources>

<?xml version="1.0" encoding="utf-8"?>

<item name="android:layout_width">match_parent</item>

<item name="android:layout_height">wrap_content</item>

</style>

</style>

<item name="android:layout_width">wrap_content</item>

<item name="android:layout_height">wrap_content</item>

</style>

<item name="android:layout_width">wrap_content</item>

<item name="android:layout_height">wrap_content</item>

</style>

</resources>

Define create style node under resources and assign style name, so we can call style by name by settings widget style. now under style node set properties and its value as item node.

Now give the style reference to your widgets in layout xml.

res>layout>preferences.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    
    <LinearLayout
         style="@style/SettingsHeaderFrame">        
        <ImageView
            style="@style/SettingsHeaderLogo" 
            android:src="@drawable/hv_icon"/>
        <TextView 
            style="@style/SettingsHeaderTitle"
            android:text="Preferences"/>
    </LinearLayout>
</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical" >

<LinearLayout

style="@style/SettingsHeaderFrame">

<ImageView

style="@style/SettingsHeaderLogo"

android:src="@drawable/hv_icon"/>

<TextView

style="@style/SettingsHeaderTitle"

android:text="Preferences"/>

</LinearLayout>

I hope, the above example is useful to understand you how to use style in android.

Option 1: Readable

Option 2: Compact with readable

Option 3 : More compact code

Share this:

Conclusion

Share this:

Setting up HTML page

HTML Structure for Toggle Button

Style a Toggle Button

Make Toggle Button Interactive

Implementing Toggle Button

Share this:

Share this:

Share this:

And the flow of development . . .

Setting up game file structure and interface

Declaring game constants and variables

Initializing the Game

Creating Rest of the Game Elements

Moving Paddle with Mouse Input

Creating Game Loop

Run and Test the Game

Share this:

Table Of Content

Setting up project and assets

Building Checkbox Interface

Custom Methods

Implement of Touch Event

Complete Class

How to use

Share this:

Share this:

Handling Event Way 1

Handling Event Way 2

Handling Event Way 3

Handling Event for Toggle Button

Share this:

Share this:

Interesting links

Pages

Categories

Archive