Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix for linux web interface #24

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

fix for linux web interface #24

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions Cargo.toml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ quick-xml = "0.17"
rand = "0.7"
lazy_static = "1.4"
crossbeam = "0.7.3"
web-view = "0.6"
web-view = "0.7"
tinyfiledialogs = "3.3.9"
getopts = "0.2"
webbrowser = "0.5.2"
Expand All @@ -45,4 +45,4 @@ panic = "abort"
opt-level = 0

[package.metadata.winres]
LegalCopyright = "© 2019-2020 prixt"
LegalCopyright = "© 2019-2020 prixt"
12 changes: 11 additions & 1 deletion build.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,22 @@ fn main() -> Result<(), Box<dyn Error>> {
#[cfg(all(target_os="windows", feature = "edge"))]
let range_css = include_str!("web/range-windows-edge.css");

#[cfg(target_os="linux")]
let index_html = include_str!("web/index-linux.html")
.replace("{comment_start}" , "<!--")
.replace("{comment_end}" , "-->")
.replace("{range}" , range_css)
.replace("{w3}" , include_str!("web/w3.css"))
.replace("{js}" , include_str!("web/script-linux.js"));

#[cfg(not(target_os="linux"))]
let index_html = include_str!("web/index.html")
.replace("{comment_start}" , "<!--")
.replace("{comment_end}" , "-->")
.replace("{range}" , range_css)
.replace("{w3}" , include_str!("web/w3.css"))
.replace("{js}" , include_str!("web/script.js"));

let index_html = html_minifier::minify(index_html)?;

File::create(dest_dir)?
Expand All @@ -32,4 +42,4 @@ fn main() -> Result<(), Box<dyn Error>> {
.compile()?;

Ok(())
}
}
55 changes: 55 additions & 0 deletions web/index-linux.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
<!doctype html>
<html>
<head>
<!--{comment_end}
<style type="text/css">{w3}</style>
<style type="text/css">{range}</style>
<script type="text/javascript">{js}</script>
{comment_start}-->
</head>
<body onload="main()">
<header class='w3-bar w3-light-grey w3-small'>
<div class='w3-dropdown-hover'>
<button class='w3-button'>Load</button>
<div class='w3-dropdown-content w3-bar-block w3-border'>
<button class='w3-bar-item w3-button'
onclick="window.webkit.messageHandlers.external.postMessage('load_gamelog')">Load gamelog.txt</button>
<button class='w3-bar-item w3-button'
onclick="window.webkit.messageHandlers.external.postMessage('load_soundpack')">Load soundpack</button>
<button class='w3-bar-item w3-button'
onclick="window.webkit.messageHandlers.external.postMessage('load_ignore_list')">Load ignore.txt</button>
</div>
</div>
<div class='w3-dropdown-hover'>
<button class='w3-button'>Settings</button>
<div class='w3-dropdown-content w3-bar-block w3-border'>
<button class='w3-bar-item w3-button'
onclick="window.webkit.messageHandlers.external.postMessage('set_default_paths')">Set current paths as default</button>
<button class='w3-bar-item w3-button'
onclick="window.webkit.messageHandlers.external.postMessage('remove_default_paths')">Delete default paths setting</button>
<button class='w3-bar-item w3-button'
onclick="window.webkit.messageHandlers.external.postMessage('set_default_volumes')">Set current volumes as default</button>
<button class='w3-bar-item w3-button'
onclick="window.webkit.messageHandlers.external.postMessage('remove_default_volumes')">Delete default volumes setting</button>
</div>
</div>
<div class='w3-dropdown-hover w3-right'>
<button class='w3-button'>Options</button>
<div class='w3-dropdown-content w3-bar-block w3-border' style='right:0'>
<button class='w3-bar-item w3-button'
onclick="window.webkit.messageHandlers.external.postMessage('link_original')">&#x1f517; - zwei's original SoundSense & soundpack</button>
<button class='w3-bar-item w3-button'
onclick="window.webkit.messageHandlers.external.postMessage('link_fork')">&#x1f517; - jecowa's soundpack fork</button>
<button class='w3-bar-item w3-button'
onclick="window.webkit.messageHandlers.external.postMessage('link_source')">&#x1f517; - SoundSense-RS Github repository</button>
<button class='w3-bar-item w3-button'
onclick="window.webkit.messageHandlers.external.postMessage('show_about')">&#x2139; - About</button>
</div>
</div>
</header>
<div class="w3-block" id="channels"></div>
<div class="w3-block" id="settings" style="display:none"></div>
<footer class='w3-bottom' id='alerts'></footer>
<footer class="w3-bottom" id='errors'></footer>
</body>
</html>
179 changes: 179 additions & 0 deletions web/script-linux.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,179 @@
"use strict";

let is_windows = null;
let channels = null;

function addSlider(channel_name) {
channels.insertAdjacentElement(
'beforeend',
createSlider(channel_name)
);
document.getElementById(channel_name+"_slider")
.addEventListener(is_windows?'change':'input',function(){
window.webkit.messageHandlers.external.postMessage("change_volume:"+channel_name+":"+this.value);
},
false
);
document.getElementById(channel_name+"_skip_button")
.addEventListener('click',function(){
window.webkit.messageHandlers.external.postMessage("skip_current_sound:"+channel_name);
},
false
);
document.getElementById(channel_name+"_play_pause_button")
.addEventListener('click',function(){
window.webkit.messageHandlers.external.postMessage("play_pause:"+channel_name);
},
false
);
}
function createSlider(channel_name) {
let slider = document.createElement("div");
slider.className="w3-cell-row w3-border-bottom";
slider.insertAdjacentHTML(
'afterbegin',
"<div class='w3-cell w3-cell-middle w3-center w3-padding-small overlay-container' style='width:10%;min-width:90px'"+
"id='"+channel_name+"_head'>"+
"<div class='overlay-content w3-container w3-padding-small w3-animate-opacity w3-grey w3-center'>"+
"<span>Threshold</span><br>"+
"<select id='"+channel_name+"_selector' onchange='thresholdSelect(\""+channel_name+"\",this.value)'>"+
"<option value='4'>Everything</option>"+
"<option value='3'>Fluff</option>"+
"<option value='2'>Important</option>"+
"<option value='1'>Critical</option>"+
"<option value='0'>Nothing</option>"+
"</select>"+
"</div>"+
"<h4>"+channel_name+"</h4>"+
"</div>"+
"<div class='w3-cell w3-cell-middle w3-rest w3-container w3-padding-small'>"+
"<input type='range' id='"+channel_name+"_slider'"+
"min='0' max='100' value='100'>"+
"</div>"+
"<div class='w3-cell w3-cell-middle w3-center w3-small w3-padding-small' style='width:2%;min-width:10px;'>"+
"<div class='w3-button w3-block w3-round w3-small w3-padding-small'"+
"title='Skip "+channel_name+"'"+
"id='"+channel_name+"_skip_button'>"+
"&#x23ED;"+
"</div>"+
"<div class='w3-button w3-block w3-round w3-small w3-padding-small'"+
"title='Play/Pause "+channel_name+"'"+
"id='"+channel_name+"_play_pause_button'>"+
"&#x23EF;"+
"</div>"+
"</div>"
);
return slider;
}
function setSliderValue(channel_name, value) {
let slider = document.getElementById(channel_name+"_slider");
if (slider != null) slider.value = value;
}
function clearSliders() {
while (channels.firstChild)
channels.removeChild(channels.firstChild);
}
function setSliderHead(channel_name, is_paused) {
let slider_head = document.getElementById(channel_name+"_head");
let slider = document.getElementById(channel_name+"_slider");
if (is_paused) {
slider_head.classList.add("w3-opacity-max");
slider.classList.add("w3-opacity-max");
}
else {
slider_head.classList.remove("w3-opacity-max");
slider.classList.remove("w3-opacity-max");
}
}

let alerts_footer = null;
let alerts = null;
function addAlert(name, color, text) {
removeAlert(name);
let new_alert = createAlert(name, color, text);
alerts[name] = new_alert;
alerts_footer.insertAdjacentElement('beforeend', new_alert);
if (alerts_footer.childElementCount > 10)
removeAlert(alerts_footer.firstChild.name);
}
function removeAlert(name) {
let alert = document.getElementById("alert_"+name);
if (alert != null) {
alerts_footer.removeChild(alert);
alerts.delete(name);
}
}
function createAlert(name, color, text) {
let alert=document.createElement("div");
alert.name = name;
alert.id="alert_"+name;
alert.className="w3-bar w3-animate-bottom w3-"+color;
alert.style.cssText="padding: 2px 15px 2px 15px;";
alert.innerHTML=text;
alert.timer = 4.0;

let cross = document.createElement("span");
cross.className="w3-closebtn";
cross.setAttribute("onclick", "removeAlert('"+name+"')");
cross.innerHTML="&times;";

alert.insertAdjacentElement('afterbegin',cross);

return alert;
}

let error_footer = null;
function addError(name, text) {
let new_error = createError(name, text);
error_footer.insertAdjacentElement('afterbegin', new_error);
}
function removeError(id) {
let error = document.getElementById(id);
if (error != null) {
error_footer.removeChild(error);
}
}
function createError(name, text) {
let error=document.createElement("div");
error.name=name;
error.id="error_"+name+toString(Math.floor(Math.random()*100000));
error.className="w3-bar w3-animate-bottom w3-red";
error.style.cssText="padding: 10px 15px 10px 15px;";
error.innerHTML="<h3>"+name+"</h3><p>"+text+"</p>";

let cross = document.createElement("span");
cross.className="w3-closebtn";
cross.setAttribute("onclick", "removeError('"+error.id+"')");
cross.innerHTML="&times;";

error.insertAdjacentElement('afterbegin',cross);

return error;
}

function thresholdSelect(channel_name, value) {
window.webkit.messageHandlers.external.postMessage("change_threshold:"+channel_name+":"+value);

}

function main() {
channels = document.getElementById('channels');
is_windows = /MSIE|Trident|Edge/.test(window.navigator.userAgent);
alerts_footer = document.getElementById('alerts');
error_footer = document.getElementById('errors');
alerts = new Map();

let prev = null;
function step(now) {
let dt = (prev!=null) ? (now-prev)*0.001 : 0.0;
prev = now;
for (let key in alerts) {
let alert = alerts[key];
alert.timer -= dt;
if (alert.timer <= 1.0) alert.style.opacity = alert.timer;
if (alert.timer <= 0.0) removeAlert(alert.name);
}
window.requestAnimationFrame(step);
}
window.requestAnimationFrame(step);
}