AeroOS - AIRPORT OS

Devlog 5

Today i am going to improve the structure of app 1 (Flight overview).

That now its perfect as multiple windows and i almost solved all the logical and bugs issues that i had been noticed.

Now i thought to make for dynamic and useful to the user.

I already worked on the apps main layout as in width of 40% now i thinks make the top-left buttons such as coloured as red, yellow and green. Red button is already used for the closing the window. So i decided to choose green button for make the app in fullscreen. So first i tried to change the width off the main app div. But it seems very boring so i decided to change all the layouts when fullscreen.

In normal screen, the app is sub-divided into 2 sections - departure and arrival. But when it is in fullscreen it gives a bad view to the user when it still keep as 2 sections. So i decided to put them together.

For that i created another div inside the main div of the app and after the header div. then i putted everything (content of the app) inside that div ‘normalscreen’. After that again i copied and put inside another div which is called ‘fullscreen’. Now i think its time to work on css part of the app.

First i made the normalscreen as in view and another in hide. Then i made the content area’s div into flex-display to view both sections. then i removed the top main texts which i had made them clickable now i changed them into normal text-heading.

After all i spend in js,

I connected the icon then added if-condition that if that icon is exists and the user clicks on that icon and the user clicked icon’s window is matches to the app1 then normascreen will hide and show the fulscreen view also i made that to view the windows as centered to the screen to avoid moving below of the screen size (offsize) as default! Btw i added there to change the width and height of the window as well as.

Now its working good. But i noticed that the table aren’t showing when the window is it in fullscreen. After a research through the code and google i found that, i need to change the accessing points of the table id in js file. In first i just accessed the tables just using ‘document.getElementById’ which will only access one id which is already accessed from the normal screen. So changed that into ‘document.querySelectorAll’ which will access all the tale bodies which includes tables from normal screen and as well as fullscreen.

Now the fullscreen and its icon working perfect!

At last i made the yellow icon (mini icon) also functionable as same as the green icon (fullscreen) I done this code as same as the fullscreen icon just changed the normalscreen’s display into show and fullscreen’s into hide!

Now i thinks that app 1 is completed!

Devlog 4

In this devlog i am trying to make application “Flight Overview”.

Before that i found another logic issue that if the user multiple windows of same application it will open perfectly but there is another issue that it will open in where the pervious window it open like perfectly overlapping the pervious windows which makes not user-friendly.

So i decided to change the position to be visible the new window by updating the ‘createWindows(tem)’.

So i declared a variable ‘windowsOffset’ outside the function with value 0. Then i updated the variable into ‘windowsOffset + 30’ which will increate the value by 30 for each new windows. Then i styled the top and left with 50% + the variable value. Then finally added transform. By using this a new window s always 30px difference of left and top of the pervious windows. But i found that it will showing the window even after into the off screen like below the page. To solve that i added a if-condition that if the variable value is greater than 180 it will automatically reset into 0 then start again. Then i found another issue that when multiple windows are present if the user try to focus on the first window(backmost in appearance) it will not come forward it keeps there!

To solve that i created another function called bringToFront() with one parameter. Before that i just declared a variable with the value 1000. In the function the variable will be incremented by 1 and initialize the value into the z-index of the element. Then i called this function in startdragging() function!

Now its all perfect!

Now lets start to build the app

First off all i sub divvied the content section into two one is departure and another is arrival. My plan is simple as default show the departure flight status and if the user clicks on the arrival it show the arrival flight status. both as a table form.

So it is very task to hardcode the table so i made a list then of all flight details such as flight number, destination, gate, status and also the icon that matches the status. I asked chatGPT to give me random 10 flight details in tabular sheet. then i converted that into list for myself!

Then i created a function called loadFlightTable() with two parameters. One for accessing the list to be showed on the table and another is id of the table. Then i added innerHTML for table id.

Also i given the suitable icon status for each of them green colour for boarding and on time, blue for delayed flights, yellow for final call, red for cancelled flight and grey for scheduled flights which the user can identify the status easily!

Similarly worked for arrival flights with another list and called the function same way! Then another confusing part came. I got confusion that where should i declare the buttons to change the table of showing, should i need to declare outside of every function or inside the create function. At last i thought lets try putting everything inside the function. So i putted everything inside the createWindows(), called the variables from html document, then added eventlistern for both departure and arrival options. then changed the table view into hide and show using display as block and none!

Devlog 3

I planned to create a application “Flight Overview” which shows the departure and arrival flight details.

For that i created a div-section for that. Then i added the same css style of welcome that this also. Also i added closing icon to this window. Then i made that when the user clicks on the icon_1 then this app will open up and i made that draggable and closable when click on the closeable icon.

Then i created 2 more icons near to the closing icon which i planned that to give the function that yellow icon for the current normal small size window and green icon for the maximize the window (full screen window).

Then i added the title of the application in the header section with centered using position

Then there is another complicated bug i found, when the user clicks on the icon for the first time it will open perfectly but when the user clicks again on the same icon without closing the previous window, we actually thinks that it will open new window, right? But it doesn’t show new window it feels like it is an error that not working our icon or our clicking issue. After a deep break and think i got an idea!

I created a function called ‘createWindows()’ with one parameter. In this function it will clone everything that had in the window section. Then it will clone into a new with new id, i used ‘Date()’ function to make that perfectly unique which had time travel is not possible :) So 100% sure that it will be a unique id. Then that will show to the page as block. Then made that also draggable. Then there is another complications that it will very risky to function the closeWindow() so i added if-condition in the createWindows() to check that window had a close icon if it had make when the user clicks on the icon it will run closeWindow() function. At last it will return the newWindows.

As a result we can remove openWindow()!

Devlog 2

Today, i made more changes in this project! First i added bottom navbar also. I divided the bottom nav bar into two with the ratio of 2:3 width. On left-side i added a texts like ‘terminal 2’, the location of the user but now i didn’t connect it and one more text which shows the weather of that place. and on the right-side bottom navbar i would like to add app icons and more in the future.

Then i added the image for wallpaper which i had downloaded earlier. So now i added that image into background of the body. As well as i deicided to make the website whole the effect of a glassmorphism. So using the help of ChatGPT i selected the colour shadows and etc. Then i added them into :root function of css!

After that i made the welcome to hide after 3 seconds automatically and also shows the bottom nav bar completely. Then i created a section for showing desktop icons and which has been only shows after hiding welcome screen.

In this project i would like to complete a mission “WebOS”. So i selected a theme of airport which will the user can use in as airport assistant. I have a narrow plan in my mind i didn’t know exactly how should i will execute my plan from my mind, Let me try!

Devlog 1

I created files such as index.html, style.css, script.js and as well as i downloaded a wallpaper of airport wal1.jpeg.According to mission guide i first created a welcome screen with very few text, i thought that may i add more text content in the future!

Anyway i added a header also to drag the window and a red-coloured circle icon which may use as close icon in the future.

Then i created a top navbar which is few margin from the top and also centered the screen with a width of 80%. Then i added a text at left-side as main heading and current date and time at the right-side on the navbar .

Btw, i made a css function :root which can make user-defined variables which can use the variables as constants.