JetCracker

Life-time learner's blog

Tag Archives: JavaScript

Speedometer Gauge with Needle for Android

I am working very hard on my CardioMood app for Android.

As described in one of my previous posts, CardioMood is a health monitoring social service with a stress monitor app. It measures your stress level according to heart rate variability. It also shows a bunch of other parameters, which are represented as different kinds of charts.

Stress Index is a quantitative characteristic of your stress. Normally, the value of Stress Index varies from 50 to 150. The SI value outside of the range could be caused by a number of factors, such as physical or emotional stress, diseases (including heart diseases), and low quality of data obtained from heart rate sensor.

In CardioMood Stress Monitor app, we need to visually represent a calculated value of Stress Index – and that is another problem. I decided to use a speedometer-like gauge.

A simple way: WebView

In our measurement report screen used WebView to visually represent the result.

Android WebView supports almost all HTML and javascript features, which enables developers to render anything and use various javascript libraries already available on the net.

So, WebView gives you an easiest way to add Speedometer gauge to your android app. In our case we used a solution from Geek’s Retreat.

Their implementation is purely javascript. It has a certain number of limitations. For example, you have to specify the exact width and height of the canvas before rendering.

We had hard time with sizing and layouting components in WebView. Soon, we realized that WebView is not reliable – it’s better to use native controls than spend days on fixing issues and supporting diverse screen densities and sizes in HTML.

Hard way: Implementing Android custom view

I decided to take a bull by the horns and convinced our team to stop using WebView. After two days of working, I finally created SpeedometerView – a simple speedometer with needle gauge for Android. It looks similar to it’s javascript brother and has the same features.

CardioMood SpeedometerView in action

Supported features:

  • Major and minor tick marks
  • Custom labels
  • Colored value ranges
  • Animation of arrow (requires Android API level 11+)

Download

Check out a GitHub repo to see source code, release binary and usage example.

UPD: The component was moved to AndroidWidgets library.

GitHub: https://github.com/ntoskrnl/AndroidWidgets

Screenshot of CardioMood with SpeedometerView

Feel free to comment, request features or report bugs.

Advertisements

[Java Web] [QapTcha] How to add captcha to JSF page

If you want to have prevent spam in your website, you probably need to use captcha.

CAPTCHA (play /ˈkæp.tʃə/) is a type of challenge-response test used in computing as an attempt to ensure that the response is generated by a human being. The process usually involves a computer asking a user to complete a simple test which the computer is able to grade. (Wikipedia)

Early CAPTCHAs such as these, generated by the...

You can see the examples of captchas on the pictures. Captcha is intended to protect the web site from spam, and it helps to avoid “unwanted” registrations, block robots. But it can also deter some “proper” users. As for me, I hate recognizing captchas!

What we need is a simple and user-friendly mechanism to detect robot. Fortunately there are plenty of different solutions for captchas on the internet!

Take a look at QapTcha – a simple, easy-to-use and intuitive captcha system. It needs human action instead of to read a hard text and it is a very lightweight jQuery plugin.

QapTcha Demo Screenshot

All you need is to drag the button from one side to another, and that makes it perfect for mobile devices.

Here I will show you an example of how we can embed this captcha into JSF web-application.

Read more of this post

JSF: How to create a chat with ajax

Howdy!

In our JSF project, which I am currently working on, there was a problem to create a chat in order to enable users to communicate. Today I’ll show you how to create a simple chat using JSF, PrimeFaces and ajax.

Main Idea

The idea is quite simple. Somewhere on the server (e.g. in the database) there are messages. On your web-page there is a message box in which all chat messages are displayed. Each second the web-page requests the server for new messages, and if there are any, adds them into message box.

Problems

  1. We have to ask server for new messages every second by invoking JSF managed bean’s method. How?
  2. Managed bean (server side) has to return new messages to the web-page. How?
  3. After page is loaded (ready) the message box should be updated and contain all recent chat messaged. How?

Solutions

As it was said above, I am describing a solution for PrimeFaces library. But if you don’t (or unable to) use it, there might be a similar solution. See specifications of your particular library.

The first problem is very simple to solve. In PrimeFaces, there are different (at least two) components for invoking JSF managed bean’s method from the web page. You can use, for example, Poll component. But here I will use RemoteCommand. To solve the second problem we will use call-back parameters (the mechanism of passing data from the server to the client’s web-page). In my implementation we won’t need to solve the last problem. It will be solved automatically.

Let’s get the ball rolling!

Read more of this post