📄 Documentation: Slide Controller – Revolutionizing Remote Presentation Control with MQTT

Created by Lovnish Verma

This innovative tool offers a cost-effective and customizable solution for remote presentation control, leveraging MQTT for real-time communication.

---

🌟 Introduction

Tired of relying on expensive proprietary devices like the Hardware Based Wireless Presenters to control your slides? Meet Slide Controller — a cutting-edge, open-source web application that turns your smartphone, tablet, or laptop into a fully customizable, feature-rich presentation remote — all for FREE!

---

✅ Key Features

• 🎨 Beautiful Responsive UI: Modern CSS design with cards, shadows, and clean typography.
• ⏭️ Next/Previous Buttons: Navigate presentation slides interactively.
• 🟢 Live Status Indicator: Real-time MQTT connection status with color-coded indicators.
• 🎛️ Device Toggle & Sensitivity Slider: Optional controls for motion/gesture extensions.
• 🌐 Cross-Platform Access: Works on mobile, tablet, and desktop browsers.
• 🔌 Integration Ready: Extendable for gesture, voice, or IoT triggers.
• 🖥️ Tkinter GUI (New in v2.0): A modern graphical interface for easy configuration and real-time feedback.
• ⚙️ MQTT Settings Customization (New in v2.0): Edit broker, port, username, password, and topic directly from the app without modifying code.

---

💡 Why Slide Controller is Revolutionary?

1⃣ No Hardware Required

• Forget physical presenters. Use any internet-connected device as your remote control. Works on mobile, tablet, or desktop browsers.

2⃣ MQTT-Powered Connectivity

• Leverages MQTT, the industry-standard IoT protocol, for real-time, low-latency slide transitions. Unlike traditional remotes, it’s extendable to integrate with IoT devices, voice assistants, or even custom hardware.

3⃣ Motion & Gesture Control

• Shake your device to skip slides or adjust sensitivity via a built-in slider. No need to press buttons—your movements become commands!

4⃣ Haptic Feedback

• Feel vibrations on your device when slides change, ensuring you’re always in sync with your presentation.

5⃣ Cross-Platform & Open-Source

• Fully customizable codebase. Tweak UI/UX, add new features (like voice commands or gesture recognition), or integrate it with smart devices—the possibilities are endless!

6⃣ Dark Mode & Responsive Design

• A sleek, modern UI with toggleable dark mode and pixel-perfect responsiveness for every screen size.

7⃣ Tkinter GUI Enhancements (v2.0)

• Easily configurable MQTT settings
• Visual feedback for connection status
• Support for saving preferences locally using config files
• User-friendly theme switching and window management

---

🔧 How It Works

• Web Interface: Hosted on platforms like Glitch, the frontend provides intuitive controls.

• MQTT Broker: Uses HiveMQ Cloud or local brokers (like Mosquitto) for reliable communication.

• Local Automation: A Python script listens to MQTT messages and uses pyautogui to simulate keyboard inputs, controlling PowerPoint or any presentation software directly.

• Subscriber v2.0: Now comes with a Tkinter GUI to configure:

  • MQTT Broker
  • Port
  • Username
  • Password
  • Topic
  • Themes (Light, Dark, High Contrast)
  • Window always-on-top toggle

---

🥺 Features That Set It Apart

Unique Features	Traditional Remotes	Slide Controller
Cost	₹2,500+	FREE (Open Source)
Customization	Limited buttons	Add voice/gesture/IoT controls
Connectivity	Wired/Wi-Fi only	Cross-platform via MQTT
Feedback	None	Haptic vibrations + visual cues
Extensibility	Closed ecosystem	Fully open-source, hackable
GUI Configuration	Not available	New Tkinter-based GUI for easy setup
Configurable MQTT Setup	Hardcoded	Edit credentials live in GUI
Themes Supported	Fixed UI	Light, Dark, High Contrast

---

🛠️ Technical Highlights

• Stack: HTML/CSS/JS for the frontend, Python Flask + Paho MQTT for backend, and PyAutoGUI for automation.
• Subscriber v2.0: Built with Tkinter, supports dynamic MQTT configuration and theming.
• Deployment: Host the web app on Glitch in minutes—no server setup required.
• Security: Uses secure MQTT brokers like HiveMQ Cloud with TLS encryption.
• Accessibility: Works offline (for motion controls) and supports keyboard shortcuts for touch-free operation.

---

📦 Project Structure (Updated with v2.0) / (Hosted on glitch.com)

Source code in the GLITCH BRANCH

slide-controller/
├── templates/index.html          # Web UI
├── server.py                     # Flask MQTT publisher

Source code in the backend-server BRANCH

├── dist/subscriber_version-2.0.exe          # New Tkinter-based MQTT subscriber
└── subscriber_version-2.0.py               # THE EXE file (built from subscriber_version-2.0.py using PyInstaller)

---

🌐 Set Up MQTT Broker

✅ Option 1: HiveMQ Cloud (Recommended)

HiveMQ Cloud is free, secure, reliable, and requires no local setup.

Step-by-Step: Create a HiveMQ Cloud Broker

1. Go to HiveMQ Cloud Console
2. Sign up or log in
3. Create a new cluster (Free Tier)
4. Note the Broker Hostname and Port (8883 for TLS)
5. Create MQTT Credentials (Username & Password)
6. Enable TLS/SSL

Example Code:

BROKER = "your-cluster-id.s2.eu.hivemq.cloud"
PORT = 8883
USERNAME = "slideuser"
PASSWORD = "myslidesecret"
TOPIC = "slide/control"

client.tls_set()
client.username_pw_set(USERNAME, PASSWORD)
client.connect(BROKER, PORT)

✅ Option 2: Local Mosquitto Broker (Advanced Users Only)

Install on Linux:

sudo apt install mosquitto mosquitto-clients
mosquitto

Set in scripts:

BROKER = "localhost"
PORT = 1883

---

🧹 Subscriber v2.0 – Tkinter GUI Details

The new version introduces a graphical user interface (GUI) built with Tkinter, allowing users to:

🔧 MQTT Settings Panel

• Change Broker Address
• Modify Port Number
• Update Username and Password
• Set Custom Topic Name
• Save settings to a local .json file for persistence eg:- mqtt_controller_config.json

🎨 Theme Manager

• Switch between:

  • Light Theme
  • Dark Theme
  • High Contrast Theme

• Apply changes instantly without restarting the app

📡 Connection Status Indicator

• Visual indicator showing MQTT connection status
• Tooltip shows detailed status messages (e.g., "Connected", "Disconnected", "Auth Failed")

---

🚀 Deployment Guide – Slide Controller Web App on Glitch.com (this project is deployed in render.com coz glitch.com is discontinued)

Step-by-Step Instructions

1. Visit Glitch.com

2. Sign up or log in

3. Remix the Python3 Starter Project

4. Rename the project (e.g., slide-controller)

5. Upload or create:

   • server.py
   • templates/index.html
   • requirements.txt
   • Optional: .env for MQTT credentials if you're not using database

6. Start the app and preview

File Structure Overview

/slide-controller (project root)
├── server.py
├── requirements.txt
├── templates/index.html
├── README.md
├── glitch.json
└── .env

---

🔄 Running the App

Option 1: Run from Glitch

🚀 Live Demo: https://slidecontroller.glitch.me

Option 2: Run Subscriber Script or Convert to EXE

Install PyInstaller:

pip install pyinstaller

Note: To generate icon go to icoconverter.com upload .jpg or .png and get your icon in .ico format

Convert to executable:

pyinstaller --onefile --icon=slidecontrol.ico --noconsole subscriber_version-2.0.py

Run:

dist\subscriber_version-2.0.exe

---

📦 Requirements for Tkinter Version

Install dependencies:

pip install paho-mqtt pyautogui PyInstaller

Or use requirements.txt:

paho-mqtt
pyautogui
PyInstaller

---

📝 Notes

• The Tkinter GUI saves MQTT settings in a config.ini file for persistent configuration.
• Users can now edit MQTT credentials without touching the code.
• Themes are stored in a separate JSON file for easy expansion.
• The GUI supports resizing, minimizing, and staying on top of other windows.
• Ensure the subscriber.exe is running with proper screen access and focus on the presentation app (e.g., PowerPoint).

---

🧪 Test It Out

1. Open your Flask web app in a browser.
2. Click "Next" or "Previous" buttons.
3. On the presentation computer, ensure subscriber_version-2.0.exe is running and PowerPoint is focused.
4. Slide transitions should occur instantly.
5. You can now modify MQTT settings and switch themes on the fly.

---

📸 Screenshots

Slide Controller Flask App using MQTT Web UI Running on Android or iOS phone to control host machine:

Subscriber v1.0 GUI Running on Host Machine

Subscriber v2.0 GUI Running on Host Machine (Recommended)

---

📄 Special Note by Author and Maintainer of this project Mr. Lovnish Verma 😉

Do whatever you want, but don't blame us if you break your projector 😉.

---

📣 Final Thoughts

Slide Controller isn't just about replacing a remote—it's about democratizing control, enabling anyone with a browser and internet connection to seamlessly manage presentations, automate classrooms, and invent new interfaces.

---

📚 Resources

🔗 GitHub Repository:
Slide Controller on GitHub
Clone or contribute to the open-source project.

🚀 Controller Web App (Source Code):
Remix on Glitch – Slide Controller

🔧 Instructions:

• Click Remix to create your own copy.
• Update the credentials in .env file with your own.

• The app will be live at https://your-project-name.glitch.me.

Register with your HiveMQ Credentials on this web application: Create Cluster on HiveMQ

📥 Windows Executable (Host Machine):
Download subscriber2.0.exe

📝 Default Login (for demo):

• Username: admin
• Password: password
• Update the HiveMQ credentials from Settings tab

---