BJH OS — Developer Documentation

Last Updated: December 06, 2025
Project Status: Active Development

Project Overview
Project Structure
Technology Stack
Installation & Setup (Self Hosted)
Architecture & Key Systems
File Descriptions
Development Guidelines for Developing Built-In Apps And Games for BJH OS
How To Develop Apps And Games For BJH OS Apps Market
Uploading Apps/Games To BJH OS Official Apps Market
Installing Apps And Games In BJH OS
API Reference
Troubleshooting
Contributing

Project Overview

BJH OS is a web-based desktop operating system concept built with HTML, CSS, and JavaScript. It emulates a Windows-like desktop environment with a functional taskbar, start menu, draggable app windows, widgets, and a suite of built-in applications (calculator, notepad, file manager, antivirus, etc.).

Key Features (v4.6)

Draggable App Windows: Apps open in floating iframe windows with close buttons.
Maximize/Restore: Windows can toggle fullscreen with double-click titlebar support.
In-window App Launching: Start menu and toolbar items open inside windows instead of new tabs.
window.open Intercept: Redirects same-origin window.open() calls to the iframe window system.
Programmatic API: window.openAppInWindow(url, title) for script-based window management.
Integrated Antivirus: Virus definition database and file scanning.
Widgets: Embedded calculator, QR generator, translator, dictionary.
Responsive UI: Material Design icons, smooth animations, accessibility support.

Target Use Cases

Educational purposes (learning OS UI/UX design).
Proof-of-concept for web-based operating systems.
Portfolio and demonstration of web technologies.
Customizable browser-based desktop environment.

Project Structure

BJH OS 4.6 new Update/
├── desktop1.html              # Main entry point (core OS interface)
├── index.js                   # Service Worker registration
├── manifest.json              # PWA manifest (app metadata)
├── Setup.html                 # Initial setup/welcome page
├── service_worker.js          # Service Worker for offline support
├── installed apps.html        # List of installed apps
├── test.html                  # Testing utilities page
├── What's new.txt             # Changelog and feature list
├── HOW TO RUN.txt             # Quick start instructions
│
├── Scripts/
│   ├── sketch.js              # Core UI/event handlers (1340+ lines)
│   └── minmax.js              # Window min/max utilities
│
├── Styles/
│   ├── style.css              # Main desktop & taskbar styles
│   ├── index.css              # Additional styling
│   └── minmax.css             # Window control styles
│
├── Assets/
│   ├── PWA/                   # PWA icons (192x192, 512x512)
│   ├── RGOS-family/           # Branding assets
│   ├── windows11-*.png        # Windows-style icons
│   ├── Start Button.png
│   ├── bin.png                # Recycle bin icon
│   └── [other UI assets]
│
├── Root Directory/
│   └── OS Files/              # Core OS apps and utilities
│       ├── about device.html  # Android-style about page
│       ├── settings.html      # System settings
│       ├── file manager.html  # File explorer
│       ├── flash_browser.html # Embedded browser app
│       ├── notepad.html       # Text editor
│       ├── calculator.html    # Calculator app
│       ├── calendar.html      # Calendar widget
│       ├── clock.html         # Clock app
│       ├── weather.html       # Weather widget
│       ├── command prompt.html# Terminal emulator
│       ├── bjh-os-antivirus.html # Antivirus utility
│       ├── BJHOS_AI.html      # AI assistant app
│       ├── paint.html         # Drawing/painting app
│       ├── media player.html  # Audio/video player
│       ├── screen recorder.html # Screen capture tool
│       ├── battery full details.html
│       ├── device status.html # System status info
│       ├── legal info.html    # License & legal
│       ├── privacy policy.html
│       ├── Games Center/      # Games subdirectory
│       ├── Other Files/       # Additional utilities
│       ├── Other Scripts/     # Helper scripts
│       ├── SOUNDS/            # Audio assets
│       ├── VIDEO ANIMATIONS/  # Video assets
│       └── ICONS/             # App icon files
│
├── Apps - (Testing)/
│   ├── apps.html / apps.css
│   ├── calc/                  # Calculator widget
│   ├── QR-generator/          # QR code generator
│   ├── Dictionary-widget/     # Dictionary lookup
│   ├── translate-widget/      # Translation tool
│   └── AI-Chatbot-main/       # AI chatbot
│
├── Customize BJH OS/
│   ├── Background Wallpaper/  # Wallpaper options
│   ├── Cursor/                # Cursor themes
│   └── [Customization assets]
│
├── Installed Apps/            # Directory for installed apps
├── TEST APPS/                 # Testing apps (antivirus test, console)
├── BJH_OS_Tool_*.exe          # Standalone installers (32-bit, 64-bit)
│
└── [Other files: configuration, documentation, etc.]

Technology Stack

Layer	Technology
Frontend	HTML5, CSS3, JavaScript (ES6+)
Styling	CSS Grid, Flexbox, CSS Animations
Icons & Fonts	Material Design Icons, Google Fonts (Poppins)
PWA	Service Worker, Manifest.json
Architecture	Vanilla JS (no frameworks)
Deployment	Static HTML/CSS/JS (can be served via any web server)

Browser Support

Chrome/Chromium 90+
Firefox 88+
Safari 14+
Edge 90+
Electron (for desktop app versions)

Installation & Setup (Self Hostable Only)

Quick Start

Extract the project to a folder:

unzip BJH_OS_4.6.zip
cd "BJH OS 4.6 new Update"

Open in browser:
- Direct: Double-click Setup.html (opens in default browser)
- Navigate to desktop1.html (main OS interface)

Architecture & Key Systems

1. Window Management System (NEW v4.6)

Located in desktop1.html <script> block (near end of file).

How it works:

Container element: #app-windows-container holds all app windows
Each app window is a <div class="app-window"> with:
- Titlebar (header with title and controls)
- Close button (✕) — removes window from DOM
- Maximize button (▢/🗗) — toggles fullscreen
- iframe content area — loads app HTML
- Drag handlers — move window via titlebar

Key functions:

window.openAppInWindow(url, title)      // Programmatic window open
createAppWindow(url, title)              // Internal window factory
// Events: click interception, window.open override, drag handlers

Features:

Z-index stacking (bring window to front on click)
Drag via titlebar (stores position on maximize)
Double-click titlebar to toggle maximize
Window.open() override for same-origin URLs
Click interception on anchor tags

2. Taskbar & Start Menu (`sketch.js`)

Taskbar:

Fixed at bottom of screen
Dock apps (file manager, browser, paint icons)
Start button (opens/closes start menu)
Tab/desktop switcher
Search bar
System tray (volume, network, battery, calendar, etc.)

Start Menu:

Categorized app list (A-Z alphabetical)
App search functionality
Pinned apps section
Recommended files section
Quick settings

Code Entry Point:

// sketch.js - Main UI controls
let startbutton = document.getElementsByClassName("startbutton")[0];
startbutton.addEventListener('click', () => { /* show/hide menu */ });
// + 1300+ lines of UI event handlers

3. Styling System (`Styles/`)

Files:

style.css — Main desktop, taskbar, windows, animations (~1000+ lines)
index.css — Global styles, resets, theme variables
minmax.css — Window control button styles

Key CSS Variables/Classes:

.taskbar { ... }            /* Bottom taskbar */
.startmenu { ... }          /* Start menu panel */
.app-window { ... }         /* Draggable window container */
.app-window.maximized { ... }  /* Fullscreen state */
@keyframes fade-in, slide-up, scale-up, ...  /* Animations */

4. Service Worker (`service_worker.js`, `index.js`)

Provides offline support and PWA functionality.

What it does:

Caches critical assets (HTML, CSS, JS, icons)
Serves cached content when offline
Enables "Install app" feature

Registration:

// index.js
if ("serviceWorker" in navigator) {
  navigator.serviceWorker.register("service_worker.js");
}

5. App Registry & Launching

Apps are simple HTML files (loaded in iframe windows):

Local paths (e.g., Root Directory/OS Files/calculator.html) open in-window
External URLs (https://) open in new tab (unless intercepted)
Same-origin URLs use window.open override to open in iframe

App Categories:

System Apps: Settings, File Manager, Device Status
Utilities: Calculator, Calendar, Clock, Notepad
Tools: Antivirus, Browser, Screen Recorder, Paint
Games: Snake, Gravity Game, Game Center
Widgets: Embedded calc, QR, Translator, Dictionary

File Descriptions

Entry Points

File	Purpose
`desktop1.html`	Main OS UI — Full desktop with taskbar, windows, and app management
`Setup.html`	Welcome/setup page with PWA install prompt
`test.html`	Testing utilities and diagnostics

Core Scripts

File	Lines	Purpose
`Scripts/sketch.js`	~1340	Main UI event handlers, animations, start menu logic
`Scripts/minmax.js`	~50	Window minimization/maximization utilities
`index.js`	~10	Service Worker registration
`service_worker.js`	~50	Offline caching and PWA support

Core Styles

File	Purpose
`Styles/style.css`	Main styling (taskbar, windows, start menu, animations)
`Styles/index.css`	Global styles and theme variables
`Styles/minmax.css`	Window control button styling

Key Apps

App	Location	Description
About Device	`Root Directory/OS Files/about device.html`	Android-style "About" page with device info
Settings	`Root Directory/OS Files/settings.html`	System settings (display, sound, themes)
File Manager	`Root Directory/OS Files/file manager.html`	File explorer with mock filesystem
Calculator	`Root Directory/OS Files/calculator.html` + `Apps - (Testing)/calc/`	Scientific calculator
Antivirus	`Root Directory/OS Files/bjh-os-antivirus.html`	File scanner with virus definitions
Paint	`Root Directory/OS Files/Other Files/Paint/paint.html`	Drawing and image editing tool
Command Prompt	`Root Directory/OS Files/command prompt.html`	Terminal emulator
Media Player	`Root Directory/OS Files/media player.html`	Audio/video playback

Assets

Directory	Contents
`Assets/PWA/`	PWA icons (192x192, 512x512 PNG)
`Assets/RGOS-family/`	Branding and theme assets
`Root Directory/OS Files/ICONS/`	App icons (PNG format, 64x64)
`Apps - (Testing)/`	App templates and examples
`Customize BJH OS/`	Wallpapers, cursor themes, customization packs

Development Guidelines For Developing Built In Apps And Games For BJH OS Manually

Code Style & Best Practices

HTML Structure:
- Use semantic HTML5 tags (header, nav, main, etc.)
- Include ARIA labels for accessibility
- Validate HTML with W3C Validator
CSS:
- Use CSS Grid/Flexbox for layout (avoid floats)
- Define variables for colors, fonts, spacing
- Use BEM naming convention for classes (e.g., block__element--modifier)
- Prefix animations/transitions with vendor prefixes for older browsers
JavaScript:
- Use const/let (avoid var)
- Avoid global variables; use IIFE or modules
- Add comments for complex logic
- Use event delegation for dynamic elements
- Test in multiple browsers
File Organization:
- One main script per feature/module
- Keep scripts under 500 lines when possible
- Group related HTML/CSS/JS together
Performance:
- Lazy-load apps (iframes load on demand)
- Minimize CSS/JS files for production
- Use CSS transforms for animations (GPU acceleration)
- Cache frequently accessed DOM elements
Accessibility:
- Add alt text to images
- Use semantic HTML (buttons, links, labels)
- Ensure keyboard navigation works
- Test with screen readers

How to Develop Apps for BJH OS Manually

BJH OS supports HTML, CSS, and JavaScript apps natively. This guide covers folder structure, font integration, step-by-step creation, best practices, and registration.

App Folder Structure

Both app types use identical folder structure. Create your app in this structure:

YOUR_APP_NAME/
├── index.html              # Main entry point (REQUIRED)
├── favicon.ico             # App icon (64x64 PNG/ICO) (REQUIRED)
├── style.css               # Styling (optional)
├── app.js                  # JavaScript logic (optional)
├── constants.js            # Configuration & constants (optional)
└── assets/                 # Resources folder (optional)
    ├── images/
    │   ├── banner.png
    │   ├── icons/
    │   └── backgrounds/
    ├── fonts/              # Custom fonts
    ├── sounds/             # Audio files
    └── data/               # JSON data, configs

Critical Requirements:

Folder name becomes app identifier (lowercase, no special characters, spaces)
- ❌ Bad: My App, MY_APP, My-App
- ✅ Good: myapp, my_app, my-app
index.html must exist (entry point when app launches)
favicon.ico must exist in folder root (displayed in start menu, 64x64 PNG/ICO)
All paths must be relative (e.g., ./assets/image.png, NOT /assets/image.png)
App runs in iframe (sandboxed for security)

Two Types of Apps

1. Built-in Apps (Hardcoded in BJH OS)

Location: Root Directory/OS Files/[APP_NAME]/
Registered: Manually edit desktop1.html start menu
User can't remove (unless code is changed)
Always appear in start menu

2. 3rd-Party Apps (Installed via BJH OS Tool And Developed Via BJH OS Studio)

Location: Installed Apps/[APP_NAME]/
Registered: Automatically via BJH OS Tool
Appear in Installed Apps after installation in BJH OS

Both use identical structure and code! The only difference is registration method and location.

Developing Built-in Apps Manually

Location: Root Directory/OS Files/my-app/

Step 1: Create folder with required files

Root Directory/OS Files/my-app/
├── index.html       (REQUIRED)
├── favicon.ico      (REQUIRED - 64x64)
├── style.css        (optional)
└── app.js          (optional)

Step 2: Register in desktop1.html

Add this to the start menu section:

<li>
  <a href="Root Directory/OS Files/my-app/index.html">
    <button class="startAppsbutton">
      <img src="Root Directory/OS Files/ICONS/my-app.png" alt="">
      My App
    </button>
  </a>
</li>

Step 3: Add icon

Save PNG to: Root Directory/OS Files/ICONS/my-app.png

Now in this way you develop built in app/game for BJH OS to run your app just run BJH OS and click of bottom left BJH OS icon search for you app name open it and your app is run

How To Develop Apps And Games For BJH OS Apps Market?

Your app or game should be built using HTML, CSS, and JavaScript.
Make sure your project has an index.html file as the entry point.
All assets (images, scripts, styles) should be included in your project folder.
Test your app/game locally to ensure it works correctly in a browser.

How To Upload Apps And Games On BJH OS Apps Market?

Welcome to the BJH OS Apps Market Developer Platform. This guide will walk you through setting up your account, deploying your first application, managing updates, and adhering to our community guidelines.

1. Getting Started

Creating a Developer Account

To publish apps on BJH OS, you must register as a Developer.

Navigate to the Login/Register page.
Now Go To Developer Dashboard
Switch to the "Create Account" tab.
Crucial Step: Under "Account Type", select Developer (Build Apps).
- Note: Standard "User" accounts cannot access the deployment dashboard.
Fill in your Full Name, Email, and Password.
Click Create Account.

Account Verification

Security is our priority. After registering:

Check your email inbox for a 6-digit Verification Code (OTP).
Enter the code in the verification modal that appears.
Once verified, you will be automatically redirected to the Developer Dashboard.

2. Deploying Your App

BJH OS supports static web applications (HTML5/JS/CSS).

Preparation

Before deploying, ensure your project folder is structured correctly:

Root File: Your main entry point MUST be named index.html.
Assets: Use relative paths for images, scripts, and styles (e.g., instead of C:/Users/...).

Deployment Steps

Log in to the Developer Dashboard.
Ensure the toggle is set to "New Project".
Fill in App Metadata:
- App Name: The public title of your app.
- Type: Select "App" (Utilities/Tools) or "Game".
- Version: Start with 1.0.
- Icon URL: A direct link to your app's icon (PNG/JPG, square aspect ratio recommended).
- Screenshots URL: Comma-separated links to gameplay or interface images.
- Description: A detailed explanation of your app features.
Upload Files: Drag and drop your entire project folder into the drop zone.
Click Deploy.

What happens next?

Your app will be uploaded to our cloud storage. It will enter a "Pending Review" state. An admin will review your code and assets. Once approved, it will automatically appear in the BJH OS App Market.

3. Updating Your App

We support Zero-Downtime Updates. Your live app remains accessible while your update is being reviewed.

Update Process

In the Developer Dashboard, toggle the switch to "Update Existing".
Select Project: Choose the app you wish to update from the dropdown menu.
Metadata: The form will auto-fill with existing data. You MUST increment the Version Number (e.g., change 1.0 to 1.1).
Upload: Drag and drop the new version of your project folder.
Click Update.

The Shadow Copy System:

Your update creates a "Shadow Copy" in the database.
The Old Version stays live and playable in the store.
The New Version goes to the Admin for review.
Upon Approval, the new files and data replace the old ones instantly.

4. Support & Issues

If you encounter bugs or have questions for the administration:

Go to the "Report Issues" tab in your dashboard.
Subject: Brief summary of the problem.
Description: Detailed explanation.
Click Submit Ticket.

You can track the status of your ticket (Open/Resolved) and view Admin Replies directly in the "My Support Tickets" list on the same page.

5. Rules & Guidelines

To ensure a safe ecosystem, all developers must adhere to the following rules. Violation will result in immediate account suspension.

🚫 Strict Prohibitions

No Malware: Viruses, spyware, crypto-miners, or malicious scripts.
No Phishing: Apps attempting to steal user credentials or data.
No NSFW Content: Pornography, extreme violence, or hate speech.
No Copyright Infringement: Do not upload cracked software or pirated games.

✅ Best Practices

Performance: Ensure your app loads quickly and is responsive.
Asset Hosting: Use reliable, persistent URLs for icons and screenshots (e.g., Imgur, Unsplash, or your own CDN).
Clean Code: Avoid obfuscated code to speed up the review process.

Account Suspension & Appeals

If your account is banned:

You will lose access to the dashboard.
A "Suspended" overlay will appear upon login showing the reason.
You may submit an Appeal through the form provided in the overlay.
Admins will review your appeal. If Approved, your access is restored. If Rejected, you will see the rejection reason and may try again.

8. Best Practices

Use high-quality icons, screenshots, and videos.
Keep descriptions clear and informative.
Test your app/game thoroughly before upload.
Update apps regularly to fix bugs and add new features.

9. Support

If you encounter issues during upload or updates, contact BJH OS support via:

Email: muhammad.haris662007@gmail.com
Developer dashboard support form

This documentation ensures developers can upload apps efficiently, track stats, use points to promote apps, and engage users in BJH OS Apps Market.

Here Guide For Uploading Apps And Games To BJH OS Apps Market End

BJH OS Apps & Games Installation Guide

Follow these steps to install, run, and manage apps or games in BJH OS.

Supported Editions:

BJH OS Web Edition
BJH OS Self-Hosted Edition

1. Open BJH OS

Start your BJH OS on your device by opening BJH OS.

2. Access BJH OS Apps Market

Open the BJH OS Apps Market from your desktop or start menu.
If you don’t have an account, create one.
If you already have an account, log in using your credentials.

3. Install Apps or Games

Browse or search for the apps/games you want.
Click Download for the app/game.
Once it shows App Installed, the app/game is ready.

4. Open Installed Apps

Go back to BJH OS main screen.
Open Apps Market from the start menu.
Enter the email address you used for BJH OS Apps Market (required only once).
On Top Bar their is a Library button click on it.
Your installed apps will appear.
Press Launch to run any app or game.

5. Uninstall Apps

Open BJH OS Apps Market.
Go to Library.
Find the app you want to uninstall.
Press Bin Icon.
It will show popup of app uninstall confirmation. Press Yes,Uninstall Button
The app is now successfully uninstalled.

✅ Notes

Each app/game must be downloaded through the BJH OS Apps Market.
Logging in with your email ensures your apps sync across devices.
Deleted apps can always be re-downloaded from My Apps.

Font Sync with BJH OS Settings

When user changes font in Settings, all apps automatically use the selected font. Add this code to your app's <head>:

<!-- Font Sync Script -->
<script>
  document.addEventListener('DOMContentLoaded', () => {
    const storedFont = localStorage.getItem('selectedFont');
    if (storedFont) {
      document.body.style.fontFamily = storedFont;
    }
  });
</script>

How it works:

User changes font in BJH OS Settings → stored in localStorage.selectedFont
Your app reads this value on page load
Applied to document.body → all elements inherit the font
Works for both built-in and 3rd-party apps

Complete App Example: Calculator

Here's a simple calculator app (works for both built-in and 3rd-party):

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Calculator</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="calc-container">
    <div class="display">0</div>
    <div class="buttons">
      <button class="btn number">7</button>
      <button class="btn number">8</button>
      <button class="btn number">9</button>
      <button class="btn operator">÷</button>
      <button class="btn number">4</button>
      <button class="btn number">5</button>
      <button class="btn number">6</button>
      <button class="btn operator">×</button>
      <button class="btn number">1</button>
      <button class="btn number">2</button>
      <button class="btn number">3</button>
      <button class="btn operator">−</button>
      <button class="btn number">0</button>
      <button class="btn">.</button>
      <button class="btn operator">=</button>
      <button class="btn operator">+</button>
    </div>
  </div>

  <!-- Font Sync Script -->
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const storedFont = localStorage.getItem('selectedFont');
      if (storedFont) {
        document.body.style.fontFamily = storedFont;
      }
    });
  </script>
  
  <script src="app.js"></script>
</body>
</html>

style.css:

body {
  font-family: Arial, sans-serif;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.calc-container {
  background: white;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  width: 300px;
}

.display {
  background: #222;
  color: #fff;
  font-size: 32px;
  text-align: right;
  padding: 20px;
  border-radius: 10px;
  margin-bottom: 20px;
  font-weight: bold;
}

.buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.btn {
  padding: 15px;
  font-size: 18px;
  border: none;
  border-radius: 8px;
  background: #f0f0f0;
  cursor: pointer;
  font-weight: 600;
}

.btn.number {
  background: #e3f2fd;
  color: #1976d2;
}

.btn.operator {
  background: #667eea;
  color: white;
}

app.js:

let display = document.querySelector('.display');
let buffer = '0';
let previousValue = null;
let operation = null;

document.querySelectorAll('.btn.number').forEach(btn => {
  btn.addEventListener('click', (e) => {
    const value = e.target.innerText;
    if (buffer === '0') {
      buffer = value;
    } else {
      buffer += value;
    }
    display.innerText = buffer;
  });
});

document.querySelectorAll('.btn.operator').forEach(btn => {
  btn.addEventListener('click', (e) => {
    const op = e.target.innerText;
    if (op === '=') {
      if (operation && previousValue) {
        const result = calculate(previousValue, parseFloat(buffer), operation);
        buffer = String(result);
        display.innerText = buffer;
        previousValue = null;
        operation = null;
      }
    } else {
      previousValue = parseFloat(buffer);
      buffer = '0';
      operation = op;
    }
  });
});

function calculate(prev, current, op) {
  switch (op) {
    case '+': return prev + current;
    case '−': return prev - current;
    case '×': return prev * current;
    case '÷': return prev / current;
    default: return current;
  }
}

How to install & run your app in BJH OS (Self Hosted Version Only)

Install using BJH OS Tool (recommended)

Open the BJH OS Tool executable located in the project root: BJH_OS_Tool_64_Bit_4.6.exe (or BJH_OS_Tool_32_Bit_4.6.exe if present).
Click the Install App button in the tool.
In the file picker, select your app folder (the folder that contains index.html, favicon.ico, etc.). Select the entire folder — do not pick individual files.
The tool will copy the folder into Installed Apps/ and register the app for BJH OS. A success message will confirm installation.

Run BJH OS and open the installed app

Open desktop1.html in your browser to start BJH OS (or use your normal workflow to run the OS).
Click the BJH OS / Start icon in the bottom-left corner.
Look in Pinned Apps or use Start → Search and type "Installed Apps" (or click the Installed Apps app if visible).
Open the Installed Apps listing — you should see your installed app listed. Click it to launch in a draggable window.

Notes:

The installer automatically places apps under Installed Apps/[APP_NAME]/. You can also manually copy a prepared app folder into Installed Apps/ and then refresh BJH OS; the Installer will detect it.
Built-in apps are added by editing desktop1.html (start menu) and placing the app folder under Root Directory/OS Files/.

Packaging and sharing your app

To share your app, compress the entire app folder (the folder that contains index.html and favicon.ico) into a ZIP file.
Distribute the ZIP. The recipient should extract the ZIP to a temporary location, open the BJH_OS_Tool_64_Bit_4.6.exe, click Install App, and select the extracted folder.
After installation the app will appear in the Installed Apps listing and Start menu as described above.

Quick manual-install fallback:

If a user cannot run the Installer, copy the app folder directly into Installed Apps/ and then open desktop1.html and refresh the page — the OS will detect the folder and list the app.

Best Practices

DO:

✅ Use relative paths for all assets (./assets/image.png)
✅ Include font sync script in <head>
✅ Keep app responsive (works on 900x600 minimum)
✅ Use localStorage for user preferences
✅ Include favicon.ico (required)
✅ Test in multiple browsers

DON'T:

❌ Don't use absolute paths (/assets/ breaks app)
❌ Don't use window.open() for same-origin (use window.openAppInWindow())
❌ Don't assume external network (support offline)
❌ Don't use eval() or insecure code
❌ Don't use special characters in app folder name

Testing Checklist

Before submitting/publishing:

Folder structure correct (index.html, favicon.ico required)
All paths are relative
Font sync script included
Responsive CSS
App opens in draggable window
Works offline
No console errors
Folder name is lowercase (no spaces/special chars)

Modifying Styles

Global theme (Colors, Fonts): Edit Styles/index.css (CSS variables at top):

:root {
  --primary: #0066cc;
  --secondary: #f0f0f0;
  --font-main: 'Poppins', Arial, sans-serif;
}

Taskbar/Desktop: Edit Styles/style.css (.taskbar, .startmenu, .desktop classes)

Window appearance: Edit inline styles in desktop1.html (.app-window, .app-window.maximized CSS rules)

Debugging

Browser Console:

// Check if window system is loaded
console.log(window.openAppInWindow);  // Should be a function

// Manually open a window
window.openAppInWindow('Root Directory/OS Files/calculator.html', 'Calculator');

// Check z-index stack
console.log(document.querySelectorAll('.app-window'));

Service Worker:

DevTools → Application → Service Workers
Check "Offline" to test offline mode
Clear cache: "Clear storage" button

API Reference

Window Management API

`window.openAppInWindow(url, title)`

Opens an app in a draggable iframe window.

Parameters:

url (string): Path or URL to app HTML file
title (string, optional): Window title (defaults to filename)

Returns: Window DOM element (.app-window div)

Example:

window.openAppInWindow('Root Directory/OS Files/calculator.html', 'Calculator');
window.openAppInWindow('Root Directory/OS Files/paint.html', 'Paint');

Notes:

Same-origin URLs only (security restriction)
External URLs fall back to window.open() in new tab
Title auto-truncates with ellipsis if too long

Event Interception

The window system automatically intercepts:

Anchor clicks on same-origin links → open in iframe
window.open() calls for same-origin URLs → open in iframe
External links (https://...) → open in new tab (default)

To force a link to open natively:

<!-- Add data-native attribute -->
<a href="Root Directory/OS Files/app.html" data-native>
  Open in new tab
</a>

CSS Classes (Window System)

Class	Purpose
`.app-window`	Draggable window container
`.app-window.maximized`	Fullscreen/maximized state
`.win-header`	Titlebar (draggable area)
`.win-title`	Window title text
`.win-controls`	Control buttons (maximize, close)
`.disable-select`	Prevents text selection during drag

Lifecycle Events

Event	Trigger	Use Case
`mousedown` (header)	User clicks titlebar	Start dragging
`mousemove` (document)	User moves mouse	Update window position
`mouseup` (document)	User releases mouse	Stop dragging
`dblclick` (header)	User double-clicks titlebar	Toggle maximize
`click` (close btn)	User clicks X button	Remove window

Troubleshooting

Common Issues

Q: Apps won't open in windows (opening in new tab instead)

Cause: target="_blank" on anchor tag, or URL is external origin
Solution: Remove target="_blank" from HTML; ensure URL is same-origin

Q: window.open() not intercepted

Cause: External URL (different domain) or script error
Solution: Check browser console for errors; verify URL starts with http://localhost or relative path

Q: Window can't be dragged

Cause: Window is maximized, or click on iframe content (not titlebar)
Solution: Click titlebar to drag; click maximize button to restore; avoid clicking inside iframe

Q: Service Worker not caching offline

Cause: Running via file:// protocol instead of HTTP server
Solution: Use local web server (Python, Node.js, etc.); open via http://localhost:port

Q: Start menu not showing

Cause: CSS not loaded, or JS error in sketch.js
Solution: Open DevTools → Console, check for JS errors; ensure all CSS files are linked

Q: Icons not showing

Cause: Incorrect path to image asset
Solution: Verify relative paths; use absolute paths from project root (e.g., Assets/... not ../Assets/...)

Browser Compatibility Issues

Issue	Browser	Fix
Animations jittery	Safari	Add `-webkit-` prefix; use `transform` instead of `top/left`
Service Worker fails	Firefox (offline mode)	Ensure served over HTTP (not file://)
Flexbox layout broken	Edge 12-15	Use older syntax; add `-ms-` prefixes
Grid layout broken	IE 11	Not supported; use fallback flexbox

Performance Optimization

Slow app launching:

Minimize iframe HTML (remove unused scripts/styles)
Lazy-load app resources (load JS on-demand)
Use CDN for external assets

High memory usage:

Close unused windows (each window = iframe = process memory)
Clear browser cache periodically
Reduce animation frame rate (use requestAnimationFrame wisely)

Contributing

Workflow for Contributors

Fork/Clone the repository
Create feature branch: git checkout -b feature/my-feature
Make changes following code style guidelines
Test in multiple browsers
Commit: git commit -m "Add my feature"
Push: git push origin feature/my-feature
Submit PR with description and screenshots

Bug Reports

Include:

Detailed description of issue
Steps to reproduce
Browser/OS version
Screenshot/video if possible
Error messages from console

Feature Requests

Describe:

Use case and user story
Expected behavior
Proposed implementation (optional)
UI mockups (optional)

Appendix: Useful Resources

Official Docs

MDN Web Docs — HTML/CSS/JS reference
W3C Standards — HTML/CSS specifications
PWA Documentation — Service Workers & PWA

Design Resources

Material Design Icons — Icon library
Google Fonts — Font collection
CSS Tricks — CSS guides and tricks

Tools

VS Code — Code editor
Chrome DevTools — Browser debugging
Lighthouse — Performance audit
WAVE — Accessibility checker

Community

GitHub Issues — Bug tracking and feature requests
Stack Overflow — Q&A for coding problems
Reddit r/webdev — Web development discussion

License & Credits

BJH OS (This Repository) is licensed under AGPL-3.0.
Some future premium features may have separate usage terms. Project: BJH OS
Developer: Muhammad Haris

Icon Attribution:

icons8.com — Icons
Google Fonts & Icons — Fonts and Material Design icons
Weatherwidget.org — Weather widget

Disclaimer: This project is not affiliated with Microsoft or Windows. It is an Web Based Operating System project.

End of Developer Documentation

For questions, issues, or contributions, please contact us on Discord

FilesExpand file tree

DEV_DOCS.md

Latest commit

History