Material Design Farbpalette

Die UI Designsprache Material Design aus dem Haus Google, kommt mit unglaublichen 19 benannten Farben aus. Mehr sind nicht erlaubt. Für den Einsatz in Websites wird das Framework Material Design Lite (MDL) angeboten. Auf dessen Website finden sich als Farbpaletten Helfer der Farbfächer.

image

Damit wählt der Designer eine Primär Farbe und eine Sekundärfarbe. Die Primärfarben finden sich im äußeren Ring, die Akzentfarbe im inneren, etwas dunkleren Ring. Das Ergebnis wird exemplarisch rechts daneben dargestellt.

Die genauen Specs von Material Design erlauben abweichend davon mehrere Schattierungen innerhalb eines Farbtones. Diese sind je nach Helligkeit von 50 (hell) bis 900 (dunkel) durchnummeriert. Akzentfarben wird ein A vorgestellt.

image

Es wird empfohlen mit dem 500er Wert von hier z.B. Orange zu starten bei der Nutzung als Primärfarbe.  Der untere Bereich der Farbtabelle definiert vier Akzentfarben. Diese werden nach kontrastgesichtspunkten zur Primärfarbe gewählt. Umgesetzt auf Bild 1 sind das Indigo 500 und Orange A200. Bei der Nutzung als Statusbar soll man einen dunkleren 700er Ton ansetzen.

image

Bei der Nutzung des obigen Farbrades schlagen die  Google Developer anschließend einen Link  vor um das css einzubinden.

<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.indigo-orange.min.css" />

Das kann man mögen und auch mit dem Argument Content Delivery Network verargumentieren, allerdings weis dann Google auch von jeder Website und jedem Benutzer. Von diesen Daten lebt die Company.  Meine Empfehlung lautet, die Style Klassen manuell in ein auf dem eigenen Webserver lokal liegende CSS einzubinden.

Eine Session zum Thema finden Sie auch auf der Jquery Berlin.

Material Design Lite UX Framework

UI Designer folgen seit einigen Jahren dem Flat Ansatz. Google bringt eine neue einfach Design Sprache -Material Design- um seine Android Plattform zu gestalten. Relativ neu findet dieses Konzept auch seinen Weg ins Web. Dabei stehen von den Erfindern gleich drei Frameworks zur Verfügung: Polymer, Angular Material und jetzt neu Material Design Lite (MDL).

MDL adressiert die einfache Website und kann am ehesten als Wettbewerber zu Boostrap betrachtet werden.  Erste Web Seiten mit den Material Templates finden sich bereits in produktiver Nutzung.

image

Man erkennt die wenigen aber kräftigen Farben. Information wird in sogenannte Cards gruppiert, die sich optisch durch einen umlaufenden Schatten abheben. Google nennt das Paper Design.

Die Installation des Frameworks erfolgt per Bower oder npm über die Visual Studio 2013 Developer Command Shell.

npm install material-design-lite –save

Die wesentlichen Scripts und Styles finden sich dann im Unterverzeichnis node_modules

image_thumb

Ich halt es mit den Galliern und ignorier die wachsende Besatzung der Welt mit node.js. IIS Express ist auch gut für mich.

In der HTML Seite oder bei ASP.NET Webforms in der Masterpage, werden die Referenzen auf material.css und js gesetzt. Zusätzlich werden noch Icons benötigt, die man lokal im Webserver Verzeichnis speichern oder verlinken kann.

   1:   <link href="node_modules/material-design-lite/material.css" rel="stylesheet" />
   2:   <script src="node_modules/material-design-lite/material.js"></script>
   3:  <link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">

 

Das Seitenlayout teilt sich in ein 12 Spalten Grid, basierende auf den üblichen DIV. Alle CSS Klassen beginnen mit mdl- . Eine Seite beschreibt sich mit per   <div class="mdl-layout mdl-js-layout ">. Die Spalte über die halbe Seite mdl-cell mdl-cell--6-col.

In der Regel startet der Web Designer mit der Benutzerführung, also dem Menü. Für dieses existieren zwei Varianten, Der Hyperlink basierte Navigation Header und dem Tab Layout das per #Hash Single Page Navigation ausführt.

   1:  <header class="mdl-layout__header is-casting-shadow">
   2:      <div class="mdl-layout__header-row">
   3:          <!-- Title -->
   4:          <span class="mdl-layout-title">ppedv</span>
   5:          <!-- Add spacer, to align navigation to the right -->
   6:          <div class="mdl-layout-spacer"></div>
   7:          <div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable
   8:            mdl-textfield--floating-label mdl-textfield--align-right">
   9:              <label class="mdl-button mdl-js-button mdl-button--icon"
  10:                     for="waterfall-exp">
  11:                  <i class="material-icons">search</i>
  12:              </label>
  13:              <div class="mdl-textfield__expandable-holder">
  14:                  <input class="mdl-textfield__input" type="text" name="sample"
  15:                         id="waterfall-exp" />
  16:              </div>
  17:          </div>
  18:   
  19:          <div class="mdl-layout-spacer"></div>
  20:          <!-- Navigation. We hide it in small screens. -->
  21:          
  22:              <nav class="docs-navigation mdl-navigation">
  23:                  <a class="mdl-navigation__link " href="HtmlPage1.html">ppedv</a>
  24:                  <a class="mdl-navigation__link" href="news.html">news</a>
  25:              </nav>
  26:          
  27:      </div>
  28:  </header>

 

In diesem Beispiel wurde auch noch ein Eingabefeld (Suchfeld) im Header platziert. Dieses erweitert sich automatisch, wenn es den Fokus erhält.

image

Das Menü verhält sich bei kleineren Screenformaten nicht wie von Bootstrap responsive gewohnt. Es verschwindet ganz und übrig bleibt, die sogenannte Hamburger Schaltfläche.  Dazu muss aber ein extra Menü für kleine Bildschirmgrößen definiert werden. Dies wird als Drawer bezeichnet.

   1:  <div class="mdl-layout__drawer">
   2:      <span class="mdl-layout-title">Title</span>
   3:      <nav class="mdl-navigation">
   4:          <a class="mdl-navigation__link" href="">Link</a>
   5:          <a class="mdl-navigation__link" href="">Link</a>
   6:          <a class="mdl-navigation__link" href="">Link</a>
   7:          <a class="mdl-navigation__link" href="">Link</a>
   8:      </nav>
   9:  </div>

 

Das Drawer Menü klappt in jedem Format von Links in den sichtbaren Bereich.

image

Im nächsten Schritt werden Daten angezeigt. Dafür kommt eine HTML Tabelle zum Einsatz, die per mdl-grid und mdl-cell DIV platziert werden. Von Bootstrap oder auch Jquery mobile bekannte Badges, finden sich auch in MDL. Die class="mdl-badge" nutzt das Attribut data-badge="4” um einem Text ein optisch per Kreis markierte Infozahl zu verpassen.

Datenlisten haben oft auch die Möglichkeit, neue Datensätze zu erfassen. Der HTML Button wird dabei zu einem Kreisrunden Button mit speziellen Hover Effekten und Icon Symbolik.

   1:  <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
   2:      <i class="material-icons">add</i>
   3:  </button>

 

Natürlich gibt es auch rechteckige Buttons, die denen von Bootstrap ähneln.

image

Die Google Developer haben sich offensichtlich große Mühe gegeben auch für Screenreader (Stichwort Blinde Nutzer) korrekten HTML Code zu unterstützen.

 

   1:  <table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp">
   2:      <thead>
   3:          <tr>
   4:              <th class="mdl-data-table__cell--non-numeric">Firma</th>
   5:              <th>Ort</th>
   6:              <th>Plz</th>
   7:          </tr>
   8:      </thead>
   9:      <tbody>
  10:          <tr>
  11:              <td class="mdl-data-table__cell--non-numeric">
  12:                  <div class="mdl-badge" data-badge="4">ppedv</div>
  13:              </td>
  14:              <td>Burghausen</td>
  15:              <td>84489</td>
  16:          </tr>
  17:          <tr>
  18:              <td class="mdl-data-table__cell--non-numeric">ppedv gmbh</td>
  19:              <td>Wien</td>
  20:              <td>1150</td>
  21:          </tr>
  22:          <tr>
  23:              <td class="mdl-data-table__cell--non-numeric">Microsoft</td>
  24:              <td>Unterschleißheim</td>
  25:              <td>88885</td>
  26:          </tr>
  27:      </tbody>
  28:  </table>

Optisches Highlight sind Formulare bzw das Verhalten der Eingabefelder. Google Maps Nutzer kennen das schon. Ein INPUT Element wird nur durch einen Unterstrich markiert. Der Labeltext befindet sich auf der Linie. Wenn die Textbox en Fokus erhält wandert animiert, das Label darüber und wird kleiner.

image

image

image

 

   1:  <div class="mdl-cell mdl-cell--2-col">
   2:      <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label textfield-demo">
   3:          <input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?" id="sample4" />
   4:          <label class="mdl-textfield__label" for="sample4">Number...</label>
   5:          <span class="mdl-textfield__error">Input is not a number!</span>
   6:      </div>
   7:  </div>

 

Dieses Element der UI Sprache, den etwas dickeren farbigen Unterstrich, findet man auch in der Tab Komponente wieder.

image

Die Tabs werden mit mdl-tabs__tab deklariert. Die Steuerung erfolgt per Href und #Hash ID’s. Leider sind deshalb auch keine Hyperlinks möglich, weil es sich um eine reine In-Page Navigation handelt.

Je Tab wird ein Panel benötigt, mit der zum Tab passenden ID.

   1:  <div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
   2:      <div class="mdl-tabs__tab-bar">
   3:          <a href="#panel1" class="mdl-tabs__tab is-active">IT Pro</a
   4:          &lt;a href="#panel2" class="mdl-tabs__tab">Developer</a>
   5:          <a href="#panel3" class="mdl-tabs__tab">Soft Skill</a>
   6:      </div>
   7:      <div class="mdl-tabs__panel is-active" id="panel1">
   8:          <ul>
   9:              <li>SQL Server</li>
  10:              <li>IIS</li>
  11:              <li>Windows</li>
  12:              <li>Exchange</li>
  13:              <li>Lync/Skype</li>
  14:              <li>TMG</li>
  15:          </ul>
  16:      </div>
  17:      <div class="mdl-tabs__panel" id="panel2">
  18:          <ul>
  19:              <li>ASP.NET</li>
  20:              <li>Webforms</li>
  21:              <li>Angular JS</li>
  22:              <li>WPF</li>
  23:          </ul>
  24:      </div>
  25:      <div class="mdl-tabs__panel" id="panel3">
  26:          <ul>
  27:              <li>Project</li>
  28:              <li>SCRUM</li>
  29:          </ul>
  30:      </div>
  31:  </div>

 

Weil das optisch ein echter Hingucker ist, wünschen sich den Unterstrich manche auch für die Hyperlinks im Navigation Menü. Technisch gesehen ist das nicht schwierig, erfordert aber eine CSS Klasse die dem aktiven Navigation Link zugewiesen werden muss,

In obigen Screenshot  ist das umgesetzt (ppedv news). Die Idee dafür und der CSS Code stammt von der MDL Website. Auch dort wird der aktive Bereich so angezeigt, obwohl eigentlich nicht so vorgesehen.

image

image

Moderne Websites haben heute gerne überdimensionale Fuß Bereiche. Ursprünglich für Google Search Optimierung (SEO) erdacht,  bringt man da heute eine Art alternatives Menü unter. MDL kennt zwei Varianten. Die einzeilige mit class=mdl-mini-footer und einer Linkliste per UL (mdl-mini-footer—link-list). Die zweite Variante ist mehrzeilig und mächtig.

   1:  <footer class="mdl-mega-footer">
   2:      <div class="mdl-mega-footer--middle-section">
   3:          <div class="mdl-mega-footer--drop-down-section">
   4:              <input class="mdl-mega-footer--heading-checkbox" type="checkbox" checked>
   5:              <h1 class="mdl-mega-footer--heading">IT Pro</h1>
   6:              <ul class="mdl-mega-footer--link-list">
   7:                  <li><a href="#">IIS</a></li>
   8:                  <li><a href="#">Windows Server</a></li>
   9:                  <li><a href="#">SQL Server</a></li>
  10:                  <li><a href="#">Exchange</a></li>
  11:              </ul>
  12:          </div>
  13:          <div class="mdl-mega-footer--drop-down-section">
  14:              <input class="mdl-mega-footer--heading-checkbox" type="checkbox" checked>
  15:              <h1 class="mdl-mega-footer--heading">Dev </h1>
  16:              <ul class="mdl-mega-footer--link-list">
  17:                  <li><a href="#">Angular.js</a></li>
  18:                  <li><a href="#">ASP.NET</a></li>
  19:                  <li><a href="#">HTML5</a></li>
  20:                  <li><a href="#">WPF</a></li>
  21:              </ul>
  22:          </div>
  23:          <div class="mdl-mega-footer--drop-down-section">
  24:              <input class="mdl-mega-footer--heading-checkbox" type="checkbox" checked>
  25:              <h1 class="mdl-mega-footer--heading">Managment</h1>
  26:              <ul class="mdl-mega-footer--link-list">
  27:                  <li><a href="#">Scrum</a></li>
  28:                  <li><a href="#">Project</a></li>
  29:                  <li><a href="#">Power Pivot</a></li>
  30:                  <li><a href="#">Sharepoint</a></li>
  31:               </ul>
  32:          </div>
  33:          <div class="mdl-mega-footer--drop-down-section">
  34:              <input class="mdl-mega-footer--heading-checkbox" type="checkbox" checked>
  35:              <h1 class="mdl-mega-footer--heading">FAQ</h1>
  36:              <ul class="mdl-mega-footer--link-list">
  37:                  <li><a href="#">Questions</a></li>
  38:                  <li><a href="#">Answers</a></li>
  39:                  <li><a href="#">Contact us</a></li>
  40:              </ul>
  41:          </div>
  42:      </div>
  43:      <div class="mdl-mega-footer--bottom-section">
  44:          <div class="mdl-logo">Title</div>
  45:          <ul class="mdl-mega-footer--link-list">
  46:              <li><a href="#">Help</a></li>
  47:              <li><a href="#">Privacy &amp; Terms</a></li>
  48:          </ul>
  49:      </div>
  50:  </footer>

 

image

Man fragt sich was die Checkboxen im HTML Code sollen? Diese dienen dazu bei Small Devices (Smartphone) die Bereiche aufklappbar darzustellen.

image

Fazit:

Was soll man dazu sagen? Noch ein UI Framework. dazu recht unausgegoren aber mit modernen Style. Alternative sind Modern UI Bootstrap Themes, die aber nicht ganz die Funktion bringen können.

Windows 10 wird in RTM-Build 10240 an Insider ausgerollt

Seit heute Morgen wird Windows 10 in dem Build 10240 an die Teilnehmer des Insider-Programms (Fast-Ring) ausgerollt. Dabei handelt es sich nun scheinbar um die finale RTM Version. Der Hinweis auf die Preview ist nach dem Update und Neustart vom Desktop verschwunden.

Was ich bisher gar nicht geprüft hatte, mich aber nun sehr interessiert hatte: Windows 10 heisst nun endlich auch “intern” Windows 10 und nicht etwa “Windows 6.4” oder so. Klasse!

win10_10240_1

win10_10240_2

IIS zeigt Error 500 statt 404

Neuere Versionen des IIS zeigen im Fiddler Proxy log eine 500er Meldung für fehlende Elemente wie Bilder, CSS oder js. Das macht das Finden von broken Links unmöglich.

Lösung in Web.config folgenden Code ergänzen.

   1:  <configuration>
   2:   
   3:    <system.webServer>
   4:      <httpErrors errorMode="Detailed" />
   5:    </system.webServer>
   6:  </configuration>

SCCM 2012 R2: Wie man den Configuration Manager installiert

Ich habe euch ein Video erstellt, in dem ihr sehen könnt wie ihr:

  1. die Voraussetzungen für eine SCCM-Installation (inklusive SQL-Server) schafft und
  2. den System Center Configuration Manager 2012 R2 installiert.

Das Ganze zeige ich am Beispiel einer Single-Server-Lösung für eine Stand-alone Primary Site, lässt sich aber auf viele andere Szenarien übertragen.

 

Viel Spaß mit dem Video!

Der nächste Windows 10 Build – 10166 – get ready for RTM!

Der nächste Build von Windows 10 wird im fast-Ring ausgerollt: 10166! Es geht jetzt also weiter Schlag auf Schlag in Richtung RTM. Vermutlich wird 10166 aber eine der letzten Vorab-Versionen sein.

Einzige Neuerungen, von der man etwas sehen kann: Die Microsoft Wi-Fi App. Damit kann man gegen Gebühr WLAN-Netze nutzen. Aktuell ist dies aber auf das Areal rund um den Microsoft-Sitz in Seattle beschränkt, soll aber zeitnah in ganz Amerika zur Verfügung stehen. Für Europa gibt es noch keine Ankündigungen in diese Richtung.

Build10166

Der schnellste Weg zur Build 10166 ist (nach dem Update aus dem Vorgänger) der Download der ISO mit Build 10162 und anschließendem Upgrade:

http://windows.microsoft.com/en-us/windows/preview-iso

SCCM 2012 R2: Wie man OSD einrichtet und benutzt

Auf Anregung einiger Teilnehmer habe ich heute ein Video erstellt, das zeigt, wie man die OSD-Komponenten des System Center Configuration Manager 2012 R2 nutzt, um Betriebssysteme zu verteilen. Das Operating System Deployment stützt sich dabei auf WDS/PXE und DHCP.

Das Video könnt ihr hier finden:

 

Die Folien dazu sind hier zu finden:

http://1drv.ms/1HhQ4r4

Viel Spaß dabei!

Windows 10 – Schlag auf Schlag

In den letzten Tagen und Stunden überschlagen sich die Entwicklungen von Windows 10. Folgendes ist in den letzten Tagen passiert:

29. Juni 2015   -   Build 10158 (Fast Ring)

30. Juni 2015   -   Build 10159 (Fast Ring)

02.Juli.2015   -   Build 10162 (Fast Ring)

07. Juli 2015   -   Build 10162 (Slow Ring)

Der Build 10162 ist aber noch nicht der finale Build, der am 29. Juli veröffentlich werden wird. Dennoch scheint es so, als ob noch im Laufe dieser Woche die finale RTM-Version entstehen soll.

Es gibt bereits erste Leaks eines Build 10163 – mal sehen, ob dieses noch in den kommenden Tagen über das Insider-Programm ausgerollt wird…

Es bleibt weiter spannend!

Ein Download der aktuellen ISO sowie einige weitere Informationen dazu finden sich hier:

http://winfuture.de/downloadvorschalt,3226.html

SCCM 2012 R2: Office 2013 (und andere) automatisiert ausrollen

Will man Office 2013 (oder eine andere Version) über den System Center Configuration Manager 2012 R2 (oder auch ältere Versionen) automatisch und ohne Benutzerinteraktion installieren, so bedarf es ein paar kleiner Kniffe.

Den gesamten Ablauf, wie hier vorzugehen ist, möchte ich im Folgen aufzeigen. Wichtig ist, dass man als Quelle eine Volumenlizenz-DVD benötigt. Diese erkennt man am “admin”-Ordner auf der DVD im Stammverzeichnis.

Vorbereiten der automatisierten Installation

Zunächst muss der Inhalt der Office 2013 DVD auf ein freigegebenes Verzeichnis kopiert werden, in meinem Fall der Ordner “Sources”, welcher auf dem SCCM-Standalone-Server existiert und als “\SOURCES” freigegeben ist:

office1

Anschließend wird das “Microsoft Office-Anpassungstool” (engl.: “Office Customization Tool”) über den Aufruf der setup.exe mit Parameter gestartet:

setup.exe /admin

office2

Hier wird nun eine neue Setupanpassungsdatei erstellt:

office3

Außerdem lässt sich das künftige Office-Dateiformat wählen:

office3b

Nun können diverse Anpassungen am künftigen Setup gemacht werden. Zu Beginn kann man z.B. die Unternehmensdaten hinterlegen:

office4a

Außerdem muss die Lizenzierung sowie das Verhalten der Benutzeroberfläche festgelegt werden:

office4b

Hier wird dem Lizenzvertrag zugestimmt, die Anzeigeebene auf “Grundlegend” gestellt sowie die beiden unteren Checkboxen angewählt und die obere Checkbox abgewählt.

In den Setup-Eigenschaften wird noch mit einer neuen Eigenschaft “SETUP_REBOOT” und deren Wert “Never” ein Neustart nach dem Setup unterdrückt:

office5

Um den “Welcome-Screen” beim ersten Start zu deaktivieren ist unter “Benutzereinstellungen ändern” / “Microsoft Office 2013” / “Datenschutz” / “Trust Center” der Eintrag “Bestätigungs-Assisten […] deaktivieren” auf  “Aktiviert” zu setzen:

office6

Weiterhin können bei Bedarf weitere Anpassungen gemacht werden, z.B. die zu installierenden Programmbestandteile:

office7

Abschließend werden die Einstellungen in einer neuen Datei im “Updates”-Pfad unterhalb des Stamm-Pfades der Office-Installation abgespeichert:

office8

office9

Erzeugen der SCCM-Anwendung

Nun da die MSP-Datei erstellt wurde, kann im SCCM ein neues Anwendungs-Objekt für Office 2013 erzeugt werden:

office10

Dabei ist “Windows Installer (MSI-Datei)” als Typ auszuwählen und über den “Durchsuchen”-Dialog die proplusww.msi unterhalb des “proplus.ww”-Ordners zu öffnen:

office11office12

office13office14

Unter den “Allgemeinen Informationen” können bzw. müssen einige Informationen hinterlegt bzw. geändert werden. So kann man weitere Produkt-Details zur Installation angeben. In jedem Fall muss man im Feld “Installationsprogramm” die MSI gegen den Eintrag “setup.exe” austauschen und sicherstellen, dass als “Installationsverhalten” der Eintrag “Für System installieren” ausgewählt ist.

office15

office16

Anschließend muss der “Bereitstellungstyp” des neuen Anwendungsobjektes geöffnet werden, da hier noch Änderungen vorgenommen werden müssen:

office17

Auf dem Reiter “Inhalt” muss im Pfad des “Inhaltsort” abschließende “\proplus.ww” entfernt werden…

office18

… und auf dem Reiter “Programm” im Feld “Deinstallationsprogramm” statt MSI-Weges einfach nur “Setup.exe /uninstall” eingetragen werden:

office19

Bei Bedarf können auf dem Reiter “Anforderungen” noch selbige definiert werden. Da ich hier eine 64-Bit-Installation verwendet habe, ist natürlich auch das entsprechende OS nötig:

office20

Ist man damit fertig, kann man das Office-Anwendungs-Objekt jetzt wie gewohnt verteilen und anschließend für die gewünschte (idR. extra dafür neu anzulegende) Gerätesammlung bereitgestellt werden…

Arduino mit Visual Studio programmieren

 

Vor relativ kurzer Zeit habe ich mir einen Arduino Uno R3 gekauft und ich will euch hier in mehreren Blog Artikeln regelmäßig meine Erfahrungen und Erlebnisse schildern. Für alle, die nicht wissen, was ein Arduino ist, habe ich hier eine kurze Erklärung:

Arduino ist eine plattformunabhängige OpenSource Physical-Computing Plattform, die sich aus Software- und Hardwarekomponenten zusammensetzt.
Die Hardware besteht aus einem einfachen Board mit Ein / Ausgängen in analoger und digitaler Form. Unter anderem ist auch je nach Modell ein anderer Mikrocontroller auf dem Board verbaut. Als Software wird standardmäßig eine Entwicklungsumgebung verwendet, die auch Personen, die keine Entwicklungsvorkenntnisse haben, Zugang zur Arduino-Programmierung bietet. Ein Beispiel dafür wären Header Dateien, die vollautomatisch im Hintergrund eingefügt werden.
Doch was macht den Arduino so besonders? Mit dem preislich sehr günstigen Arduino kann man relativ leicht eigenständige Objekte steuern oder elektronische Schaltungen realisieren. Kunsthochschulen und auch diverse Hersteller von Filmsets verwenden häufig den Arduino als Mikrocontroller um interaktive Installationen aufzubauen oder um zum Beispiel Lichter von Anzeigetafeln blicken zu lassen. Auf dem Arduino wird über eine auf Java basierende IDE in C und C++ programmiert, als Compiler wird hier der “gcc” mit eingebunden. Um die Programmierung zu erleichtern, ist auf dem Arduino Uno R3 eine eigens entwickelte USB-Schnittstelle als „Serial Converter“ verbaut. Mithilfe dieser Schnittstelle ist es möglich, den Arduino über USB mit der IDE zu programmieren. Der Bootloader, der hierfür benötigt wird, ist praktischerweise schon standardmäßig auf dem entsprechenden Controller installiert und kann manuell über die serielle Schnittstelle des Boards konfiguriert werden.

Nach meinen ersten Programmierversuchen mit der mitgelieferten IDE lernte ich Visual Studio wieder sehr zu schätzen. Allein die fehlende Auto-Vervollständigung sowie das bessere Syntax Highlighting fehlen einem sehr schnell. Weitere Features, die ich sofort vermisst habe, waren IntelliSense und die Tatsache, dass in VisualStudio Fehler direkt angezeigt werden. Also suchte ich gleich nach meinen ersten Programmierversuchen nach entsprechenden Libaries für Visual Studio. um zumindest den Quellcode in Visual Studio schreiben zu können. Durch einen glücklichen Zufall entdeckte ich im Visual Studio “Extensions”-Menü bei der Wortsuche nach „Arduino“ ein komplettes Plugin, mit dem ich sogar das kompilierte Programm auf den Ardiuno laden konnte.

Als erstes muss das erste Projekt her namens “Blink” was man in konventioneller Programmierung mit “Hello World” vergleichen kann. Es besteht darin eine LED blinken zu lassen. Dazu baue ich mir folgende Schaltung bestehend aus einem Arduino Uno R3, 1x Roter LED und einem 220 Ohm Wiederstand.

1LED

Zum erstellen dieser Bildes habe ich die Open Source Software Fritzing verwendet mit der mit einfach Schritten solche Steckbilder erstellt werden können und auch als Ätzvorlagen exportiert werden können. 

So, die Schaltung steht: Jetzt muss ich nur noch das Programm dazu schreiben:
Arduino-Programme müssen immer mindestens aus zwei Teilen bestehen:
Einmal dem “void setup()” Teil, in dem die Pins konfiguriert werden, und dem Bereich “void loop()”, dessen Codebereich wiederholt ausgeführt wird. Im ersten Bereich weise ich dem digitalen Pin 13 den Typ OUTPUT zu. Im Loop Bereich setze ich den Ausgang von Pin 13 mit der Funktion digitalWrite auf High. Wenn ich jetzt direkt mit der Funktion digitalWrite den Pin wieder auf Low setzen würde, würde er so schnell blinken das wir es nicht als blinken wahrnehmen könnten. Deshalb nehme ich mir die Funktion “delay(1000)” zur Hilfe, die die Schleife 1 Sekunde lang pausieren lässt. Das ganze sieht dann in fertiger Form folgendermaßen:

image

Hier nochmal in schriftlicher Form für die Leute die sich den Code kopieren wollen:

1 void setup() 2 { 3 pinMode(13, OUTPUT); 4 } 5 6 void loop() 7 { 8 digitalWrite(13, HIGH); 9 delay(1000); 10 digitalWrite(13, LOW); 11 delay(1000); 12 }

Also fassen wir das Ganze noch einmal zusammen: Der Arduino ist wie im obigen Bild mithilfe einer Steckplatine verkabelt. In Visual Studio haben wir unseren fertigen Code geschrieben. Jetzt müssen wir diesen letztendlich nur noch auf unseren Arduino übertragen. Dazu müssen wir im Visual Studio nur noch unsere Programmversion der Arduino Software (in meinem Fall 1.6), den Arduino Typ (Arduino Uno) sowie den COM Port (COM3)  angeben, der automatisch generiert wird, sobald wir den Arduino über die USB Schnittstelle verbinden. Da wir jetzt unser Programm ohne Stoppunkte ablaufen lassen wollen, müssen wir jetzt noch als Kompilierungstyp “Release” auswählen und anschließend den “Local Windows Debugger” starten. Das ganze sieht dann folgendermaßen aus:

vs Kopie

Im Output Fenster können wir sehen, dass unser Programm erfolgreich kompiliert wurde und über den COM3 Port hochgeladen wurde. Wenn wir jetzt auf unseren Arduino schauen, können wir beobachten, wie die LED langsam blinkt.

20150630_101603

Den kompletten Blog Post habe ich auch nochmal in Form eines Video auf Youtube veröffentlicht.

Für all die Leute die sich bisher noch nicht mit Development beschäftigt haben oder aus anderen Programmiersprachen wie der C Familie kommen würde ich den Kurs C++ Einführung in die Programmierung empfehlen für den leichteren Einstieg in die Programmierung, da dort die Grundkenntnisse über die Datentypen usw vermittelt werden.

In meinem nächsten Artikel werden wir uns dann Programmierung von komplexeren Anwendungen beschäftigen.

Training, Schulung, Juli Aktion

Month List