Smart Room Control Interface

DGnet Web GUI

Browser-Based Control for Smart Rooms & Spaces

The DGnet Web GUI is a web-based control interface that works alongside DGnet's physical touch panels — managing lighting, AC, audio/video, scenes, and room automation from the browser.

We built the entire Vue.js frontend, fully integrated with the client's GCP microservices backend and synced in real time with connected hardware.

Product Page

Project Overview

The DGnet Web GUI is a web-based control interface designed to work alongside DGnet's physical touch panels installed in rooms, meeting spaces, and controlled environments.

The platform enables users to manage lighting, AC, audio/video systems, scenes, and other room automation features from a clean, browser-based dashboard.

Our team built the entire frontend application using Vue.js, fully integrated with the client's GCP microservices backend. The goal was to create a responsive, intuitive, and hardware-synced GUI that mirrors the sophistication of the physical control panels.

Frontend & Integration

Engagement

Google Cloud (GCP)

Infrastructure

IoT & Room Automation

Industry

Web, Tablet & Kiosk

Platform

Client Challenges

DGnet's hardware team needed a web interface that could:

01

Mirror the functions of physical in-room control panels

02

Communicate efficiently with GCP microservices

03

Provide real-time status updates from connected devices

04

Offer a modern, touch-friendly interface for tablets and wall screens

05

Handle custom states, automations, and device profiles

06

Scale across multiple rooms, buildings, and control environments

The design had to be minimal, reliable, and fast, ensuring users see instant responses when interacting with room controls.

Our Approach

Working closely with DGnet's IoT engineers, we:

  1. Step 1

    Designed a UI structure reflecting real-world room controls

  2. Step 2

    Built a Vue.js system optimized for touchscreen interactions

  3. Step 3

    Integrated with backend GCP microservices for real-time device updates

  4. Step 4

    Created modular components for lights, AC, audio, scenes, and power controls

  5. Step 5

    Developed a scalable layout that can support different room configurations

  6. Step 6

    Ensured smooth transitions and animations for a premium feel

Team Image

The result is a control interface that feels modern, responsive, and highly intuitive.

Key Features Delivered

Room Control Dashboard

  • View and manage all devices in a room
  • Real-time feedback for toggles, buttons, and sliders
  • Configurable layout for different room types

Lighting Control

  • On/off switching
  • Brightness sliders
  • Scene presets (Presentation, Relax, Meeting)

Air Conditioning Control

  • Temperature control
  • Fan speed selection
  • Mode switching (cool, heat, auto)

Audio & Video Device Management

  • Volume controls
  • Source switching
  • Mute/unmute
  • Device status indicators

Scenes & Automations

  • Predefined automation scenes
  • Combined actions for multi-device changes
  • Instant activation with visual feedback

Touch-Friendly UI

  • Built for wall-mounted tablets
  • Large hit zones, clean spacing, responsive animations
  • Works on tablets, desktops, and kiosks

Integration with GCP Microservices

  • Real-time communication
  • Stable and efficient data flow
  • Device state synchronization

Technology Stack

Frontend

Vue.jsSCSS / CSS ModulesComponent-based ArchitectureTouch-optimized UI

Backend (Client-Provided)

GCP MicroservicesDevice Command & State APIs

Database

Firebase / GCP Datastore

DevOps & Deployment

GCP DeploymentSecure Communication & Environment Configuration

Project Gallery

Explore the visual design and user interface of the DGnet Web GUI, showcasing room dashboards, device controls, and scenes.

Project Image 1
Project Image 2
Project Image 3
Project Image 4
Project Image 5

Our Main Contributions

Built the entire web GUI using Vue.js

Designed UI workflows tailored to room automation

Worked closely with IoT and backend engineers to sync device states

Created reusable components for various device types

Delivered a smooth, touch-friendly interaction experience

Ensured reliability and speed for real-time device control

Impact & Results

Enabled DGnet to offer web-based control panels alongside physical hardware

Improved user convenience with remote access via browsers

Unified room management under a consistent and elegant UI

Enhanced system adoption due to simplicity and responsiveness

Provided a scalable foundation for future features like analytics, multi-room views, and automation scheduling

DGnet Web GUI now functions as a modern control center for smart rooms, allowing users to interact with their environment seamlessly and efficiently.

Ready to Launch Your Project Today?

Kickstart your vision with our expert development team.

Get Started