• Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
MagicMirror Forum
  • Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
A New Chapter for MagicMirror: The Community Takes the Lead
Read the statement by Michael Teeuw here.

Spotify

Scheduled Pinned Locked Moved General Discussion
4 Posts 3 Posters 8.7k Views 4 Watching
Loading More Posts
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • T Offline
    Tomekkkkk
    last edited by KirAsh4 May 26, 2016, 6:22 PM May 26, 2016, 6:08 PM

    Moin moin!

    Now I have managed to finally integrate the spotify connect server . Although is probably not an elegant solution but hey , it works… I used an iframe therefore. I can control this with the normal Spotify App

    Bild Text

    First of all is to install the Spotify Server. I used this tutorial: http://www.forum-raspberrypi.de/Thread-tutorial-spotify-connect-server-headless-standalone

    I would recommend that the automatic start is delayed with 120 seconds , as otherwise the scs will launch before the magic mirror and there will no frame. When the server is running i got a new webpage running on the Raspberry with http://localhost:4000
    I tried to extract the data for the actual playing title with curl but i am not an app programmer, so i used an frame instead.

    To change the background of the SCS webpage and get it compatible to the MagicMirror i added the next to
    sudo nano ./spotify-connect-web-chroot/usr/src/app/templates/index.html

    .container{
           padding-left: 0px;
        }
    
    
    .container:after{
            background-colour: black!important;
            padding-left: 0px;
        }
    body {
        width: 450px;
        background-color: black;
        font-family:"robot";
        font-color: white;
    }
    
    .well{
        background-color: black;
        border: none
    }
    .thumbnail{
        background-color: black;
        border: none
    
    }
    .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
        font-family: "roboto";
        font-weight: 500;
        line-height: 1.1;
        color: white;
    }
    .thumbnail a>img, .thumbnail>img {
        margin-right: auto;
        margin-left: 20px;
        height: 100px;
    }
    
    
    .text-center {
        text-align: left;
    }
    
    .col-sm-6{
        padding-left: 0px;
    }
    
    p {
        margin: 0 0 10px;
        visibility: hidden;
    }
    

    And at the MagicMirror Index.html i added this:
    '<div class="region bottom left"><div class="container"><iframe width="450" height="315" src="http://localhost:4000" frameborder="0" allowfullscreen></iframe></div></div>'

    et voilà

    Maybe someone knows a better solution?

    Note from Moderator: Please use Markdown on code snippets for easier reading.

    1 Reply Last reply Reply Quote 0
    • P Offline
      paviro Admin
      last edited by May 26, 2016, 10:31 PM

      I moved this into the general discussion category since it isn’t a real module (yet?).

      We're all stories in the end. Just make it a good one, eh?

      – The Doctor

      1 Reply Last reply Reply Quote 0
      • W Offline
        Wilco89
        last edited by May 27, 2016, 7:00 AM

        This post is deleted!
        1 Reply Last reply Reply Quote 0
        • W Offline
          Wilco89
          last edited by May 27, 2016, 7:02 AM

          This post is deleted!
          1 Reply Last reply Reply Quote 0
          • 1 / 1
          1 / 1
          • First post
            1/4
            Last post
          Enjoying MagicMirror? Please consider a donation!
          MagicMirror created by Michael Teeuw.
          Forum managed by Sam, technical setup by Karsten.
          This forum is using NodeBB as its core | Contributors
          Contact | Privacy Policy