This is my code to create a picturebox board using 2d array.
PictureBox[,] pb = new PictureBox[3, 3];
for (int i = 0; i < 3; i++)
{
for (int j = 0; j < 3; j++)
{
pb[i,j] = new PictureBox();
pb[i, j].Location = new Point(i * 150 + 100, j * 150 + 100);
pb[i, j].Width = 150;
pb[i, j].Height = 150;
pb[i, j].Visible = true;
pb[i, j].BorderStyle = BorderStyle.FixedSingle;
pb[i, j].BringToFront();
this.Controls.Add(pb[i, j]);
}
}
Now how can I also program it so it adds an image via URL. Before I tried using the file path but it just came out as a red X so I'm wondering how to do it using a URL instead.
Related
I am currently working on the blur function in PSET4 for filter-more, and I am struggling to find the bug in my code. The blur function seems to correctly filter the middle pixel and I would assume other pixels that are not on the edges, but is incorrectly filtering those on the corners and edges. Any nudges in the right direction would be greatly appreciated.
// Blur image
void blur(int height, int width, RGBTRIPLE image[height][width])
{
// Copy to store filtered image into
RGBTRIPLE temp[height][width];
int red_total = 0, blue_total = 0, green_total = 0;
int red_average = 0, blue_average = 0, green_average = 0;
// Goes through each pixel [i][j]
for (int i = 0; i < height; i++)
{
for (int j = 0; j < width; j++)
{
// Loops through surrounding 3x3 grid and records the average of all of them
for (int h = -1; h < 2; h++)
{
// Checks if the current row is within the image array
if (i + h >= 0 && i + h < height)
{
for (int k = -1; k < 2; k++)
{
// Checks if current column is within image array
if (j + k >= 0 && j + k < width)
{
red_total = red_total + image[i + h][j + k].rgbtRed;
blue_total = blue_total + image[i + h][j + k].rgbtBlue;
green_total = green_total + image[i + h][j + k].rgbtGreen;
}
else continue;
}
}
else continue;
}
// Averages and reassigns pixel value
red_average = round(red_total / 9.0);
blue_average = round(blue_total / 9.0);
green_average = round(green_total / 9.0);
temp[i][j].rgbtBlue = blue_average;
temp[i][j].rgbtRed = red_average;
temp[i][j].rgbtGreen = green_average;
// Resets counter variables
red_total = green_total = blue_total = 0;
red_average = blue_average = green_average = 0;
}
}
// Makes image (original) array equal to the filtered image
for (int x = 0; x < height; x++)
{
for(int y = 0; y < width; y++)
{
image[x][y] = temp[x][y];
}
}
return;
}
I've been doing the cs50x course but I'm stuck in the problem set 4, more precisely in the blur function, where I got to create a function that blurs a .bmp image. To blur it I need to do the average of each pixel that surrounds the pixel I'm blurring (him included).
My code works fine in the edge, corner, and middle pixels, but it doesn't work right for a whole 3x3 or 4x4 picture I've been trying everything but nothing seems to fix it.
This is what I got when I run check50: https://submit.cs50.io/check50/011dfd20a431c4e972f8789c677ed60438c5b133
void blur(int height, int width, RGBTRIPLE image[height][width])
{
//temporary variable to store the colour values
RGBTRIPLE copy[height][width];
//loop through each pixel and get the average value for each colour
for (int i=0;i<height;i++)
{
for (int j=0;j<width;j++)
{
float sumRed = 0, sumBlue = 0, sumGreen = 0;
int averageRed = 0, averageBlue = 0, averageGreen = 0, pixels=0, begginingheight =
i-1, endheight = i+1, begginingwidth = j-1, endwidth = j+1;
//height to take the average of the blur in each pixel
if (begginingheight < 0)
{
begginingheight = 0;
endheight = 1;
}
else if(begginingheight == height-1)
{
begginingheight = height-2;
endheight = height-1;
}
else
{
begginingheight = i-1;
endheight = i+1;
}
//width to take the average of the blur in each pixel
if(begginingwidth < 0)
{
begginingwidth = 0;
endwidth = 1;
}
else if(begginingwidth == width-1)
{
begginingwidth = width-2;
endwidth =width-1;
}
else
{
begginingwidth = j-1;
endwidth = j+1;
}
//get the sum of the box that he forms
for (int k = begginingheight; k <= endheight; k++)
{
for (int z = begginingwidth; z <= endwidth; z++)
{
sumRed += image[k][z].rgbtRed;
sumBlue += image[k][z].rgbtBlue;
sumGreen += image[k][z].rgbtGreen;
pixels+=1;
}
}
//calculate their average
averageRed = round(sumRed/pixels);
averageBlue = round(sumBlue/pixels);
averageGreen = round(sumGreen/pixels);
//use the copy to store the colour value
copy[i][j].rgbtRed = averageRed;
copy[i][j].rgbtBlue = averageBlue;
copy[i][j].rgbtGreen = averageGreen;
}
}
for (int i=0;i<height;i++)
{
for(int j=0;j<width;j++)
{
//copy the 2d copy into the true image
image[i][j].rgbtRed = copy[i][j].rgbtRed;
image[i][j].rgbtBlue = copy[i][j].rgbtBlue;
image[i][j].rgbtGreen = copy[i][j].rgbtGreen;
}
}
return;
}
I'm trying to write an animated sort for a class I'm in. My goal is to have the sort displayed as vertical white bars that will be rendered on the canvas I've created.
I've attempted to accomplish this using a Timeline and Keyframes, but the output I get is a blank white canvas that after a few moments outputs the finished and sorted array.
I've resorted to just shuffling around code with no success, and can't find any helpful examples online. I'm hoping someone with some more experience with JavaFX animation can help me learn more about how to properly set this up!
Note that in the code below the array created with the random method is commented out because when used it makes the program hang for long time. The code will output in a reasonable time with a smaller array.
import java.util.Random;
import javafx.animation.KeyFrame;
import javafx.animation.Timeline;
import javafx.util.Duration;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.GridPane;
import javafx.stage.Stage;
import javafx.scene.canvas.Canvas;
import javafx.scene.canvas.GraphicsContext;
import javafx.scene.paint.Color;
public class Project06 extends Application
{
final int SCALE = 16;
final int WIDTH = 64;
final int HEIGHT = 32;
int[][] pixels;
Timeline sortLoop;
int[] myArray = {32,28,22,20,16,13,10,9,5,3};
#Override
public void start(Stage primaryStage) throws Exception
{
pixels = new int[WIDTH][HEIGHT];
int[] myArray = new int[WIDTH];
/*
Random rand = new Random();
for (int i = 0; i < WIDTH; i++)
{
myArray[i] = rand.nextInt((HEIGHT) + 1);
}
*/
Canvas display = new Canvas (WIDTH*SCALE, HEIGHT*SCALE);
GraphicsContext gc = display.getGraphicsContext2D();
GridPane grid = new GridPane();
grid.add(display, 0, 0);
primaryStage.setTitle("Sort");
primaryStage.setScene(new Scene(grid, WIDTH*SCALE, HEIGHT*SCALE));
primaryStage.show();
sortLoop = new Timeline();
sortLoop.setCycleCount(Timeline.INDEFINITE);
// Sort array
for (int i = 0; i < myArray.length - 1; i++)
{
if (myArray[i] > myArray[i + 1])
{
int swap = myArray[i];
myArray[i] = myArray[i + 1];
myArray[i + 1] = swap;
i = -1;
}
// Clear screen by zeroing out pixel array
for (int k = 0; k < WIDTH; k++)
{
for (int j = 0; j < HEIGHT; j++)
{
pixels[k][j] = 0;
}
}
// Draw array with vertical bars (assign values to canvas array)
for (int k = 0; k < myArray.length; k++)
{
for (int j = (HEIGHT - 1); j > ((HEIGHT - myArray[k]) - 1); j--)
{
pixels[k][j] = 1;
}
}
KeyFrame kf = new KeyFrame(Duration.seconds(1), actionEvent -> {
// Render canvas
for (int k = 0; k < WIDTH; k++)
{
for (int j = 0; j < HEIGHT; j++)
{
if (pixels[k][j] == 1)
{
gc.setFill(Color.WHITE);
gc.fillRect((k*SCALE), (j*SCALE), SCALE, SCALE);
}
else
{
gc.setFill(Color.BLACK);
gc.fillRect((k*SCALE), (j*SCALE), SCALE, SCALE);
}
}
}
});
sortLoop.getKeyFrames().add(kf);
sortLoop.play();
}
}
public static void main(String[] args)
{
launch(args);
}
}
First, you are setting the timepoint for all your key frames to the same value (one second), so they all happen simultaneously. You need each key frame to have a different timepoint, so they happen sequentially.
Second, you sort the array, and then the event handlers for the keyframes reference the array. Since the event handlers for the keyframes are executed later, they only see the sorted array. You need to actually manipulate the array in the event handlers for the key frames.
Third, you play the timeline multiple times. You only need to play it once. Additionally, you set the cycle count to INDEFINITE: I think you only need to animate the sort once. (If you actually want it to repeat, you would need to set the array back to its original order at the beginning of the timeline.)
Finally, you have some issues in the implementation of the actual sort algorithm. This is why your application hangs when you randomly populate the array. I won't address those issues here, because the question is about how to perform the animation.
The following code performs a step-by-step animation. It's probably not the correctly-implemented sort, so you won't see the animation you necessarily expect, but it at least repaints the effect of the swaps in an animation:
import java.util.Random;
import javafx.animation.KeyFrame;
import javafx.animation.Timeline;
import javafx.util.Duration;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.GridPane;
import javafx.stage.Stage;
import javafx.scene.canvas.Canvas;
import javafx.scene.canvas.GraphicsContext;
import javafx.scene.paint.Color;
public class AnimatedSort extends Application
{
final int SCALE = 16;
final int WIDTH = 64;
final int HEIGHT = 32;
int[][] pixels;
Timeline sortLoop;
int[] myArray = {32,28,22,20,16,13,10,9,5,3};
#Override
public void start(Stage primaryStage) throws Exception
{
pixels = new int[WIDTH][HEIGHT];
// int[] myArray = new int[WIDTH];
//
//
// Random rand = new Random();
// for (int i = 0; i < WIDTH; i++)
// {
// myArray[i] = rand.nextInt((HEIGHT) + 1);
// }
Canvas display = new Canvas (WIDTH*SCALE, HEIGHT*SCALE);
GraphicsContext gc = display.getGraphicsContext2D();
GridPane grid = new GridPane();
grid.add(display, 0, 0);
primaryStage.setTitle("Sort");
primaryStage.setScene(new Scene(grid, WIDTH*SCALE, HEIGHT*SCALE));
primaryStage.show();
sortLoop = new Timeline();
// sortLoop.setCycleCount(Timeline.INDEFINITE);
// Sort array
for (int index = 0; index < myArray.length - 1; index++)
{
final int i = index ;
KeyFrame kf = new KeyFrame(Duration.seconds(i+1), actionEvent -> {
if (myArray[i] > myArray[i + 1])
{
int swap = myArray[i];
myArray[i] = myArray[i + 1];
myArray[i + 1] = swap;
// i = -1;
}
// Clear screen by zeroing out pixel array
for (int k = 0; k < WIDTH; k++)
{
for (int j = 0; j < HEIGHT; j++)
{
pixels[k][j] = 0;
}
}
// Draw array with vertical bars (assign values to canvas array)
for (int k = 0; k < myArray.length; k++)
{
for (int j = (HEIGHT - 1); j > ((HEIGHT - myArray[k]) - 1); j--)
{
pixels[k][j] = 1;
}
}
// Render canvas
for (int k = 0; k < WIDTH; k++)
{
for (int j = 0; j < HEIGHT; j++)
{
if (pixels[k][j] == 1)
{
gc.setFill(Color.WHITE);
gc.fillRect((k*SCALE), (j*SCALE), SCALE, SCALE);
}
else
{
gc.setFill(Color.BLACK);
gc.fillRect((k*SCALE), (j*SCALE), SCALE, SCALE);
}
}
}
});
sortLoop.getKeyFrames().add(kf);
}
sortLoop.play();
}
public static void main(String[] args)
{
launch(args);
}
}
The time property of KeyFrame denotes the time since the start of the animation, not the time since the previously added KeyFrame. You need to position. You need to pass different times to the KeyFrame constructor.
Furthermore you "sort" a fresh array instead of using the field. Also your pixels array contains the last value from the start.
Better save the swaps to a data structure and use a Timeline to render the changes step by step:
final int SCALE = 16;
final int WIDTH = 64;
final int HEIGHT = 32;
Timeline sortLoop;
int[] myArray = {32, 28, 22, 20, 16, 13, 10, 9, 5, 3};
private void renderBar(GraphicsContext gc, int barIndex, double canvasHeight, int barHeight) {
double rectHeight = barHeight * SCALE;
gc.fillRect(SCALE * barIndex, canvasHeight - rectHeight, SCALE, rectHeight);
}
#Override
public void start(Stage primaryStage) throws Exception {
int[] myArray = this.myArray.clone(); // copy field (you may also simply delete this declaration, if you never reuse the initial array)
class Swap {
final int lowerIndex, value1, value2;
public Swap(int lowerIndex, int value1, int value2) {
this.lowerIndex = lowerIndex;
this.value1 = value1;
this.value2 = value2;
}
}
final double canvasHeight = HEIGHT * SCALE;
Canvas display = new Canvas(WIDTH * SCALE, canvasHeight);
GraphicsContext gc = display.getGraphicsContext2D();
primaryStage.setTitle("Sort");
primaryStage.setScene(new Scene(new Group(display)));
primaryStage.show();
// render initial state
gc.setFill(Color.WHITE);
gc.fillRect(0, 0, display.getWidth(), canvasHeight);
gc.setFill(Color.BLACK);
for (int i = 0; i < myArray.length; i++) {
renderBar(gc, i, canvasHeight, myArray[i]);
}
// Sort array & save changes
List<Swap> swaps = new ArrayList<>();
for (int i = 0; i < myArray.length - 1; i++) {
if (myArray[i] > myArray[i + 1]) {
int swap = myArray[i];
myArray[i] = myArray[i + 1];
myArray[i + 1] = swap;
swaps.add(new Swap(i, myArray[i], swap));
i = -1;
} else {
// no change
swaps.add(null);
}
}
sortLoop = new Timeline();
sortLoop.setCycleCount(swaps.size());
final Iterator<Swap> iter = swaps.iterator();
sortLoop.getKeyFrames().add(new KeyFrame(Duration.seconds(1), evt -> {
Swap swap = iter.next();
if (swap != null) {
// clear old area
gc.setFill(Color.WHITE);
gc.fillRect(SCALE * swap.lowerIndex, 0, SCALE * 2, canvasHeight);
// draw new bars
gc.setFill(Color.BLACK);
renderBar(gc, swap.lowerIndex, canvasHeight, swap.value1);
renderBar(gc, swap.lowerIndex+1, canvasHeight, swap.value2);
}
}));
sortLoop.play();
}
I've managed to print the co-ordinates of a cell when it's clicked.
Now I'm looking for help and advice to use the this data in order to change the cell colour to red - unless the cell selected is a base cell, I want those to remain as a constant. Here's the code I'm working with:
Tile[][] tileArray = new Tile[10][10];
int rows = 10;
int cols = 10;
int[] base = { 4,4, 4,5, 4,6, 4,7 };
void setup() {
size(500, 500);
for (int i = 0; i < rows; i++) {
for (int j = 0; j < cols; j++) {
tileArray[i][j] = new Tile(i*50, j*50);
}
}
}
void draw() {
for (int i=0; i<base.length; i+=2) {
fill(0, 0, 255);
rect(base[i]*50, base[i+1]*50, 50, 50);
}
}
void mousePressed() {
for (int i = 0; i < rows; i++) {
for (int j = 0; j < cols; j++) {
println (mouseX/50 +"," + mouseY/50);
}
}
}
class Tile {
Tile(int x, int y) {
fill(255);
stroke(0);
rect(x, y, 50, 50);
}
}
EDIT:
I've added the functionality which I am looking for, but I assume that I have not stored my base cell data correctly. As you can still click on the base cell and an active cell is drawing underneath. Here is the new code:
Tile[][] tiles;
int gridSize = 10;
int tileSize = 50;
void setup() {
size (450, 400);
generateGrid();
}
void draw() {
background (255);
display();
}
public void generateGrid() {
tiles = new Tile[gridSize][gridSize];
for (int i = 0; i < gridSize; i++) {
for (int j = 0; j < gridSize; j++) {
tiles[i][j] = new Tile((i*50), (j*50), tileSize, tileSize);
}
}
}
public void display() {
for (int i = 0; i < gridSize; i++) {
for (int j = 0; j < gridSize; j++) {
tiles[i][j].display();
}
}
}
void mousePressed() {
for (int i = 0; i < gridSize; i++) {
for (int j = 0; j < gridSize; j++) {
println (mouseX/50 +"," + mouseY/50);
}
}
int mx = mouseX/50;
int my = mouseY/50;
tiles[mx][my].active = !tiles[mx][my].active;
// tiles[mx][my].base = !tiles[mx][my].base;
println(tiles[mx][my].active);
}
class Tile {
int tx, ty, tw, th;
int[] baseCell = { 4, 2, 4, 3, 4, 4, 4, 5 };
color col_default = color(255);
color col_base = color(0, 0, 255);
color col_active = color(255, 100, 50);
boolean active = false;
boolean base = false;
Tile (int itx, int ity, int itw, int ith) {
tx = itx;
ty = ity;
tw = itw;
th = ith;
}
void display() {
stroke(0);
fill(col_default);
if ( active ) fill (col_active);
rect(tx, ty, tw, th);
for (int i=0; i<baseCell.length; i+=2) {
fill(col_base);
rect(baseCell[i]*50, baseCell[i+1]*50, 50, 50);
}
}
}
Your Tile class doesn't really make sense right now. It doesn't really make sense to draw to the screen from a constructor. Instead, move that logic into a draw() function inside the Tile class.
Your Tile class also has to keep track of its state: whether it's a base cell or not, or any other kind of cell it can be. You might do this with an enum, or an int, or a set of booleans. That part is completely up to you.
Then in your Tile.draw() function, you should check that state to decide what color to draw. From the sketch's draw() function, simply loop over each Tile and tell it to draw itself.
Finally, when you click, simply set the state of the Tile that you clicked on.
I want to take the data in a field that contains a jpeg image and save it to an actual file that I can open with a paint editor. I know I could create an application to do this in c# but I'm wondering if there's a quick and easy way to just do it from a sql query?
It doesn't need to work on all records at once. I just need to be able to select a single record and save the image for that record to a file.
You can use MemoryStream object in C# as below
MemoryStream memstmSignature = new MemoryStream(InkToBytes(ds.Tables[1].Rows[0]["SIGNATURE"].ToString(), "image/gif", 0, 0));
Image imaSig = Image.FromStream(memstmSignature);
imaSig.RotateFlip(RotateFlipType.Rotate180FlipX);
imaSig.Save(Path.Combine(this.temporaryFilePath, this.signatureFileName));
memstmSignature.Close();
Helper functions below
private static byte[] InkToBytes(string inkStrokes, string encoderType, float x, float y)
{
ArrayList strokes = new ArrayList();
// max size for bit map
int maxX = 0;
int maxY = 0;
// intialize the strokes array with text string
int strokesCount;
if (inkStrokes.Length > 0)
{
if (inkStrokes.EndsWith(";"))
inkStrokes = inkStrokes.Remove((inkStrokes.Length - 1), 1);
char[] strokeSeperator = { ';' };
string[] strokeArray = inkStrokes.Split(strokeSeperator);
strokesCount = strokeArray.Length;
for (int i = 0; i < strokesCount; i++)
{
Stroke stroke = new Stroke(50);
stroke.Text = strokeArray[i];
strokes.Add(stroke);
Point[] points = stroke.ToPointArray();
int len = points.Length;
foreach (Point point in points)
{
maxX = (point.X > maxX ? point.X : maxX);
maxY = (point.Y > maxY ? point.Y : maxY);
}
}
}
// setup the gdi objects
Bitmap bitMap = new Bitmap(maxX + 20, maxY + 20); // leave some buffer room
Graphics graphics = Graphics.FromImage(bitMap);
Rectangle clientRect = new Rectangle(0, 0, bitMap.Width, bitMap.Height);
Pen pen = new Pen(Color.Black);
pen.Width = 2; // matches the client capture
// draw the bit map
if (x > 0 && y > 0)
graphics.DrawImage(bitMap, x, y);
else
graphics.DrawImage(bitMap, 0, 0);
graphics.FillRectangle(Brushes.White, clientRect);
graphics.DrawRectangle(pen, clientRect);
strokesCount = strokes.Count;
for (int j = 0; j < strokesCount; j++)
{
Stroke stroke = (Stroke)strokes[j];
if (stroke != null)
{
Point[] points = stroke.ToPointArray();
int len = points.Length;
if (len > 1)
{
Point prevPoint = points[0];
for (int i = 1; i < len; i++)
{
graphics.DrawLine(pen, prevPoint.X, prevPoint.Y, points[i].X, points[i].Y);
prevPoint = points[i];
}
}
}
}
// create the bytes from the bitmap to be returned
MemoryStream memStream = new MemoryStream(1000);
ImageCodecInfo imageCodedInfo = GetEncoderInfo(encoderType);
bitMap.Save(memStream, imageCodedInfo, null);
byte[] bytes = memStream.GetBuffer();
memStream.Close();
return bytes;
}
private static ImageCodecInfo GetEncoderInfo(String mimeType)
{
int j;
ImageCodecInfo[] encoders;
encoders = ImageCodecInfo.GetImageEncoders();
for (j = 0; j < encoders.Length; ++j)
{
if (encoders[j].MimeType == mimeType)
return encoders[j];
}
return null;
}
Hope this helps.
NOTE: I have not looked into to optimizing the above code