Skip to content

Commit 2dc5bae

Browse files
khaledsherkawikhaledsherkawi
authored
Template changes (mrbeam#20)
* move country setting to advanced section * Change indication of wifi signal strength * bars color modified * add notification for starting the access point command * make compatible with old image * comments added
1 parent 8fee4d1 commit 2dc5bae

File tree

4 files changed

+164
-46
lines changed

4 files changed

+164
-46
lines changed

‎octoprint_netconnectd/__init__.py‎

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -202,14 +202,21 @@ def _get_wifi_list(self, force=False):
202202
def _get_country_list(self, force=False):
203203
payload = {}
204204

205-
flag, content = self._send_message("country_list", payload)
206-
if not flag:
207-
raise RuntimeError("Error while getting countries wifi: " + content)
205+
try:
206+
# The "country_list" call only exists in the netconnectd server of the new image and not the old one
207+
flag, content = self._send_message("country_list", payload)
208+
if not flag:
209+
raise RuntimeError("Error while getting countries wifi: " + content)
210+
211+
countries = []
212+
for country in content["countries"]:
213+
countries.append(country)
214+
return {"country": content["country"], "countries": countries}
208215

209-
countries = []
210-
for country in content["countries"]:
211-
countries.append(country)
212-
return {"country": content["country"], "countries": countries}
216+
except Exception as e:
217+
output = "Error while getting countries wifi: {}".format(e)
218+
self._logger.warn(output)
219+
return {"country": "", "countries": []}
213220

214221
def _get_status(self):
215222
payload = dict()
@@ -259,6 +266,7 @@ def _stop_ap(self):
259266

260267
def _set_country(self, country_code):
261268
payload = {"country_code": country_code}
269+
# The "set_country" call only exists in the netconnectd server of the new image and not the old one
262270
flag, content = self._send_message("set_country", payload)
263271
if not flag:
264272
raise RuntimeError("Error while setting country: " + content)

‎octoprint_netconnectd/static/css/netconnectd.css‎

Lines changed: 46 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,4 +28,49 @@ table th.settings_plugin_netconnectd_wifis_action a.disabled, table td.settings_
2828
width: 198px;
2929
float: right;
3030
margin: 0 8px 6px 0;
31-
}
31+
}
32+
33+
/*Signal Bars*/
34+
* {
35+
box-sizing: border-box;
36+
}
37+
.sizing-box {
38+
height: 20px;
39+
width: 30px;
40+
float: right;
41+
}
42+
.signal-bars {
43+
/*display: inline-block;*/
44+
}
45+
.signal-bars .bar {
46+
width: 14%;
47+
margin-left: 1%;
48+
min-height: 20%;
49+
display: inline-block;
50+
border: rgba(0, 0, 0, 0.4);
51+
background-color: rgba(0, 0, 0, 0.4);
52+
}
53+
.signal-bars .bar.first-bar {
54+
height: 20%;
55+
}
56+
.signal-bars .bar.second-bar {
57+
height: 40%;
58+
}
59+
.signal-bars .bar.third-bar {
60+
height: 60%;
61+
}
62+
.signal-bars .bar.fourth-bar {
63+
height: 80%;
64+
}
65+
.signal-bars .bar.fifth-bar {
66+
height: 99%;
67+
}
68+
.four-bars .bar.fifth-bar,
69+
.three-bars .bar.fifth-bar,
70+
.three-bars .bar.fourth-bar,
71+
.one-bar .bar:not(.first-bar),
72+
.two-bars .bar:not(.first-bar):not(.second-bar) {
73+
background-color: #fafafa;
74+
border: thin solid #f3f3f3;
75+
}
76+
/*Signal Bars*/

‎octoprint_netconnectd/static/js/netconnectd.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -299,6 +299,11 @@ $(function() {
299299

300300
self.sendStartAp = function() {
301301
if (!self.canRun()) return;
302+
new PNotify({
303+
title: gettext("Access point"),
304+
text: _.sprintf(gettext("Mr Beam is now starting the access point. The connection may be interrupted before the access point is available.")),
305+
type: "info"
306+
});
302307
self._postCommand("start_ap", {});
303308
};
304309

@@ -476,6 +481,18 @@ $(function() {
476481
return res;
477482
}
478483

484+
self.signalQuality = function (quality){
485+
if(quality >= 60){
486+
return 'four-bars';
487+
}else if(quality >= 40){
488+
return 'three-bars'
489+
}else if(quality >= 20){
490+
return 'two-bars'
491+
}else{
492+
return 'one-bar'
493+
}
494+
}
495+
479496
}
480497

481498
// view model class, parameters for constructor, container to bind to

‎octoprint_netconnectd/templates/netconnectd_settings.jinja2‎

Lines changed: 86 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
<div id="settings_plugin_netconnectd_dialog" data-bind="allowBindings: true" class="scrollable" style="padding-bottom:2em; overflow-y: auto; height: calc(100vh - 100px);">
1+
<div id="settings_plugin_netconnectd_dialog" data-bind="allowBindings: true" class="scrollable"
2+
style="padding-bottom:2em; overflow-y: auto; height: calc(100vh - 100px);">
23
<h3>{{ _('Network Connection') }}</h3>
34

45
<p>
@@ -7,39 +8,48 @@
78
<p>
89
<strong>{{ _('Wifi') }}:</strong> <span data-bind="text: connectionStateTextWifi"></span>
910
</p>
10-
<div class="control-group">
11-
<label class="control-labelt"><strong>Country</strong></label>
12-
<div class="controls">
13-
<select data-bind="options: countries,
14-
optionsText: 'country',
15-
optionsValue: 'code',
16-
optionsCaption: 'Select Country...',
17-
value: country,
18-
event: {change: selectedValueChanged}">
19-
</select>
20-
</div>
21-
</div>
2211
<div class="pull-right" data-bind="visible: enableQualitySorting">
2312
<small>
24-
{{ _('Sort by') }}: <a href="#" data-bind="click: function() { listHelper.changeSorting('ssid'); }">{{ _('SSID') }} ({{ _('ascending') }})</a> | <a href="#" data-bind="click: function() { listHelper.changeSorting('quality'); }">{{ _('Quality') }} ({{ _('descending') }})</a>
13+
{{ _('Sort by') }}: <a href="#"
14+
data-bind="click: function() { listHelper.changeSorting('ssid'); }">{{ _('SSID') }}
15+
({{ _('ascending') }})</a> | <a href="#"
16+
data-bind="click: function() { listHelper.changeSorting('quality'); }">{{ _('Quality') }}
17+
({{ _('descending') }})</a>
2518
</small>
2619
</div>
2720
<table class="table table-striped table-hover table-condensed table-hover" id="settings_plugin_netconnectd_wifis">
2821
<thead>
2922
<tr>
3023
<th class="settings_plugin_netconnectd_wifis_ssid">{{ _('SSID') }}</th>
31-
<th class="settings_plugin_netconnectd_wifis_quality" data-bind="visible: enableQualitySorting">{{ _('Quality') }}</th>
24+
<th class="settings_plugin_netconnectd_wifis_quality"
25+
data-bind="visible: enableQualitySorting">{{ _('Quality') }}</th>
3226
<th class="settings_plugin_netconnectd_wifis_action">{{ _('Action') }}</th>
3327
</tr>
3428
</thead>
3529
<tbody data-bind="foreach: listHelper.paginatedItems">
36-
<tr data-bind="attr: {title: name}">
37-
<td class="settings_plugin_netconnectd_wifis_ssid"><span class="icon-lock" data-bind="invisible: !encrypted"></span> <span data-bind="text: ssid"></span> <small class="muted">({{ _('Address') }}: <span data-bind="text: address"></span>)</small></td>
38-
<td class="settings_plugin_netconnectd_wifis_quality" data-bind="visible: $root.enableQualitySorting, text: qualityText"></td>
39-
<td class="settings_plugin_netconnectd_wifis_action">
40-
<button class="btn btn-small" data-bind="click: function() { $parent.configureWifi($data); }, css: {disabled: !$root.loginState.isUser() || $root.working() || $root.error() || $root.getEntryId($data) == $root.statusCurrentWifi()}"><i class="icon-spinner icon-spin" data-bind="visible: $root.working"></i><i class="icon-signin" data-bind="visible: !$root.working()"></i> {{ _('Connect') }}</button>
41-
</td>
42-
</tr>
30+
<tr data-bind="attr: {title: name}">
31+
<td class="settings_plugin_netconnectd_wifis_ssid"><span class="icon-lock"
32+
data-bind="invisible: !encrypted"></span> <span
33+
data-bind="text: ssid"></span> <small class="muted">({{ _('Address') }}: <span
34+
data-bind="text: address"></span>)</small></td>
35+
<td class="settings_plugin_netconnectd_wifis_quality"
36+
data-bind="visible: $root.enableQualitySorting">
37+
<div data-bind="css: $root.signalQuality(quality)" class="signal-bars mt1 sizing-box">
38+
<div class="first-bar bar"></div>
39+
<div class="second-bar bar"></div>
40+
<div class="third-bar bar"></div>
41+
<div class="fourth-bar bar"></div>
42+
<div class="fifth-bar bar"></div>
43+
</div>
44+
</td>
45+
<td class="settings_plugin_netconnectd_wifis_action">
46+
<button class="btn btn-small"
47+
data-bind="click: function() { $parent.configureWifi($data); }, css: {disabled: !$root.loginState.isUser() || $root.working() || $root.error() || $root.getEntryId($data) == $root.statusCurrentWifi()}">
48+
<i class="icon-spinner icon-spin" data-bind="visible: $root.working"></i><i class="icon-signin"
49+
data-bind="visible: !$root.working()"></i> {{ _('Connect') }}
50+
</button>
51+
</td>
52+
</tr>
4353
</tbody>
4454
</table>
4555
<div class="pagination pagination-mini pagination-centered">
@@ -50,7 +60,8 @@
5060
</ul>
5161
<ul data-bind="foreach: listHelper.pages">
5262
<li data-bind="css: { active: $data.number === $root.listHelper.currentPage(), disabled: $data.number === -1 }">
53-
<a href="#" data-bind="text: $data.text, click: function() { $root.listHelper.changePage($data.number); }"></a>
63+
<a href="#"
64+
data-bind="text: $data.text, click: function() { $root.listHelper.changePage($data.number); }"></a>
5465
</li>
5566
</ul>
5667
<ul>
@@ -60,17 +71,42 @@
6071
</ul>
6172
</div>
6273

63-
<button class="btn btn-primary btn-block" data-bind="click: function() { $root.refresh() }, enable: $root.daemonOnline() && $root.status.wifi.present()">{{ _('Refresh') }}</button>
74+
<button class="btn btn-primary btn-block"
75+
data-bind="click: function() { $root.refresh() }, enable: $root.daemonOnline() && $root.status.wifi.present()">{{ _('Refresh') }}</button>
6476

6577
<div>
66-
<small class="muted">{{ _('netconnectd socket') }}: <span data-bind="text: settings.plugins.netconnectd.socket"></span></small>
78+
<small class="muted">{{ _('netconnectd socket') }}: <span
79+
data-bind="text: settings.plugins.netconnectd.socket"></span></small>
6780
</div>
6881

6982
<div>
70-
<div><small><a href="#" class="muted" onclick="$(this).children().toggleClass('icon-caret-right icon-caret-down').parent().parent().parent().next().slideToggle('fast')"><i class="icon-caret-right"></i> {{ _('Advanced options') }}</a></small></div>
71-
<div class="hide row-fluid">
72-
<button class="btn span6" data-bind="click: function() { if ($root.apRunning()) { $root.sendStopAp(); } else { $root.sendStartAp(); } }, enable: $root.daemonOnline()"><span data-bind="visible: !$root.apRunning() && $root.daemonOnline()">{{ _('Start AP') }}</span><span data-bind="visible: $root.apRunning() && $root.daemonOnline()">{{ _('Stop AP') }}</span><span data-bind="visible: !$root.daemonOnline()">{{ _('Daemon offline') }}</span></button>
73-
<button class="btn span6" data-bind="click: function() { $root.sendReset() }, enable: $root.daemonOnline()">{{ _('Reset daemon') }}</button>
83+
<div><small><a href="#" class="muted"
84+
onclick="$(this).children().toggleClass('icon-caret-right icon-caret-down').parent().parent().parent().next().slideToggle('fast')"><i
85+
class="icon-caret-right"></i> {{ _('Advanced options') }}</a></small></div>
86+
<div class="hide">
87+
<div class="row-fluid" data-bind="visible: $root.countries().length != 0">
88+
<div class="control-group">
89+
<label class="control-labelt"><strong>Country</strong></label>
90+
<div class="controls">
91+
<select data-bind="options: countries,
92+
optionsText: 'country',
93+
optionsValue: 'code',
94+
optionsCaption: 'Select Country...',
95+
value: country,
96+
event: {change: selectedValueChanged}">
97+
</select>
98+
</div>
99+
</div>
100+
</div>
101+
<div class="row-fluid">
102+
<button class="btn span6"
103+
data-bind="click: function() { if ($root.apRunning()) { $root.sendStopAp(); } else { $root.sendStartAp(); } }, enable: $root.daemonOnline()">
104+
<span data-bind="visible: !$root.apRunning() && $root.daemonOnline()">{{ _('Start AP') }}</span><span
105+
data-bind="visible: $root.apRunning() && $root.daemonOnline()">{{ _('Stop AP') }}</span><span
106+
data-bind="visible: !$root.daemonOnline()">{{ _('Daemon offline') }}</span></button>
107+
<button class="btn span6"
108+
data-bind="click: function() { $root.sendReset() }, enable: $root.daemonOnline()">{{ _('Reset daemon') }}</button>
109+
</div>
74110
</div>
75111
</div>
76112

@@ -81,24 +117,36 @@
81117
</div>
82118
<div class="modal-body">
83119
<form class="form-horizontal">
84-
<div class="control-group" data-bind="css: {success: $root.editorWifiPassphrase2() && !$root.editorWifiPassphraseMismatch()}">
85-
<label class="control-label" for="settings_plugin_netconnectd_wificonfig_passphrase1">{{ _('Password') }}</label>
120+
<div class="control-group"
121+
data-bind="css: {success: $root.editorWifiPassphrase2() && !$root.editorWifiPassphraseMismatch()}">
122+
<label class="control-label"
123+
for="settings_plugin_netconnectd_wificonfig_passphrase1">{{ _('Password') }}</label>
86124
<div class="controls">
87-
<input type="password" class="input-block-level" id="settings_plugin_netconnectd_wificonfig_passphrase1" data-bind="value: $root.editorWifiPassphrase1, valueUpdate: 'input'" required>
125+
<input type="password" class="input-block-level"
126+
id="settings_plugin_netconnectd_wificonfig_passphrase1"
127+
data-bind="value: $root.editorWifiPassphrase1, valueUpdate: 'input'" required>
88128
</div>
89129
</div>
90-
<div class="control-group" data-bind="css: {success: $root.editorWifiPassphrase2() && !$root.editorWifiPassphraseMismatch(), error: $root.editorWifiPassphrase2() && $root.editorWifiPassphraseMismatch()}">
91-
<label class="control-label" for="settings_plugin_netconnectd_wificonfig_passphrase2">{{ _('Repeat Password') }}</label>
130+
<div class="control-group"
131+
data-bind="css: {success: $root.editorWifiPassphrase2() && !$root.editorWifiPassphraseMismatch(), error: $root.editorWifiPassphrase2() && $root.editorWifiPassphraseMismatch()}">
132+
<label class="control-label"
133+
for="settings_plugin_netconnectd_wificonfig_passphrase2">{{ _('Repeat Password') }}</label>
92134
<div class="controls">
93-
<input type="password" class="input-block-level" id="settings_plugin_netconnectd_wificonfig_passphrase2" data-bind="value: $root.editorWifiPassphrase2, valueUpdate: 'input'" required>
94-
<span class="help-inline" data-bind="visible: $root.editorWifiPassphrase2() && $root.editorWifiPassphraseMismatch()">{{ _('Passwords do not match') }}</span>
135+
<input type="password" class="input-block-level"
136+
id="settings_plugin_netconnectd_wificonfig_passphrase2"
137+
data-bind="value: $root.editorWifiPassphrase2, valueUpdate: 'input'" required>
138+
<span class="help-inline"
139+
data-bind="visible: $root.editorWifiPassphrase2() && $root.editorWifiPassphraseMismatch()">{{ _('Passwords do not match') }}</span>
95140
</div>
96141
</div>
97142
</form>
98143
</div>
99144
<div class="modal-footer">
100-
<button class="btn" data-dismiss="modal" data-bind="enable: !$root.working() && !$root.error()" aria-hidden="true">{{ _('Abort') }}</button>
101-
<button class="btn btn-primary" data-bind="click: function() { $root.confirmWifiConfiguration(); }, enable: !$root.editorWifiPassphraseMismatch() && !$root.working() && !$root.error()"><i class="icon-spinner icon-spin" data-bind="visible: working"></i> {{ _('Confirm') }}</button>
145+
<button class="btn" data-dismiss="modal" data-bind="enable: !$root.working() && !$root.error()"
146+
aria-hidden="true">{{ _('Abort') }}</button>
147+
<button class="btn btn-primary"
148+
data-bind="click: function() { $root.confirmWifiConfiguration(); }, enable: !$root.editorWifiPassphraseMismatch() && !$root.working() && !$root.error()">
149+
<i class="icon-spinner icon-spin" data-bind="visible: working"></i> {{ _('Confirm') }}</button>
102150
</div>
103151
</div>
104152
</div>

0 commit comments

Comments
 (0)