For the past few months I've been oddly fascinated by the creativity and projects created using a simple Raspberry Pi board. So I decided to pick one up for myself, along with a few gadgets for my little Raspberry Pi 2, as a sort of "starter kit." Among those gadgets are a Bluetooth, and Wi-Fi USB dongle.
I was particularly fascinated by a fellow who had written a program to detect when certain registered Bluetooth devices came within range of the device. He had mounted his module in his house, clocking recognized devices as they came and went from the house as the day progressed. He then used this data, maintained a list of who was currently at home, and presented this data to the owner over the internet.
Aside from that, a cheap $35 quad-core home-based file server is never a bad thing.
Alright, so I've been working on a Checkers game in my free time using HTML 5 and JS. While I've not made a lot of progress just yet, I have hit somewhat of a brick wall. I'm not all that proficient in JS just yet, but I've done a fair amount of research concerning it, to little avail.
My problem is I can create and load images just fine, but when it comes to drawing them properly onto the canvas is when I get problems. When using drawImage(...); calls outside a loop, they will draw correctly, and more importantly, at the correct coordinates. Conversely, if I were to place a drawImage(...); call inside a loop, the images will display correctly, but at the coordinates of the last image to be drawn.
document.addEventListener('DOMContentLoaded',onLoad,false)
/* Holds information about a game piece on the board */
function onLoad() {
/* Grab the canvas element & context drawer */
var canv = document.getElementById("board");
var ctxt = canv.getContext("2d");
/*Initialize Board & Game Values*/
var rows = 8;
var cols = 8;
var evenTiles = "#CCC";
var oddTiles = "#444";
var board = [];
var red = new Image();
red.src = "Images/Red.png";
var black = new Image();
black.src = "Images/Black.png";
/* Initialize the underlying array "pieces" to default values */
for (a = 0; a < rows; a++) {
row = [];
for (b = 0; b < cols; b++) {
if (a < 2) {
if ((a % 2) == 0)
if ((b % 2) != 0)
row.push(new Piece(Piece.Color.RED, Piece.Status.NORMAL, b, a));
else
row.push(null);
else
if ((b % 2) == 0)
row.push(new Piece(Piece.Color.RED, Piece.Status.NORMAL, b, a));
else
row.push(null);
}
else if (a > (rows - 3)) {
if ((a % 2) == 0)
if ((b % 2) != 0)
row.push(new Piece(Piece.Color.BLACK, Piece.Status.NORMAL, b, a));
else
row.push(null);
else
if ((b % 2) == 0)
row.push(new Piece(Piece.Color.BLACK, Piece.Status.NORMAL, b, a));
else
row.push(null);
}
else
row.push(null);
}
board.push(row);
}
/* Draw the game board to the canvas */
for (a = 0; a < rows; a++) {
var row = (canv.height / rows) * a;
for (b = 0; b < cols; b++) {
var col = (canv.width / cols) * b;
if ((a % 2) == 0)
if ((b % 2) == 0)
ctxt.fillStyle = evenTiles;
else
ctxt.fillStyle = oddTiles;
else
if ((b % 2) == 0)
ctxt.fillStyle = oddTiles;
else
ctxt.fillStyle = evenTiles;
ctxt.fillRect(row, col, (canv.height / rows), (canv.width / cols));
//# PROBLEMATIC CODE #
if (board[a][b] != null) {
var piece = board[a][b];
if (piece.Color == Piece.Color.RED)
red.addEventListener("load", function () { ctxt.drawImage(red, piece.X * 100, piece.Y * 100) }, false);
else
black.addEventListener("load", function () { ctxt.drawImage(black, piece.X * 100, piece.Y * 100) }, false);
}
//# END PROBLEMATIC CODE #
}
}
}
The above code produces the following which draws all the pieces on top of one another at the last image's coordinates.
I'm thinking that the coordinates are changing, before the image is fully drawn, thus prompting the renderer to keep re-drawing it each time the variable changes. However, on the other hand, one would think that it has ample time to fully draw an image before it's called upon a second time.
Any suggestions?
So I'm a bit of a newbie with Javascript, and have been doing a good amount of research on click events. Sadly I've yet to resolve my problem of not getting any click events to fire on my pages, not a single one. the JS doesn't even seem to be getting evaluated at any point.
Things I've tried:
I just need to call a simple click event on one element identified by a css class type. Can anyone offer some suggestions?
@Hawkee The snippets page in mobile becomes a little jumbled on bigger descriptions pushing text onto other descriptions and other things of the like. On mobile that is.
Just a suggestion but it'd be nice to be able to search snippets by category like we're able to in scripts.
I'd say I'm surprised by Windows 8 ravaging my computer's hardware yet again, but I'd be lying. This time it's done locked my SSD in between states so badly I can't even crack it open in Ubuntu. Just gonna chalk it up to the several hundred other problems Windows 8 has thrown at me this week. Superb.
@Hawkee Did you reinstate a few ads on the site? I'm noticing one on the top right hand corner.
Edit: /Facepalm That's my fault. My laptop seemingly exploded so it seemed that, after restoring it to an earlier image, my chrome extensions were corrupt and needed replacing. Lesson learned, leave overclocking to the desktop computers.
Been rather quiet recently so; what projects are you guys working on? Anything unique? What language are you developing it with? Do you plan to release it? Things of that nature. :)
I've been fairly busy with work but I've been working on employing some efficiency techniques into my only ongoing C# project, WiFi Sniffer. However I have taken a likening to making HTML website layouts, using CSS, images, among other resources.
http://www.phoronix.com/scan.php?page=news_item&px=MTM0NzE -- Ah it seems that there finally is a light at the end of the tunnel! :) It would seem Nvidia has finally rolled out a driver package that should support its Optimus technology on Linux based systems. Time to try it out on Ubuntu 13.04.
http://css-tricks.com/slide-in-as-you-scroll-down-boxes/ -- A rather interesting blog post that duplicates the Nexus 7's news story loading animations using CSS and JQuery.
