Raspberry Pi, Magic Mirror / Dakboard on a 3.5inch Display touch Screen

My Raspberry Pi from my previous post, being used as usual, I wanted to enhance its functionality and use further, by not only letting it be a headless raspberry pi / DNS Filter Server but also:

1. To have the ability to see what is going on directly without the need of a monitor
2. Conveniently interact with it directly without the need to use another machine via SSH or VNC
3. To have a sense of a complete standalone device
4. Make it aesthetically appealing to the eyes rather than appearing as mere box

The first thing that came to mind was to have a 5inch or 7inch touch screen display, so I researched on the good, bad and ugly of this idea, most post do suggest 7inch size, but given my eyes fell in love with a 3.5inch touch screen there was no escape, I needed something the size of the pi itself and 3.5inch screen fits the description, required items:

• pi case / enclosure
• 3.5 Inch Touch Screen

First thing first, head over to LCD WIKI and grab a screen of your liking, in ,my case I went with:

• Raspberry Pi GPIO Display to plug directly on to the GPIO Pin, this will require driver installation else you can choose a HDMI one
• Resistive Touch Screen 3.5inch RPI Display due to price and practicality of use, but a Capacitive Touch Screen would be preferred, any Sponsors?

To keep it simple no previous pi set up instructions are going to be repeated but instead we are working with an existing Raspberry Pi that was working but just adding more use and functionality to it, simply adding a touch screen, casing, screen driver and utility software.

The screen above comes with instructions on how to place it to Raspberry Pi, as most instruction would need to be followed correctly, the pins must go into the right GPIO number range, failure will destroy the screen as powering the Raspberry pi would pass voltage to the wrong screen pin. Before the screen installation, I highly recommend:

1. To add a fan, so the casing should be able to accommodate a fan
2. The screen should have a fan pin, as once plugged into the GPIO pins, 5v GPIO pin will not be accessible / in use, hence pick a screen that has fan pin option

I picked a casing with intentional space for a fan, and the screen dose provide a fan pin, instead I went with no fan for this setup rather than my previous one, but I did leave the heat sinks intact to provide passive cooling at the same time eliminate fan noise as my pi would be place in a well ventilated and on sight such as a table.

Now we have the hardware setup, it is time for the software, individual instructions for the touch screen setup are in the LCD WIKI, or the screen manufacturer you are getting from, my case I followed as below:

1. I installed the Touch Screen Drivers and restarted the Raspberry Pi, there is no need to do screen calibration if touches/clicks are inline with place/area of contact, no calibration was needed for my setup
2. Then I rotated the Screen 180 degrees so the Raspberry pi power and the peripherals are on top and the bottom is clear for easy placement on a surface such as a table

Reference : http://www.lcdwiki.com/3.5inch_RPi_Display

Ok so now what? technically it was still not a true stand alone, the only thing I could do was touch for input but I could not type without using a physical keyboard, well there is a solution and I installed a virtual keyboard:

• sudo apt-get install matchbox-keyboard

And the Keyboard can be found in Menu -> Accessories –> Keyboard, After ages of typing one letter at a time it proved not practical but at least still convenient, if you have it running its easy to see what is going on and also be able to click/select items and type words (not sentences) it is also convenient to type simple commands on the terminal, because of this I left the option for SSH and VNC available, but there was less space to work on, so definitely I had to improve on this a bit more, I went on and change the System Settings:

1. For Menu fonts to 8 from 12 and menu icons to 16×16
2. Depending on the Screen / Hardware, you might have resolution option, my case above was the best I could do

Now with the above setting I had some room to work with a window or two, happy!!! VNC and SSH also facilitate not only speed or long typing but also given the fact the Raspberry pi does not have a battery, hence not portable  as the pi physical range is limited to the area it is plugged in.

Now time for beautification, there were multiple choices but I set both below

1. Magic Mirror
2. Dakboard

Honestly Dakboard is easy, as it is just a URL in your browser, you just set it to full screen, pretty easy and on top of that it is beautiful, Magic Mirror as the name suggest is was exclusively designed for two way mirrors but practically any of them is better to add aesthetic value to my set up, yeah even though Dakboard was easy and beautiful I found it to be just another wallpaper desktop / a web app that I could simply build using HTML and JS but to be honest its not free, you got to pay for features with Dakboard, while Magic Mirror on the other hand, its free, open source and a tone of community support, modules and even an app to control it, so I set up both Dakboard (free usage) but using Magic Mirror.

Magic Mirror Set up Instructions

• https://docs.magicmirror.builders/getting-started/installation.html Remember to start the Application and not the server, as you want to show it on screen / full screen

After the Installation you will need to do a personal setup for your location for weather information and calendar for public holidays or you could setup your private calendar from Google etc, below are my settings in the Magic Mirror config.js

{ module: “currentweather”, position: “top_right”, config: { location: “Semenyih”, locationID: “1734798”, appid: “XXXXXXXXXXXXXXXXXXXXXXX” }

You will need to signup at https://openweathermap.org/ and get your location ID and your application ID, replace XXX… with your application ID, I also went ahead and got the public calendar for Malaysia, there was no need to setup my private calendar as I have those events in my phone, I went ahead and divided the screen into 4 sections as I had a limited area of 3.5inch screen size, 320 X 480 resolution:

1. top_left for clock
2. bottom_left for calendar
3. top_right for current weather
4. bottom_right for weather forecast

You could also zoom in and out of the screen, everything else that I did not need, I simply commented them out /* */ such as compliment module, who need compliments when neighbourhood cats do it uninvitedly in my front porch.

Final result, a beauty by myside! It is simply a full computer / server, aesthetically disguise as an information screen / clock.

Raspberry Pi, WIFI, SSH, DDNS (No-IP), Ad Blocker + Internet Tracker / Filter + DNS (Pi-hole), Secure Virtual Private Network / Tunnel (PiVPN OpenVPN / WireGuard), Port Forwarding, Reverse Proxy / Tunnel (Ngrok, RemoteIT).

Disclaimer: this gained knowledge, application and post was made possible by COVID-19 lock down, there is something positive in everything.

Things covered are as below, you may head to below items specific to your needs if required:

1. Raspberry PI Headless, WIFI and SSH enabled (We want the PI to use only the resources required and also be in position to handle a load of multiple services running on same PI)
2. DDNS such as No-IP (Use this if you can Port Forward on LAN, as it will update your current IP to a dynamic domain name, this may not be secure as port forward and dynamic domain is fixed and connected directly to your home / personal network but its faster*)
3. Ad Blocker, Internet Tracker / Filter and DNS using Pi-Hole (This will save up data as your network will block ads and also save you on ad disruptions on your devices and give you more control on blocking / allowing sites)
4. VPN using WireGuard UDP only, else OpenVPN if you might need TCP (As most most Proxy Server might not support UDP)
5. Port Forward (not secure but faster*)
6. Reverse Tunnel (If you do not want / can not / using mobile data / port forward is not possible / or simply make your pi portable / accessible regardless on which network you are on)

* means it will be elaborated later on, the steps will be bundled up based on the required steps / stages in setup / heading herein, I will divide the steps based on port forwarding or not in the stage in setup / heading such as:

1. If you will be port forwarding then setup DDNS such as No-IP and Forward the Port from Router to Raspberry Pi
2. If you will not be port forwarding skip the above option and just setup Reverse Proxy such as RemoteIT with the rest of the setup

So being on the move I tend to use the internet a lot, understanding and knowing the ins and outs of free WIFI I tend to use my Mobile network instead, which means more data bills, and having a free VPN are mostly running on quota or the hassle of not being able to access anything from home while on the go limit on device, 2 problems to be solved:

• Use of Free WIFI Securely without VPN Payment or limited quota / device connected
• Access home network / devices / files securely on the go

The first time I heard of “raspberry pi / raspberry pie” I thought it was something I could eat , apparently it is the number π is a mathematical constant and there is a “PI Day” that is annually celebrated and observed on March 14 (3/14 in the month / day format).

So after one week of research and review, I was going for Pi Zero but on the second week knowing how I would probably get excited, I went with the highest specs available for any over kill I had in mind, as the post title suggests that’s a mouth full already and while the initial intention was VPN only and just to solve two things, I ended up with more due to the benefits and restrictions faced during setup (Blocked by ISP).

• Raspberry Pi Zero W 1GHz, single-core CPU / 512MB RAM
• Raspberry Pi 4 B Broadcom BCM2711, Quad core Cortex-A72 (ARM v8) 64-bit SoC @ 1.5GHz / 4GB LPDDR4-3200 SDRAM

For this setup you will need a casing for protection, heat sinks and fan/s to keep cool the raspberry pi.

Word of advice always go to the source for anything, unless not available then only look somewhere else, as most of them are outdated, I have personally researched and compared from different sources including YouTube video tutorials, below I will lay down the process and procedure, including links within from OEM providers to the Software providers, first thing first.

1. Raspberry Pi Installation / Setup

Most tutorials talks about downloading the OS Image and then write it to the SD Card, this is fine if you want to do it multiple times or have limited data, the best and recommended way is to use Raspberry Pi Imager as it will allow you to choose one of the multiple supported OS, set proper file format i.e fat32 and write it directly into your selected SD straight away.

I chose headless setup for this instance meaning I will not be using a monitor and hence there is no need to install the desktop software. I used “Raspbian Lite” on 8GB SD Card for my setup. I also did install “Raspbian Full” on 16GB SD Card separately when I need to have extra desktop I just swap the SD cards and plugin HDMI, Keyboard and Mouse, bear in mind SD Cards larger than 32GB have a further read on sdxc formatting.

Also do take note, pi-hole will have its own database meaning there will also be a lot of write to SD Card, so ensure the card can handle it such as class 10 and above, not only the SD Card Size matters but also it’s Read/Write Speed.

Go to “Raspbian (Other)” to get option for “Raspbian Lite”.

2. Enable SSH and WIFI Connection

We will need to create 2 files named exactly as specified:

• wpa_supplicant.conf (Specify 3 things country code, network name and password)
• ssh (Empty)

Example: Malaysia = MY

ctrl_interface=DIR=/var/run/wpa_supplicant GROUP=netdev
update_config=1
country=MY

network={
 ssid="MyWifiName"
 psk="MyWifiPassword"
}

Now we have those 2 files saved in the SD Card, remove the SD Card from you desktop and insert it into the raspberry pi, switch on the power and you should see 2 led light up, red for power, green blinking for reading data (the blink will end once reading / boot complete), you could give it 10 seconds but less  than 5 being headless its already up and running.

3. Connecting to your Raspberry PI

You could open up your router to see new local IP address connected, as most tutorial specify SSH using local IP address or Putty for windows for SSH, you do not need that.

You will need specific IP address if you have multiple PI on Network and for Windows 10 you do not need Putty, for my case having SSH already on my Windows 10 as I am using AWS and Git, I just open up CMD as below:

>ssh raspberrypi.local -l pi

The command allows us to “-l” login user named “pi” directly after this we just enter the default password “raspberry”.

4. Change Pi Password and Update packages

After connecting to your PI it is best to change password as I intend the device to be wireless, headless and portable, meaning I could run it in another network, hence password change is a must, run below and press enter, follow the on screen prompt for current and new password.

>passwd

Update your raspberry pi, most tutorials will simply use apt-get to update and upgrade but the Debian base Linux commands have been simplified so simply trigger below and enter.

>sudo apt update

>sudo apt full-upgrade

“full-upgrade” is used in preference to “upgrade”, as it will also include any dependencies that may have been made changed / updated for a specific package.

Make it a habit to reboot so some of the update that require reboot to take effect, on every step / after update / installation, so do trigger reboot then SSH back.

>sudo reboot

Also make it a habit of shutting down your raspberry pi properly rather than following the online tutorials which suggest switching off the main plug or removing the plug, this will lead to corrupt data and even ruin your SD Card as it could be in write mode when power is lost.

This will shut it down within 60 seconds:

>sudo shutdown

To halt and shutdown immediately use:

>sudo shutdown -h now

5. DDNS No-IP (Only setup if you intend to port forward)

How to know if you can port forward if you want to?

1. Data / Internet Provider gives you a static IP address / it is a land line / not SIM, mobile operators control NAT, users might be on a shared public IPs. You wont be able to forward it as you do not control the gateway / server. (Such as my case on Celcom)
2. You Own and have access to the router, if you are in the first router you will need to port forward once else based on the network topology you will need to forward up to your PI

Here are the steps directly from the source:

• >mkdir /home/pi/noip
• >cd /home/pi/noip
• >wget https://www.noip.com/client/linux/noip-duc-linux.tar.gz
• >tar vzxf noip-duc-linux.tar.gz
• >cd noip-2.1.9-1
• >sudo make
• >sudo make install
• >sudo /usr/local/bin/noip2
• >sudo noip2 ­-S

Remember port forwarding opens up port into your network, which means your network might be susceptible to attacks, and on top of that DDNS it will have a fixed domain name to your network, meaning you just need to know it once for yourself and the attacker, and won’t be portable in the event you take it somewhere you will need to port forward from the new router.

This set up will be faster in a sense you will be connected directly to your network without using reverse proxy and you have more control of your own data and network settings as a whole.

6. Ad Blocker, Internet Tracker / Filter and DNS using Pi-Hole

It is best to have a combo of both PiVPN and Pi-hole running in the network but the setup issues is that most of the tutorials installs PiVPN (OpenVPN / WireGuard) first followed by Pi-hole which leads to re-setting / re-configure of DNS.

If you intend to install both then its best to install Pi-Hole first as when it comes to installing PiVPN, existing Pi-Hole will be detected and the installation script will ask if you want to use it as the DNS for the VPN, follow below:

>curl -sSL https://install.pi-hole.net | bash

Follow on Screen steps, basically you will need to have:

• Static IP (Manually set on the device) / DHCP Static Binding (Set on Router which most modern routers already have it)
• Enable ip4 and ip6 (Already default selected)

Everything else can be left as default including installing the pi-hole web and server, unless you have specific needs, at the end of the script you will be presented with a login password for Pi-Hole on Screen (you may simply screen shot) and also on terminal (you may simply copy).

At this point you may set up your router to point to Pi as your DNS server as in my case this is not possible else specific devices, you might also notice ip6 “not configured” even though you selected it, you might login as admin and fix it.

7. Virtual Private Network using PiVPN (OpenVPN / WireGuard)

This Pi VPN setup also uses a script with option run below and follow the prompt:

>curl -L https://install.pivpn.io | bash

I am doing Port Forwarding:

• Select DDNS instead of Static IP Address and input your domain / provided sub-domain
• Select either OpenVPN / Wire Guard but UDP

I am not doing Port Forwarding:

• Select Static IP Address (DHCP Reserve or Static IP)
• Select OpenVPN TCP (Default will be 443) setup to port 1194 (Some proxy servers have scripts for specific usage or ports for setup hence default will work best / Known protocal)

Everything else should be default unless you want to have random ports for security or changing other settings you may see fit, after installation you will need to add users, add users based on how many will access the VPN, it is best to add users based on the number of devices that will need to connect, as there can not be simultaneous connection of an account / user.

With user password

>pivpn add

Without user password

>pivpn add nopass

8. Port Forwarding

This option is for those who fall under “I am port forwarding”, simply forward the PiVPN port you selected during setup if it is OpenVPN  or WireGuard both will be UDP, depending on specific router, you may find instructions of your router.

There is no need to forward multiple ports i.e port 80 for pi-hole web, 22 for SSH, just forward “One port to rule them all” and that is your VPN port as it will create a tunnel into you network and you will virtually be in the same topology / network and you can access them securely as being in a LAN over WAN.

9. Reverse Proxy / Tunnel using Ngrok / RemoteIT

This option is for those who fall under “I am not port forwarding”, to access your raspberry pi in your network or any other network or if your ISP blocks ports, you will need to set up VPS or in our case a proxy to be specific “Reverse proxy” where communication will take place there.

This is rather secure manner of communication and given some providers randomly generate end points and port mapping to your original values for each connection, it becomes hard to be attacked as those values become useless after disconnection and also options of only allowing one active connection per service which ensure its only you active accessing your resources at that point and time.

You may proceed to setup a VPS as a Reverse Proxy Server or use existing one, there are many more, its up to you to compare and choose, example such as:

Ngrok

• >wget https://bin.equinox.io/c/4VmDzA7iaHb/ngrok-stable-linux-arm.zip
• > unzip /path/to/ngrok.zip
• >./ngrok authtoken ZMD3UjmSs2LEWmonFxP234453qdTYDgUmrAUBgomNu6Hi (Swap with your authorization token)
• > ./ngrok http 80 (Swap the service and port number)

RemoteIT

• >sudo apt update && sudo apt install -y connectd && sudo connectd_installer

Follow the on Screen Prompt, select option 1 for an application running on Pi

Then select option 9 you for OpenVPN you may leave the port as default as specified in this guide else specify the port you provided.

Validate registered device

Some routers may have inbound and outbound rules, in my case the inbound rules can not be changed but the outbound rules are available, which allow application such as online games, video conferencing, or IP phone over the LAN to take place, these can be found in router setting > security outbound rule / > special applications

To escape this set up you could easily attach the port to a known service that either major OS or the router it self uses, these are open most of the time so as to not restrict services either 22 (SSH) or 443 (HTTPS) as explained on Hide OpenVPN Traffic.

10. Connection

Now remember that pivpn command you used to add user / device? We may extract that from Pi, we could simply use SFTP, my favorite right out of notepad++ just add a plugin, right click the created file and select “Download File”.

Now time to connect from remote, you will need to generate the proxy values:

• Proxy End Point / URL
• Proxy Port

You can do this from the web portal of your reverse proxy provider / server, grab those two values and swap them from the .ovpn file and connect, lets test by leaving my network and connect to another network.

Now that I am connected to another network lets start OpenVPN.

Success you can see data transfer started and I am able to access everything in my home network through the VPN as if I was in LAN.

Things setup / Achieved

1. Headless Raspberry Pi with SSH and WIFI
2. Ad Blocker + Traffic Tracker / Filter + DNS using Pi-hole
3. VPN using PiVPN
4. Reverse Proxy using RemoteIT

• No unnecessary DDNS Service
• No Opening Ports / Port Forward in my network
• Truly portable box, I just connect to new WIFI

With the above setup I just need the power cable to enjoy all the services, it also means I could carry it around remember portability and use Pi-hole on the go without VPN or leave it in another network and access it remotely using RemoteIT, surely “petite and portable” .

Conclusion

Due to DIY nature of Raspberry PI, I think it would be great to have:

• Power on / off toggle switch, so it would gracefully shutdown by halting all services prior killing the power
• Temperature triggered fan rather than having it on with power on

These can be achieved by python scripts using the GPIO pins, then it would be with a breeze without SSH into it to trigger shutdown and power efficient with a temperature triggered fan.

Observer and Observable

Using JAVA Implementation

Message Board (Observable)

package com.alkathirikhalid.demo; import java.util.Observable; /**   * <p>   * Message Board as Observable.</p>   * <p>   * It can be observed for new message changes, it can also have one or more   * observers, when an observable object is newly created, its set of observers   * is always empty at first.</p>   *   * @author alkathirikhalid   */ public class MessageBoard extends Observable {     /**       * The message on the Message Board       */      private String message;     /**       * Getter       *       * @return message Board       */      public String getMessage() {          return message;      }     /**       * Setter       *       * @param message Board       */      public void setMessage(String message) {          this.message = message;          // Marks this Observable object as having been changed          setChanged();          // notify all of Message Board observers          notifyObservers();      } }

User (Observer)

package com.alkathirikhalid.demo; import java.util.Observable; import java.util.Observer; /**   * <p>   * User as Observer.</p>   * <p>   * Gets updated messages based on changes in observable Message Board.</p>   *   * @author alkathirikhalid   */ public class User implements Observer {     /**       * Observable Message Board       */      private final MessageBoard messageBoard;      /**       * User In box message       */      private String inbox;     /**       * Constructor       *       * @param messageBoard the user is Observing       */      public User(MessageBoard messageBoard) {          this.messageBoard = messageBoard;      }     /**       * Getter       *       * @return in box message       */      public String getInbox() {          return inbox;      }     /**       * Setter       *       * @param inbox message       */      public void setInbox(String inbox) {          this.inbox = inbox;      }     @Override      public void update(Observable o, Object arg) {          // Confirms the Observable is a Message Board Object          if (o == messageBoard) {              // Sets the user in box message as the incoming new message board              setInbox(messageBoard.getMessage());              // Prints to screen              System.out.println(getInbox());          }      } }

Test Application

package com.alkathirikhalid.demo; /**   *   * @author alkathirikhalid   */ public class TestApp {     /**       * @param args the command line arguments       */      public static void main(String[] args) {          // New Message Board Instance          MessageBoard messageBoard = new MessageBoard();          // New User Instance Observing Message Board          User user = new User(messageBoard);          // Add User as an Observer of Message Board          messageBoard.addObserver(user);          // Update the Message Board with new Message          messageBoard.setMessage(“New Message!”);      } }

Writing Your Own Implementation

Message Board Listener Interface

package com.alkathirikhalid.demo; /**   *   * @author alkathirikhalid   */ public interface MessageBoardListener {     void update(String message); }

Message Board Class

package com.alkathirikhalid.demo; public class MessageBoard {     private MessageBoardListener messageBoardListener;      /**       * The message on the Message Board       */      private String message;     public void setMessageBoardListener(MessageBoardListener messageBoardListener) {          this.messageBoardListener = messageBoardListener;      }     /**       * Getter       *       * @return message Board       */      public String getMessage() {          return message;      }     /**       * Setter       *       * @param message Board       */      public void setMessage(String message) {          this.message = message;          // notify all of Message Board listeners          messageBoardListener.update(message);      } }

User

package com.alkathirikhalid.demo; public class User implements MessageBoardListener {     private String inbox;     public String getInbox() {          return inbox;      }     public void setInbox(String inbox) {          this.inbox = inbox;      }     @Override      public void update(String message) {          setInbox(message);          // Prints to screen          System.out.println(getInbox());      } }

Test Application

package com.alkathirikhalid.demo; /**   *   * @author alkathirikhalid   */ public class TestApp {     /**       * @param args the command line arguments       */      public static void main(String[] args) {          // New Message Board Instance          MessageBoard messageBoard = new MessageBoard();          // New User Instance          User user = new User();          // Add User as a Listening to the Message Board          messageBoard.setMessageBoardListener(user);          // Update the Message Board with new Message          messageBoard.setMessage(“New Message!”);      } }

Result

The same for both implementations

New Message!

DZ09 Smart Watch

So I was searching for an affordable smart watch with the below criteria’s:

• China Made
• Affordable
• Programmable
• Experimental

After like 2 weeks of research and going through reviews I was left with 2 choices:

• DZ09
• DM98

DZ09

• Affordable
• Running on Nucleus RTOS
• Runs .vxp apps
• Able to run custom firmware supported by the device MTK Chip (There are different variation will elaborate later on)

DM98

• Not so Affordable (At the moment give it some time)
• Running Android 4.4
• Runs .apk apps
• Able to run custom ROM

Upon purchase, to my surprise all is well it was delivered in a nice package, everything is intact and functioning as expected, I tested:

• Memory card Support
• Sim Car Support
• Bluetooth connectivity
• Bluetooth communication
• Making call and receiving calls
• Taking pictures
• Playing audio
• Recording audio
• …

Required App to Sync with Android Phone:

• https://play.google.com/store/apps/details?id=com.szfunyun.btnotification

I have to admit it was my first actual online purchase and shipping experience, reason is because I would always prefer to buy what am seeing or holding, I guess this doesn’t get old.

Hacking TIME

After a week or so of getting bored of it I wanted more out of it like installing Apps and custom ROMS:

• How about installing apps? I downloaded .vxp apps and try clicking to install… nothing happened!
• Ok so how about making a back up? I downloaded FlashTool v5.1516.00 and tried to make a read back file… no that didn’t work!

Ok something isn’t right?! So I went out and do some research on XDA was it helpful?! no no no well maybe just a bit, points out that there are multiple DZ09 this was expected, ok so lets get to the bottom line, what hardware is my DZ09 packing?!

Hardware Validation

I needed to know the chip in the DZ09 as all the forums was talking plus the seller was advertising MT6260.

Well that’s not right mine is MT6261, ok maybe it isn’t so bad after all.

Hey hey how about Memory how much do we have of that? all the forums was talking plus the seller oh the good old seller was advertising 64MB.

Well that’s not right mine is 4MB, ok maybe it is that bad after all. With that much memory you can’t do anything literally the device is at its max! and all the ROMS out there are not for 4MB!!!

It turns out there are actual clones/fake of clones! and not actual DZ09!

Everything looks good all in all but they are actually using old, outdated and unwanted chips from U8 (right device) smartwatches into DZ09 (left devices) smartwatches you get the look and feel but not the performance and specified specs, But hey you get what you pay for! 37RM including Shipping!

Making The Best Of What I Have

Now that I know what I am dealing with, lets get back to making a back up! do not follow the online tutorial if you are dealing with a piece of hardware like mine, set the read back file to 4MB:

• 0x00400000

Yes Successfully extracted the ROM (4,096KB) and successfully extracted the read back file and generated:

• config_mtk.cfg (3KB)
• EXT_BOOTLOADER (31KB)
• INT_BOOTLOADER (7KB)
• FILE_01_mtk (1,060KB)
• FILE_02_mtk (2,666KB)

Available Download:

• https://github.com/alkathirikhalid/dz09

With the backup at hand I was bold enough and I definitely bricked the device by using the wrong custom firmware which lead me to have a purple ugly screen that the icons seem out of place and of course I restored it back to life! Didn’t I just mention “With that much memory you can’t do anything literally the device is at its max! and all the ROMS out there are not for 4MB!!!”

Well I love the cheap phone watch I currently exclusively use it for:

• Telling time, who am I kidding of course its a watch!
• My third Alarm clock
• External Drive for files (32GB), I paired it with PC via Bluetooth Intend for End of day short notes as its much faster to transfer big files via cable than Bluetooth
• The battery can last me 2-3ish days as its minimum use to tell time only on lowest screen brightness and reduce screen time out

I will find other use for it soon…

C.V.S.S

Certificate verification System Service, a web app for managing certificate issuing institutions.

Introduction

Institutions, Organizations, Employers and even Individuals, can now verify a certificate authenticity coming from the intended institution to the intended candidate, hence preventing forgery, duplication and even outdated certificates.

If you provide certification to any courses or training provided by your company or institution then you are at the right place to preventing forgery, duplication and even outdated certificates in circulation.

The system can also be used to simply offer e-certificates and save on paper.

Aims

CVSS bridge the gap between employee and employer who needs to verify a certificate by allowing institutions to provide minimum information (Candidate First.Last name, certificate id, description and date issued) of a certificate.

Traditionally Employer might call an institute directly but there are barriers such as :

• Weekends

• Public holidays

• Different language

• Time zone

• E.t.c.

CVSS is here to serve all who:

• Have no website

• Rarely update their web sites

• Have no IT background / person

• Provide e-certificates

• Save cost on printing ink and paper

• C.V.S.S. is environmentally friendly

Verification Procedure

Verifying institutes and certificates provider by means such as:

• Registered institution

• Domain name @institute.edu / @institute.org / @institute.com / @institute.*

• Gazette history

• Reputation,

• Address / location

• Call

• Walk in

• e.t.c.

Admin Flow

Member

Allows admins to signup or sign in to CVSS

Fig 1: Member Section

Signup

Allows admins to provide their username, company email and password for account login, a confirmation code will be send to the email provided for verification.

Fig 2: Sign up

Account Activation

Upon signup admin will receive a confirmation code to activate the account. Copy and Paste the code or click the code link to activate your account from the email you received.

Fig 3: Account Activation

Sign In

Admin provide their username and password to access C.V.S.S.

Fig 4: Sign in

Dashboard

Provides admin with information such as last login and last logout time stamps.

Fig 5: Manager Section: Dashboard

Account

Provides admin with information such as account type, dated joined, status e.t.c.

Institution

Provides admin with first time option to set up their institution name and location this information is fixed and can not be changed by Admin.

Certificate

Provides admin with the ability to add the certificates into their institute with the option of either Attended / Complete / Pass remarks on the certificate.

Fig 6: Manager Section: Certificate

All Certificates

Provides admin with a list of all available certificates in their account with the ability to directly edit on any of the certificate ID, Name, Description and Date and also ability to delete a certificate.

Fig 7: Manager Section: All Certificates

Upgrade

Provides admin with the ability to add more certificate volume into their account, the basic free tire is 100 certificates per account per institution.

Fig 8: Manager Section: Upgrade

1. Free Account Max 100 Certificates | 0$ Monthly Subscription
2. Copper Account Max 200 Certificates | 2$ Monthly Subscription
3. Bronze Account Max 300 Certificates | 3$ Monthly Subscription
4. Silver Account Max 400 Certificates | 4$ Monthly Subscription
5. Gold Account Max 500 Certificates | 5$ Monthly Subscription

Need more? contact us: cs@cvss.online

Current subscription price is at reduce price specifically for beta users .

User Flow

Home

The welcoming page allows a visitor to select the Institution they want to assert the certificate is from.

Fig 1: Selecting an Institute

Search

The second screen allows the visitor to input the certificate ID to search for instance 1000101.

Fig 2: Searching for a Certificate

Result

The visitor is present with the certificate information as per the certificate ID

Fig 3: Certificate Confirmation

API Access

The e-certificates can be distributed directly to candidates or added to websites. We will demonstrate base on the test link below:

• http://www.cvss.online/search?certificateid=10001&institution=Institute%20of%20advance%20technology

Get method

Using calling method to the web container to get access of information

• search?certificateid={certificateid}&institution={institution}

• search?institution={institution}&certificateid={certificateid}

Links

Using links to be added to web sites or sent via emails

• http://www.cvss.online/search?institution=Institute%20of%20advance%20technology&certificateid=10001

Badge

Using clickable badges / images to be added to web sites or sent via email

View Certificate

Contact Us

We are looking for institutions to offer the free tire and free consultations, no charges at all, drop us an email at cs@cvss.online

Let us know how we might help you.

Cheers!

Enhanced your Desktop, make it Organized and with functionality built in

So I decided to improve and manage better my desktop as I was getting tired of folders, files and short cuts just lying on the desktop, which was turning out to be unorganized and annoying to my eyes.

Fig 1: Cluttered Desktop with Folders, Files and Shortcuts

Since am into knowing the bandwidth usage for my uploads and downloads the solutions was rainmeter provides “customizable skins, like memory and battery power, RSS feeds and weather forecasts, right on your desktop. Many skins are even functional: they can record your notes and to-do lists, launch your favorite applications, and control your media player – all in a clean, unobtrusive interface that you can rearrange and customize to your liking.”

The initial rainmeter skin is simple and aims at minimalistic features of raimeter, rainmeter itself is free and open source allowing individuals to be creative and create more variation of rainmeter and share with everyone else.

Fig 2: Avengers S.H.I.E.L.D OS Options

My favorite after trying so many is Avengers S.H.I.E.L.D OS which has options allowing you to customize the UI without coding. And the end result for my Desktop is as seen below.

Fig 3: Enhanced Desktop, Organized layout with functionality built in

I can access my applications right on the desktop including launching favorite website by just a click, I can see the ram and CPU usage, and not to mention I can control music right on the desktop as rainmeter integrates with winamp player.

www.alkathirikhalid.com

Thank You.

A Voice In My Hand

This is a speech disorder assistive technology that allows individuals with speech impairment to communicate with their Android Phone. Users with special needs can now communicate comfortably in public areas, make a verbal order, request or introducing themselves has been made easy.

It can be used as a communication aid, a learning tool to pronounce words or simply for entertainment purposes hence much more suitable for users with speech impairment, I have improved its code to handle some aspects such as:-

• Made simple for individuals with low cognitive
• Speech synthesizers voice data detection
• Wider cleaner Screen View
• Tactile feedback
• User Settings

Any further customization can be made possible upon requests, I have also decided to pimp it with a website so it can drive traffic to my app, this is an experimental marketing tactic, all Google analytics are fully functional for the site and app to allow me to deduce my return on investments (ROI), feel free to visit and download the App at www.avoiceinmyhand.com

Fig 1: Main Screen

Fig 2: Settings ScreenFig 3: Main Screen Landscape Mode

It’s been a month now since I built and launched both “A Voice In My Hand” Site and an Android App, it’s time to analyze the collective one month data from both the site and the android mobile app, for best practice it is wise to provide a Privacy Policy for your users both when visiting the site or downloading the App, mine can be found at http://avoiceinmyhand.com/privacypolicy/

Another pointer to add is that some companies or organization will have Privacy Policy for each App or Site or in short multiple Privacy Policy that address multiple applications which in turn leads to 20 plus Pages of Privacy Policy and in turn appears longer, confusing and a lot of users would not bother reading or for some paranoid user would not bother with your product especially if your company is not a Big time company.

The latest approach is to write a general Privacy Policy but it would not hurt to consult a lawyer, the one Privacy Policy is to address all the products and services in general within your company in one Privacy Policy document with precision and direct intent of your company intentions to acquire any data from users through any of it’s products or service. Making it simple would allow more legitimate users to scan or even read through and gain more trust in your company’s products and services.

 

Fig 4: Privacy Policy Page

Now I can deduce the data collected from both the site and the android app, some of the data from the screen will be blanked out for security reasons. Analytics allows an Account holder to have multiple Accounts and within each Account a User can have multiple Properties such as web sites and mobile applications, as seen below I have named my properties in a manner that is easy to distinguish between them by adding “Site” and “App” at the end of each property name, this is my naming convention for each project.

Fig 5: Mobile Analytics

Launched Site date 25th September 2013 to supplement traffic to my app, as seen below the App has had a shoot in the number of downloads all thanks to the creation of the site which directs users to my app, as seen in the image below. This proves to an extend it is crucial to have a site to direct traffic to your app or vice verses.

Fig 6: A rise in the number of downloads

The number of visits to the site is 126 with in the month as seen below coming form a number of sources such as direct, word press, Google search, face book and Google+. This does not necessary reflect the number of downloads of your app as user can also access your app through other means such as with in Google Play, other third party sites that offer reviews and links to Google Play itself. Just remember the site just directs but the actual download takes play at Google Play.

Fig 7: Site visits and sources

These same information can be accessed via mobile device, which provide the same data but in a compact and presentable means not to mention convenient right from your pocket, as seen below:-

Fig 8: Total Site Visits and Location

Fig 9: Total Site visits and sources

Fig 10: Page views and average engagement/visit duration

Fig 11: Traffic sources based on Country

Fig 12: Network Provider

  Fig 13: Number of pages and visits per page at the site

Fig 14: Social traffic Acquisition

Fig 15: Much more data

Lets deduce the App Data collected within the one month durations since both the Site and App has analytics, it allows us to be in the position to separate the two for more precise data, as seen the number of visitors was 126 but only 94 installations are recorded this could be due to that fact that some users phone might not be running Android or the Android Version is not supported, as the App “A Voice In My Hand” only support Android 4.0 and above:-

Fig 16: Number of Active Users

The engagement information is quite useful since it allows us some insight as to when exactly are our users using our apps, this insight might allow us to determine the purpose in my case the App is used for entertainment especially during holidays such as weekends (Sundays) this points to social gathering or relaxing event, there is a portion slot on Monday but this is false Positive as Sunday still continues on other Countries and hence shown as Monday due to the time variation, there is a section on Thursday this could be due to the fact some Muslim Countries holidays or weekends are set as Thursday and Friday, this data will allow me to know when to launch for maximum engagement.

Fig 17: Screen Views and Engagement/behavior pattern

Location data is also useful as it would determine whether or not to support other languages and set localization for your app as the statistics point Spanish language would be a great start for maximum audience.

Fig 18: Audience Location and Sessions

Device type also is useful to determine the test environments for your app or anything else you could think of that Device information can be useful, the 4th last device “Sony Ericsson E10i Xperia X10 Mini” if you notice any device which for instance in this the mini X10 which only can run up to Android 2.1 but our App is Android 4.0, this is a rooted device running on a custom rom, hence if in future as a developer you notice some crushes you can opt to not support such a device as the out come is hardly predictable.

Fig 19: Mobile Device used

Engagement per screen, this data is very useful as in the case some apps have critical data or settings that rarely any user access it the developer might change the layout to make the data more easily navigable, if you compare “Settings” data it is quite low as opposed to the number of views in the “MainActivity” main app, this is because settings are usually set just once and there is actually no need for the user to go to settings every time they open the application.

Fig 20: Number of Screens and Views of the App per Screen  

The Developer console provides more useful information to developers such as whether there were any crashes encountered, as seen below no crash encountered with my app with any device.

Fig 21: Developer Console, No Crashes

Further more recommendation are provided by the Developer Console in my case to design the app for tablets and offer translation to other languages such as German, Spanish and Russian.

    Fig 22: Developer Console providing Tips

I have had a total of 1,870 downloads to date, once you attain a download of above 1000, you as a developer will be receiving a lot of emails invitations from other sites such as

• http://www.appeggs.com/
• http://apps.opera.com/en_my/

For those who are interested in publishing apps with Opera you can go through the link and also check out the User Agreement

• http://publishers.apps.opera.com/docs/Opera-Mobile-Store-Distribution-Agreement.pdf

Not to mention you will also be receiving a lot of spam if you provided your email address, spam such as someone trying to sell you a service or product in the name of improving your app or simply boast or claim they have helped a lot of people and they would like to help you blah blah. If only they understood the power of precise and brief information wins the day.

Due to providing a Site for my App I have accumulated not only more downloads and directed traffic but also raised my credibility as a Software Engineer, due to the fact that my email and name is available for individuals not only on my Personal site but also on “A Voice In My Hand” site and due to this I personally get contacted for freelance job which ranges from:- Ecommerce Systems, Web Sites, Search Engine Optimization, Android App development, Consultation and Training.

www.alkathirikhalid.com

Thank You.

Root, Unlock Boot loader, Flash Custom ROM Jelly Bean 4.1.2 and Over Clock a Sony Ericsson xperia X10 mini Éclair 2.1

This is to demonstrate on how to get more from your old Sony Ericsson Xperia X10 mini, I was somewhat locked down on the amount of things I can do with my old phone since it was running on Android Éclair 2.1 given that it only has a Qualcomm MSM7227, Single Core 0.6 GHz processor, it always seem the right time to root and hack a phone once it’s warranty or usefulness has expired and that is exactly what I did with mine which I bought on mid year 2011 for the sol purpose of Android Apps Development. Note before taking this approach you might brick your phone and also ensure your antivirus and or windows defender is disabled.Rooting a phone is easy these days with a lot of tutorials on how to root a specific Phone, first of all you need to enable debugging in your phone so as you will be in the position to send data and applications to your phone all credits go to http://forum.xda-developers.com/showthread.php?t=1254225 once your phone is rooted you should see super user app in your phone.

Ensure you have Sony PC Companion installed http://www.sonymobile.com/gb/tools/pc-companion/ this will allow you phone to be detectable when Unlocking your boot loader and you should get something like my image below, this will ensure your boot loader is unlocked.

Fig 1: Verifying Boot loader has been unlocked

Once all that is done now you need to flash your custom ROM into your phone I used E10i_JBMP-Release4 since all the hardware has been tested and works smoothly http://forum.xda-developers.com/showthread.php?t=1779745, its fast and smooth until I ended up opening a lot of windows my phone slowed down and hanged, when it happened I was away from my computer and had to wait till the phone battery died since Sony Ericsson Xperia X10 mini has an internal battery, charged it and restarted it again this time changing its settings and over clocking it.

First thing I did was to give super user permission (Root access: Apps and ADB) to Android Debug Bridge so I can send more shell commands directly from my PC to my phone as in the case above When my phone hanged I had to wait till the battery died, with adb command I can easily send a reboot command (adb reboot) to my phone faster than using the phone itself, I can also send Linux core shell commands to my phone over the command prompt such as list (ls).

Fig 2: Giving Root access to Apps and ADB

Fig 3: Testing device shell access over cmd

It’s time to improve performance on the Xperia X10 mini, and here are the following.

1. enable auto install directly into the SD card
2. enable swap files (virtual memory)
3. increase the processor clock speed
4. memory management

But before all that I somewhat dislike cables laying around everywhere so I decided to connect to my phone via Wi-Fi and these are the steps you need to take, having a rooted device comes with it’s advantages, if you are working on big sized applications a cable would be your best choice for speed and data integrity over networks might lead to lost packets. Now you need to understand how adb works such as:

• Emulator 1, will have a console: 5554 and adb: 5555
• Emulator 2,  will have a console: 5556 and, adb: 5557
• And So on

First we need to get super user permission for our terminal (su) then we set the adb service port to as above 5555/5557/5559 “adb port+2” take a pick (setprop service.adb.tcp.port 5555), after we pass this code we need to restart the adb to take effect of our new settings (stop adb) and (start adb), once all that is done we can verify that our settings are working to check just type (getprop service.adb.tcp.port) and it should return the port you set in my case 5555.

Fig 4: Setting device adb service port

You need to know your phone local IP address for your network, you can either get it from the terminal or head to Advance WIFI Settings and grab it from there, in my case it’s 192.168.0.115

Fig 5: Viewing device IP address

Now we need to make our adb server to switch from listening from USB to over WIFI network, I first start the adb server (adb start-server) then check for the number of devices connected (adb devices) which returns an empty list, now we need to connect our adb to our phone (adb connect 192.168.0.115:5555) I didn’t put the port number as by default the port number assigned to the first device is 5555 as I described above, command prompt return connected to 192.168.0.115:5555 and we are good to go. Remember for security reasons if another developer or hacker is within the same network they can connect to your device by just knowing your device IP address.

Fig 6: Connect adb server to phone

If these see settings do not fancy you, you can always revert back on your devices by restarting it or passing:

• su
• setprop service.adb.tcp.port –1
• stop adbd
• start adbd

and from your command prompt

• adb usb

To enable auto install directly into your SD card (adb shell pm set-install-location <LOCATION>) 0: Auto—Let system decide the best location. 1: Internal—install on internal device storage. 2: External—install on external media. and then check (adb shell pm get-install-location) you can access your device shell directly from your command prompt since we have super user (Root access: apps and adb) and are connected and the result is 2 which means external, bare in mind not all apps should be moved to the SD card as it might not be available when mounted/connected to the PC apps that need to run all the time should be left in your internal storage.

Fig 7: Getting device install location

Now lets enable swap file (virtual memory) to allow our phone to use part of the External storage as RAM, head to JBMini Settings and select Swap Settings, enable it and select your desired swap size in my case 128MB will do just fine.

Fig 8: Setting Virtual memory

Now let’s over clock our Qualcomm MSM7227, Single Core 0.6 GHz processor you need to head to Settings > Performance > Processor, I first set my Maximum CPU frequency at 0.806 GHz and things started going south and by my bad luck I checked the Set on Boot Option which means the system just keeps going back to the same problem, the phone froze restarts the battery indication is red even though its full charge in short the phone was not functional (word of caution ensure set on boot is disabled/unchecked before making any first attempt changes) I had to flash the custom ROM again. This time I set the Maximum CPU frequency at 0.710 GHz and the CPU governor ONDEMAND and Under volt the CPU to improve battery performance.

Fig 9: Over clocking CPU speed

Now for memory management I set zRam to compress memory for increase virtual capacity by 18% which is the default value, too much will stress the system on compressing and decompressing memory, allow purging of assets and kernel same page merging.

Fig 10: Memory Management and Compression

You may also desire to change the Background process limit to At most 3 from  Standard limit, within your Developer Options, this is not necessary it all depends on what applications you are going to develop.

Fig 11: Limiting background process to at most 3 processes

and wow an increased of speed and usefulness on a tiny device with restricting hardware has been achieved!

www.alkathirikhalid.com

Thank you.

My Guestbook App

I am going to build a bottom up guestbook application to store all my guest list for an up coming event, host it in a local network for all the local machines to have access to the application.

The steps taken to build up  the application are: a) creating a MySQL database using MySQL Workbench, b) then forward engineer the EER (Enhanced Entity Relationship) diagram to MySQL workable code and execute it to propagate the desired database with its tables, c) using the Netbeans IDE to build up the web application, d) creating entity classes to interact with the database, e) creating java server faces to interact with the entity classes, f) CSS buttons to keep the application clear of heavy images hence keeping the application size compact and loading time optimal.

Fig 1: Netbeans 7.2 IDE

Since running MySQL as a service takes up resources on start up, I have disabled it hence MySQL is initialized only when needed, as seen above I right click and start the administration tool to bring up MySQL workbench.

Fig 2: MySQL Workbench

Within the Workbench click on “Create New EER Model” to get started to draw the enhanced entity relationship  diagram, depending on the complexity of your application you might use a table or multiple tables for your application.

Fig 3: MySQL Model

Click on “Add Diagram” to get started and follow up on the next image.

Fig 4: Create an EER Diagram

Double click or click and drag the table icon from the left into the drawing sheet, the whole creation process is drag and drop from the tools bar into the drawing sheet.

Fig 5: Build a table(s) with column and set it’s attributes

Creating the columns is a breeze with all its attributes, you may have multiple tables as desired but for a one table application ensure a column is selected as a primary key so as to be in the position to create the entity classes later on, and also to allow the application to grow in the case when another table is added to the schema.

Fig 6: You can insert data manually into the EER Diagram

Click on insert on the bottom, for practical reasons I will skip the insertion of data directly into the database and insert them through the application once it’s built in order to test and see the workings of the application, a good example would be to see and test it’s validation before importing all data into the database.

Fig 7: Completed Enhance Entity Relational Diagram

Once your table/s are ready with all the primary and secondary keys incorporated, click on “Database” and select “Forward Engineer” to transform your diagram into workable MySQL code.

Fig 8: Forward Engineering Settings

Always choose to “Drop Objects Before Each CREATE Object” so as to be in the position to reuse the same MySQL code in the case when the database needs changes specifically an update, that way your script will be in the position to run or override and implement changes to an existing database.

The next step would require your MySQL server to be running, ensure it is running before clicking next.

Fig 9: Forward Engineer to Database process completed successfully

After the step is complete, you can close the MySQL Workbench and head back to the Netbeans IDE, the first part is complete, we have created our database and it’s table/s. Now we continue building the rest of the application.

Fig 10: Our new Database is ready

In Netbeans click on services and then click on the database to verify the tables were created from the Forward Engineering process, as seen above all seem well.

Fig 11: Build your Web Application

Click on new project, select Java web and then select Web application as seen in the above image, and then click next.

Fig 12: Java Web Application Structure

The Netbeans IDE generates the java web application with it’s codes, since the data we require should be populated from the database there is nothing much we need here except for recreation purposes to make the application more appealing, now lets fix the connection.

Fig 13: Selecting the Database connection for the application

Create the data source that would be use by the application to pull up the data from the database in order to populate the page views.

Fig 14: Generate the entity classes

Here we generate the entity classes that will interact with the database.

Fig 15: Generate the entity classes

Fig 16: Generate the entity classes

Fig 17: Inserting testing data

Fig 18: incorporating CSS Buttons to minimize heavy image use

Fig 19: Running the Guestbook Application

Fig 20: The application lists the guest data

Fig 21: Inputting data to test AJAX validation

Fig 22: Validation working as expected

Fig 23: Inputting further data into the application

Fig 24: Application accepts data

The application is in order, all is left is clean and build the application and deploy the war file, since am on a local machine the application is accessible through glassfish with in the same network, external accessibility can be achieved by installing DYNDNS updater or having a dedicate IP and port forwarding the router to the glassfish server on port 80, before doing so you would need to secure the application by creating a login page.

Thank You.

www.alkathirikhalid.com

Simple Cart

Simple cart is an open source java script cart application that exclusively work on the client side which then connects to a payment gateway like PayPal or Google wallet depending on the developers choice, yes ecommerce in minutes!

“No databases, no programming, no headaches. A simple javascript shopping cart that you can setup in minutes. It’s lightweight, fast, simple to use, and completely customizable. All you need to know is basic HTML.”

I am going to implement Simple cart to build up a simple one page shopping cart application that would allow users to pay via PayPal, the application will comprise of a CSS file, a favicon, an index page and of course a SimpleCart.js

This simple one page can be used as a template and replicated as many times as possible depending on a developers needs, all image files will be hosted externally from other location such as website/FTP server, for this example I am extracting all test images from my Google Drive.

Fig 1: Directory structure without any images

The directory structure as see above is quite simple and unique, the  CSS file will implement the the overall page layout, colour, fonts and CSS background images only while the index page will exclusively be dealing with the products extracted from Google drive.

Fig 2: Extracting image URL from Google drive

As seen above individual URL for each image is randomly generated by Google drive and they differ from the page URL (page URL and image URL). To get the image URL right click the image and select “Copy image URL”, implement this URL into your HTML code for ever image source.

N/B Mind the URL https://docs.google.com once the upgrade takes place to the new URL https://drive.google.com the enhanced security applies and this method won’t work.

There is a another method of which you can extract the image links by making use of Google Sites under Attachments, where you can get individual links to images in the cloud.

Fig 3: Complete application with dummy swappable items 1-8

Fig 4: Adding items to shopping cart

Fig 5: Connecting to PayPal for payment processing

www.alkathirikhalid.com

Thank You.