Sunday, October 23, 2016

Black is the new black... Changing colours

While the default dark black/grey interface of the B2 is smart and uniform sometimes one just need a small change.



Thankfully with the B2, the web interface is completely styled with CSS or Cascading Style Sheets. 

This allows for fairly easy changes to the look of the interface without interfering with the underlying code. That said, as always, make a copy of any file you edit on the B2, just in case. I also am going to assume you have some css or html knowledge. Note - performing an upgrade on the B2 will reset everything with regards css back to the default Black and grey.

The B2 uses a CSS framework called Bootstrap. Frameworks like this allows quick deployments of and nice uniformed style.  It also allow us to edit it.  The Bootstrap CSS files can be found

/var/www/css


And when viewed, due to the "compressed" nature look like just one very very long line of code.





Happly due to the fact we know the B2 uses a framework, we can goto the framework website and have look how it works.  Even better in the case of the Bootstrap framework as it even has a customize-able form that will give you all the required files (we only need one -  bootstrap.min.css ):




Just go the the form and change any thing you wish - however , in this example, the default bootstrap CSS is a nice and simple white, so we will not change anything and head to the base of the page and click download:

The downloaded zip need to be unzipped and traverse to the containing css folder.  In this example we only need one file the bootstrap.min.css.  You need to then upload this to your B2 (the /var/www/css folder) - my example below using the scp command:


iMac:css cm7$ pwd
/Users/cm7/Downloads/bootstrap-3/css
iMac:css cm7$ ls
bootstrap-theme.css    bootstrap-theme.min.css    bootstrap.css        bootstrap.min.css
iMac:css cm7$ scp bootstrap.min.css b2:/var/www/css
bootstrap.min.css                                                             100%  119KB 119.4KB/s   00:00   
iMac:css cm7$



Now when I reload the B2 webpage or my "webapp" I  see the changes:


This applies not only to a mobile device, but any view using a browser, as seem from my desktop with the css edited from being all white to adding a bit more grey:



Of course using the Bootstrap framework customise webpage you could create any number of variations. But that's for another day.

Have fun.


Tuesday, October 18, 2016

The B2 and SSH keys, or how not to need a password

** Warning this hack assumes you have some previous experience with SSH and all of my examples below are from a Mac, your mileage will vary on other *unix systems or Windows putty **

While it is great that the B2 allows us to play and look into its inner workings, one of the small issues I found was that every ssh or scp copy to the B2 required me to enter the root brennan password.

Thankfully being a Raspberry Pi based system allows us to use ssh keys to allow us another means of connecting to the B2 which takes us from this (assuming b2 is an alias to your B2):

iMac:~ cm7$ ssh root@b2
root@b2's password: 


to a directly connecting connection:

iMac:~ cm7$ ssh b2
#


First start by creating your keys in your computer users .ssh folder:

cd .ssh
ssh-keygen -y -f id_rsa > id_rsa.pub
(enter a password when prompted)

check they have been created:

# ls -al
total 32
drwxr-xr-x   6 cm7  staff   204 Oct 18 19:56 .
drwxr-xr-x+ 32 cm7  staff  1088 Oct 18 20:13 ..
-rw-r--r--   1 cm7  staff    82 Oct 18 19:56 config
-rw-------   1 cm7  staff   986 Oct 18 20:10 id_rsa
-rw-------   1 cm7  staff   213 Oct 18 20:13 id_rsa.pub
-rw-r--r--   1 cm7  staff  1013 Sep 20 21:16 known_hosts


the 2 id_rsa files are the ones we are interested in.

Next we need to copy the "Public Key" to the B2.  We need to log on to B2 with the user root and brennan password and created our .ssh folder and files:
First we check we are in the root home folder (/root):
# pwd
/root


Then we make or .ssh folder and move into it and check we are their:
# mkdir .ssh 
# cd .ssh
# pwd
/root/.ssh


We next need create our authorised key file and paste in the contents of our user/computer id_rsa.pub file:
touch authorized_keys
ls -al
chmod u+w authorized_keys
vi authorized_keys

(and paste the 1 line of long text)

The file will look something like this:

ssh-rsa AAAAB3NzaC1yc2EAAAABIwAAAQEAmLmwkzQDjEOW1Rj3TP5NldVDqUODVH9xuYrkeaSkxtdP
J8D9Hz+XAWnGAXdaIkCVOw2YEfHKWSo6befgNxiS+AKS+S+wM/bJpc4qOLe5ozFjZPNRHcw5O8WkgP5g
/wg2BOvxBqSKpsSzvi4rYVRLtl7TLVMyajhELiJ9GqT8f25gr3jFmtuQQIkRES1aC4oL2tHsn529POfP
1lPhh5tb2FbqEpm9L3779ljjkSX7mD4zza3zUckkuAIb5R7KSOrvPnJaEU903hrI0tx5omGyDy+h/2D1
h0aqHanPcU9Ml91ZpMKdpa0+FeVgs2M3LHYTNnvZ76ScV2VtUQwm3YEvjw== alex@smartarse.org

We can now exit the B2:
# exit
Connection to b2 closed.


and ssh back to it with
ssh root@b2


If that did not work you may get warnings about the permissions of the .pub file (this varies from system to system, but quick google search should help) or that the brennan pasword was still required, on my mac I found the following helped by adding the password (of the key, not the brennan):

ssh-add ~/.ssh/id_rsa
Enter passphrase for /Users/cm7/.ssh/id_rsa:
Identity added: /Users/cm7/.ssh/id_rsa (/Users/cm7/.ssh/id_rsa)


The last step for me was then to remove the need for the root@ part, this was a simple edit (or create if one did not exist) of my computers .ssh/config file which now looks like this:

iMac:.ssh cm7$ pwd
/Users/cm7/.ssh
iMac:.ssh cm7$ ls
config        id_rsa        id_rsa.pub    known_hosts
iMac:.ssh cm7$ cat config
Host b2
    HostName b2
    Port 22
    User root

IdentityFile ~/.ssh/id_rsa.pub

iMac:.ssh cm7$


That now allows me to ssh or scp copy files without ever entering a password.

iMac:.ssh cm7$ ssh b2
#


Hope that helps someone. A simple google of "ssh tutorial" can help if this all seems a bit too much. Have Fun.

Wednesday, October 5, 2016

Remote controlling the B2 with a pebble watch

Just a quick demo of some of the usefulness of using URLs to control the B2.  In this case using a pebble smart watch:


All done using simple URL calls and an HTTP "App" for the pebble.

Install the app.  In this example I have used "HTTP Push" easily found on the pebble watch store searching for "http":

Then you need to build the "menu" by creating a request.


Each request needs to defined with URL commands (such as those found here - not forgetting to change the address or IP address to match your B2).


Thats it.  As the video shows, that should be that needed.  Of course your mileage may vary depending on you network setup.

Wednesday, September 28, 2016

Adding a B2 iOS webapp

**UPDATE - Thanks to Martin, this "hack" has been added to the "official" current firmware (18th October 2016) for the B2. No need to edit or host any images - just skip straight to the 3rd Step and go to your B2 ip address and add to home screen.  I leave the original post below for anyone wishing to make changes etc or improve for themselves.**

The B2 has a great android app and also a great webpage but is missing a great iPhone or iOS app.  Thankfully with a few lines of code and Safari's "Add to home screen" you can have a great icon linked "app" for your iPhone:



Notes before you start:
 - your Brennan B2 needs a static or never changing IP address.  Tips on how to do this can be found on the Brennan website.
- The code will also not survive any official updates, but any created webapp will still work even after an update. You will need to re-do these steps if you wish to make any changes to the icon etc - (18th October UPDATE  No longer true, Martin now hosts the icon and changes to the code on the B2 itself). 

Steps:

1. Host the following "icon" png file.  I suggest a dropbox public folder (howto link). 




2. You need to log on to the Brennan and edit index.html file.

This can be found at /var/www  My screenshots below, assume editing with vi, but please use which ever method you fill comfortable with, but of of scope for this post.





Add the following 2 lines - making sure you edit the link to the location of your icon file (My dropbox will not be around forever ;-) ):




<link rel="apple-touch-icon" sizes="180x180" href="https://dl.dropboxusercontent.com/u/1531955/apple-touch-icon-180x180.png">
<meta name="apple-mobile-web-app-capable" content="yes">

3.  Using Safari, goto the IP address of your B2:




Then click the middle icon "Box with up arrow" to "Share or add Bookmark":


Then click "Add to Home Screen". On the next screen click "Add"

This adds an the webapp icon and allows you to control your B2 as an app seemingly independent from the Safari web browser.

For more on developing iOS webapps I suggest the following links to start with:


Have fun. 

Pat

Monday, September 26, 2016

Nice network name or how to learn to love your hosts file

Assuming you have a static IP address for your B2 (Details can be found the Brennan B2 website here), the next step would be to give it a nice network name.

While there are many ways of doing this, I have found that editing my "hosts" file to be the simplest.

This on most *unix systems can be found at /etc/hosts (for windows and other systems wiki is a good start https://en.wikipedia.org/wiki/Hosts_(file) )

Mine currently looks like this:

##
# Host Database
#
# localhost is used to configure the loopback interface
# when the system is booting.  Do not change this entry.
##
127.0.0.1    localhost
255.255.255.255    broadcasthost
::1             localhost
192.168.0.24    brennan b2


The last line gives my computer the ability to call the B2 using either http://brennan or http://b2