[ Príspevkov: 19 ] 
AutorSpráva
Offline

Užívateľ
Užívateľ
Obrázok užívateľa

Registrovaný: 15.02.18
Prihlásený: 03.04.18
Príspevky: 10
Témy: 1 | 1

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.


Offline

Skúsený užívateľ
Skúsený užívateľ
Obrázok užívateľa

Registrovaný: 17.07.11
Prihlásený: 14.12.18
Príspevky: 1487
Témy: 2 | 2

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 :D

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!
Offline

Užívateľ
Užívateľ
Obrázok užívateľa

Registrovaný: 15.02.18
Prihlásený: 03.04.18
Príspevky: 10
Témy: 1 | 1
Napísal autor témyOffline : 20.02.2018 10:48 | "LIVE" kamera - časový údaj aktuálnej snímky

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.


Offline

Skúsený užívateľ
Skúsený užívateľ
Obrázok užívateľa

Registrovaný: 17.07.11
Prihlásený: 14.12.18
Príspevky: 1487
Témy: 2 | 2

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!
Offline

Užívateľ
Užívateľ
Obrázok užívateľa

Registrovaný: 15.02.18
Prihlásený: 03.04.18
Príspevky: 10
Témy: 1 | 1
Napísal autor témyOffline : 20.02.2018 11:42 | "LIVE" kamera - časový údaj aktuálnej snímky

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


Offline

Skúsený užívateľ
Skúsený užívateľ
Obrázok užívateľa

Registrovaný: 17.07.11
Prihlásený: 14.12.18
Príspevky: 1487
Témy: 2 | 2

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!
Offline

Užívateľ
Užívateľ
Obrázok užívateľa

Registrovaný: 15.02.18
Prihlásený: 03.04.18
Príspevky: 10
Témy: 1 | 1
Napísal autor témyOffline : 20.02.2018 12:32 | "LIVE" kamera - časový údaj aktuálnej snímky

Vrátil som a neuložil zmeny.. Teraz je to už tam, ale názov nevidím..


Offline

Skúsený užívateľ
Skúsený užívateľ
Obrázok užívateľa

Registrovaný: 17.07.11
Prihlásený: 14.12.18
Príspevky: 1487
Témy: 2 | 2

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:38

Pozerá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!
Offline

Užívateľ
Užívateľ
Obrázok užívateľa

Registrovaný: 15.02.18
Prihlásený: 03.04.18
Príspevky: 10
Témy: 1 | 1
Napísal autor témyOffline : 20.02.2018 14:12 | "LIVE" kamera - časový údaj aktuálnej snímky

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?


Offline

Skúsený užívateľ
Skúsený užívateľ
Obrázok užívateľa

Registrovaný: 17.07.11
Prihlásený: 14.12.18
Príspevky: 1487
Témy: 2 | 2

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!
Offline

Užívateľ
Užívateľ
Obrázok užívateľa

Registrovaný: 15.02.18
Prihlásený: 03.04.18
Príspevky: 10
Témy: 1 | 1
Napísal autor témyOffline : 20.02.2018 22:12 | "LIVE" kamera - časový údaj aktuálnej snímky

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.


Offline

Skúsený užívateľ
Skúsený užívateľ
Obrázok užívateľa

Registrovaný: 17.07.11
Prihlásený: 14.12.18
Príspevky: 1487
Témy: 2 | 2

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!
Offline

Užívateľ
Užívateľ
Obrázok užívateľa

Registrovaný: 15.02.18
Prihlásený: 03.04.18
Príspevky: 10
Témy: 1 | 1
Napísal autor témyOffline : 21.02.2018 9:36 | "LIVE" kamera - časový údaj aktuálnej snímky

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?


Offline

Skúsený užívateľ
Skúsený užívateľ
Obrázok užívateľa

Registrovaný: 17.07.11
Prihlásený: 14.12.18
Príspevky: 1487
Témy: 2 | 2

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ť :lol: 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!
Offline

Užívateľ
Užívateľ
Obrázok užívateľa

Registrovaný: 15.02.18
Prihlásený: 03.04.18
Príspevky: 10
Témy: 1 | 1
Napísal autor témyOffline : 21.02.2018 12:28 | "LIVE" kamera - časový údaj aktuálnej snímky

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.


Offline

Skúsený užívateľ
Skúsený užívateľ
Obrázok užívateľa

Registrovaný: 17.07.11
Prihlásený: 14.12.18
Príspevky: 1487
Témy: 2 | 2

Gratulujem :D

Č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!
Offline

Užívateľ
Užívateľ
Obrázok užívateľa

Registrovaný: 15.02.18
Prihlásený: 03.04.18
Príspevky: 10
Témy: 1 | 1
Napísal autor témyOffline : 21.02.2018 14:35 | "LIVE" kamera - časový údaj aktuálnej snímky

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.


Offline

Skúsený užívateľ
Skúsený užívateľ
Obrázok užívateľa

Registrovaný: 17.07.11
Prihlásený: 14.12.18
Príspevky: 1487
Témy: 2 | 2

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!
Offline

Užívateľ
Užívateľ
Obrázok užívateľa

Registrovaný: 15.02.18
Prihlásený: 03.04.18
Príspevky: 10
Témy: 1 | 1
Napísal autor témyOffline : 12.03.2018 15:00 | "LIVE" kamera - časový údaj aktuálnej snímky

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ť?


 [ Príspevkov: 19 ] 


"LIVE" kamera - časový údaj aktuálnej snímky



Podobné témy

 Témy  Odpovede  Zobrazenia  Posledný príspevok 
V tomto fóre nie sú ďalšie neprečítané témy.

Ktorý údaj je pravý

v nVidia grafické karty

8

449

23.05.2007 15:57

chester55555

V tomto fóre nie sú ďalšie neprečítané témy.

Trhá mi video snímky pri capture.

v Video programy

0

404

15.10.2007 20:27

DNA

V tomto fóre nie sú ďalšie neprečítané témy.

Tajné: první snímky prototypu hodinek Samsungu

[ Choď na stránku:Choď na stránku: 1, 2, 3 ]

v Novinky

65

1183

08.09.2013 12:52

Semp

V tomto fóre nie sú ďalšie neprečítané témy.

Ako v PhpMyAdmin zablokovat udaj ?

v PHP, ASP

4

267

30.05.2009 16:01

waltherold

V tomto fóre nie sú ďalšie neprečítané témy.

Google spustil na Slovensku panoramatické snímky Street View

[ Choď na stránku:Choď na stránku: 1, 2 ]

v Novinky

42

1726

02.11.2012 18:17

KingTommy

V tomto fóre nie sú ďalšie neprečítané témy.

UPGRADE Aktuálnej zostavy

v PC zostavy

17

347

05.02.2018 22:20

dark_globe

V tomto fóre nie sú ďalšie neprečítané témy.

EÚ považuje IP adresu za osobný údaj

v Novinky

2

266

22.01.2008 22:18

Shit

V tomto fóre nie sú ďalšie neprečítané témy.

Úprava aktuálnej zostavy/doplnenie

v PC zostavy

4

258

02.01.2014 8:59

castelL

V tomto fóre nie sú ďalšie neprečítané témy.

Vloženie aktuálnej stránky do dokumentu

v PHP, ASP

1

283

01.05.2007 10:50

p360t

V tomto fóre nie sú ďalšie neprečítané témy.

Skript na zobrazenie aktualnej adresy

v PHP, ASP

7

575

23.02.2007 18:33

--==[Lu-Boss]==--

V tomto fóre nie sú ďalšie neprečítané témy.

ICQ 6 - vymazanie aktualnej debatky

v Sieťové a internetové programy

0

242

09.03.2008 15:55

dulius

V tomto fóre nie sú ďalšie neprečítané témy.

Schéma: Časový spínač

v Elektronika

0

2408

23.01.2007 6:39

Elektronic

V tomto fóre nie sú ďalšie neprečítané témy.

Časový spínač 230V

v PC skrinky, zdroje a všetky druhy chladenia

7

800

24.02.2012 15:46

haffen

V tomto fóre nie sú ďalšie neprečítané témy.

MicroSD karta -nespravny udaj o kapacite na HP Ipaq 614C

v Ostatné zariadenia

0

881

20.04.2008 10:56

zyban

V tomto fóre nie sú ďalšie neprečítané témy.

výber aktualnej položky z <select>

v PHP, ASP

5

359

14.06.2009 22:04

mylan

V tomto fóre nie sú ďalšie neprečítané témy.

Schéma: Sekvenčný časový spínač

v Elektronika

1

1922

02.09.2015 14:24

FricoSK



© 2005 - 2018 PCforum, edited by JanoF