Загрузить файлы в «/»
This commit is contained in:
@@ -0,0 +1,47 @@
|
||||
<!--
|
||||
This file is part of iros
|
||||
Copyright (C) 2024 Alex <uni@vrsal.xyz>
|
||||
|
||||
This program is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU Affero General Public License as published
|
||||
by the Free Software Foundation, version 3 of the License.
|
||||
|
||||
This program is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU Affero General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU Affero General Public License
|
||||
along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
-->
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>IROS | 404 - Not found</title>
|
||||
{{template "header.html" .}}
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<style>
|
||||
.error {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 3em;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="error">
|
||||
<h3>404 - Not found</h3>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,68 @@
|
||||
<!--
|
||||
This file is part of iros
|
||||
Copyright (C) 2024 Alex <uni@vrsal.xyz>
|
||||
|
||||
This program is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU Affero General Public License as published
|
||||
by the Free Software Foundation, version 3 of the License.
|
||||
|
||||
This program is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU Affero General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU Affero General Public License
|
||||
along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
-->
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>IROS | Dashboard</title>
|
||||
<link rel='stylesheet' type='text/css' media='screen' href='./static/css/dashboard.css'>
|
||||
<link rel="icon" href="static/img/favicon.png" type="image/x-icon" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<script>
|
||||
// get the token from the cookie
|
||||
function getCookie(name) {
|
||||
const value = `; ${document.cookie}`;
|
||||
const parts = value.split(`; ${name}=`);
|
||||
if (parts.length === 2) return parts.pop().split(';').shift();
|
||||
}
|
||||
const token = getCookie('authToken');
|
||||
function purge_sessions() {
|
||||
fetch('./api/v1/purgeSessions', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': token
|
||||
}
|
||||
}).then(response => {
|
||||
if (response.status === 200)
|
||||
location.reload();
|
||||
else
|
||||
console.error('Error:', response.status);
|
||||
}).catch((error) => {
|
||||
console.error('Error:', error);
|
||||
});
|
||||
}
|
||||
</script>
|
||||
<div class="stats-header">
|
||||
<ul class="stats-list">
|
||||
<li title="Uptime">🕐 {{.Uptime}}</li>
|
||||
<li title="Number of sessions">📒 {{.NumSessions}}</li>
|
||||
<li title="Connected web sockets">🔌 {{.NumWSConnections}}</li>
|
||||
<li title="Last message">📥 {{.LastMessage}}</li>
|
||||
<li title="Number of inactive sessions">🗑️ {{.InactiveSessions}}</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="dashboard">
|
||||
<h3>Dashboard actions</h3>
|
||||
<button class="button" onclick="purge_sessions()">Purge inactive sessions</button>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,411 @@
|
||||
<!--
|
||||
This file is part of iros
|
||||
Copyright (C) 2024 Alex <uni@vrsal.xyz>
|
||||
|
||||
This program is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU Affero General Public License as published
|
||||
by the Free Software Foundation, version 3 of the License.
|
||||
|
||||
This program is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU Affero General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU Affero General Public License
|
||||
along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
-->
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>IROS | Docs</title>
|
||||
<script src='static/js/util.js'></script>
|
||||
<script src='static/js/session.js'></script>
|
||||
<link rel='stylesheet' type='text/css' media='screen' href='static/css/landing.css'>
|
||||
{{template "header.html" .}}
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="header">
|
||||
<img id="header-logo" src="static/img/logo.png" alt="IROS Logo">
|
||||
|
||||
<!-- Header links -->
|
||||
<div id="header-links">
|
||||
<a href=".">Home</a>
|
||||
<a href="./#quickstart">Quickstart</a>
|
||||
<a href="./docs">Documenation</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="main">
|
||||
<div id="content">
|
||||
<div id="toc">
|
||||
<h1>Table of contents</h1>
|
||||
<ol>
|
||||
<li><a href="./docs#intro">Introduction</a></li>
|
||||
<li><a href="./docs#getting-started">Getting started</a></li>
|
||||
<li><a href="./docs#adding-overlay">Adding overlay</a></li>
|
||||
<li><a href="./docs#editor">Using the editor</a></li>
|
||||
<ol>
|
||||
<li><a href="./docs#usage-and-keybinds">Keybinds and basic usage</a></li>
|
||||
<li><a href="./docs#settings-window">Settings window</a></li>
|
||||
<li><a href="./docs#element-list">Element list</a></li>
|
||||
</ol>
|
||||
<li><a href="./docs#elements">Elements</a></li>
|
||||
<ol>
|
||||
<li><a href="./docs#basic-element-properties">Basic element properties</a></li>
|
||||
<li><a href="./docs#text">Text</a></li>
|
||||
<li><a href="./docs#image">Image</a></li>
|
||||
<li><a href="./docs#countdown-and-timer">Countdown and timers</a></li>
|
||||
<li><a href="./docs#emotes">Emotes</a></li>
|
||||
<li><a href="./docs#audio">Audio</a></li>
|
||||
<li><a href="./docs#video">Video</a></li>
|
||||
<li><a href="./docs#iframe">Iframe</a></li>
|
||||
<li><a href="./docs#favorites">Favorites</a></li>
|
||||
</ol>
|
||||
<li><a href="#faq">FAQ</a></li>
|
||||
</ol>
|
||||
</div>
|
||||
<h1 id="intro">Introduction</h1>
|
||||
<p>
|
||||
IROS is a simple web based overlay which can be integrated into your stream through a browser source.
|
||||
It allows you to display and arrange text, images and other elements on stream through a web interface.
|
||||
Anybody with access to the editor link can control the overlay and update it in real time.
|
||||
</p>
|
||||
<p>
|
||||
As of now the overlay supports the following elements:
|
||||
<ul>
|
||||
<li>text</li>
|
||||
<li>images</li>
|
||||
<li>emotes (can be searched directly from the editor, provided through <a
|
||||
href="https://7tv.app">7TV</a>)
|
||||
</li>
|
||||
<li>countdowns and timers</li>
|
||||
<li>audio and video embeds</li>
|
||||
<li>iframes, i.e. embedding websites</li>
|
||||
</ul>
|
||||
</p>
|
||||
<p>
|
||||
See <a href="./docs#quickstart">quickstart</a> to get started with a few simple steps or look below for
|
||||
a more thorough explanation for setting it up. This tutorial is also available as a video (click on it
|
||||
to load it):
|
||||
</p>
|
||||
|
||||
<script>
|
||||
function embed_video(id) {
|
||||
document.querySelector(".video-embed").innerHTML = `
|
||||
<iframe src="https://www.youtube.com/embed/${id}" title="YouTube video player"
|
||||
frameborder="0"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||
allowfullscreen></iframe>
|
||||
`;
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="video-embed" onclick="embed_video('PXOY1KFhj7o')" title="Click to embed video">
|
||||
<img src="static/img/thumbnail.jpg" alt="Video placeholder">
|
||||
</div>
|
||||
|
||||
<h1 id="getting-started">Getting started</h1>
|
||||
<p>
|
||||
The overlay is split up into two parts, the editor and the overlay itself. To use both of them a new
|
||||
session has to be created. This will give you two links, one for the editor and one for the overlay.
|
||||
A new session can be created here:
|
||||
</p>
|
||||
<h2>Create a session</h2>
|
||||
|
||||
<div id="generate-form">
|
||||
<label for="stream-link">Stream URL</label>
|
||||
<input type="text" name="stream-link" id="stream-link" placeholder="https://streamingsite/yourchannel">
|
||||
<label for="size">Size</label>
|
||||
<input type="text" name="size" id="size" placeholder="1920x1080">
|
||||
<button onclick="generate_session()">Generate</button>
|
||||
</div>
|
||||
<div id="link-container" class="hidden">
|
||||
<div class="link-display">
|
||||
<div class="label">Editor link</div>
|
||||
<input class="link-textbox" type="text" name="editor-link" id="editor-link" readonly>
|
||||
<button title="Copy to clipboard" onclick="copy_link('editor-link')"><img
|
||||
src="static/img/copy.svg" /></button>
|
||||
|
||||
<div class="label">Overlay link</div>
|
||||
<input type=" text" name="overlay-link" id="overlay-link" readonly>
|
||||
<button title="Copy to clipboard" onclick="copy_link('overlay-link')"><img
|
||||
src="static/img/copy.svg" /></button>
|
||||
</div>
|
||||
</div>
|
||||
<p>
|
||||
To generate a new session enter the link to you stream and optionally the size of the overlay. The link
|
||||
to the stream is then used to display it in the background of the editor as a reference when adding and
|
||||
moving elements. The size is used to make sure that the overlay matches the resolution of your stream.
|
||||
If no size is provided it will default to 1920x1080. As of right now the editor is optimized for an
|
||||
aspect ratio of 16:9.
|
||||
</p>
|
||||
<p>
|
||||
Once you've entered the stream link click the generate button. Afterwards two links will be displayed.
|
||||
The first one is the editor link and the second one is the overlay link. The links essentially just
|
||||
contain a session id which is unique for each overlay.<br><br>
|
||||
<strong style="color: rgb(216, 52, 52)">Important:</strong> The generated links should only be shared
|
||||
with people
|
||||
you trust. Anyone that has access to them or the session id they contain can use the editor to change
|
||||
the overlay.
|
||||
</p>
|
||||
|
||||
<h1 id="adding-overlay">Adding the overlay</h1>
|
||||
<p>
|
||||
Adding the overlay to your stream is done through a browser source. If you don't know how to add a
|
||||
browser source to your streaming software here's two links for how to do it in OBS and XSplit:
|
||||
</p>
|
||||
<ul>
|
||||
<li><a href="https://obsproject.com/kb/sources-guide" target="_blank">Browser source for OBS
|
||||
Studio</a>
|
||||
</li>
|
||||
<li><a href="https://support.xsplit.com/en/article/webpage-1y1l6v/" target="_blank">Browser source
|
||||
for
|
||||
XSplit</a>
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
For the following steps OBS studio is used since most people use it. After having added a browser
|
||||
source you'll be presented with the following dialog:
|
||||
</p>
|
||||
<img class="center-image" src="static/img/obs-browser-source-dialog.png" alt="OBS browser source dialog">
|
||||
<p>
|
||||
The URL field is where you enter the overlay link. The width and height fields should be set to the
|
||||
size of your stream so the browser source fills out the entire screen. If you don't know the size of
|
||||
your stream you can find it in the settings dialog of OBS under the video tab. All other settings
|
||||
can be left at their default values. After the source has been created it will display the overlay
|
||||
which by default is empty.
|
||||
</p>
|
||||
<h1 id="editor">Using the editor</h1>
|
||||
<p>
|
||||
The overlay editor is where elements are added, removed and modified. It consists of two windows
|
||||
and the main canvas area in the center. The canvas area is a representation of the current state
|
||||
of the overlay. The two tool windows can be moved around by clicking and dragging their title bars
|
||||
if they are in the way of any overlay elements. If no element is selected the windows will also be
|
||||
semi-transparent to make it easier to see the canvas area. If you hover over them they will become
|
||||
opaque.
|
||||
</p>
|
||||
<h2 id="usage-and-keybinds">Keybinds and basic usage</h2>
|
||||
<p>
|
||||
After having added an element you probably want make additional changes to it. By default newly added
|
||||
elements are not visible on stream. Elements that are not visible on stream will be marked by a cyan
|
||||
dashed border and low opacity. The currently selected element will have a red border. If the element
|
||||
is scaled down a lot the border might not be visible or hard to see.
|
||||
</p>
|
||||
<p>
|
||||
By clicking on any element on the canvas you can change the active selection which will start to display
|
||||
the settings for the currently selected element in the <a href="./docs#settings-window">settings
|
||||
window</a>.
|
||||
Once an element is selected there are a few useful keybinds available:
|
||||
</p>
|
||||
<ul>
|
||||
<li><strong>G</strong> enters movement mode, move your mouse to move the object along the x and y axis
|
||||
</li>
|
||||
<li><strong>S</strong> enters scale mode, move your mouse to scale the object along the x and y axis
|
||||
</li>
|
||||
<li><strong>R</strong> enters rotation mode, move your mouse to rotate the object around the Z-axis</li>
|
||||
<li><strong>M</strong> mirrors the object horziontally</li>
|
||||
<li><strong>Shift+M</strong> mirrors it vertically</li>
|
||||
<li><strong>X</strong> deletes the element</li>
|
||||
<li><strong>H</strong> toggles the visibility of the element on stream</li>
|
||||
<li><strong>Ctrl+R</strong> resets the scale and rotation</li>
|
||||
<li><strong>Shift+D</strong> duplicates the element</li>
|
||||
<li><strong>Mouse wheel up/down</strong> zoom in/out</li>
|
||||
<li><strong>Mouse wheel click</strong> pans the canvas</li>
|
||||
<li><strong>Ctrl+Space</strong> resets zoom and pan</li>
|
||||
</ul>
|
||||
<p>
|
||||
To exit any of the modes press <strong>ESC</strong> or click anywhere on the canvas. If you have used
|
||||
<a href="https://blender.org">Blender</a> before some of the keybinds should be familiar to you. When
|
||||
moving,
|
||||
scaling or rotating you can press <strong>X</strong>, <strong>Y</strong> or <strong>Z</strong> to lock
|
||||
the movement to the x or y axis respectively.
|
||||
</p>
|
||||
<p>
|
||||
If you have an image link in your clipboard you can paste it into the editor with
|
||||
<strong>Ctrl+V</strong>
|
||||
to create a new image element. The same goes for text which will create a new text element. The editor
|
||||
also has an internal clipboard which can be used to copy and paste elements. To copy an element press
|
||||
<strong>Shift+C</strong> and to paste it press <strong>Shift+V</strong>.
|
||||
</p>
|
||||
<h2 id="settings-window">Settings window</h2>
|
||||
<p>The settings window is split up into three segments:</p>
|
||||
<ul>
|
||||
<li>Adding elements</li>
|
||||
<li>Canvas settings</li>
|
||||
<li>Selected element settings</li>
|
||||
</ul>
|
||||
<h3>Adding elements</h3>
|
||||
<p>
|
||||
Clicking on any of the buttons at the top of the settings window will add a new element type.
|
||||
</p>
|
||||
<h3>Canvas settings</h3>
|
||||
<p>
|
||||
Here you can adjust the canvas size which will also be propagated to any overlay loaded in OBS.
|
||||
You can also change which stream is embed in the background, by entering the URL and the pressing
|
||||
"embed".
|
||||
</p>
|
||||
<h3>Selected element settings</h3>
|
||||
<p>
|
||||
Depending on what type of element is selected you'll see different settings. There are some basic
|
||||
properties that all elements share. The properties are more thoroughly described <a
|
||||
href="./docs#elements">here</a>.
|
||||
</p>
|
||||
<h2 id="element-list">Element list</h2>
|
||||
<p>
|
||||
The element list is a window that contains a list of all elements that are currently added to the
|
||||
overlay. The order of them represents the order in which they are displayed, so if there are two
|
||||
elements and element A is at the top of the list and element B is below A, A is displayed above B in the
|
||||
overlay. Clicking on an item in the list will change the currently selected element.
|
||||
</p>
|
||||
|
||||
<h1 id="elements">Elements</h1>
|
||||
<h2 id="basic-element-properties">Basic properties</h2>
|
||||
<p>
|
||||
All elements share the following basic properties:
|
||||
</p>
|
||||
<ul>
|
||||
<li>name</li>
|
||||
<li>position and size</li>
|
||||
<li>layer or z-index</li>
|
||||
<li>opacity</li>
|
||||
<li>visibility on stream</li>
|
||||
<li>pivot point</li>
|
||||
</ul>
|
||||
<h3>Name</h3>
|
||||
<p>Pretty selfexplanatory. The name can be used to make elements easier identifiable, but it does not have
|
||||
to be unique. IROS generates a separate unique id for each element.</p>
|
||||
<h3>Position and size</h3>
|
||||
<p>
|
||||
Each element has its own size and position. The position and scale are modified by moving or scaling the
|
||||
element. See <a href="./docs#usage-and-keybinds">Keybinds and basic usage</a> for more info.
|
||||
</p>
|
||||
<h3><img class="icon" src="static/img/layer.svg" /> Layer or z-index</h3>
|
||||
<p>Determines which elements are drawn at the top. By default all elements use layer 0, so the oder in which
|
||||
they are drawn is determined by the order in which they are added to the overlay. The last element is
|
||||
always at the top. If you want an element to be drawn above another one you can achieve this by
|
||||
either increasing the z-index of the element you want to be above, or by decreasing the z-index of the
|
||||
element
|
||||
that should be below.
|
||||
</p>
|
||||
<h3><img class="icon" src="static/img/opacity.svg" /> Opacity</h3>
|
||||
<p>With this slider the opacity or transparency of the element can be modified. If you accidentally set the
|
||||
opacity to zero you can use the <a href="./docs#element-list">element list</a> to find the element
|
||||
again.</p>
|
||||
<h3><img class="icon" src="static/img/visible.svg" /> Visibility on stream</h3>
|
||||
<p>By default each newily added element will not be visible on stream to prevent accidentally showing
|
||||
something
|
||||
you don't want to show. By checking or unchecking the checkbox next to the eyeball or by pressing
|
||||
<strong>H</strong> you can make an element visible or invisible on stream.
|
||||
</p>
|
||||
<h3><img class="icon" src="static/img/pivot.svg" /> Pivot point</h3>
|
||||
<p>
|
||||
The pivot point determines the origin for scaling and rotating the element. By default it is set to the
|
||||
center of the object. The setting has three buttons for the horizontal position of the pivot and three
|
||||
for the vertical position. By clicking on any of the buttons the pivot is modified, which is reflected
|
||||
for example by how the rotation affects the object.
|
||||
</p>
|
||||
|
||||
<h2 id="text"><img src="static/img/add-text.svg" class="icon element" /> Text</h2>
|
||||
<p>
|
||||
Can display text using basic markdown formatting, e.g. <strong>**bold**</strong>, <em>*italic*</em>,
|
||||
<s>~~strikethrough~~</s> or <span style="text-decoration: underline">__underline__</span>.
|
||||
</p>
|
||||
<p>The font of the text can be changed by typing the name of the desired font into the font textbox. Keep in
|
||||
mind that as of right now the desired font has to be installed on the machine that displays the overlay
|
||||
on stream.
|
||||
</p>
|
||||
<p>Other properties include the color of the text and the background.</p>
|
||||
|
||||
<h2 id="image"><img src="static/img/add-image.svg" class="icon element" /> Image</h2>
|
||||
<p>
|
||||
The image element can load an Image from any URL and display it in the overlay. If you copy the URL
|
||||
of an image to your clipboard and paste it in the editor with <strong>Ctrl+V</strong> a new image
|
||||
element using the URL from your clipboard will be created. As always the new element will not be visible
|
||||
on stream by default to prevent accidentally pasted images from showing up.
|
||||
</p>
|
||||
|
||||
<h2 id="countdown-and-timer"><img src="static/img/add-timer.svg" class="icon element" /> Countdown and
|
||||
timer
|
||||
</h2>
|
||||
<p>
|
||||
This element can either count the time up or down. It is essentially a text element with some logic to
|
||||
make it keep track of time. You can choose between the two modes "stopwatch" or "timer". If you choose
|
||||
timer you can enter the time from which it'll count down into the textbox. Lastly there's a start, pause
|
||||
and reset button to control the time tracking.
|
||||
</p>
|
||||
|
||||
<h2 id="emotes"><img src="static/img/add-emote.svg" class="icon element" /> Emotes</h2>
|
||||
<p>It can sometimes be useful to easily display emotes people use in chat on stream. When clicking this
|
||||
button a new dialog will open which lets you search for emotes available on <a
|
||||
href="https://7tv.app">7TV</a>. Type in the name of the emote in the search bar and hit enter or
|
||||
click "Search". The dialog will show the first 40 emotes that match the query. Click on the emote you
|
||||
want to add and it'll be added as a new image element to the overlay.
|
||||
</p>
|
||||
|
||||
<h2 id="audio"><img src="static/img/add-audio.svg" class="icon element" /> Audio
|
||||
</h2>
|
||||
<p>
|
||||
The audio element allows embedding of audio files into the overlay. Volume, playback speed, looping
|
||||
and seeking are all synchronized. Muting however is not to allow the element to be muted in the editor
|
||||
to
|
||||
prevent hearing the audio twice.
|
||||
</p>
|
||||
|
||||
<h2 id="video"><img src="static/img/add-video.svg" class="icon element" /> Video
|
||||
</h2>
|
||||
<p>
|
||||
The video element allows embedding of video files into the overlay. Volume, playback speed, looping
|
||||
and seeking are all synchronized. Muting however is not to allow the element to be muted in the editor
|
||||
to
|
||||
prevent hearing the audio twice.
|
||||
</p>
|
||||
|
||||
<h2 id="iframe"><img src="static/img/add-iframe.svg" class="icon element" /> Iframe
|
||||
</h2>
|
||||
<p>
|
||||
The iframe element can embed any website into the overlay. Note that interaction with the website is
|
||||
not synchronized. So clicking on links, scrolling and other interactions will only affect the iframe
|
||||
in the current editor but will not be reflected in the overlay. By default interaction with the iframe
|
||||
is therefore disabled.
|
||||
</p>
|
||||
|
||||
<h2 id="favorites"><img src="static/img/add-favorite.svg" class="icon element" /> Favorites</h2>
|
||||
<p>
|
||||
If there are any elements that you need frequently you can favorite them by selecting them and pressing
|
||||
<strong>F</strong>.
|
||||
When clicking on the favorite button a dialog opens with a list of all favorited elements. Click on any
|
||||
of them to add them to the overlay. The favorites are saved locally in your browser. If you want to
|
||||
remove favorites you can click on the "delete mode" button. Afterwards click on any element which marks
|
||||
it for deletion. If you click an element again it will be unmarked. When you're finished
|
||||
click "done" and all elements marked for deletion will be removed.
|
||||
</p>
|
||||
|
||||
<h1 id="faq">Frequently asked questions</h1>
|
||||
<p><strong>Where's the source code? Is this FOSS?</strong> Yes, it's available on <a
|
||||
href="https://github.com/univrsal/iros">Github</a>. You can self-host, modify and redistribute this
|
||||
software under the <a href="https://www.gnu.org/licenses/agpl-3.0.en.html">AGPL 3.0</a>.</p>
|
||||
<p><strong>Can feature X be added?</strong> Depends. You can open an issue <a
|
||||
href="https://github.com/univrsal/iros/issues/new/choose">here</a> to describe
|
||||
what you're looking for.</p>
|
||||
<p><strong>Where can I report bugs?</strong> Bugs can be reported on <a
|
||||
href="https://github.com/univrsal/iros/issues/new/choose">github</a>.</p>
|
||||
<p><strong>Why can't I move elements with my mouse?</strong> See <a href="#usage-and-keybinds">keybinds and
|
||||
basic usage</a>. </p>
|
||||
<p><strong>Isn't this basically what <a href="https://twitch.tv/moonmoon">moonmoon</a> uses?</strong>
|
||||
Yes, it's heavily inspired by that but written from scratch.</p>
|
||||
<p><strong>Is the overlay persistent?</strong> Overlay state is cached on the server and should be retained
|
||||
even after a server restart, but there's no guarantee.</p>
|
||||
<p><strong>What about latency?</strong> The server is located in central Europe so depending on the location
|
||||
of the streamer and the users of the editor the latency can differ, but it should generally be fast
|
||||
enough.</p>
|
||||
<p><strong>How does this actually work?</strong> It's basically just a bunch of plain JS and a small
|
||||
WebSocket server written in Go. No fancy frameworks.</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
+262
@@ -0,0 +1,262 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>IROS | Редактор </title>
|
||||
{{template "header.html" .}}
|
||||
|
||||
<link rel="stylesheet" type="text/css" media="screen" href="./static/css/main.css">
|
||||
<link rel="stylesheet" type="text/css" media="screen" href="./static/css/ui.css">
|
||||
<link rel="stylesheet" type="text/css" media="screen" href="./static/css/player.css">
|
||||
<link rel="stylesheet" type="text/css" media="screen" href="./static/css/overlay.css">
|
||||
|
||||
<script src="./js/config.js"></script>
|
||||
<script src="./static/js/commands/base.js"></script>
|
||||
<script src="./static/js/util.js"></script>
|
||||
<script src="./static/js/embed.js"></script>
|
||||
<script src="./static/js/viewer.js"></script>
|
||||
<script src="./static/js/editor/key_binds.js"></script>
|
||||
<script src="./static/js/editor/editor.js"></script>
|
||||
<script src="./static/js/editor/settings_ui.js"></script>
|
||||
<script src="./static/js/editor/modals.js"></script>
|
||||
<script src="./static/js/editor/7tv.js"></script>
|
||||
<script src="./static/js/editor/favorites.js"></script>
|
||||
<script src="./static/js/elements/element.js"></script>
|
||||
<script src="./static/js/elements/text.js"></script>
|
||||
<script src="./static/js/elements/image.js"></script>
|
||||
<script src="./static/js/elements/timer.js"></script>
|
||||
<script src="./static/js/elements/audio.js"></script>
|
||||
<script src="./static/js/elements/video.js"></script>
|
||||
<script src="./static/js/elements/iframe.js"></script>
|
||||
|
||||
<script src="https://player.twitch.tv/js/embed/v1.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="main-container">
|
||||
<div id="player-container">
|
||||
<div id="player"></div>
|
||||
<div id="overlay">
|
||||
</div>
|
||||
<canvas id="editor-canvas" class="no-input"></canvas>
|
||||
</div>
|
||||
|
||||
<div id="settings-window" class="window inactive">
|
||||
<div class="window-header" id="settings-header">
|
||||
<h1>Настройки</h1>
|
||||
</div>
|
||||
<div id="elements">
|
||||
<button onclick="add_text_element()" title="Добавить текст"><img id="text-icon"
|
||||
src="./static/img/add-text.svg" /></button>
|
||||
<button onclick="add_image_element()" title="Добавить изображение"><img id="image-icon"
|
||||
src="./static/img/add-image.svg" /></button>
|
||||
<button onclick="add_timer_element()" title="Добавить таймер"><img id="timer-icon"
|
||||
src="./static/img/add-timer.svg" /></button>
|
||||
<button onclick="add_audio_element()" title="Добавить аудио"><img id="audio-icon"
|
||||
src="./static/img/add-audio.svg" /></button>
|
||||
<button onclick="add_video_element()" title="Добавить видео"><img id="audio-icon"
|
||||
src="./static/img/add-video.svg" /></button>
|
||||
<button onclick="add_iframe_element()" title="Добавить iframe"><img id="audio-icon"
|
||||
src="./static/img/add-iframe.svg" /></button>
|
||||
<button onclick="open_modal(emote_search_modal)" title="Добавить эмодзи 7tv"><img id="emote-icon"
|
||||
src="./static/img/add-emote.svg" /></button>
|
||||
<button onclick="open_modal(favorites_modal)" title="Добавить из избранного"><img id="favorite-icon"
|
||||
src="./static/img/add-favorite.svg" /></button>
|
||||
</div>
|
||||
<div id="canvas-header">
|
||||
<h1>Холст</h1>
|
||||
</div>
|
||||
|
||||
<div id="canvas-settings">
|
||||
<img id="canvas-width-label" src="./static/img/canvas-width.svg" title="Ширина холста" />
|
||||
<input type="text" name="canvas-width" id="canvas-width" title="Ширина холста">
|
||||
|
||||
<img id="canvas-height-label" src="./static/img/canvas-height.svg" title="Высота холста" />
|
||||
<input type="text" name="canvas-height" id="canvas-height" title="Высота холста">
|
||||
|
||||
<input type="text" name="embed-url" id="embed-url" placeholder="URL стрима" required>
|
||||
<button id="embed-button" onclick="embed_player()">
|
||||
Встроить
|
||||
</button>
|
||||
<input type="checkbox" name="player-interaction" id="player-interaction"
|
||||
title="Разрешить взаимодействие с плеером, например изменение громкости или качества">
|
||||
<label id="player-interaction-lable" for="player-interaction"
|
||||
title="Разрешить взаимодействие с плеером, например изменение громкости или качества">Интерактивный плеер</label>
|
||||
</div>
|
||||
|
||||
<div id="element-header">
|
||||
<h1>Настройки элемента</h1>
|
||||
</div>
|
||||
|
||||
<div id="base-settings">
|
||||
<label for="element-name" title="Имя">Имя</label>
|
||||
<input type="text" name="name" id="element-name" title="Имя элемента">
|
||||
<label class="center-label" for="pos-x" title="Позиция X">X</label>
|
||||
<input type="text" name="pos-x" id="pos-x" title="Позиция элемента по горизонтали">
|
||||
|
||||
<label class="center-label" for="pos-y" title="Позиция Y">Y</label>
|
||||
<input type="text" name="pos-y" id="pos-y" title="Позиция элемента по вертикали">
|
||||
|
||||
<img id="width-label" src="./static/img/width.svg" title="Ширина элемента" />
|
||||
<input type="text" name="width" id="width" title="Ширина элемента">
|
||||
|
||||
<img id="height-label" src="./static/img/height.svg" title="Высота элемента" />
|
||||
<input type="text" name="height" id="height" title="Высота элемента">
|
||||
|
||||
<img id="z-index-label" src="./static/img/layer.svg" title="Слой элемента" />
|
||||
<input type="number" name="z-index" id="z-index" title="Слой (Z-index)">
|
||||
|
||||
<img id="opacity-label" src="./static/img/opacity.svg" title="Прозрачность" />
|
||||
<input type="range" name="opacity" id="opacity" value="100" min="1" max="100"
|
||||
title="Прозрачность элемента">
|
||||
|
||||
<img id="visibility-label" src="./static/img/visible.svg" title="Видимость элемента" />
|
||||
<input type="checkbox" name="visibility" id="visibility" title="Видимость элемента">
|
||||
|
||||
<img id="pivot-label" src="./static/img/pivot.svg" title="Точка привязки" />
|
||||
<div id="pivot-select">
|
||||
<div id="pivot-options-horizontal">
|
||||
<div id="pivot-h-left" pivot="left" class="pivot-option horizontal" title="Слева"></div>
|
||||
<div id="pivot-h-center" pivot="center" class="pivot-option horizontal" title="Центр"></div>
|
||||
<div id="pivot-h-right" pivot="right" class="pivot-option horizontal" title="Справа"></div>
|
||||
</div>
|
||||
<div id="pivot-options-vertical">
|
||||
<div id="pivot-v-top" pivot="top" class="pivot-option vertical" title="Верх"></div>
|
||||
<div id="pivot-v-center" pivot="center" class="pivot-option vertical" title="Центр"></div>
|
||||
<div id="pivot-v-bottom" pivot="bottom" class="pivot-option vertical" title="Низ"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="color-settings">
|
||||
<img id="color-label" src="./static/img/color.svg" title="Цвет элемента" />
|
||||
<input type="color" name="color" id="color" title="Цвет элемента">
|
||||
</div>
|
||||
|
||||
<div id="background-color-settings">
|
||||
<img id="background-color-label" src="./static/img/background-color.svg"
|
||||
title="Цвет фона элемента" />
|
||||
<input type="color" name="background-color" id="background-color" title="Цвет фона элемента">
|
||||
</div>
|
||||
|
||||
<div id="text-settings">
|
||||
<input type="checkbox" name="background-color" id="enable-background-color"
|
||||
title="Включить фоновый цвет">
|
||||
<label for="enable-background-color" title="Включить фоновый цвет">Фоновый цвет</label>
|
||||
<img id="font-label" src="./static/img/font.svg" title="Шрифт" />
|
||||
<input type="text" name="font" id="font" title="Шрифт элемента">
|
||||
|
||||
<img id="font-size-label" src="./static/img/font-size.svg" title="Размер шрифта" />
|
||||
<input type="number" name="font-size" id="font-size" title="Размер шрифта">
|
||||
|
||||
<textarea id="text" name="text" rows="4" cols="50"
|
||||
title="Текст элемента, поддерживает Markdown: **жирный**, *курсив*, __подчеркнутый__ и ~~зачеркнутый~~"></textarea>
|
||||
</div>
|
||||
|
||||
<div id="url-settings">
|
||||
<label for="url-input">URL</label>
|
||||
<input type="text" name="url-input" id="url-input">
|
||||
</div>
|
||||
|
||||
<div id="event-settings">
|
||||
<img id="block-events-label" src="./static/img/block-events.svg" title="Отключить взаимодействие" />
|
||||
<input type="checkbox" name="block-events" id="block-events" title="Отключить взаимодействие">
|
||||
</div>
|
||||
|
||||
<div id="media-settings">
|
||||
<img id="volume-label" src="./static/img/volume.svg" title="Громкость" />
|
||||
<input type="range" name="volume-input" id="volume-input" value="100" min="1" max="100"
|
||||
title="Громкость элемента">
|
||||
<img id="speed-label" src="./static/img/speed.svg" title="Скорость воспроизведения" />
|
||||
<input type="range" name="speed-input" id="speed-input" value="100" min="10" max="300"
|
||||
title="Скорость воспроизведения">
|
||||
<div id="seekbar-controls">
|
||||
<div id="progress">0:00</div>
|
||||
<input type="range" name="media-seek-bar" id="seek-bar" value="100" min="1" max="100"
|
||||
title="Прогресс">
|
||||
<div id="runtime">0:00</div>
|
||||
</div>
|
||||
|
||||
<img id="native-controls-label" src="./static/img/controls.svg" title="Включить стандартное управление" />
|
||||
<input type="checkbox" name="native-controls" id="native-controls" title="Включить стандартное управление">
|
||||
|
||||
<div id="media-buttons">
|
||||
<button id="media-start" onclick="start_media()"><img src="./static/img/play.svg"
|
||||
title="Играть" /></button>
|
||||
<button id="media-pause" onclick="pause_media()"><img src="./static/img/pause.svg"
|
||||
title="Пауза" /></button>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div id="timer-settings">
|
||||
<input type="radio" name="timer-type" id="timer-type-stopwatch" title="Секундомер">
|
||||
<label class="radio-button-label" for="timer-type" title="Секундомер">Секундомер</label>
|
||||
<input type="radio" name="timer-type" id="timer-type-timer" title="Таймер">
|
||||
<label class="radio-button-label" for="timer-type" title="Таймер">Таймер</label>
|
||||
|
||||
<label for="timer-time" title="Начало отсчета">Старт</label>
|
||||
<input type="text" name="timer-time" id="timer-time" title="Начало отсчета">
|
||||
<div></div>
|
||||
<div id="timer-buttons">
|
||||
<button id="timer-start" onclick="start_timer()">Старт</button>
|
||||
<button id="timer-stop" onclick="pause_timer()">Пауза</button>
|
||||
<button id="timer-reset" onclick="reset_timer()">Сброс</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="element-list-window" class="window inactive">
|
||||
<div id="element-list-header" class="window-header">
|
||||
<h1>Элементы</h1>
|
||||
</div>
|
||||
<div id="element-list">
|
||||
<select id="element-list-select" size="10">
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="modal-container" class="">
|
||||
<div id="emote-search-modal" class="window">
|
||||
<div class="window-header" id="emote-search-header">
|
||||
<h1>Поиск эмодзи на 7tv</h1>
|
||||
</div>
|
||||
<div id="emote-search">
|
||||
<input type="text" name="emote-search-input" id="emote-search-input" placeholder="Поиск...">
|
||||
<button id="emote-search-button" onclick="search_emotes()">
|
||||
Найти</button>
|
||||
</div>
|
||||
<div id="emote-search-results">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="favorites-modal" class="window">
|
||||
<div class="window-header" id="favorites-header">
|
||||
<h1>Добавить из избранного</h1>
|
||||
</div>
|
||||
<div id="favorites-info">
|
||||
<div class="label" id="favorites-hint-label">Добавьте элемент в избранное, выбрав его и нажав 'F'</div>
|
||||
<button id="favorites-delete-mode" onclick="favorite_toggle_delete_mode()">Режим удаления</button>
|
||||
</div>
|
||||
<div id="favorites-list">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="connection-indicator" class="disconnected">
|
||||
</div>
|
||||
|
||||
<div id="session-info" title="Задержка / Редакторов в сети / Зрителей в сети">0ms / 0 / 0</div>
|
||||
<div id="branding">
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var edt = new editor($("#overlay"));
|
||||
$('#branding').innerText = `IROS (${config.COMMIT})`;
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
+25
@@ -0,0 +1,25 @@
|
||||
<meta charset='utf-8'>
|
||||
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
|
||||
<link rel="icon" href="./static/img/favicon.png" type="image/x-icon" />
|
||||
<meta name='viewport' content='width=device-width, initial-scale=1'>
|
||||
|
||||
<!-- HTML Meta Tags -->
|
||||
<title>IROS</title>
|
||||
<meta name="description" content="The interactive remote overlay system">
|
||||
|
||||
<!-- Facebook Meta Tags -->
|
||||
<meta property="og:url" content="https://{{.ServerDomain}}{{.WebRoot}}docs">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:title" content="IROS | Documenation">
|
||||
<meta property="og:description" content="The interactive remote overlay system">
|
||||
<meta property="og:image" content="https://{{.ServerDomain}}{{.WebRoot}}static/img/og.png">
|
||||
|
||||
<!-- Twitter Meta Tags -->
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta property="twitter:domain" content="{{.ServerDomain}}">
|
||||
<meta property="twitter:url" content="https://{{.ServerDomain}}{{.WebRoot}}docs">
|
||||
<meta name="twitter:title" content="IROS | Viewer">
|
||||
<meta name="twitter:description" content="The interactive remote overlay system">
|
||||
<meta name="twitter:image" content="https://{{.ServerDomain}}{{.WebRoot}}static/img/og.png">
|
||||
|
||||
<base href="{{.WebRoot}}">
|
||||
Reference in New Issue
Block a user