Parsování formátu json do prostředí Adobe Photoshop

lekce 8.

Automatizování úloh v Adobe Photoshop

Pomocí skriptovacího jazyka JavaScript

Cíl lekce

V této lekci ukáži jak zpracovávat formát json pro výstup do programu Adobe Photoshop. Cílem bude vytvořit položku den a pod ni zapsat snídani a oběd v daný den. Vše bude extrahováno z externího souboru formátu json. Lekce se věnuje základnímu zpracování externích dat pro například webovou prezentaci, výukové videa a jiné.

images/lekce_6JsonJidelnicek.png

Obsah jsonu - obrázek 8.1

images/lekce_6Vysledny.png

Výsledný dokument s naparsovaným jsonem - obrázek 8.2


Využité třídy v této lekci

  • Application: pro práci s atributy dokumentu.
  • Layers: vytváření vrstvy a změna atributů.
  • File: práce se soubory.
  • json2.js: skriptový soubor, který se používá pro parsování formátu json.

Začlenění json.js do projektu

První krok v této lekci je stáhnutí souboru json2.js z tohoto odkazu. Tento soubor slouží jako parser formátu json a lze z něj volat metody pro práci s tímto formátem. Dalším krokem je  vložení tohoto souboru do skriptu, to je možné provést pomocí příkazu #include [název souboru]. Tento příkaz by měl být na první řádce skriptu, aby nedošlo k chybě, kdy se  volá funce parseru, který se linkuje až později níže ve skriptu.


#include json2.js
				

Funkce pro parsování

Nyní mohu vytvořit funkci, které přečte json ze souboru, uloží jako řetězec a parsuje ho. Funkce bude mít jeden parametr a to je název souboru json. Vytvořím si tedy soubor s cestou k nynějšímu skriptu. Tento soubor poté využiji při načtení souboru s daty, kde použiji atribut path k získání cesty a přidám název souboru json. Důležité je zmínit, že soubor formátu json pro parsování, skript a json2.js musí být ve stejném adresáři. Jinak je třeba zadávat externě cesty k souborům. Nyní, když jsem již získal, jaký soubor chci parsovat, je třeba ho otevřít a to konstantou 'r' tedy pro čtení. Pomocí metody read() načíst obsah souboru a metodou close() soubor zavřít. Poté co načtu obsah do proměnné mohu metodou parse() třídy JSON vráti objekt s atributy souboru. Kód níže ilustruje tuto záležitost.


function loadJson(path){
    var script = new File($.fileName);
    var jsonFile = new File(script.path + '/' + path);
    jsonFile.open('r');
    var str = jsonFile.read();
    jsonFile.close();
    
    return JSON.parse(str)
}

Vložení textových vrstev a jejich atributů

V poslední části lekce si vytvořím objekt a vložím si do něj návratovou hodnotu z funkce výše. Následně si vytvořím tři vrstvy pro text. Nastavím vrstvám atribut textové vrstvy, název, pozici, velikost písma a atribut contents nastavím pomocí atributu objektu jsonu. Toto by se dalo provést ručně, jako jej provádím já, či využít cyklu a pomocí parametrů měnit nastavené hodnoty a atributy. Hlavní část skriptu je tedy uvedená níže.

//Nastavení jednotek na pixelové body
app.preferences.rulerUnits = Units.PIXELS
//aktivní dokument
var docRef = app.documents.add(650, 650)
//parsovaný json
var obj = loadJson('jidelnicek.json');
//nová vrstva
var title = docRef.artLayers.add();
//nastavení atributu textLayer
title.kind = LayerKind.TEXT;
//název vrstvy
title.name = "title";
//pozice
title.textItem.position = Array(100, 100);
//velikost
title.textItem.size = 20;
//obsah
title.textItem.contents = obj.title;
var dinner = docRef.artLayers.add();
dinner.kind = LayerKind.TEXT;
dinner.name = "dinner";
dinner.textItem.position = Array(100, 150);
dinner.textItem.size = 15;
dinner.textItem.contents = obj.dinner;
var breakfast = docRef.artLayers.add();
breakfast.kind = LayerKind.TEXT;
breakfast.name = "breakfast";
breakfast.textItem.position = Array(100, 200);
breakfast.textItem.size = 15;
breakfast.textItem.contents = obj.breakfast;

Spuštění skriptu, adresářová struktura

Pro správné fungování skriptu, je důležité umistění ostatních souborů a samotného skriptu. Skript musí být umístěn v adresáři společně s ostatními soubory, tedy json parserem a také samotným jsonem, který obsahuje data. Pokud uživatel chce mít jinou adresářovou strukturu, je třeba toto zahrnout i v cestách k souborům ve skriptu a to buď nastavením absoultní, či relativní cesty ke každému ze souborům. Zároveň je třeba se ujistit, že skript je uložený a nikoliv jen otevřený v editoru. Toto nastavení ilustruje obrázek struktury níže.

images/lekce_6JsonJidelnicek.png

Struktura adresáře - obrázek 8.3


Výsledný zdrojový kód


#include json2.js

//Nastavení jednotek na pixelové body
app.preferences.rulerUnits = Units.PIXELS
//aktivní dokument
var docRef = app.documents.add(650, 650)
//parsovaný json
var obj = loadJson('jidelnicek.json');
//nová vrstva
var title = docRef.artLayers.add();
//nastavení atributu textLayer
title.kind = LayerKind.TEXT;
//název vrstvy
title.name = "title";
//pozice
title.textItem.position = Array(100, 100);
//velikost
title.textItem.size = 20;
//obsah
title.textItem.contents = obj.title;
var dinner = docRef.artLayers.add();
dinner.kind = LayerKind.TEXT;
dinner.name = "dinner";
dinner.textItem.position = Array(100, 150);
dinner.textItem.size = 15;
dinner.textItem.contents = obj.dinner;
var breakfast = docRef.artLayers.add();
breakfast.kind = LayerKind.TEXT;
breakfast.name = "breakfast";
breakfast.textItem.position = Array(100, 200);
breakfast.textItem.size = 15;
breakfast.textItem.contents = obj.breakfast;


function loadJson(path) {
    //cesta skriptu
    var script = new File($.fileName);
    //zjištěná cesta k jsonu
    var jsonFile = new File(script.path + '/' + path);
    //otevření souboru
    jsonFile.open('r');
    //přečtení jsonu
    var str = jsonFile.read();
    //zavření osuboru
    jsonFile.close();
    //vrácení naparsovaného jsonu
    return JSON.parse(str)
}