Node-red – HTML / XHTML – Fórum – Programujte.com

Dobrý den. Začal jsem si hrát s Node-red.
Jako automatizace je ok a jsem docela spokojený i když teprve začínám.
Ale grafický výstup, se mi vůbec nelibí, nebo v tom neumím.
Dotaz zní.
Když Node-red jede na raspberry pi, a můj web server také, půjde  na ten můj web dostat prvky z Node-red.
Když dam export, tak tam vidim  JSON.
Děkuji.

Přímo v Node-RED můžeš použít "http in"--"http response" a tu odpověď máš plně pod kontrolou, můžeš vracet libovolné HTML/CSS. Nebo z NR můžeš vracet jen nějaká surová data a bude to jen "API endpoint", který použiješ z libovolné aplikace mimo NR. Zase http in, websocket in, mqtt in, tcp in, file in, buhvícovšechno in.

#2 gna
No asi jsem to špatně napsal, nebo jste mně nepochopil.
Jsem zkusil par prvku a pak http://192.168.1.10/ui/!/0
Je to hnusne, neformatovane,uprostřed.
https://i.postimg.cc/…/obrazek.png

A co je to, co jsem nepochopil?

#3 Borisek
Když jsem zadal na YT Node-RED  http in  http response tak mi vyskočili toto.
https://www.youtube.com/watch?…

No to je ono. Vytvořil endpoint /test, který vrací nějaká data. Akorát on tam má vstup napojený rovnou na výstup a ta funkce jde jen do debugu, tak to prakticky nic nedělá.

#3 Borisek

No asi neumím hledat.
Očučel jsem vše na YT a všichni tam řeší textový výstup na web stránku.
Jak tam ale dostat uzel co má gui jsem nenašel.
Třeba button, nebo gauge jsem nenašel.
Nepomůže někdo? Děkuji

Ten flow v NR je program, který jen "žvýká" data a jaký bude jeho výstup je jen na tobě. Pokud se ti standardní dashboard a dostupné widgety nelíbí, tak si to naformátuj po svém. Možnosti k tomu máš.

Jakýsi tutoriál na YT jak z NR dostat data na web nepřekvapivě není tutoriál jak od píky v HTML implementovat měřidla. Prostě si něco najdi a jen do toho píchni vlastní data.

Pokud mas json format, data, a potrebujes to zobrazit ve vlastnim meridle teploty, tak si ho udelej, ne? To preci javascriptem / css neni problem. Nebo si najdi hotove programy pomoci googlu.

google = js measure temperature script

das vyhledat, zvolis zalozku obrazky a tam si vyberes podle obrazku...
https://www.jqueryscript.net/tags.php?…

Ja si ted treba hraji s svg. To je obrazek editovatelny jako text. Takove meridlo se v nem da pomerne snadno udelat. Ale, opet si muzes neco najit...

google = js measure temperature script svg

https://codepen.io/bvanbree/pen/MJjaQJ
napr tady je jeden slozitejsi priklad. nastavujes tam

var beginRange = 20,
    endRange = 22.2,
    beginRangeBask = 22.2,
    endRangeBask = 29.4;
...
 updateData(21, 25, temperatureChart, baskingChart, temperatureDisplay, baskingDisplay);
// pro teplotu 21 a 25
// co presne znamenaji ty kruhy, nemam tuseni :)