frodovdr/hyperion.ng
1
0
Fork 0
mirror of https://github.com/hyperion-project/hyperion.ng.git synced 2023-10-10 13:36:59 +02:00
Code Issues Releases Wiki Activity

implement webui live video (#340)

Browse Source 
* implement webui live video

* add missing german translation
This commit is contained in:
redPanther 2016-12-18 19:00:14 +01:00 committed by GitHub
parent 23194730c2
commit 721668fc85
15 changed files with 156 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
assets/webconfig/content/leds.html
View File

@ -83,11 +83,12 @@
<div id="menu_display" class="tab-pane fade" style="padding-top:10px">
<div class="container-fluid">
<div id="leds_canvas"/>
<div id="leds_controls">
<button type="button" class="btn btn-success" id="leds_toggle" data-i18n="conf_leds_test_button_toggleleds">toggle leds</button>
<button type="button" class="btn btn-danger" id="leds_toggle_num" data-i18n="conf_leds_test_button_togglelednumber">toggle led numbers</button>
<button type="button" class="btn btn-danger" id="leds_toggle_live" data-i18n="conf_leds_test_button_toggleliveleds">toggle live leds</button>
<button type="button" class="btn btn-danger" id="leds_toggle_live_video" data-i18n="conf_leds_test_button_togglelivevideo">toggle live video</button>
</div>
</div>
</div>
@ -296,6 +297,7 @@
<div id="previewledcount"></div>
<div class="col-lg-12 st_helper" style="padding-left:0px; padding-right:0px">
<div id="leds_preview"></div>
<div>
</div>
</div>
<div class="panel-footer">

1
assets/webconfig/i18n/de.json
View File

@ -115,6 +115,7 @@
"conf_leds_test_button_toggleleds" : "LEDs",
"conf_leds_test_button_togglelednumber" : "LED Nummerierung",
"conf_leds_test_button_toggleliveleds" : "LED Echtzeitansicht",
"conf_leds_test_button_togglelivevideo" : "Grabber Echtzeitansicht",
"conf_grabber_label_intro" : "Hyperion unterstützt 2 Hauptarten wie Bilder aufgenommen werden können. Zum Einen die Plattform Aufnahme, die sich direkt am System bedient auf dem Hyperion läuft (beste Qualität). Zum Anderen die USB Aufnahme, die sich an einem angeschlossenen Gerät bedient die benötigten Informationen für die Verarbeitung und Ausgabe zu erhalten (Mehr Konfigurationsaufwand und Kalibrierung)",
"conf_colors_label_intro" : "Neben der Farbkalibrierung, gehört auch die Glättung (sanfte Farbübergänge) und die Erkennung von störenden (schwarzen) Balken zur Bildverarbeitung.",
"conf_network_label_intro" : "Alle Einstellungen zu Ports, der Weiterleitung von JSON/PROTO und Boblight sowie UDP Listener.",

1
assets/webconfig/i18n/en.json
View File

@ -115,6 +115,7 @@
"conf_leds_test_button_toggleleds" : "toggle leds",
"conf_leds_test_button_togglelednumber" : "toggle led numbers",
"conf_leds_test_button_toggleliveleds" : "toggle live leds",
"conf_leds_test_button_togglelivevideo" : "toggle live video",
"conf_grabber_label_intro" : "Hyperion supports two ways on how to get captured pictures for processing and output. The platform capture: internal at the device you are running Hyperion on (best qualitiy) and the USB Capture which gathers from a connected device the necessary pictures (more calibration work and configuration).",
"conf_colors_label_intro" : "Color calibration, smoothing (color transistions) and detection of blackbars.",
"conf_network_label_intro" : "All network based settings are listed here.",

36
assets/webconfig/js/content_leds.js
View File

@ -322,10 +322,12 @@ $(document).ready(function() {
createClassicLeds();
});
// ------------------------------------------------------------------
$('.ledMAconstr').bind("change", function() {
createMatrixLeds();
});
// ------------------------------------------------------------------
$('#btn_cl_generate').off().on("click", function() {
if (finalLedArray != ""){
$("#ledconfig").text(JSON.stringify(finalLedArray, null, "\t"));
@ -334,6 +336,7 @@ $(document).ready(function() {
}
});
// ------------------------------------------------------------------
$('#btn_ma_generate').off().on("click", function() {
if (finalLedArray != ""){
$("#ledconfig").text(JSON.stringify(finalLedArray, null, "\t"));
@ -342,6 +345,19 @@ $(document).ready(function() {
}
});
// ------------------------------------------------------------------
$(hyperion).on("cmd-ledcolors-imagestream-update",function(event){
if ($("#leddevices").length == 0)
{
requestLedImageStop();
}
else
{
imageData = (event.response.result.image);
$("#image_preview").attr("src", imageData);
}
});
// ------------------------------------------------------------------
$(hyperion).on("cmd-ledcolors-ledstream-update",function(event){
if ($("#leddevices").length == 0)
@ -420,7 +436,7 @@ $(document).ready(function() {
canvas_height = $('#leds_canvas').innerHeight();
canvas_width = $('#leds_canvas').innerWidth();
leds_html = "";
leds_html = '<img src="" id="image_preview" style="position:relative" />"';
for(var idx=0; idx<leds.length; idx++)
{
led = leds[idx];
@ -436,6 +452,9 @@ $(document).ready(function() {
$('#led_0').css({"z-index":"10"});
$('#leds_custom_updsim').trigger('click');
$('#image_preview').hide();
$('#image_preview').attr("width" , $('#leds_canvas').innerWidth()-2);
$('#image_preview').attr("height", $('#leds_canvas').innerHeight()-2);
});
// ------------------------------------------------------------------
@ -463,6 +482,21 @@ $(document).ready(function() {
}
});
// ------------------------------------------------------------------
$('#leds_toggle_live_video').off().on("click", function() {
setClassByBool('#leds_toggle_live_video',imageStreamActive,"btn-success","btn-danger");
if ( imageStreamActive )
{
requestLedImageStop();
$('#image_preview').hide();
}
else
{
$('#image_preview').show();
requestLedImageStart();
}
});
// ------------------------------------------------------------------
$("#leds_custom_updsim").off().on("click", function() {
if (validateText()){

21
assets/webconfig/js/hyperion.js
View File

@ -13,11 +13,12 @@ var websocket = null;
var hyperion = {};
var wsTan = 1;
var cronId = 0;
var ledStreamActive=false;
var loggingStreamActive=false;
var ledStreamActive = false;
var imageStreamActive = false;
var loggingStreamActive = false;
var loggingHandlerInstalled = false;
var watchdog = 0;
var debugMessagesActive = true;
//
function cron()
{
@ -168,6 +169,18 @@ function requestLedColorsStop()
sendToHyperion("ledcolors", "ledstream-stop");
}
function requestLedImageStart()
{
imageStreamActive=true;
sendToHyperion("ledcolors", "imagestream-start");
}
function requestLedImageStop()
{
imageStreamActive=false;
sendToHyperion("ledcolors", "imagestream-stop");
}
function requestPriorityClear()
{
sendToHyperion("clear", "", '"priority":1');
@ -205,6 +218,8 @@ function requestWriteConfig(config)
});
var config_str = JSON.stringify(complete_config);
console.log("save");
console.log(config_str);
sendToHyperion("config","setconfig", '"config":'+config_str);
}

8
assets/webconfig/js/ui_utils.js
View File

@ -1,4 +1,12 @@
function debugMessage(msg)
{
if (debugMessagesActive)
{
console.log(msg);
}
}
function bindNavToContent(containerId, fileName, loadNow)
{
$("#page-content").off();

11
include/hyperion/Hyperion.h
View File

@ -202,6 +202,15 @@ public slots:
///
void setColors(int priority, const std::vector<ColorRgb> &ledColors, const int timeout_ms, bool clearEffects = true, hyperion::Components component=hyperion::COMP_INVALID);
///
/// Writes the given colors to all leds for the given time and priority
///
/// @param[in] priority The priority of the written colors
/// @param[in] ledColors The colors to write to the leds
/// @param[in] timeout_ms The time the leds are set to the given colors [ms]
///
void setImage(int priority, const Image<ColorRgb> & image, int duration_ms);
///
/// Returns the list with unique transform identifiers
/// @return The list with transform identifiers
@ -303,6 +312,8 @@ signals:
void componentStateChanged(const hyperion::Components component, bool enabled);
void emitImage(int priority, const Image<ColorRgb> & image, const int timeout_ms);
private slots:
///
/// Updates the priority muxer with the current time and (re)writes the led color with applied

6
libsrc/grabber/v4l2/V4L2Wrapper.cpp
View File

@ -88,10 +88,10 @@ void V4L2Wrapper::set3D(VideoMode mode)
void V4L2Wrapper::newFrame(const Image<ColorRgb> &image)
{
// forward to other hyperions
if ( _forward )
{
//if ( _forward )
//{
emit emitImage(_priority, image, _timeout_ms);
}
//}
// process the new image
_processor->process(image, _ledColors);

6
libsrc/grabber/x11/X11Wrapper.cpp
View File

@ -64,10 +64,10 @@ void X11Wrapper::action()
// Grab frame into the allocated image
_grabber->grabFrame(_image);
if ( _forward )
{
//if ( _forward )
//{
emit emitImage(_priority, _image, _timeout_ms);
}
//}
_processor->process(_image, _ledColors);
setColors(_ledColors, _timeout_ms);

1
libsrc/hyperion/GrabberWrapper.cpp
View File

@ -56,7 +56,6 @@ void GrabberWrapper::componentStateChanged(const hyperion::Components component,
_forward = _hyperion->getForwarder()->protoForwardingEnabled();
if ( enable == _timer.isActive() )
{
Info(_log, "grabber change state to %s", (_timer.isActive() ? "enabled" : "disabled") );

8
libsrc/hyperion/Hyperion.cpp
View File

@ -739,6 +739,14 @@ void Hyperion::setColors(int priority, const std::vector<ColorRgb>& ledColors, c
}
}
void Hyperion::setImage(int priority, const Image<ColorRgb> & image, int duration_ms)
{
if (priority == getCurrentPriority())
{
emit emitImage(priority, image, duration_ms);
}
}
const std::vector<std::string> & Hyperion::getTransformIds() const
{
return _raw2ledTransform->getTransformIds();

2
libsrc/jsonserver/CMakeLists.txt
View File

@ -33,7 +33,7 @@ add_library(jsonserver
${JsonServer_RESOURCES_RCC}
)
qt5_use_modules(jsonserver Network)
qt5_use_modules(jsonserver Network Gui)
target_link_libraries(jsonserver
hyperion

52
libsrc/jsonserver/JsonClientConnection.cpp
View File

@ -22,6 +22,11 @@
#include <QJsonDocument>
#include <QVariantMap>
#include <QDir>
#include <QImage>
#include <QBuffer>
#include <QByteArray>
#include <QIODevice>
#include <QDateTime>
// hyperion util includes
#include <hyperion/ImageProcessorFactory.h>
@ -50,6 +55,7 @@ JsonClientConnection::JsonClientConnection(QTcpSocket *socket)
, _log(Logger::getInstance("JSONCLIENTCONNECTION"))
, _forwarder_enabled(true)
, _streaming_logging_activated(false)
, _image_stream_timeout(0)
{
// connect internal signals and slots
connect(_socket, SIGNAL(disconnected()), this, SLOT(socketClosed()));
@ -58,6 +64,7 @@ JsonClientConnection::JsonClientConnection(QTcpSocket *socket)
_timer_ledcolors.setSingleShot(false);
connect(&_timer_ledcolors, SIGNAL(timeout()), this, SLOT(streamLedcolorsUpdate()));
_image_stream_mutex.unlock();
}
@ -1197,22 +1204,32 @@ void JsonClientConnection::handleLedColorsCommand(const QJsonObject& message, co
{
// create result
QString subcommand = message["subcommand"].toString("");
_streaming_leds_reply["success"] = true;
_streaming_leds_reply["command"] = command;
_streaming_leds_reply["tan"] = tan;
if (subcommand == "ledstream-start")
{
_streaming_leds_reply["success"] = true;
_streaming_leds_reply["command"] = command+"-ledstream-update";
_streaming_leds_reply["tan"] = tan;
_timer_ledcolors.start(125);
}
else if (subcommand == "ledstream-stop")
{
_timer_ledcolors.stop();
}
else if (subcommand == "imagestream-start")
{
_streaming_image_reply["success"] = true;
_streaming_image_reply["command"] = command+"-imagestream-update";
_streaming_image_reply["tan"] = tan;
connect(_hyperion, SIGNAL(emitImage(int, const Image<ColorRgb>&, const int)), this, SLOT(setImage(int, const Image<ColorRgb>&, const int)) );
}
else if (subcommand == "imagestream-stop")
{
disconnect(_hyperion, SIGNAL(emitImage(int, const Image<ColorRgb>&, const int)), this, 0 );
}
else
{
sendErrorReply("unknown subcommand",command,tan);
sendErrorReply("unknown subcommand \""+subcommand+"\"",command,tan);
return;
}
@ -1482,5 +1499,28 @@ void JsonClientConnection::streamLedcolorsUpdate()
// send the result
sendMessage(_streaming_leds_reply);
}
void JsonClientConnection::setImage(int priority, const Image<ColorRgb> & image, int duration_ms)
{
if ( (_image_stream_timeout+250) < QDateTime::currentMSecsSinceEpoch() && _image_stream_mutex.tryLock(0) )
{
_image_stream_timeout = QDateTime::currentMSecsSinceEpoch();
QImage jpgImage((const uint8_t *) image.memptr(), image.width(), image.height(), 3*image.width(), QImage::Format_RGB888);
QByteArray ba;
QBuffer buffer(&ba);
buffer.open(QIODevice::WriteOnly);
jpgImage.save(&buffer, "jpg");
QJsonObject result;
result["image"] = "data:image/jpg;base64,"+QString(ba.toBase64());
_streaming_image_reply["result"] = result;
sendMessage(_streaming_image_reply);
_image_stream_mutex.unlock();
}
}

13
libsrc/jsonserver/JsonClientConnection.h
View File

@ -6,6 +6,7 @@
// Qt includes
#include <QByteArray>
#include <QTcpSocket>
#include <QMutex>
// Hyperion includes
#include <hyperion/Hyperion.h>
@ -116,6 +117,7 @@ public slots:
void componentStateChanged(const hyperion::Components component, bool enable);
void streamLedcolorsUpdate();
void incommingLogMessage(Logger::T_LOG_MESSAGE);
void setImage(int priority, const Image<ColorRgb> & image, int duration_ms);
signals:
///
@ -338,12 +340,21 @@ private:
/// timer for ledcolors streaming
QTimer _timer_ledcolors;
// streaming buffers
QJsonObject _streaming_leds_reply;
QJsonObject _streaming_image_reply;
QJsonObject _streaming_logging_reply;
/// flag to determine state of log streaming
bool _streaming_logging_activated;
/// mutex to determine state of image streaming
QMutex _image_stream_mutex;
/// timeout for live video refresh
volatile qint64 _image_stream_timeout;
// masks for fields in the basic header
static uint8_t const BHB0_OPCODE = 0x0F;
static uint8_t const BHB0_RSV3 = 0x10;

6
src/hyperiond/hyperiond.cpp
View File

@ -456,6 +456,7 @@ void HyperionDaemon::createGrabberDispmanx()
QObject::connect(_kodiVideoChecker, SIGNAL(grabbingMode(GrabbingMode)), _dispmanx, SLOT(setGrabbingMode(GrabbingMode)));
QObject::connect(_kodiVideoChecker, SIGNAL(videoMode(VideoMode)), _dispmanx, SLOT(setVideoMode(VideoMode)));
QObject::connect(_dispmanx, SIGNAL(emitImage(int, const Image<ColorRgb>&, const int)), _protoServer, SLOT(sendImageToProtoSlaves(int, const Image<ColorRgb>&, const int)) );
QObject::connect(_dispmanx, SIGNAL(emitImage(int, const Image<ColorRgb>&, const int)), _hyperion, SLOT(setImage(int, const Image<ColorRgb>&, const int)) );
_dispmanx->start();
@ -474,6 +475,7 @@ void HyperionDaemon::createGrabberAmlogic()
QObject::connect(_kodiVideoChecker, SIGNAL(grabbingMode(GrabbingMode)), _amlGrabber, SLOT(setGrabbingMode(GrabbingMode)));
QObject::connect(_kodiVideoChecker, SIGNAL(videoMode(VideoMode)), _amlGrabber, SLOT(setVideoMode(VideoMode)));
QObject::connect(_amlGrabber, SIGNAL(emitImage(int, const Image<ColorRgb>&, const int)), _protoServer, SLOT(sendImageToProtoSlaves(int, const Image<ColorRgb>&, const int)) );
QObject::connect(_amlGrabber, SIGNAL(emitImage(int, const Image<ColorRgb>&, const int)), _hyperion, SLOT(setImage(int, const Image<ColorRgb>&, const int)) );
_amlGrabber->start();
Info(_log, "AMLOGIC grabber created and started");
@ -495,6 +497,7 @@ void HyperionDaemon::createGrabberX11(const QJsonObject & grabberConfig)
QObject::connect(_kodiVideoChecker, SIGNAL(grabbingMode(GrabbingMode)), _x11Grabber, SLOT(setGrabbingMode(GrabbingMode)));
QObject::connect(_kodiVideoChecker, SIGNAL(videoMode(VideoMode)), _x11Grabber, SLOT(setVideoMode(VideoMode)));
QObject::connect(_x11Grabber, SIGNAL(emitImage(int, const Image<ColorRgb>&, const int)), _protoServer, SLOT(sendImageToProtoSlaves(int, const Image<ColorRgb>&, const int)) );
QObject::connect(_x11Grabber, SIGNAL(emitImage(int, const Image<ColorRgb>&, const int)), _hyperion, SLOT(setImage(int, const Image<ColorRgb>&, const int)) );
_x11Grabber->start();
Info(_log, "X11 grabber created and started");
@ -515,6 +518,7 @@ void HyperionDaemon::createGrabberFramebuffer(const QJsonObject & grabberConfig)
QObject::connect(_kodiVideoChecker, SIGNAL(grabbingMode(GrabbingMode)), _fbGrabber, SLOT(setGrabbingMode(GrabbingMode)));
QObject::connect(_kodiVideoChecker, SIGNAL(videoMode(VideoMode)), _fbGrabber, SLOT(setVideoMode(VideoMode)));
QObject::connect(_fbGrabber, SIGNAL(emitImage(int, const Image<ColorRgb>&, const int)), _protoServer, SLOT(sendImageToProtoSlaves(int, const Image<ColorRgb>&, const int)) );
QObject::connect(_fbGrabber, SIGNAL(emitImage(int, const Image<ColorRgb>&, const int)), _hyperion, SLOT(setImage(int, const Image<ColorRgb>&, const int)) );
_fbGrabber->start();
Info(_log, "Framebuffer grabber created and started");
@ -535,6 +539,7 @@ void HyperionDaemon::createGrabberOsx(const QJsonObject & grabberConfig)
QObject::connect(_kodiVideoChecker, SIGNAL(grabbingMode(GrabbingMode)), _osxGrabber, SLOT(setGrabbingMode(GrabbingMode)));
QObject::connect(_kodiVideoChecker, SIGNAL(videoMode(VideoMode)), _osxGrabber, SLOT(setVideoMode(VideoMode)));
QObject::connect(_osxGrabber, SIGNAL(emitImage(int, const Image<ColorRgb>&, const int)), _protoServer, SLOT(sendImageToProtoSlaves(int, const Image<ColorRgb>&, const int)) );
QObject::connect(_osxGrabber, SIGNAL(emitImage(int, const Image<ColorRgb>&, const int)), _hyperion, SLOT(setImage(int, const Image<ColorRgb>&, const int)) );
_osxGrabber->start();
Info(_log, "OSX grabber created and started");
@ -590,6 +595,7 @@ void HyperionDaemon::createGrabberV4L2()
Debug(_log, "V4L2 grabber created");
QObject::connect(grabber, SIGNAL(emitImage(int, const Image<ColorRgb>&, const int)), _protoServer, SLOT(sendImageToProtoSlaves(int, const Image<ColorRgb>&, const int)));
QObject::connect(grabber, SIGNAL(emitImage(int, const Image<ColorRgb>&, const int)), _hyperion, SLOT(setImage(int, const Image<ColorRgb>&, const int)));
if (grabberConfig["useKodiChecker"].toBool(false))
{
QObject::connect(_kodiVideoChecker, SIGNAL(grabbingMode(GrabbingMode)), grabber, SLOT(setGrabbingMode(GrabbingMode)));