Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
TideSDK - Razvoj desktop aplikacija sa HTML5/CSS3/JS/PHP/Rubby
#1
Lightbulb 
Prilikom potrage nekog resenja za razvoj desktop aplikacija za razlicite platforme (Win / Linux / OS X), naleteo sam na jedan vrlo zanimljiv framework pod nazivom TideSDK.

http://www.tidesdk.org

Koncept kombinuje razlicite web tehnologije ali ovog puta na desktop racunarima i kao takav je vrlo zanimljiv i jednostavan za koriscenje i izradu razlicitih grafickih korisnickih interfejsa (GUI) koji su generalno problem (za developere) na PC platformama. Ovde je ceo taj koncep jednostavno prebacen na HTML/CSS jer je APP ustvari samo nezavisni browser engine ali koji ima mogucnost interakcije sa ostalim standardnim stvarima na racunaru (fajlovi, slike, seriski portovi itd).

Koncept se dalje nadograduje kompletnom podrskom za SQLite (lokalna baza podataka u okviru aplikacije) i MySQL client podrskom, razne standardne PHP biblioteke sve do PHP funkcija koje imaju HTML DOM pristup za dalju nadogradnju preko JavaSript (deo TideSDK framework API-a).

Evo jedan krajnje neobican primer, "hibridna" HTML PHP skripta koja radi SQL upit na neki spoljni MySQL server i stampa prostu poruku sa rezultatom upita u prozoru aplikacije.

PHP Code:
<html>
<
body>
    <
script type="text/php">
        function 
fetch_data() {
            global 
$document$window;
            
$document->getElementById("data")->innerHTML "<span style=\"color:green\">Fetching...</span> ";
            
            
$fn = function() {
                global 
$document$window;
                
mysql_connect("ensembldb.ensembl.org""anonymous""") or $window->alert(mysql_error());
                
mysql_select_db("homo_sapiens_core_47_36i") or $window->alert(mysql_error());
                
                
$result mysql_query("select * from assembly LIMIT 0,5");
                
$row mysql_fetch_array($result);
                
                
$asm_seq_region_id $row["asm_seq_region_id"];
                
                
$document->getElementById("data")->innerHTML "asm_seq_region_id = $asm_seq_region_id";        
            };
            
            
$window->setTimeout($fn500);
        }
    </
script>
    
    <
button onclick="fetch_data();">Fetch Data</button>
    
    <
div id="data">
    </
div>
</
body>
</
html

Rezultat prevodjenja ovog code-a je kompletna Aplikacija koja moze da se pokrene na razlicitim OS-ovima i ne zahteva nikakve dodatne biblioteke ili web servise.

Dakle na ovaj nacin je moguce veoma lako napraviti multi-platform desktop aplikaciju koriscenjem "samo" HTML/CSS/JS/PHP tehnike.
Takodje je krajnje prosto (isto kao za pravo WEB okruzenje) koristiti razne JavaScript biblioteke poput JQuery, AngularJS, Bootstrap, NodeJS i ostale fine pogodnosti koje se vec duze vreme uspesno koriste na WEB-u.

Ovo je sjajno, upravo sam nasao dugoocekivano resenje za moj Si5351 PIC USB kontroler program (takodje i za moj AD9850 signal generator) i prve probe koje sam napravio su dale pozitivne rezultate tj uspeo sam bukvalno u 3 PHP linije (fopen, fwrite, fclose) da uspostavim serisku komunikaciju sa mojim modulom koristeci standardnu WEB programsku tehniku.

Na slican nacin je moguce napraviti program za razne vizuelizacije, kontrolu ili upravljanje i to ukaciti sa bilo kojim kontrolerom (PIC, STM32, Arduino itd) preko raspolozivih komunikacionih kanala.
Reply
#2
Jos jedan primer:

PHP Code:
<html>
<
body>
    <
script type="text/php">
        function 
go($data 0) {
            global 
$document$window;

            
//pisanje na seriski USB port
            
$fp fopen ("/dev/cu.usbmodem26231"wb); 
            
fwrite($fp,$data);
            
fclose($fp);
        }
    </
script>
    
    <
h3>Set predefined memory</h3>
    <
button onclick="go(0);">Set memory 0</button>
    <
button onclick="go(1);">Set memory 1</button>
    <
button onclick="go(2);">Set memory 2</button>
    <
button onclick="go(3);">Set memory 3</button>
    <
div id="data"></div>
</
body>
</
html

Rezultat:
[Image: attachment.php?aid=10939]

U ovom primeru je koriscena putanja file-pontera od USB interfejsa na "/dev/cu.usbmodem26231" za OS X, za Linux je slicna putanja dok za Win mora da se prilagodi (COM-nesto).
Na ovaj nacin direktno "pricamo" sa HW i implementacija nekog resenja zavisi od zahteva protokola sa HW (MCU) strane.
U mom slucaju HW radi prebacivanje memoriskih banaka frekvencija za Si5351 i kada se posalje karakter "0" je jedna banka, "1" druga i tako dalje.

Priznacete da je code veoma prosto napisan a da radi prilicno zahtevnu operaciju. Za ekvivalent ovakve aplikacije morali bi na OS X da koristite njihov XTools sa milijardu zaluda ulazeci u dubioze samog OS-a itd a ovde vas to manje-vise ne interesuje i moze te se skoncetrisati na konkretno resenje nekog problema.

PS: GUI za ovu moju aplikaciju sa Si5351 bi trebao ovako nekako da izgleda (samo sto ce da ima 3 VFO-a u jednom), ali dobro, polako sticicemo i dotle, to je sad stvar "crtanja" Wink

[Image: attachment.php?aid=10940]


Attached Files Thumbnail(s)

Reply
#3
Svaka čast Miki!
Znam koga da cimam... Big Grin
Face up...make your stand and realise you're living in the golden years!
Reply
#4
Svaka cast...ovo sam trazio....samo mi nije jasno pa bih molio malo ako mi mozes objasniti...ako sam dobro shvatio....taj framework kad se napise u web jezicima (HTML5/CSS3/jQuery/PHP/MySQL) znaci to se napiše...zatim se iz toga dobija jedan exe file ili što? Zanima me kako se to pokreće....recimo zanima me dali se moze gore napraviti u tim jezicima program sa gui i da prica sa ostalim hardewerom i da se moze izvrsavati na ovome uređaju:
http://www.acmesystems.it/arietta

ako bi se to tako moglo..to bi bilo fantasticno....
SAMO-BANOVAN OD 01.11.2024
Reply
#5
Jeste WEB okruzenje u pitanju ali za desktop aplikacije koje voze browser (FireFox, Chrome itd), u pitanju je APP za jednu od ove tri spomenute platforme za desktop racunare sa 2,4,8 jezgra CPU.

Ti na malom kontroleru koji si spomenuo vozis svoj software i imas komunikacionu liniju preko koje pricas sa njim a na svom PC racunaru imas ovu APP koja predstavlja front-end te sprave i npr umesto da si stavio tamo fizicki gumb na I/O linije ti mozes napraviti HTML slajder kontrolu sa kojom upravljas nekim parametrom u MCU.

Ne moze raditi ova APP na tako malim MCU, nije ni predvidjeno, ona samo pruza da na nasim PC racunarima napravimo portabilnu aplikaciju za razne primene (nevezano za MCU i ostalo) ali posto se ovde bavimo i elektronikom onda u smislu nekakvog povezivanja ili industriske vizuelizacije i slicnih primena, mogucosnosti su prakticno neogranicene.

Moj primer sa PIC+Si je vrlo zanimljiv jer ja mom kontroleru trebam da posaljem 8 nekakvih bajtova ali da bih dosao do njih moram krsh matematike da odradim (hiljade iteracija) i onda dolazimo do tacke gde nema smisla maltretirati kontroler za tako zahtevne operacije kada to moze da uradi nas PC u delicu sekunde (u Browseru) a ka MCU samo se posalje tih "izracunatih" 8 bajtova i on svira na izracunatoj freq.
Na ovaj nacin sam prebacio deo velikog tereta na PC racunar a MCU ostavio da radi svoj posao.

Sledeci primer je neki data collection sa grafikonima gde moze da se prate naponi, temperature tj "metri" generalno i da to vizualizujes u grafickom maniru u svojoj APP ili da dvosmerno utices na rad u smislu saljem ti X skalu kao podataka a MCU vrati napon i kao rezultat dobijes sweep ili nekakvu vektorsku analizu.
Na ovaj nacin si prebacio posao sa MCU na PC i ostavio samo MCU da komunicira sa HW a ti se analizom i opcionim upravljanjem bavis na PC racunaru.
Reply
#6
Kuzim sad..ovo je fantasticno....jedan dobar primjer je da se uradi GUI i funkcije u PHP/jQuery.....i upravlja step motoroima za CNC mašinu...za npr bušenje i graviranje pločica....odlična stvar....znači na pcu preko phpa...ucitas file...sortiras g54 kod u array...i saljes liniju po liniju npr arduinu koji na sebe ma povezane easydrivere koji upravljaju step motorima po X,Y,Z osi...odlična stvar....idem probam da odradim...to..malo bolje..Smile))
SAMO-BANOVAN OD 01.11.2024
Reply
#7
Jos jedna vrlo interesantna stvar ovde je ova hibridna integracija HTML i PHP.
Konkretno u HTML/JS na dogadjaje poput "onclick" ili "onchange" moze se pozvati direktno PHP definisana funkcija, nemamo klasican server request/response (naravno postoji i to kao opcija) sto drasticno ubrzava izvsavanje programa i pruza "bezbolnu" integraciju izmedju JS i PHP, tacnije mozes iz PHP da manipulises HTML elementima (pozicija, boja, velicina itd) ili obrnuto da iz HTML/JS direktno pozoves PHP funkciju.

Evo za jedno vece sta sam ja napravio, boza, redjas HTML kontrole i kacis iza PHP funkcije …
Ovaj crveni pravougaonik je jednostavni HTML slajder, kako misem vucem preko njega tako se izracunava sva ta tu neka matematika i salje rezultat ka MCU.
Odziv je prilicno fin, dobio sam oko 50-70 "osvezavanja" u sekundi!
Jos to moze da se optimizuje i ubrza ali mi je bilo bitno da koncept radi.



PS: Za sad sam uspeo preko fopen/fwrite samo da saljem podatke ka MCU ne i da iscitavam ali docice i to na red …

PS2: Jos uvek je u Beta fazi ovaj TideSDK i uskoro se ocekuje neka final/stabilna verzija. Ima trenutno malo problema sa "curenjem memorije" (memory leaks) pa hoce ako se ne odradi dobro (garbage colector) da "pojede" svu memoriju i krashuje aplikaciju. Dakle kada ti ne treba vise neka varijabla ili si zavrsio sa njenom upotrebom treba uraditi unset($neka_var) jer se PHP stalno vrti u pozadini i curenje memorije se tokom vremena akumulira ne kao web-server klasika request/response gde se svaki put ispocetka sve desava i "ublazuju" potencialni problemi sa curenjem memorije.
Reply
#8
Ovaj TideSDK jeste dobar ali ovaj problem za curenjem memorije je bas izrazit.

Npr za svaki poziv PHP funkcije iz JS se "pojede" cca 70KB memorije koja se posle vracanja iz funkcije ne oslobodi i tako posle 100-1000 poziva cao, ode sva mamemorije i krashuje aplikacija Sad

Probao sam sve meni poznate fore da oslobodim memoriju ali nece, to je neki problem u samom framework.

Inace ovaj TideSDK se vec par godina ne azurira niti updejtuje, po komentarima korisnika ispade da je mrtav projekat Sad

------

Posto je situacija krajnje nezgodna sa ovim TideSDK (iako dobro osmisljeno) ja sam probao alternativno resenje koje ima finu aktivnost na projektu a i sama tehnika jos vise obecava, u pitanju je NodeJS + Node-Webkit

http://nodejs.org
https://github.com/rogerwang/node-webkit

Slicno kao TideSDK, sa ovim kompletom se mogu praviti desktop aplikacije u WEB okruzenju ali ovde imamo NodeJS koji radi sve sto treba. NodeJS je jako dobar i brz JavaScript frejmork koji je nadogradjen da moze da kuminicira sa OS (ne samo sa DOM HTML elemtima) sto nam daje mogucnost da radimo sve ono (tkz serverskoj strani) sto je moglo i sa PHP ili nekim drugim jezikom.

NodeJS je vrlo fino osmisljen (inace pisan u C/C++ i samom-sebi tj JavaScript = veoma brz) i jedna od glavnh prednosti je ta sto moze da radi u blocking ili non-blocking modu. To prakticno znaci, npr u blocking modu, kada pozovete neku akciju koja traje 1-2-3 sekunde (npr povlace se neki podaci sa Internet stranice), program ce stojati u tom mestu i cekati da se ta operacija zavrsi, ne moze nista drugo u medjuvremenu da se radi.
Kada se koristi non-blocking, za odredjene evente se definisu callback funkcije, "onData" ili "onComplete" i slicno, koji se trigeruju kada se taj event dogodi i nema stajanja "u mestu" izvrsavanja programa nego moze da se radi neka druga akcija a kada "stignu podaci" definisana callback funkcija se "okine". To se zove asinhrono izvsavanje programa (za blocking = sinhrono).
Dakle NodeJS je samo nadogradjen bazican JavaScript sa finim funkcijama za baratanje OS stvarima.

Node-webkit je dodatak na sve to koji dodaje kompletnu WEB podrsku u nasu aplikaciju. Browser engine koje se tu dodaje je baziran na Chromium (Windows-ov browser engine) a koji je nastao od Webkit engina (Safari za OS X).
U sustini to ne treba da vas nesto preterano tangira, bitno je da imate na raspolaganju kompletan browser sa svim standardnim stvarima koje se inace koriste na WEB-u.

PS: Video sam primere da direktno koriste NodeJS da programiraju kontrolere, u JavaScript pisu programe za MCU!!! Smile

NodeJS bas bas obecava, ima aktivan support, stalno se nesto na njemu radi i doraduje, ima svoj "npm" (Node Packet Manager) sa kojim se vrlo lako dodaju novi moduli iz njihovog repozitorijuma (ima na raspolaganju hiljade razlicitih modula).

Za sad jedini problematic koji sam video je nesto losija podrska za baratanje binarnim podacima, npr hocu da posaljem na seriski port karakter sa kodom 0xC1 sto u sustini nije ASCII karakter i onda mi on to pretvori u UTF-8 karakter (dva bajta) koji nisu to-to sto sam ja hteo. Mislim da je to vise moj problem nedovoljnog poznavanja ove platforme nego sto je realan problem, ali videcemo …

So far so good …
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)