From wiki.ginstr.com
Jump to: navigation, search

GBAM/ginstr apps graphics

GBAM gathers graphics resources from ginstr SVN folders which contain only images and xml files which define for GBAM theme and styles behaviour.

Graphics SVN Content

appIcon

appIcon represents image in shortcut which is generated on home screen of android device when app is installed.

  • location: https://svn.enaikoon.de/ginstr/appsGraphic/graphics/appIcon
  • structure: each subfolder in appIcon folder represents ID of appIcon. Within a single subfolder (appIcon ID) are multiple densities app icons which are used on android device and loaded by GBAM.
  • rules: all appIcon ID folders density subfolders have to contain single image in all densities with name appIcon.png
  • where it's used at GBAM/SVN:
GBAM appIcon selector
GBAM appIcon SVN



background

background represents image which is set as underlying picture in ginstr app.

  • location: https://svn.enaikoon.de/ginstr/appsGraphic/graphics/background
  • structure: each subfolder in background folder represents ID of background. Within a single subfolder (background ID) are multiple densities backgrounds which are used on android device and loaded by GBAM.
  • rules: all background ID folders density subfolders have to contain single image in all densities with name background.png
  • where it's used at GBAM/SVN:
GBAM background selector
GBAM background SVN



loginTopicImage

loginTopicImage represents image which is set on start.xml in ginstr app as picture on the bottom which represents some industry.

  • location: https://svn.enaikoon.de/ginstr/appsGraphic/graphics/loginTopicImage
  • structure: each subfolder in loginTopicImage folder represents ID of loginTopicImage. Within a single subfolder (loginTopicImage ID) are multiple densities loginTopicImages which are used on android device and loaded by GBAM.
  • rules: all loginTopicImage ID folders density subfolders have to contain single image in all densities with name backgroundI.png
  • where it's used at GBAM/SVN:
GBAM loginTopicImage selector
GBAM loginTopicImage SVN



page

page images are used at ginstr apps that contain multiple pages as navigation elements.

  • location: https://svn.enaikoon.de/ginstr/appsGraphic/graphics/page
  • structure: each subfolder in page folder represents ID of page images. Within a single subfolder (page ID) are multiple densities pages which are used on android device and loaded by GBAM.
  • where it's used at SVN:
  • rules: all page ID folders density subfolders have to contain same number of images with identical names

GBAM does not allow user to select page images, those images are defined for each theme.

GBAM page SVN



pressed

pressed images are used on ginstr apps as pressed graphics for all clickable controls (i.e. buttons).

  • location: https://svn.enaikoon.de/ginstr/appsGraphic/graphics/pressed
  • structure: First level subfolder defines multiple densities pages which are used on android device and loaded by GBAM. Second level subfolder in each density folder defines a certain shape. Usually themes have different shapes but all themes use same pressed element because for all themes pressed elements are grey colour.
  • rules: all pressed density subfolders have to contain images which finish with suffix with name Pressed.png
  • where it's used at SVN:

GBAM does not allow user to select pressed images, those images are defined for each theme.

GBAM pressed SVN



read

read images are used at ginstr apps that have nfc reading screens.

  • location: https://svn.enaikoon.de/ginstr/appsGraphic/graphics/read
  • structure: each subfolder in read folder represents ID of read images. Within a single subfolder (read ID) are multiple densities read images which are used on android device and loaded by GBAM.
  • rules: all read ID folders density subfolders have to contain single image in all densities with name read.png
  • where it's used at SVN:

GBAM does not allow user to select read images, those images are defined for each theme.

GBAM read SVN



spinner

spinner images are used in each ginstr app if autologin is enabled to show user that login is in progress.

  • location: https://svn.enaikoon.de/ginstr/appsGraphic/graphics/spinner
  • structure: each subfolder in spinner folder represents ID of spinner images. Within a single subfolder (spinner ID) are multiple densities spinner images which are used on android device and loaded by GBAM.
  • rules: all spinner ID folders density subfolders have to contain same number of images with identical names
  • where it's used at SVN:

GBAM does not allow user to select spinner images, those images are defined for each theme.

GBAM spinner SVN



theme

theme images are used to show all image elements of certain ginstr app

  • location: https://svn.enaikoon.de/ginstr/appsGraphic/graphics/theme
  • structure: each subfolder in theme folder represents ID of theme images. Second level folder within a certain theme (theme ID) describes various shapes of that theme. Third level folder contains multiple densities theme images which are used on android device and loaded by GBAM.
  • where it's used at GBAM/SVN:
GBAM theme selector
GBAM theme SVN



themePreview

themePreview images are used in GBAM only to show preview image of a theme to user before selecting certain theme.

  • location: https://svn.enaikoon.de/ginstr/appsGraphic/graphics/themePreview
  • structure: each subfolder in themePreview folder represents ID of themePreview images. Second level folder contains preview image.
  • rules: all themePreview ID folders density subfolders have to contain single image with name themePreviewImage.jpg
  • where it's used at GBAM/SVN:
GBAM themePreview selector
GBAM themePreview SVN



themeRootStyles.xml

If you are not familiar with styles.xml read more about styles.xml. before proceeding with this xml. themeRootStyles.xml defines universal styles.xml for all themes. This is a global styling file for all themes. All styles.xml in themeRootStyles.xml can be overridden by themeMetaData.xml.

themeRootStyles.xml consists of styles for:

  • layouts : i.e. layout/start.xml
  • controls : i.e. loginWidget (widget_en_login.xml)
  • default GBAM theme
  • general styles for labels, inputs, buttons
  • theme colors i.e. appBackground, appNameTextColor, labelTextColor, hintTextColor,...

themeMetaData.xml

If you are not familiar with styles.xml read more about styles.xml. before proceeding with this xml. themeMetaData.xml defines specific theme attributes such as colors,backgrounds,topicImages,...

Read more about how to modify themeMetaData.xml at Adding a new theme


themeFilterData.xml

File contains information for GBAM for filtering theme panel (see picture below) and provide user a faster way to find content.

GBAM themeFilter panel


Definition of a theme filter:

<theme name="themeName_shapeName">
    <category>value|value1</category>
    <category2>value2</category2>
    <category3>value3</category3>
</theme>

Each theme node in the file represents a single theme. Theme name is defined by "themeName_shapeName" i.e. "azureBlue_angular". For each theme we need to define categories (on picture above those are "filter nodes"). Category can have any Latin alphanumeric name. For each category we need to define a value (on picture above those are "node values"). Node value can have any Latin alphanumeric name.

What is shown in GBAM is a collection of all defined categories and values for all themes in themeFilterData.xml

i.e. if you add to a certain theme category "size" this will be shown in GBAM picture above as "filter node", and value of the category will be shown on picture above as "node value". If user selects the checkboxes in GBAM (see picture above) the themes will get filtered in the right and only those that have checked categories and values will be shown.

Adding a new filter for a theme

To add a theme filter for a certain theme it's necessary to paste the following definition into themeFilterData.xml:

<theme name="themeName_shapeName">
</theme>

and replace the "themeName_shapeName" with name of the theme and name of the shape. Then categories and values can be added.

i.e. we want to add that a theme belongs to a category appearance and to value azure in that case the following has to be added to our theme above:

    <appearance>azure</appearance>

it is also possible that a theme has two values for certain category. i.e. colorGroup theme appears in blue and marine, in that case the following has to be added to our theme above:

    <colorGroup>blue|marine</colorGroup>

our final theme filter would look:

<theme name="themeName_shapeName">
    <appearance>azure</appearance>
    <colorGroup>blue|marine</colorGroup>
</theme>

Once done commit everything to SVN. It takes up to 3 minutes that GBAM receives updates that were done on SVN. In case you are running GBAM you will need to "refresh" (press Ctrl+F5 on keyboard) or reopen GBAM to see the changes that were commited to SVN.


loginTopicImageMeta.xml

File contains information which is used in launcher when user clicks preferences->about to display picture copyright. This file can be extended to provide other information about loginTopicImage

loginTopicImage meta data definition:

<loginTopicImage name="loginTopicImageName">
	<copyright>copyrightText</copyright>
</loginTopicImage>
  • loginTopicImageName - should be set as name of some subfolder of loginTopicImage folder. i.e. agenda or bottles
  • copyrightText - copyright text for this picture

i.e. example of a finished copyright meta node for loginTopicImage:

<loginTopicImage name="coffee">
	<copyright>coffee beans background,&lt;BR/&gt;#8557131, © mariusFM77,&lt;BR/&gt;istockphoto.com</copyright>
</loginTopicImage>



loginTopicImageFilterData.xml

File contains information for GBAM for filtering loginTopicImage panel and provide user a faster way to find content.

The process of modifying this file and adding new filters is identical as for themeFilterData.xml, with few differences.

Filter definition:

<loginTopicImage name="loginTopicImageName">
    <category>value</category>
    <category1>value1</category1>
</loginTopicImage>
  • node is called loginTopicImage
  • loginTopicImageName should be set as name of some subfolder of loginTopicImage folder. i.e. agenda or bottles

backgroundFilterData.xml

File contains information for GBAM for filtering background panel and provide user a faster way to find content.

The process of modifying this file and adding new filters is identical as for themeFilterData.xml, with few differences.

Filter definition:

<background name="backgroundName">
    <category>value</category>
    <category1>value1</category1>
</background>
  • node is called background
  • backgroundName should be set as name of some subfolder of background folder. i.e. alveolusBlack or arabesquesPink

appIconFilterData.xml

File contains information for GBAM for filtering appIcon panel and provide user a faster way to find content.

The process of modifying this file and adding new filters is identical as for themeFilterData.xml, with few differences.

Filter definition:

<appIcon name="appIconName">
    <category>value</category>
    <category1>value1</category1>
</appIcon>
  • node is called appIcon
  • appIconName should be set as name of some subfolder of appIcon folder. i.e. alertPurple or airConditionerGrey


Themes and styles operations

Adding a new theme

To add a new theme to GBAM several files need to be modified:

  • themeMetaData.xml
  • obligatory image resources should exist that will be used in the theme:
    • theme->shape within the theme
    • appIcon
    • background
    • loginTopicImage
    • spinner
    • pressed

Step 1.

Make sure you have all necessary graphics in appropriate folders for the theme.

Step 2.

in themePreview folder create a folder with name which is equal to "theme_shape" that will be used and paste there "themePreviewImage.jpg" which is preview image for the theme.

Step 3.

copy following xml in the themeMetaData.xml file on SVN as shown on picture:

GBAM themeMetaData.xml where to insert new theme


Theme template to insert:

<?xml version="1.0" encoding="utf-8"?>
<theme name="themeName_shapeName">
	<read>readName</read>
	<spinner>spinnerName</spinner>
	<page>pageName</page>
	<appIconDefault>appIconName</appIconDefault>
	<backgroundDefault>backgroundName</backgroundDefault>
	<loginTopicImageDefault>topicImageDefaultName</loginTopicImageDefault>
	<styles>
		<style name="appBackground">
			<item name="android:background">backgroundValue</item>
		</style>
		<style name="appNameTextColor">
			<item name="android:textColor">appNametextColorValue</item>
		</style>
		<style name="labelTextColor">
			<item name="android:textColor">labelColorValue</item>
		</style>
		<style name="hintTextColor">
			<item name="android:textColorHint">hintTextColorValue</item>
		</style>
		<style name="inputTextColor" parent="hintTextColor">
			<item name="android:textColor">inputTextColorValue</item>
		</style>	
		<style name="titleTextColor">
			<item name="android:textColor">titleTextColorValue</item>
		</style>	
		<style name="readOnlyTextColor">
			<item name="android:textColor">readOnlyTextColorValue</item>
		</style>
		<style name="buttonTextColor">
			<item name="android:textColor">buttonTextcolorValue</item>
		</style>
	</styles>
</theme>

Some values are optional depending on if theme supports (has) images for that or not and if apps will use those images.

  • themeName_shapeName - should match theme folder name and shape folder name joined with "_" i.e. if used theme is "azureBlue" and shape "angular" then result should be : "azureBlue_angular"
  • readName - (optional) - should match read element folder name i.e. "readElementDark"
  • spinnerName - should match the spinner element folder name i.e. "spinnerDark"
  • pageName - (optional) - should match the page element folder name i.e. "digitsDark"
  • appIconName - should match the appIcon element folder name i.e. "alertPurple"
  • backgroundName - should match the background element folder name i.e. "alveolusBlack" OR value can be a hex colour i.e. "#FFBBAA"
  • topicImageDefaultName - should match the loginTopicImage element folder name i.e. "controllingMan"

Style values define colors and images for the theme:

  • backgroundValue - defines background image or colour on all screens. Value can be @drawable/background OR value can be a hex colour i.e. "#FFAABB"
  • appNametextColorValue - defines colour of app name text that is on start.xml , hex value i.e. "#FFAABB"
  • labelColorValue - defines colour of labels above input fields , hex value i.e. "#FFAABB"
  • hintTextColorValue - defines hint text colour in input fields, , hex value i.e. "#FFAABB"
  • inputTextColorValue - defines text colour of text that user writes in input fields, hex value i.e. "#FFAABB"
  • titleTextColorValue - defines text colour of menu bar text title on top of ginstr app, hex value i.e. "#FFAABB"
  • readOnlyTextColorValue - defines text colour of text which is "generated" by launcher for some fields that user cannot input , hex value i.e. "#FFAABB" . i.e. such field is GPS address field which is read only
  • buttonTextcolorValue - defines text colour at buttons , hex value i.e. "#FFAABB"

Example of theme to add

<?xml version="1.0" encoding="utf-8"?>
<theme name="ochre_roundedCornersFlat">
	<read/>
	<spinner>spinnerLight</spinner>
	<page/>
	<appIconDefault>coffeeYellow</appIconDefault>
	<backgroundDefault>alveolusBlack</backgroundDefault>
	<loginTopicImageDefault>coffee</loginTopicImageDefault>
	<styles>
		<style name="appBackground">
			<item name="android:background">@drawable/background</item>
		</style>
		<style name="appNameTextColor">
			<item name="android:textColor">#EAA804</item>
		</style>
		<style name="labelTextColor">
			<item name="android:textColor">#EAA804</item>
		</style>
		<style name="hintTextColor">
			<item name="android:textColorHint">#E6E6E6</item>
		</style>
		<style name="inputTextColor" parent="hintTextColor">
			<item name="android:textColor">#000000</item>
		</style>	
		<style name="titleTextColor">
			<item name="android:textColor">#EAA804</item>
		</style>	
		<style name="readOnlyTextColor">
			<item name="android:textColor">#FFFFFF</item>
		</style>
		<style name="buttonTextColor">
			<item name="android:textColor">#FFFFFF</item>
		</style>
	</styles>
</theme>

Step 3.

Once done commit everything to SVN. It takes up to 3 minutes that GBAM receives updates that were done on SVN. In case you are running GBAM you will need to "refresh" (press Ctrl+F5 on keyboard) or reopen GBAM to see the changes that were committed to SVN.


IMPORTANT In case theme does not support patch nine images theme creator should override those images, read more in next section.

patch.9 Overriding

Some themes cannot use the patch nine images due to specific graphic (gradients, irregular edges, ...) and as such they do not contain patch nine image. In that case it's necessary to "override" those image styles with standard image definitions.

Since themeRootStyles.xml is a global theme descriptor it's possible to "override" or "merge" styles from themeRootStyles.xml with theme specifics at themeMetaData.xml.

Step 1

Check if your theme is missing images in theme files:

  • enteringFieldTransparent2.9 (location: theme->shape)
  • buttonHalf.9 (location: theme->shape)
  • buttonHalfPressed.9 (location: pressed->drawable->shape)
  • others, see available overrides.
GBAM themeMetaData.xml where to the overrides within theme


Step 2

Once you know which patch nine you are missing choose the appropriate override and place it into the theme. Look at image names in overrides to understand all overrides you need. Copy the overrides into themeMetaData.xml.


i.e. if you are missing enteringFieldTransparent2.9 image then you need overrides:

  • login screen input fields background
  • all screens input fields background

Available overrides:

login screen input fields background
<style name="login_gnEditText" parent="inputTextColor">
	<item name="android:background">@drawable/enteringFieldTransparent2</item>
</style>
login screen login button background
<style name="login_gnButtonLogin" parent="buttonTextColor">
	<item name="android:background">@drawable/buttonHalf</item>
	<item name="gn:setBackgroundPressed">@drawable/buttonHalfPressed</item>
</style>
all screens input fields background
<style name="inputStyle" parent="inputTextColor">
	<item name="android:background">@drawable/enteringFieldTransparent2</item>
</style>
all screens button background
<style name="buttonStyle" parent="buttonTextColor">
	<item name="android:background">@drawable/buttonHalf</item>
	<item name="gn:setBackgroundPressed">@drawable/buttonHalfPressed</item>
</style>

Step 3

Once done commit themeMetaData.xml to SVN. It takes up to 3 minutes that GBAM receives updates that were done on SVN. In case you are running GBAM you will need to "refresh" (press Ctrl+F5 on keyboard) or reopen GBAM to see the changes that were committed to SVN.