Jump to content

Designing a web os


Micah C
 Share

Recommended Posts

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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).

Link to comment
Share on other sites

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.)

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 2 weeks later...

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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, '&lt;$app');
    while($appline = &lt;CURAPP&gt;)
    {
         print $appline;
    }
    #...
    print "&lt;a ondblClick='$app(); return false'&gt;";
}

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)

&lt;?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 "&lt;script src='Applications/".$app."' /index.html&gt;";
         */
         echo "&lt;a ondblClick='".$app."(); return false'&gt;";
    }
?&gt;

Link to comment
Share on other sites

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.

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

class="dragableElement"&gt;

EDIT: Dragable Element .js (Original Source)

Points to "Run"

Here is "Run" basically a DHTML window iframe.

&lt;script type="text/javascript"&gt;
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")
}
&lt;/script&gt;

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 3 weeks later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...