HTML, PHP, Javascript, ... gyakorlatok.

[kapu48]

HTML, PHP, Javascript, … Gyakorlatok.


Egyszerre kel tanulni a fenti 3 témakőrt.
Gyakorlásképen most, 1 ház Internetes vezérlőfelülete készül.
Gondolom, most mindenki ilyesmit fejleszt!

Még minden nagyon kezdetleges az oldalon.
Ezért szívesen veszek ötleteket, javaslatot, bírálatot!

Van, a Belépő lap ahonnan választhatsz merre mész tovább.
Most a téma a Lakásvezérlő oldal.
Még simán be lehet lépni. Majd élesben ezt lekel védeni valami biztonságos jelszó bekéréssel!
Itt látszik az egész lakás alaprajza. (Ide még kellenek ötletek, amiket megvalósítsak:)
Van további 3 oldal, ahol a lakás alaprajza fel van osztva 3 részre.
Minden lapon vannak gombok, amit a felhasználó oda húz, ahova szeretné.
(Kapcsoló, Csatlakozó, Redőnyvezérlés, Hőmérő, Indikátor?, Riasztó!)
Ez eddig van készen.

Mi kel még egy ilyen projectbe?
(Most veszem észre, hogy a Fűtésvezérlő még hiányzik!)

Szóval van még mit fejleszteni.
És a cím ahol mindez megnézhető: http://kapu48.atw.hu/




ui.(A címben a 3pont helyére bekerült valami katyvasz!)

[broland]

Szia Kapu48

Csak a webes részhez: a házat mint háttérképet használnék, balra elforgatva. a falak vonalát css / div alapokon megrajzolnám, később ezekbe a boxokba lehetne belerakni a szükséges vezérlő gombokat, és kijelzett értékeket, ezt is css alapon, könnyen pozicionálva stb. A felhasználónak szerintem nem kellene tudni húzkodni. Ezek helye lehetne akár egy config file-ban. A klikk esetén az éppen aktuális gombhoz tartozó beállító popup nyílna meg. hogy ez mit tartalmaz, az a meghívó gombtól függ.

kiegészítés 1:
Az összes beállítható adatot tömbben tárolnék, javascript végzi az adatok módosítását, majd amikor mindent beállított az ember, egy elküld gomb, ami végrehajtja a kontrollerben a módosításokat.
kiegészítés vége.

Ebben a részében szívesen kódolok.

Üdv Broland

[kapu48]

Nem is tudom?
Minden háznak (lakásnak) más az alaprajza.
Amit a tervező már elkészít. Ha szerencsénk van, csak bekel scenelni.
A felhasználó meg havonta máshova rakja az ágyát, nem fogom mindig utána húzni a konektórt.

Lesz minden gombnak neve és Státusa + ami kel.
A további 3 lapon már be vannak forgatva az alaprajzok.
Meg már ott a GO gombís csak még nincsen mit hova küldeni.

A javaslatod többi részén éppen dolgozóm.
De a segítség +ötletek mindig jól jön!

[kapu48]

A kályha ahonnan elindultam:
http://www.html5canvastutorials.com/kin ... kineticjs/

Ezt kellene tovább fejleszteni!

Itt már szinte minden készen van, csak megkel tanulni kezelni:
http://www.html5canvastutorials.com/lib ... -v4.0.1.js

[SzLacus]

Bocs, rossz helyre csusszant a hozzászólási kísérlet.

[DOGMAN]

Én a grafikus felületet jQueryvel csinálnám meg: http://jqueryui.com/effect/
Nagy előnye, hogy egy ingyenes és kész keret amit folyamatosan frissítenek bővítenek. És mobil(okos) telefonokon is frankón eldöcög.

Leírhatnád, hogy a további felépítés milyen rétegekből áll:
1. kliensoldal -> böngésző (pl jQuery)
2. szerver oldal -> egy PC a házban valahol, internetre/LAN-ra kötve?
3. szerver hardveresen (pl USB_to_RS232) van kötve a mikrokontrollerhez?

2 és 3 közé én írnék egy programot ami adott időnként (kb 1 sec) az Apache által lementett adatokat (txt, mysql) kitolja soros portra.

[kapu48]

Szia! Köszi a tippeket, tanulmányozom.

1. Nem tudom, a felhasználó dönti el. (Laptop MACOS?)
2. PC nem lesz. A vezérlő: AVR M128 SPI + WIZ810 + MMC

3. Még mindez csak fejlesztés allat.

Remélem sikerül összehozni!

[Robert]

Kliensoldal:

Böngészőben legyen javascript támogatás.

Azaz a nyitóoldaladon egy Javascripttel menj a következő oldalra. Ha nem megy/nem működik: az oldal frissítsen (a meta refresh taggal pl.), hogy Javascript támogatás _kell_ a működéshez.
A javascript előnye:
- süti/adatkezelés a kliens oldalon (felhasználónév, lejárati idő, stb)
- adatátadás a lapok közt
- dinamikus adat/képkezelés a kliens oldalon (minden 1x letöltesz, utána a böngésző csak betöltögeti)...

[kapu48]

(Könyvjelző) Link gyűjtemény, a fent nevezet témákhoz:

HTML TANFOLYAM
HTML TANFOLYAM – KataPorta: http://www.kataporta.net/tanf/
HTML alapok: http://progkor.inf.elte.hu/html/alapok.htm
HTML és CSS oktatás ingyenesen: http://www.standardsmode.hu/#toc
Tamás Ferenc: http://tferi.hu/html-konyv (Ez 1 kitűnő tudományos gyűjtemény!)
HTML Tutorial - (HTML5 Compliant): http://www.w3schools.com/html/default.asp
december.com : http://www.december.com/html/
Az összes "html szín név" (és annak RGB kódja): http://progkor.inf.elte.hu/html/szinek.htm

PHP leckék:
php leckék KataPorta: http://www.kataporta.net/php/ Jobb ha ide regisztrálsz a saját neveden!)
PHP Tutorial: http://www.w3schools.com/php/default.asp
PHP Kézikönyv: http://www.kando-kkt.sulinet.hu/mirror/phphu/index.html
PHP tanfolyam: http://php.webprog.biz/phptanfolyam
PHP Manual: http://www.php.net/manual/en/index.php
Rím Elek, PHP: http://rimelek.hu/category/prog/php (Rutin gyűjtemény.)

JavaScript
Juray Tamás: http://www.kando-kkt.sulinet.hu/mirror/jshu/index.htm
Rím Elek, JavaScript: http://rimelek.hu/category/prog/javascript

Grafikus Libraryk:
Raphaël—JavaScript Library: http://raphaeljs.com/
Scalable Vector Graphics (SVG): http://www.w3.org/TR/SVG/
HTML5 Canvas: http://www.html5canvastutorials.com/tut ... roduction/

Fórum: http://www.kataporta.net/forum.php?cont ... Ips2WJAegs

Ha tudsz Te is hasonló oldalakról? Légyszíves oszd meg velünk!

[CsendesJ]

Szia Kapu48,

Kicsit régi már a téma, de kíváncsi lennék, hogy akkor/azóta mire jutottál.
Vagyis:
-működik-e a rendszered?
-sikerült-e az eredeti elképzelést megvalósítanod, vagy valamilyen limitáció miatt (pl AVR memória méret) csak lényegesen egyszerűbben/butábban tudtad megoldani a feladatot?

[kapu48]

Szia!
A project már használatban van. (Több új épületben, Osztrák területen.)

A Proci végül AVR 2560-ra lett cserélve.
A grafikus kijelző végül csak 2 színű GLCD lett menüvezérléssel. (Takarékossági megfontolásból, mivel ebből minden helyiségbe kellet 1-2.)
Minden feladatot megoldottunk, valamilyen módón. Szinte minden elektromos berendezést vezérel a lakásba. Természetesen távolról is vezérelhető.
Az egyedi épülethez mért beállítassa PC-n történik, és SD kártyán lettek az tárolva az adatok.

Sajnos közben a megrendelő üzleti megfontolásból, megkért, hogy ne közöljek több részletet.
És mivel komoly visszatérő ügyfélről van szó, ezt illik betartani!

[CsendesJ]

Ok, köszi a visszajelzést, akkor nem kíváncsiskodom tovább
Annak viszont örülök, hogy nagyobb korlátozásba nem futottál bele, illetve az megkerülhető volt.