OpenGrowBox Frontend

OpenGrowBox Frontend is the companion web application for the OpenGrowBox Home Assistant Integration. It provides a modern, responsive UI for monitoring and controlling your growing environment, visualizing sensor data, reviewing logs, and managing device settings.

---

📋 Table of Contents

• 🚀 Features
• 💻 Demo / Screenshot
• 📦 Installation
• ⚙️ Configuration
• 🏗️ Project Structure
• 📖 Usage
• 🛠️ Development
• 🛣️ Roadmap
• 🤝 Contributing
• ❓ Getting Help
• 📝 License

---

🚀 Features

• Real-time Monitoring: Live updates of temperature, humidity, CO₂, pH, EC and other sensor readings.
• Device Control: Toggle pumps, fans, lights and other actuators directly from the dashboard.
• Historical Charts: Interactive graphs showing environmental trends over time.
• Notes & Reports: Add and save grow notes per room or tent, powered by the text entity.
• Configuration Panel: Adjust thresholds, schedules and modes (e.g. hydro, auto, manual).
• Responsive Design: Mobile-first, works on any screen size.
• Theming: Multiple built-in themes (Unicorn, Hacky, BookWorm, BlueOcean, CyberPunk, Darkness) via styled-components.

---

💻 Demo / Screenshot

📦 Installation

1. Prerequisites

   • Node.js v14 or newer
   • Yarn (optional, npm also works)
   • A running Home Assistant instance with the OpenGrowBox-HA integration.

2. Clone this repository

   git clone https://github.com/OpenGrow-Box/OpenGrowBox-Frontend.git
   cd OpenGrowBox-Frontend

3. Install dependencies

   yarn install
   # or
   npm install

4. Configure environment variables

   cp .env.example .env

   Edit .env and set your Home Assistant URL and access token:

   REACT_APP_HA_URL=https://your-homeassistant.local:8123
   REACT_APP_HA_TOKEN=YOUR_LONG_LIVED_ACCESS_TOKEN

5. Start development server

   yarn start
   # or
   npm start

   Open http://localhost:5173/ogb-gui/static/ in your browser.

---

⚙️ Configuration

Home Assistant Integration

Install the OpenGrowBox-HA custom component in your Home Assistant custom_components folder. In configuration.yaml:

opengrowbox:
  host: 192.168.1.100   # IP of your OpenGrowBox device
  port: 12345           # TCP port
  hydro_mode: true      # start hydro mode on HA startup

Restart Home Assistant after adding the integration.

Frontend Environment

The .env file should contain:

REACT_APP_HA_URL=https://homeassistant.local:8123
REACT_APP_HA_TOKEN=YOUR_LONG_LIVED_TOKEN

---

🏗️ Project Structure

OpenGrowBox-Frontend/
├── public/              # Static assets, index.html, favicon
├── src/                 # React sources
│   ├── assets/          # Images, logos, icons
│   ├── components/      # Reusable UI components (DeviceCard, OGBNotes, etc.)
│   ├── context/         # HomeAssistantContext, ThemeContext
│   ├── pages/           # Route-based views (Dashboard, Settings)
├── docs/                # Documentation assets (screenshots, diagrams)
├── .envtemplate         # Env vars example
├── package.json         # Scripts & dependencies
└── README.md            # This file

---

📖 Usage

• Dashboard: Overview of all rooms/grow tents and key metrics.
• Room View: Detailed sensor data, control buttons, logs, and note-taking (OGBNotes).
• Settings: Theme selector, HA connection details, user preferences.

---

🛠️ Development

• Lint & Format

  yarn lint      # runs ESLint
  yarn format    # runs Prettier

• Build for Production

  yarn build

  Outputs to build/.

• Run Tests

  yarn test

---

🛣️ Roadmap

• Add multi-room map view
• Support custom dashboard layouts
• Export data CSV/Excel

---

🤝 Contributing

Contributions are welcome! Please read CONTRIBUTING.md for details:

1. Fork the repo
2. Create a feature branch (git checkout -b feature/my-change)
3. Commit your changes (git commit -m "feat: add new widget")
4. Push (git push origin feature/my-change)
5. Open a Pull Request

Be sure to follow the existing code style and include tests where applicable.

---

❓ Getting Help

If you run into issues or have questions, please open an issue on GitHub or join our Discord channel:

• Issues: https://github.com/OpenGrow-Box/OpenGrowBox-Frontend/issues
• Discord: https://discord.gg/your-invite-link

---

📝 License

This project is licensed under the OGBCL license. Additional premium features are only provided to paying customers and are not part of this project. They are subject to a separate proprietary license.