Eagle: schéma a plošný spoj pro displej HD44780

Pro hasičskou časomíru dělám v první fázi malý diplej HD44780. Mám zapojené schéma na nepájivém poli a potřebuji udělat plošný spoj v Eagle. Nakonec jsem knihovnu pro Eagle našel na webu http://www.cadsoftusa.com/downloads/libraries pod názvem lcd_2x16_led_backlight.lbr

Stáhneme soubor lcd_2x16_led_backlight.lbr a uložíme do složky lbr kde je nainstalován Eagle (u mne C:\EAGLE-7.3.0\lbr\). Po spuštění v Control panelu aktivujeme (zelené kolečko) knihovnu:  lcd_2x16_led_backlight.lbr

HD44780-control-panel

 

Displej následně najdeme pod názvem: lcd_2x16_led_backlight -> LCD_2X16_SIL

HD44780-add

Eagle: shield pro Arduino

Na včerejším BarCampu v Českých Budějovicích jsem dostal skvělý tip od kluků z Bastlírny jak udělat shield pro Arduino. Namotivován jsem se hned pustil do práce. Existuje již hotová knihovna, která má rozměry Arduina a ke které pouze přidáme požadované součástky a uděláme plošný spoj. Moje poznámky k rozchození knihovny SparkFun:

Instalace schémat do Eagle

Knihovnu stáhneme z Githubu: https://github.com/sparkfun/SparkFun-Eagle-Libraries

Přidáme do Eagle v okně Schematic: Library -> Use: vybrat všechny stažené .lbr soubory

Hlavní okno: Libraries kde přibyla nová složka ltspice ve které jsou knihovny, které nejsou aktivované (nemají zelenou ikonku). Klikneme pravým tlačítkem na složku ltspice a vybereme volbu Use all. Knihovny jsou nyní aktivované a mají zelenou ikonku.

eagle-add-library-sparkfun

Nyní v okně Schematic můžeme přidat shield pro Arduino: Add -> SparkFun-Boards -> ARDUINO_R3_SHIELD -> ARDUINO_R3_SHIELD

S tímto shieldem propojíme požadované součástky a můžeme vygenerovat plošný spoj.

Pájecí místo pro připojení drátku

U testovacích věcí potřebuji k plošnému spoji připájet drátek, kterým slouží pro testovací účely. Pro tento účel se používá takzvaný pad. V knihovně ho naleznete ve složce wirepad

eagle-wirepad

Jak nainstalovat Bower pod Windows

Minule jsme si nainstalovali Grunt a vytvořili package.json

Nyní se rovnou pustíme do instalace Boweru. Bower nainstalujeme globálně abychom ho mohli použít kdekoliv:

npm install -g bower

Také Bower nainstalujeme lokálně aby se přidal do projektu (package.json)

npm install bower --save-dev

Inicializujeme Bower (vytvoří soubor bower.json):

bower init

 

Hledání balíčků

Existují 2 způsoby jak najít balíček pro Bower. Buď přes webový prohlížeč nebo přes příkazovou řádku.

Chcete li vyhledat balíček přes příkazovou řádku, použijte následující příkaz:

bower search <balicek>

Pro vyhledání balíčku obsahující slovo jQuery použijeme příkaz:

bower search jquery

Tento příkaz vrátí spoustu výsledků:

    jquery git://github.com/components/jquery.git
    jquery-ui git://github.com/components/jqueryui
    jquery.cookie git://github.com/carhartl/jquery-cookie.git
    jquery-placeholder git://github.com/mathiasbynens/jquery-placeholder.git
    jquery-file-upload git://github.com/blueimp/jQuery-File-Upload.git
    jasmine-jquery git://github.com/velesin/jasmine-jquery
    jquery.ui git://github.com/jquery/jquery-ui.git
    ...

Každý balíček odkazuje na Git repozitář.

Instalace Balíčků

bower install jquery#1.*.* --save-dev         //last version jquery 1.x.x
bower install nette-forms --save-dev
bower install bootstrap --save-dev
bower install bootstrap-sass-official --save-dev
bower install jquery-smooth-scroll --save-dev
bower install font-awesome --save-dev

Android: Začínáme s Volley

Knihovnu Volley vyvinula společností Google. Slouží pro rychlou a snadnou komunikaci přes internet v systému Android. Dnes si ukážeme jak Volley používám pro stahování dat z internetu. Především stahování dat z REST API.

Do knihovny Volley přispěl svým kódem můj kolega Zdeněk Kořán 🙂

Gradle v Android Studiu

Pro všechny mé projekty pro Android používám Android Studio. Je to ideální volba. Zprovoznění simulátoru a nainstalování SDK (oproti Eclipse) je velice jednoduché a příjemné.

Gradle je nástroj pro automatizaci. Slouží k: build, CI, deployment, generování dokumentace, … Po vytvoření nového projektu v Android Studio je Gradle výchozí nástroj.

Přidání Volley knihovny do projektu v Android Studiu

Vytvořte v Android Studio nový projekt. Otevřete soubor build.gradle do kterého doplníme závislost:

// /app/build.gradle
// ...

dependencies {
  // ...
  compile 'com.mcxiaoke.volley:library:1.0.+'
}

Lepší je načíst poslední verzi knihovny Volley: File -> Project Structure… -> app -> Dependencies -> Add -> Library dependency kde v modálním okně vyhledáme „com.mcxiaoke.volley:library“ kterou přidáte. Hotovo 🙂

Soubor build.gradle pak vypadá takto:

apply plugin: 'com.android.application'

android {
    compileSdkVersion 22
    buildToolsVersion "22.0.1"

    defaultConfig {
        applicationId "cz.vencax.beerdroid.beerdroid"
        minSdkVersion 14
        targetSdkVersion 22
        versionCode 1
        versionName "1.0"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:appcompat-v7:22.0.0'
    compile 'com.android.support:support-v4:22.0.0'
    compile 'com.mcxiaoke.volley:library:1.0.+'
}

Použití Volley knihovny

Volley knihovnu již máme naimportovanou. Pojďme ji začít používat k stahování obsahu z internetu. Kdybychom nepoužili Volley museli bychom obsah stahovat v samostatném vlákně přes AsyncTask. S Volley to je jednoduché. Volley pro požadavky ke stažení používá Request Queue. Pro globální frontu požadavků si vytvoříme statickou třídu VolleySingleton.

VolleySingleton.java:

import android.content.Context;

import com.android.volley.RequestQueue;
import com.android.volley.toolbox.Volley;

public class VolleySingleton {

    private static VolleySingleton mInstance;
    private RequestQueue mRequestQueue;
    private static Context mCtx;

    private VolleySingleton(Context context) {
        mCtx = context;
        mRequestQueue = getRequestQueue();
    }

    public synchronized static VolleySingleton getInstance(Context context) {
        if (mInstance == null) {
            mInstance = new VolleySingleton(context);
        }
        return mInstance;
    }

    public RequestQueue getRequestQueue() {
        if (mRequestQueue == null) {
            // getApplicationContext() is key, it keeps you from leaking the
            // Activity or BroadcastReceiver if someone passes one in.
            mRequestQueue = Volley.newRequestQueue(mCtx.getApplicationContext());
        }
        return mRequestQueue;
    }
}

Přidáme oprávnění pro přístup na internet (<uses-permission android:name=„android.permission.INTERNET“ />):

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="cz.vencax.beerdroid.beerdroid" >

    <uses-permission android:name="android.permission.INTERNET" />
    
    <application
       //...
    </application>

</manifest>

 Stažení JSONu přes Volley

Nyní máme vše připraveno a můžeme začít stahovat obsah z internetu přes Volley.

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        //>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> volley
        JsonObjectRequest request = new JsonObjectRequest("http://cblunt.github.io/blog-android-volley/response.json", null,
                new Response.Listener<JSONObject>() {

                    @Override
                    public void onResponse(JSONObject response) {
                        Toast.makeText(getApplicationContext(), response.toString(), Toast.LENGTH_SHORT).show();
                    }
                },

                new Response.ErrorListener() {

                    @Override
                    public void onErrorResponse(VolleyError error) {
                        Toast.makeText(getApplicationContext(), "EROOR: " + error.toString(), Toast.LENGTH_SHORT).show();
                    }
                }
        );

        VolleySingleton volleySingleton = VolleySingleton.getInstance(getApplicationContext());

        volleySingleton.getRequestQueue().add(request);
        // <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< volley
    }

Jak sami vidíte, s knihovnou Volley je stahování zdrojů z internetu velice jednoduché a rychlé. Sám Google ji používá u svých služeb (Google Play, Youtube, …), nemusíte se tudíž bát že Vaši aplikaci zpomalí.

Mne tato knihovna ušetřila spousty vlasů na hlavě 🙂

Na co si dát pozor

U JSONu se rozlišují 2 typy. Pozor na to při requestu.

JSONObject

začíná znakem {

JSONArray

začíná znakem [

První projekt s Apache Wicket

Jeden z nejlepších webových frameworků pro programovací jazyk Java je Apache Wicket. V dnešním článku si ukážeme jak ho rozchodit na Windows.

Maven

Maven je mocný nástroj pro správu projektů. My ho použijeme pro Wicket Quickstart

  1. http://maven.apache.org/download.html
  2. Stáhnout apache-maven-3.3.1-bin.zip
  3. Stažený Maven rozbalíme do: C:\apache-maven-3.3.1
  4. Přidáme proměnné prostředí s názvem MAVEN_HOME s hodnotou C:\apache-maven-3.3.1
  5. Do proměnného prostředí s názvem Path přidáme (na úplný konce, nezapomeňte na středník!):
    ;C:\apache-maven-3.3.1\bin
  6. Restartujeme PC. Maven je nainstalován. Vyzkoušejte jeho správnou funkčnost: Start -> cmd
    mvn -version

    Zobrazí se verze nainstalovaného Mavenu

Instalace Eclipse

Eclipse je nástroj, který je zdarma a vřele ho doporučuji všem začátečníkům.

  1. http://www.eclipse.org/downloads/
  2. Stáhněte Eclipse IDE for Java EE Developers
  3. Stáhne se zip soubor, který stačí rozbalit a rovnou spustit eclipse.exe (neinstaluje se)

Vytvoření Wicket projektu

Na stránce: https://wicket.apache.org/start/quickstart.html naklikáme vlastnosti (můžeme nechat defaultní) a v cmd vykonáme Command line kód:

mvn archetype:generate -DarchetypeGroupId=org.apache.wicket -DarchetypeArtifactId=wicket-archetype-quickstart -DarchetypeVersion=6.19.0 -DgroupId=com.mycompany -DartifactId=myproject -DarchetypeRepository=https://repository.apache.org/ -DinteractiveMode=false

Kód vytvoří nový projekt ve složce myproject

Spuštění Wicket projektu v Eclipse

v příkazové řádce se dostaneme do projektu:

cd myproject

Nyní spusťte příkaz:

mvn eclipse:eclipse

Tím se vytvoří soubory: .project, .settings, a .classpath které vyžaduje Eclipse.

Nyní naimportujeme projekt do Eclipse. V menu vyberte: File->Import->General->Existing Project into Workspace

V levé části Eclipse najedeme na soubor: src/test/java kde nás zajímá soubor Start.java klikneme na něj pravým tlačítkem a vybereme: Debug as… -> Java Application. Ve spodní části eclipse je Console ve které můžete vidět spouštěná webového serveru.

Správnou funkčnost Wicketu otestujete zobrazením adresy: http://localhost:8080 na které vás vítá Apache Wicket

MySQL vzdálenost GPS souřadnic

Jak v MySQL spočítat vzdálenost mezi 2 body? Použijeme uloženou proceduru:

DROP FUNCTION IF EXISTS `gps_distance`;

DELIMITER $$
CREATE FUNCTION `gps_distance` (lat1 float, lng1 float, lat2 float, lng2 float) RETURNS float
BEGIN
 
    SET lat1 = lat1 * pi() / 180;
    SET lng1 = lng1 * pi() / 180;
    SET lat2 = lat2 * pi() / 180;
    SET lng2 = lng2 * pi() / 180;
 
    RETURN acos
    (   cos(lat1)*cos(lng1)*cos(lat2)*cos(lng2)
      + cos(lat1)*sin(lng1)*cos(lat2)*sin(lng2)
      + sin(lat1)*sin(lat2)
    ) * 6372.795;
 
END$$

DELIMITER ;

 

Raspberry: měření světelné intenzity s BH1750

BH1750 je levný obvod pro měření světelné intenzity. Uvažuji o tom, že bych jím rozšířil meteostanici a měřil ještě navíc světelnou intenzitu. Obvod komunikující po I2C. Proto abychom mohli komunikovat musíme povolit I2C komunikaci. Přihlašte se do Raspberry a zadejte příkaz:

sudo raspi-config

Vyberte možnost 8) Advenced Options -> A7 I2C ( povolte I2C komunikaci)

Poté restartujte Raspberry a jdeme propojit Raspberry a BH1750. Nepotřebujete žádné součástky, pouze oba obvody propojíme.

Schéma zapojení

Manuál BH1750

BH1750-raspberry

 

Napájení je 3,3V!!!

Instalace i2c-tools

apt-get install i2c-tools

Nyní si zobrazíme zařízení na I2C sběrnici:

i2cdetect 1
i2cdetect 1
WARNING! This program can confuse your I2C bus, cause data loss and worse!
I will probe file /dev/i2c-1.
I will probe address range 0x03-0x77.
Continue? [Y/n]
     0  1  2  3  4  5  6  7  8  9  a  b  c  d  e  f
00:          -- -- -- -- -- -- -- -- -- -- -- -- --
10: -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
20: -- -- -- 23 -- -- -- -- -- -- -- -- -- -- -- --
30: -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
40: -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
50: -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
60: -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
70: -- -- -- -- -- -- -- --

Je vidět že na adrese 23 je naše čidlo světelné intenzity. Pro zjištění světelné intenzity použijeme programovací jazyk Python. Pro komunikaci ještě zvýbá nainstalovat modul smbus:

apt-get install python-smbus

Získání hodnoty osvětlení

vim bh1750.py

#!/usr/bin/python
import time
import smbus

# Simple function to convert 2 bytes of data
# into a decimal number
def convertToNumber(data):
  return ((data[1] + (256 * data[0])) / 1.2)

DEVICE = 0x23 # I2C device address
bus = smbus.SMBus(1)  # Rev 2 Pi uses 1

while True:
  data = bus.read_i2c_block_data(DEVICE,0x11)
  print "Light Level : " + str(convertToNumber(data)) + " lx"
  time.sleep(0.5)

Souboru nastavíme oprávnění pro spuštění

chmod ogu+x bh1750.py

Měření spustíme:

sudo python bh1750.py

Jak v jQuery vytvořit jednoduchý doplněk

Dělám doplněk který zobrazuje Google mapu. Doplněk umožňuje zobrazit několik markerů na mapě, nebo zobrazit 1 marker kterým je možné uživatelsky vybrat pozici. Nyní bych potřeboval rozšířit tento doplněk o možnost zadání souřadnic markeru z venku doplňku.

Jak to nyní funguje

<div id="google-map">v tomto divu je zobrazena mapa na které je marker</div>

Úkolem je této mapě (map může být na stránce více) nastavit souřadnice markeru.

Vyřešení

Do JavaScriptu pro zobrazení mapy přidám následující kód:

$( document ).ready( function() {

  $.fn.setMarkerPosition = function(lon, lat){
    $(this).css("border", "pink solid 10px");//at je to videt :-)
    alert("lon: " + lon + ", lat: " + lat );
    return this;
  };
  //...

Nyní stačí zavolat námi vytvořenou funkci setMarkerPosition()

$( "div#nette-g-map-canvas" ).setMarkerPosition( 1.1111, 2.2222 );

 

Google Analytics: Změna URL

Dost často se setkávám se stránkami které mají veškerý svůj obsah na jedné dlouhé stránce. Stránka je rozdělena na sekce a při zobrazení sekce se změní URL adresa (většinou se změní hashtag: #kontakt, #nabidka, #kontaktni-formular, … )

Pokud na tokovou stránku nasadíte Google Analytics, měření nebude dávat smysl (uvidíte statistiky pouze pro jednu stránku). Nebudete vědět jaké sekce uživatele zajímají, na jaké sekce přicházejí, z jakých sekcí odcházejí,….

Tento problém jsem vyřešil zajímavým způsobem. Pokud dojde ke změně URL (změní se hashtag), pošlu do Google Analytics zprávu o tom kde se nachází uživatel:

var page = location.pathname + "#"+ hashtag;
ga( 'send', 'pageview', page );

Kde location.pathname je cesta aktuální URL.

 

Breadcrumbs – drobečková navigace

Co je to breadcrumbs?

Breadcrumbs neboli drobečková navigace je sada odkazů které mohou uživateli pomoci pochopit a procházet hierarchii stránek. Příklad:

Webmaster ToolsHelp articlesMy site and GoogleCreating Google-friendly sites

Přidáte-li breaderumbs navigaci na Vaše stránky pomůžete vyhledávačům pochopit navigaci na stránkách a vyhledávače tuto informaci začnou prezentovat při vyhledávání:

breadcrumbs

 Ukázka použití

<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="http://www.example.com/knihy" itemprop="url">
    <span itemprop="title">Knihy</span>
  </a> ›
  <div itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <a href="http://www.example.com/knihy/autori" itemprop="url">
      <span itemprop="title">Autoři</span>
    </a> ›
    <div itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
      <a href="http://www.example.com/knihy/autori/bozena-nemcova" itemprop="url">
        <span itemprop="title">Božena Němcona</span>
      </a>
    </div>
  </div>
</div>

 Ověření správné funkčnosti

Správnost konfigurace drobečkové navigace můžete ověřit na adrese: https://developers.google.com/structured-data/testing-tool/