Skip to content

A module for the MagicMirror, to display informations about the currently playing songs on your Sonos system.

License

Notifications You must be signed in to change notification settings

jorgenwahlberg/MMM-Sonos

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

81 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

code climate API License

The NPM module "Request" was removed with Magicmirror v2.16 This has led to the fact that Magicmirror can no longer be started under Docker, for example. With this fork, the deprecated npm module "Request" is installed locally in the module's directory.

MMM-Sonos

MagicMirror-Sonos-Module

This is an adaption and modification of of Vaggan's MagicMirror-SonosModule and CFenner's MagicMirror-SonosModule. It was modified to get some enhancements in visualisation an configuration. Also the module hides itself when not playing now.

Note from Snille: I'm new to the MagicMirror world and Node.js, this is my first attempt to modify a module. There are probably lot's of things that could have been done better. :)

When starting the Mirror:

Sonos Module Loading

Module on the Left side of the Mirror:

Sonos Module Left

Module in the Center of the Mirror:

Sonos Module Center

Module in the Center of the Mirror playing in 3 different zones:

Sonos Module Center

Module on the Right side of the Mirror:

Sonos Module Right

This is my own mirrors view (Top Center) using some addition in the custom.css see below

Sonos Module Custom CSS

Usage

Prerequisites

Installation

In your terminal, go to your MagicMirror's Module folder:

cd ~/MagicMirror/modules

Clone this repository:

git clone https://github.com/theskyisthelimit/MMM-Sonos.git

Install Node-Modules

npm init

&

npm install request

Add some config entries to your config.js file. After that the content will be added to your mirror.

Configuration

To run the module properly, you need to add the following data to your config.js file.

{
	module: 'MMM-Sonos',
	header: "Playing on SONOS",
	position: "top_center", // This can be any of the regions, best results in center regions
	classes: "default everyone",
	config: {
		// See 'Configuration options' for more information.
	}
}

Here are the configuration options to configure the module.

Option Description
showStoppedRoom Trigger the visualization of stopped rooms.

Default value: true
showAlbumArt Trigger the visualization of the album art.

Default value: true
showRoomName Trigger the visualization of the room name.

Default value: true
preRoomText Text to be displayed before the zone name.

Default value: Zone:
preArtistText Text to be displayed before the artist name.

Default value: Artist:
preTrackText Text to be displayed before the track name.

Default value: Track:
preTypeText Text to be displayed before the source name.

Default value: Source:
animationSpeed Lenght of the fade animation.

Default value: 1000
updateInterval Update interval.

Default value: 0.5
apiBase http link to the SONOS API.

Default value: http://localhost'
apiPort SONOS API port.

Default value: 5005
apiEndpoint Link to the "zones" information on the SONOS API.

Default value: zones
exclude Zones names to exclude ["Secret-Room","Greenhouse"].

Default value: []

Custom-CSS

Here is my CSS settings for the module that I have added to my custom.css to give it the exta special look. :)

/* Sonos --------------------------------------------*/
.sonos ul .type {
    font-size: 12px;
	padding: 0px 0px;
	line-height: 12px;
	width: 260px;
}
.sonos ul .room {
    font-size: 16px;
	padding: 0px 0px;
	line-height: 16px;
	width: 260px;
}
.sonos ul .song {
	padding: 0px 0px;
	position: relative;
}
.sonos ul .art img {
    height: 60px;
    width: 60px;
	border-radius: 50%;
	margin: 0px 0px;
	border: 2px solid #FFF;
}
.sonos ul .name {
    width: 200px;
    font-size: 16px;
	padding: 0px 4px;
	line-height: 16px;
}
/*****************************************************/

Known Issues

The module may not be able to access the data of the sonos API due to a Cross-Origin Resource Sharing (CORS) issue. This could be solved by adding the following lines to the sonos-http-api.js just before res.write(new Buffer(jsonResponse)); in the sonos api. Remember to restart the service after the change.

  res.setHeader("Access-Control-Allow-Origin", "http://localhost");
  res.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");

How to Install Sonos-API

To install the Sonos-API just clone the repository to your PI.

git clone https://github.com/jishi/node-sonos-http-api.git

Navigate to the new node-sonos-http-api folder and install the node dependencies.

cd node-sonos-http-api && npm install --production

Now you can run the service with:

npm start

I really recommend to use PM2 like it is described on the MagicMirror Wiki page.

cd ~/Sonos
npm start

About

A module for the MagicMirror, to display informations about the currently playing songs on your Sonos system.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 90.9%
  • CSS 9.1%