Pitted Knowledge of the Almighty Olive

Docker-based HTPC set-up

2018-05-31T02:52:00.000+10:00

This is a quick run through for setting up a HTPC (Home Theatre PC). It requires a docker installation, which is available for most modern Operating systems (official installation instructions). These instructions were completed with linux so it may not work 100% "as-is" for other operating systems. It will use the following components:

Traefik (Reverse Proxy) (docker image)
Emby (Media Server) (docker image)
Calibre-web (E-Books) (docker image)
No-IP (Dynamic DNS) (docker image)
PIA (VPN) (docker image)
Deluge (Torrents) (docker image)
Portainer (Docker web manager) (docker image)
Heimdall (Dashboard) (docker image)
Ombi (Requests) (docker image)

One thing to note is that I use a separate docker network to isolate all my services from the default bridge network. You can create your own using: docker network create traefik

No-IP for Dynamic DNS

If you have a simple home router with a dynamic IP but still want to access your content from the internet, you need to set-up a Dynamic DNS. There are paid services out there, but No-IP provides you with a free hostname (it does use ads, and hostnames expire every month). You will need to create an account with your VPN provider and then run the following:

docker run --name=noip -d \
  -v /etc/localtime:/etc/localtime:ro\
  -v [PATH_TO_CONFIG]:/config\
  coppit/no-ip

Note that [PATH_TO_CONFIG] must exist on your local hard-drive.

On your initial run, the container will create a file in the configuration directory. Open up that file, enter in your username, password and domain names. Then re-run your container and your dynamic DNS will be set-up!

NOTE: The rest of this guide will assume you have ports 443 and 80 forwarded on your modem to your Media PC. You may also need to poke a hole in any firewall you have for these ports. Without this completed then Traefik will not work.

Traefik for Reverse Proxy

Traefik will be used to take all traffic from your No-IP hostname and direct them to the desired services. Before you start:

Create a folder to store your configuration data
Create two empty files: traefik.toml and acme.json
Make sure that acme.json has only 600 privileges (user read/write only, no execute, no permissions for group or other). I am unsure how to do this for Windows.
Use htpassword or similar tool to encode a basic password auth string. In Linux, you would download it using sudo apt-get install apache2-utils and then run htpasswd -nb admin secure_password
Put the following into traefik.toml (fill in your own variables for {!!EMAIL!!}, {!!DOMAIN!!}, and {!!HTPASSWORD_OUTPUT!!}):

################################################################
# Web configuration backend
################################################################
defaultEntryPoints = ["http","https"]
[entryPoints]
[entryPoints.http]
address = ":80"
#[entryPoints.http.redirect]
#entryPoint = "https"
[entryPoints.https]
address = ":443"
[entryPoints.https.tls]

[web]
address = ":8080"
[web.auth.basic]
users = ["admin:$apr1$62BTL9Hv$DvZO5S4l6FClkYbuxn4ag/"]

[accessLog]

################################################################
# Docker configuration backend
################################################################
[docker]
domain = "zeitoune.hopto.org"
watch = true
exposedbydefault = false

[acme]
email = "nassar.z@slair.com.au"
storage = "acme.json"
entryPoint = "https"
OnHostRule = true

Then run the following command to create your docker container:

docker run -d --name=traefik --restart always \
  -v /var/run/docker.sock:/var/run/docker.sock \
  -v [PATH_TO_TRAEFIK]/traefik.toml:/traefik.toml \
  -v [PATH_TO_TRAEFIK]/acme.json:/acme.json \
  -l 'traefik.backend=traefik' \
  -l 'traefik.frontend.rule=PathPrefixStrip:/traefik' \
  -l 'traefik.enable=true' \
  -l 'traefik.docker.network=[DOCKER_NETWORK]' \
  -l 'traefik.port=8080' \

  --net=traefik \
  -p 80:80 -p 443:443 \
  --expose 8080 \
  traefik:latest

Note that [PATH_TO_TRAEFIK] must exist on your local hard-drive, and [DOCKER_NETWORK] is the network created using the command given at the start of this guide.

Once completed, you should be able to view traefik at https://[HOSTNAME]/traefik

Portainer for Docker Management

Portainer is a useful GUI tool for managing your docker containers (official installation instructions). Just run the following:

docker run -d --restart always \
  --name=portainer -p 9000:9000 --net=traefik \
  -v /etc/localtime:/etc/localtime:ro \
  -v /var/run/docker.sock:/var/run/docker.sock \
  -v [PATH_TO_DATA]:/data \
  -l 'traefik.backend=portainer' \  -l 'traefik.frontend.rule=PathPrefixStrip:/portainer' \
  -l 'traefik.enable=true' \
  -l 'traefik.docker.network=[DOCKER_NETWORK]' \
  -l 'traefik.port=9000' \
portainer/portainer

Note that [PATH_TO_DATA] must exist on your local hard-drive. This is where all the Portainer configuration data will be stored, and is necessary in case you ever wish to update the container.

The portainer instance can now be viewed at https://[HOSTNAME]/portainer/ OR http://[IP_ADDRESS]:9000

Heimdall for Dashboard

Heimdall can be configured as a one-stop shop for accessing all of your configured microservices.


docker run -d --restart always \
  --name=heimdall \
  -v [PATH_TO_DATA]:/config \
  -e PGID=1000 \
  -e PUID=1000 \
  --net=traefik \
  -l 'traefik.backend=heimdall' \
  -l 'traefik.enable=true' \
  -l 'traefik.docker.network=traefik' \
  -l 'traefik.frontend.rule=Host:zeitoune.hopto.org' \

  -l 'traefik.frontend.priority=1'
  -l 'traefik.port=80' \
  linuxserver/heimdall

Note that [PATH_TO_DATA] must exist on your local hard-drive. This is where all the Heimdall configuration data will be stored, and is necessary in case you ever wish to update the container.

The heimdall instance can now be viewed at https://[HOSTNAME]/

Calibre for E-Books

Calibre is a management service for E-Books.


docker run -d --restart always \
  --name=calibre \
  -v [PATH_TO_BOOKS]:/books \
  -v [PATH_TO_APP]:/calibre-web/app \
  -v [PATH_TO_CONFIG]:/calibre-web/config \
  -v [PATH_TO_KINDLEGEN]:/calibre-web/kindlegen \
  -v /etc/localtime:/etc/localtime:ro \
  -e PGID=1000 \
  -e PUID=1000 \
  --net=traefik \
  -l 'traefik.backend=calibre' \
  -l 'traefik.enable=true' \
  -l 'traefik.docker.network=traefik' \
  -l 'traefik.frontend.rule=PathPrefixStrip:/calibre' \
  -l 'traefik.frontend.headers.customRequestHeaders=X-Script-Name:/calibre' \
  -l 'traefik.port=8083' \
  technosoft2000/calibre-web

Note that [PATH_TO_*] must exist on your local hard-drive. This is where all the Calibre data will be stored, and is necessary in case you ever wish to update the container.

The calibre instance can now be viewed at https://[HOSTNAME]/calibre

Ombi for requests

Use Ombi for making media requests.


docker run -d --restart always \
  --name=ombi \
  -v [PATH_TO_CONFIG]:/config \
  -e PGID=1000 \
  -e PUID=1000 \
  -e TZ=Australia/Sydney \
  --net=traefik \
  -l 'traefik.backend=ombi' \
  -l 'traefik.enable=true' \
  -l 'traefik.docker.network=traefik' \
  -l 'traefik.frontend.rule=PathPrefix:/ombi' \
  -l 'traefik.port=3579' \
  -p 3579:3579 \
  linuxserver/ombi

Note that [PATH_TO_CONFIG] must exist on your local hard-drive. This is where all the Ombi data will be stored, and is necessary in case you ever wish to update the container.

Note also that in this case I could only get Ombi to work by opening port 3576, navigating to the URL directly and editing the configuration so that the Base URL is '/ombi' instead of '/'. Once you have that configuration, you can close port 3579 again.

The ombi instance can now be viewed at https://[HOSTNAME]/ombi

Emby for Media

docker run -d --restart always \
  --name=emby \
  -v [PATH_TO_CONFIG]:/config \
  -v /etc/localtime:/etc/localtime:ro \
  -v [PATH_TO_MEDIA]:/media
  -e GID=1000 \
  -e UID=1000 \
  --net=traefik \
  -l 'traefik.backend=emby' \
  -l 'traefik.enable=true' \
  -l 'traefik.docker.network=traefik' \
  -l 'traefik.frontend.rule=PathPrefixStrip:/emby' \
  -l 'traefik.port=8096' \
  emby/embyserver

Note that [PATH_TO_*] must exist on your local hard-drive. This is where all the Emby data (and Media) will be stored, and is necessary in case you ever wish to update the container.

The Emby instance can now be viewed at https://[HOSTNAME]/emby/

Sonarr for TV shows

docker run -d --restart always \
  --name=sonarr \
  -v [PATH_TO_CONFIG]:/config \
  -v [PATH_TO_TV]:/tv \
  -v [PATH_TO_DOWNLOADS]:/downloads \
  -v /etc/localtime:/etc/localtime:ro \
  -e PGID=1000 \
  -e PUID=1000 \
  -e TZ=Australia/Sydney \
  --net=traefik \
  -l 'traefik.backend=sonarr' \
  -l 'traefik.enable=true' \
  -l 'traefik.docker.network=traefik' \
  -l 'traefik.frontend.headers.customRequestHeaders=X-Script-Name:/sonarr/' \
  -l 'traefik.frontend.rule=PathPrefix:/sonarr/' \
  -l 'traefik.port=8989' \

  --dns 8.8.8.8 --dns 8.8.4.4 \
linuxserver/sonarr

Note that [PATH_TO_*] must exist on your local hard-drive. This is where all the Sonarr data (and Media) will be stored, and is necessary in case you ever wish to update the container.

Note also that in this case I could only get Sonarr to work by opening port 8989, navigating to the URL directly and editing the configuration so that the Base URL is '/sonarr/' instead of '/'. Once you have that configuration, you can close port 3579 again.

The Sonarr instance can now be viewed at https://[HOSTNAME]/sonarr/

Radarr for Movies

docker run -d --restart always \
  --name=radarr \
  -v [PATH_TO_CONFIG]:/config \
  -v [PATH_TO_MOVIES]:/movies \
  -v [PATH_TO_DOWNLOADS]:/downloads \
  -v /etc/localtime:/etc/localtime:ro \
  -e PGID=1000 \
  -e PUID=1000 \
  -e TZ=Australia/Sydney \
  --net=traefik \
  -l 'traefik.backend=radarr' \
  -l 'traefik.enable=true' \
  -l 'traefik.docker.network=traefik' \
  -l 'traefik.frontend.headers.customRequestHeaders=X-Script-Name:/radarr/' \
  -l 'traefik.frontend.rule=PathPrefix:/radarr/' \
  -l 'traefik.port=7878' \

  --dns 8.8.8.8 --dns 8.8.4.4 \
  linuxserver/radarr

Note that [PATH_TO_*] must exist on your local hard-drive. This is where all the Radarr data (and Media) will be stored, and is necessary in case you ever wish to update the container.

Note also that in this case I could only get Radarr to work by opening port 7878, navigating to the URL directly and editing the configuration so that the Base URL is '/radarr/' instead of '/'. Once you have that configuration, you can close port 3579 again.

The Radarr instance can now be viewed at https://[HOSTNAME]/radarr/

Jackett for Indexers

docker run -d --restart always \
  --name=jackett \
  -v [PATH_TO_CONFIG]:/config \
  -v [PATH_TO_DOWNLOAD]:/downloads \
  -v /etc/localtime:/etc/localtime:ro \
  -p 9117:9117 \
  -e PUID=1000 -e PGID=1000 \
  -e TZ=Australia/Sydney \
  --net=traefik \
  -l 'traefik.enable=true' \
  -l 'traefik.backend=jackett' \
  -l 'traefik.frontend.rule=PathPrefix:/jackett' \
  -l 'traefik.port=9117' \
  -l 'traefik.docker.network=traefik' \
  --dns 8.8.8.8 --dns 8.8.4.4 \
  linuxserver/jackett

Note that [PATH_TO_*] must exist on your local hard-drive. This is where all the data (and Media) will be stored, and is necessary in case you ever wish to update the container.

Tranmission for Torrents

This is being run with an inbuilt VPN:

docker run -d --restart always \
  --name=transmission \
  --cap-add=NET_ADMIN --device=/dev/net/tun \
  -v /[PATH_TO_CONFIG]:/config \

  -v /[PATH_TO_DOWNLOADS]:/data \

  -v /etc/localtime:/etc/localtime:ro \
  -e OPENVPN_PROVIDER=PIA \
  -e OPENVPN_CONFIG=Netherlands \
  -e OPENVPN_USERNAME=user \
  -e OPENVPN_PASSWORD=pass \
  -e WEBPROXY_ENABLED=false \
  -e LOCAL_NETWORK=192.168.0.0/16 \

  -e TRANSMISSION_RPC_AUTHENTICATION_REQUIRED=true \

  -e TRANSMISSION_RPC_PASSWORD=[PASSWORD] \

  -e TRANSMISSION_RPC_USERNAME=admin \

  -e TRANSMISSION_RPC_HOST_WHITELIST="127.0.0.1,192.168.0.*" \
  --log-driver json-file \
  --log-opt max-size=10m \
  --net=traefik \

  --dns 8.8.8.8 --dns 8.8.4.4 \

  -p 9091:9091 \

  -l 'traefik.backend=transmission' \
  -l 'traefik.enable=true' \
  -l 'traefik.docker.network=traefik' \
  -l 'traefik.frontend.rule=PathPrefix:/transmission' \
  -l 'traefik.port=9091' \
haugene/transmission-openvpn

Note that [PATH_TO_*] must exist on your local hard-drive. This is where all the data (and Media) will be stored, and is necessary in case you ever wish to update the container.

Inspirations

This post was inspired by the following:

Automatically make web apps use HTTPS with Let's Encrypt, Nginx, and Docker

2018-03-02T16:32:00.000+11:00

Make sure you have docker already installed.

Install the Nginx proxy with docker-gen


sudo docker run --name=Nginx -d \
--restart=always \
-p 80:80 -p 443:443 \
-v /data/certs:/etc/nginx/certs:ro \
-v /var/run/docker.sock:/tmp/docker.sock:ro \
-v /data/Nginx/vhost.d:/etc/nginx/vhost.d \
-v /data/Nginx/html:/usr/share/nginx/html \
--label com.github.jrcs.letsencrypt_nginx_proxy_companion.nginx_proxy \
jwilder/nginx-proxy

Since I run portainer, start it up with the VIRTUAL_HOST and VIRTUAL_PORT environment variables so that docker-gen can pick it up. You can do this with any app you desire.


sudo docker run --name Portainer -d \
--restart=always \
-p 9000:9000 \
-v /var/run/docker.sock:/var/run/docker.sock \
-v portainer_data:/data \
-e VIRTUAL_HOST=portainer.local.network \
-e VIRTUAL_PORT=9000 \
portainer/portainer

Now to use the Let's encrypt container to make certificates for our docker containers:


sudo docker run --name=Letsencrypt -d \
--restart=always \
-v /data/certs:/etc/nginx/certs:rw \
-v /var/run/docker.sock:/var/run/docker.sock:ro \
--volumes-from Nginx \
jrcs/letsencrypt-nginx-proxy-companion

To enable SSL for your site, set the environment variables VIRTUAL_PROTO=https, VIRTUAL_PORT=433 environment as well as the LETSENCRYPT_HOST and LETSENCRYPT_EMAIL variables so that docker-gen can pick it up. You can do this with any app you desire. You will also need to mount the certificates and keys within the SSL folder of the container for the container to use the LetsEncrypt keys.

Making Docker Daemon listen on network port during start-up

2018-03-01T13:46:00.000+11:00

Took a bit of time to find the relevant documentation piece, so I thought I would outline it here for easy reference.

Option 1:

This should work for some systems, although distributions that use systemctl may have their docker.service entry overwrite this setting, so you will need to use option 2.

If not already created, create the file /etc/docker/daemon.json

Add in the following:


{
  "hosts": ["fd://", "tcp://0.0.0.0:2375"]
}

Restart docker and check the docker daemon process. It should have the additional -H flag like so:


$ sudo ps aux | grep dockerd
root     31239  0.7  0.2 1007880 72816 ?       Ssl  15:03   0:00 /usr/bin/dockerd -H fd:// -H tcp://0.0.0.0:2375

Option 2:

Edit the service by running:
```
sudo systemctl edit docker.service
```

Add the following lines:


[Service]
ExecStart=
ExecStart=/usr/bin/dockerd -H fd:// -H tcp://0.0.0.0:2375

Reload the service configuration:
```
sudo systemctl daemon-reload
```
Restart the daemon:
```
sudo systemctl restart docker.service
```
Use the last step of the previous option to test whether docker is listening on the network port

Fail2Ban unbanning process

2018-02-20T16:47:00.000+11:00

Log into the target machine with Fail2Ban installed
Look at the list of banned IPs and identify the IP you wish to unban:
```
sudo iptables -L -n
```
Discover the names of the jails:
```
sudo fail2ban-client status
```

Unban the IP:

sudo fail2ban-client set ssh-iptables unbanip 123.123.123.123

Running a new GitLab Runner for private GitLab server

2018-02-20T15:28:00.000+11:00

This guide was created in conjunction with the official tutorial.

On your Docker installation, download the Gitlab Runner container. When it is eventually run, there are two volumes that are automatically created: /etc/gitlab-runner and /home/gitlab-runner. You may choose to mount these locally on your host instead.
During the run step, make sure you mount your host's docker socket, either using the -v parameter (-v /var/run/docker.sock:/var/run/docker.sock) or your tool of preference.
Open up a shell console on the Runner container.
Run the registration process (gitlab-runner register) and follow the prompts (the details are listed in the Admin Area under Overview -> Runners)

Exposing your docker daemon API via network port (and getting it into Portainer)

2018-02-19T14:02:00.001+11:00

These instructions will be targeted to Linux installations with systemd installed. In particular, I have used an Ubuntu-flavoured distro (ElementaryOS). I presume you have already installed docker onto your machine.

Stop the Docker daemon if is is already running
```
sudo systemctl stop docker.service
```
You can check the status of the service (including if it is even installed)
```
sudo systemctl status docker.service
```

Open the service configuration file

sudo nano /lib/systemd/system/docker.service

Find the line with 'ExecStart' and modify it as follows (saving it once complete):
```
ExecStart=/usr/bin/dockerd -H tcp://0.0.0.0:2375 -H fd://
```
Reload all of the daemons:
```
sudo systemctl daemon-reload
```
Start the service
```
sudo systemctl start docker.service
```
Open up your portainer installation, navigate to the 'Endpoints' menu item and then enter in the IP and port for your target computer.

Navigating a private Docker Repository

2018-02-14T21:34:00.001+11:00

All this content can be gained by reading the Registry HTTP API v2 specification.

All URLs are assumed to by appended to https://[hostname|ip]:[port]/

Listing Images

/v2/_catalog

This will output a JSON object in the format of:


{
    "repositories": [
        "image1",
        "image2"
    ]
}

List Tags for Image

/v2/[name]/tags/list

This will output a JSON object in the format of:

{
    "name": "image1",
    "tags": [
        "1.0",
        "latest"
    ]
}

Manifest for an Image

/v2/[name]/manifests/[tag]

This will output a JSON object with the manifest information.

Interacting with Docker containers

2018-01-25T16:36:00.000+11:00

Running an interactive shell on the container:


# Your container may have /bin/sh instead
docker exec -t -i [container] /bin/bash

Running a command on an image instead (i.e not a running instance):
```
docker run -t -i [image] /bin/bash
```
Get the output of a running container (for logs etc):
```
docker attach --no-stdin [container]
```

Cleaning docker

You can use the following bash script to clean out your docker instance:


#!/bin/bash
echo "docker-clean.sh [container|image|volume|cache|data|debugbar]"
if [ "$1" == "container" ]; then
    #Cleaning containers
    docker ps --no-trunc -aqf "status=exited" | xargs docker rm
elif [ "$1" == "image" ]; then
    #Cleaning images
    docker images --no-trunc -aqf "dangling=true" | xargs docker rmi
elif [ "$1" == "volume" ]; then
    #Cleaning volumes
    docker volume ls -qf "dangling=true" | xargs docker volume rm
fi

Using HSQLDB

2018-01-23T18:59:00.002+11:00

These notes are for dealing with the HSQL database used in a legacy web application.

HSQL database commands

Note: These commands are required to by run where the hsqldb jar file is stored

Starting the server:


java -cp /var/lib/hsqldb/lib/hsqldb.jar org.hsqldb.Server -database.0 file:mydb -dbname.0 phonebook

Start the GUI application for the HSQL database:

java -cp /var/lib/hsqldb/lib/hsqldb.jar org.hsqldb.util.DatabaseManagerSwing

SQLTOOL

An Example ~/sqltool.rc file:


urlid localhost-sa
url jdbc:hsqldb:hsql://localhost/
username SA
password

To use SQL Tool:

Setup a ~/sqltool.rc to store the connection settings for the database (and run the server).
Once you have started the database (using the commands in the previous section), run the SQLTool command line utility:
```
java -cp /var/lib/hsqldb/lib/hsqldb.jar:sqltool.jar org.hsqldb.cmdline.SqlTool
```
Connect to the database as indication by the urlid in your sqltool.rc file:
```
\j localhost-sa
```
You can stop sqltool at any using
```
\xq (table OR SELECT QUERY)
```

DATABASE INFO

Grab list of all tables in the database:

SELECT TABLE_SCHEM,TABLE_NAME FROM INFORMATION_SCHEMA.SYSTEM_TABLES WHERE TABLE_TYPE = 'TABLE';

Grabbing a single employee record:
```
SELECT LIMIT 0 1 - FROM EMPLOYEES;
```

Outputting user info as a CSV file:

SELECT A.USERNAME, A.PASSWORD, A.FIRSTNAME, A.LASTNAME, A.MIDDLENAME as OTHERNAME, B.EMAIL INTO TEXT "users_file" FROM USERS AS A INNER JOIN USER_DETAILS AS B ON A.USERNAME = B.USERNAME;

Removing the temporary users table used to create the CSV file:
```
DROP TABLE "users";
```

Date based search query where date is a string (DD-MM-YYYY):

SELECT A.USERNAME, B.FIRSTNAME FROM USERS AS A INNER JOIN EMPLOYEES AS B ON A.USERNAME = B.USERNAME WHERE SUBSTRING(A.EXPIRY,7,4) > 2016;

Searching for string partials:

SELECT TIMES, DATES, USERS FROM LOGS WHERE USERS LIKE 'admin%' AND DATES LIKE '%/03/2015';

Grabbing the exact number of matches that match parameters:

code>SELECT BUILDING, INCTYPE, COUNT(*) AS NUM FROM REPORTS WHERE BUILDING LIKE 'PLACE %' AND DATE LIKE '%/2015' GROUP BY BUILDING, INCTYPE;

Useful projects to check out (2017 collection)

2018-01-11T20:32:00.000+11:00

I have been building a list of projects and packages to check out throughout last year and I decided to consolidate them as a post.

Laravel

Laravel Auditing will track changes to Eloquent models
Ziggy is a laravel package that outputs router information in JSON form
Ardent, a Laravel Model extension

PHP

churn-php analyses your codebase for potential refactoring candidates
Behat, for testing code - https://github.com/Behat/Behat

Vue.js

vue-good-wizard is a simple step-by-step wizard plugin
vue-directive-tooltip is a simple tooltip plugin

SSL

SSL security suite check

Postgresql

pgBackRest - Back-up
Plogical - replication

Removing hyphenated text and word-wrapping via CSS

2018-01-10T19:01:00.001+11:00

A simple bit of code to use if you do not like the way your browser hyphenates or word wraps your text. (Note the * selector will apply this CSS to ALL elements on the page, and the !important flag will overwrite any later changes.)


* {
 -webkit-hyphens: none !important;
 -ms-hyphens: none !important;
 -o-hyphens: none !important;
 hyphens: none !important;
}

Using SVG color filters

2018-01-01T20:26:00.001+11:00

This is a follow on from my previous post about showing a sprite image using the SVG.js library. We will now add a colour filter to the image using the svg.filter.js plugin.

The color matrix is a 5 column, 4 row matrix. Each row represents an RGBA value, and each column is a multiplier for that particular colour value. Every column represents an RGBA multiplier, which intensifies (or reduces) the resulting colour value based on the original input value. The last column is just a straight value that just gets added on.

So for the following matrix:

1 0 0 0 0
0 1 0 0 0
0 0 1 0 0
0 0 0 1 0

The output image will have the exact same colour value as the input image. This is because the the RGBA multipliers simple times the input RGBA value by 1.

Here are some resources:

The following code shows off the concept.


var col = {
    x: 2,
    y: 0,
}
var draw = SVG('drawing2').size(300, 300)
var clip = draw.clip()
var rect = draw.rect(32, 32)
var image = draw.image('http://icons.iconarchive.com/icons/iconfactory/star-trek-ships/icons-390.jpg')

image.move(-1*(32+5)*col.x-5,-1*(32+5)*col.y-5);

image.filter(function(add) {
  add.colorMatrix('matrix', [ 1.0, 0,   0,   0,   0
                            , 0,   0.2, 0,   0,   0
                            , 0,   0,   0.2, 0,   0
                            , 0,   0,   0,   1.0, 0 ])
})
clip.add(rect)

image.clipWith(clip)

Using SVG.js to clip an image sprite

2017-12-10T08:31:00.002+11:00

Let's say you have an image with few sprites in it (such as Star Trek: Starships by Corey Marion):

Let's also say you are using a SVG javascript library such as svgjs to build dynamic images and animations. You want to overlay an icon sprite on top of your existing image. To do this you use the following code:

var col = {

    x: 0,

    y: 0,

var draw = SVG('drawing2').size(300, 300)
var clip = draw.clip()
var rect = draw.rect(32, 32)
var image = draw

    .image('http://icons.iconarchive.com/icons/iconfactory/star-trek-ships/icons-390.jpg')

    .move(-1*(32+5)*col.x-5,-1*(32+5)*col.y-5)
clip.add(rect)

image.clipWith(clip)

An explanation of the code:

The col object stores the row and column coordinates for the icon we want. We have 9 columns and 6 rows to work with.
The draw object takes our HTML div object and uses it to make our SVG
The clip object is where the magic happens
The rect object is a standard rectangle, which is going to be used as our 'frame' to cut out our desired sprite using clip. It is 32x32 pixels because that is the size of our icons.
The image object is our compiled sprites, but note that we 'move' it relative to the rectangle using an algorithm. This 'move' allows us to align our desired sprite so that is with the rectangle.
The next two lines allows us to 'clip' the image with the rectangle, cutting away everything else except for our desired sprite.

The next example expands upon the above, but now allows us to place our rect (and our sprite) at a desired point on the drawing.

var col = {
    x: 8,
    y: 1,
}
var pos = {
    x: 32,
    y: 32
}
var draw = SVG('drawing2').size(300, 300)
var clip = draw.clip()
var rect = draw.rect(32, 32).move(pos.x, pos.y)
var image = draw

    .image('http://icons.iconarchive.com/icons/iconfactory/star-trek-ships/icons-390.jpg')

    .move(-1*(32+5)*col.x-5+pos.x,-1*(32+5)*col.y-5+pos.y)
clip.add(rect)


image.clipWith(clip)

Added a text stroke via CSS

2017-11-01T18:58:00.000+11:00

You can add a text stroke (or outline) to your HTML documents by using the following piece of CSS code:


text-shadow: -1px -1px 0 black,
              1px -1px 0 black,
             -1px 1px 0 black,
              1px 1px 0 black;

SCSS/SASS Relative Luminence

2017-08-17T03:45:00.000+10:00

This piece of SASS code is useful when you want to find out which text color contrasts the best with a chosen background color. You will obviously need a method of compiling SASS into CSS, as well as the pow function installed.

The technique was borrowed from the W3 recommendation.


@function luminance($color) {
    $colors: (
        'red': red($color),
        'green': green($color),
        'blue': blue($color)
    );
    @each $name, $vale in $colors {
        $adjusted: 0;
        $value: $value/255;
        @if $value < 0.03928 {
            $value: $value/12.92;
        } else {
            $value: ($value + 0.55)/1.055;
            $value: pow($value,2.4);
        }
        $colors: map-merge($colors, ($name: $value));
    }
    @return (map-get($colors, 'red')*0.2126)
        + (map-get($colors, 'green')*0.7152)
        + (map-get($colors, 'blue')*0.0722);
}

Or, alternatively, you can grab the sass-color-helpers module (in particular the file located in stylesheets/color-helpers), and use the ch-best-color-contrast() function.

Chrome Headless mode

2017-08-02T20:25:00.000+10:00

Chrome has a headless mode which is generally for testing (and scripting). You can invoke it as follows:

/usr/bin/google-chrome --headless --disable-gpu --print-to-pdf http://localhost:8080/

Webpack, code-splitting, require & require.ensure()

2017-08-01T20:11:00.000+10:00

Webpack allows for global definitions to be defined and set, allowing for compile time switches. This is especially useful when compiling a single source for multiple targets.

require() will include the target as a whole, while require.ensure() will create a code split point. Paired with the above concept of Webpack compile time switches, this allows us to define a code-splitted and and non-split version of our code.

An example:

In webpack.config.js:


plugins: [
    new webpack.DefinePlugin({
        BUILD_PDF: JSON.stringify(true),
    }),
]

In the target .js source:


if (BUILD_PDF) {
    require(....),
} else {
    require.ensure([], () =>{
        require(....);
    }, err => {
        // error code
    }, "split-name");
}

PHP XDebug tips and tricks

2017-07-24T19:15:00.000+10:00

A quick step-by-step walkthrough on how to get XDebug working properly and interfacing with your IDE of choice.

Install XDebug on the PHP server (or docker instance). This will enable XDebug on your PHP code.
```
apt-get install --no-install=recommends php5-xdebug
```

Configure /etc/php5/mods-available/xdebug.ini on the server to enable XDebug (check the documentation for more details about the settings).


zend_extension=xdebug.so
xdebug.remote_enable=1
xdebug.remote_autostart=1
xdebug.remote_connect_back=1
xdebug.remote_host=10.0.0.1
xdebug.max_nesting_level=500

Ensure that the port 9000 (you can change this in the above config file) is open on the server (configure your firewall). If PHP is running as a docker service, you may need to expose/map the port and then configure your firewall to allow connections.
Download or install a client program to pass the XDebug IDEKEY to the server while browsing
Configure your IDE to listen on port 9000 of the server for XDebug messages

Note: You should use the browser on the same machine you have your IDE set-up, as PHP XDebug will send messages to that and only that client (depending on the configuration options).

Recover LVM Boot partition within a live CD (installing GRUB)

2014-07-04T19:25:00.000+10:00

This allows you to recover the Master Boot record when a RAID 5 array fails.

Activate LVM partitions
sudo mdadm --assemble --scan
sudo vgchange -a y [name of volume group]
Mount all volumes to a single mount-point
sudo mount /dev/mapper/[volume group]/[root volume] /mnt/
sudo mount /dev/mapper/[volume group]/[usr volume] /mnt/usr/
sudo mount /dev/mapper/[volume group]/[home volume] /mnt/home/
... etc
Mount and bind directories for grub to detect the underlying hardware
sudo mount --bind /dev /mnt/dev
sudo mount --bind /dev/pts /mnt/dev/pts
sudo mount --bind /proc /mnt/proc
sudo mount --bind /sys /mnt/sys
Jump into the new mounted system
sudo chroot /mnt
Install GRUB
grub-install /dev/sda
grub-install --recheck /dev/sda
update-grub
Exit the environment and restart
exit
sudo umount /mnt/dev/pts
sudo umount /mnt/*
sudo shutdown -r now

Recovering a RAID 5 array

2014-07-03T19:24:00.000+10:00

Recently had a RAID 5 array fail on me. These are the steps I took to recover the data.

NOTE! The order of the disks in /dev/sdX follows the numbering of the ports on the motherboard. So if a disk is plugged into port 0, it will show up as /dev/sda. Keep this in mind as if you remove a failed disk, it might mess up the references in the array!.

Boot up from a Live CD
Install the software RAID management software
sudo apt-get install mdadm
Make sure RAID and LVM are unmounted
sudo vgchange -a n [name of your volume group] sudo mdadm -S /dev/md0
Copy the failed disk to the new disk (in case the disk was the boot disk, you need to copy that flag across so that your system boots)
sudo sfdisk -d /dev/sdx | sudo sfdisk /dev/sdy
Check that the disks are the same
sudo fdisk -l
Mount the RAID array, and remove the failed disk
sudo mdadm --assemble --scan sudo mdadm --manage --remove /dev/sdx
Add the new disk
sudo mdadm --manage --add /dev/sdy
Watch the progress as mdadm rebuilds your RAID array
sudo cat /proc/mdstat

Extending the JavaScript HTML5 Canvas object

2014-04-11T23:09:00.002+10:00

I have been playing with JavaScript, trying to find new and interesting way to use it in browsers. I have found the wonder that is CANVAS, which allows you to do a whole lot of drawing and animation tasks.

The problem is that the features are low-level, meaning you need to write a lot of code to make anything useful or interesting. A nice technique is to use the prototyping feature of JavaScript to extend the features of canvas. Here are some examples:

if (window.CanvasRenderingContext2D) {
/**
* Rounded Rectangle
*/
CanvasRenderingContext2D.prototype.roundedRect = function(x, y, width, height, radius, colour, border, lineWidth, alpha) {
// if certain values are not set just exit
if(!x || !y || !width || !height) { return true; }
// Set other values
if (!radius) { radius = 5; }
if (!alpha) { alpha=1; }
// Start drawing the rounded rectangle
this.beginPath();
this.moveTo(x + radius, y);
this.lineTo(x + width - radius, y);
this.quadraticCurveTo(x + width, y, x + width, y + radius);
this.lineTo(x + width, y + height - radius);
this.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
this.lineTo(x + radius, y + height);
this.quadraticCurveTo(x, y + height, x, y + height - radius);
this.lineTo(x, y + radius);
this.quadraticCurveTo(x, y, x + radius, y);
// Colour it in
if (colour) {
this.globalAlpha = alpha;
this.fillStyle = colour;
this.fill();
}
// Add in optional border
if (border) {
this.lineWidth = (lineWidth) ? linewidth : 1;
this.strokeStyle = border;
this.stroke();
}
// Reset Alpha if it was changed
this.globalAlpha = 1;
this.closePath();
};
/**
* Ellipse
*/
CanvasRenderingContext2D.prototype.ellipse = function(x, y, width, height, colour, border, lineWidth, alpha) {
// if certain values are not set just exit
if (!x || !y || !width || !height) { return true; }
if (!alpha) { alpha=1; }
// Calculate some points
var xLeft = x - (width / 2);
var xRight = x + (width / 2);
var yTop = y - (height / 2);
var yBot = y + (height / 2);
// Draw the ellipse
this.beginPath();
// NOTE: The moveTo() is needed to start the drawing from the correct spot
this.moveTo(x, yTop);
// Start drawing two bezier curves to create an ellipse
this.bezierCurveTo(xRight, yTop, xRight, yBot, x, yBot);
this.bezierCurveTo(xLeft, yBot, xLeft, yTop, x, yTop);
// Colour it in
if (colour) {
this.globalAlpha = alpha;
this.fillStyle = colour;
this.fill();
}
// Add in optional border
if (border) {
this.lineWidth = (lineWidth) ? linewidth : 1;
this.strokeStyle = border;
this.stroke();
}
// Reset Alpha if it was changed
this.globalAlpha = 1;
// Finish the drawing
this.closePath();
};
/**
* Rounded arcs and circles
*/
CanvasRenderingContext2D.prototype.circularArc = function(x, y, radius, startAng, endAng, colour, border, lineWidth, enclosed, direction, alpha) {
// if certain values are not set just exit
if (!x || !y || !radius) { return true; }
// Set other values
if (!alpha) { alpha=1; }
if (!startAng) { startAng = 0; }
if (!endAng) { endAng = Math.PI; }
if (!direction) { direction = false; }
// Start drawing
this.beginPath();
this.arc(x, y, radius, startAng, endAng, direction);
if (enclosed) {
this.closePath();
}
// Colour it in
if (colour) {
this.fillStyle = colour;
this.fill();
}
// Add in optional border
if (border) {
this.globalAlpha = alpha;
this.lineWidth = (lineWidth) ? lineWidth : 1;
this.strokeStyle = border;
this.stroke();
}
// Reset Alpha if it was changed
this.globalAlpha = 1;
// Finish the drawing
this.closePath();
};
}

References

Android HTTP Basic Authentication Service

2014-04-10T18:50:00.001+10:00

Been trying to make a simple HTTP Basic Authentication as an Android app (that is mostly backwards compatible).

I am only including all of the necessary resource files. You can define the icons strings, colours, buttons and styles yourself (just create the appropriate xml file in res/values or res/drawable).

This is my example code:

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>

<manifest xmlns:android="http://schemas.android.com/apk/res/android"

package="au.com.example"

android:versionCode="1100"

android:versionName="1.1.00" >



<uses-sdk

android:minSdkVersion="10"

android:targetSdkVersion="19" />



<uses-permission android:name="android.permission.INTERNET" />



<supports-screens

android:largeScreens="true"

android:normalScreens="true"

android:smallScreens="true"

android:xlargeScreens="true" />



<application

android:allowBackup="true"

android:hardwareAccelerated="true"

android:icon="@drawable/icon"

android:label="@string/app_name"

android:theme="@style/CustomTheme" >



<activity

android:name=".ActivityLog"

android:windowSoftInputMode="adjustPan|stateVisible" >

</activity>

<activity

android:name=".ActivityPreference"

android:windowSoftInputMode="adjustResize|stateVisible" >

</activity>

<activity

android:name=".ActivitySignin"

android:windowSoftInputMode="adjustPan|stateVisible" >

<intent-filter>

<action android:name="android.intent.action.MAIN" />

<category android:name="android.intent.category.LAUNCHER" />

</intent-filter>

</activity>



<service

android:name=".ServiceSignin"

android:enabled="true"

android:exported="false"

android:icon="@drawable/icon"

android:permission="android.permission.INTERNET" >

</service>

</application>

</manifest>

res/xml/preferences.xml

These are our preferences that they user can set (such as the URL to login to as well as the port). This allows you to change the destination server quickly from the UI.

<?xml version="1.0" encoding="utf-8"?>

<PreferenceScreen xmlns:android="http://schemas.android.com/apk/res/android">

<PreferenceCategory

android:title="@string/pref_login_title"

android:key="pref_key_login_settings">

<EditTextPreference

android:key="pref_key_login_url"

android:summary="@string/pref_login_url_summary"

android:title="@string/pref_login_url"

android:defaultValue="example.com.au" />

<EditTextPreference

android:key="pref_key_login_port"

android:summary="@string/pref_login_port_summary"

android:title="@string/pref_login_port"

android:defaultValue="4444" />

</PreferenceCategory>

</PreferenceScreen>

res/layout/activity_login.xml

<merge xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

tools:context=".ActivityLog" >

<LinearLayout

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:orientation="vertical" >

<TextView

android:id="@+id/label_username"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:gravity="center_vertical|center_horizontal"

android:text="@string/label_username" />

<EditText

android:id="@+id/username"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:ems="10"

android:inputType="text" >

<requestFocus />

</EditText>

<TextView

android:id="@+id/label_password"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:gravity="center_vertical|center_horizontal"

android:text="@string/label_password" />

<EditText

android:id="@+id/password"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:ems="10"

android:inputType="textPassword" >

</EditText>

<Button

android:id="@+id/btn_login"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center_horizontal"

android:background="@drawable/button_info"

android:paddingBottom="10dp"

android:paddingLeft="20dp"

android:paddingRight="20dp"

android:paddingTop="10dp"

android:text="@string/btn_login"

android:textColor="@color/btn_text" />

</LinearLayout>

</merge>

res/layout/activity_log.xml

<merge xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

tools:context=".ActivityLog" >

<LinearLayout

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:orientation="vertical" >

<TextView

android:id="@+id/label_time"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:text="@string/label_time" />

<TimePicker

android:id="@+id/time"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:text="@string/label_time" />

<TextView

android:id="@+id/label_log"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:text="@string/label_log" />

<EditText

android:id="@+id/log"

android:layout_width="match_parent"

android:layout_height="0dp"

android:layout_weight="1"

android:gravity="top"

android:height="150dp"

android:hint="@string/hint_log"

android:inputType="textMultiLine"

android:minHeight="20dp" >

<requestFocus />

</EditText>

<Button

android:id="@+id/btn_login"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center_horizontal"

android:background="@drawable/button_info"

android:paddingBottom="10dp"

android:paddingLeft="20dp"

android:paddingRight="20dp"

android:paddingTop="10dp"

android:text="@string/btn_submit"

android:textColor="@color/btn_text" />

</LinearLayout>

</merge>

res/menu/log.xml

This is simply describes the context menu for ActivityLog.

<menu xmlns:android="http://schemas.android.com/apk/res/android" >

<item

android:id="@+id/action_signout"

android:orderInCategory="100"

android:showAsAction="never"

android:title="@string/action_signout"/>

</menu>

res/menu/login.xml

<menu xmlns:android="http://schemas.android.com/apk/res/android" >

<item

android:id="@+id/action_settings"

android:orderInCategory="100"

android:showAsAction="never"

android:title="@string/action_settings"/>

</menu>

src/au/com/example/ServiceSignin.java

This is where all the good stuff happens.

package au.com.example;

import java.io.IOException;

import java.net.MalformedURLException;

import java.net.URL;

import java.util.ArrayList;

import java.util.concurrent.ExecutionException;

import org.apache.http.HttpResponse;

import org.apache.http.HttpStatus;

import org.apache.http.client.ClientProtocolException;

import org.apache.http.client.methods.HttpGet;

import org.apache.http.impl.client.DefaultHttpClient;

import android.annotation.SuppressLint;

import android.app.Notification;

import android.app.NotificationManager;

import android.app.PendingIntent;

import android.app.Service;

import android.content.Intent;

import android.content.SharedPreferences;

import android.content.SharedPreferences.OnSharedPreferenceChangeListener;

import android.os.AsyncTask;

import android.os.Bundle;

import android.os.Handler;

import android.os.IBinder;

import android.os.Message;

import android.os.Messenger;

import android.os.RemoteException;

import android.preference.PreferenceManager;

import android.support.v4.app.NotificationCompat;

import android.util.Base64;

import android.util.Log;

import android.widget.TextView;

/**

* Service to handle Login.

*/

public class ServiceSignin extends Service {

/**

* The Base URL

*/

private static String url = "http://example.com.au";

/**

* The port to access

*/

private static String port = "80";

/**

* The shared preferences object

*/

private SharedPreferences sharedPref;

/**

* Listener for changes to shared preference

*/

public OnSharedPreferenceChangeListener sharedListener = new OnSharedPreferenceChangeListener() {

@Override

public void onSharedPreferenceChanged(SharedPreferences sharedPreferences, String key) {

Log.i("Service", "A preference has been changed");

updatePreferences();

}

};

/**

* Key to access the Shared Preference value for sub URL

*/

private static final String PREF_URL = "pref_key_login_url";

/**

* Key to access the Shared Preference value for port

*/

private static final String PREF_PORT = "pref_key_login_port";

/**

* Keeps track of all current registered clients.

*/

private ArrayList<Messenger> mClients = new ArrayList<Messenger>();

/**

* Command to the service to register a client, receiving callbacks

* from the service. The Message's replyTo field must be a Messenger of

* the client where callbacks should be sent.

*/

static final int MSG_REGISTER_CLIENT = 1;

/**

* Command to the service to unregister a client, to stop receiving callbacks

* from the service. The Message's replyTo field must be a Messenger of

* the client as previously given with MSG_REGISTER_CLIENT.

*/

static final int MSG_UNREGISTER_CLIENT = 2;



/**

* Command to the service to request the URL string for the service

*/

static final int MSG_REQUEST_URL = 3;



/**

* Command to the service to request the URL string for the service

*/

static final int MSG_REQUEST_LOGIN = 4;



/**

* HTTP Client for communicating with server

*/

public static DefaultHttpClient httpClient;

/**

* Handler of incoming messages from clients.

*/

@SuppressLint("HandlerLeak")

private class IncomingHandler extends Handler {

@Override

public void handleMessage(Message msg) {

switch (msg.what) {

case MSG_REGISTER_CLIENT:

// Add the client to the list

mClients.add(msg.replyTo);

break;

case MSG_UNREGISTER_CLIENT:

// Remove the client from the list

mClients.remove(msg.replyTo);

break;

case MSG_REQUEST_URL:

try {

// Send the Message back to client

Bundle b = new Bundle();

b.putString("url", url + ":" + port + "/");

Message reply = Message.obtain(null, MSG_REQUEST_URL);

reply.setData(b);

msg.replyTo.send(reply);

} catch (RemoteException e) {

Log.e("Service", "Reply error", e);

}

case MSG_REQUEST_LOGIN:

try {

LoginOperation task = new LoginOperation();

task.execute(url+":"+port+"/login/auth",msg.getData().getString("username"),msg.getData().getString("password"));

// Send the Message back to client

Message reply = Message.obtain(null, MSG_REQUEST_LOGIN);

int success = 0;

if (task.get()) {

success = 1;

}

reply.arg1 = success;

msg.replyTo.send(reply);

} catch (InterruptedException e) {

Log.e("Service", "Interrupted", e);

} catch (ExecutionException e) {

Log.e("Service", "Execution Exception", e);

} catch (RemoteException e) {

Log.e("Service", "Remote Exception", e);

}

default:

super.handleMessage(msg);

}

}

}

/**

* Target we publish for clients to send messages to IncomingHandler.

*/

private final Messenger mMessenger = new Messenger(new IncomingHandler());

/**

* For showing and hiding our notification.

*/

private NotificationManager notifyManager;

/**

* Unique Identification Number for the Notification.

* We use it on Notification start, and to cancel it.

*/

private int NOTIFICATION = 10;

/**

* Task for running the login operation

*

* @see android.os.AsyncTask

*/

private class LoginOperation extends AsyncTask<String, Void, Boolean> {

/**

* Override this method to perform a computation on a background thread.

*

* @see android.os.AsyncTask#doInBackground(Params... params)

*/

@Override

protected Boolean doInBackground(String... login) {

// We expect exactly three parameters; url, username and password

if (login.length == 3) {

try {

// Our URL to connect to

URL website = new URL(login[0]);

Log.i("Service", "URL: "+website.toString());

// Encode our login details

String credentials = login[1] + ":" + login[2];

String base64Encoded = Base64.encodeToString(credentials.getBytes(), Base64.NO_WRAP);

// Create our client connection

HttpGet getRequest = new HttpGet(website.toString());

getRequest.addHeader("Authorization", "Basic "+base64Encoded);

HttpResponse getResponse = httpClient.execute(getRequest);

if (getResponse.getStatusLine().getStatusCode() == HttpStatus.SC_OK) {

Log.i("Service", "URL Accepted");

return true;

} else {

Log.e("Service", "Not accepted");

Log.w("Service", "CODE: " + getResponse.getStatusLine().getStatusCode());

Log.w("Service", "ENCODE: " + base64Encoded);

Log.w("Service", "CRED: "+credentials);

Log.w("Service", "URL: "+website.toString());

}

} catch (MalformedURLException e) {

Log.e("Service", "Malformed URL", e);

} catch (ClientProtocolException e) {

Log.e("Service", "Client Protocol Exception", e);

e.printStackTrace();

} catch (IOException e) {

Log.e("Service", "IO Exception", e);

}

}

return false;

}

/**

* Runs on the UI thread after doInBackground(Params...). The specified result is the value returned by doInBackground(Params...).

*

* @see android.os.AsyncTask#onPostExecute(Result result)

*/

@Override

protected void onPostExecute(Boolean result) {

// might want to change "executed" for the returned string passed

// into onPostExecute() but that is up to you

}

}

/**

* Return the communication channel to the service.

*

* @see android.app.Service#onBind(Intent)

*/

@Override

public IBinder onBind(Intent intent) {

return mMessenger.getBinder();

}

/**

* Update our values when the Service starts

*

* @see android.app.Service#onCreate()

*/

@Override

public void onCreate() {

super.onCreate();

// Update our preference objects and listen for changes

sharedPref = PreferenceManager.getDefaultSharedPreferences(getBaseContext());

sharedPref.registerOnSharedPreferenceChangeListener(sharedListener);

updatePreferences();

// Grab a notification manager

notifyManager = (NotificationManager)getSystemService(NOTIFICATION_SERVICE);

// Show notification

showNotification();

// Initialise our HTTP Client server

httpClient = new DefaultHttpClient();

Log.i("Service", "Service Started.");

}

/**

* Called by the system every time a client explicitly starts the service by calling startService(Intent)

*

* @see android.app.Service#onStartCommand(Intent, int, int)

*/

@Override

public int onStartCommand(Intent intent, int flags, int startId) {

Log.i("Service", "Received start id " + startId + ": " + intent);

return super.onStartCommand(intent, flags, startId);

}

/**

* Called by the system to notify a Service that it is no longer used and is being removed.

*

* @see android.app.Service#onDestroy()

*/

@Override

public void onDestroy() {

super.onDestroy();

// Delete any notifications

notifyManager.cancel(NOTIFICATION);

Log.i("Service", "Service Stopped.");

}

/**

* Reads the Shared preferences and updates our internal values

*/

public void updatePreferences() {

url = sharedPref.getString(PREF_URL, "error");

port = sharedPref.getString(PREF_PORT, "error");

Log.i("Service", "Preferences updated");

}

/**

* Show a notification while this service is running

*/

private void showNotification() {

// In this sample, we'll use the same text for the ticker and the expanded notification

CharSequence text = getText(R.string.btn_submit);

// The PendingIntent to launch our activity if the user selects this notification

PendingIntent contentIntent = PendingIntent.getActivity(this, 0, new Intent(this, ActivityLog.class), 0);



// Set the icon, scrolling text and timestamp

Notification notification = new NotificationCompat.Builder(this)

.setSmallIcon(R.drawable.icon)

.setContentText(text)

.setContentTitle("Service")

.setContentIntent(contentIntent)

.build();

// Send the notification.

// We use a string id because it is a unique number. We use it later to cancel.

notifyManager.notify(NOTIFICATION, notification);

}

}

src/au/com/example/ActivitySignin.java

This is handles the Login screen.

package au.com.example;

import android.annotation.SuppressLint;

import android.app.Activity;

import android.content.ComponentName;

import android.content.Context;

import android.content.Intent;

import android.content.ServiceConnection;

import android.os.Bundle;

import android.os.Handler;

import android.os.IBinder;

import android.os.Message;

import android.os.Messenger;

import android.os.RemoteException;

import android.util.Log;

import android.view.Menu;

import android.view.MenuInflater;

import android.view.MenuItem;

import android.view.View;

import android.view.View.OnClickListener;

import android.widget.Button;

import android.widget.EditText;

import android.widget.Toast;

/**

* Handles the User Interface for entering and submitting log entries

*

* @author nassar

*/

public class ActivitySignin extends Activity {

/**

* The username input

*/

private EditText inputUsername;



/**

* The password input

*/

private EditText inputPassword;



/**

* The Login button

*/

private Button buttonLogin;



/**

* Messenger for communicating with service

*/

private Messenger messageService = null;



/**

* Flag indicating whether we have called bind on the service.

*/

private boolean stateIsBound;



/**

* Controls what happens once the submit button is clicked

*/

private OnClickListener btnLoginListener = new OnClickListener() {

public void onClick(View v){

Log.i("ActivitySignin", "btnLogin has been clicked");

if (stateIsBound) {

if (messageService != null) {

try {

// Send the Message back to client

Bundle b = new Bundle();

b.putString("username", inputUsername.getText().toString());

b.putString("password", inputPassword.getText().toString());

Message msg = Message.obtain(null, ServiceSignin.MSG_REQUEST_LOGIN, 0, 0);

msg.setData(b);

msg.replyTo = mMessenger;

messageService.send(msg);

} catch (RemoteException e) {

}

}

}

}

};



/**

* Handler of incoming messages from service.

*/

@SuppressLint("HandlerLeak")

class IncomingHandler extends Handler {

@Override

public void handleMessage(Message msg) {

switch (msg.what) {

case ServiceSignin.MSG_REQUEST_LOGIN:

if (msg.arg1 == 1) {

Toast.makeText(ActivitySignin.this, "Signed in", Toast.LENGTH_LONG).show();

Intent intent = new Intent(ActivitySignin.this, ActivityLog.class);

startActivity(intent);

} else {

Toast.makeText(ActivitySignin.this, "Not signed in", Toast.LENGTH_LONG).show();

}

break;

default:

super.handleMessage(msg);

}

}

};



/**

* Target we publish for clients to send messages to IncomingHandler.

*/

private final Messenger mMessenger = new Messenger(new IncomingHandler());



/**

* Class for interacting with the main interface of the service.

*/

private ServiceConnection serviceConnection = new ServiceConnection() {

public void onServiceConnected(ComponentName className, IBinder service) {

// Get a client-side representation of that from the raw service object.

messageService = new Messenger(service);

try {

Message msg = Message.obtain(null, ServiceSignin.MSG_REGISTER_CLIENT);

msg.replyTo = mMessenger;

messageService.send(msg);

Log.i("ActivitySignin", "Service connected");

} catch (RemoteException e) {

// In this case the service has crashed before we could even do anything with it

Log.e("ActivitySignin", "Service crashed before we could do anything with it", e);

}

}

public void onServiceDisconnected(ComponentName className) {

// This is called when the connection with the service has been unexpectedly disconnected - process crashed.

messageService = null;

Log.i("ActivitySignin", "Service has been unexpectedly disconnected - process crashed");

}

};



/**

* Establish a connection with the service. We use an explicit

* class name because there is no reason to be able to let other

* applications replace our component.

*/

private void doBindService() {

bindService(new Intent(ActivitySignin.this, ServiceSignin.class), serviceConnection, Context.BIND_AUTO_CREATE);

stateIsBound = true;

}



/**

* Destroy a connection with the service

*/

private void doUnbindService() {

if (stateIsBound) {

// If we have received the service, and hence registered with it, then now is the time to unregister.

if (messageService != null) {

try {

Message msg = Message.obtain(null, ServiceSignin.MSG_UNREGISTER_CLIENT);

msg.replyTo = mMessenger;

messageService.send(msg);

} catch (RemoteException e) {

Log.e("ActivitySignin", "Service has been unexpectedly disconnected - process crashed - doUnbindService()", e);

}

}

// Detach our existing connection.

unbindService(serviceConnection);

stateIsBound = false;

}

}



/**

* Called after onCreate(Bundle) — or after onRestart() when the activity had been stopped, but is now again being displayed to the user.

* It will be followed by onResume()

*

* @see android.app.Activity#onStart()

*/

@Override

protected void onStart() {

super.onStart();

// Start our service (or bind to running service)

if (!stateIsBound) {

doBindService();

Log.i("ActivitySignin", "Starting activity");

} else {

Log.i("ActivitySignin", "Already bound");

}

}



/**

* Called when the activity is starting.

*

* @see android.app.Activity#onCreate(android.os.Bundle)

*/

@Override

protected void onCreate(Bundle savedInstanceState) {

// Perform the parent operations

super.onCreate(savedInstanceState);



// Set the layout to display

setContentView(R.layout.activity_login);



// Set up our inputs from the Activity

inputUsername = (EditText)findViewById(R.id.username);

inputPassword = (EditText)findViewById(R.id.password);



// Our Submit button

buttonLogin = (Button)findViewById(R.id.btn_login);



// Put a listener on the button to capture our input

buttonLogin.setOnClickListener(btnLoginListener);

}



/**

* Initialise the contents of the Activity's options menu.

* To update the menu every time it is displayed, see onPrepareOptionsMenu(Menu).

*

* @see android.app.Activity#onCreateOptionsMenu(android.view.Menu)

*/

@Override

public boolean onCreateOptionsMenu(Menu menu) {

// Inflate the menu items for use in the action bar

MenuInflater inflater = getMenuInflater();

inflater.inflate(R.menu.login, menu);

return super.onCreateOptionsMenu(menu);

}



/**

* This hook is called whenever an item in your options menu is selected.

* Override default implementation so we can implement activity specific functions

* (Default implementation is called if the menu item is not handled here.

*

* @see android.app.Activity#onOptionsItemSelected(android.view.MenuItem)

*/

@Override

public boolean onOptionsItemSelected(MenuItem item) {

switch (item.getItemId()) {

case R.id.action_settings:;

Intent intent = new Intent(this, ActivityPreference.class);

startActivity(intent);

return true;

default:

return super.onOptionsItemSelected(item);

}

}



/**

* Perform any final cleanup before an activity is destroyed.

* @see android.app.Activity#onDestroy()

*/

@Override

protected void onDestroy() {

super.onDestroy();

try {

doUnbindService();

} catch (Throwable t) {

Log.e("ActivitySignin", "Failed to unbind from the service", t);

}

}

}

src/au/com/example/ActivityLog.java

Just a dummy screen that really does nothing.

package au.com.example;
import android.annotation.SuppressLint;
import android.app.Activity;
import android.content.ComponentName;
import android.content.Context;
import android.content.Intent;
import android.content.ServiceConnection;
import android.os.Bundle;
import android.os.Handler;
import android.os.IBinder;
import android.os.Message;
import android.os.Messenger;
import android.os.RemoteException;
import android.util.Log;
import android.view.Menu;
import android.view.MenuInflater;
import android.view.MenuItem;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TimePicker;
/**
* Handles the User Interface for entering and submitting log entries
*
* @author nassar
*/
public class ActivityLog extends Activity {
/**
* The time input
*/
private TimePicker inputTime;

/**
* The log input
*/
private EditText inputLog;

/**
* The Submit button
*/
private Button buttonSubmit;

/**
* Messenger for communicating with service
*/
private Messenger messageService = null;

/**
* Flag indicating whether we have called bind on the service.
*/
private boolean stateIsBound;

/**
* Controls what happens once the submit button is clicked
*/
private OnClickListener btnSubmitListener = new OnClickListener() {
public void onClick(View v){
Log.i("ActivityLog", "btnSubmit has been clicked");
if (stateIsBound) {
if (messageService != null) {
try {
Message msg = Message.obtain(null, ServiceSignin.MSG_REQUEST_URL, 0, 0);
msg.replyTo = mMessenger;
messageService.send(msg);
} catch (RemoteException e) {
}
}
}
}
};

/**
* Handler of incoming messages from service.
*/
@SuppressLint("HandlerLeak")
class IncomingHandler extends Handler {
@Override
public void handleMessage(Message msg) {
switch (msg.what) {
case ServiceSignin.MSG_REQUEST_URL:
String str1 = msg.getData().getString("url");
Log.i("ActivityLog", "URL: " + str1);
break;
default:
super.handleMessage(msg);
}
}
};

/**
* Target we publish for clients to send messages to IncomingHandler.
*/
private final Messenger mMessenger = new Messenger(new IncomingHandler());

/**
* Class for interacting with the main interface of the service.
*/
private ServiceConnection serviceConnection = new ServiceConnection() {
public void onServiceConnected(ComponentName className, IBinder service) {
// Get a client-side representation of that from the raw service object.
messageService = new Messenger(service);
try {
Message msg = Message.obtain(null, ServiceSignin.MSG_REGISTER_CLIENT);
msg.replyTo = mMessenger;
messageService.send(msg);
Log.i("ActivityLog", "Service connected");
} catch (RemoteException e) {
// In this case the service has crashed before we could even do anything with it
Log.e("ActivityLog", "Service crashed before we could do anything with it", e);
}
}
public void onServiceDisconnected(ComponentName className) {
// This is called when the connection with the service has been unexpectedly disconnected - process crashed.
messageService = null;
Log.i("ActivityLog", "Service has been unexpectedly disconnected - process crashed");
}
};

/**
* Establish a connection with the service. We use an explicit
* class name because there is no reason to be able to let other
* applications replace our component.
*/
private void doBindService() {
bindService(new Intent(ActivityLog.this, ServiceSignin.class), serviceConnection, Context.BIND_AUTO_CREATE);
stateIsBound = true;
}

/**
* Destroy a connection with the service
*/
private void doUnbindService() {
if (stateIsBound) {
// If we have received the service, and hence registered with it, then now is the time to unregister.
if (messageService != null) {
try {
Message msg = Message.obtain(null, ServiceSignin.MSG_UNREGISTER_CLIENT);
msg.replyTo = mMessenger;
messageService.send(msg);
} catch (RemoteException e) {
Log.e("ActivityLog", "Service has been unexpectedly disconnected - process crashed - doUnbindService()", e);
}
}
// Detach our existing connection.
unbindService(serviceConnection);
stateIsBound = false;
}
}

/**
* Called after onCreate(Bundle) — or after onRestart() when the activity had been stopped, but is now again being displayed to the user.
* It will be followed by onResume()
*
* @see android.app.Activity#onStart()
*/
@Override
protected void onStart() {
super.onStart();
// Start our service (or bind to running service)
if (!stateIsBound) {
doBindService();
Log.i("ActivityLog", "Starting activity");
} else {
Log.i("ActivityLog", "Already bound");
}
}

/**
* Called when the activity is starting.
*
* @see android.app.Activity#onCreate(android.os.Bundle)
*/
@Override
protected void onCreate(Bundle savedInstanceState) {
// Perform the parent operations
super.onCreate(savedInstanceState);

// Set the layout to display
setContentView(R.layout.activity_log);

// Set up our inputs from the Activity
inputTime = (TimePicker)findViewById(R.id.time);
inputLog = (EditText)findViewById(R.id.log);

// Our Submit button
buttonSubmit = (Button)findViewById(R.id.btn_login);

// Put a listener on the button to capture our input
buttonSubmit.setOnClickListener(btnSubmitListener);
}

/**
* Initialise the contents of the Activity's options menu.
* To update the menu every time it is displayed, see onPrepareOptionsMenu(Menu).
*
* @see android.app.Activity#onCreateOptionsMenu(android.view.Menu)
*/
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu items for use in the action bar
MenuInflater inflater = getMenuInflater();
inflater.inflate(R.menu.log, menu);
return super.onCreateOptionsMenu(menu);
}

/**
* This hook is called whenever an item in your options menu is selected.
* Override default implementation so we can implement activity specific functions
* (Default implementation is called if the menu item is not handled here.
*
* @see android.app.Activity#onOptionsItemSelected(android.view.MenuItem)
*/
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case R.id.action_signout:;
Intent intent = new Intent(this, ActivitySignin.class);
startActivity(intent);
return true;
default:
return super.onOptionsItemSelected(item);
}
}

/**
* Perform any final cleanup before an activity is destroyed.
* @see android.app.Activity#onDestroy()
*/
@Override
protected void onDestroy() {
super.onDestroy();
try {
doUnbindService();
} catch (Throwable t) {
Log.e("ActivityLog", "Failed to unbind from the service", t);
}
}
}

src/au/com/example/ActivityPreference.java

This is a simple screen to show and handle changes to our Shared Preferences.

package au.com.example;
import android.annotation.TargetApi;import android.os.Build;import android.os.Bundle;import android.preference.PreferenceActivity;import android.preference.PreferenceFragment;
public class ActivityPreference extends PreferenceActivity { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); // Android v11 up uses Fragments, but lower needs Activity if (Build.VERSION.SDK_INT < Build.VERSION_CODES.HONEYCOMB) { onCreatePreferenceActivity(); } else { onCreatePreferenceFragment(); } } /** * Wraps legacy {@link #onCreate(Bundle)} code for Android < 3 (i.e. API lvl < 11). */ @SuppressWarnings("deprecation") private void onCreatePreferenceActivity() { addPreferencesFromResource(R.xml.preferences); } /** * Wraps {@link #onCreate(Bundle)} code for Android >= 3 (i.e. API lvl >= 11). */ @TargetApi(Build.VERSION_CODES.HONEYCOMB) private void onCreatePreferenceFragment() { getFragmentManager().beginTransaction() .replace(android.R.id.content, new MyPreferenceFragment ()) .commit(); } /** * Preference Fragment for API lvl >= 11 */ @TargetApi(Build.VERSION_CODES.HONEYCOMB) public static class MyPreferenceFragment extends PreferenceFragment { @Override public void onCreate(final Bundle savedInstanceState) { super.onCreate(savedInstanceState); addPreferencesFromResource(R.xml.preferences); } }}

Resources

JavaScript cheat-sheet: Basic

2014-02-27T00:39:00.001+11:00

If you are here to learn how to code in JavaScript, I highly suggest you DON'T use this as your only resource. Go to CodeAcademy or w3schools to get a more comprehensive guide to coding.

=== means equals to (useful in if statements)
!== means not equal to (again, useful in if statements)

Primitive Data Types:
Strings are created simply by opening up a pair of quotation marks (")
Numbers are integers or floats (such as 4 or 3.14)
Booleans are only true and false values (you simply write "true" or "false", without quotes)

% is the modulo operator. It prints the remainder of division operation.

confirm("Do you want to continue?");
Will display a confirm dialogue box. Returns a true or false.

alert("Something went wrong");
Only displays a dialogue box (use if you do not care about user input)

prompt("Enter in your name:");
Will display a dialogue box with text input. Returns the input as a string.

console.log("This message will be printed to your console (not the HTML page)");
Prints a message to the JavaScript console (this is usually found on a developer dashboard in browsers)

"This is a string".length;
Returns the character length of a string

"This is a string".substring(x, y);
Print out the portion of the string, with 'x' the character to start cutting from and 'y' the final character

var name = "String";
Assigning a variable (in this case a string)

"This is a String".match(/string/i)
This is string pattern matching, or Regular Expressions. Please see elsewhere how to use Regular expressions

var newArray = ["item 1", "item 2"];
Assiging an array of items.

var newFunction = function(variable) { return variable; };
Declaring a new function called newFunction, which can be called as newFunction("String")

var newObject = { key: "value", key2: 10, key3: function(value){ return value; } };
Declares a new object called newObject, with three properties.

var testObject = new newObject; testObject.key;
Declaring a new testObject of type newObject, and accessing the 'key' property

if (true) { return "True"; } else { return "False"; }
An "IF" conditional statement (with optional "ELSE")

for (var i = 0; i < condition; i++) { condition--; }
A "FOR" loop statement, with increment and decrement operators

switch (name) { case "value": return name; break; default: return false; }
A "SWITCH" or "CASE" statement.

while (value < 5) { value++; }
A "WHILE" loop.

try { arbitraryFunction(); } catch (err) { alert(err) }
A "try-catch" block.

throw "This is an error message";
An error thrown that is meant to be caught by a try-catch block. This just throws a simple string.

Math Object constants
Math.E
Math.PI
Math.SQRT2
Math.SQRT1_2
Math.LN2
Math.LN10
Math.LOG2E
Math.LOG10E

Math.round(4.13);
Rounds the number to the nearest integer (in this example it will output 4)

Math.random()
Output a pseudo-random number between 0 and 1

document.getElementById("id");
Returns the HTML DOM element that matches the given id string

document.getElementsByClassname("class");
Returns the array of HTML DOM elements that matches the given class string

document.getElementById("id").innerHTML;
Gets (or sets) the HTML that is in between the element tag (make sure you note the capitalisation)

document.createElement("name");
Creates an DOM element (but it is not attached automatically!)

Notes from a Google Entreprenuer Day

2014-01-07T15:25:00.000+11:00

These are notes I had lying around from a Google Entrepreneur Day.

Small teams, Flat structure. Adaptibility. Agile, flexible, high sharing of data.
Meritocracy and Transparency. Helps make passionate people.
Execution. Experiment often, fail quickly. Testing and Auditing. Reward risk, do not punish failure.
Collect and aggregate usage data. Data should not lie, and it will keep you honest.
3 A's of entrepreneurship:
1. Audit Data and yourself.
2. Admit when things are not working.
3. Adapt in order to survive.

Understand your user

Australia has the highest internet penetration. Best place to actually test. South Korea, UK and US are other penetration markets.
Trends: Mobility, Video, Social, Cloud.
Consumerism of IT. Take Consumer technology (phones, tablets, etc) into the business.

BigQuery

Big Data is "When the cost of throwing away data becomes higher than technology used to store it"
Batch-based solutions were not fast enough (for data-driven decision making)
Accessed via RESTful API. Make it into a service.
Suitable for aggregation and predictions.

Go

Small language
Simple type system
Fast runtime properties
Native concurrency support
Fast development workflow
Comprehensive standard library
Standard library includes JSON, XML, net, SQL database and command line flags

Lean platforms for lean start-ups

You are not the only one working on it. You do not always have a great idea.
Steps:

Start small, start fast
Learn like a scientist. Rigorous, precise, learn from failure.
Minimise friction to ship

Advatange is that a start-up can focus on markets no-one cares about.
Move fast and break things

Notes for Think Again: How to reason and argue (Sharpen Edges & Organise Parts)

2014-01-06T15:09:00.002+11:00

These are my course notes for the Coursera course "Think Again" by Walter Sinnott-Armstrong at Duke University and Ram Neta at University of North Carolina.

This follows on from my earlier notes. And these.

Sharpen Edges

We should seek adequate precision and adequate clarity, because absolute or perfect precision and/or clarity is futile and endless.
When clarifying a claim, do not claim more than the speaker has to claim. ALWAYS CHOOSE THE MORE CHARITABLE OPTION.
Clarification happens better when you are working with smaller premises (without distortion).
Dependent clauses: These are premises that are dependent on another premise (usually given to help support our assertions). However, it depends on context on whether you break up dependent clauses into it's own premise.
Dependent clauses are usually marked by that, which and who.

Organise Parts

Liner structure:
Premise 1 leads to conclusion 2, which is a premise for conclusion 3... etc
1 -> 2 -> 3
Branching structure:
Each premise given can independently support the conclusion, Missing one premise will not diminish the argument.
3 <- 1
^
|
2
Joint structure:
Premises work togetherto provide support for the conclusion, and neither premise alone is sufficient for the conclusion.
1 + 2
______
3

We can combine one or more of the structures.