2. Fórumok
  3. Szoftverfejlesztés
  4. JavaScript topic
Keresés
  • Téma összefoglaló
    Utoljára frissítve: 2014-02-25 10:20

    Fototrend

    JavaScript != Java (A JavaScript nem összekeverendő a Javával, két különböző programozási nyelvről van szó!)

Új hozzászólás Aktív témák

  • #8165 Keem1 veterán Silεncε #8164
    Új Válasz #8165
    Új hozzászólás
    Összes hozzászólása itt Válaszok az összes hozzászólására itt Válaszok erre a hozzászólásra
    Privát üzenet küldése

    Keem1

    veterán

    válasz Silεncε #8164 üzenetére

    Neem, természetesen JSON a fogadott data.

    A "bajom" az, hogy beágyazott webserverrel kell dolgoznom (C# HTTPListener), így a HTML-en felüli dinamikus részt muszáj JSON API-val és kliensoldali scripttel megoldanom. Ez utóbbihoz viszont nem értek igazán, legalábbis eddig kevés dolgom volt még vele.

    $.getJSON(hubaddress+"/smarthomeapi/"+homeexternalid+"/devices", (responsejson) =>
    {
    $.each(responsejson, function (key, val)
    {
    console.log("Filling up devices box: " + val.displayname);
    $(".devices").append("<div><span class='icon icon"+val.devicekind+"' data-homeid='"+val.homeexternalid+"' data-deviceid='"+val.deviceid+"' data-action='ledtoggle'></span>"+val.displayname+"<small>"+val.manufacturer+"</small></div>");
    });
    });

  • #8163 Keem1 veterán martonx #8160
    Új Válasz #8163
    Új hozzászólás
    Összes hozzászólása itt Válaszok az összes hozzászólására itt Válaszok erre a hozzászólásra
    Privát üzenet küldése

    Keem1

    veterán

    válasz martonx #8160 üzenetére

    Igen, tegnap dobtam össze a pár HTML, CSS és JS kódot, szóval tegnap kezdtem a nulláról, a frontend részét legalábbis. A vezérlő apit, ami már C#, azt legalább egy hete hegesztem.

    Sokat agyaltam én is hogy mi legyen a frontend része. Ez egy családi-baráti projekt (egyelőre nem szánom publikusnak, de nem csak én használnám), ezért a natív android appot kizártam (egyrészt nem fejlesztettem még androidra, másrészt ágyúval veréb esete, harmadrészt rühellem az összes olyan appot, ami egy frankó webappal tökéletesen megoldható [meki kupon app :F ], negyedrészt kell több platform, és értelmetlen android, ios, windows külön alkalmazásokat gyártani, ha egyben egy frankó webes megoldással kivitelezhető).
    A frontend nagy része akár Apache+MySQL+PHP vonalon gyorsan és egyszerűen leprogramozható lenne, talán még frontend script nélkül is (bár ilyen esetben a page reload nem biztos sokat rontana a felhasználói élményen), de sajnos ez sem jöhet szóba. Van egy minimál JSON API-t kezelő C# service, mögötte egy SQLite database, ami eddig a pontig király. Már "csak" egy jó kis GUI-t kellene hozzá gyártanom.

    Eredetileg Angular volt a kiszemelt, de azt se ismerem semennyire. Nem tudtam, hogy a jquery már elavultnak számít (5-6 éve használtam, minimál saját kóddal, inkább internetes example bedolgozásával - elég volt a célhoz).
    Még nem biztos, hogy az eddigieket nem dolgozom át, de majd meglátjuk.

    Más:
    Hogy tudok eseményt rendelni (a fenti click) a dom-hoz ajax-szal hozzáadott objektumokhoz? A fenti, beégetett HTML-lel jól megy már a kapcsolás, viszont az egyes device-okat reprezentáló div-ek is ajax jsonból jönnének (és már jönnek is), de az oldal létrehozásakor nem létező objektumokra nem megy az event. Pedig pont egyszerű selectort választottam: css class. Azt hittem/reméltem, hogy ez a classhoz adja az eventet, függetlenül attól, hogy épp hány birtokolja a lapon, illetve utólag változik-e a számuk.

    Egyébként valami ilyesmi lesz a cél (csak példa):

    |-- Misi Home (https://192.168.0.xxx/misihome/ --- Raspberry Pi)
    |------------ Bejárati lámpa
    |------------ Hajdú bojler
    |------------ Nappali lámpa
    |-- Anett Home (https://192.168.0.xxx/anetthome/ --- Raspberry Pi)
    |------------ Fürdőszoba lámpa
    |------------ Hálószoba lámpa
    |------------ Nappali lámpa
    |-- Gyuri Home (https://192.168.0.xxx/gyurihome/ --- Raspberry Pi)
    |------------ Műhely lámpa
    |------------ Borotválkozós lámpa
    |------------ Nappali lámpa
    |------------ Kazán

  • #8159 Keem1 veterán cattus #8158
    Új Válasz #8159
    Új hozzászólás
    Összes hozzászólása itt Válaszok az összes hozzászólására itt Válaszok erre a hozzászólásra
    Privát üzenet küldése

    Keem1

    veterán

    válasz cattus #8158 üzenetére

    Ééés valóban ez a megoldás, hálásan köszönöm! :R

    Szerintem jövök még hozzátok, mivel a készülő smart home projectem backend része C#, abban azért otthon vagyok (igaz, nem vagyok ám programozó), de a GUI az HTML5 + javascript, emiatt biztos lesz szükségem segítségre.

  • #8157 Keem1 veterán cattus #8156
    Új Válasz #8157
    Új hozzászólás
    Összes hozzászólása itt Válaszok az összes hozzászólására itt Válaszok erre a hozzászólásra
    Privát üzenet küldése

    Keem1

    veterán

    válasz cattus #8156 üzenetére

    Hmm... valami ilyesmire gondolsz? (kis guglizás)

    $.getJSON(hubaddress+"/smarthomeapi/toggle/"+$(this).data("deviceid"), responsejson => function()
    //.....

    Mert sajnos az eredmény ugyanaz... :O

  • #8155 Keem1 veterán
    Új Válasz #8155
    Új hozzászólás
    Összes hozzászólása itt Válaszok az összes hozzászólására itt Válaszok erre a hozzászólásra
    Privát üzenet küldése

    Keem1

    veterán

    Srácok, a jQuery topik nem igazán aktív, így kicsit offként, de ide írom a problémámat.

    Adott ez a kódrészlet:
    $(document).ready(function()
    {
    $(".iconlamp").click(function()
    {
    if ($(this).data("deviceid") != null)
    {
    $.getJSON(hubaddress+"/smarthomeapi/toggle/"+$(this).data("deviceid"), function (responsejson)
    {
    $("#status").text(responsejson.displayname + (responsejson.state != true ? " kikapcsolva" : " bekapcsolva"));
    });
    }
    });
    });

    Ez pedig a related HTML:
    <h1>Smart Home</h1>
    <div class="devices">
    <div><span class="icon iconlamp" data-deviceid="vfNVnFFZX9XrAgQF"></span>Spotlight<small>SonOff</small></div>
    <div><span class="icon iconlamp" data-deviceid="twYSpcyO4Z2Dt9vX"></span>Desk Lamp<small>Xiaomi</small></div>
    <div><span class="icon iconboiler" data-deviceid="KSnlcaoerJkPv8xw"></span>Bojler<small>SonOff</small></div>
    </div>
    <div id="status"></div>

    Ez gyakorlatilag egy Sonoff mögötti lámpát kapcsolgat, frankón. Viszont, az API egy JSON-t ad vissza, amiben többek között benne van, hogy fel- vagy lekapcsolt állapotú-e a lámpa, ezt a GUI-n lévő ikonra is rávezetném (lekapcsolt, felkapcsolt lámpa ikon, pure css). De a $.getJSON alatt sehogysem tudom elérni a parent objektumokat, nekem igazából az AJAX fölötti, if-ben lévő $(this) kellene, de a xy.parent() se vezet eredményre, az xy.parent().parent() se működik, ezt halmozhatom akármeddig, az ajax objektumba beszorul az egész, följebb nem tudok menni.

    Tehát összefoglalva... Van pár div-em (jelenleg 3 db), amikben egy-egy lámpa ikon (inline-block span) a backgroundja. A span (majd később pedig a parent div, de ez most mellékes) elemre kattintva ki/bekapcsolom a lámpát (toggle API), amire visszajön egy JSON, benne az aktuális státusz (responsejson.state = true/false). Eddig minden fasza. Viszont a true/false alapján, az adott span-nek kéne a class listáját módosítani [addClass() / removeClass()], de nincs mit, mert a span objektumra nem tudok hogy hivatkozni. a $(this).parent() nem működik, folyamatosan a getJSON objektumot kapom vissza.

    Hogy tudnám ezt a problémát áthidalni? :R

Új hozzászólás Aktív témák