How To Make FloreantPOS for Mobile

Posted on

How To Make FloreantPOS for Mobile

Objective:  To access FloreantPOS on a tablet or smart phone without having to install any complex or proprietary software.

For this tutorial we assume you’re using Ubuntu Linux.

STEP 1: INSTALL FloreantPOS 

Installing FloreantPOS is only a matter of copying a folder and provide a Java Runtime Execution Machine.

  1. Download and install JDK 8 from http://www.oracle.com
  2. Download the latest FloreantPos archive from http://floreant.org/download/
  3. Extract floreantpos archive into “/home/floreant/Desktop/active_floreantpos”

STEP 2: SET UP FloreantPOS AS A WEB Application

The secret sauce is Webswing.  It’s an open source, HTML5-only (no non-web technologies) web server that serves Java swing apps directly to the web.

Since FloreantPOS is a Java app that uses Swing for its UI, there’s not much to it than that!

The goal:  Make FlorantPOS a “web app” that can be accessed via HTTP on any device!  That is, ANY phone, tablet, PC, or whatever– with a modern web-browser should be able to use this web app.

All they need is the URL and a username/password.  These web apps versions are able to run together simultaneously with traditional FloreantPOS devices.  For lightweight/inexpensive touch devices, it just a lot easier to point a browser at a server rather than installing a full installation of FloreantPOS, which may not be possible.

Webswing is pretty great– it integrates printing, clipboard, administrator “mirroring”, SSL, etc.

To set up Webswing requires minimal computing skills.  No special programming is required.  Just basic installation and file-editing skills.

So, here’s what you need to do…

NOTE:  For this example, I have a username of “floreant” so my installation of floreant is in /home/floreant/Desktop/active_floreantpos– in the instructions below, you should change floreant to whatever your Ubuntu username is.

  1. There are a few dependencies you want to make sure you have installed.  Some of these will already have been installed when you ran my floreant_updater.sh script, but just be sure you have the rest by typing this command (this requires root permissions):
    sudo apt-get install xvfb libxext6 libxi6 libxrender1

    (I think this is all the packages.  Hopefully I didn’t miss any but will update these instructions if I did.)

  2. Download a recent 2.4 build of Webswing, and unzip it to your Desktop to a folder you should call webswing.
  3. Inside, there’s a file called webswing.sh.  I had to make a few modifications to get this to run “headlessly” by adding this to the top:
    export DISPLAY=":0.0"
    
    # Start Xvfb
    if [ -f /usr/X11R6/bin/Xvfb ]; then
    /usr/X11R6/bin/Xvfb :1 -screen 0 1024x768x16
    fi

    Next, change the HOME variable to look like this.  Change floreant below to your username.

    export HOME=/home/floreant/Desktop/webswing

    Finally, comment out with # (or remove) the following lines.  They didn’t seem to work for me and everything worked still worked without it.  They start with:

    if [ ! -z `command -v ldconfig` ]; then

    and end with

    fi
  4. Now that the start.sh script is ready, let’s add floreant to the list of apps via webswing’s Web Interface.  To do this, simply type:
    sh start.sh start
    
    

    Now from any computer on your local network, go to a web browser and visit your Ubuntu device’s IP address on port 8080 (the default).  For example, if your Ubuntu machine is at 192.168.1.100, you would type http://192.168.1.100:8080 into your browser.

    Hopefully you will be greeted with a login.  The default username is admin and password is pwd.  You should change this at some future point.

    If you have problems logging in, again you can refer to here.  If start.sh crashes, check the script– you may have commented out the wrong lines (?)  Or perhaps there is a dependency missing that you still need to install.  Review the documentation for clues.

    Assuming you were able to log in, you can now follow the instructions on Webswing’s Quick Start Guide for how to add FloreantPOS as a web app.

    To help you with this, here are the relevant settings that were added to my webswing.config file after I added floreant.  You can use these values, but don’t forget to change floreant to your own user name.

    .....
     }, {
     "name" : "Floreant",
     "icon" : "/home/floreant/Desktop/active_floreantpos/config/logo.png",
     "vmArgs" : "",
     "classPathEntries" : [ "/home/floreant/Desktop/active_floreantpos/floreantpos.jar", "/home/floreant/Desktop/active_floreantpos/lib/*jar" ],
     "homeDir" : "/home/floreant/Desktop/active_floreantpos",
     "theme" : "Murrine",
     "maxClients" : 20,
     "antiAliasText" : true,
     "swingSessionTimeout" : 300,
     "authorization" : false,
     "isolatedFs" : false,
     "debug" : false,
     "authentication" : false,
     "directdraw" : false,
     "allowDelete" : true,
     "allowDownload" : true,
     "allowUpload" : true,
     "allowJsLink" : true,
     "mainClass" : "com.floreantpos.main.Main",
     "args" : ""
     } ],
     ....

    Again, I am using the default installation directory ~/Desktop/active_floreantpos which is created by my script.

  5. When everything is properly set up, you should be able to log in via http://192.168.1.100:8080 and FloreantPOS will appear as an option which you can then run directly from the browser.
  6. Once you’ve got it all ready, you can customize the settings such as add SSL for secure browser connections, create a dedicated page to automatically start with FloreantPOS rather than go through the app menu, adjust the screen size in start.sh (that is, /usr/X11R6/bin/Xvfb :1 -screen 0 1024x768x16) to better reflect the size of the tablet or virtual machine you want to use, etc.

STEP 3:  USE A DEDICATED ANDROID APP TO ACCESS FloreantPOS

While you can now simply access http://192.168.1.100:8080 from a browser on your phone to access FloreantPOS, you will run into a few issues:

  • The URL bar at the top of the browser is kind of annoying and takes up valuable screen space.
  • The browser may or may not permit pinch-zooming and may not be scaled properly so that you get the full app on the screen.  You don’t want to have to slide your finger around everywhere to center the app or to find the area you want to touch.  That sucks.

Solution:  Implement a custom Android app to:

  1. Present a full-screen WebView and load it with the Floreant Web App.  Don’t include a URL bar, menu bar, or any other “bells and whistles”  Just start and immediately present it with the interface.
  2. Automatically scale it to “full screen” so that you get the whole page scaled to the dimensions of the tablet/phone.  Don’t allow scrolling or anything.

CAVEATS:

  • I have not tested to see how well this scales or performs under any kind of load.
  • The above does not use SSL or encryption of any kind across the network.  SSL is available in webswing however.  I just didn’t play with it yet.
  • This example uses default passwords.  You want to change those!
  • My changes to start.sh are probably not always needed and certainly not complete as Xvfb is never killed so multiple versions may hang around. There’s probably a better solution, but these steps are just what I did quickly to get a proof-of-concept going