custom made frame (fixes chrome33+ no shadow)
cTn
parent
81fb798e13
commit
20c62aa938
|
|
@ -1,6 +1,7 @@
|
|||
function start_app() {
|
||||
chrome.app.window.create('main.html', {
|
||||
id: 'main-window',
|
||||
frame: 'none',
|
||||
resizable: false
|
||||
}, function(window_child) {
|
||||
window_child.onClosed.addListener(function() {
|
||||
|
|
|
|||
|
|
@ -45,6 +45,62 @@ input[type=number]::-webkit-inner-spin-button:after {
|
|||
.right {
|
||||
float: right;
|
||||
}
|
||||
#outter-wrapper {
|
||||
border: 1px solid silver;
|
||||
}
|
||||
#frame {
|
||||
height: 25px;
|
||||
line-height: 25px;
|
||||
|
||||
-webkit-app-region: drag;
|
||||
|
||||
background-color: white;
|
||||
}
|
||||
#frame .title {
|
||||
float: left;
|
||||
|
||||
margin-left: 15px;
|
||||
|
||||
font-weight: bold;
|
||||
text-shadow: 1px 1px #e4e4e4;
|
||||
}
|
||||
#frame .minimize {
|
||||
float: right;
|
||||
display: block;
|
||||
|
||||
width: 26px;
|
||||
height: 20px;
|
||||
|
||||
background: url('../images/controls/minimize.png') no-repeat 0 0;
|
||||
}
|
||||
#frame .maximize {
|
||||
float: right;
|
||||
display: block;
|
||||
|
||||
width: 27px;
|
||||
height: 20px;
|
||||
|
||||
background: url('../images/controls/maximize.png') no-repeat 0 0;
|
||||
}
|
||||
#frame .close {
|
||||
float: right;
|
||||
display: block;
|
||||
|
||||
width: 45px;
|
||||
height: 20px;
|
||||
|
||||
background: url('../images/controls/close.png') no-repeat 0 0;
|
||||
}
|
||||
#frame a {
|
||||
cursor: default;
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
#frame a:hover {
|
||||
background-position: 0px -20px;
|
||||
}
|
||||
#frame a:active {
|
||||
background-position: 0px -40px;
|
||||
}
|
||||
#main-wrapper {
|
||||
width: 940px;
|
||||
margin: 10px auto 0 auto;
|
||||
|
|
@ -198,9 +254,8 @@ input[type=number]::-webkit-inner-spin-button:after {
|
|||
-webkit-transform: rotateX(0deg); /* DO NOT REMOVE! this fixes the UI freezing bug on MAC OS X */
|
||||
}
|
||||
#status-bar {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
margin-left: -10px;
|
||||
margin-top: 10px;
|
||||
|
||||
width: 940px;
|
||||
height: 20px;
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 991 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
132
main.html
132
main.html
|
|
@ -1,8 +1,6 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Baseflight Configurator</title>
|
||||
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<meta name="author" content="cTn" />
|
||||
|
||||
|
|
@ -46,69 +44,77 @@
|
|||
<link type="text/css" rel="stylesheet" href="./tabs/firmware_flasher.css" media="all" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="main-wrapper">
|
||||
<div id="port-picker">
|
||||
<ul>
|
||||
<li class="port">
|
||||
<select id="port" title="Port">
|
||||
<!-- port list gets generated here -->
|
||||
</select>
|
||||
</li>
|
||||
<li>
|
||||
<select id="baud" title="Baud Rate">
|
||||
<option value="115200" selected="selected">115200</option>
|
||||
<option value="57600">57600</option>
|
||||
<option value="38400">38400</option>
|
||||
<option value="28800">28800</option>
|
||||
<option value="19200">19200</option>
|
||||
<option value="14400">14400</option>
|
||||
<option value="9600">9600</option>
|
||||
<option value="4800">4800</option>
|
||||
<option value="2400">2400</option>
|
||||
<option value="1200">1200</option>
|
||||
<option value="300">300</option>
|
||||
</select>
|
||||
</li>
|
||||
<li>
|
||||
<a class="connect" href="#" title="">Connect</a>
|
||||
<input class="auto_connect" type="checkbox" title="Auto-Connect" checked="checked"/>
|
||||
<span class="auto_connect">Auto-Connect</span>
|
||||
</li>
|
||||
</ul>
|
||||
<div id="outter-wrapper">
|
||||
<div id="frame">
|
||||
<span class="title">Baseflight - Configurator</span>
|
||||
<a class="close" href="#"></a>
|
||||
<a class="maximize" href="#"></a>
|
||||
<a class="minimize" href="#"></a>
|
||||
</div>
|
||||
<div id="sensor-status">
|
||||
<ul>
|
||||
<li class="gyro" title="Gyroscope">Gyro</li>
|
||||
<li class="accel" title="Accelerometer">Accel</li>
|
||||
<li class="mag" title="Magnetometer">Mag</li>
|
||||
<li class="baro" title="Barometer">Baro</li>
|
||||
<li class="gps" title="GPS">GPS</li>
|
||||
<li class="sonar" title="Sonar / Range finder">Sonar</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="clear-both"></div>
|
||||
<div id="tabs">
|
||||
<ul>
|
||||
<li class="tab_initial_setup"><a href="#">Initial Setup</a></li>
|
||||
<li class="tab_pid_tuning"><a href="#">PID Tuning</a></li>
|
||||
<li class="tab_receiver"><a href="#">Receiver</a></li>
|
||||
<li class="tab_auxiliary_configuration"><a href="#">Auxiliary Configuration</a></li>
|
||||
<li class="tab_servos"><a href="#">Servos</a></li>
|
||||
<li class="tab_gps"><a href="#">GPS</a></li>
|
||||
<li class="tab_motor_outputs"><a href="#">Motor/Servo Outputs</a></li>
|
||||
<li class="tab_sensors"><a href="#">Raw Sensor Data</a></li>
|
||||
<li class="tab_cli"><a href="#">CLI</a></li>
|
||||
</ul>
|
||||
<div id="main-wrapper">
|
||||
<div id="port-picker">
|
||||
<ul>
|
||||
<li class="port">
|
||||
<select id="port" title="Port">
|
||||
<!-- port list gets generated here -->
|
||||
</select>
|
||||
</li>
|
||||
<li>
|
||||
<select id="baud" title="Baud Rate">
|
||||
<option value="115200" selected="selected">115200</option>
|
||||
<option value="57600">57600</option>
|
||||
<option value="38400">38400</option>
|
||||
<option value="28800">28800</option>
|
||||
<option value="19200">19200</option>
|
||||
<option value="14400">14400</option>
|
||||
<option value="9600">9600</option>
|
||||
<option value="4800">4800</option>
|
||||
<option value="2400">2400</option>
|
||||
<option value="1200">1200</option>
|
||||
<option value="300">300</option>
|
||||
</select>
|
||||
</li>
|
||||
<li>
|
||||
<a class="connect" href="#" title="">Connect</a>
|
||||
<input class="auto_connect" type="checkbox" title="Auto-Connect" checked="checked"/>
|
||||
<span class="auto_connect">Auto-Connect</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="sensor-status">
|
||||
<ul>
|
||||
<li class="gyro" title="Gyroscope">Gyro</li>
|
||||
<li class="accel" title="Accelerometer">Accel</li>
|
||||
<li class="mag" title="Magnetometer">Mag</li>
|
||||
<li class="baro" title="Barometer">Baro</li>
|
||||
<li class="gps" title="GPS">GPS</li>
|
||||
<li class="sonar" title="Sonar / Range finder">Sonar</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="clear-both"></div>
|
||||
</div>
|
||||
<div id="content">
|
||||
</div>
|
||||
<div id="status-bar">
|
||||
Port utilization: <span class="port-usage">0%</span> |
|
||||
Packet error: <span class="packet-error">0</span> |
|
||||
Firmware Version: <span class="software-version">0.0</span> |
|
||||
Cycle Time: <span class="cycle-time">0</span>
|
||||
<span class="notify"></span>
|
||||
<div id="tabs">
|
||||
<ul>
|
||||
<li class="tab_initial_setup"><a href="#">Initial Setup</a></li>
|
||||
<li class="tab_pid_tuning"><a href="#">PID Tuning</a></li>
|
||||
<li class="tab_receiver"><a href="#">Receiver</a></li>
|
||||
<li class="tab_auxiliary_configuration"><a href="#">Auxiliary Configuration</a></li>
|
||||
<li class="tab_servos"><a href="#">Servos</a></li>
|
||||
<li class="tab_gps"><a href="#">GPS</a></li>
|
||||
<li class="tab_motor_outputs"><a href="#">Motor/Servo Outputs</a></li>
|
||||
<li class="tab_sensors"><a href="#">Raw Sensor Data</a></li>
|
||||
<li class="tab_cli"><a href="#">CLI</a></li>
|
||||
</ul>
|
||||
<div class="clear-both"></div>
|
||||
</div>
|
||||
<div id="content">
|
||||
</div>
|
||||
<div id="status-bar">
|
||||
Port utilization: <span class="port-usage">0%</span> |
|
||||
Packet error: <span class="packet-error">0</span> |
|
||||
Firmware Version: <span class="software-version">0.0</span> |
|
||||
Cycle Time: <span class="cycle-time">0</span>
|
||||
<span class="notify"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
|
|||
17
main.js
17
main.js
|
|
@ -17,12 +17,25 @@ ga_tracker.sendAppView('Application Started');
|
|||
$(document).ready(function() {
|
||||
// set bounds (default 960x600)
|
||||
if (screen.height > 600) {
|
||||
chrome.app.window.current().setBounds({width: 960, height: 600});
|
||||
chrome.app.window.current().setBounds({width: 962, height: 627});
|
||||
} else {
|
||||
$('div#content').height(280);
|
||||
chrome.app.window.current().setBounds({width: 960, height: 400});
|
||||
chrome.app.window.current().setBounds({width: 960, height: 427});
|
||||
}
|
||||
|
||||
// bind controls
|
||||
$('#frame .minimize').click(function() {
|
||||
chrome.app.window.current().minimize();
|
||||
});
|
||||
|
||||
$('#frame .maximize').click(function() {
|
||||
});
|
||||
|
||||
$('#frame .close').click(function() {
|
||||
chrome.app.window.current().close();
|
||||
});
|
||||
|
||||
// Tabs
|
||||
var tabs = $('#tabs > ul');
|
||||
$('a', tabs).click(function() {
|
||||
if ($(this).parent().hasClass('active') == false) { // only initialize when the tab isn't already active
|
||||
|
|
|
|||
Loading…
Reference in New Issue