-
-
-
@gordon does that mean I wire RST to the RST + 3.3V and BTN1 to B12 + GRND?
-
@gordon not sure if I'm missing something, but how could I define a really wide image to render (I'm thinking platform game level graphic)? In the examples here https://github.com/espruino/EspruinoDocs/blob/master/tasks/Graphics.md, it assumes the image is 8 bits wide, and given we only have up to unit32array, does that mean the max image width is 32 pixels?
one other thing, there is an issue with that demo code, if you set some pixels to '1' in the bottom row, they don't render (i'm having to fudge it by adding an extra '0' row afterwards).
-
-
@gordon I may convert it to JS at some point, but like I say, I just wanted to throw something together quickly.
RE drawImage, is there any docs / examples for this yet?
-
@Gordon the gamer board comes with a piezo buzzer on it. What would be the best tact on playing music whilst playing the game?
-
@Gordon you mean share the source code? I'd be happy to, although it is written in .NET (not that it needs to be, but it's what I know).
I was going to do a full on font editor, but thought I'd do the simplest thing first :)
Question, how performant is rendering a font? I was wondering about using custom bitmaps in a font for things like splash screens on my DIY gamer, saving having to do a bunch of fillRects. It could also be used as a pseudo level builder for certain games (a 100 x 8 character sort of thing).
Matt
-
In my DIY Gamer Project I needed the ability to show a score at the end. Having looked at the built in bitmap / vector fonts, these weren't really what I wanted. I wanted something that would fill the screen, so had a look into creating a bitmap font.
There are some docs here on the subject, but it requires you to do some initial steps with some other software, and the code for the conversion seems to be a bit out of date aswell.
So after figuring out how it all worked, I thought I'd throw a simple web page together to help do the conversion for you, so here it is.
http://ebfc.mattbrailsford.com
Simply upload a local bitmap image file containing the graphics charset (in ASCII code order as black text on a white background), tell it what the first character is (just type the character, no need to know the ASCII code), tell it the width / height of the character bounds and whether it is a fixed width font, or whether it should calculate the smallest possible width for each character then hit the "Convert" button.
It'll then generate the code you need to drop into your Espruino sketch and you hey-presto, you have your custom bitmap font ready to use.
Hope it helps some folk.
Matt
-
Ok, figured it out :) So I just needed to pysically set the pin mode to input, and as the buttons are wired to ground, have the pin pull up by default, so adding the following, before registering the setWatches worked.
pinMode(UP, 'input_pullup'); pinMode(LEFT, 'input_pullup'); pinMode(RIGHT, 'input_pullup'); pinMode(DOWN, 'input_pullup'); pinMode(START, 'input_pullup');
I can now capture buttons :) whoop!
-
Hey Guys, so if you've seen any of my other posts on the forums, you'll know that I've now switched out the display for an Adafruit 8x8 BiColor matrix. The benefits are two fold. 1) it has more colours and 2) it has an in-built oscillator so there is no need to keep updating it row by row, instead I can just send it a picture to draw, and it'll keep drawing it till you tell it otherwise. This should hopefully take a lot of pressure off the Espruino.
So, I'm now playing with wiring up the buttons. I did some initial tests a while ago and could detect the buttons, however on playing with it today, there does seem to be some issues. Looking at the wiring, all the buttons are wired:
3.3v ADC PIN > BTN > Grnd
Now, when I setWatch on the buttons like so:
setWatch(function(){ console.log("UP"); }, UP, { repeat:true, edge:'falling', debounce:10 }); setWatch(function(){ console.log("LEFT"); }, LEFT, { repeat:true, edge:'falling', debounce:10 }); setWatch(function(){ console.log("RIGHT"); }, RIGHT, { repeat:true, edge:'falling', debounce:10 }); setWatch(function(){ console.log("DOWN"); }, DOWN, { repeat:true, edge:'falling', debounce:10 }); setWatch(function(){ console.log("START"); }, START, { repeat:true, edge:'falling', debounce:10 });
I do get the words printing to the terminal, but I also get them printed quite a few times after letting go of the buttons (my initial thoughts were just to do with debounce, but as you can see, that is set). And more weird, the start button (which is a differen type of button to the up/down/left/right ones) will trace just by touching the metal casing on the button.
Would I be right in assuming then this sounds like a case of needing a pullup/pulldown resistor? if so, which kind would I need in this situation? and any suggestions on where best to wire them? (I wanna try and keep the gamer as stock looking as possible). If this isn't the issue, has anyone got any suggestions on what it might be?
Many thanks
Matt
-
Something that might be handy is in the constructor of the createArrayBuffer if we could maybe pass in a rotationOffset? Seems I had to mount the display upside down, so could be handy to say offset rotation by '2', then any calls to setRotation would be the rotation + the offset (wrapped of course).
-
-
-
@gordon regarding rotation, would this be something easy enough to add to arrayBuffer? or should I implement my own solution for now? (I've created an issue for it on GitHub)
-
Yup :) I did a write up for the creators here (need to update my project page with the same), but I basically removed the original matrix, stuck the adafruit shield in place, and hot wired it the the relevant pins. Works a treat :)
The great thing is, it's got it's own internal oscilator, so I only have to send it something when I want it to update, not like the previous one that required every line updating every ms.
Matt
-
oops, missed your reply. But seems you were of the same mind as me anyway :)
And in answer to your question, yes, yes you can :)
Check out the demo http://www.youtube.com/watch?v=rkK0aqxzk-M&feature=youtu.be
-
-
Ok, haven't fully read your posts yet, which I will now, but here is what I have currently, which does work:
var a = new Uint16Array(display2.buffer); var b = new Uint16Array(8); for(var i=0;i<a.length;i++) { var k = (i + 4) % 8; var x = a[i]; // Uninterleave var t = (x ^ (x >> 1)) & 0x2222; x = x ^ t ^ (t << 1); t = (x ^ (x >> 2)) & 0x0C0C; x = x ^ t ^ (t << 2); t = (x ^ (x >> 4)) & 0x00F0; x = x ^ t ^ (t << 4); // Shift b[k] = ((x & 0x0F0F) << 4) | ((x & 0xF0F0) >> 4); } var tmp = new Uint8Array(17); tmp.set(new Uint8Array(b.buffer), 1); i2c.writeTo(address, tmp);
the 'k' and 'shift' part of the sequence do the fixing of quadrents ('k' shifts up / down and the 'shift' code, shifts horizontally). Because I need to write one coordinates value to a different location, that is why I needed the 'b' array otherwise I'd overwrite values in 'a' I hadn't processed yet if I just tried to update 'a'.
-
-
@Gordon looking at converting the callback to a graphics array then. If I switch the callback to be a buffer array, when I debug out the contents of the buffer, I have an array as follows:
[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,2,2,2,2,2,2,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,2,2,2,2,2,2,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
If I format this a little, you'll see it is meant to print out an E with the E in red, and the background yellow:
[ 1,1,1,1,1,1,1,1, 1,1,1,1,1,1,1,1, 1,1,2,2,2,2,2,2, 1,1,1,1,1,1,1,1, 1,1,1,1,1,1,1,1, 1,1,2,2,2,2,2,2, 1,1,1,1,1,1,1,1, 1,1,1,1,1,1,1,1 ]
So, if I look at what was previously being sent down the line, it needs an array with the buffer:
[0,0,255,0,255,252,255,0,255,0,255,252,255,0,255,0,255]
Which should be the buffer of:
new Uint16Array([65280,65280,65532,65280,65280,65532,65280,65280])
But with an extra
0
in position 0.Converting the Uint16 array to binary, we can see that it is:
1111111100000000 1111111100000000 1111111111111100 1111111100000000 1111111100000000 1111111111111100 1111111100000000 1111111100000000
(Not sure whether the E being backwards is something I've done, or just the way it is, but I'll figure that bit out later).
So, should I loop through the buffer array and construct a Uint16Array (handling each entry one at a time, kinda like the drawPixel method currently but all in one go at the point of render) and then do what I'm currently doing to create the array buffer with the extra
0
at position 0 with the code:var tmp = new Uint8Array(17); tmp.set(new Uint8Array(displaybuffer.buffer), 1);
With all of this though, I'm not sure where the interleaved colour handling you were talking about in buffer array comes into play as I can't see it? Am I missing something there?
Matt
-
Thanks @Gordon, I get what you mean now with the interleaving. I'll do what you said and take a look at the values being rendered and see what I can come up with.
Haven't quite got my head around the multiply-AND yet, so I think some experimenting with that is in order too. Sounds powerful though :)
Matt
-
Holy heck, I think I've just learnt something :)
So, playing with the buffer array I have, it's seems I was wrong about the order, it's red, then green, but the rest is true :)
And I've also figured out how to bitshift the segments in an array entry (so the 1st and 3rd block of 4 shift right 4, and the 2nd and 4th shift left 4).
rowValue = ((rowValue & 0x0F0F) << 4) | ((rowValue & 0xF0F0) >> 4);
Woo hoo! :)
So what would be the most performant way to do this within my updateDisplay method? My natural instinct would be to create a new array, and loop the other creating new (shifted) values, then do what I'm currently doing now to render it. Would that be the way to go?
Ok, wadda we think to v2?
I've added buttons, wired up the missing connectors, moved the terminal block to the other side, and made sure both sides of the boards are filled with copper (On the top side, the entire fill is used as the heat sink, I just expose the coffee cup shape to solder onto).
Matt