Projekt Operačního programu Praha – Adaptabilita
Mezinárodní spolupráce při rozvoji magisterského a doktorského programu na ČVUT-FEL v Praze číslo projektu: CZ.2.17/3.1.00/36036
Odborný výstup ze zahraniční stáže na: Universidad Nacional Autónomia de México (Mexiko) 30. 5. 2014 – 30. 7. 2014
Filip Paulů student studijního programu KME – Mgr.
Praha & EU: Investujeme do vaší budoucnosti Evropský sociální fond
Rozpracovan´a diplomov´a pr´ace Grafick´y editor elektrotechnick´ych obvod˚ u Bc. Filip Paul˚ u 20. srpna 2014
1
OBSAH
Obsah ´ 1 Uvod
3
2 Zpracov´ an´ı 2.1 HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2.2 Vektory . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2.3 Podpora . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
3 3 4 4
3 JavaScript 3.1 Vytvoˇren´e vlastnosti . . . . . . . . . . . . . . . . . . . . . . . 3.1.1 loadScript . . . . . . . . . . . . . . . . . . . . . . . . . 3.1.2 Dˇedˇen´ı . . . . . . . . . . . . . . . . . . . . . . . . . . .
4 4 4 5
4 Objekty 4.1 Project . . . . . . . . . . . 4.2 List . . . . . . . . . . . . . 4.3 Layer . . . . . . . . . . . . 4.4 Component . . . . . . . . 4.5 Curcuit . . . . . . . . . . 4.6 DrawElement . . . . . . . 4.7 DrawTool . . . . . . . . . 4.7.1 Vytvoˇren´ı vlastn´ıho 4.8 DrawSoloTool . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . kresl´ıc´ıho objektu . . . . . . . . . . .
5 Export 5.1 NetList . . . . . . . . . . . . 5.1.1 Vlastnosti souˇc´astek 5.2 PNG a JPEG . . . . . . . . 5.3 PostScript . . . . . . . . . .
Bc. Filip Paul˚ u
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
6 6 6 6 6 7 7 7 7 8
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
8 8 8 9 9
2
´ ´I 2 ZPRACOVAN
1
´ Uvod
Na elektrotechnick´ ych ˇskol´ach jsou ˇcasto pouˇz´ıv´any programy na simulaci elektrotechnick´ ych obvod˚ u. Jsou velice dobr´e jak pro v´ yuku, tak pro n´asledn´e pochopen´ı vysvˇetlovan´e l´atky pro studenta. Velik´ y probl´em je ten, ˇze takov´eto programy jsou vˇetˇsinou placen´e nebo podl´ehaj´ı urˇcit´e platformˇe. Tedy se mnohokr´at nedaj´ı plnˇe vyuˇz´ıt. Pro vyuˇcuj´ıc´ı je ˇcasto jednou z tiskovˇe nejobt´ıˇznˇejˇs´ıch vˇec´ı vytvoˇrit hezky vypadaj´ıc´ı elektrick´ y obvod. Ostatnˇe l´epe na tom nejsou ani studenti, kteˇr´ı ˇ mus´ı vytv´aˇret protokoly z praktik. Casto se tato situace ˇreˇs´ı prac´ı ve vektorovˇe orientovan´ ych programech nebo pomoc´ı sady pˇreddefinovan´ ych objekt˚ u urˇcen´ ych pro kreslen´ı ve Wordu. Je zˇrejm´e, ˇze ani jedno z ˇreˇsen´ı nen´ı pr´avˇe optim´aln´ı a neposkytuje ani komfort ani potˇrebnou kvalitu. [4] Pro u ´ˇcely anal´ yzy elektrick´ ych obvod˚ u se hojnˇe pouˇz´ıv´a analyz´ator postaven´ y na programu Spice. Definov´an´ı obvod˚ u v programu Spice vˇsak nen´ı snadn´e. Pouˇz´ıv´a k vstupu textovou reprezentaci zvanou NetList. Tento probl´em byl prvn´ı v´ yzvou k vytvoˇren´ı grafick´eho programu pro zaplnˇen´ı t´eto mezery. Od vytv´aˇren´ı tohoto programu je jen mal´ y kr˚ uˇcek k vyˇreˇsen´ı tiskov´eho probl´emu a to exportem navrˇzen´eho elektronick´eho obvodu na obr´azky typu PNG nebo vektorov´eho PS vhodn´eho pro TEX i LATEX.
2
Zpracov´ an´ı
Jelikoˇz vysokoˇskolˇst´ı studenti pouˇz´ıvaj´ı velk´e mnoˇzstv´ı platforem, je potˇreba, aby program byl ps´an multiplatformˇe. Z tohoto d˚ uvodu byl zvolen programovac´ı jazyk JavaScript. Ten je souˇc´ast´ı internetov´ ych prohl´ıˇzeˇc˚ u. Funguje tedy nejen pod zn´am´ ymi platformami jako jsou Windows, Linux a Apple, ale i Android a dalˇs´ı. Jedin´e omezen´ı, kter´e program m´a, je pouˇz´ıvan´ y prohl´ıˇzeˇc.
2.1
HTML5
Hypertext Markup Language, oznaˇcovan´ y zkratkou HTML, je znaˇckovac´ı jazyk pro hypertext. Je hlavn´ım jazykem pro vytv´aˇren´ı str´anek v syst´emu World Wide Web, kter´ y umoˇzn ˇuje publikaci dokument˚ u na internetu. [3] Jazyk je aplikac´ı dˇr´ıve vyvinut´eho rozs´ahl´eho univerz´aln´ıho znaˇckovac´ıho jazyka SGML (Standard Generalized Markup Language). V´ yvoj HTML byl
Bc. Filip Paul˚ u
3
3 JAVASCRIPT
ovlivnˇen v´ yvojem webov´ ych prohl´ıˇzeˇc˚ u, kter´e zpˇetnˇe ovlivˇ novaly definici jazyka. [3] V kvˇetnu 2007 byly odhlasov´any specifikace nov´e verze HTML pod n´azvem HTML 5. Specifikace by mˇely b´ yt hotovy v letech 2010-2012 (odkdy ji zaˇcnou v´ yvoj´aˇri webov´ ych aplikac´ı pouˇz´ıvat). Ukonˇcen´ı v´ yvoje specifikace po vyˇreˇsen´ı probl´em˚ u a opraven´ı vˇsech chyb se odhaduje aˇz na rok 2022). [3]
2.2
Vektory
Tato nov´a technologie HTML5 novˇe podporuje znaˇcky, jako napˇr´ıklad
, kter´e jsou pro tvorbu programu velice uˇziteˇcn´e, jelikoˇz dovedou vykreslovat vektory. V tˇechto znaˇck´ach se vˇse vykresluje za pomoci JavaScriptu.
2.3
Podpora
Editor je programov´an pro webov´e rozhran´ı. Vyuˇz´ıv´a pˇrev´aˇznˇe JavaScriptu za pouˇzit´ı novˇejˇs´ı technologie HTML5. T´ım jsou urˇceny n´aroky na software. HTML5 podporuj´ı prohl´ıˇzeˇce: Firefox 3.6+, Opera 10+, Google Chrome (Chromium), Safari 5+, Internet Explorer 9+ a dalˇs´ı m´enˇe pouˇz´ıvan´e.
3
JavaScript
JavaScript je multiplatformn´ı, objektovˇe orientovan´ y skriptovac´ı jazyk, jehoˇz autorem je Brendan Eich z tehdejˇs´ı spoleˇcnosti Netscape. [3] Zdrojov´ y k´od JavaScriptu se vkl´ad´a pˇr´ımo, nebo je na nˇej odk´az´an v HTML dokumentu a to ve znaˇcce <script>. Ten je pot´e interpretov´an dan´ ym prohl´ıˇzeˇcem.
3.1
Vytvoˇ ren´ e vlastnosti
Samotn´e webow´e prostˇred´ı nab´ız´ı ˇradu vlastnost´ı, kter´e se daj´ı bez probl´emu pouˇz´ıvat. Bohuˇzel, tyto z´akladn´ı prostˇredky vˇzdy nevyhovuj´ı poˇzadavk˚ um program´atora. Proto jsem se rozhodl nˇekter´e prostˇredky vyrobit. 3.1.1
loadScript
Aby program byl pˇrehledn´ y a snadno doplˇ nuj´ıc´ı, bylo potˇreba vytvoˇrit vlastnost nebo funkci, kter´a jak´ ymkoli zp˚ usobem naˇcte extern´ı JavaScript. Proto Bc. Filip Paul˚ u
4
3 JAVASCRIPT
byla vytvoˇrena funkce loadScript(url, callback)“. Funkce naˇcte do hlaviˇcky ” HTML k´odu <script type=”text/javascript”src=”url”>“ a po ” naˇcten´ı souboru se zavol´a callback“. ” Jako obvykle m´a IE jinou funkcionalitu vol´an´ı callbacku. Bylo potˇreba pˇridat k´od: i f ( s c r i p t . r e a d y S t a t e ) { // IE s c r i p t . onreadystatechange = function () { i f ( s c r i p t . r e a d y S t a t e == ” l o a d e d ” | | s c r i p t . r e a d y S t a t e == ” complete ” ) { s c r i p t . onreadystatechange = null ; callback ( ) ; } }; } e l s e { // Others s c r i p t . onload = c a l l b a c k ; } Pˇri v´ yvoji bylo tˇreba tuto funkci upravit. Inernetov´e prohl´ıˇzeˇce si ukl´adaj´ı naˇcten´ y JS a pˇri opakuj´ıc´ım se naˇcten´ı vyvol´a uloˇzen´ y JS, i kdyˇz na serveru ˇ sen´ı bylo jednoduch´e, k url se pˇridal n´ahodn´ probˇehla zmˇena. Reˇ y ˇretˇezec, kter´ y odkazoval na stejn´ y soubor. V praxi se url zmˇen´ı takto: url+’ ?v=’+Math.random()“ ” 3.1.2
Dˇ edˇ en´ı
Jedna z vˇec´ı, kterou JavaScript nezvl´ad´a u ´plnˇe jako ostatn´ı OOP, je dˇedˇen´ı. Ano, zvl´ad´a prototypov´e dˇedˇen´ı, kter´e vˇetˇsinou u klasick´ ych aplikac´ı vystaˇc´ı. Tento probl´em bylo tˇreba vyˇreˇsit, protoˇze se pˇredpokl´ad´a vnoˇrov´an´ı velk´eho mnoˇzstv´ı objekt˚ u (napˇr´ıklad souˇc´astek), kter´e budou m´ıt z velk´e ˇca´sti stejn´e vlastnosti. To se t´ yk´a jak promˇenn´ ych, tak funkc´ı vnoˇren´ ych objekt˚ u i pol´ı. ˇ sen´ı je n´asleduj´ıc´ı: byla vytvoˇrena funkce extend(objekt, abstract)“, Reˇ ” kter´a kop´ıruje vˇsechny vlastnosti z abstractu a vkl´ad´a je do objektu. Uk´azka implementace s porovn´an´ım: Java: public class Tranzistor extends Souˇ c´ astka { Vytvoˇren´a implementace v JavaScriptu: function Tranzistor(){ extend(this, new Soucastka); Tato implementace je sp´ıˇse podobn´a metodˇe v PHP pod n´azvem Trait“ ” Bc. Filip Paul˚ u
5
4 OBJEKTY
a m´a samozˇrejmˇe ˇradu nev´ yhod. Neexistuj´ı v nich vlastnosti rodiˇcovsk´ ych objek˚ u jako parent::“. Nespornou v´ yhodou je, ˇze t´ımto zp˚ usobem m˚ uˇzeme ” dˇedit hned z nˇekolika objek˚ u a dokonce v pr˚ ubˇehu programu.
4
Objekty
Cel´ y program je objektovˇe zamˇeˇren´ y, to znamen´a, ˇze objekt˚ u je tu velice mnoho. Zde uvedeme pouze ty d˚ uleˇzit´e z hlediska pochopen´ı principu a ˇreˇsen´ı.
4.1
Project
Je z´akladn´ı objekt, kter´ y zahrnuje z´akladn´ı informace o pr´avˇe prov´adˇen´ ych akc´ıch. Obsahuje editovanou souˇca´stku nebo obvod. D´ale obsahuje i veˇsker´e ovl´adac´ı panely, jako jsou ukl´ad´an´ı, naˇc´ıt´an´ı, export ˇci pouze informace o programu.
4.2
List
Kaˇzd´ y prvek pod Projectem se ˇrad´ı do stromov´e struktury. Toto je umoˇznˇeno pr´avˇe objektem List“. Obsahuje seznam vlastn´ıch prvk˚ u, informace, kter´e ” prvky jsou aktivn´ı a Layer pro vykreslen´ı do prav´eho panelu. Je pricipi´alnˇe tvoˇren jako abstraktn´ı objekt, dˇedˇen´ y pomoc´ı funkce extend(obj, abstract). Vˇsechny funkce zde jsou koncipov´any tak, aby fungovaly rekurzivnˇe do niˇzˇs´ıch vrstev jeho seznamu.
4.3
Layer
Umoˇzn´ı vykresen´ı vlastnosti prvku do prav´eho panelu. Obsahuje moˇznosti: • Zvolen´ı prvku v jak´ekoli situaci. (i kdyˇz je pod prvky na pl´atnˇe) • Smazat prvek • Zobrazit ovl´adac´ı prvky jako jsou tlaˇc´ıtka a inputy • Vykresen´ı obsahuj´ıc´ı prvky
4.4
Component
Obsahuje vˇsechny vlastnosti jedn´e Souˇca´stky, Od ukl´ad´an´ı a naˇc´ıt´an´ı aˇz po vyplnˇen´ı jednotliv´ ych vlastnost´ı pro netlist.
Bc. Filip Paul˚ u
6
4 OBJEKTY
4.5
Curcuit
Obsahuje vlastnosti Obvodu.
4.6
DrawElement
Jedn´a se o objekt s abstraktn´ı strukturou. Implementuje funkce pro vykreslov´an´ı do pl´atna, zv´ yraznˇen´ı objekt˚ u i detekci na kurzor.
4.7
DrawTool
Jde opˇet o abstraktn´ı objekt pro kresl´ıc´ı n´astroje. 4.7.1
Vytvoˇ ren´ı vlastn´ıho kresl´ıc´ıho objektu
Staˇc´ı ve sloˇzce drawTools vytvoˇrit objekt, kter´ y zdˇed´ı DrawTool. D´ale staˇc´ı implementovat funkce draw“, exportPS“ a exportPNG“ a funkc´ı naˇc´ıst ” ” ” do lev´eho menu. Pˇr´ıklad: f u n c t i o n DrawToolLine ( ) { extend ( t h i s , new DrawTool ( 1 ) ) ; t h i s . name = ’ DrawToolLine ’ ; t h i s . draw = f u n c t i o n ( c o n t e x t , x , y ){ i f ( this . points [ 0 ] . i s ()){ var zoom = d i s p l a y . zoom ; c o n t e x t . l i n e T o ( ( t h i s . p o i n t s [ 0 ] . x−x )∗ zoom , ( t h i s . p o i n t s [ 0 ] . y−y )∗ zoom ) ; } }; t h i s . exportPS = f u n c t i o n ( s i z e ){ }; t h i s . exportPNG = f u n c t i o n ( s i z e , c o n t e x t ){ }; } t o o l s . addDrawTool ( ’ Line ’ , ’ data : image /png ; base64 , iVBORw0KGgo== ’);
Bc. Filip Paul˚ u
7
5 EXPORT
4.8
DrawSoloTool
Pokud uˇzivatel chce somostatn´ y kresl´ıc´ı n´astroj, zdˇed´ı tento objekt. Jedn´a se pouze o zdˇedˇen´ı dalˇs´ıch dvou a to DrawTool“ a DrawElement“ v tomto ” ” poˇrad´ı.
5
Export
Jde o jednu z nejd˚ uleˇzitˇejˇs´ıch ˇca´st´ı programu.
5.1
NetList
Jedn´a se o textov´ y form´at definuj´ıc´ı obvod a vlastnosti souˇc´astek. 5.1.1
Vlastnosti souˇ c´ astek
• N´azev souˇca´stky • Tag • Basic (jestli bude souˇc´astka v z´akladn´ım v´ ybˇeru) • Kategorie • Properties – Popisek – Labes – =/ (jestli tato vlastnost bude uvozena rovn´ıtkem nebo mezerou) – Hodnota • Model souˇca´stky • Dodatek do netlistu • Popis souˇca´stky
Bc. Filip Paul˚ u
8
5 EXPORT
5.2
PNG a JPEG
Velikou v´ yhodou vykreslov´an´ı JavaScriptu do prvku
