Modified Android UI

Show & Tell
#1

For the past week and a half, I yanked the kegbot-android code from Git and learned how to program in Android. It took a while to get my head around how the layouts worked, the difference between taps/kegs/pours, activities, fragments, etc… The purpose was to build a prettier UI that would really show off the kegbot.

I ended up setting up a local SVN repository to track code changes, because I was unable to figure out how to make a local Git repository/server. I didn’t really want to fork the online repository since the code was hacky (I’m a complete n00b) and it was customized mostly for myself. For example, I broke the tap rotation functionality because I only have 1 tap and 1 keg, and intended to add a second tablet+kegbot if I ever decided to add a second tap+keg. If anyone wants the code, I could still make it available.

Added New UI layout with

  • Tap Status and Pour Status merged
  • Tap Images moved to background
  • Added Progress Bar to visually show remaining beer
  • Added portrait layouts

Added
+/- buttons to simulate a “fake pour” (This is because my keg is half empty already, and I need my new kegbot to “catch up” and show how much is really remaining. The buttons on the Android UI only show up when you disable the camera, and are only for debug/initial setup)

Broken

  • Multiple Taps and Tap Rotation (was intending to always have one tablet per tap)
  • Retrieving Tap Images from server (since this was using local Android DB, the images are hardcoded for now)
  • System Status is removed (I am usually the only one drinking from the tap, so I didn’t need a history displayed)
  • The layouts I produced are tailored for 1280x800 (Iconia A210) and are not suited for much lower resolutions than that.

Future work

  • Ability to load background images from Android disk
  • Setup and hook up to a kegbot server so that the camera images and history are stored somewhere and can be viewed
My Show & Tell (New GUI, hardware and software tweaks...)
#2

test4l.png1296×839 977 KB
test5l.png1296×839 887 KB

#3

Nice work and thanks for sharing the pics. It does give an improved look. Keep us posted on any other updates you make.

#4

test4p.jpg800×1280 606 KB

Thanks! I actually like the portrait view better

1 Like
#5

Nice work. Using git locally is quite simple compared to SVN. Git is distributed, thus requiring no servers. Once you git clone from github you can commit changes locally all you want, no need for a server (unlike svn).

#6

Looks awesome! How much manual programming went into setting up each keg, or is there a good data feed for images and descriptive info? I usually have to google and crop things myself and often don’t get data that looks that good.

Could some aspects of the UI changes that are less hacky be committed back into the official repo? I know Mikey and crew have left a lot of breadcrumbs about what might be coming but I’m not sure how much time they have to work on this, and I’d LOVE to see some of these items implemented.

#7

RE: The Git server-
Is the repository as simple as sharing a directory? I want to be able to access the repository using multiple computers on my local network, but not shared with the outside internet.

RE: Committing the code-
I think because some existing functionality is broken on purpose, I may have to commit everything as a fork, although I don’t know how to use Git. Remember, things like the vertical progress bar have replaced the new user registration and system status (pour history). The rounded rectangles are darker, with less alpha, so that the gray text can be read against a textured background. Images are retrieved from res/drawable, and not from kegbot-server. These are all things not everyone would want. I totally don’t mind sharing the code, and perhaps someone can make all these things configurable on/off.

I have completed and fixed up Tap Rotation though. Now scrolling through the taps will update the progress bar for the correct tap, as well as update both background images. For this code to go public, I would still need to implement local image loading on the Android, and then assign the two backgrounds to a tap via a lookup table. Right now to change the images you have to go into res/drawable and update 0a.png 0b.png for tap 0, 1a.png 1b.png for tap 1, etc…

RE: Setting up each keg-
I went to my local brewer website http://gib.ca/beer/cypress-honey-lager, did some element inspection via Firefox/Chrome, and moved/resized some elements around, and deleted all <div> nodes I didn’t care about. Took a couple hours to get the hang of getting everything fitting into the right resolution. But most brewery websites have similar layouts (e.g. http://lefthandbrewing.com/beers/milk-stout-nitro), so it shouldn’t be too hard to find content to fill a 640x640 square within an 800x800 background. Kegs don’t change very often in my home, so I don’t expect to do this often.

#8

Would you say the 1280x800 resolution are pretty standard for older tablets? I’m curious if your modified code would work with an Asus TF101 circa 2013.

#9

I think most tablets are at least 1280x800, but I’m not very knowledgeable on android stuff. Asus TF101 is 1280x800 and should work.

Likely if the tablet is 7" and some no-name China brand, it’ll be a terrible resolution like 800x600.

I’ll try to publish the code on Github soon, after I polish up the Local DB Temperature monitoring, figure out Git, and compile some instructions/release notes

#10

I would love to do this. Did you publish it on Github?

#11

No I forgot about this. I’ll try to do it sometime this week.

1 Like
#12

I’ve finally found my repository from my backups, and pushed all my code to github, but haven’t tested the compilation with the latest Android Studio and Gradle.

Expect some updates to this code soon to fix compilation errors like “wrong gradle version” and stuff like that.

What would you like to see next?