FCWebOS
Vista-Button.com
back
next
Refresh
help
Vista Buttons.com Samples       
  • Documentation

      system Object

        ◦bootLoader

        ◦current

        ◦loadList

        ◦loaded

        ◦total

       •error

       •files

       •formatAMPM 

       •guid

       •intervals

       •is

        ◦mobile

       •loader

       •registry

        ◦get

        ◦set

       •service

        ◦autoStart

        ◦ID

        ◦interval

        ◦path

        ◦registerService Method  ◦run

        ◦unregisterService Method

        ◦updateRegistry Method

        ◦updateRegistry Method

       •service

      explorer Object

       •context

        ◦append

        ◦close

        ◦height

        ◦height

        ◦id

        ◦jq

        ◦location

        ◦width

       •drag

       •file_explorer

       •initate

       •start

        ◦addLButton

        ◦addRButton

        ◦allProgramsSearch Method

        ◦allProgramsToggle Method

        ◦append

        ◦initiate

        ◦toggle

       •tabset

        ◦jq

        ◦tab

         ▪body

         ▪disable

         ▪enable

         ▪icon

         ▪id

         ▪is

          ▸disabled

          ▸open

          ▸removed

         ▪open

         ▪properties

          ▸icon

          ▸title

         ▪remove

         ▪tab

         ▪title

        ◦tabs
      theme 

       •window

        ◦body

        ◦callback

        ◦center

        ◦closeWith

        ◦controls

        ◦controlsArr

        ◦font

        ◦icon

        ◦id

        ◦is

         ▪closed

         ▪maximized

         ▪minimized

        ◦jq

        ◦menuBar

        ◦on

         ▪close

         ▪toggleMax

         ▪toggleMin

        ◦properties

         ▪icon

         ▪title

        ◦resize

        ◦toggleMax

        ◦toggleMin

       •window

       

  • ______________________
  • Feedback

    ..This is the coolest thing I have ever seen
        - SSR_Stylish

    ..this looks like a proper product you should pay for. I am amazed by the first 5 minutes I spend on it. now I will abandone my laptop for another two weeks
        - Hans_Wurst02

    ..with this i get a full windows like desktop on my xbox, it made it much more productive outside of games.
        - rmellis.

    ______________________

 

 

  • Screenshots:

     

Welcome Screen


The "Start Menu"

 

 

Shared File Manager

 

Discord and eMail apps

 

Multiple apps side by side

 

FloydCraft Live Map App


Block Browser - bing.com

 

Quake 3 game in WebGL



FloydCraft WebOS Wiki - Introduction

 

  


FloydCraft WebOS is a dynamic window management API made to look like Microsoft Windows within the browser.


Features

  • Simple and easy to understand API

  • Documented in detail

  • Supported by Chrome, Edge, Safari, Firefox, and Opera.

  • 90% CSS vector design

  • Easly customizable themes

  • Accurate Windows like behavior.

     


Simple API

Making a window:

new explorer.window()
.title('Hello World')
.resize(200, 200)
.callback(function() {
    this.body.html('Test 123');
});


 

Creating a context menu:

new explorer.context()
.append([
   {
      title: 'Hello'
    }, {}, {
       title: 'World',
      callback: function() { console.log('World Clicked'); }
    }
]);


 

Embeding Web Applications:

new explorer.window()
.title ('FloydCraft eMail')
.resize (640, 480)
.center()
.callback(function() {
    var win= this;
    this.body
    .css({'font-size':'10px'})
    .html(`
        <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style>
* {margin:0;padding:0;}
html,
body {height:100%; width:100%; overflow:hidden;}
table {height:100%; width:100%; table-layout:static; border-collapse:collapse;}
iframe {float:left; height:100%; width:100%;}
.header {border-bottom:1px solid #000}
.content {height:100%;}
</style>
</head>
<body>

<table>
  <tr>
      <td class="header">
          <h4>
              <a
                 href="#">
                </a>
          </h4>
      </td>
  </tr>
  <tr>
      <td class="content">
      <iframe src="http://discord.floydcraft.co.uk/"frameborder="0"></iframe>
    </td>
  </tr>
</table>

</body>
</html>
        `);
});

 


 

Map Apps into the "Start Menu":

To map in your first .js app you will need to ensure that it's somewhere in the root directory "webdows" for this demonstration we'll say our new test app is in /path/to/webdows/programs/MyApp/app.js

 

to add this to the "start menu" open

"/path/to/webdows/webdows/config/registry.json" with your favorite text editor.

 

Once open you will see this:

        ],
       "startmenu": [

below that are the pre-set start menu items, simply import the following code maintaining the syntax:

            {
                "title":"My New App",
                "icon":"programs/MyApp/icon.ico",
                "file": "programs/MyApp/app.js"
            }

Once saved you should then see your new app in the "Start Menu", if not you may need to reset your browsers cache.

 


Launching an app with no registry entry

If you've already created an app and simply want to run it for debugging within FCWebOS before mapping it into the registry you can do so using the built in "Command Prompt".

Simply open the Command Prompt and enter:

start programs/MyAppPath/MyApp.js

 

 


 

If you have trouble with your first app:

If you've tried to create your first app using the above code but can't seem to get it working, try copy and paste a pre-existing application and edit it from there.

For example if you just want to embed a web app into it's own window try copy "programs/Discord" to "programs/MyApp" and edit from there