Data z JSONu na HTML stránku

Webdesign, HTML, CSS, Flash, PHP, ASP, .NET, JavaScript. Kritika www stránek na Smetišti.

Moderátor: Moderátoři Živě.cz

Odeslat příspěvekod jakub.michalek 1. 7. 2019 13:41

Zdravím vás,

provozuji doma jednoduchou meteostanici postavenou na ESP8266, která každých 15 minut odesílá data do Google Tabulky na mém Google disku. Pomocí nástroje GSX2JSON si data z této tabulky převádím do formátu JSON - data v tomto formátu běží v podstatě na další webové stránce: https://bit.ly/2NnezzH. Teď však nastává problém, který bych potřeboval vyřešit: existuje nějaká možnost, jak JSON data z tohoto odkazu zobrazit na webové stránce (jedná se v podstatě o jakýsi dashboard) napsané v HTML tak, aby z toho nebyl guláš v závorkách a mělo to nějakou kulturu? Popravdě, Google jsem prohledal, ale nenašel jsem žádnou rozumnou cestu.

Děkuji za pomoc, JM.
jakub.michalek
Kolemjdoucí

Odeslat příspěvekod JirkaVejrazka 1. 7. 2019 14:26

Je to trivialni s libovolnym skriptovacim jazykem na strane weboveho serveru. Perl, Python, PHP, Ruby, node.js, ... - staci zjistit, co umi ten server, na kterem chces ta data zobrazit a pak najit navod pro dany jazyk.
JirkaVejrazka
Mírně pokročilý

Odeslat příspěvekod jakub.michalek 1. 7. 2019 19:15

Děkuji za odpověď, nicméně... nebyl by nějaký konkrétní příklad? Popravdě, úplně jsem nepochopil ten důraz "zjistit, co daný server umí." Jedná se o klasickou webovou stránku napsanou v HTML (napsanou mou osobou), u které mám pouze jediné přání: přeměnit ten guláš v závorkách z JSONu do něčeho lehce kultivovanějšího ve stylu:

Teplota: XX.XX °C
Vlhkost: XX.XX %
Světlo: XXX lx.
jakub.michalek
Kolemjdoucí

Odeslat příspěvekod Kledr 1. 7. 2019 21:55

Umi pracovat i primo s google tabulkou...

https://developers.google.com/chart/int ... /linechart
Kledr
Junior
Uživatelský avatar

Odeslat příspěvekod Emil Pastelka 2. 7. 2019 00:44

Tady jsem udělal jednoduchý příklad. Je to celkem popisné.
https://codepen.io/pastelka/pen/GbxxqN

A teď se dívám, že to tam koliduje http/https. Pokud to budete načítat na serveru, který nemá https, upravte zdrojový odkaz v JS na http.
Emil Pastelka
Junior
Uživatelský avatar

Odeslat příspěvekod jakub.michalek 2. 7. 2019 13:27

Moc díky za ochotu a za napsání příkladu. Nicméně, zkoušel jsem zaměnit u adresy, odkud načítám JSON data, https za http, ale stále je tam prázdno, i když pod tím externím odkazem nějaké hodnoty jsou (i když ta meteostanice momentálně neběží). Byl by mi někdo schopný poradit, kde je problém? Uvědomuji si, že se asi jedná o lehce stupidní dotazy, nicméně s tímhle jsem si začal hrát docela nedávno. :-[
jakub.michalek
Kolemjdoucí

Odeslat příspěvekod Emil Pastelka 2. 7. 2019 18:45

Problém bude asi v té části, kde běží vaše HTML. XMLHttpRequest nefunguje na lokálním PC. Předpokládal jsem, že někde online hostujete stránky. Nicméně je možné, že to spouštíte na vlastním PC - toto je třeba říci a popsat hned, kde vlastně to html provozujete.
Pokud by se jednalo o lokální síť bylo by potřeba zvolit jiné řešení. Pokuste se vše popsat co nejpřesněji.
Emil Pastelka
Junior
Uživatelský avatar

Odeslat příspěvekod jakub.michalek 2. 7. 2019 23:09

Fajn, je fakt, že jsem to mohl detailněji popsat hned na začátku, což jsem neudělal a omlouvám se, nicméně doplňuji. Všechno se to skládá v podstatě ze dvou zařízení - meteostanice postavené na čipu ESP8266 a Raspberry Pi Zero W, kde mi pod apache2 běží právě ona jednoduchá webová stránka, kde chci zobrazit v nějakém kultivovaném formátu ta data. Meteostanice každých 15 minut změří teplotu, vlhkost a tlak a tyto údaje pomocí Wi-Fi odešle do Google Tabulky na mém Google Disku. Vzhledem k tomu, že jsem v samotných Google Tabulkách nenašel nějaký jednoduchý způsob, jak zdejší data převést do formátu JSON, použil jsem na to právě nástroj GSX2JSON, který tak učiní - jak jsem již uváděl výše, je to na tomto odkazu. No, a data právě z tohoto odkazu chci nějakým rozumným způsobem vypsat na oné jednoduché webové stránce, která mi běží na Raspberry Pi Zero W - o tom jsem psal výše v této odpovědi. Doufám, že to takhle bude stačit, pokud ne, zkusím to nějak více rozvést.
jakub.michalek
Kolemjdoucí

Odeslat příspěvekod Doggg 3. 7. 2019 06:16

Není nějaký jednodušší způsob jak dostat data z Google sheetu do HTML než json? Jenom jestli se s tím netrapis zbytečně...
Doggg
Junior

Odeslat příspěvekod JirkaVejrazka 3. 7. 2019 09:37

Muzes si na RPi pustit jednoduchou ulohu, ktera kazdych 5 minut stahne JSON z tveho odkazu, vybere z nej data, ktera te zajimaji a pak to ulozi to jednoducheho HTML souboru na disk. Ten pak muzes pouzit primo, nebo vlozit do sve HTML stranky.

Na RPi je skoro urcite nainstalovany Python. Kdyz mi sem hodis ukazku toho JSON souboru a napises, ktera data te zajimaji, klidne ti to napisu.

EDIT: konecne jsem se podival na ten odkaz s JSON daty - tohle je fakt trivialni. Zjisti, jestli mas na RPi funkcni Python a ozvi se.
JirkaVejrazka
Mírně pokročilý

Odeslat příspěvekod jakub.michalek 3. 7. 2019 14:10

Doggg: No, obávám se, že kromě vytvoření iframu celé té tabulky, který bych vložil na tu svou stránku, jednodušší způsob není - resp. na internetu existuje spousta návodů, jak to udělat přes Google Script, problém je v tom, že v Google Scriptu už mám napsaný kód, aby ta tabulka vůbec byla schopná přijímat data z té meteostanice, a když jsem se to ještě snažil nějak smíchat s přepisem do JSONu, tak se to spolu dost pralo a buď fungovalo přijímání dat, nebo JSON, obojí dohromady ne.

JirkaVejrazka: Na RPi samozřejmě Python funkční mám, používám ho k provozu něčeho jako bezpečnostní kamery. Ta možnost stahování dat do HTML souboru na disk zní docela jednoduše, pokud by tedy byla možnost mě nějak nakopnout, byl bych rád. Díky.
jakub.michalek
Kolemjdoucí

Odeslat příspěvekod JirkaVejrazka 3. 7. 2019 15:01

Tady mas jednoduchy Python3 skript, ktery stahne data a udela z nich Python slovnik. Ten se pak da jednoduse ulozit do libovolneho HTML souboru (klidne poradim, jen nevim jak by pro tebe mel vypadat).

http://dpaste.com/1254J3Y

Tohle muzes volat z cronu treba kazdych 5 minut
JirkaVejrazka
Mírně pokročilý

Odeslat příspěvekod jakub.michalek 18. 7. 2019 23:17

Emil Pastelka píše:Tady jsem udělal jednoduchý příklad. Je to celkem popisné.
https://codepen.io/pastelka/pen/GbxxqN

A teď se dívám, že to tam koliduje http/https. Pokud to budete načítat na serveru, který nemá https, upravte zdrojový odkaz v JS na http.


Ještě jednou se k téhle problematice vrátím. Zkusil jsem si ten příklad, který jste mi posílal, hodit do cvičného HTML souboru a spustit. Nakonec se to chytlo a data to korektně zobrazuje. Moje otázka ale zní: dal by se ten příklad upravit tak, aby se ta data dala zobrazit místo v tabulce jako klasický plain text? Hledal jsem i na Googlu, ale všude se mi podařilo najít akorát způsob s tabulkou.
jakub.michalek
Kolemjdoucí


Kdo je online

Uživatelé procházející toto fórum: Žádní registrovaní uživatelé a 0 návštevníků