mirror of
https://github.com/copy/v86.git
synced 2025-12-31 04:23:15 +00:00
add theatre mode
This commit is contained in:
SuperMaxusa
Fabian
parent
92ba111d92
commit
519480d4cd
4 changed files with 188 additions and 4 deletions
|
|
@ -228,13 +228,13 @@
|
|||
<input type="button" value="Go fullscreen" id="fullscreen">
|
||||
<input type="button" value="Take screenshot" id="take_screenshot">
|
||||
<input type="button" value="Mute" id="mute">
|
||||
<input type="button" value="Enable theatre mode" id="toggle_theatre">
|
||||
<input type="button" style="display: none" value="Enable zoom to fit" id="toggle_zoom_to_fit">
|
||||
|
||||
<label>
|
||||
Scale:
|
||||
<input type="number" min="0.25" step="0.25" value="1.0" id="scale" style="width: 50px">
|
||||
</label>
|
||||
|
||||
<br>
|
||||
</div>
|
||||
|
||||
<pre style="margin: 0" id="log_levels"></pre>
|
||||
|
|
@ -308,3 +308,6 @@
|
|||
</textarea>
|
||||
|
||||
<div id="terminal"></div>
|
||||
|
||||
<input type="button" value="Hide UI" id="toggle_ui" style="display: none">
|
||||
<div id="theatre_background" style="display: none"></div>
|
||||
|
|
|
|||
|
|
@ -262,13 +262,13 @@
|
|||
<input type="button" value="Go fullscreen" id="fullscreen">
|
||||
<input type="button" value="Take screenshot" id="take_screenshot">
|
||||
<input type="button" value="Mute" id="mute">
|
||||
<input type="button" value="Enable theatre mode" id="toggle_theatre">
|
||||
<input type="button" style="display: none" value="Enable zoom to fit" id="toggle_zoom_to_fit">
|
||||
|
||||
<label>
|
||||
Scale:
|
||||
<input type="number" min="0.25" step="0.25" value="1.0" id="scale" style="width: 50px">
|
||||
</label>
|
||||
|
||||
<br><br>
|
||||
</div>
|
||||
<pre style="display: none" id="loading"></pre>
|
||||
</div>
|
||||
|
|
@ -335,6 +335,9 @@
|
|||
|
||||
<div id="terminal"></div>
|
||||
|
||||
<input type="button" value="Hide UI" id="toggle_ui" style="display: none">
|
||||
<div id="theatre_background" style="display: none"></div>
|
||||
|
||||
<br style="clear: both">
|
||||
<code>Version: <a id="version" href="https://github.com/copy/v86/commits/98e7110c2">98e7110c2</a> (Feb 16, 2021 12:02)</code>
|
||||
|
||||
|
|
|
|||
|
|
@ -2227,6 +2227,11 @@ function start_emulation(profile, query_args)
|
|||
emulator.serial0_send(query_args.get("s") + "\n");
|
||||
}, 25);
|
||||
}
|
||||
|
||||
if(query_args?.has("theatre") && bool_arg(query_args?.get("theatre")))
|
||||
{
|
||||
$("toggle_theatre").click();
|
||||
}
|
||||
});
|
||||
|
||||
emulator.add_listener("emulator-loaded", function()
|
||||
|
|
@ -2261,14 +2266,18 @@ function init_ui(profile, settings, emulator)
|
|||
$("runtime_infos").style.display = "block";
|
||||
$("screen_container").style.display = "block";
|
||||
|
||||
var filesystem_is_enabled = false;
|
||||
|
||||
if(settings.filesystem)
|
||||
{
|
||||
filesystem_is_enabled = true;
|
||||
init_filesystem_panel(emulator);
|
||||
}
|
||||
else
|
||||
{
|
||||
emulator.add_listener("9p-attach", function()
|
||||
{
|
||||
filesystem_is_enabled = true;
|
||||
init_filesystem_panel(emulator);
|
||||
});
|
||||
}
|
||||
|
|
@ -2319,6 +2328,90 @@ function init_ui(profile, settings, emulator)
|
|||
$("toggle_mouse").blur();
|
||||
};
|
||||
|
||||
var theatre_mode = false;
|
||||
var theatre_ui = true;
|
||||
var theatre_zoom_to_fit = false;
|
||||
|
||||
function zoom_to_fit()
|
||||
{
|
||||
// reset size
|
||||
emulator.screen_set_scale(1, 1);
|
||||
|
||||
const emulator_screen = $("screen_container").getBoundingClientRect();
|
||||
const emulator_screen_width = emulator_screen.width;
|
||||
const emulator_screen_height = emulator_screen.height;
|
||||
|
||||
const viewport_screen_width = window.innerWidth;
|
||||
const viewport_screen_height = window.innerHeight;
|
||||
|
||||
const n = Math.min(viewport_screen_width / emulator_screen_width, viewport_screen_height / emulator_screen_height);
|
||||
emulator.screen_set_scale(n, n);
|
||||
}
|
||||
|
||||
$("toggle_ui").onclick = function()
|
||||
{
|
||||
theatre_ui = !theatre_ui;
|
||||
|
||||
$("runtime_options").style.display = theatre_ui ? "block" : "none";
|
||||
$("runtime_infos").style.display = theatre_ui ? "block" : "none";
|
||||
$("filesystem_panel").style.display = (filesystem_is_enabled && theatre_ui) ? "block" : "none";
|
||||
|
||||
$("toggle_ui").value = (theatre_ui ? "Hide" : "Show") + " UI";
|
||||
$("toggle_ui").blur();
|
||||
};
|
||||
|
||||
$("toggle_theatre").onclick = function()
|
||||
{
|
||||
theatre_mode = !theatre_mode;
|
||||
|
||||
if(!theatre_ui)
|
||||
{
|
||||
$("toggle_ui").click();
|
||||
}
|
||||
|
||||
if(!theatre_mode && theatre_zoom_to_fit)
|
||||
{
|
||||
$("toggle_zoom_to_fit").click();
|
||||
}
|
||||
|
||||
["screen_container", "runtime_options", "runtime_infos", "filesystem_panel"].forEach(el => $(el).classList.toggle("theatre_" + el));
|
||||
|
||||
$("theatre_background").style.display = theatre_mode ? "block" : "none";
|
||||
$("toggle_zoom_to_fit").style.display = theatre_mode ? "inline" : "none";
|
||||
$("toggle_ui").style.display = theatre_mode ? "block" : "none";
|
||||
|
||||
// hide scrolling
|
||||
document.body.style.overflow = theatre_mode ? "hidden" : "visible";
|
||||
|
||||
$("toggle_theatre").value = (theatre_mode ? "Dis" : "En") + "able theatre mode";
|
||||
$("toggle_theatre").blur();
|
||||
};
|
||||
|
||||
$("toggle_zoom_to_fit").onclick = function()
|
||||
{
|
||||
theatre_zoom_to_fit = !theatre_zoom_to_fit;
|
||||
$("scale").disabled = theatre_zoom_to_fit;
|
||||
|
||||
if(theatre_zoom_to_fit)
|
||||
{
|
||||
window.addEventListener("resize", zoom_to_fit, true);
|
||||
emulator.add_listener("screen-set-size", zoom_to_fit);
|
||||
|
||||
zoom_to_fit();
|
||||
}
|
||||
else
|
||||
{
|
||||
window.removeEventListener("resize", zoom_to_fit, true);
|
||||
emulator.remove_listener("screen-set-size", zoom_to_fit);
|
||||
|
||||
const n = parseFloat($("scale").value) || 1;
|
||||
emulator.screen_set_scale(n, n);
|
||||
}
|
||||
|
||||
$("toggle_zoom_to_fit").value = (theatre_zoom_to_fit ? "Dis" : "En") + "able zoom to fit";
|
||||
$("toggle_zoom_to_fit").blur();
|
||||
};
|
||||
|
||||
var last_tick = 0;
|
||||
var running_time = 0;
|
||||
var last_instr_counter = 0;
|
||||
|
|
|
|||
85
v86.css
85
v86.css
|
|
@ -53,6 +53,9 @@
|
|||
background-color: #000;
|
||||
touch-action: none;
|
||||
}
|
||||
#runtime_options {
|
||||
padding-bottom: 1.5em;
|
||||
}
|
||||
body {
|
||||
background-color: #111;
|
||||
color: #fff;
|
||||
|
|
@ -211,6 +214,88 @@ input[type=number] {
|
|||
content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 55 48"><g style="fill:white"><path d="M91 127h26v5H91z" transform="translate(-64 -85)"/><path d="M118 17h26v5h-26z" transform="rotate(45 70 -120)"/><path d="M-43 139h26v5h-26z" transform="rotate(-45 -134 35)"/></g></svg>');
|
||||
}
|
||||
|
||||
.theatre_screen_container {
|
||||
position: fixed;
|
||||
transform: translate(-50%, -50%);
|
||||
top: 50vh;
|
||||
left: 50vw;
|
||||
z-index: 2;
|
||||
outline: none !important;
|
||||
margin: 0 !important;
|
||||
float: none;
|
||||
}
|
||||
.theatre_runtime_options {
|
||||
position: fixed;
|
||||
width: 100vw;
|
||||
top: 0;
|
||||
left: 0;
|
||||
padding: 5px !important;
|
||||
z-index: 3;
|
||||
background-color: black;
|
||||
border-bottom: 2px solid #333;
|
||||
transform: translate(0%, -50%);
|
||||
}
|
||||
.theatre_runtime_options:hover {
|
||||
transform: translate(0%, 0%);
|
||||
}
|
||||
.theatre_runtime_infos {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
z-index: 4;
|
||||
margin: 0 !important;
|
||||
transform: translate(-10px, calc(100% - 65px));
|
||||
opacity: 40%;
|
||||
}
|
||||
.theatre_runtime_infos:hover {
|
||||
transform: translate(-10px, -5px);
|
||||
}
|
||||
.theatre_filesystem_panel {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
z-index: 4;
|
||||
margin: 0 !important;
|
||||
transform: translate(0%, 75%);
|
||||
left: 280px;
|
||||
}
|
||||
.theatre_filesystem_panel:hover {
|
||||
transform: translate(0%, -5px);
|
||||
}
|
||||
#theatre_background {
|
||||
position: fixed;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: black;
|
||||
display: none;
|
||||
z-index: 1;
|
||||
}
|
||||
#toggle_ui {
|
||||
display: none;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
z-index: 5;
|
||||
}
|
||||
.theatre_filesystem_panel, .theatre_filesystem_panel {
|
||||
opacity: 40%;
|
||||
}
|
||||
#toggle_ui, .theatre_runtime_options {
|
||||
opacity: 25%;
|
||||
}
|
||||
#toggle_ui,
|
||||
.theatre_runtime_options,
|
||||
.theatre_runtime_infos,
|
||||
.theatre_filesystem_panel {
|
||||
transition: 0.25s;
|
||||
}
|
||||
#toggle_ui:hover,
|
||||
.theatre_runtime_options:hover,
|
||||
.theatre_runtime_infos:hover,
|
||||
.theatre_filesystem_panel:hover {
|
||||
opacity: 100%;
|
||||
}
|
||||
|
||||
/* the code below was copied from xterm.css */
|
||||
|
||||
.xterm {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue