Feature Request: AD Web GUI

[kevin]

Don't know what to tell you, it is a completely responsive interface using bootstrap3. The keypad.css isn't used anymore because there is no more specific keypad styling there. There is keypad_responsive.css (or something of the like).

Again, completely usable on my galaxy s7 as well as ipad. This is why we open source these things though, so feel free to adapt it to your needs.

[David.B]

Ya, same as before. Unusable keyboard, in fact the GUI itself is also too small. e.g. the menu buttons and links on my screen.

I'll work up some more edits...

[David.B]

The file you need to modify is: /opt/alarmdecoder-webapp/ad2web/static/css/datatables.min.css

Changes:

.col-sm-3{width:25%} to .col-sm-3{width:auto}
.col-sm-6{width:50%} to .col-sm-6{width:80%}

Editing this file is a huge pain it's basically one huge line! So I attached one to make it easier. if you go to edit it make sure you make a backup!


Making Backup:

Code: Select all

cp /opt/alarmdecoder-webapp/ad2web/static/css/datatables.min.css /opt/alarmdecoder-webapp/ad2web/static/css/datatables.min.css.orig


Finally unzip the attached file and copy the extracted file datatables.min.css to /opt/alarmdecoder-webapp/ad2web/static/css/ on your RPI.

You will need an application like winscp to copy the file to the RPI.

**make sure you unzip it. Don't copy the .zip file to that location.

As well this only addresses the keypad, I haven't had time to address the menus. Busy day at work...

[kevin]

Good catch. Datatables aren't even used on the keypad so in the next release we just won't be loading that css file on the keypad - sorry we missed it. Should fix the issue.

Since it is an open source project, you should issue Pull Requests on github for these so we can easily merge changes in.

One thing we don't want to do is focus too much on fixes just for iphone especially if it's going to make the experience worse for others on other devices, wish we had one in house to test.

[David.B]

Good catch. Datatables aren't even used on the keypad so in the next release we just won't be loading that css file on the keypad - sorry we missed it. Should fix the issue.

Since it is an open source project, you should issue Pull Requests on github for these so we can easily merge changes in.

One thing we don't want to do is focus too much on fixes just for iphone especially if it's going to make the experience worse for others on other devices, wish we had one in house to test.

Right, I just used the logic to maximize it to the screen as much as possible (should be universal). In my case it was on a Samsung Galaxy S5. Not even an IOS device.

Tweaks also need to be made to the menus, as they are too small as well.

I can contribute back to the repo directly in the future. As it would actually make things a lot easier for people to auto update too.

[kevin]

Instead of modifying the css file, please add this to keypad template file:

Code: Select all

{% block permanent_css %}
<link rel="stylesheet" href="{{ url_for('static', filename='bootstrap3/css/bootstrap.min.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap.toggle.min.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/main_responsive.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/user_custom.css') }}">
{% endblock %}


This will remove datatables references totally from the template so the referenced styles shouldn't apply.

[kevin]

Sorry to double post but we're pushing a maintenance release with these fixes as well as fixes for sending keys. To use the updater, any pending changes must be undone.

git checkout -- <edited_file>