| | |
| Stránka: 1 z 1
| [ Príspevkov: 19 ] | |
Autor | Správa |
---|
Registrovaný: 15.02.18 Prihlásený: 03.04.18 Príspevky: 10 Témy: 1 | Napísal H107: 15.02.2018 11:32 | |
|
Zdravím, mám stránku, na ktorej java script v pravidelnom intervale aktualizuje obrázok zasielaný z IP kamery cez FTP na server. Link na obrázok pre java script zabezpečuje samostatné php z dôvodu, že kamera vie posielať len obrázky vždy s iným názvom (v tvare: číslo-kamery(názov-kamery)_X_RRRRMMDDHHMMSS_poradové-číslo.jpg). Chcel by som, aby sa pod zobrazovaným obrázkom zobrazoval aj časový údaj jeho vytvorenia, resp. stačila by aj časť názvu (RRRRMMDDHHMMSS). Tu sú kódy: java Kód: <script type="text/javascript"> refreshImage = function(){ img = document.getElementById("K1"); img.src="kamera-1.php?rand=" + Math.random(); } window.onload=window.setInterval(refreshImage, 1*1000); </script> <style> .rotate180 { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); </style> </head> <body> <div class="rotate180"> <img id="K1" src="kamera-1.php" alt="kamera-1" /> </div> </body> kamera-1.php Kód: <?php if ($handle=opendir('./kamera-1/')) { while ($file = readdir($handle)) { $polozky[count($polozky)] = $file; } closedir($handle); sort($polozky); $i = sizeof($polozky); $link= 'kamera-1/'.$polozky[$i-2]; header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$link); exit(); } reset($polozky); ?> Celé som to poskladal podľa rôznych návodov z netu, som v tejto oblasti laik a preto píšem sem. Vedel by mi niekto poradiť? Vďaka.
|
|
Registrovaný: 17.07.11 Prihlásený: 29.12.20 Príspevky: 1516 Témy: 3 | Napísal BX: 16.02.2018 10:20 | |
|
Ako prvé ma narýchlo zaujalo toto $polozky[count($polozky)] = $file; stačí napísať ako $polozky[] = $file; Ale nie to sme chceli... Keďže to robíš takto, že nastavuješ len .img atribút, tak tam nemáš veľmi priestor, kde prepašovať nejakú hodnotu naviac (teda ten čas). Mňa napadajú dva riešenia, ale napíšem len jedno, lebo je jednoduchšie a zaujímavejšie 1. Php kód zmeň tak, aby skript servíroval priamo jpeg. Takže headre čo tam sú zmaž a daj tam toto: Kód: header("mytime: " . $polozky[$i-2]); header("Content-type: image/jpeg"); return file_get_contents($link);
Tým odošleš priamo obrázok a s ním ešte aj názov súboru, v ktorom je tvoj čas (neskôr ho môžeme ešte z názvu súboru vydlabať, ale zatiaľ stačí celý názov) 2. Na stránku si pridaj jQuery ak nemáš https://jquery.com/ Takže toto na začiatok stránky, ideálne do <head></head> Kód: <script src="http://code.jquery.com/jquery-3.3.1.min.js"></script> 3. Do javascriptu hneď za riadok img.src= pridaj toto: Kód: $.get("kamera-1.php?rand=" + Math.random()) .done(function(d, s, h) { var headers = h.getAllResponseHeaders(); //vezmem vsetky headre var rx = /mytime: ([^\s]+)/; //pripravim regex var match = rx.exec(headers);
var filename = match[1]; //vezmem match v zatvorke, to je nazov suboru
$('#K1').append( $('<div>').html(filename) ); //vypisem nazov suboru za obrazok, toto si mozes upravit ako chces })
Úrobí to síce dva requesty, takže je otázka, či to vezme naozaj vždy ten istý obrázok - to záleží na tom, ako často sype kamera obrázky na ftp. Teoreticky sa môže stať, že do obrázku sa nahrá jeden a cez $.get sa stiahne už nasledujúci, ale to by ti nemuselo vadiť, či? Ak kamera nahráva napr jeden obrázok za sekundu, tak v 99.9% prípadoch sa to nestane, takže 99.9% času sa to bude zobrazovať správne. Môže sa to urobiť aj synchronizovane, že sa aj obrázok zobrazí z $.get, ale príde mi to zbytočné. pozn. kódy som netestoval, snáď som neurobil nejaké preklepy
_________________ Na súkromné správy týkajúce sa problémov, ktoré sa riešia vo fóre, neodpovedám! |
|
Registrovaný: 15.02.18 Prihlásený: 03.04.18 Príspevky: 10 Témy: 1 | Napísal autor témy H107: 20.02.2018 10:48 | |
|
Veľmi pekne ďakujem za rady. Nedopracoval som sa ale k výsledku. Postupoval som takto: 1. php som upravil na: Kód: <?php if ($handle=opendir('./kamera-1/')) { while ($file = readdir($handle)) { $polozky[count($polozky)] = $file; } closedir($handle); sort($polozky); $i = sizeof($polozky); $link= 'kamera-1/'.$polozky[$i-2]; header("mytime: " . $polozky[$i-2]); header("Content-type: image/jpeg"); return file_get_contents($link); exit(); } reset($polozky); ?> 2. pridal som Kód: <script src="http://code.jquery.com/jquery-3.3.1.min.js"></script> stačí len to, alebo je potrebné niečo viac (niečo inštalovať a pod.)? 3. kam presne dať javascript kód? priamo za Kód: <script type="text/javascript"> refreshImage = function(){ img = document.getElementById("K1"); img.src= alebo až za celý riadok Kód: img.src="kamera-1.php?rand=" + Math.random(); Skúšal som to rôzne, princípu ako tak rozumiem, ale skladbe veľmi nie.. Poprosím o podrobnejší návod (aj keď to vyzerá celkom jednoducho . Inak, výsledok bol, že sa na stránke nezobrazoval ani názov ani samotný obrázok.. Vďaka.
|
|
Registrovaný: 17.07.11 Prihlásený: 29.12.20 Príspevky: 1516 Témy: 3 | Napísal BX: 20.02.2018 10:57 | |
|
Bod 1 a 2 súhlasí. Skús keď tak namiesto return pred file_get_contents... dať echo Kód: echo file_get_contents($link); a hlavne skontroluj, či sa na tej adrese obrázok zobrazí v prehliadači (naťukaj tú adresu normálne do url v prehliadači a mal by sa zobraziť obrázok) V bode dva sa presvedč, že si ten riadok pridal PRED ten javascript, ktorý som napísal ja (to len pre istotu, nesmie to byť až za ním) V bode tri samozrejme až za celý riadok Ďalej si otvor javascript konzolu (bežne je to F12 a záložka Console, v Safari treba ísť cez Developer tools), zobraz stránku a ak sa nič nezobrazí, pošli sem to, čo ti vypíše konzola. Ideálne by bolo, keby si to mal na internete a mohol sem poslať url tej stránky, nech to vidim aj ja...
_________________ Na súkromné správy týkajúce sa problémov, ktoré sa riešia vo fóre, neodpovedám! |
|
Registrovaný: 15.02.18 Prihlásený: 03.04.18 Príspevky: 10 Témy: 1 | Napísal autor témy H107: 20.02.2018 11:42 | |
|
Tak, keď tam je echo, tak sa obrázok zobrazuje. Ak však zmením javascript zobrazí sa otočený o 180° (len pre vysvetlenie: fyzicky je kamera naopak, ukotvená k podhľadu pod strechou, obraz sa dá otočiť aj programovo priamo v nej, ale nemám k nej momentálne prístup a preto obraz otáčam kódom na stránke..). Názov sa nezobrazuje. Ešte dodám, že stránka beží cez "free" službu a spravujem ju cez redakčný systém WordPress. V zdrojovom kóde vidím aj nejaké riadky s jquery... Pre úplnosť ešte dodám, že ide o "bezpečnostnú" kameru na chalupe, snímky posiela každú sekundu, pričom stránku mám len na náhodné sledovanie priestoru odkiaľkoľvek. Ďalej používam WP plugin na zálohovanie snímok každú hodinu s ukladaním na GDrive (sekundový interval zabezpečí aký-takí prehľad pri spätnom prezeraní). Tu je odkaz: http://h107.wz.sk/Heslo v správe
|
|
Registrovaný: 17.07.11 Prihlásený: 29.12.20 Príspevky: 1516 Témy: 3 | Napísal BX: 20.02.2018 12:04 | |
|
Tak jquery už tam máš v rámci wordpressu, takže to čo som písal už pridávať nemusíš...
Nikde tam ten svoj kód pridaný nevidím a obrázok vidím správne otočený... Inak php časť vyzerá správne, header správne posiela názov súboru, takže to je ok.
_________________ Na súkromné správy týkajúce sa problémov, ktoré sa riešia vo fóre, neodpovedám! |
|
Registrovaný: 15.02.18 Prihlásený: 03.04.18 Príspevky: 10 Témy: 1 | Napísal autor témy H107: 20.02.2018 12:32 | |
|
Vrátil som a neuložil zmeny.. Teraz je to už tam, ale názov nevidím..
|
|
Registrovaný: 17.07.11 Prihlásený: 29.12.20 Príspevky: 1516 Témy: 3 | Napísal BX: 20.02.2018 12:46 | |
|
Wordpress editor ti tam hlúpo pridáva tagy, pozri čo máš v zdrojovom kóde (pozri CTRL+U) Kód: refreshImage = function(){ img = document.getElementById("K1"); img.src="kamera-1.php?rand=" + Math.random();</p> <p>$.get("kamera-1.php?rand=" + Math.random()) .done(function(d, s, h) { var headers = h.getAllResponseHeaders(); //vezmem vsetky headre var rx = /mytime: ([^\s]+)/; //pripravim regex var match = rx.exec(headers);</p> <p> var filename = match[1]; //vezmem match v zatvorke, to je nazov suboru</p> <p> $('#K1').append( $('</p> <div>').html(filename) ); //vypisem nazov suboru za obrazok, toto si mozes upravit ako chces })</p> <p> } window.onload=window.setInterval(refreshImage, 1*1000);
Tie <p> </p> tam nemajú čo robiť. Skús sa toho nejak zbaviť. Možno pomôže používať shift+enter pre nový riadok, aby to nezačalo nový odsek. Alebo prepni z WYSIWYG na HTML editor. // Spojený príspevok Uto 20.02.18 13:38Pozerám, že už je to opravené, ale ešte jedna maličkosť - je dôležité, aby toto Kód: $('#K1').append( $('</p> <div>').html(filename) ); bolo na jednom riadku (javascript nemá rád stringy cez viac riadkov) A tiež som si trochu pomýlil funkciu, treba použiť after a až po tom rotate180 (daj tomu divu id, ak ich tam bude viac) takže ideálne takto Kód: $('.rotate180').after( $('<div>').html(filename) );
_________________ Na súkromné správy týkajúce sa problémov, ktoré sa riešia vo fóre, neodpovedám! |
|
Registrovaný: 15.02.18 Prihlásený: 03.04.18 Príspevky: 10 Témy: 1 | Napísal autor témy H107: 20.02.2018 14:12 | |
|
Pracujem v HTML editore, skúšal som aj shift+enter a stále tam tie <p> </p> ostávajú. Pomôže celé to prepísať? Alebo ako by sa to ešte dalo?
|
|
Registrovaný: 17.07.11 Prihlásený: 29.12.20 Príspevky: 1516 Témy: 3 | Napísal BX: 20.02.2018 14:15 | |
|
Pred chvíľou som sa tam pozeral a neboli tam. V HTML editore to musí ísť. Nejak sa ich musíš zbaviť, inak to nejde. A pozri predchádzajúcu odpoveď, doplnil som ju.
_________________ Na súkromné správy týkajúce sa problémov, ktoré sa riešia vo fóre, neodpovedám! |
|
Registrovaný: 15.02.18 Prihlásený: 03.04.18 Príspevky: 10 Témy: 1 | Napísal autor témy H107: 20.02.2018 22:12 | |
|
Odtiaľto sa mi nedarí dostať </p> preč: Kód: $('#K1').append( $('</p> <div>').html(filename) ); Aj v iných častiach to raz je potom nie, tak neviem... Budem to skúšať ďalej, ak sa mi podarí "očistiť" to, ozvem sa. Vďaka.
|
|
Registrovaný: 17.07.11 Prihlásený: 29.12.20 Príspevky: 1516 Témy: 3 | Napísal BX: 21.02.2018 8:38 | |
|
Pozri moju pzredchádzajúcu odpoveď, doplnil som ju. Daj to na jeden riadok, nesmie to byť cez dva. A zmeň tam tú funkciu.
_________________ Na súkromné správy týkajúce sa problémov, ktoré sa riešia vo fóre, neodpovedám! |
|
Registrovaný: 15.02.18 Prihlásený: 03.04.18 Príspevky: 10 Témy: 1 | Napísal autor témy H107: 21.02.2018 9:36 | |
|
Musel som do WP doinštalovať modul, ktorý zabezpečuje, že vložený kód nie je ďalej automaticky upravovaný.. Takže teraz to je už v poriadku, pokiaľ ide o nadbytočne tagy.
Stále sa však názov nezobrazuje, aj po oprave tej funkcie. Čo skúsiť ďalej?
|
|
Registrovaný: 17.07.11 Prihlásený: 29.12.20 Príspevky: 1516 Témy: 3 | Napísal BX: 21.02.2018 10:11 | |
|
Ešte je tam problém s jQuery, zase asi nejaká Wordpress špecialita... znak dolára prepíš všade na jQuery a už to bude fungovať Kód: jQuery.get("kamera-1.php?rand=" + Math.random()) .done(function(d, s, h) { var headers = h.getAllResponseHeaders(); var rx = /mytime: ([^\s]+)/; var match = rx.exec(headers); var filename = match[1]; jQuery('.rotate180').after( jQuery('<div>').html(filename) ); })
Ale ešte to aj tak chce doladiť takto sa bude stále pridávať nový element a pod obe kamery rovnaký... Takže ešte pod obrázok kamery pridaj nejaký div s id-čkom a riadok, kde zapisuješ filename uprav takto, aby sa stále prepisoval ten istý element Kód: jQuery('#tuMaIstJedinecneIdDivuPreNazovSuboru').html(filename);
A až to bude fungovať, tak ešte môžeme vydlabať čas z názvu, nech je krajší...
_________________ Na súkromné správy týkajúce sa problémov, ktoré sa riešia vo fóre, neodpovedám! |
|
Registrovaný: 15.02.18 Prihlásený: 03.04.18 Príspevky: 10 Témy: 1 | Napísal autor témy H107: 21.02.2018 12:28 | |
|
SUPER!!! Podarilo sa, názov sa pod snímkou zobrazuje a aktualizuje sa spolu s ňou. Ešte poznámka k: "... Teoreticky sa môže stať, že do obrázku sa nahrá jeden a cez $.get sa stiahne už nasledujúci.." toto vôbec nevadí, hlavným cieľom je vidieť, že kamera je "živá". Niekedy nie je možné postrehnúť, či sa snímka mení a prípadný výpadok (na strane kamery) som mohol zaregistrovať až po hodine, keď sa (po zálohovaní a vymazaní) nič nezobrazilo.. Snímka sa aktualizuje cca každú 1 sekundu, takže malý nesúlad je OK.
Veľmi pekne ďakujem za tvoj čas a pomoc. A ak by si si našiel chvíľu na vydolovanie dátumu/času z názvu, budem rád.
Ešte raz, vďaka.
|
|
Registrovaný: 17.07.11 Prihlásený: 29.12.20 Príspevky: 1516 Témy: 3 | Napísal BX: 21.02.2018 13:15 | |
|
Gratulujem Čas môžeš vydolovať v php časti napr takto Kód: $filename = $polozky[$i-2]; if(preg_match('#_(\d\d\d\d\d\d+)_#', $filename, $m)) { $time = date_create_from_format('YmdHis', $m[1])->getTimestamp(); $filename = date('j. n. Y H:i:s', $time); }
Daj to pred headre a miesto $polozky[$i-2] v headri mytime použi $filename.
_________________ Na súkromné správy týkajúce sa problémov, ktoré sa riešia vo fóre, neodpovedám! |
|
Registrovaný: 15.02.18 Prihlásený: 03.04.18 Príspevky: 10 Témy: 1 | Napísal autor témy H107: 21.02.2018 14:35 | |
|
Je to tam, akurát najprv sa zobrazoval len deň, spôsobovala to medzera. Po odstránení všetkých medzier a pridaní "&\nb\sp" medzi dátum a čas je to už v poriadku. Vďaka.
|
|
Registrovaný: 17.07.11 Prihlásený: 29.12.20 Príspevky: 1516 Témy: 3 | Napísal BX: 22.02.2018 10:14 | |
|
Rado sa stalo, mám rád takéto srandy
_________________ Na súkromné správy týkajúce sa problémov, ktoré sa riešia vo fóre, neodpovedám! |
|
Registrovaný: 15.02.18 Prihlásený: 03.04.18 Príspevky: 10 Témy: 1 | Napísal autor témy H107: 12.03.2018 15:00 | |
|
Tak som tu zas a znova ide o časový údaj.
Tentokrát by som potreboval vyriešiť, aby kamera-1.php nezoraďoval snímky podľa celého názvu (podľa ktorého potom zobrazujem "najnovšiu" snímku), ale práve podľa času vzniku (ktorý sa mi pod snímku podarilo dostať z názvu súboru s pomocou BX-a). Nastáva totiž situácia, keď pri detekcii pohybu, resp. pri externom alarme kamera cez FTP posiela snímky s iným indexom X (v strede reťazca: číslo-kamery(názov-kamery)_X_RRRRMMDDHHMMSS_poradové-číslo.jpg) a aj keď sú tieto snímky novšie na stránke sa zobrazuje posledná snímka s indexom X-1.
Čo by sa s tým dalo robiť?
|
|
| Stránka: 1 z 1
| [ Príspevkov: 19 ] | |
| Nemôžete zakladať nové témy v tomto fóre Nemôžete odpovedať na témy v tomto fóre Nemôžete upravovať svoje príspevky v tomto fóre Nemôžete mazať svoje príspevky v tomto fóre
|
|