Audino - Arduino MP3-Player (2) - Das Entwicklungsbrett

Bevor es nun richtig losgeht, nehme ich das Entwicklungsbrett "in Betrieb". Es beinhaltet ein selbstklebendes Steckbrett, das auf das Entwicklungsbrett aufgebracht werden kann, Metallschrauben, Plastik-Abstandsbolzen und Plastik-Muttern zum Fixieren des Arduino-Boards. Weiterhin können Gummifüsse auf die Unterseite des Entwicklungsbretts geklebt werden.

Die Schrauben können durch die Rückseite des Entwicklungsbretts gesteckt werden. Die Abstandsbolzen können dann in diese reingeschraubt werden. Da das Entwicklungsbrett nicht nur für das Arduino UNO Board verwendet werden kann, sind weitere Vorbohrungen vorhanden, sodass hier darauf geachtet werden muss, dass die richtigen Vorbohrungen verwendet werden.

Das Arduino-Board kann nun auf die Abstandsbolzen aufgesteckt und mit den Muttern befestigt werden.

Das Draufschrauben der Muttern klappt an drei Stellen. An der vierten Stelle kann die Mutter nicht angebracht werden, da die Bohrung sich zu dicht an einem Header befindet. Die Fixierung über die übrigen drei Muttern sollte aber ausreichend sein.

Als letztes kann noch das selbstklebende Steckbrett aufgebracht werden.

Jetzt sind wir gewappnet und können als nächstes richtig loslegen und das Arduino-Board in Betrieb nehmen.

Weitere Blogeinträge

1. Auswahl der Komponenten
2. Das Entwicklungsbrett
3. Das erste Einschalten
4. Die Entwicklungsumgebung
5. Knöpfe (digital)
6. Mehrere Knöpfe (digital)
7. Mehrere Knöpfe (analog)
8. Potentiometer
9. Das MP3 Shield
10. Auswahl der Komponenten 2
11. Auswahl der Komponenten (Zusammenfassung) 
12. Punkt-Streifenrasterplatine und Knöpfe
13. Punkt-Streifenrasterplatine und weitere Komponenten
14. Das Gehäuse
15. Sketch 1 (setup-Methode)
16. Sketch 2 (loop-Methode)
17. Sketch 3 (Der komplette Code)
18. PC-Software

Audino - Arduino MP3-Player (1) - Auswahl der Komponenten

Es wird Zeit sich ein bisschen mit Arduino zu beschäftigen. Und was braucht man als erstes? Klar, ein Projekt!

Man findet sicherlich viele Ideen und Anregungen, wenn man ein bisschen nach Arduino im Netz sucht. Vielleicht findet man ein Beispiel-Projekt, das einem so gut gefällt, dass man es direkt als Vorlage für das eigene Projekt verwenden will. Oder man hat schon eine Idee und sucht sich entsprechende Informationen, Tipps und Komponenten zusammen.

Meine Idee ist es einen MP3-Player zu bauen. Dies ist bestimmt nicht die originellste Idee, aber es ist etwas was ich gebrauchen kann. Und ich möchte nicht einen einfachen MP3-Player bauen, sondern einen mit ein paar Knöpfen, hinter denen Lieder oder Playlisten hinterlegt werden können. In Prinzip schwebt mir sowas vor wie der Hörbert. Für den Nachbau des Hörberts sind folgende Links interessant: https://groups.google.com/d/msg/qlocktwo/C3vUD9SUbPE/_Vm-T705y4kJ und https://groups.google.com/d/msg/qlocktwo/C3vUD9SUbPE/jl5W-2LnbL0J.

Nachdem nun das erster Hindernis genommen ist, kommen wir zum nächsten: Die Komponenten. Ich habe lange herumgesucht, um herauszufinden welche Teile ich benötige (und ganz sicher bin ich mir immer noch nicht). Schließlich aber habe ich mich für einige Komponenten entschieden mit denen ich jetzt erstmal starten werde.

Die erste Komponente ist natürlich ein Arduino-Board. Hierbei habe ich mich für das gängige Arduino UNO R3 entschieden.

Für die ersten Schritte, um mal was auszuprobieren, ist ein Entwicklungsbrett mit einem Steckbrett genau das Richtige.

Das Steckbrett alleine taugt nicht viel, daher: Jede Menge Kabel (M/M und M/F).

Je nach Versuchsaufbau wird auch der ein oder andere Widerstand benötigt.

Damit wären die grundlegenden Komponenten festgelegt. Diese werden eigentlich in jedem Arduino-Projekt benötigt. Etwas spezifischer sind die Knöpfe, die ich benötige, um zu einem Lied oder einer Playlist zu wechseln. Allerdings sind diese hier recht klein, sodass ich später noch andere bestellen werde müssen. Für den Anfang sind diese wohl aber in Ordnung.

Für die kabellose Stromversorgung kann ein Batteriehalter verwendet werden, der direkt in die Buchse der externen Stromversorgung gesteckt werden kann. Es werden 6xAA verwendet. Leider hat dieses Modell keinen Schalter um die Stromversorgung zu unterbrechen.

Zum Ein- und Ausschalten eignet sich ein Kippschalter. Dieser hier ist leider etwas schwergängig.

Für die Regelung der Lautstärke werde ich einen 10k Potentiometer verwenden. Dieser ist keine Schönheit und dreht sich auch nicht sehr leicht. Leider war mein Wunsch-Potentiometer nicht lieferbar.

Damit auch etwas zu hören ist, wird ein Lausprecher benötigt. Dieser 8Ohm 1Watt Lautsprecher hat ein Durchmesser von 7,8cm (3'').

Um MP3s auf dem Arduino wiedergeben zu können, wird ein MP3 Shield mit integriertem SD-Card-Schacht verwendet. Bei diesem Shield handelt es sich um das Adafruit "Music Maker" MP3 Shield for Arduino w/3W Stereo Amp.

Alternativen zu diesm MP3-Shield sind das SparkFun MP3 Player Shield (eveentuell in Kombination mit dem Mono Audio Amp Breakout) oder das ELV Audio Shield für Arduino, ASA1, Komplettbausatz.
Um das Arduino-Board mit dem PC zu verbinden wird noch ein USB-Kabel und zum Aufspielen der MP3s eine Micro-SD-Karte benötigt.

Damit ist unsere Einkaufliste fürs erste fertig. Damit der Bestellvorgang nicht zu aufwendig wird, habe ich alle Komponenten in einem Web-Shop bestellt. EXP Tech hat ein Sortiment, das sehr groß ist und es werden Produkte aller namhaften Hersteller geführt. Weiterhin waren die Preise im Vergleich zu manch anderem Web-Shop oft günstiger. Allerdings war der persönliche Kontakt mangelhaft. Eine Anfrage zur Verfügbarkeit einiger Komponenten blieb unbeantwortet. Für die eine oder andere Komponente wäre auch TinkerSoup eine Alternative.

Hier nochmal die Einkaufsliste im Überblick:

Komponente	Preis
Arduino UNO R3	23,80€
Prototyping and Development Board	5,95€
Jumper Wires Premium 150mm M/F Pack of 10	1,79€
75 Stück Breadboard Jumper Wires Patchkabel mit M/M Stecker	3,50€
Resistor Kit - 1/4W (500 total)	7,90€
Tact Button (10 Stück)	1,50€
6xAA Battery Holder with DC2.1 Power Jack	2,80€
Kippschalter	1,58€
Potenziometer 20mm 10k	1,98€
Lautsprecher - 7,8cm (3") Durchmesser - 8Ohm 1Watt	1,95€
Adafruit "Music Maker" MP3 Shield for Arduino w/3W Stereo Amp	33,27€
USB Kabel 2.0 A-Stecker auf B-Stecker 1.8m	1,20€
4GB Micro-SDHC-Karte	8,00€
Summe	95,22€

Als nächstes werde ich mir das Entwicklungsbrett genauer anschauen.

Weitere Blogeinträge

1. Auswahl der Komponenten
2. Das Entwicklungsbrett
3. Das erste Einschalten
4. Die Entwicklungsumgebung
5. Knöpfe (digital)
6. Mehrere Knöpfe (digital)
7. Mehrere Knöpfe (analog)
8. Potentiometer
9. Das MP3 Shield
10. Auswahl der Komponenten 2
11. Auswahl der Komponenten (Zusammenfassung) 
12. Punkt-Streifenrasterplatine und Knöpfe
13. Punkt-Streifenrasterplatine und weitere Komponenten
14. Das Gehäuse
15. Sketch 1 (setup-Methode)
16. Sketch 2 (loop-Methode)
17. Sketch 3 (Der komplette Code)
18. PC-Software

WPF and MVVM - Events

Last time we have seen how to use RelayCommand in ViewModel instead of a click event in View. But what's about all the other events? There is an easy solution where RelayCommand can be used. Therefore we need to add a Reference to the Extension Assembly System.Windows.Interactivity from Blend SDK (for VS2013).

In the XAML part of the View we need to add the namespace that leads to System.Windows.Interactivity from Blend SDK (for VS2013).

<UserControl x:Class="MvvmPassword.LoginView"
             x:Name="This"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity">

Now we can use i:EventTrigger with the property EventName within Interaction.Triggers to define which event should linked to Command. The Command is defined with the property Command within i:InvokeCommandAction.

        <ComboBox x:Name="UserNames"
                  Grid.Row="1"
                  Grid.Column="1"
                  Margin="4"
                  ItemsSource="{Binding UserNames}"
                  DisplayMemberPath="UserName">
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="SelectionChanged">
                    <i:InvokeCommandAction Command="{Binding SelectionCommand}" />
                </i:EventTrigger>
            </i:Interaction.Triggers>
        </ComboBox>

Next we can just use the RelayCommand in ViewModel, as seen in the last post.

SelectionCommand = new RelayCommand(SelectionChanged);

public ICommand SelectionCommand
{
    get;
    private set;
}

private void SelectionChanged(object parameter)
{
    // ...
}

With the ViewModelBase class, the RelayCommand and the EventTrigger our small MVVM Framework can be taken as a good starting point.

Further Posts

1. WPF and MVVM - Fundamentals
2. WPF and MVVM - Commands
3. WPF and MVVM - Events

WPF and MVVM - Commands

To extend the MVVM idea, it is necessary to move more code from code-behind of the View to the ViewModel. In the first part we have seen how the properties from the ViewModel can be binded to the View and how changes can be notified.

Now we will see how to move click event handler from code-behind of the View to the ViewModel. Therefore the Command property in XAML of the View is used instead of the click event. The property is set to an instance of an implementation of ICommand. For that we want to have a reusable implementation. One way is to use the DelegateCommand that is also used in the Prism Class Library, the usage is described here. But we want to focus on the simpler implementation of RelayCommand. The RelayCommand builds on WPF Commanding.

public class RelayCommand : ICommand
{
    private readonly Action<object> _Execute;
    private readonly Func<object, bool> _CanExecute;
 
    public RelayCommand(Action<object> execute)
        : this(execute, null)
    {
 
    }
 
    public RelayCommand(Action<object> execute, Func<object, bool> canExecute)
    {
        if (execute == null)
        {
            throw new ArgumentNullException("execute", "Execute cannot be null.");
        }
 
        _Execute = execute;
        _CanExecute = canExecute;
    }
 
    public event EventHandler CanExecuteChanged
    {
        add { CommandManager.RequerySuggested += value; }
        remove { CommandManager.RequerySuggested -= value; }
    }
 
    public void Execute(object parameter)
    {
        _Execute(parameter);
    }
 
    public bool CanExecute(object parameter)
    {
        if (_CanExecute == null)
        {
            return true;
        }
 
        return _CanExecute(parameter);
    }
}

The RelayCommand implements the interface ICommand. Therefore we have to implement the methods Execute and CanExecute. These methods call other methods that you have passed as Action and Func generic delegate to the constructor of the RelayCommand class. Furthermore we have to implement the CanExecuteChanged event. Execute can only be called if CanExecute returns true. If CanExecute depends on one or more properties, then on each change of one of these properties CanExecuteChanged have to be fired so that CanExecute is checked again. To simplify and to automate firing the event, the event is hooked to the static RequerySuggested event of the CommandManager. Doing so the CanExecuteChanged event is called after each action in the UI. In some cases you want to call the CanExecuteChanged event manually (such as CanExecute doesn't depends only on UI properties). Therefore the event hook can be removed and a method is added that can be called manually.

public event EventHandler CanExecuteChanged;
public void OnCanExecuteChanged()
{
    if (CanExecuteChanged != null)
    {
        CanExecuteChanged(this, new EventArgs());
    }
}

Using the RelayCommand we can move click event handler to the ViewModel. Therefore we add a property whose type is of ICommand.

public ICommand LoginCommand
{
    get;
    private set;
}

The ICommand will be instantiated in the constructor.

LoginCommand = new RelayCommand(Login, CanLogin);

The Execute method of the RelayCommand will call Login.

private void Login(object parameter)
{
    var passwordContainer = parameter as IHavePassword;
    if (passwordContainer != null)
    {
        var secureString = passwordContainer.Password;
        PasswordInVM = ConvertToUnsecureString(secureString);
    }
}

While the CanExecute method of the RelayCommand will call CanLogin.

private bool CanLogin(object parameter)
{
    return !string.IsNullOrEmpty(UserName);
}

At last we need only to add the right Command by binding to the View. We can also pass through a parameter by using CommandParameter. The parameter is set to both methods, Execute and CanExecute.

<Button x:Name="Login"
        Content="Login"
        Command="{Binding LoginCommand}"
        CommandParameter="{Binding ElementName=This}" />

With the RelayCommand class we have our second component of our own MVVM-Framework.

Further Posts

1. WPF and MVVM - Fundamentals
2. WPF and MVVM - Commands
3. WPF and MVVM - Events