...

View Full Version : Canvas Problem



pdiddles03
12-04-2012, 10:42 PM
I'm delving into canvas now, pretty simple switch from creating a map with HTML divs to canvas.

Problem though, I'm using 2 for loops inside one another to increment each tile. here is the code, For some reason I am getting a error.



<!DOCTYPE html>
<html>
<head>
<style type="text/css">

#my_canvas{
border: 1px solid black;
-moz-transform: skew(-50deg,25deg);
position: relative;
top: 150px;
left: 200px;

}
#myguy{
left: 0;
position: absolute;

}
#grass{
height: 50px;
width: 50px;
background: url(new/grass.png):
position: relative;
float: left;
}

</style>

</head>
<body>

<canvas id="my_canvas" width="600" height="400"></canvas>

<script type="text/javascript">

var canvas=document.getElementById('my_canvas');
var context=canvas.getContext("2d");



var guyLeft=0;
var guyTop= 0;

var map=[
"1111111111",
"1000001100",
"1000001111",
"1100001001",
"1100001001",
"0000001001",
"1111111011",
"1111111111",
"1111000111",
"1111111111"

];

var x=0;
var y=0;

var tilePos=-25;
var tileTop=0;
var tileTopCount=0;




function drawMap(){
map[x][y];
for(x=0; x <= map.length; x++){

for(y=0; y <= map[x].length; y++){

var tile=new Image();
tilePos+=25; //increment the tile position by 25

if(parseInt(map[x][y])===1){
tile.src="new/grass.png";
context.drawImage(tile,tilePos,tileTop);


}
if(parseInt(map[x][y])===0){
tile.src="new/cement.jpg";
context.drawImage(tile,tilePos,tileTop);


}

tileTopCount++;

if(tileTopCount===map[x].length){
tileTop +=25;
tileTopCount=tileTopCount-map[x].length-1;
tilePos=-50;
}


}

}

}


function clearCanvas(){
canvas.width = canvas.width;
}


drawMap();


</script>


</body>
</html>


I keep getting at error at the second for loop statement that map[x].length is undefined, anyone know why?

AndrewGSW
12-04-2012, 11:06 PM
background: url(new/grass.png): << this should be a semi-colon
I'm not sure what you are attempting with this line:

map[x][y];
but it looks redundant and should be deleted.

The main issue is that you are attempting to read an element beyond the last one (<= length):


for(x=0; x <= map.length; x++){
// should be
for(x=0; x < map.length; x++){

BTW Your page should have a <title> as well :thumbsup:

BTWW I understand it is preferable to use the following to clear the canvas:


context.clearRect(0, 0, canvas.width, canvas.height);

donna1
12-04-2012, 11:12 PM
you have got three equals in the line



if(tileTopCount===map[x].length){


and in another line above too, are three equals allowed???

devnull69
12-04-2012, 11:14 PM
you have got three equals in the line



if(tileTopCount===map[x].length){


???

Which means "strictly equal", so value and type must be equal.

donna1
12-05-2012, 12:45 AM
what do the lines beginning with # do?
like #myguy ?

also sometimes Ive seen lines beginning with $ - is that javascript or something else?

Old Pedant
12-05-2012, 12:51 AM
In CSS, you use a period (.) to indicate "match on class name" and the octothorp (#) to indicate "match on id".

So:


<html>
<head>
<style type="text/css">
.funky {
color : magenta;
background-color : lime;
}
#butNotMe {
color : black;
backgroundColor : white;
}
</style>
</head>
<body>
<div class="funky" id="woof">This text will show purple on green</div>
<div class="funky" id="butNotMe">This text will be black on white</div>
<div class="funky" id="zing">Back to purple on green</div>
</body>
</html>

How did you get started in JavaScript, mucking with things like canvas and more, and completely bypass the fundamentals of HTML and CSS??

I think it would be worth your while to go back and catch up on HTML and CSS.

Oh, and by the way, this question has nothing to do with JavaScript.
(Though jQuery uses "." and "#" in the same way as "selectors".)

Old Pedant
12-05-2012, 12:55 AM
Oh, and the stuff with $ is *LIKELY* jQuery. A JavaScript library.

In jQuery, you use

$("#butNotMe")

as a shorthand for

document.getElementById("butNotMe")

By and of itself, that's not a huge advantage.

But jQuery also allows you to use

$(".funky")
as a short hand for

document.getElementsByClassName("funky")
and then IN EITHER CASE allows you to write code that affects *ALL* the elements found (whether only one when "#" is used of hundreds when "." is used).

donna1
12-05-2012, 01:02 AM
I skipped CSS and HTML because I don't like them, javascript seems ok ;)

I don't like JQuery either.

Why do you call a Hash # an Octothorp ?
.. is that to make it sound more complicated and keep yourself in a job? lol

AndrewGSW
12-05-2012, 01:07 AM
@Old Pedant octothorpe ;)

Old Pedant
12-05-2012, 01:15 AM
Hey, octothorp/octothorpe/octotherp was around for many many years before programmers ever started calling it the "hash symbol". It never had been in usage in the USA before you Brits started calling it that.

It was actually called the "pound sign" when I was a kid, meaning weight in pounds (you know, those things you Brits invented, foisted off on us, and then abandoned!). That is, we used to commonly write 37# (pr sometimes #37) meaning 16.8kg.

Anyway, I started programming in the 1960s, so octothorp is appropriate for me!
http://en.wiktionary.org/wiki/octothorpe

*************

So far as I am concerned, JavaScript is useless without completely understanding HTML and CSS. You will keep on asking questions like this because even JavaScript programmers *NEED* to know how the underlying HTML and CSS work to be effective. You are running around with blinders on (or that another Americanism?) if you fail to learn HTML and CSS.

Old Pedant
12-05-2012, 01:16 AM
@Old Pedant octothorpe ;)

Debatable.

http://en.wiktionary.org/wiki/octothorpe
http://en.wikipedia.org/wiki/Number_sign

But yeah, octothorpe is probably more common.

AndrewGSW
12-05-2012, 01:21 AM
@Old Pedant
I thought you would respond/reposte :D

pdiddles03
12-05-2012, 01:25 AM
What could you even do without HTML and CSS in javascript? I thought the whole point of it was to manipulate HTML elements and their styles. AS far as I know that is.

Old Pedant
12-05-2012, 01:56 AM
donna1 seems to be only concerned with drawing shapes and stuff on a canvas.

So I suppose if you are not interested in anything else you could get away with just learning one of the drawing libraries for canvas.

But man, it sure is self-limiting, isn't it.

Old Pedant
12-05-2012, 01:57 AM
@Old Pedant
I thought you would respond/reposte :D

Hey, at least I admitted your spelling was more common! <grin/>

donna1
12-05-2012, 02:01 AM
What could you even do without HTML and CSS in javascript?

with html5 canvas you can draw and write text and everything in javascript.
It can be interactive too and do moving graphics.

the only other thing I may need is PHP to read and write to a database on a server, it seems a shame that javascript cant do that directly?

Old Pedant
12-05-2012, 02:03 AM
I have to admit that I would never bother to use === for something like this:


if(tileTopCount===map[x].length){

I mean, we *KNOW* that both of those values are numbers. The one because we made it so, the other because the .length property is guaranteed to be so.

So why do we need to test that the types are equal?

If JavaScript were more sensitive to what === means, I might be more inclined to use it. For example, if === distinguished between integers and non-integers. But it doesn't, because JavaScript doesn't see a distinction between them.

I commonly only use === when I'm comparing against something being returned by some function and where I can't guarantee the type being returned.

Still, it's a nice operator to have in your arsenal.

Old Pedant
12-05-2012, 02:06 AM
with html5 canvas you can draw and write text and everything in javascript.
It can be interactive too and do moving graphics.

Yes. And it's overkill in probably more than half the things I see it being used for.

And it's no substitute for many HTML tags and CSS properties.

For example, if you draw text on a canvas, then that text is SET at the number of pixels you used when you drew it.

If I put HTML text on a page, using CSS such as

<span style="font-size: x-large;">Headline</span>

then the browser user can easily cause the font size to grow or shrink, so it can be much more user-friendly to, say, people with limited vision.

donna1
12-05-2012, 02:08 AM
I really dont like this ===

I dont agree with even the two distinctions of = and ==
That caused me loads of bugs last week before I realised they are completely different

Another stupid idea from someone, who has probably wasted combined millions of hours in errors since

Old Pedant
12-05-2012, 02:12 AM
[CODE]
the only other thing I may need is PHP to read and write to a database on a server, it seems a shame that javascript cant do that directly?

So PHP can also draw on canvases, creating images that can then be just dropped into an HTML page.

Except for animation, why learn to even use JavaScript? Or why learn to create HTML with PHP? Just use PHP to create images and never learn anything more.

Sorry, but pfui. You remind me of the ranks and ranks of COBOL programmers who never learned anything else and are now stuck doing nothing but maintaining ancient legacy code. Or the steam engine repairmen who refused to learn diesel engines. Or the scribes who refused to learn how to work a printing press. Or...

Learn as much as you possibly can!

I've been programming for over 40 years now, and I *STILL* try to learn something new as often as possible. New languages, new techniques, new tricks for better database efficiency, etc., etc., etc.

pdiddles03
12-05-2012, 02:12 AM
I really dont like this ===

I dont agree with even the two distinctions of = and ==
That caused me loads of bugs last week before I realised they are completely different

Another stupid idea from someone, who has probably wasted combined millions of hours in errors since

How is it stupid? = means you are setting a value for something. For the Majority of the time I use === not ==.

I can tell you really don't know a lot about programming in Javascript.

pdiddles03
12-05-2012, 02:13 AM
oh and == and === means you are comparing

pdiddles03
12-05-2012, 02:13 AM
One last thing, How come I have to load my page twice for my map to display?

donna1
12-05-2012, 02:14 AM
OPendant I agree that it is slightly harder in javascript to increase font size, as you have to set the text style as a string of "font + size pt"
Not logical, should just be a fontsize = number, but still its not that difficult to change with a sting

Old Pedant
12-05-2012, 02:15 AM
I really dont like this ===

I dont agree with even the two distinctions of = and ==
That caused me loads of bugs last week before I realised they are completely different

Another stupid idea from someone, who has probably wasted combined millions of hours in errors since

So presumably you would like the PASCAL solution better?

Pascal uses := for assignment and = for comparison.

And it's just as easy there to make the mistake of using = when you meant := as it is to make the JavaScript/Java/C/C++/C#/PHP (and other languages!!!!) mistake of using = when you meant ==.

If you REALLY want confusion, use BASIC, which only has =. And what do you think

A = B = C = 7
means in BASIC??

HINT: A will get a value of FALSE. Probably.

Old Pedant
12-05-2012, 02:18 AM
OPendant I agree that it is slightly harder in javascript to increase font size, as you have to set the text style as a string of "font + size pt"
Not logical, should just be a fontsize = number, but still its not that difficult to change with a sting

** WRONG **

Yes, your JAVASCRIPT code can COMPLETELY REDRAW the canvas, assuming you code like that and assuming you choose to change the fontsize number.

The BROWSER USER can *NOT* cause that to happen unless you give her/him some way to REQUEST the change in font size.

donna1
12-05-2012, 02:19 AM
You put the word IF before a comparison and LET before an assignment and you can use = in both cases. ;)

Old Pedant
12-05-2012, 02:19 AM
One last thing, How come I have to load my page twice for my map to display?

Because you coded something wrong?

How can we guess without seeing your code?

Old Pedant
12-05-2012, 02:20 AM
You put the word IF before a comparison and LET before an assignment and you can use = in both cases. ;)

Sure about that?



LET A = B = C = 7


Only the first = there is an assignment!

donna1
12-05-2012, 02:24 AM
yes well in my language you couldnt have a statement like A=B=C=7
doesnt make any sense anyway
if you want them all to be 7
LET A=7;
LET B=A;
LET c=A;

pdiddles03
12-05-2012, 02:28 AM
Because you coded something wrong?

How can we guess without seeing your code?

look at my first post, I am the starter of the thread.

donna1
12-05-2012, 02:47 AM
Not sure why you reset your x coord, tilePos = -50 when you draw the next line?
Thats off the canvas

Easier - just have the x coordinate as x*25
or even 40+x*25 (say if you want a 40 pixel margin)

similarly your tileTop (y) coordinate could just be y*25

it will save you doing all the tilePos counting which is where the error is anyway.

Also you reset your image and reload your picture source every turn of the loop. That would be better done before the for loops start!

See 3 posts Below for my re-write!

Old Pedant
12-05-2012, 02:59 AM
... a statement like A=B=C=7
doesnt make any sense anyway ...


First of all, it *does* make sense.

In JavaScript, you would write it as

A = B == C == 7;

And it means

A = ( ( B == C ) == 7 )
which means that A will always end up being false, because you are comparing a boolean (true/false result of comparing B and C) to an integer. But that doesn't mean the construction is useless. I purposely created a pathological case.

*******************


in my language you couldnt have a statement like A=B=C=7

When you get a few years experience, if you really want to create a braindead language that doesn't allow that, you can. Just don't expect anybody to then use it.

Old Pedant
12-05-2012, 03:01 AM
look at my first post, I am the starter of the thread.
LOL! Sorry! Mea maxima culpa! I thought I was answering donna1.

Let me go look again.

Though I'm not best person to ask about canvas.

donna1
12-05-2012, 03:04 AM
Ive already rewritten it in perfect javascript lol


var grass=new Image();
var cement=new Image();
grass.src="new/grass.png";
cement.src="new/cement.jpg";

for(x=0; x < map.length; x++){
for(y=0; y < map[x].length; y++){

if(parseInt(map[x][y])==1){
context.drawImage(grass,x*25,y*25);}
else{
context.drawImage(cement,x*25,y*25);}

}
}

Old Pedant
12-05-2012, 03:31 AM
There are several things in your code that don't make sense.

For instance, you *SEEM* to specify that the size of a "grass" image is 50x50 pixels. You *SEEM* to do that here:


#grass{
height: 50px;
width: 50px;
background: url(new/grass.png):
position: relative;
float: left;
}

But that's all wrong, because you are using #grass so that style will *ONLY* affect an element which has id="grass". If it was meant to affect MANY elements, it should have been specified as .grass and then the elements would use class="grass".

In any case, when you increment the positions where you draw the images, you only increase by 25 pixels to the right and down.

The increases *MUST* match the sizes of the images you are dropping in there.

When you reset the tilePos you do

tilePos=-50l
yet in the initialization code you did

var tilePos=-25;

But both of them needlessly complicate matters.

Old Pedant
12-05-2012, 03:37 AM
Ive already rewritten it in perfect javascript lol


var grass=new Image();
var cement=new Image();
grass.src="new/grass.png";
cement.src="new/cement.jpg";

for(x=0; x < map.length; x++){
for(y=0; y < map[x].length; y++){

if(parseInt(map[x][y])==1){
context.drawImage(grass,x*25,y*25);}
else{
context.drawImage(cement,x*25,y*25);}

}
}

That's very close to what I was going to do.

A little more efficient:


var grass=new Image();
var cement=new Image();
grass.src="new/grass.png";
cement.src="new/cement.jpg";

for(x=0; x < map.length; x++)
{
var line = map[x];
for(y=0; y < line.length; y++)
{
context.drawImage( line[y] == "1" ? grass : cement x*25, y*25);
}
}

No reason to parseInt() the "1"/"0" value. Just compare the cell contents to a string instead of a number!

In x*25 and y*25: naturally, the 25's there need to match the actual height (x) and width (y) of the image.

Which suggests that for clarity we should swap the usage of x and y.

Old Pedant
12-05-2012, 03:44 AM
What the heck...


var cellWidth = 25;
var cellHeight = 25;

var grass=new Image();
var cement=new Image();
grass.src="new/grass.png";
grass.width = cellWidth; grass.height = cellHeight;
cement.src="new/cement.jpg";
cement.width = cellWidth; cement.height = cellHeight;

for( row=0; row < map.length; ++row)
{
var line = map[row];
for( column=0; column < line.length; ++column )
{
context.drawImage( line[column] == "1" ? grass : cement,
column*cellWidth,
row*cellHeight
);
}
}

That's actually getting readable.

pdiddles03
12-05-2012, 01:55 PM
Thanks for your help! I'll study both your solutions when I have a lil more time.

Old Pedant
12-05-2012, 08:21 PM
The beauty of this solution is that you could expand it to many types of "terrain".

Example:


var terrain {
"g" : "grass.png",
"c" : "cementjpg",
"m" : "mountain.gif",
"w" : "water.jpg",
"t" : "town.png"
};

var map = [
"mmmmmwwwww",
"mmggcctttw",
.... etc. ...
];

var cellWidth = 25;
var cellHeight = 25;

// replace strings with image objects:
for ( var c in terrain )
{
var pic = new Image();
pic.src = "new/" + terrain[c];
pic.width = cellWidth;
pic.height = cellHeight;
terrain[c] = pic;
}
// draw terrain:
for( row=0; row < map.length; ++row)
{
var line = map[row];
for( column=0; column < line.length; ++column )
{
var image = terrain[ line[ column ] ];
context.drawImage( image, column*cellWidth, row*cellHeight );
}
}

pdiddles03
12-05-2012, 10:50 PM
So now I have another question, not to do with the programming side but canvas again. How efficient is it for a browser to render a game in canvas seeing every time you make a change, you have to clearthe canvas and then redo everything by calling the same functions. Wouldn't just having the DIV tags an programming their styles through CSS and Javascript be a lot simpler and make the browser faster?

I noticed by right clicking that basically your browser renders everything you did in javascript just a whole image.

Old Pedant
12-05-2012, 11:02 PM
Well sure. Esp. if you are creating the game background via some server-side code (PHP/JSP/ASP/etc.) it would make more sense to just generate a bunch of <img> tags inside a <div>. Done correctly, the images would automatically show 10 per row.

The only reason I could see to use canvas like this (and even then I'm not sure it's a better choice then <img>s in a <div>) would be because you are downloading new maps via, say, AJAX and/or you are generating the maps using logic (semi-random??) in JS code.

Old Pedant
12-05-2012, 11:03 PM
Oh...and you don't *HAVE* to clear the canvas and start over for *ANY* change.

Say you wanted to change one cell from grass to concrete: You could do that by just re-writing that part of the canvas.

Or, if you didn't use a canvas, by just changing the src property of one of your <img> tags.

pdiddles03
12-05-2012, 11:22 PM
So ok, let's say I have my map all written out and generated.

Next, i put my character on top, how would I go about clearing just the character when I move him, and not the map?

devnull69
12-05-2012, 11:39 PM
You could use another, smaller canvas on top of the other, so you'd only have to manipulate that canvas (clear, redraw, move).

pdiddles03
12-05-2012, 11:53 PM
You could use another, smaller canvas on top of the other, so you'd only have to manipulate that canvas (clear, redraw, move).

I could, but obviously you can't use <canvas><canvas></canvas></canvas>

So would you position the second with css?

donna1
12-06-2012, 12:06 AM
So ok, let's say I have my map all written out and generated.

Next, i put my character on top, how would I go about clearing just the character when I move him, and not the map?

As Mr Old Pedant has been explaining it to me I will share - you can print things on top in a higher layer so when you move them away the map still shows. (It doesnt require two canvas's you just set the z layer higher to the objects you want in front)
My problem was drawing a character over a background. You have to use a GIF rather than a JPEG to set the unwanted pixels to transparent so the background shows through any white space around your graphic

pdiddles03
12-06-2012, 12:12 AM
As Mr Old Pendant has been explaining it to me I will share - you can print things on top in a higher layer so when you move them away the map still shows. (It doesnt require two canvas's you just set the z layer higher to the objects you want in front)
My problem was drawing a character over a background. You have to use a GIF rather than a JPEG to set the unwanted pixels to transparent so the background shows through any white space around your graphic

I figured it out, instead of usint canvas.width=canvas.width, let say my character is called "hero" I just used hero.width=hero.width and that worked perfect.

Old Pedant
12-06-2012, 12:16 AM
So ok, let's say I have my map all written out and generated.

Next, i put my character on top, how would I go about clearing just the character when I move him, and not the map?

Well, the obvious answer is to *NOT* change the map, *AT ALL*.

Instead, just make your character *SEPARATE* from the map, with a z-index higher than the map, so he ends up appearing in front of the map.

But what is the big deal about swapping the character image for one of the map images and then, when he moves, swapping the map image back in???

That's trivial, though it won't look as good as having the character as a separate image (a ".png" or ".gif" image, with transparencey!) that moves smoothly from one square to the next instead of having the ugly double replacement.

Old Pedant
12-06-2012, 12:58 AM
*** HERE ***

A live demo. I am using a single image as the background instead of an array of images, but that doesn't impact the overlay idea.

Movement here is random instead of directed by user, but it shows all the concepts.

http://www.mywhizbang.com/demoOverlay.html

VIEW-->>SOURCE there to see how it is working.

Old Pedant
12-06-2012, 02:55 AM
And one more:
http://mywhizbang.com/demoMover2.html

To move the overlay image, you click on any "square" (50x50 pixel region) that is *adjacent* to the current position. The image then moves there. Smoothly.

The squares, per se, are invisible. With a grid of images, they wouldn't need to be. You could put a thin border on each image to delineate the cells.

donna1
12-06-2012, 04:43 PM
thats very clever, looks good.

btw What does old pedant mean? I mistakenly called you old pendant before sorry. now curious what pedant means - is it something to do with your railway avatar?

devnull69
12-06-2012, 05:09 PM
afaik a "pedant" is someone who puts a lot of emphasis on details and who also expects that from others.

donna1
12-06-2012, 06:48 PM
ok, anyway clever Pedant, would you be able to post the code for your last example, where it moves to the next cell? I like how thats done.
Also which package did you use to make your GIF with transparent border?
I have downloaded GIMP Paint now but havent worked out how do make the white transparent

Old Pedant
12-06-2012, 07:07 PM
ok, anyway clever Pedant, would you be able to post the code for your last example, where it moves to the next cell? I like how thats done.
Bring up the page and click on VIEW menu of your browser and then on SOURCE or PAGE SOURCE menu item. Or right click on the page and choose VIEW ==>> [PAGE] SOURCE from the context menu.

Are you telling me you never have done that with other pages???



Also which package did you use to make your GIF with transparent border?
I have downloaded GIMP Paint now but havent worked out how do make the white transparent
I used a very old version of PhotoShop (version 6) which no longer runs on my current machine.

I haven't yet tried doing that with GIMP. It should be possible.

pdiddles03
12-06-2012, 09:08 PM
I took a look at your code. What is the bare bones code to get a character to move 50px, but do it in a smooth animation. I tried to cheat at it with jquery but jquery doesn't seem easy to use in canvas.

Old Pedant
12-06-2012, 09:29 PM
You can't DO smooth movement using a canvas (at least not easily).

If you want the smooth movement, you should do as I did and use an overlay image.

Trying to do it using ONLY a canvas would be a horrible waste of resources. Ugly ugly ugly code and very slow to boot.

Old Pedant
12-06-2012, 09:29 PM
What is the bare bones code to get a character to move 50px, but do it in a smooth animation.
Ummm...the code I showed?

Or use jQuery, which I don't use.

Old Pedant
12-06-2012, 09:34 PM
afaik a "pedant" is someone who puts a lot of emphasis on details and who also expects that from others.

Heh! That's a *REALLY* kind definition.

Usually, "pedant" is used in a derogatory sense, meaning somebody is anal retentive about every little thing. That's probably closer to the truth for me. <grin/> (Or, as my wife would say, "yeah, about everything that doesn't matter.")

donna1
12-07-2012, 12:56 AM
Bring up the page and click on VIEW menu of your browser and then on SOURCE or PAGE SOURCE menu item. Or right click on the page and choose VIEW ==>> [PAGE] SOURCE from the context menu.

Are you telling me you never have done that with other pages???



I did know how to do that from a PC but I was playing with it on my iPad and theres no right click on that, so I dont know how to view source from iPad.

Theres been a few things Ive needed right click for on my iPad in the past, is there a workaround?

Old Pedant
12-07-2012, 01:07 AM
Of course there's no right click. Steve Jobs didn't believe in two-button mice, so there never was any right button on standard Apple stuff. Guess that extended to the iPad. Anyway, I don't have an iPad, so can't tell you.

(Can tell you that Steve used to like spiced tea, though. Actually, both Steve's did. Wonder if Woz still does?)

AndrewGSW
12-07-2012, 08:21 PM
Google tells me:


The iPad screen is a multitouch surface so it will recognise more than simple left and right clicks. To achieve actions normally done with a right click on a computer you would either, depending on the app being used and the action required, double tap on the screen or tap and hold to bring up a menu to select from.

Old Pedant
12-07-2012, 08:28 PM
LOL! So Apple got smarter over the years. Or somebody actually managed to persuade Jobs to do something he was opposed to. That nearly qualifies as a miracle!

AndrewGSW
12-07-2012, 09:21 PM
..When you actually hear Gladwell explain how the single button mouse came about, though, the genius of the decision really clicks. Not only is a single button mouse an easier interface to introduce to users either new to computers or used to text-only input, but it dropped the build price of the mouse to a level where every consumer could afford to buy one.
.. but I hate :( mice that have loads of buttons - I'm always pressing them when I don't mean to :mad:

AndrewGSW
12-07-2012, 09:24 PM
Or you could buy a hover mouse.. but PLEASE DON'T - it's not real!

Old Pedant
12-07-2012, 09:54 PM
Heh! I love this part:


... it dropped the build price of the mouse to a level where every consumer could afford to buy one.
Let's see, the 4 button mouse--with wheel--that I use now cost me $50 -- and that INCLUDED the ergonomic keyboard!! (And that was about 4 years ago. Probably cheaper now.)

Funny how things that made sense almost 30 years ago don't so much now.

(I agree with you about the extra buttons...two is perfect. The wheel is nice. I turned off the other two.)

Old Pedant
12-07-2012, 10:00 PM
Actually, this part is also funny, nowadays:
an easier interface to introduce to users either new to computers or used to text-only input...

My two-year-old twin grandkids (okay, 2 years, 7 monhts) already know how to use a mouse, not to mention an iPad, Nook, and what buttons to push to find the Netflix movie they want to watch. (And the granddaughter [there's one of each gender] figured out how to *ORDER* new pay-per-view movies! You can bet the parental control password got added real quick after that episode!)

Don't get me wrong, I was one of those who doubted that people needed anything more powerful than an 8-bit computer. But at least I changed my mind quickly when WYSIWYG word processing appeared.

AndrewGSW
12-07-2012, 10:03 PM
I have a small button on the left which I configured for Back, but it's awkward to press - so I use the Backspace key :cool: or the Back button!

AndrewGSW
12-07-2012, 10:11 PM
I remember the attached fondly - particularly Write (and File Manager). As I recall, there were still a number of things that could only be done with the keyboard(?).

I was excited when I discover Alt-Space :)

Old Pedant
12-07-2012, 11:22 PM
Heh! What is that a screen shot of?

I went from Mac512 to WindowsNT 4.0

I don't recall NT looking like that, but who knows.

EDIT: DOH on me! The image name says what it is.

AndrewGSW
12-07-2012, 11:34 PM
Windows NT was New(er) Technology than Windows 3.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum