Hirdetés
-
LOGOUT.hu
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
-
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>");
});
});[ Szerkesztve ]
-
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 ], 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[ Szerkesztve ]
-
Keem1
veterán
Ééés valóban ez a megoldás, hálásan köszönöm!
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.
[ Szerkesztve ]
-
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?
Új hozzászólás Aktív témák
Hirdetés
- Videós, mozgóképes topik
- Witcher topik
- Cyberpunk 2077
- Mobil flották
- Telekom otthoni szolgáltatások (TV, internet, telefon)
- Kamionok, fuvarozás, logisztika topik
- WLAN, WiFi, vezeték nélküli hálózat
- Android alkalmazások - szoftver kibeszélő topik
- iPhone topik
- Redmi Watch 4 - olcsó hús, sűrű a leve
- További aktív témák...
Állásajánlatok
Cég: PCMENTOR SZERVIZ KFT.
Város: Budapest