mirror of
https://github.com/hyperion-project/hyperion.ng.git
synced 2023-10-10 13:36:59 +02:00
09ee8f26ee
* Feat: Add image sender to webui This PR adds a new image sending feature to the webui and extends the api accordingly. In javascript the processing of images is horrible slow (without WASM), so the solution is at the API side with out-of-the-box power of Qt. - The image cmd accepts now a raw image that is encoded with base64. Supported are all image formats that qt supports (enough) - There is no real size limit. It will be automatically scaled down to max 2000px width or height according to aspect ratio - It's possible to scale down through a new "scale" property if developer wants that. - Test were successfull until 3MP pictues, 4k+ closes the websocket on browser side, so 2k is a decent value - Adds a new image streaming feature from browser (tabs/applications/complete desktop as target). This works just if used with HTTPS PR#612 AND with a recent version of Firefox/Chrome
92 lines
4.0 KiB
HTML
92 lines
4.0 KiB
HTML
<div class="container-fluid">
|
|
<h3 class="page-header"><i class="fa fa-wifi fa-fw"></i><span data-i18n="main_menu_remotecontrol_token">Remote Control</span></h3>
|
|
<div class="row">
|
|
<div class="col-md-12 col-lg-8 col-xxl-7">
|
|
<div class="panel panel-default" >
|
|
<div class="panel-heading"><i class="fa fa-wifi fa-fw"></i><span data-i18n="remote_input_label">Source selection</span></div>
|
|
<div class="panel-body">
|
|
<div id="sstcont"></div>
|
|
<div id="auto_btn"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6 col-lg-4 col-xxl-5">
|
|
<div class="panel panel-default" >
|
|
<div class="panel-heading"><i class="fa fa-wifi fa-fw"></i><span data-i18n="remote_components_label">Components control</span></div>
|
|
<div class="panel-body" id="comp_intro">
|
|
<div id="componentsbutton"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6 col-lg-6 col-xxl-4">
|
|
<div class="panel panel-default" >
|
|
<div class="panel-heading"><i class="fa fa-wifi fa-fw"></i><span data-i18n="remote_color_label">Colors/Effects</span></div>
|
|
<div class="panel-body" id="color_intro">
|
|
<table class="table borderless">
|
|
<tbody>
|
|
<tr>
|
|
<td style="vertical-align:middle"><label for="cpeff" data-i18n="remote_color_label_color"></label></td>
|
|
<td>
|
|
<div id="cp2" class="colorpicker-component input-group">
|
|
<input type="text" id="cpeff" class="form-control"/>
|
|
<span class="input-group-addon"><i></i></span>
|
|
<span class="input-group-addon" id="remote_input_rescol" title="Repeat Color" style="cursor:pointer"><i class="fa fa-repeat"></i></span>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="vertical-align:middle"><label for="effect_select" data-i18n="remote_effects_label_effects">Effect:</label></td>
|
|
<td class="input-group">
|
|
<select id="effect_select" class="form-control"></select>
|
|
<span class="input-group-addon" id="remote_input_reseff" title="Repeat Effect" style="cursor:pointer"><i class="fa fa-repeat"></i></span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="vertical-align:middle"><label for="remote_input_img" data-i18n="remote_effects_label_picture" >Picture:</label></td>
|
|
<td class="input-group custom-file">
|
|
<input class="form-control" id="remote_input_img" type="file" accept="image/*" />
|
|
<span class="input-group-addon" id="remote_input_repimg" title="Repeat Image" style="cursor:pointer"><i class="fa fa-repeat"></i></span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="vertical-align:middle"><label for="remote_duration" data-i18n="remote_input_duration"></label></td>
|
|
<td class="input-group">
|
|
<input id="remote_duration" type="number" class="form-control" value="0" min="0"/>
|
|
<span class="input-group-addon" data-i18n="edt_append_s"></span>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<button data-i18n="remote_color_button_reset" type="button" class="btn btn-primary" id="reset_color" style="margin-top:10px;">Reset Color/Effect</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 col-lg-6 col-xxl-3">
|
|
<div class="panel panel-default" >
|
|
<div class="panel-heading"><i class="fa fa-wifi fa-fw"></i><span data-i18n="remote_maptype_label">Mapping types</span></div>
|
|
<div class="panel-body" id="maptype_intro">
|
|
<div id="mappingsbutton"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 col-lg-6 col-xxl-5">
|
|
<div class="panel panel-default" >
|
|
<div class="panel-heading"><i class="fa fa-wifi fa-fw"></i><span data-i18n="remote_videoMode_label"></span></div>
|
|
<div class="panel-body" id="videomode_intro">
|
|
<div id="videomodebtns"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 col-lg-6 col-xxl-5">
|
|
<div class="panel panel-default" >
|
|
<div class="panel-heading"><i class="fa fa-wifi fa-fw"></i><span data-i18n="remote_adjustment_label"></span></div>
|
|
<div class="panel-body" id="adjust_content">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="/js/content_remote.js" ></script>
|