Opustil jsem Gymnázium Vrchlabí

Jak to bylo se mnou

Je šílené, jak to celé uteklo. Osm let! Když jsem nastupoval, považoval jsem to za věčnost. Zpětně jako by to bylo pár dní. K úspěšnému splnění přijímacího řízení jsem měl několik motivací. Prvním z nich byl, že bych jsem utekl ze základky, kde se mi v té době vůbec nelíbilo (kvůli spolužákům). Druhým byl slíbený počítač. Pro mladého hráče snad nemůže být lepší motivace :). A třetím, v té době úplně zanedbávaným bonusem, který se časem ukázal jako velmi podstatný, byla vzdálenost - pět minut svižnější chůzí.

Continue reading "Opustil jsem Gymnázium Vrchlabí"

Programování ATtiny85 pomocí Arduina Uno

Z nějakého důvodu mi kdysi přišlo jako opravdu cool nápad koupit si několik miniaturních čipů ATtiny85. Ne že bych věděl co s nimi, spíš pro sichr. Jak se říká, co je doma, to se počítá. Teď, možná po roce či dvou, jsem je vyhrabal z krabice. Stále jsem přesně netušil, co s nimi, ale v hlavě se mi pár nápadů rýsovalo.

Z mých posledních pokusů jsem si pamatoval, že standardní USBisp, které jsem si koupil na programování čipů ATmega328 nejde použít. Nejjednodušší náhradou se mi jevilo využít Arduino Uno. Na internetu jsem našel velké množství tutoriálů, navíc jde o celkem jednoduchou záležitost.

Prvně je třeba přidat podporu pro čipy rodiny ATtiny do Arduino IDE. Od posledně se situace radikálně zlepšila a není třeba ručně cokoliv stahovat, rozbalovat a kopírovat na správné místo.

V Arduino IDE otevřete Nastavení (File -> Preferences) a do kolonky Additional Boards Manager URLs vložte jednu z následujících adres:

  1. https://raw.githubusercontent.com/damellis/attiny/ide-1.6.x-boards-manager/package_damellis_attiny_index.json
  2. http://drazzy.com/package_drazzy.com_index.json

První z nich přidává podporu jen pro ATtiny 44/45/84/85. Druhá je mnohem rozsáhlejší. Pro mé potřeby až zbytečně.

Postup na přidání podpory pro Attiny, jak je popsán výše
Přidání podpory pro Attiny

Nyní v Tools->Board->Boards Manager vybereme a nainstalujeme ATtiny.

Výše popsaný postup pro přidání podpory Attiny do Arduino IDE
Načtení podpory pro Attiny do Arduino IDE

Tím jsme naučili Arduino IDE hovořit jazykem ATtiny kmene. Už stačí jen udělat z Arduina programátor. Po připojení Arduina k počítači v IDE stačí vybrat vzorový příklad ArduinoISP (File->Examples->ArduinoISP->ArduinoISP) a nahrát ho.

Tím se z Arduina stal programátor, který propojíme s ATtiny a můžeme začít.

Počítáno z levé horní strany po řádcích: (1) Reset (8) VCC, (2) A3 (7) Pin D2, (3) Pin A2 (6) Pin D1, (4) GND (5) Pin D0
Popis pinů čipu Attiny85

Propojení je následující:

Zapojení Arduina UNO a Attiny85 pro programování
Zapojení Arduina UNO a Attiny85 pro programování. Vypůjčeno z http://highlowtech.org/?p=1706.

  • ATtiny pin 2 do Arduino pinu 13
  • ATtiny pin 1 do Arduino pinu 12
  • ATtiny pin 0 do Arduino pinu 11
  • ATtiny Reset pin do Arduino pinu 10

Teď už jen stačí otevřít Sketch, vybrat čip, který budete programovat a nastavit jako programátor "Arduino as ISP" a vše nahrát.

A ještě krátká poznámka na konec. Pokud stejně jako já, budete mít trable s nastavením exsterního oscilátoru, doporučuji před nahráním Sketche vypálit Bootloader (Tools->Burn Bootloader).

Kam s ní

Za chvíli mě čeká opravdová zkouška dospělosti - maturita. A i když je nadpis lehce zavádějící, věřím, že by se naše učitelka češtiny nad touto parafrází nerudova fejetonu alespoň pousmála. Přes časový odstup nás oba pojí stejný problém. Potřebujeme někam něco zašit. Jen snad to něco se změnilo. Se slamníkem bych totiž věděl co a jak.

Continue reading "Kam s ní"

SDL2: Pořízení snímku obrazovky

SDL s sebou ve druhé verzi přinesl i změnu vykreslování na obrazovku. Místo v RAM uložených SDL_Surface je v SDL2 použita SDL_Texture uložené na video RAM, kde je plně v jurisdikci GPU. Krom citelných změn na rychlost vykreslování se také změnil způsob, jakým lze zachytit snímek obrazovky.

Při použití textur se SDL_Surface okna neaktualizuje, pokud bychom použili dřívější způsob, dostali bychom prázdný snímek.

Bohužel standardní funkce SDL_SaveBMP (ani její nedokumentovaná obdoba v rozšíření SDL_image - IMG_SavePNG) nepodporuje uložení SDL_Texture. Je proto nejprve nutná konverze z SDL_Texture na SDL_Surface. Teprve pak je možné snímek obrazovky uložit.

// Uloží snímek obrazovky do souboru
// file: jméno souboru pro uložení snímku obrazovky
// renderer: ukazatel na SDL_Renderer, který používáte pro vykreslení do okna aplikace
bool saveScreenshot( const std::string &file, SDL_Renderer *renderer ) {

    // Použité proměnné
    SDL_Rect _viewport;
    SDL_Surface *_surface = NULL;

    // Získáme velikost obrazovky
    SDL_RenderGetViewport( renderer, &_viewport);

    // Vytvoří SDL_Surface s hloubkou 32 a dle toho vybranou maskou pro barvy
    _surface = SDL_CreateRGBSurface( 0, _viewport.w, _viewport.h, 32, 0, 0, 0, 0 );

    // Pokud se vytvoření SDL_Surface nezdařilo
    if ( _surface == NULL ) {
        std::cout "Nelze vytvořit SDL_Surface. Důvod: " << SDL_GetError() << std::endl;
        return false;
    }

    // Získá data z SDL_Renderer a zapíše je do vytvořené SDL_Surface
    if ( SDL_RenderReadPixels( renderer, NULL, _surface->format->format, _surface->pixels, _surface->pitch ) != 0 ) {
         std::cout << "Nelze přečíst data z SDL_Renderer. Důvod: " << SDL_GetError() << std::endl;

        // Nutné vyprázdnit paměť
        SDL_FreeSurface(_surface);
        return false;
    }

    // Uloží snímek jako soubor PNG
    if ( IMG_SavePNG( _surface, file.c_str() ) != 0 ) {
        std::cout << "Snímek nebyl uložen. Důvod: " << SDL_GetError() << std::endl;

        // Vyprázdní SDL_Surface
        SDL_FreeSurface(_surface);
        return false;
    }

    // Vyprázdnění SDL_Surface
    SDL_FreeSurface(_surface);
    return true;

}
Použité funkce:

Hledáme cestu k cíli: A* Pathfinding

Označujete svou nadupanou družinu dobrodruhů, přesouváte se na mapě a klikáte na armádu trollů, která bezostyšně útočí na bezbrannou vesnici. Nyní je na vašich hrdinech, aby se rozhodli, kudy (a jestli vůbec ;)) se vydají na cestu. Stejně jako my lidé, budou hledat nejkratší a nejlépe schůdnou cestu k cíli.

Continue reading "Hledáme cestu k cíli: A* Pathfinding"

Iframe jako WYSIWYG editor

V dnešní době není formátování textu pomocí značek v módě. Místo toho se každý snaží ohromit "cool" WYSIWYG editorem. Tedy editorem, který ihned zobrazuje výsledek naší editace.

Na internetu je k dostání nepřeberné množství kvalitních editorů se spoustou doplňků a funkcí. Ty jsou ale většinou dost objemné a pro menší projekty tak nevyhovující. Co si tedy udělat editor přesně podle gusta? Pomoci nám může vlastnost designMode (EN). Ta u elementu iframe povolí editování textu.

Na iframe s povoleným designMode jde pomocí JavaScriptu vyvolat příkaz execCommand (EN). Pro ukázku si nyní vytvoříme jednoduchý editor, který bude podporovat tři funkce - tučný text, kurzívu a škrtnutý text.

<div id="ovladani">
    <button onclick="prikaz('bold')">Tučně</button>
    <button onclick="prikaz('italic')">Kurzíva</button>
    <button onclick="prikaz('strikeThrough')">Přeškrtnout</button>
</div>
<iframe id="editor" width="200" height="200"></iframe>

Nyní vytvoříme JavaScriptový kód. Nejdříve nastavíme designMode.

var iframe;
var editor;
window.onload = function() {
    iframe = document.getElementById("editor");
    editor = iframe.contentWindow.document;
    editor.designMode = "on";
}

Přidáme funkčnost jednotlivých tlačítek:

function prikaz(jmeno) {
    editor.execCommand(jmeno, false, null);
}

Živá ukázka

Výsledný HTML kód z iframe získáme třeba pomocí vlastnosti innerHTML:

function zobrazHTML() {
    return editor.body.innerHTML;
}

designMode

Tato vlastnost může obsahovat dvě řetězcové hodnoty: on - zapne editaci, nebo off - vypne editaci.

editor.designMode = "on";

execCommand

execCommand požaduje tři parametry.

  1. Jméno příkazu jako řetězec. Seznam je možný najít třeba zde (EN)
  2. Boolean určující zda zobrazit uživatelské rozhraní. Defaultně vepište false
  3. Dodatečný parametr pro použitou funkci. Pokud není vyžadován, zadejte null
editor.execCommand(jmeno, false, null);

Poznámka: Pokud používáte knihovnu jQuery, nejspíš se vám bude hodit tento plugin. Přidá tři nové funkce pro jednodušší práci - execCommand, contentDocument a designMode.

Jde editovat i jiné elementy než iframe?

Krom iframe, jde editovat i ostatní HTML elementy. Postup je trochu odlišný:

<textarea contentEditable="true" width="200" height="200">
    I textarea se umí proměnit ve WYSIWYG editor!
</textarea>

Klíčem je právě atribut contentEditable (EN). Na takto označený element jde volat execCommand stejně jako na iframe.