I think, you know the Google Home app of your smartphone It is used to control the connected devices We are therefore going to create the extension in order to control MMM-Bugsounet from this application!

Process

SmartHome needs to receive and send data Send data it's not a problem ;) Receive data in live from google Server in live get a little more complex And again... it's use https protocal So I tried to simplify as much as possible (as usual) the installation

Pre-Require

• Domaine name or DynDNS (or equivalent) account
• a Router
• An Google Account: For using Google Home app with your SmartPhone

Screenshot

Google Home MMM-Bugsounet icon

On the App

What can this plugin do?

It's able to control plugin :)

• EXT-Screen: for Force turn on/off screen
• EXT-Volume: for volume and mute/unMute control
• EXT-Spotify: Play/previous/next/pause
• EXT-FreeboxTV: display FreeboxTV and control it with source
• EXT-RadioPlayer: listening Radio channel with source
• EXT-Pages: change the page with CH +/-
• stop: for stop all working EXTs
• You can restart, close MagicMirror²
• You can reboot, shutdown your system

---

SmartHome guide:

Installation

Execute npm run setup:EXT-SmartHome in the MMM-Bugsounet's folder.

cd ~/MagicMirror/modules/MMM-Bugsounet
npm run install:EXT-SmartHome

Define your module definition configuration in config.js file of MagicMirror

{
  module: "MMM-Bugsounet/EXTs/EXT-SmartHome",
  config: {
    debug: false,
    username: "admin",
    password: "admin",
    CLIENT_ID: null
  }
},

Notes:

• It's an example
• For better security, best way don't use default username and password
• username and password field will be defined together in accord with Google Action

Option	Description	Type	Default
debug	enable or not debug mode	Boolean	false
username	Define your Google Action username for login	String	admin
password	Define your Google Action password for login	String	admin

It's time to change default username and password of MMM-Bugsounet configuration

why ? You will have access from internet to MMM-Bugsounet so, for security, it's better to don't use default username and password EXT-SmartHome will use MMM-Bugsounet http(s) server for google smarthome serving This part will help and replace it by your own !

Note: We don't change username and password of EXT-SmartHome at this moment

Domaine name with fixed WAN ip address or DynDNS

What's IP WAN /IP LAN ?

• IP WAN is your ip from Internet
• IP LAN is your device ip from your local network (inside your home)

What's a domain name and a sub-domain ?

• a domaine sample it's like bugsounet.fr
• a sub-domain it's like forum.bugsounet.fr (forum is the sub-domain)

--> If you have a domaine name and an fixed WAN ip address:

create a sub-domaine and redirect it to your WAN ip

--> if you have a dyndns domain name, verify if really redirect to your WAN adress

External connect port (from internet)

SmartHome need 2 ports:

• 80: for create http server and initialize https protocol
• 443: for using https protocol with SmartHome and Google SmartHome

Enter inside your router setting and redirect this 2 ports to your raspberry pi LAN ip address

My Sample value used in this wiki

sub-domaine name: demo.bugsounet.fr

When routing done, check if this is configured correctly

Open the webpage with your sub-domaine name (or dyn-dns)

sample: http://demo.bugsounet.fr (replace demo.bugsounet.fr by yours)

If works: You must have the nginx default page

Create a new Google Home Project

Connect to Google Home Console

Name it MMM-Bugsounet (and make it in accord with your language and country)

Add cloud-to-cloud integration

skip Resources Documentation by clicking on Next: Develop

Let's Setup now, click on Next: Setup

fill the required fields (like the screenshot):

• Integration name: EXT-SmartHome
• Device type: select TV
• App Icon: upload your own avatar (144x144px)

Account Linking:

• Client ID: Enter your prefered Client login (as you wish) and report it in EXT-SmartHome config into CLIENT_ID field.
• Client secret: enter the password used in the config of EXT-SmartHome (or report on it).

Don't Forget to change password field of the EXT-SmartHome config and make it in accord ! For security: don't use admin as password and CLIENT_ID

any URLs: Replace demo.bugsounet.fr by your sub-domain or your dyndns address

check this:

And Save it !

Enable HomeGraph API

Enable HomeGraph API for your project in the Cloud Platform Console

Select mmm-bugsounet project

Let's configure HomeGraph for live update in Google Home App

Follow this step

In the left menu select APIs & Services and Library

HomeGraph API Library search

Enable HomeGraph API

Wait for activation

Create credentials

Select API & Services -> Credentials

Create Credentials

Select Service Account

Step 1:

Service account name: EXT-SmartHome Service account ID : it's auto complete... don't touch it ! Service account description: EXT-SmartHome

And... Create and continue

Step 2:

Select a role and search token

Note: translate token into your language, for example jeton in french

and select Service Account Token Creator

click on Continue and click Done

DownLoad credentials

Go back again to Credentials

Select EXT-SmartHome account in Service Account section

Select KEYS

Click on ADD KEY and select Create new key

CREATE the key in JSON format

The file will be generated and the download will start automatically

Copy credentials to EXT-SmartHome

Rename the downloaded file to smarthome.json and past it to ~/MagicMirror/modules/MMM-Bugsounet/EXTs/EXT-SmartHome folder

Let's configure the webserver for https using

Require Warning:

• You have already configured and authorized your router in order to communicate from the internet on ports 80 and 443
• MagicMirror² is NOT launched

For this sample I use demo.bugsounet.fr as sub-domaine name !

Try this prepared command:

cd ~/MagicMirror/modules/MMM-Bugsounet
npm run setup:EXT-SmartHome:SmartHome

What is your domain name?

enter your domaine name

sample: demo.bugsounet.fr and Smarthome will do everything for you

What is your domain name?
domain:  demo.bugsounet.fr
OK
 
Writing your domain name: demo.bugsounet.fr
OK
 
Your nginx server configuration will be:
server {
  listen 80;

  server_name demo.bugsounet.fr;

  location / {
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header X-Forwarded-Proto $scheme;
      proxy_set_header Host $http_host;
      proxy_set_header X-NginX-Proxy true;

      proxy_pass http://127.0.0.1:8081;
      proxy_redirect off;

      # Socket.IO Support
      proxy_http_version 1.1;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection "upgrade";
  }
}
 
Writing Bugsounet configuration file...
OK, writed in /etc/nginx/sites-available/Bugsounet
 
Delete default Symlink...
OK (Not found)
 
Create Bugsounet Symlink in /etc/nginx/sites-enabled/Bugsounet ...
OK (Already created) in /etc/nginx/sites-enabled/Bugsounet
 
Restart nginx with new configuration...
OK
 
Before you continue: Don't forget to forward ports 80 and 443 to your Pi's IP address!

Router is ready ?

You have forward ports 80 and 443 to your Pi's IP address

Let's start https certificate

Router is ready ? [Y/n] 
Your choice: y

By respond Y: you have prepared your router and installation will continue and install https certificate

Notes:

• Maybe It can ask you for information to fill in (registration to cerbot)
• If failed prepared program will inform you, in RED with the reason above !

MMM-Bugsounet and EXT-Smarthome website testing

It's now time to define an username for EXT-SmartHome

This username will be used to associate username with google token. You can set whatever you want as username. BUT Once defined you can't change it (otherwise you can no longer identify yourself to the Google service).

Let's finish to configure EXT-SmartHome in config.js file of MagicMirror² configuration.

{
  module: "MMM-Bugsounet/EXTs/EXT-SmartHome",
  config: {
    username: "myprefered_username_for_Google",
    password: "My Password defined in Google Action",
    CLIENT_ID: "My Client ID defined in Google Action"
  }
},

It's time to Start MagicMirror²

So ... start MagicMirror and wait all is initialized !

At this moment, Don't worry about MMM-Bugsounet Alert ([RequestSync] Error: 404)

Verify link of EXT-Website and SmartHome

For this sample, I have used demo.bugsounet.fr as sample domain name

Naturally change demo.bugsounet.fr by your own !

Try to open MMM-Bugsounet with your domain name

https://demo.bugsounet.fr

You must have MMM-Bugsounet login page

Try to open EXT-SmartHome test page with your domain name

https://demo.bugsounet.fr/smarthome

You must discover SmartHome test page

Yeah, You have now access to MMM-Bugsounet everywhere in the world !

Make a link with Google Home app

When your Google Home Project is created, Maybe you have to wait ~1 hour before app can works.

So, If Google display rehash error, don't panic and retry later !

Some screenshot are in French language (I can't change in other language sorry), so Refer to icons

Open Google Home app from your Phone

Open Devices

Add Device

This device works with Google

Search EXT-SmartHome and click on [test] EXT-Smarthome (with your defined icon)

Enter your EXT-SmartHome username and password

Device is now added

Discover your Magic Mirror remote App !

How use it

From device page

Using EXT-Screen

A short press on Magic Mirror app: will force to turn on or off your screen

Using EXT-Volume

A slide left/right on Magic Mirror app: will control the volume of your speaker

Long press on MagicMirror app

• That will open all functionalities.
• It's depend of used plugins and compatibilities.

Plugins compatibilities List:

• EXT-Screen
• EXT-Volume
• EXT-Spotify
• EXT-FreeboxTV
• EXT-Pages
• EXT-RadioPlayer

EXT-Volume

Control your volume and Mute/unMute speaker

EXT-Screen

Allows to Turn ON / OFF your screen

When you force turn OFF:

EXT-Screen is not able to wake up it with a pir sensor!

In reverse, when you turn ON your screen:

EXT-Screen will works

EXT-Spotify

You can control:

• Play
• Pause
• Previous
• Next

EXT-FreeboxTV

All TV Channels are available on sources.

The Channel name start with TV

EXT-RadioPlayer

All Radio are available on sources.

The Radio name start with Radio

EXT-Pages

You can control EXT-Pages with Channel + and Channel -

Other command on Sources

• Stop: will stop all plugins

• Restart MagicMirror²
• Close MagicMirror²
• Reboot System
• Shutdown System