SidBerry2 – enhanced Raspberry Pi 6581 SID player

I post here the great work of Davide aka Thoroide (thoroide@gmail.com). He took my Raspberry Pi SID player project and enhanced it creating SidBerry2. It features a new power stage, a better audio output stage and much more:

Here the original post:

Time ago, I recovered a 6581 SID chip from a dead C64, and then I wondered if you could connect it to an Arduino or RaspberryPi.

I have done several researches, finding various projects, most of them abandoned. Having a Raspberry card on which I was doing other work, I chose the SIDBerry project by Gianluca Ghettini
That seemed the easiest.

First of all I have slightly changed the hardware part. The original hardware was pretty basic, although perfectly functional.
To do this, I got a similar project schematic created for Arduino platform called RealShield https://github.com/atbrask/RealSIDShieldand I took some parts in order to design a more powerful version of SidBerry.

First I got a component to generate +12V from 5V (MC34063A) of which you can see the functional diagram taken from the datasheet. Starting from this schematic a proper component value were calculated in order to obtain an increase of the voltage. The original circuit generates the +12V only using MC34063A, but this require some precision resistors on feedback, so I preferred to generate an higher voltage (+ 18V / + 20V) and then using an linear regulator 78L12 to be sure that the 12V was accurate. This to avoid the premature dead of MOS6581 chips, that can burn easily if the voltages are not accurate.

image001

If you don’t like to make a Step-Up with spare components, you can easily buy an already done DC/DC like http://uk.rs-online.com/web/p/isolated-dc-dc-converters/6895015/

image003

The second modification is about the audio output stage, creating one very similar to the original C64. In RealSIDShield, the network is a bit more complex, but the stage is a simple transistor amplifier.

image005

For all remaining digital connections i use the SIDBerry original schematic.

Software

For software part I done a step by step guide to make a working SIDBerry code, starting with a clean jassie image and a RaspberryPi 3.

I started with a clean image, jessie, in particular mine was the 2016-09-23-raspbiam-jessie.zip downloaded directly from the official source.

I followed this guide for a complete update of the fresh installation. https://www.raspberrypi.org/blog/introducing-pixel/

Next configure a static IP for easily remote connect the RPI, editing the file dhcpcd.conf
sudo nano /etc/dhcpcd.conf and added at the end these following lines:


interface eth0
static ip_address=[your preferred fixed IP]/24
static routers=[your preferred gateway]
static domain_name_servers=[your preferred DNS1][your preferred DNS2]

Then I activate a VNC server to easily remote control the raspberryPi using a following commands:


sudo apt-get install -y realvnc-vnc-server
sudo vncinitconfig -service-daemon
sudo systemctl enable vncserver-x11-serviced.service

then configure from desktop (clicking on the tray VNC icon) the preferred authentication method for access on your PI via VNC.
These steps are optional, if you prefer can use an HDMI monitor with keyboard/mouse or SSH connection.

Next you need to install a WiringPi library, to make C++ program able to control I/O resources. Use the following commands:


sudo apt-get install git-core
sudo git clone git://git.drogon.net/wiringPi
cd wiringPi
sudo ./build

If you have problems with wiringPi see this link: http://wiringpi.com/download-and-install/

So next you need to get the SIDberry sources:

Return to home dir (cd ..)


sudo git clone https://github.com/gianlucag/SidBerry
cd SidBerry

Take ownership of all files


sudo chown pi:root *

Now edit with your preferred editor the file main.cpp to fix 2 little problems:


1) add #include <unistd.h> after the line #include <sys/time.h>
2) search for \mread and replace with \nread

Now compile the sources to obtain the working executable


sudo g++ -o SidBerry mos6502.cpp SidFile.cpp main.cpp -lwiringPi

Now you can test your work using this command


sudo ./SidBerry R-Type.sid 0

where 0 is the song index of the SID file.
Each SID file my contain various song or variations that you can play changing the index.

If you like to know something more about SID file format, follow this link:
http://cpansearch.perl.org/src/LALA/Audio-SID-3.11/SID_file_format.txt

qnjvo2

Fitted protoboard on PI

image010

image011

image014

You can see a video of operating hardware here:

Next?

I don’t know when, but I would try to generate a 1Mhz clock for the SID using a PI internal timer, also can be interesting make a python GUI for the SIDBerry.

Also, but a little harder, try to change the 6502 player to allow to play a SID format that includes samples, in fact this player, actually was unable to play many famous SID+PCM song that include digitized instruments or voices. When you try to play this there are a SID format error. There are not a official documentation for this mode, and probably is not really standard.

screen-shot-2016-10-15-at-2-09-12-pm

Creare mappe personalizzate con Google Maps

Google Maps è uno strumento ormai indispensabile per comunicare efficacemente posti e percorsi. Una attività (ad esempio un ristorante) che voglia indicare agli utenti la propria posizione può avvalersi di queste mappe includendole nel proprio sito web. Mappe statiche, immagini, o peggio ancora semplici indicazioni testuali non sono proprio più ammesse!
Gli utenti si aspettano di trovare Google Maps e tutto quello che ne deriva ossia la possibilità di condividere il luogo, esplorare i dintorni e calcolare distanze e percorsi.

Inserire una mappa Google Maps sul proprio sito web è abbastanza semplice ma l’effetto non sempre è quello desiderato: la mappa di default è ok, indica certamente la posizione, ma i colori potrebbero non essere nello stile complessivo del sito, magari vorremmo togliere informazioni superflue quali nomi di altri posti non attinenti al contesto, nomi dei parchi, in generale semplificare la mappa e focalizzare l’attenzione su quello che vogliamo indicare.

Utilizzando le Google Maps API v3 è possibile personalizzare la mappa come più si desidera, integrandola con lo stile complessivo del sito. Ad esempio è possibile:

  • cambiare tonalità di colore
  • cambiare immagine degli indicatori
  • disegnare contorni, cerchi, rettangoli solidi e trasparenti
  • mostrare popup o altre informazioni al click di preciso luogo sulla mappa

Ecco alcuni esempi:

biz

maps1

Creazione del layout base

Innanzitutto occorre procurarsi una API Key direttamente dal Google Developer center. La chiave ci permetterà di accedere alle funzionalità extra.

Creiamo una pagina HTML di esempio ed includiamo le Google Map API direttamente nell’head. In più creiamo un div contenente la nostra mappa, larghezza e altezza fluida (100%):

<html>
<head>
<script src="https://maps.googleapis.com/maps/api/js?key=APIKEY&callback=myMap"></script>
</head>
<body>
   <div id="maptest" style="width:100%;height:100%;"></div>
</body>
</html>

La pagina non mostra ancora alcuna mappa, dobbiamo crearla associando al div il codice Javascript opportuno. Definiamo per ora il minimo indispensabile ossia posizione (latitudine e longitudine) e livello di zoom:

<html>
<head>
<script src="https://maps.googleapis.com/maps/api/js?key=APIKEY&callback=myMap"></script>
</head>
<body>
   <div id="maptest" style="width:100%;height:100%;"></div>
   <script>						
      var mapOptions = {
	 scrollwheel: false,
	 zoom: 12,
         center: new google.maps.LatLng(43.769562, 11.255814)
      };
		
      var map = new google.maps.Map(
          document.getElementById('maptest'),
          mapOptions
      );
   </script>
</body>
</html>

Risultato:

screen-shot-2016-10-09-at-4-33-46-pm

Che è esattamente quello che al massimo possiamo ottenere con le opzioni standard. Vediamo ora di cambiare tonalità di colore alla mappa, ad esempio portarla sul blu (tonalità #103050 e livello di saturazione 20):

      var styleArray = [{
	featureType: "all",
	stylers: [{ "saturation": 20 },{ "hue": "#103050" }]
      }];					
			
      var mapOptions = {
	scrollwheel: false,
	zoom: 12,
	center: new google.maps.LatLng(43.769562, 11.255814),
	styles: styleArray
      };

      var map = new google.maps.Map(
          document.getElementById('maptest'),
          mapOptions
      );

Risultato:

screen-shot-2016-10-09-at-4-38-35-pm

Aggiungere segnaposto (markers)

Possiamo ora aggiungere uno o più segnaposto sulla mappa, è sufficiente creare quanti oggetti marker desideriamo, specificarne latitudine e longitudine e passarli alla mappa:

      var styleArray = [{
	featureType: "all",
	stylers: [{ "saturation": 20 },{ "hue": "#103050" }]
      }];					
			
      var mapOptions = {
	scrollwheel: false,
	zoom: 12,
	center: new google.maps.LatLng(43.769562, 11.255814),
	styles: styleArray
      };

      var map = new google.maps.Map(
          document.getElementById('maptest'),
          mapOptions
      );

      // markers

      var marker1 = new google.maps.Marker({
         map: map, 
  	     position: new google.maps.LatLng(43.769562, 11.265814)
      });

      var marker2 = new google.maps.Marker({
         map: map, 
  	     position: new google.maps.LatLng(43.769662, 11.356814)
      });
      
      var marker3 = new google.maps.Marker({
         map: map, 
  	     position: new google.maps.LatLng(43.799362, 11.283814)
      });

Risultato:

screen-shot-2016-10-09-at-4-52-19-pm

Cambiare immagine ai markers

L’icona del marker di default è noiosa. Possiamo utilizzare altre icone o immagini, basta specificare il percorso url alla png o jpeg. Una immagine personalizzata permette ad esempio di creare marker con il logo del nostro sito web, oppure marker che rappresentano posti differenti (ristoranti, stazioni di servizio, aereoporti etc..). Da notare che ogni marker può avere una immagine differente.

      var styleArray = [{
	featureType: "all",
	stylers: [{ "saturation": 20 },{ "hue": "#103050" }]
      }];					
			
      var mapOptions = {
	scrollwheel: false,
	zoom: 12,
	center: new google.maps.LatLng(43.769562, 11.255814),
	styles: styleArray
      };

      var map = new google.maps.Map(
          document.getElementById('maptest'),
          mapOptions
      );

      // markers

      var marker1 = new google.maps.Marker({
         map: map, 
  	     position: new google.maps.LatLng(43.769562, 11.265814),
             icon: 'http://www.gianlucaghettini.net/wp-content/uploads/2016/10/pin.png'
      });

      var marker2 = new google.maps.Marker({
         map: map, 
  	     position: new google.maps.LatLng(43.769662, 11.356814),
             icon: 'http://www.gianlucaghettini.net/wp-content/uploads/2016/10/pin.png'
      });
      
      var marker3 = new google.maps.Marker({
         map: map, 
  	     position: new google.maps.LatLng(43.799362, 11.283814),
             icon: 'http://www.gianlucaghettini.net/wp-content/uploads/2016/10/pin.png'
      });

Risultato:

screen-shot-2016-10-15-at-2-14-50-pm

Associare eventi al click di un marker

Possiamo associare un particolare evento quando l’utente clicca su un marker, ad esempio mostrare un popup informativo oppure cambiare pagina o qualsiasi altra cosa. E’ sufficiente aggiungere l’evento al marker tramite la funziona addListener()

      var styleArray = [{
	featureType: "all",
	stylers: [{ "saturation": 20 },{ "hue": "#103050" }]
      }];					
			
      var mapOptions = {
	scrollwheel: false,
	zoom: 12,
	center: new google.maps.LatLng(43.769562, 11.255814),
	styles: styleArray
      };

      var map = new google.maps.Map(
          document.getElementById('maptest'),
          mapOptions
      );

      // markers

      var marker1 = new google.maps.Marker({
         map: map, 
  	     position: new google.maps.LatLng(43.769562, 11.265814),
             icon: 'http://www.gianlucaghettini.net/wp-content/uploads/2016/10/pin.png'
      });

      var marker2 = new google.maps.Marker({
         map: map, 
  	     position: new google.maps.LatLng(43.769662, 11.356814),
             icon: 'http://www.gianlucaghettini.net/wp-content/uploads/2016/10/pin.png'
      });
      
      var marker3 = new google.maps.Marker({
         map: map, 
  	     position: new google.maps.LatLng(43.799362, 11.283814),
             icon: 'http://www.gianlucaghettini.net/wp-content/uploads/2016/10/pin.png'
      });

      // evento

      marker3.addListener('click', function() {
    	alert('ok');
      });

Cliccando sul marker 3 comparirà un semplice popup.

Disegnare forme geometriche sulla mappa

Oltre ai marker è possibile aggiungere forme geometriche quali cerchi, rettangoli e poligoni. In particolare i cerchi sono molto utili quando occorre indicare il raggio massimo di azione di qualcosa o qualcuno (consegne a domicilio? antenna trasmettitore GSM?).
Per un cerchio occorre specificare colore, raggio (in metri) e il marker da associare al cerchio (il marker identifica il centro). Nel nostro caso associamo il cerchio al marker numero 1, impostiamo il raggio a 5km e colore #ffff000.

      var styleArray = [{
	featureType: "all",
	stylers: [{ "saturation": 20 },{ "hue": "#103050" }]
      }];					
			
      var mapOptions = {
	scrollwheel: false,
	zoom: 12,
	center: new google.maps.LatLng(43.769562, 11.255814),
	styles: styleArray
      };

      var map = new google.maps.Map(
          document.getElementById('maptest'),
          mapOptions
      );

      // markers

      var marker1 = new google.maps.Marker({
         map: map, 
  	     position: new google.maps.LatLng(43.769562, 11.265814),
             icon: 'http://www.gianlucaghettini.net/wp-content/uploads/2016/10/pin.png'
      });

      var marker2 = new google.maps.Marker({
         map: map, 
  	     position: new google.maps.LatLng(43.769662, 11.356814),
             icon: 'http://www.gianlucaghettini.net/wp-content/uploads/2016/10/pin.png'
      });
      
      var marker3 = new google.maps.Marker({
         map: map, 
  	     position: new google.maps.LatLng(43.799362, 11.283814),
             icon: 'http://www.gianlucaghettini.net/wp-content/uploads/2016/10/pin.png'
      });

      // evento

      marker3.addListener('click', function() {
    	 alert('ok');
      });

      // cerchio

      var circle = new google.maps.Circle({
	 map: map,
         radius: 5000,
  	 fillColor: '#ffff00',
  	 strokeWeight: 0,
      });
		
      circle.bindTo('center', marker1, 'position');  

Risultato:

Il marker 1 identifica il centro del cerchio. Incidentalmente il marker 2 è stato incluso nel cerchio perchè si trova a meno di 5km dal marker 1.

screen-shot-2016-10-15-at-2-09-12-pm

Rimuovere elementi superflui

Di default la mappa contiene molti elementi quali nomi di strade, posti, attività commerciali, nomi di parchi, fiumi etc.. E’ possibile rimuovere selettivamente questi elementi specificandoli nell’oggetto di stile e impostando la visiblità ad OFF. Ad esempio questo è il codice, per rimuovere nomi di attività commerciali, punti di interesse, fiumi, laghi e strade:

  var styleArray = [
   {
	featureType: "all",
	stylers: [{ "saturation": 20 },{ "hue": "#123456" }]
   },
   {
         featureType: "administrative",
         elementType: "labels",
         stylers: [
           { visibility: "off" }
         ]
       },{
         featureType: "poi",
         elementType: "labels",
         stylers: [
           { visibility: "off" }
         ]
       },{
         featureType: "water",
         elementType: "labels",
         stylers: [
           { visibility: "off" }
         ]
       },{
         featureType: "road",
         elementType: "labels",
         stylers: [
           { visibility: "off" }
         ]
       }
];

Risultato:

screen-shot-2016-10-15-at-2-08-47-pm

Disegnare percorsi sulla mappa

E’ possibile passare alla mappa un serie di punti geografici (latitudine, longitudine) e realizzare cosi’ un tracciato arbitrario. Va specificato anche il colore, lo spessore della traccia e opacità:

        var pathCoords = [
          {lat: 43.769562, lng: 11.265814},
          {lat: 43.769362, lng: 11.303814},
          {lat: 43.729362, lng: 11.253814},
          {lat: 43.739362, lng: 11.223814},
          {lat: 43.749362, lng: 11.203814},
          {lat: 43.759362, lng: 11.273814},
          {lat: 43.769362, lng: 11.243814},
          {lat: 43.799362, lng: 11.283814},
        ];
        var path = new google.maps.Polyline({
          path: pathCoords,
          geodesic: true,
          strokeColor: '#FF0000',
          strokeOpacity: 1.0,
          strokeWeight: 2
        });

        path.setMap(map);

Risultato:

screen-shot-2016-10-15-at-2-41-35-pm

Oltre a cerchi e linee è possibile disegnare qualsiasi altra forma geometrica, aggiungere immagini e marcare bordi. Il sito ufficiale include tutorial ed esempi per trasformare e adattare le mappe in qualsiasi modo possibile!

Vedi la DEMO

Vuoi personalizzare una o più mappe Google Maps per integrarla al meglio nel tuo sito internet? Fammi sapere nei commenti oppure contattami!