I was trying to learn how to use SurfaceView, since I need to use it in a future project. I read that if I need to update the UI quickly, it is preferable to use SurfaceView with the help of a thread.
The purpose of my code is to be able to print on a bitmap, the pattern of a 'B',here is the code:
public void testTransition(Canvas canvas) {
if (canvas != null) {
canvas.drawColor(Color.BLACK);
Log.i("Thread", "Running...");
for (int y = 0; y < 8; y++) {
if (test[y] == 1) {
canvas.drawBitmap(ledBitMap, (x - diameterLeds) / 2, diameterLeds * y, paint);
}
}
canvas.drawColor(Color.BLACK);
delay(1000);
for (int y=0; y<8; y++){
if(test[y + 8] == 1)
canvas.drawBitmap(ledBitMap, (x - diameterLeds) / 2,diameterLeds * y, paint);
}
canvas.drawColor(Color.BLACK);
//ledThread.delay(1000);
for (int y=0; y<8; y++){
if(test[y + 16] == 1)
canvas.drawBitmap(ledBitMap, (x- diameterLeds) / 2,diameterLeds * y, paint);
}
canvas.drawColor(Color.BLACK);
//ledThread.delay(1000);
for (int y=0; y<8; y++){
if(test[y + 24] == 1)
canvas.drawBitmap(ledBitMap, (x - diameterLeds) / 2,diameterLeds * y, paint);
}
canvas.drawColor(Color.BLACK);
//ledThread.delay(1000);
for (int y=0; y<8; y++){
if(test[y + 32] == 1)
canvas.drawBitmap(ledBitMap, (x - diameterLeds) / 2,diameterLeds * y, paint);
}
//canvas.drawColor(Color.BLACK);
//ledThread.delay(600);
//delay(1);
}
}
#Override
public void run() {
long ticksPS = 1000 / 30;
long startTime;
long sleepTime;
while(isRunning){
Canvas canvas = null;
startTime = System.currentTimeMillis();
try {
canvas = ledView.getHolder().lockCanvas();
synchronized (ledView.getHolder()){
testTransition(canvas);
}
}finally {
if(canvas != null){
ledView.getHolder().unlockCanvasAndPost(canvas);
}
}
}
}
The variable test[] is a matrix of 40 elements ( 0 or 1)
private static int test[] = {1,1,1,1,1,1,1,1, 1,0,0,1,0,0,0,1, 1,0,0,1,0,0,0,1, 1,0,0,1,0,0,0,1, 0,1,1,0,1,1,1,0};
My goal is to read this arrangement and simulate that 'on or off' of the pattern of the letter B. But when I execute the code, the activity stays a few seconds with the blank screen and after that the circles appear painted on the bitmap but does not alternate the sequence, although the thread seems to be running. Only the last 8 elements of the test array are drawn
With a SurfaceView and lockCanvas(), the screen is not able to update until after you call unlockCanvasAndPost(). (I think you were expecting the screen to update midway through testTransition().)
The solution is to implement a state machine, that dirties the SurfaceView based on a timer (for example), and advances the LED display one row on each iteration.
Related
I have a sprite sheet that has 7 columns. I want to animate (change the column) smoothly. However, if I don't control sprite speed using update % 10, it animates too fast, consequently, the animation is not recognizable. At the moment, I switch between sprite columns every 10 frames, this will not be consistent based on the FPS of the different android devices. Is there a standard way to control sprite animation speed?
private final int BMP_ROWS = 1;
private final int BMP_COLUMNS = 7;
// sprite update logic
public boolean update(float deltaTime) {
delayCounterMs += deltaTime;
animate = true;
if (update % 10 == 0) {
currentFrame = ++currentFrame % BMP_COLUMNS;
int srcX = currentFrame * width;
src = new Rect(srcX, 0, srcX + width, height);
dst = new Rect(x, y, x + width, y + height);
}
update++;
return false;
}
// sprite draw logic
public void draw(Canvas canvas) {
if (animate) {
canvas.drawBitmap(bmp, src, dst, null);
}
}
I am trying to floodfill a bitmap using Renderscript. and my renderscript file progress.rs is
#pragma version(1)
#pragma rs java_package_name(com.intel.sample.androidbasicrs)
rs_allocation input;
int width;
int height;
int xTouchApply;
int yTouchApply;
static int same(uchar4 pixel, uchar4 in);
uchar4 __attribute__((kernel)) root(const uchar4 in, uint32_t x, uint32_t y) {
uchar4 out = in;
rsDebug("Process.rs : image width: ", width);
rsDebug("Process.rs : image height: ", height);
rsDebug("Process.rs : image pointX: ", xTouchApply);
rsDebug("Process.rs : image pointY: ", yTouchApply);
if(xTouchApply >= 0 && xTouchApply < width && yTouchApply >=0 && yTouchApply < height){
// getting touched pixel
uchar4 pixel = rsGetElementAt_uchar4(input, xTouchApply, yTouchApply);
rsDebug("Process.rs : getting touched pixel", 0);
// resets the pixel stack
int topOfStackIndex = 0;
// creating pixel stack
int pixelStack[width*height];
// Pushes the touched pixel onto the stack
pixelStack[topOfStackIndex] = xTouchApply;
pixelStack[topOfStackIndex+1] = yTouchApply;
topOfStackIndex += 2;
//four way stack floodfill algorithm
while(topOfStackIndex>0){
rsDebug("Process.rs : looping while", 0);
// Pops a pixel from the stack
int x = pixelStack[topOfStackIndex - 2];
int y1 = pixelStack[topOfStackIndex - 1];
topOfStackIndex -= 2;
while (y1 >= 0 && same(rsGetElementAt_uchar4(input, x, y1), pixel)) {
y1--;
}
y1++;
int spanLeft = 0;
int spanRight = 0;
while (y1 < height && same(rsGetElementAt_uchar4(input, x, y1), pixel)) {
rsDebug("Process.rs : pointX: ", x);
rsDebug("Process.rs : pointY: ", y1);
float3 outPixel = dot(f4.rgb, channelWeights);
out = rsPackColorTo8888(outPixel);
// conditions to traverse skipPixels to check threshold color(Similar color)
if (!spanLeft && x > 0 && same(rsGetElementAt_uchar4(input, x - 1, y1), pixel)) {
// Pixel to the left must also be changed, pushes it to the stack
pixelStack[topOfStackIndex] = x - 1;
pixelStack[topOfStackIndex + 1] = y1;
topOfStackIndex += 2;
spanLeft = 1;
} else if (spanLeft && !same(rsGetElementAt_uchar4(input, x - 1, y1), pixel)) {
// Pixel to the left has already been changed
spanLeft = 0;
}
// conditions to traverse skipPixels to check threshold color(Similar color)
if (!spanRight && x < width - 1 && same(rsGetElementAt_uchar4(input, x + 1, y1), pixel)) {
// Pixel to the right must also be changed, pushes it to the stack
pixelStack[topOfStackIndex] = x + 1;
pixelStack[topOfStackIndex + 1] = y1;
topOfStackIndex += 2;
spanRight = 1;
} else if (spanRight && x < width - 1 && !same(rsGetElementAt_uchar4(input, x + 1, y1), pixel)) {
// Pixel to the right has already been changed
spanRight = 0;
}
y1++;
}
}
}
return out;
}
static int same(uchar4 px, uchar4 inPx){
int isSame = 0;
if((px.r == inPx.r) && (px.g == inPx.g) && (px.b == inPx.b) && (px.a == inPx.a)) {
isSame = 1;
// rsDebug("Process.rs : matching pixel: ", isSame);
} else {
isSame = 0;
}
// rsDebug("Process.rs : matching pixel: ", isSame);
return isSame;
}
and my Activity's code is:
inputBitmap = Bitmap.createScaledBitmap(inputBitmap, displayWidth, displayHeight, false);
// Create an allocation (which is memory abstraction in the RenderScript)
// that corresponds to the inputBitmap.
allocationIn = Allocation.createFromBitmap(
rs,
inputBitmap,
Allocation.MipmapControl.MIPMAP_NONE,
Allocation.USAGE_SCRIPT
);
allocationOut = Allocation.createTyped(rs, allocationIn.getType());
int imageWidth = inputBitmap.getWidth();
int imageHeight = inputBitmap.getHeight();
script.set_width(imageWidth);
script.set_height(imageHeight);
script.set_input(allocationIn);
//....
//....
// and my onTouchEvent Code is
script.set_xTouchApply(xTouchApply);
script.set_yTouchApply(yTouchApply);
// Run the script.
script.forEach_root(allocationIn, allocationOut);
allocationOut.copyTo(outputBitmap);
when I touched bitmap it is showing Application not responding. It is because of root method is calling for every pixels. How can I optimize this code. And how can I compare two uchar4 variables in Renderscript? How can I improve my same method? Or How can I find similar neighbor pixels using threshold value? I got stuck. Please guys help me.
I don't have much knowledge of c99 programming language and Renderscript. Can you guys debug my renderscript code. and please tell me what's wrong in this code. Or can I improve this renderscript code to floodfill the bitmap. Any help will be appreciated And sorry for my poor English ;-) . Thanks
Renderscript is Android's front-end to GPU-instructions. And it is extremely good if you want to perform operations on each pixel because it uses the massive GPU-parallelism-capabilities. So, you can run an operation on each pixel. For this purpose, you start a program in Renderscript with sth like "for all pixels, do the following".
The flood fill algorithm though cannot run in such a parallel environment because you only know which pixel to paint after painting another pixel before it. This is not only true for renderscript but all GPU-related libraries, like CUDA or others.
I get a
Fatal signal 11 (SIGSEGV) code=1
whenever I draw a filled polygon that crosses the screen bounds. This happens on OS 4.3 on a Samsung Note 10.1. What could cause this? I assume the OS should be able to clip polygons.
The offending code:
public SplashStarShape(Context context, int x, int y, int size) {
super(context);
paint = new Paint();
star = new Path();
star.setFillType(Path.FillType.WINDING);
paint.setAntiAlias(true);
paint.setStrokeWidth(DS.scale(10));
paint.setColor(EslColors.WHITE);
int k = 0;
for (int i = 0; i < 360; i += 36) {
int radius = ((k % 2) == 0) ? size * 2 : size - DS.scale(30);
k ++;
float px = (float)x + (float) (Math.cos(0.6 + (float)i * 3.1415926f * 2.0f / (float)360.0f) * (float)(radius/2.0f));
float py = (float)y + (float) (Math.sin(0.6 + (float)i * 3.1415926f * 2.0f / (float)360.0f) * (float)(radius/2.0f));
if (i == 0) {
star.moveTo(px, py);
} else {
star.lineTo(px, py);
}
}
star.close();
this.invalidate();
}
#Override
protected void onDraw (Canvas canvas) {
super.onDraw(canvas);
canvas.drawPath(star, paint);
}
If I reduce the radius so that the star fits on screen, there is no crash. If the tentacles stick outside the screen, I get the fatal error. Very strange!
I'm trying to animate a ShapeDrawable in a custom view. But I am not sure what the best method is to accomplish this task.
Should I try and draw a pawn on a path and call invalidate() until it has reached the destination square? Or is there some better method using maybe an AsyncTask or Handler?
Here is my code, I have omitted a lot of methods and variables in order to make it readable.
public class CheckerBoard extends View {
public enum State implements Parcelable {
EMPTY(0), WHITE(1), BLACK(2);
}
private final State[][] boardStates = new State[SIZE][SIZE];
#Override
protected void onDraw(Canvas canvas) {
canvas.drawColor(bgColor);
for (int y = 0; y < SIZE; y++) {
for (int x = 0; x < SIZE; x++) {
if ((y % 2 == 0 && x % 2 != 0) || (y % 2 != 0 && x % 2 == 0)) {
drawRect(x, y, canvas);
drawPawn(x, y, canvas);
}
}
}
}
private void drawRect(int x, int y, Canvas c) {
}
private void drawPawn(int x, int y, Canvas c) {
}
private void init() {
setupBoard();
pawnLinePaint.setStyle(Paint.Style.STROKE);
wPawnDrawable.getPaint().setColor(wColor);
wPawnDrawable.getPaint().setShadowLayer(tileSize + 2, 4, 4, Color.GRAY);
bPawnDrawable.getPaint().setColor(bColor);
bPawnDrawable.getPaint().setShadowLayer(tileSize + 2, 4, 4, Color.GRAY);
playerState = startState;
}
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
int x = (int) (event.getX() / tileSize);
int y = (int) (event.getY() / tileSize);
if (selection[0] >= 0) { // A tile is already selected
if (isValidMove(selection[0], selection[1], x, y)) {
makeMove(x, y);
clearSelection();
switchPlayer();
invalidate();
}
} else { // New selection
if (isValidSelection(x, y)) {
selection[0] = x;
selection[1] = y;
invalidate();
}
}
return true;
default:
return super.onTouchEvent(event);
}
}
private void makeMove(int x, int y) {
// Move the pawn to the new square
boardStates[y][x] = boardStates[selection[1]][selection[0]];
// Old square is now empty
boardStates[selection[1]][selection[0]] = State.EMPTY;
}
private void switchPlayer() {
playerState = playerState == State.WHITE ? State.BLACK : State.WHITE;
}
public CheckerBoard(Context context) {
super(context);
init();
}
public CheckerBoard(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public CheckerBoard(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init();
}
private class Pawn extends ShapeDrawable {
public Pawn() {
super(new OvalShape());
}
public void drawWithCircles(Canvas canvas, float x, float y){
super.draw(canvas);
canvas.drawCircle(x * tileSize + pawnDiameter, y * tileSize + pawnDiameter, pawnDiameter - pawnPadding,
pawnLinePaint);
canvas.drawCircle(x * tileSize + pawnDiameter, y * tileSize + pawnDiameter, pawnDiameter - pawnPadding * 6,
pawnLinePaint);
canvas.drawCircle(x * tileSize + pawnDiameter, y * tileSize + pawnDiameter, pawnDiameter - pawnPadding * 8,
pawnLinePaint);
}
}
}
Thank you for your help.
Blight
You should create two threads for your application. One thread is the UI thread that only draws the board in its current state. The other thread is the Game engine or animation thread that moves the items on the board.
The first thread runs at whatever your desired frame rate is and the 2nd thread should run considerably faster. This way you don't actually have to handle the animation yourself as the UI thread just draws the board as it currently is. In your engine thread you update the state of the game,board,chess pieces, every cycle of the thread.
Doing things this way has a couple of benefits. First your game's framerate won't drop if the Engine thread gets bogged down in some sort of computation. Second it allows you to abstract the drawing away from the game in a way that will make debugging much easier.
Take a progress bar for example. Let say you tried to create a file uploader with a progress bar but only had one thread. So you start the progress bar then start uploading the file. If the upload process is blocking then you have to wait for the file to finish uploading before you can update the progress bar, essentially rendering the progress bar useless. But if you did this with two threads then you could set it up so one thread simply updates the progress bars graphics based upon some common variable. The other tread is responsible for performing an action and updating the progress variable.
Check out these links for more info:
http://obviam.net/index.php/the-android-game-loop/
http://www.rbgrn.net/content/54-getting-started-android-game-development
http://www.helloandroid.com/tutorials/using-threads-and-progressdialog
I need an advice how to achieve the following functionality under Android:
I need an image that represents something like a graph (from discrete math), with vertices and edges, where I can click every vertice or edge and fire a different action.
Please advise me how to achieve this (maybe with imagebuttons) or another approach to represent this functionality.
I was bored, so I coded up this crude example...
It assumes straight edges between points.
public class App extends Activity
{
PlotView plot;
#Override
public void onCreate(Bundle sis)
{
super.onCreate(sis);
plot = new PlotView(this);
setContentView(plot);
}
public class PlotView extends View
{
Paint paint1 = new Paint();
Paint paint2 = new Paint();
Point[] points = new Point[10];
public PlotView(Context context)
{
super(context);
paint1.setColor(Color.RED);
paint2.setColor(Color.BLUE);
for (int i = 0; i < points.length; i++)
{
points[i] = new Point();
points[i].x = (float) (Math.random() * 320);
points[i].y = (float) (Math.random() * 480);
}
Arrays.sort(points);
}
#Override
protected void onDraw(Canvas canvas)
{
canvas.drawColor(Color.WHITE);
for (int i = 0; i < points.length; i++)
{
if (i < points.length - 1)
{
canvas.drawLine(points[i].x, points[i].y, points[i + 1].x, points[i + 1].y, paint2);
}
canvas.drawCircle(points[i].x, points[i].y, 5, paint1);
}
super.onDraw(canvas);
}
#Override
public boolean onTouchEvent(MotionEvent event)
{
switch(event.getAction())
{
case MotionEvent.ACTION_DOWN:
{
float x = event.getX();
float y = event.getY();
int hitPoint = -1;
int closestLeft = -1;
int closestRight = -1;
for (int i = 0; i < points.length; i++)
{
float dx = x - points[i].x;
float dy = y - points[i].y;
if(i < points.length - 1)
{
if(points[i].x < x && x < points[i + 1].x)
{
closestLeft = i;
closestRight = i + 1;
}
}
if (Math.abs(dx) <= 16.0f && Math.abs(dy) <= 16.0f)
{
hitPoint = i;
break;
}
}
if (hitPoint != -1)
{
Toast.makeText(getContext(), "Hit Point: " + hitPoint, Toast.LENGTH_SHORT).show();
}
else
if(closestLeft != -1 && closestRight != -1)
{
float dx = points[closestLeft].x - points[closestRight].x;
float dy = points[closestLeft].y - points[closestRight].y;
final float u = ((x - points[closestLeft].x) * dx + (y - points[closestLeft].y) * dy) / (dx * dx + dy * dy);
float px = points[closestLeft].x + u * dx;
float py = points[closestLeft].y + u * dy;
if (Math.abs(x - px) <= 16.0f && Math.abs(y - py) <= 16.0f)
{
Toast.makeText(getContext(), "Hit Line Between: " + closestLeft + " & " + closestRight, Toast.LENGTH_SHORT).show();
}
}
}
}
return super.onTouchEvent(event);
}
public class Point implements Comparable<Point>
{
float x;
float y;
#Override
public int compareTo(Point other)
{
if (x < other.x) return -1;
if (x > other.x) return 1;
return 0;
}
}
}
}
I can imagine how to do this with SurfaceView:
create a Vertex class, which among other things, has an x,y coordinate representing where to draw the vertex. If your vertex was a png image of a circle, then the top-left x,y coordinates of the image are stored in the Vertex class.
Have all your verticies in a List, and iterate through and draw each vertex.
the edges are more complicated since they might criss-cross or curve around.
assuming they are straight lines, then you can have a Edge class that contains the starting x,y and ending x,y coordinates.
you can iterate through a List of Edges and draw the lines accordingly
In order to detect when a user clicks on them, you should override the onTouch method and check the event.rawX() and event.rawY() values to see if they match up to a Vertex or Edge class.
for a Vertex class, you can check if x <= event.rawX <= x + image_width and y <= event.rawY <= y + image_height
for an Edge, you can check if the event.rawX, event.rawY coordinates are found in the line formed by the two sets of coordinates you stored in the Edge class.
I've used a similar method to draw a set of nodes in a game. I'm not so sure how to do the edges though - the method I outline would only work if they were straight and do not criss-cross.
I am sure there is a better way to do this using openGL, but I have not used openGL before.
Hopefully you can get some ideas out of this.
I think you might be best off with a SurfaceView:
http://developer.android.com/reference/android/view/SurfaceView.html
And handling the onTouchEvent() as a whole for the surface, and mapping that to underlying entities in the image. If you're calculating the drawing the graph as you go should be easy to also create a map of tapable areas and grabbing the X and Y of the touch event to figure out if it corresponds to an element in the image.
If you literally have an image, as an already processed PNG for example, you would need some way to also carry in the touch event areas. Depends where that image comes in from.
According to android help, "drawing to a View, is your best choice when you want to draw simple graphics that do not need to change dynamically and are not part of a performance-intensive game." This is the right way to go when making a snake or a chess game, for instance. So I don't see a point in suggesting using a SurfaceView for this, it will just overcomplicate things.
For clickable areas you override public boolean onTouchEvent(MotionEvent event) where you manage x and y coordinates of the click for identifying the clicked area.