Setting up your own MASLO app - academic-colab/maslo-player GitHub Wiki

The MASLO mobile client software leverages the PhoneGap/Cordova framework. It is therefore written in mostly HTML5/CSS3 and JavaScript/JQuery with additional native code plugins for iOS and Android devices. The code itself is thoroughly documented where needed.

The mobile application requires Android Gingerbread (2.3) or newer and iOS 5.0 or newer.

Native Plugins

ContentManager (iOS and Android) The Content Manager facilitates content pack download, installation, deletion, access, and local search, i.e. everything that requires reading/writing from the device’s persistent storage, including database access.

VideoPlayer (Android) Android’s support for HTML media objects has proven to be weak. This may change in the future but for the first release of the Android MASLO app it required an additional video plugin, which, instead of playing video inline in the app view window, opens Android’s own video playback app for playing video and audio.

Customize your own MASLO app

Given that all design elements of the MASLO app are written in HTML5/CSS3, the customization can be done by anyone familiar with web development. The crucial pieces to customize are

  • www/style.css : the CSS stylesheet
  • www/maslo-globals.js : this file contains most global variables used by the software. The variable to customize is “remoteStartUrl” to match the address of your MASLO store server. Additionally, for Android you also have to change “androidDirPrefix” to match your project name.
  • Footer menu images (in www/img/menu/)
  • The splash screen image (for iOS)
  • The app icon

When you obtain the MASLO app source code, you will have to modify the color schemes of the CSS file. Colors in the open source release are parameterized, so it will be straightforward which values to replace.

Images in the footer menu image folder are placeholders giving you the correct dimensions. Just design your own images (two for each button: one for inactive and one for active button), name them appropriately, and replace the placeholders in the folder.

The Android version currently does not support a splash screen. For iOS you can set and replace the splash screen image once you’ve opened the project in XCode.

To replace the app icon on Android, you replace the images in the res/drawable-* folders of the Android project. Documentation on image dimensions can be found here: http://developer.android.com/guide/practices/ui_guidelines/icon_design_launcher.html.

On iOS, you can replace the app icon using the XCode UI in the project settings.