pingu_98/MrDraw
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

QR Code generation uses jquery.qrcode and a custom knockout binding

Browse source 
This way it will also be possible to easily add another qrcode to the user api key later. Refused to work for now (value binding doesn't update), so commented out right now, but works in theory.
This commit is contained in:
Gina Häußge 2014-11-08 15:14:38 +01:00
parent 25cfed949d
commit 5675f32a19
6 changed files with 40 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
src/octoprint/static/js/app/main.js
View file

@ -378,6 +378,31 @@ $(function() {
}
};
ko.bindingHandlers.qrcode = {
update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
var val = ko.utils.unwrapObservable(valueAccessor());
var defaultOptions = {
text: "",
size: 200,
fill: "#000",
background: null,
label: "",
fontname: "sans",
fontcolor: "#000",
radius: 0,
ecLevel: "L"
};
var options = {};
_.each(defaultOptions, function(value, key) {
options[key] = ko.utils.unwrapObservable(val[key]) || value;
});
$(element).empty().qrcode(options);
}
};
ko.bindingHandlers.invisible = {
init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
if (!valueAccessor()) return;

12
src/octoprint/static/js/app/viewmodels/settings.js
View file

@ -290,8 +290,6 @@ function SettingsViewModel(loginStateViewModel, usersViewModel) {
self.system_actions(response.system.actions);
self.terminalFilters(response.terminalFilters);
self.makeCode();
};
self.saveData = function() {
@ -381,14 +379,4 @@ function SettingsViewModel(loginStateViewModel, usersViewModel) {
}
});
};
self.qrcode = new QRCode("qrcode");
self.makeCode = function() {
var api_key = $("#settings-apikey").val();
self.qrcode.makeCode(api_key);
return true;
};
}

2
src/octoprint/static/js/lib/jquery/jquery.qrcode.min.js vendored Normal file
View file

File diff suppressed because one or more lines are too long

1
src/octoprint/static/js/lib/qrcode.min.js vendored
View file

File diff suppressed because one or more lines are too long

2
src/octoprint/templates/index.jinja2
View file

@ -665,13 +665,13 @@
<script type="text/javascript" src="{{ url_for('static', filename='js/lib/jquery/jquery.iframe-transport.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/lib/jquery/jquery.fileupload.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/lib/jquery/jquery.slimscroll.min.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/lib/jquery/jquery.qrcode.min.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/lib/sockjs-0.3.4.min.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/lib/moment-with-locales.min.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/lib/pusher.color.min.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/lib/detectmobilebrowser.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/lib/md5.min.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/lib/pnotify.min.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/lib/qrcode.min.js') }}"></script>
<!-- Include OctoPrint files -->
<!-- TODO: merge/minimize in the future -->

15
src/octoprint/templates/settings.jinja2
View file

@ -440,12 +440,13 @@
<div class="control-group">
<label class="control-label" for="settings-apiKey">{{ _('API Key') }}</label>
<div class="controls">
<input type="text" class="input-block-level" data-bind="value: api_key, event: {keyup: makeCode, blur: makeCode}" id="settings-apikey">
<input type="text" class="input-block-level" data-bind="value: api_key, valueUpdate: 'afterkeydown'" id="settings-apikey">
</div>
</div>
<div class="control-group">
<label class="control-label">{{ _('QR Code') }}</label>
<div class="controls">
<div id="qrcode" style="width:250px; height:250px; margin-top:10px;"></div>
<div data-bind="qrcode: {text: api_key, size: 180}"></div>
</div>
</div>
</form>
@ -592,13 +593,21 @@
<label class="control-label">{{ _('Current API Key') }}</label>
<div class="controls">
<div class="input-append">
<input type="text" class="input-block-level uneditable-input" data-bind="value: $root.users.editorApikey, attr: {placeholder: '{{ _('N/A') }}'}">
<input type="text" class="input-block-level uneditable-input" data-bind="value: $root.users.editorApikey, valueUpdate: 'input', attr: {placeholder: '{{ _('N/A') }}'}">
<a class="btn" title="Generate new Apikey" data-bind="click: function() { $root.users.confirmGenerateApikey(); }"><i class="icon-refresh"></i></a>
<a class="btn btn-danger" title="Delete Apikey" data-bind="click: function() { $root.users.confirmDeleteApikey(); }"><i class="icon-trash"></i></a>
</div>
</div>
</div>
<!-- TODO Figure out issue where text isn't properly bound and hence the QR code is worthless
<div class="control-group">
<label class="control-label">{{ _('QR Code') }}</label>
<div class="controls">
<div data-bind="qrcode: {text: $root.users.editorApiKey, size: 150}"></div>
</div>
</div>
-->
</fieldset>
</form>
</div>