Files
miracast-enabler/webroot/index.html

644 lines
23 KiB
HTML
Raw Normal View History

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Miracast Enabler</title>
<style>
:root {
--bg: #121212;
--surface: #1e1e1e;
--surface2: #2a2a2a;
--primary: #bb86fc;
--primary-dim: #9965d6;
--on-surface: #e0e0e0;
--on-surface-dim: #888;
--success: #4caf50;
--warning: #ff9800;
--error: #f44336;
--radius: 12px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
background: var(--bg);
color: var(--on-surface);
min-height: 100vh;
padding: 16px;
-webkit-font-smoothing: antialiased;
}
.header {
text-align: center;
padding: 24px 0 16px;
}
.header h1 {
font-size: 22px;
font-weight: 600;
color: var(--primary);
}
.header .version {
font-size: 12px;
color: var(--on-surface-dim);
margin-top: 4px;
}
.status-banner {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 16px;
border-radius: var(--radius);
margin-bottom: 20px;
font-size: 14px;
font-weight: 500;
}
.status-banner.active {
background: rgba(76, 175, 80, 0.15);
color: var(--success);
}
.status-banner.inactive {
background: rgba(244, 67, 54, 0.15);
color: var(--error);
}
.status-banner.loading {
background: rgba(255, 152, 0, 0.15);
color: var(--warning);
}
.status-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: currentColor;
flex-shrink: 0;
}
.card {
background: var(--surface);
border-radius: var(--radius);
padding: 16px;
margin-bottom: 12px;
}
.card-title {
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--primary);
margin-bottom: 12px;
}
.setting-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 0;
border-bottom: 1px solid var(--surface2);
}
.setting-row:last-child { border-bottom: none; }
.setting-label {
font-size: 15px;
font-weight: 500;
}
.setting-desc {
font-size: 12px;
color: var(--on-surface-dim);
margin-top: 2px;
}
.toggle {
position: relative;
width: 48px;
height: 26px;
flex-shrink: 0;
}
.toggle input {
opacity: 0;
width: 0;
height: 0;
}
.toggle .slider {
position: absolute;
inset: 0;
background: var(--surface2);
border-radius: 13px;
cursor: pointer;
transition: background 0.2s;
}
.toggle .slider::before {
content: "";
position: absolute;
width: 20px;
height: 20px;
left: 3px;
bottom: 3px;
background: var(--on-surface-dim);
border-radius: 50%;
transition: transform 0.2s, background 0.2s;
}
.toggle input:checked + .slider {
background: var(--primary-dim);
}
.toggle input:checked + .slider::before {
transform: translateX(22px);
background: var(--primary);
}
select.setting-select {
background: var(--surface2);
color: var(--on-surface);
border: none;
border-radius: 8px;
padding: 8px 12px;
font-size: 14px;
outline: none;
cursor: pointer;
flex-shrink: 0;
}
.info-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.info-item {
background: var(--surface2);
border-radius: 8px;
padding: 10px 12px;
}
.info-item .label {
font-size: 11px;
color: var(--on-surface-dim);
text-transform: uppercase;
letter-spacing: 0.3px;
}
.info-item .value {
font-size: 14px;
font-weight: 500;
margin-top: 2px;
word-break: break-all;
}
.log-area {
background: var(--surface2);
border-radius: 8px;
padding: 12px;
font-family: "Cascadia Code", "Fira Code", monospace;
font-size: 12px;
line-height: 1.6;
max-height: 200px;
overflow-y: auto;
color: var(--on-surface-dim);
white-space: pre-wrap;
word-break: break-all;
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 10px 20px;
border: none;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: opacity 0.2s;
width: 100%;
margin-top: 8px;
}
.btn:active { opacity: 0.7; }
.btn-primary {
background: var(--primary);
color: #000;
}
.btn-secondary {
background: var(--surface2);
color: var(--on-surface);
}
</style>
</head>
<body>
<div class="header">
<h1>Miracast Enabler</h1>
<div class="version">v1.0.0</div>
</div>
<div id="statusBanner" class="status-banner loading">
<div class="status-dot"></div>
<span id="statusText">Reading device state...</span>
</div>
<!-- Core Toggles -->
<div class="card">
<div class="card-title">Miracast</div>
<div class="setting-row">
<div>
<div class="setting-label">Wi-Fi Display</div>
<div class="setting-desc">Master toggle for Miracast</div>
</div>
<label class="toggle">
<input type="checkbox" id="toggleWfd" onchange="setProp('persist.debug.wfd.enable', this.checked ? '1' : '0')">
<span class="slider"></span>
</label>
</div>
<div class="setting-row">
<div>
<div class="setting-label">Disable HDCP</div>
<div class="setting-desc">Skip DRM handshake (fixes many receivers)</div>
</div>
<label class="toggle">
<input type="checkbox" id="toggleHdcp" onchange="setProp('persist.sys.wfd.nohdcp', this.checked ? '1' : '0')">
<span class="slider"></span>
</label>
</div>
<div class="setting-row">
<div>
<div class="setting-label">Virtual Display</div>
<div class="setting-desc">Use virtual display instead of overlay</div>
</div>
<label class="toggle">
<input type="checkbox" id="toggleVirtual" onchange="setProp('persist.sys.wfd.virtual', this.checked ? '1' : '0')">
<span class="slider"></span>
</label>
</div>
</div>
<!-- Resolution & Codec -->
<div class="card">
<div class="card-title">Quality</div>
<div class="setting-row">
<div>
<div class="setting-label">Max Resolution</div>
<div class="setting-desc">Caps output resolution for stability</div>
</div>
<select class="setting-select" id="selectResolution" onchange="setProp('persist.sys.wfd.resolution', this.value)">
<option value="0">Auto</option>
<option value="7">1920x1080 (30Hz)</option>
<option value="28">1920x1080 (60Hz)</option>
<option value="6">1280x720 (30Hz)</option>
<option value="27">1280x720 (60Hz)</option>
<option value="5">800x480 (30Hz)</option>
</select>
</div>
<div class="setting-row">
<div>
<div class="setting-label">WLAN HDCP</div>
<div class="setting-desc">Wi-Fi level HDCP control</div>
</div>
<select class="setting-select" id="selectWlanHdcp" onchange="setProp('wlan.wfd.hdcp', this.value)">
<option value="disable">Disabled</option>
<option value="enable">Enabled</option>
</select>
</div>
</div>
<!-- Pixel-Specific -->
<div class="card">
<div class="card-title">Pixel / Tensor Tweaks</div>
<div class="setting-row">
<div>
<div class="setting-label">Force P2P Concurrency</div>
<div class="setting-desc">Allow Wi-Fi Direct alongside station mode</div>
</div>
<label class="toggle">
<input type="checkbox" id="toggleP2p" onchange="setProp('wifi.direct.interface', this.checked ? 'p2p-dev-wlan0' : '')">
<span class="slider"></span>
</label>
</div>
<div class="setting-row">
<div>
<div class="setting-label">Force Display Composition</div>
<div class="setting-desc">Use GPU composition for wireless display</div>
</div>
<label class="toggle">
<input type="checkbox" id="toggleComposition" onchange="setProp('debug.sf.enable_hwc_vds', this.checked ? '0' : '1')">
<span class="slider"></span>
</label>
</div>
<div class="setting-row">
<div>
<div class="setting-label">Fold Display Source</div>
<div class="setting-desc">Which display to mirror on foldables</div>
</div>
<select class="setting-select" id="selectFoldDisplay" onchange="setFoldDisplay(this.value)">
<option value="default">Active Display</option>
<option value="inner">Inner Display</option>
<option value="outer">Outer Display</option>
</select>
</div>
</div>
<!-- Framework Overlay -->
<div class="card">
<div class="card-title">Framework Overlay</div>
<div class="setting-row">
<div>
<div class="setting-label">config_enableWifiDisplay</div>
<div class="setting-desc">Framework feature flag (fabricated overlay)</div>
</div>
<label class="toggle">
<input type="checkbox" id="toggleOverlayWfd" onchange="setFabricatedOverlay('MiracastEnablerWifiDisplay', 'config_enableWifiDisplay', this.checked)">
<span class="slider"></span>
</label>
</div>
<div class="setting-row">
<div>
<div class="setting-label">config_wifiDisplaySupportsProtectedBuffers</div>
<div class="setting-desc">Allow DRM content over wireless display</div>
</div>
<label class="toggle">
<input type="checkbox" id="toggleOverlayProtected" onchange="setFabricatedOverlay('MiracastEnablerProtectedBuffers', 'config_wifiDisplaySupportsProtectedBuffers', this.checked)">
<span class="slider"></span>
</label>
</div>
<div class="setting-row">
<div>
<div class="setting-label">Overlay Status</div>
<div class="setting-desc" id="overlayStatusDesc">Checking...</div>
</div>
<button class="btn btn-secondary" style="width:auto;margin:0;padding:6px 14px" onclick="reapplyOverlays()">Re-apply</button>
</div>
</div>
<!-- Device Info -->
<div class="card">
<div class="card-title">Device Info</div>
<div class="info-grid">
<div class="info-item">
<div class="label">Device</div>
<div class="value" id="infoDevice"></div>
</div>
<div class="info-item">
<div class="label">SoC</div>
<div class="value" id="infoSoc"></div>
</div>
<div class="info-item">
<div class="label">Android</div>
<div class="value" id="infoAndroid"></div>
</div>
<div class="info-item">
<div class="label">Wi-Fi Chip</div>
<div class="value" id="infoWifi"></div>
</div>
</div>
</div>
<!-- Log -->
<div class="card">
<div class="card-title">Log</div>
<div class="log-area" id="logArea">Initializing...</div>
<div style="display:flex;gap:8px">
<button class="btn btn-secondary" style="flex:1" onclick="refreshAll()">Refresh Status</button>
<button class="btn btn-secondary" style="flex:1" onclick="showModuleLog()">Module Log</button>
</div>
</div>
<script>
// KernelSU WebUI shell execution wrapper
function exec(cmd) {
return new Promise((resolve, reject) => {
const callbackName = 'exec_cb_' + Date.now() + '_' + Math.random().toString(36).slice(2);
window[callbackName] = (errno, stdout, stderr) => {
delete window[callbackName];
resolve({ errno, stdout: stdout || '', stderr: stderr || '' });
};
try {
ksu.exec(cmd, '{}', callbackName);
} catch (e) {
delete window[callbackName];
reject(e);
}
});
}
function log(msg) {
const area = document.getElementById('logArea');
const ts = new Date().toLocaleTimeString('en-US', { hour12: false });
area.textContent += '\n[' + ts + '] ' + msg;
area.scrollTop = area.scrollHeight;
}
async function getprop(name) {
try {
const r = await exec('getprop ' + name);
return r.stdout.trim();
} catch (e) {
return '';
}
}
async function setProp(name, value) {
log('Setting ' + name + '=' + value);
try {
// resetprop for runtime, setprop for persistence where applicable
await exec('resetprop ' + name + ' ' + JSON.stringify(value));
log('OK: ' + name + ' = ' + value);
updateStatus();
} catch (e) {
log('ERROR setting ' + name + ': ' + e.message);
}
}
async function setFabricatedOverlay(name, resource, enabled) {
log('Setting fabricated overlay: ' + name + ' = ' + enabled);
try {
if (enabled) {
// 0x12 = TYPE_INT_BOOLEAN, 0xFFFFFFFF = true
await exec('cmd overlay fabricate --target android --name ' + name +
' android:bool/' + resource + ' 0x12 0xFFFFFFFF');
await exec('cmd overlay enable --user current com.android.shell:' + name);
} else {
await exec('cmd overlay disable --user current com.android.shell:' + name);
}
log('OK: ' + name + ' = ' + (enabled ? 'enabled' : 'disabled'));
await checkOverlayStatus();
} catch (e) {
log('ERROR: ' + e.message);
}
}
async function reapplyOverlays() {
log('Re-applying all fabricated overlays...');
try {
await exec('cmd overlay fabricate --target android --name MiracastEnablerWifiDisplay android:bool/config_enableWifiDisplay 0x12 0xFFFFFFFF');
await exec('cmd overlay fabricate --target android --name MiracastEnablerProtectedBuffers android:bool/config_wifiDisplaySupportsProtectedBuffers 0x12 0xFFFFFFFF');
await exec('cmd overlay enable --user current com.android.shell:MiracastEnablerWifiDisplay');
await exec('cmd overlay enable --user current com.android.shell:MiracastEnablerProtectedBuffers');
log('OK: overlays re-applied');
await checkOverlayStatus();
} catch (e) {
log('ERROR: ' + e.message);
}
}
async function checkOverlayStatus() {
try {
const r = await exec('cmd overlay list | grep -i miracast');
const lines = r.stdout.trim();
const desc = document.getElementById('overlayStatusDesc');
const wfdToggle = document.getElementById('toggleOverlayWfd');
const protToggle = document.getElementById('toggleOverlayProtected');
if (lines) {
desc.textContent = lines.replace(/\n/g, ' | ');
// [x] = enabled, [ ] = disabled
wfdToggle.checked = lines.includes('[x] com.android.shell:MiracastEnablerWifiDisplay');
protToggle.checked = lines.includes('[x] com.android.shell:MiracastEnablerProtectedBuffers');
} else {
desc.textContent = 'No fabricated overlays found (will be created on next boot)';
wfdToggle.checked = false;
protToggle.checked = false;
}
} catch (e) {
document.getElementById('overlayStatusDesc').textContent = 'Error checking overlay status';
}
}
async function showModuleLog() {
try {
const r = await exec('cat /data/adb/modules/miracast-enabler/miracast.log 2>/dev/null || echo "No log file found"');
const area = document.getElementById('logArea');
area.textContent = '=== Module Boot Log ===\n' + r.stdout;
area.scrollTop = area.scrollHeight;
} catch (e) {
log('Could not read module log');
}
}
async function setFoldDisplay(mode) {
log('Setting fold display source: ' + mode);
try {
// Display IDs vary by device:
// rango (Pixel 10 Pro Fold): inner=0, outer=3
// comet (Pixel 9 Pro Fold): inner=0, outer=1
// felix (Pixel Fold 1): inner=0, outer=1
// We read the actual device to pick the right outer ID
const device = await getprop('ro.product.device');
const outerDisplayId = (device === 'rango') ? '3' : '1';
if (mode === 'inner') {
await exec('resetprop persist.sys.wfd.display_id 0');
} else if (mode === 'outer') {
await exec('resetprop persist.sys.wfd.display_id ' + outerDisplayId);
} else {
await exec('resetprop --delete persist.sys.wfd.display_id');
}
log('OK: fold display = ' + mode + (mode === 'outer' ? ' (ID ' + outerDisplayId + ')' : ''));
} catch (e) {
log('ERROR: ' + e.message);
}
}
async function updateStatus() {
const wfd = await getprop('persist.debug.wfd.enable');
const banner = document.getElementById('statusBanner');
const text = document.getElementById('statusText');
if (wfd === '1') {
banner.className = 'status-banner active';
text.textContent = 'Miracast enabled';
} else {
banner.className = 'status-banner inactive';
text.textContent = 'Miracast disabled';
}
}
async function loadCurrentValues() {
const props = {
'persist.debug.wfd.enable': 'toggleWfd',
'persist.sys.wfd.nohdcp': 'toggleHdcp',
'persist.sys.wfd.virtual': 'toggleVirtual',
};
for (const [prop, id] of Object.entries(props)) {
const val = await getprop(prop);
document.getElementById(id).checked = (val === '1');
}
// P2P concurrency
const p2pIface = await getprop('wifi.direct.interface');
document.getElementById('toggleP2p').checked = (p2pIface === 'p2p-dev-wlan0');
// HWC virtual display — note: toggle is inverted (checked = force GPU = hwc_vds=0)
const hwcVds = await getprop('debug.sf.enable_hwc_vds');
document.getElementById('toggleComposition').checked = (hwcVds === '0');
// Resolution
const res = await getprop('persist.sys.wfd.resolution');
if (res) {
document.getElementById('selectResolution').value = res;
}
// WLAN HDCP
const wlanHdcp = await getprop('wlan.wfd.hdcp');
if (wlanHdcp) {
document.getElementById('selectWlanHdcp').value = wlanHdcp;
}
// Fold display
const displayId = await getprop('persist.sys.wfd.display_id');
if (displayId === '0') {
document.getElementById('selectFoldDisplay').value = 'inner';
} else if (displayId === '1') {
document.getElementById('selectFoldDisplay').value = 'outer';
}
}
async function loadDeviceInfo() {
const device = await getprop('ro.product.model');
const soc = await getprop('ro.soc.model');
const android = await getprop('ro.build.version.release');
document.getElementById('infoDevice').textContent = device || 'Unknown';
document.getElementById('infoSoc').textContent = soc || 'Unknown';
document.getElementById('infoAndroid').textContent = android || 'Unknown';
// Detect Wi-Fi chip from loaded kernel modules
try {
const r = await exec('ls /sys/module/ | grep -iE "^(bcmdhd|qca|wcn|wlan|ath|mt76|iwl)" | head -1');
const chip = r.stdout.trim();
document.getElementById('infoWifi').textContent = chip || 'Unknown';
} catch (e) {
document.getElementById('infoWifi').textContent = 'Unknown';
}
}
async function refreshAll() {
log('Refreshing...');
await loadCurrentValues();
await updateStatus();
await loadDeviceInfo();
await checkOverlayStatus();
log('Refresh complete');
}
// Init
(async function init() {
try {
await refreshAll();
log('Ready');
} catch (e) {
log('Init error: ' + e.message);
document.getElementById('statusBanner').className = 'status-banner loading';
document.getElementById('statusText').textContent = 'Error reading device state';
}
})();
</script>
</body>
</html>