@flatstack blog

Each project was outlined and discussed with a number of helpful Flatstack staff being directly involved or providing guidance and advice. Teams then spent the day developing their projects 'in secret’, driven by pride, dedication, knowledge, coffee, and a mountain of the finest pizza. The final results were presented to the company at the end of a very long day.

During this period we had some incredibly interesting projects, including a lovers 'touch me’ button, the age old game of Rock-Paper-Scissors, a plugin for Sketch, and a helpful Dashboard for Project Managers to use.

There are quite a few more projects we would like to share with you but we’ll keep those for another post. For now, we have included a few teaser videos so you can get a good idea of our ideas!

ClubWorx makes it easy for you to start up or grow your PT studio, gym, health club, CrossFit Box or martial arts dojo, so you can make more money and get back to doing what you love.

Manage prospects, clients, memberships, timetables, payments and more with one easy-to-use online system.

Customize the application to suit your business in just minutes without paying for features you don't need.

Included free: a branded website to capture leads and manage online bookings.

A background image as a basis.

A random title taken from the record of certain model.

Logo of the web-service.

To achieve the goal I decided to use gem "rmagick". RMagick is an interface between the Ruby programming language and the ImageMagick and GraphicsMagick image processing libraries. It is a great tool in case you need to manipulate graphics from the code side. We are going to take an advantage of some cool features implemented in this gem.

So, let me get straight to the point. First of all, I have added gem "rmagick" to my Gemfile. Then, told Rails to install the new gem:

bundle install

Let's analyze what we're going to do before jumping into the code. Basically, we have two options for drawing something on the image: place some text on canvas and impose images surfaces. At first sight, the best solution is to construct a service that contains two actions for each mode of drawing. My new class is being instantiated in the following way:

class WatermarkedBackground BACKGROUND_PATH = "/path/to/background.jpg" attr_reader :text, :annotation, :logo private :text, :annotation, :logo def initialize(text, logo_path) @text = text @annotation = Magick::Draw.new.tap do |text| text.font = "Helvetica" text.pointsize = 60 text.font_weight = Magick::BoldWeight text.fill = "black" text.gravity = Magick::CenterGravity end @logo = Magick::Image.read(logo_path).first end def perform draw_text append_picture save_image end private def draw_text annotation.annotate(background, 0, 0, 0, 60, text) end def append_picture background.composite!(logo, 420, 20, Magick::OverCompositeOp) end def save_image background.write("/path/to/generated_image.jpg") end def background @background ||= Magick::Image.read(BACKGROUND_PATH).first end end

Let's take a look at what we've done here.

The first action draw_text prints our random content in the center of 'background.jpg'. The base player of this action is annotate function. It takes six arguments:

the image you want to annotate

the width and height of the rectangle for the positioned text

the two arguments are offsets for x, y axes respectively

the last one is the text for the annotation

I configured width and height are equal to zero. It indicates that the whole image should be used as an annotation area. The attribute gravity points out the position of text inside rectangle. In my case it is the center of rectangle. Also, I specify the font, the text color, size, and other properties of the text in initialize method.

The second action append_picture gives us the ability to blend two pictures into a single image. The main part here is composite! function. To push it into the work we should define four arguments. Three of them are pretty obvious: source image, x- and y- offsets relative to the upper-left corner of the background image. The last argument is a little bit tricky. It is associated with algorithm used to compose the first image with the second. The number of options is about 60 variants. You can review here documentation to figure out which one fits you best.

The last action save_image saves prepended image and automatically converts it to the extension that we specify. The call of

WatermarkedBackground.new( "The quick brown fox jumps over a lazy dog", "/path/to/logo.png" ).perform

gives me the desired result.

After I have dotted the i's and crossed the t's it's time to ask: Is this the best way to organize the code? Unfortunately, not. Now I have single class that contains the both behavior and configurations for the image generation. However, a class should do the smallest possible useful thing; that is, it must not violate a single responsibility principle. It would be difficult to test actions of my class in isolation of the text properties. I'd have to stub too many methods.

So it makes sense to separate the configurations for the annotation text in the independent class that is wrapped the RMagick standard action annotate, as shown bellow:

class TextImage attr_reader :text private :text def initialize(text) @text = text end def annotate(*args) draw.annotate(*args, text) end private def draw Magick::Draw.new.tap do |text| text.font = "Helvetica" text.pointsize = 60 text.font_weight = Magick::BoldWeight text.fill = "black" text.gravity = Magick::CenterGravity end end end

And class can be rewritten in the following way.

class WatermarkedBackground BACKGROUND_PATH = "/path/to/background.jpg" attr_reader :logo, :text, :background private :logo, :text, :background delegate :write, to: :image def initialize(text:, logo_path:) @text = text @logo = Magick::Image.read(logo_path).first @background = Magick::Image.read(BACKGROUND_PATH).first end def image @image ||= text.annotate(composited_background, 0, 0, 0, 0) end private def composited_background background.composite(logo, 420, 20, Magick::OverCompositeOp) end end

As you see I decoupled my code and reduce dependencies. This polishing allows me to remove the responsibility for some of RMagick methods. No need to stub them for the testing WatermarkedBackground anymore. It is substituted by only one responsibility TextImage which can be easily reused without duplication.

WatermarkedBackground.new( text: TextImage.new("The quick brown fox jumps over a lazy dog"), logo_path: "/path/to/logo.png" ).write("/path/to/generated_image.jpg")

Check out the result of my work here. Nevertheless, RMagick has a bunch of cool features. They can be found at their official web-site.

It comes in handy for a few things such as an aggregating search, and a phonetic search that returns results when a user tries to find a misspelt word. Also Elasticsearch has a convenient gem "elasticsearch-rails". It provides tools that solve some common problems and has a bunch of syntactic sugar. The installation process is not in the scope of this post, but you can install the gem following the instructions from the official github repo.

In this short article I want to share my experience of writing tests for Elasticsearch in our application. Before we start, it is important to highlight that we have only one model for the index (Trademark), but this code can be easily extended.

First of all, I was adding Trademark.import(force: true, refresh: true) to all examples that are related to Elasticsearch. It solved the problem associated with cleaning state between particular tests and refreshed the index manually. I have added this line to before block. Now let’s take a look at some sample unit test:

describe SearchTrademarks do describe "#results" do let!(:trademark) do create( :trademark, serial_number: "213141" ) end let(:search) { described_class.new(query: query).results } before do Trademark.import(force: true, refresh: true) create(:trademark, serial_number: "333") end context "when query matches with serial number" do let(:query) { "13" } it "returns particular trademark" do expect(search.first).to eq(trademark) end end end end

Then my setup was working great until I realized that one problem is still there. Every time I had launched the test suite, It would reindex my test database and all data from the developing database got lost. When I returned to the development I had to reindex my development database again. It can become a bit tedious after a while.

To solve this I decided to use gem "elasticsearch-extensions". It allowed me to programmatically start and stop an Elasticsearch cluster suitable for isolating tests. In order to avoid conflicts with development Elasticsearch cluster I used another port (by default it is 9200). It can be easily implemented by changing my rails_helper.rb to:

# After other requires require "rake" require "elasticsearch/extensions/test/cluster/tasks" config.before(:all) do if use_test_cluster? Elasticsearch::Model.client = Elasticsearch::Client.new(host: "localhost:9250") Elasticsearch::Extensions::Test::Cluster.start(port: 9250, nodes: 1) end end at_exit do if Elasticsearch::Extensions::Test::Cluster.running?(on: 9250) Elasticsearch::Extensions::Test::Cluster.stop(port: 9250) end end def use_test_cluster? !Elasticsearch::Extensions::Test::Cluster.running?(on: 9250) end

I enjoyed the process of getting this problem resolved and pushing the code to semaphoreci (we use this service as a continuous integration tool). But suddenly the tests started failing! It was because semaphore knew nothing about the strange hostname called “localhost”. To be honest, in CI we do not need the test cluster for Elasticsearch at all. The question is, how can we launch a test suite on semaphore without the test cluster and use it for the local environment at the same time?

My implementation is laughably simple. I have created an environment variable named “CI”. If it exists I do not run the test cluster. Thus, we should reinforce conditional from use_test_cluster? by adding an extra clause:

def use_test_cluster? !ENV["CI"] && !Elasticsearch::Extensions::Test::Cluster.running?(on: 9250) end

Link with discussion on that theme.

We need:

Main activity to manage fragments;

Base fragment to make our lives easier;

Event bus.

I am going to show only key pieces of code. You can find the whole project on github

MainActivity

contains logic for fragment management.

public class MainActivity extends ActionBarActivity { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); Bus.subscribe(this); // ... } private void replaceFragment(FragmentTransactionEvent transactionInfo) { if (transactionInfo.isClearBackStack()){ clearFragmentBackStack(); } FragmentTransaction ft = getSupportFragmentManager() .beginTransaction(); if (transactionInfo.isAddToBackStack()) { ft.addToBackStack(null); } ft.replace(R.id.content_frame, replaceIFragmentInfo.getFragment()); ft.commit(); } private void clearFragmentBackStack() { getSupportFragmentManager().popBackStack(null, FragmentManager.POP_BACK_STACK_INCLUSIVE); } public void onEvent(FragmentTransactionEvent transactionInfo){ replaceFragment(transactionInfo); } @Override protected void onDestroy() { Bus.unsubscribe(this); super.onDestroy(); } }

What is FragmentTransactionEvent? It is a class which stores info about fragment replacement: what fragment will be shown, does it need to clear the backstack, does it need to add a new fragment to back stack (you can add more). ##FragmentTransactionEvent

public class FragmentTransactionEvent { private final Fragment f; private boolean addToBackStack, clearBackStack; private FragmentTransactionEvent(Fragment f){ this.f = f; } public static FragmentTransactionEvent with(Fragment f){ return new FragmentTransactionEvent(f); } public FragmentTransactionEvent addToBackStack(){ this.addToBackStack = true; return this; } public FragmentTransactionEvent clearBackStack(){ this.clearBackStack = true; return this; } public void emit(){ Bus.event(this); } // getters }

##Base fragment class:

public abstract class BaseFragment extends Fragment { protected FragmentInfo fragmentInfo; protected abstract @NonNull FragmentInfo getFragmentInfo(); @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); // here we can use some fragment fragments injector, // for example fragmentargs setHasOptionsMenu(true); } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { // here we can call butterknife inject return inflater.inflate(fragmentInfo.getLayoutId(), container, false); } @Override public void onResume() { super.onResume(); getActivity().setTitle(fragmentInfo.getTitle()); // set action bar home icon and behaviour ((ActionBarActivity)getActivity()).getSupportActionBar() .setDisplayHomeAsUpEnabled(fragmentInfo.getHomeBtn() == HomeButtonAction.BACK); } @Override public void onCreateOptionsMenu(Menu menu, MenuInflater inflater) { super.onCreateOptionsMenu(menu, inflater); inflater.inflate(fragmentInfo.getActionBarMenuId(), menu); } // here we implement back button behaviour @Override public boolean onOptionsItemSelected(MenuItem item) { if (item.getItemId() == android.R.id.home) { if (fragmentInfo.getHomeBtn() == HomeButtonAction.BACK) { getActivity().onBackPressed(); return true; } } return super.onOptionsItemSelected(item); } public void startFragmentForResult(Fragment current, Fragment newFragment, int requestCode) { newFragment.setTargetFragment(current, requestCode); FragmentTransactionEvent.with(newFragment).addToBackStack().emit(); } /** * @param data passed in onActivityResult of target fragment * @param resultCode */ public void setResult(Intent data, int resultCode) { getTargetFragment().onActivityResult(getTargetRequestCode(), resultCode, data); } } class FragmentInfo { private @StringRes int title = R.string.empty; private @LayoutRes int layoutId; private @MenuRes int actionBarMenuId = R.menu.empty; private HomeButtonAction homeBtn = HomeButtonAction.ICON; public FragmentInfo(@LayoutRes int layoutId){ this.layoutId = layoutId; } // getters, chaining setters }

FragmentInfo variable stores information about layout, title and action bar buttons (home and actions. Note! I use new toolbar as actionbar, probably it would not work with old action bar).

Only layoutId is the required field, other ones have default values. For example, if you don’t set title then fragment will be instantiated with empty title. starfFragmentForResult is method that duplicate startActivityForResult behaviour. Your can use onActivityResult built-in method in the same way you do it for startActivityForResult to catch result data from startFragmentFroResult. Child classes need to implement getFragmentInfo method to provide information for fragment creating.

App skeleton is done. Now, we can use it. Let’s create

InitialFragment

public class InitialFragment extends BaseFragment { @NonNull @Override protected FragmentInfo getFragmentInfo() { return new FragmentInfo(R.layout.initial_fragment) // single textView .setTitle(R.string.hello_world) .setActionBarMenuId(R.menu.menu_main); }

It’s enough to implement getFragmentInfo method to make fragment work. Usage example:

FragmentTransactionEvent.with(new InitialFragment()).emit();

You can call it from any place. Event bus is used for passing info into MainActivity. Let’s modify InitialFragment and look how to use startFragmentForResult:

public class InitialFragment extends BaseFragment { public static final int TYPE_REQUEST_CODE = 1111; String someText = "initial fragment aha"; @NonNull @Override protected FragmentInfo getFragmentInfo() { return new FragmentInfo(R.layout.initial_fragment) .setTitle(R.string.hello_world) .setActionBarMenuId(R.menu.menu_main); } @Override public void onViewCreated(View view, @Nullable Bundle savedInstanceState) { ((TextView) view.findViewById(R.id.text)).setText(someText); } @Override public boolean onOptionsItemSelected(MenuItem item) { switch (item.getItemId()) { case R.id.action_type: startFragmentForResult(this, new TypeAndReturnFragment(), TYPE_REQUEST_CODE); return true; default: return super.onOptionsItemSelected(item); } } @Override public void onActivityResult(int requestCode, int resultCode, Intent data) { if(resultCode == Activity.RESULT_OK && requestCode == TYPE_REQUEST_CODE){ someText = data.getStringExtra(Constant.DATA_STRING); } else { super.onActivityResult(requestCode, resultCode, data); } } }

Note, that onActivityResult is called before onCreateView. ##TypeAndReturnFragment public class TypeAndReturnFragment extends BaseFragment {

EditText editText; TextView okBtn; @NonNull @Override protected FragmentInfo getFragmentInfo() { return new FragmentInfo(R.layout.type_and_return_screen) .setHomeBtn(HomeButtonAction.BACK) .setTitle(R.string.type_me); } @Override public void onViewCreated(View view, @Nullable Bundle savedInstanceState) { editText = (EditText) view.findViewById(R.id.edit_text); okBtn = (TextView) view.findViewById(R.id.ok); okBtn.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Intent intent = new Intent(); String data = editText.getText().toString(); intent.putExtra(Constant.DATA_STRING, data); setResult(intent, Activity.RESULT_OK); getActivity().onBackPressed(); } }); } }

This fragment just takes EditText content, wraps it in Intent and pass it back to the target fragment (in this case to the InitialFragment).

type_and_return_screen.xml

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

##Conclusion Here is the skeleton app which allows to easily start with one activity many fragment concept.

 I had the pleasure of speaking with founder Dave Sick, and he provided some great insight into why he created it, and his plans for the future. Check out the interview below:

Founder Dave Sick

What was the inspiration behind Trail See?

I moved around a lot when I was a kid,  and always loved being outdoors and hiking and trying to find trails. But it was always sort of an insider scoop to try and find the fun trails to hike or bike.

Almost 20 years ago I moved out to California to the bay area, but it was still an insiders network. You might be able to find the start of a trail, but would maybe get lost and end up in someone’s backyard or down some steep area that you’re gonna have to hike out of. I knew there was always a better way, and with the advent of the iPhone and online mapping, I was kind of waiting for Google or Strava to kind of tackle this problem.

But nobody really came up with something to give you good directions. I moved to Tahoe 8 years ago, and this place is just a mecca of trails, but with the same system. You have to go on a hike with someone, or go on a mountain bike ride with someone, and again you wouldn’t be able to find your trails.

The tipping point was about 2.5 years ago, I was biking a new trail myself, and was just about to the point where I was going to turn around and go back because I couldn’t make out the last part of the trail. There was a lady with a printed map, an app, and written directions from an email. And she said “I have all this stuff, and I have no idea where I am”. And I’m like “And neither do I”.

I figured that the problem was trail maps mostly have sort of the main path that people go, but as trails evolve over time, there are all these different intersections. And it was really at the intersection where you would get lost. Because you would see one on the map, but it may be the third or fourth one, and there are really three or four more that really aren’t documented.

So creating an app that would actually, you know, every time you hit an intersection, whether it was a legal or illegal trail you’d know I have to go straight, right, or whatever. And actually creating an app that would allow you to create those directions, as well as allow you to play them back more like navigation, gps style for cars, and I worked with Flatstack to build that test version.

I had some people do some of the trails that took me years to figure out, and they were able to do them the first time no problem, and didn’t get lost. It kind of demystifies trails. People that aren’t good with directions, it works well for them. It kind of goes back to the tagline, “explore with confidence”. The other side objective was to allow you to not just do the same old trail that’s close by, or the one you’ve memorized. You can actually go and see all that the world has to offer with all of these great new trails. So that’s the background, and sort of the emphasis of why I tried to put this app out there.

What other areas are coming next, and how do you plan on expanding?

So we kind of finished the app at the beginning of winter, and that’s when the trail season sort of quiets down. My plan is to really work with some different contractors to help me get better coverage, kind of in the greater Lake Tahoe area. Which will have Reno, south Lake Tahoe, and maybe some of the foothills, and really try to sort of get that model of how much is it going to cost me to get good coverage.

And then I’m going to do some marketing and user generated trails. And I added advertising and subscriptions to test all of that out. So I’m going to do a very targeted pilot in the greater lake Tahoe/Reno area. And I’m probably going to add one more town outside of that area, but I haven’t quite figured out where that’s going to be.

But it will probably be somewhere out west, maybe southern California, or Arizona, something like that. Just to kind of test the model outside of my home base. I’m really just seeing if i can profitably expand coverage, that also sustains the cost to get that out there.

Do you think user generated trails are going to be what generates the fastest expansion, or will it be the other way - working with contractors to get some better coverage that way?

Hopefully they have Trail See

I’m not totally sure, I’ve got to test that out. In a perfect world I’d like it to be all user generated content, but one of the failures of some of the current solutions, is that it’s really hard to get good quality control. I mean you’ve even seen it with Amazon and Yelp with their reviews. There’s a lot of reviews out there, but there’s only a few that are really worth it.

So I want to strike that balance between lots of trails, and really good trails. And I want to be known for having the top 10, 20 trails in an area that are accurate and worth doing. I’m gonna use marketing to try and build my user base. I’m currently approving all the trails that go to be publicly shared. But I think I just have to test that out to see  what will work.

What happens if you're in a remote area that doesn't have cell service? Will Trail See still work?

From the beginning, actually when I ran into that lady, we were in an area with no cell coverage. And the beauty of iOS is you have GPS, which will work without cell service. So you can actually record a trail that doesn’t have cell service, because GPS is all based on satellites, which can pretty much be accessed anywhere.

And then once you unlock a trail, that stores the map locally on your phone, so when you’re actually playing back directions that will also work without cell service. And I’ve definitely tested that extensively in the Tahoe area.

What's your favorite trail you've ever been on. Where was it, and why was it your favorite?

Well that’s a good question. What’s actually been one of the side effects of testing out Trail See and building out that initial database is trying new trails. And going to areas that I haven’t been before, so that I can provide some of those maps for my users.

It’s kind of almost shameful that I live in Tahoe, and one of the most famous trails out there is a trail called the Tahoe Rim Trail. That one goes all the way around the lake. But there’s one particular section called the Flume Trail, which is just a drop dead gorgeous trail, about 2000 feet above Lake Tahoe with sweeping views. It was also right above where they filmed Bonanza back in the day. It’s just an amazing trail with beautiful views.

What have you enjoyed most about working with FlatStack?

I’d have to say your speed. What sort of won picking you over everyone else was you guys are just really quick at sort of taking a concept and making it a reality. It’s been true from the little 20 hour demo app that allowed me to sort of test the concept, to really addressing some of the UI challenges, as well as knocking out bugs. I think your quickness to make ideas a reality is probably the most gratifying. And you’re definitely all friendly, professional people as well. So those two things have been the best.