Clamping value using Math library JavaScript

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

Option 2: Compact with readable

Option 3 : More compact code

Enjoy…

Keep users in loop

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

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.

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.

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.

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.

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.

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.

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.

Now refresh the page and try clicking on button.

Download source from here

Creating Custom Combobox or Select box using HTML CSS and JavaScript

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.

Now add below html into body tag

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.

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

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.

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

And here is your custom combbox ready to use.

Download source from here

Creating Simple Range Slider Component Using JavaScript

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.

Now add Range Slider HTML inside document body.

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

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.

Initiate the Range Slider into script.js.

And now try moving slider handle in browser.

Download Source Code from here

Creating simple block breaking game using CreateJS

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 . . .

  1. Setting up game file structure and interface
  2. Declaring game constants and variables
  3. Initializing the Game
  4. Creating Rest of the Game Elements
  5. Moving Paddle with Mouse Input
  6. Creating Game Loop
  7. 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.

Now style the game fontend interface by adding css 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.

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

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.

And now init function.

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.

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.

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.

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.

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.

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.

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.

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

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.


Table Of Content

  1. Setting up project and assets
  2. Building CheckBox Interface
  3. Custom Methods
  4. Implement of Touch Event
  5. Complete Class
  6. How to use

Setting up project and assets

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

Main.java

main.xml

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

How to create android custom component

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

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

Now draw the custom graphics of checkbox on Canvas.

Custom Methods

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

Implement of Touch Event

Now add the checked and unchecked logic under TouchEvent handler

Complete Class

CCheckBox.java

How to use

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

Run the application and see the result.

Creating custom checkbox in android

Android Using ImageButton

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.

And the result will look something like below.

Android Using ImageButton

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.

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

Look at the Button view set in xml below.

Now set Image and Text programmatically.

The output will look like below.

Android Using ImageButton

Android Using Buttons and Ways to Handling Event

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

Implementing onClick handlers in various ways.

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;

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.

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

Handling Event Way 3

The third Button has android:onClick.

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

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.

Android Using Buttons and Ways to Handling Event

How to define style and use it in Android

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.
Using style in android

mystyle.xml

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

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