Designing a web os

[Micah C]

Hello everyone,

I have been developing a web os for the past few months off and on. More just for fun. This would serve as a way for me to continue developing my web development skills. I hope this wont get me flamed! Here is goes. The applications on the desktop are displayed with code within the index file. When the applications are clicked they are displayed in a DHTML window within an iframe. The actual application files reside within a directory called "Applications". Here is my dilemma. Every time I add an application I have to actually add lines of code to the index file. This also prevents a user from installing new apps. Here is what I need. Every time i add a file to the "Applications" directory I would like it to show up on the desktop. The title of the file being the text below the application, and the image within the file being the icon displayed on the desktop. Is this possible? Any help is appreciated. I have attached a photo of my Web Os. I am willing to provide any more information needed to make this happen.

Part of the code used to display the application on the desktop.

<a ondblClick="Garbage(); return false">
<p><img src="Applications/Garbage/garbage.png" border="0" style="float:left" class="dragableElement">

Script to define the application.

<script type="text/javascript">
function Garbage(){ //Define arbitrary function to run desired DHTML Window widget codes
ajaxwin=dhtmlwindow.open(Garbage", "iframe", "Applications/Garbage/index.html", "Trash Can", "width=450px,height=350px,left=200px,top=50px,resize=1,scrolling=1")
}
</script>

A picture of my web Os

[webjockey]

thats looking awesome man :) . Really good. I was thinking of doing this at one point (just for fun) but it keeps getting pushed back. :( I will get to it eventually :P

[nullArray]

webOS is a bad word to use,..., I thought you were talking about palm's development platform :(

[Micah C]

Ohh. What should I refer to an operating system that resides on the internet?

[nullArray]

Ohh. What should I refer to an operating system that resides on the internet?

Couldn't tell yeh.

EDIT: I get it now, it adds the numbers up and subtracts the ones it comes across...,

1-1+2-2+3-3+4 the unique element is 4. It does this bit by bit.

[Bit Hunter]

Like 2003 i started working on something similar. But never got around... Nice so gar...

[WhollyMindless]

We're not helping any are we?

[Micah C]

Nope... not really. I still need help with this topic so if anyone has any input its defiantly accepted. Thanks to those of you who gave a nice comment about the OS.

Edit:

While im at it I might as well ask. For some reason the icons on the desktop want to stay on top of all windows. Is there any way to keep these icons in the back? Kinda like the bring front and back command in word or power point.

[OneTimePad]

1) To dynamically load applications requires some form of server side scripting. Simple (partial, untested) example in perl:

#get the list of applications
my @apps = `ls -l Applications/ | sed -n /^-/s/\ \ */\ /gp | cut -d" " -f 9`;
foreach $app (@apps)
{
      print "<script src='Applications/$app' />";
#...
      print "<a ondblClick='$app(); return false'>
<p><img src='Applications/$app/$app.png' border='0' style='float:left' class='dragableElement'>";
}

(note, this assumes that the contents of the Application folder are .js files, and somewhere in the '...' $app should be stripped of the '.js', also, there's probably a better way to get the list of .js files than the ugly first line...)

2) To control what is on top, there is the css property z-index. The higher the z-index of an element, the higher it is off the screen (e.g. highest z-index is on top).

[webjockey]

Micah: If you want the icons to stay on the screen I would make everything on the desktop z-index 1 and the windows z-index 2 like so:

div.Desktop * {
      Z-Index:1;
}

.Window {
      Z-Index:2;
}

or, simple replace "Desktop" with "body" to cover all your bases.

Come to think of it, you might want to control this with javascript (active windows and dormant windows overlapping etc.)

[Micah C]

1) To dynamically load applications requires some form of server side scripting. Simple (partial, untested) example in perl:

#get the list of applications
my @apps = `ls -l Applications/ | sed -n /^-/s/\ \ */\ /gp | cut -d" " -f 9`;
foreach $app (@apps)
{
      print "<script src='Applications/$app' />";
#...
      print "<a ondblClick='$app(); return false'>
<p><img src='Applications/$app/$app.png' border='0' style='float:left' class='dragableElement'>";
}

I havnt had a chance to test your code. I'm on an ipod so it's hard to type a lot. I really appreciate your work. I can't believe I forgot about the whole z index thing! I'll post back later when I have a chance to test it.

[Micah C]

Sorry it's been so long since i have posted back, I have been bogged down with school. I took some time to look over your script, but to be honest I have no clue what to do with perl. Here is the problem i face with this code. There are actually no js files in the applications folder. (Diagram below). Second I don't know how to implement perl into my page? Any help?

- Applications

| + Calendar

| | index.html

| | icon.png

| + Other program files

[Emeryth]

You could write the script in PHP or just use PHP's system() function to run the perl script.

[Micah C]

Ok ill try pasting the script in PHP. Can I use the PHP tags within the index.htm doc? Im pretty sure i can but just checking. So I examined OneTimePad's code in further detail and had a question. Since there is no .js files in the applications folder how could i modify his code to point to .html files instead. I was thinking something like:

#get the list of applications

my @apps = `ls -l Applications/ | sed -n /^-/s/\ \ */\ /gp | cut -d" " -f 9`;

foreach $app (@apps)

{

print "<script src='Applications/$app' /index.html>";

#...

print "<a ondblClick='$app(); return false'>

<p><img src='Applications/$app/$app.png' border='0' style='float:left' class='dragableElement'>";

}

I'm not sure if this will work. Ill have to try it out later. I just thought i would try to get some imput on it.

[OneTimePad]

K, a few answers/tips:

1) Perl can be used on its own. When you load a php file, the server runs the php script and sends you the output. Likewise, you can configure your server to run perl scripts the same way. Go here for more information. You should also use the perl CGI module. (To install, from command-line: 'perl -MCPAN -e "shell"', then, from prompt: 'install CGI' If CPAN has never been used on your server before, you will be lead through a set-up before you get to that prompt.)

2) If your 'applications' are in .html files, the <script src='...'> tags won't work, because the src property expects a javascript file. You can fix this one of two ways:

a) instead of printing the <script> tags, just echo the entire file:

foreach $app (@apps)
{
    open(CURAPP, '<$app');
    while($appline = <CURAPP>)
    {
         print $appline;
    }
    #...
    print "<a ondblClick='$app(); return false'>";
}

b ) in your initial post, it looks like your application files just consist of <script> tags w/the script inside them. If this is the case, you can remove the script tags and rename the files .js. then the original script should work.

also, that first line of my example is ridiculously ugly... idk what i was thinking... here's a much better version:

my @apps = split /, /, `ls -m Applications/*.html`; #or *.js if you change them

3)

If you're more familiar with PHP than perl, you can use it for the server-side scripting aspect of your OS. I wrote it in perl because it's been a while since i used PHP. Here's a PHP version (No guarantees that it will work)

<?php
    $apps = explode(", ", `ls -m Applications/*.html`);

    foreach ($apps as $app)
    {
         //.html version
         $file = fopen($app,"r");
         while(!feof($file))
         {
              echo fgets($file);
         }
         //.js version
         /*
         echo "<script src='Applications/".$app."' /index.html>";
         */
         echo "<a ondblClick='".$app."(); return false'>";
    }
?>

[Micah C]

You brought up the fact that applications contain of <script> tags. You got me thinking why the hell do I have those in the first place. As I browsed through the index searching for the answer I found that the <script> tags were necessary because of the DHTML window. Here is the link if it helps. The DHTML window is really just displaying an iframe. The icon is a dragable link with an image that points to the DHTML window script. Therefore the script tags are needed on both sides. the DHTML window and the link side. My question is what does this mean for me? Im still a bit confused on what to do. I really appreciate your help so far.

Micah C

Extra stuff that might help:

The link code.

		<a ondblClick="Run(); return false">
		<p><img src="Applications/Run/Run.png" border="0" style="float:left" 

class="dragableElement">

EDIT: Dragable Element .js (Original Source)

Points to "Run"

Here is "Run" basically a DHTML window iframe.

<script type="text/javascript">
function Run(){ //Define arbitrary function to run desired DHTML Window widget codes
ajaxwin=dhtmlwindow.open("Run", "iframe", 

"http://www.micah.ath.cx/IronOS/System/Users/Micah/Applications/Run/index.html", "Run 

Program", "width=350px,height=180px,left=400px,top=200px,resize=0,scrolling=0")
}
</script>

[mekilel]

um.. WebOS that great

what idea you want to create?

umm mr. micah are you want to build website like windows or mac or linux??

i'm try to create this one

i want to build web OS like mac

contain dock menu and another

but i have problem when develop this

i just use javascript (like jquery or mootools)

i don't know how to create another aplication like music player or word processing

maybe you can help me

=======================================

i'm sorry if my english poor

[Micah C]

um.. WebOS that great

what idea you want to create?

umm mr. micah are you want to build website like windows or mac or linux??

i'm try to create this one

i want to build web OS like mac

contain dock menu and another

but i have problem when develop this

i just use javascript (like jquery or mootools)

i don't know how to create another aplication like music player or word processing

maybe you can help me

=======================================

i'm sorry if my english poor

Exactly what are you trying to ask me? You want me to help you make a webos? My webos is built with HTML, Java, CSS ( that's why the DHTML windows are styled like a windows machine, but could easily be styled like a mac or linux in a snap.), Very little XML, PHP (Some applications that i wrote require xml), and some DHTML. As you may have guessed building a website with this complexity takes time and patients. You could easily build a word processing application in PHP as i have that allows a user to save his/her document (.txt) to his/her desktop with little scripting. I actually didn't design the dock. I can't think of his name, but you could find a mac javascript dock by searching Google.

[hawksprite]

Hmm, i had though of doing something similar but then ended up using eyeOS (can be found at http://eyeos.com). It's open source so you can grab some of their code. I have the finished project hosted at http://os.hawksprite.com