Stephen Johnston

The idea sounds very interesting - although your URL did not work
(redirects to edit.jsp which does not work) - please let me know when you
get it fixed so I can take a look.

You are welcome to use the script, free of charge, on the following
conditions:

You keep the info and credits in there
You put a plain text link to my site on in least one place (helps me with
my search engine ranking)
You make it clear that you are using my script free of charge and so are
not charging customers for the use of my script - only for the things that
you have written (it makes the licencing easier that way).
You make an effort to make it work in at least Gecko too - and Opera would
be nice .. ;)

Good luck with the site, it's an excellent idea, and I hope it's a success.


Mark 'Tarquin' Wilton-Jones

Yeah, that does look cool. That looks like it's gonna be a decent site.
Please let me know when you get it fully working.


Couple of [constrctive - I hope] points,

The menus need to close when you click anywhere outside them, because at
the moment, they do not close if you click on the windows etc. You may find
document.onclick or document.onmouseup helps here.

You should comment out script and CSS in the source (not that it really
matters considering your target audience)

I noticed something odd in your CSS:

...
A.menuItem:hover {
    BORDER-RIGHT: #316ac5 1px solid; etc.
}
<style type="text/css">

.window {
...

should that '<style type="text/css">' be there?

> is there a way to make a javascript/html version of the x-windows
> taskbar? and if so is there source code for it on the net?

It may take some time, and I am not aware of one already on the net.

> What I hope to develop over the summer when school is out is to develop
> a completely open-source (linux/unix) style iOS, and use the GNU Public
> License Policy with it, do you think that this will work?

It will be possible, but I warn you that the idea will take many months to
get people hooked (because it takes months to get properly indexed on
search engines), so it may take more than just one summer for people to
start contributing their own codes. However, provided you make the site
work in browsers that run on Linux (like Gecko or Konqueror), you will get
linux people interested, and they tend to be the best at producing free code.

> If you ever have a desire to help out just feel free to, or if you have
> any new (or updated) versions of your Window Script let me know, because
> I would like to use your Window Script as the default Windowing system.

Once I get the time. I work full time at the moment, and I don't have that
much to myself. I was considering updating the windowing script to make the
windows resizable - kinda like the way you resize windows on a Mac, with
the drag handle in the bottom right corner - it won't work on all browsers
though, so I am not too happy about doing it.

> I have been trying to get images to display inside the window and no
matter how many times I copy and paste the images directory location it
will never show up, any clues as to why?

.. taking a look at your source code ...

The maximise image works, whatever you have done for that one is right.
Aaah! I see. The logo, min and cross images are not in the img subdirectory
on the server, but the max one is.

just as some advice, take a look at this code snippet

<img src="http:\\nayoo.netfirms.com\img\go.bmp" border=0 alt="Click here to explore!"></a>
<img src="C:\01\img\taskbarhandle.gif">
<A class=menuButton onmouseover="buttonMouseover(this, 'calMenu');" 
    onclick="return buttonClick(this, 'calMenu');" 
    href="http://nayoo.netfirms.com/edit.htm">;
<img src="http:\\nayoo.netfirms.com\img\calendar.bmp" border=0>

There is no need to put all those absolute URLs there, just use "img/go.bmp" etc.
The c:\ one will never work except on your computer ...
you should use forwardslashes, not backslashes ( / not \ )

Just to let you know, I have updated the window script but I cannot yet
transfer it to the site, so I am emailing it to you instead.

This new version allows you to specify a 'resize' image (ignored on windows
that can be dragged by any part of them). If specified, the resize image
(6px x 6px) will be used as a drag handle in the bottom right corner of the
window, allowing you to resize the windows - the sort of feature that would
work well on your site. I have tested it only for about 10 minutes, so I
would welcome you testing it on your site :)

The drag handle can move around inside the window if you try to make it too
small on Opera 7 and Gecko - I don't particularly care because there is
nothing much that I can do about it.

It may interest you to know that using innerHTML, you can rewrite the
contents of the mini windows if the browser allows it (IE5+, Gecko, Opera 7,
Konqueror/Safari, ICE etc.):
getRefToDivNest('nameOfMaximisedWindow').getElementsByTagName('div')[1].innerHTML
or IE 4 (if you care ...):
getRefToDivNest('nameOfMaximisedWindow').tags('DIV')[1].innerHTML

Tarquin

Steve

I managed to get the drag handle to work properly in IE 5+, Gecko (Mozilla,
Netscape 6 etc.), Opera 7, Konqueror and Safari, so I have attached the
updated script.

I have also added in functions to rewrite the window contents in IE5+,
Gecko, Opera 7, Konqueror and Safari, as well as change the background
colour of the windows.

Hope you find this useful.


Tarquin

Stephen,

Sorry to keep bombarding you with emails, but I think this latest
improvement may be perfect for your site.
You can now specify a 'full screen' maximise image, and it will resize the
window to fit your virtual desktop. Take careful note of the script source,
because I have changed the image names to suit the new arrangement.

Because you have got a taskbar, you would need to redefine the findMaxSize
function, something like:

function findMaxSize() {
   var taskbarSize =  40; //or the size of your taskbar
   if( window.innerWidth ) { var w = window.innerWidth, h = window.innerHeight;
   } else if( document.documentElement && document.documentElement.clientWidth ) {
       var w = document.documentElement.clientWidth, h = document.documentElement.clientHeight;
   } else if( document.body && document.body.clientWidth ) {
       var w = document.body.clientWidth, h = document.body.clientHeight;
   } else { var w = 400, h = 400; } if( window.opera || navigator.product == 'Gecko' ) { w -= 16; }
   return [0,taskbarSize,w,h-taskbarSize]
}


Tarquin

Steve,

I have transferred all the files, including the images. The ones you had on
the server were corrupted, which is why they did not work. Your cgi-bin
directory is misconfigured and it does not work, so I put the script in the
www directory instead.

I have also updated your test.htm to incorporate all of the changes
(including switching from .bmp images to the .gif versions as .bmp only
works in IE), such as redefining the findMaxSize function.

As a side point, you have a z-indexing problem with your menus. Open the VHD
and use the fullscreen button to maximise the window. Then try opening a
menu. You should notice the menu tuck behind the mini window. To solve it,
set the z-indexes of the menus to 98302 or above. That allows the user to
move, resize etc. any window about 16000 times before it becomes a problem
again (not likely to happen).

Tarquin

that new taskbar looks excellent. The 'applications' menu does not 
appear though, although the links on it work, and your menus don't 
highlight (I'm using IE5.5 here - don't know if that makes a difference).

You will need to change the findMaxSize function in my window script to
work with the new position of the taskbar, but I say that it will be worth
it. Not that the old look was bad or anything, but the new one is better.

Tarquin

The things that will need changing are the start position and size of the
windows when maximizing.
The start position can be 0,0 as you have the taskbar at the bottom. The
width should be the full width, and the height should be the full height
minus the height of the taskbar. As I have updated the script to get rid of
a couple of minor bugs, I will put the changes across for you tomorrow
unless you say otherwise. I will also update findMaxSize, so take a look at
that once I have finished to see how it works.

There are a couple of minor API changes, but nothing major. Just take a look
at the .js file for instructions on how to use the new API - mainly only
re-writing that has changed.

Yes, I do think the new design will be intuitive for people. Be warned of
course that making the site look too much like Windows may not be such a
good idea if you are trying to get the linux community involved ... but
having said that, it doesn't look unlike Xwindows, KDE or Gnome, so it's OK
as it is at the moment.

As far as your images go, I suggest you try .gif or .png images. If you
have XP, you can get paintbrush to save Gif images for you (badly) or you
may want to try downloading Paint Shop Pro. Old versions can occasionally
be got for free ...


Tarquin

Steve,

> I have attached a new piece of script to this new update, which allows
you to move the icons around and such stuff

Cool. I like that effect. Do the links still work? Slight problem, try
dragging the second icon (Notebook). It jumps to the top of the page first.
I think you can use an inline stylesheet to set it's position to solve that.

<div style="left:blahpx;top:blahpx;">

> if you right click there is also a custom right click menu.

just as a warning ... not on opera - right clicks are not detectable or
cancellable in any Opera version. You might want to detect Ctrl+LeftClick
in Opera - something that is used on the Mac operating system - to replace
right clicks.

> I have attached a new image of what this should look like once I have
> finished it.

Cool look. As a thought, you have produced a lot of good designs - why don't
you allow the user to choose which theme they want?

> The windows which are shown in the picture, what kind of rewriting of the
> script might I have to do in order to get them like that?

Not too much. Just replace my max, min, restore, close and info images with
images you create from the picture of the window you want, and redefine the
title bar colour to be gray. The borders of the mini windows will always
remain the same though. I am more worried about the idea of having menus in
the mini windows - it is something I have never tried, and I don't know how
to do it. I suppose it could be done using a modified version of my menu
script - I will take a look today. I guarentee it would not work in
Netscape 4, but I don't care because NS4 is crap.

> So if you are going to upload any new window scripts or what not, that is
> where I would like the new one to go

no problem. I will only be editing movablewindow.js

> I am wondering what the movable icons attached to the link might do to
the new window script?

nothing, provided your links work fine (and the z-index of the icons is
fine (define them before you define the windows, that should help)), there
should be no interaction problems.


Tarquin

Steve,

Ok, I produced a version of my menu script that works in the mini windows,
but there are a few problems.

1) my menus do not change size as the windows change size (nothing I can do
about that with my current menu script, need to write a menu that
dynamically changes size - use stylesheets and percentages -
width:25%;left:75%; etc.)

2) big problem. When you minimise the windows, the menus stay put, as if
the window was not minimised. Apparently, the visibility style does not
cascade if a child element has a visibility clause. This will be a problem
with any window script.

Fixing point 2 would need a special menu script (I havn't got the time to
do it right now) that used the display style instead of the visibility
style in order to show/hide the menus. It would work in all modern
browsers.

If I get some time, and you want me to, I may start working on a menu
script that does all this. What do you think?

Steve,

> One thought, about letting users choose their own environment, what kind
> of script would I need to write to enable a user to do such a feat, I am
> not able to find any script of the net to help me along.

This would be easy. You can use cookies for a start. I have also written a
cookie script if you are interested. Take a look at
http://www.howtocreate.co.uk/jslibs/ and see the section marked 'Variable
retention'. The way to do it would be to use different images depending on
the content of the cookie. For example, put all the images required in a
directory called 'linux' or 'windows' and then store their choice 'windows'
or 'linux' in a cookie. Check if the user has your cookie. If they do not,
assume they want 'windows' then load the images from
getCookie('YourCookieName') + '/home.gif'

just an idea ...

> Has such a thing ever been written?

probably, but I have not seen it.

> how many different desktop wallpapers should there be?
> or should I add a feature that allows them to choose a wallpaper and
> upload a wallpaper of their own?

hmm, not so easy to allow them to upload unless you are going to do server
side scripting. I have been doing SSS for many years now, and I am used to
using SQL databases to store user preference. But uploading files presents
many serious security issues, and I don't think it is the right place to
start. Having said that, it may be possible to allow them to choose a file
using a file input, and use the value of it as the background - not sure if
you can read the value of a file input - it will look something like
'file://localhost/C:/images/myPic.jpg'. The image will be tiled by default
and cannot be stretched to fit the page.

I suggest you have your own set of backgrounds, and allow them to choose
one or to choose one from their own disk using the file input, then do
document.body.style.backgroundAttachment = 'url('+theImageURL+')';
You will need to store their choice again. Another cookie maybe?

> Beside letting users choose their wallpaper what other things might
draw people into the OS more?

I'll see if I can come up with any ideas. Basically, the more you let them
configure for themselves, the better.

> One other question though before I leave, I realize that paten's are a
> way of protecting work, and if I got one, would that damage the image and
> goal of this project?

A patent should not adversely affect the the goal, although it might put
one or two people off contributing. The problem with patents is that you
will have to prove that this is a unique and original idea. Unfortunately,
there is no way that you will manage to get a patent for it, because in
essence, it is just a web page (or a portal, but they have been done
before) - all be it a very cool and complicated web page - but they will
not allow you to patent it.


Tarquin

I don't blame you for making Windows the default one ;) It looks good, and
feels like a proper operating system. Not bad at all.

When I load the page (IE6, winXP), I get the error:
document.all.webostasks.style is null or not an object

The 'log off' image and the line above it disappear when I hover over
'applications' and the applications menu appears too high (because my
monitor resolution is 1024 * 768).

The latest version of my window script is now available on my _new_ site
design:
http://www.howtocreate.co.uk
follow the link for JavaScript libraries.
You will still need to change the findMaxSize function (copy the one that
is in the script you currently have) to suit your design. It would make it
easier for you if you define the scripts like this:
<script src="movablewindow.js" type="text/javascript ... ></script>
<script type="text/javascript ... ><!--
function findMaxSize() {
    //write your version of the function here
}
//--></script>

that way, you can update the window script without having to edit it every
time.

I have not had the time to write the 'display' based menu script yet, too
much other stuff on my plate. I will see if I can write it soon.


Tarquin

I have produced a first version of a display based menu.
extract the contents of the attached zip file.
see test.html for how to use it.

I have rewritten the menu script and mini window scripts so the menus embed
in the window properly, and so they work more reliably (they automatically
close after 5 seconds or if you click on the menu bar) and in more
browsers. Take a look:
http://www.howtocreate.co.uk/tutorials/jsexamples/movablewindow.html
you can download the scripts ('Mini window controls' and 'Display based
menu') from:
http://www.howtocreate.co.uk/jslibs/

The main change in the mini window script is that it now accepts one more
parameter, the code for the menu:

//put in the image location for the right arrows (width,height,location)
var contNt = new displayBasedMenu('rightAr.gif','rightArW.gif');

//define the structure
contNt.sub[0] = new displayBasedSub('File');
...
etc.

var theWinOb = createMiniWinLayer(
    'This is the contents.'
    'This is the first mini window',
    ... etc.,
    contNt.getMenuCode()
);



Tarquin

I have to say, I always like your designs. They look so cool.

As far as the menu script goes, you need to download the latest window and
display based menu scripts from
http://www.howtocreate.co.uk/jslibs/
The menus work a lot better - try the demo:
http://www.howtocreate.co.uk/tutorials/jsexamples/movablewindow.html

I was playing around with dragging iframes for a while, and found quite a
few bugs, so you may find the following useful.

The iframe may be your solution - but - moving them as part of the mini
window will not work properly in IE5 Mac (the workaround is to scroll the
main window by 1 px, them immediately scroll it back again, every time the
window is moved - that could be difficult to integrate with my script, so
you may have to live with it as a bug), and both Opera 7 and
Mozilla/Netscape6+ will have problems if the user drags the mini windows
too far off the edge of the main window (parts of the iframe get left
behind on the page).

Also, your iframes may affect the resizing of the window, but that is not a
bad thing. Just define them with:
height="100" width="100" id="someUniqueId"
then after the page has loaded, change them to be 100% instead (this way
you avoid browsers freezing)
document.getElementById('someUniqueId').setAttribute('height','100%');
document.getElementById('someUniqueId').setAttribute('width','100%');