Contents
Umajin Editor User Interface Description
Menu Description
File
New will open the Project Templates and you can select from these or create a new Blank App. All Projects are given a numerical ID for identification. The Projects are identified by this numerical ID rather than the name you give them, because at a later stage you may decide to change a Project’s name.
Open will display all the Projects that you have saved and allow you to pick the one to open for this session. Opening a Project will download all the assets and information from Cloud Services and then open it for editing.
Save Ctrl+ S Will save the Project that you are currently editing. It will save to your local machine first and then to Cloud Services. Saving to Cloud Services allows you to access it from any system that has Umajin Editor installed and makes it available for access from Umajin Editor Lite on your mobile device. See the Umajin Download page for a link to Umajin Editor Lite for your device.
Save As will save a copy of the Project you are currently editing to your repository under a new name.
Reload will reload the Project you are currently editing. This is useful to refresh some feed information and to run/refresh custom scripts that you may have created.
Play – Ctrl+Space will enable you to preview your Project in the Editor as you would see it on the device that is indicated in the Device Selection. This approximates the aspect ratio and relative size on your monitor while designing and editing the Project. The monitor can only approximate the Project resolution (or DPI) of your mobile device as most monitors have a lower DPI than most mobile devices. To view the Project in correct size/resolution, use Umajin Editor Lite on your mobile device.
Publish Publish will open up a screen that describes the 4 Umajin publishing options. Each option links through to more detailed information, download links, and specific data entry requirements.
- Umajin Editor Lite
- Publish to Android or IOS Stores
- Umajin Portal
- Publish Raw App Files
Open Cloud Services will open Umajin Cloud Services site for your Project in your default web browser. This enables you to add content to your Project that is dynamic and doesn’t require an app update to change. Feeds, images, articles and forms are all examples of content that can be managed dynamically from here.
Open Cloud Media Upload will open a panel for uploading and storing media resources for use in Feeds, Dynamic Articles and HTML documents. Files can be image files such as jpgs or pngs and documents such as pdfs, word or ppt.
Open Resources Folder will open up the Folder in your computer that holds all the resources used by your current Project. This includes all images, icons, 3D models, javascript, sound, animation, html pages, video and other assets for use within your project. Within the ‘images’ folder, you can create new folders to organize your content; e.g. Icon folder, 3rd party image folder, etc. In the ‘fonts’ folder you can copy any OTF (Open Type Fonts) or TTF (True Type Fonts) font files for use in the project.
Note: You MUST make sure that you have the rights to use the assets included in ANY of the resource folders (and sub-folders) as everything in these folders is packaged (and distributed) with the Project, whether it is actually used or not. It is a good idea to audit this folder (and its sub-folders) for unused, unlicensed or test assets before publishing your Project.
Open with Visual Studio Code will open Visual Studio Code editor to allow you to add and debug JavaScript for your project. See the “Visual Studio Code Setup” tutorial on the Developer site for more details.
Project Settings Allows you to change various Project settings.
Styles will open the Styles Inspector panel. These are font styles that can be used in your Project and consist of a font type, size, alignment, weight, decoration and color. You can create as many new styles as you like and use them wherever text is displayed.
Set User Location will enable you to set user location on a map. Required where GPS is not enabled.
Text Scaling Default Fixed if this option is checked the ‘Resize Type’ property on the Text Component you have inserted will be set to ‘Millimeters’ and thus the size of the text will be maintained/fixed across all devices. If it is unchecked and a new text Component is added, then the ‘Resize Type’ property will be set to ‘Scale with Screen’ and the text will scale as a percentage of each device’s screen dimensions.
Exit will exit Umajin Editor. You are prompted to save if there are unsaved changes in your Project.
Edit
Undo – Ctrl + Z will undo previous input.
Redo – Ctrl + Y will redo previously undone input.
Cut – Ctrl + X will cut/delete selected component.
Copy – Ctrl + C will copy selected component.
Paste – Ctrl + V will paste the copied component and name it as a numbered copy.
Duplicate Page will add a page that is a copy of the current page you have selected.
View
Zoom In – Ctrl + + zooms into page 25%, 50%, 75%, 100%, 200%, 300%
Zoom Out -Ctrl + – zooms out from page 300%, 200%, 100%, 75%, 50%, 25%,
Zoom lists dropdown of options for zoom 5%, 12%, 25%, 50%, 75%, 100%, 150%, 200%, 300%, Native, Fit
Device > lists dropdown of options for device display in your work-space and for previewing iPad ½, iPad ¾, iPad Pro 12.9″, iPad mini, iPhone 3Gs, iPhone 4, iPhone 5/SE, iPhone 6/7/8, iPhone 6+/7+/8+, iPhone X/XS, iPhone XSMax, Galaxy S3, Galaxy S4/5, Galaxy S6/7, Galaxy S8/9, Galaxy S8+/9+, Galaxy Note 8/9, Galaxy Tab, Galaxy Tab 7.7, Galaxy Tab/Note 10.1, Galaxy Note 3, Galaxy Note 4/5/7, Nexus 5, Nexus 6, Nexus 6P, Nexus 7 Tablet, Nexus 10 Tablet, Transformer TF300, Nook HD, Kindle Fire HD 7, Kindle Fire HD 8.9, Xperia Z1 compact, Sony Xperia tipo, LG 4X HD P880, Vodafone Smart Mini 7, Surface RT, Surface Pro 4, ATIV Smart PC pro, 14” 800×600 (4.3), 14” 1024×768 (4.3), 17” 1280×1024 (4.3), 20” 1280×720 (16.9), 22” 1366×768 (16.9), 23” 1920×1080 (16.9), 15” 3840×2160 (16.9), 27” 3840×2160 (16.9), 40” 3840×2160 (16.9), 29” 2560×1080 (21.9), 34” 3440×1440 (21.9), iMac 21.5”4K (16.9), iMac 27” 5K (16.9), Preview Desktop 22″.
Toggle Orientation – Ctrl + -> toggles Project display orientation from portrait to landscape.
Guidewires – Ctrl + ; enables guidewires on the workspace.
Console – F12 ; opens Console panel. The console window shows information (from the Umajin JavaScript engine) to help the author view state and error information from their scripts and custom components, directly on the mobile device.
Insert
Page will insert a new page in your Project. The new page will appear in the page preview panel and in the scene tree.
Master will insert a new Master component page into the page preview panel which can be added to any other page in your Project.
Foreground will insert a new Foreground page into your Project. Again this Foreground can be applied to any other page in your Project.
Dialog will insert a new Dialog or ‘pop-up’ into your Project. You can use the global popup to display notification style messages to your users. There is also a default loading spinner, 2 different combo boxes, a default activate camera screen and a code scanning screen for scanning barcodes or QR codes. You can, of course, also create your own dialog page.
Component will open the Component Selector so you can select a new component to add to your page.
Feed will open the Component Selector for the Data Driven components so you can select which type of Feed Component you want.
Modify
Arrange ⟶ will open dropdown of options for moving/layering components within the scene tree on a page; Bring to Front – Ctrl+Shift+[, Bring Forward – Ctrl+[, Send Backward – Ctrl+], Send to Back – Ctrl+Shift+]. (iOS options use { and})
Align ⟶ will open a dropdown of options for aligning selected components;
| Left | will align selected components to the leftmost one |
| Horizontal Center | will center selected components horizontally to the average ‘y’ position |
| Right | will align selected components to the rightmost one |
| Top | will align selected components to the topmost one |
| Vertical Center | will center selected components vertically to the average ‘x’ position |
| Bottom | will align selected components to the bottom most one |
| Distribute Horizontally | will evenly space selected components horizontally in their shared space |
| Distribute Vertically | will evenly space selected components vertically in their shared space |
| Make same Width | will resize selected components to same width |
| Make same Height | will resize selected components to same height |
Group – Ctrl + G allows you to group a set of selected components.
Ungroup – Ctrl + Shift + G allows you to ungroup a set of components.
Profile
View/Edit Profile opens the Umajin Cloud and displays the profile of the logged in user – shows Login ID, enables you to change password, update photo and select color ID. Color border around profile photo is a user guide when working in a multi-user setup.
Offline takes the user offline and displays a small unplugged icon top left.
Sign Out Immediately logs you out and opens the ‘Sign In’ popup so that you can sign in to Umajin Editor or Umajin Editor Lite with different login details.
Help
These headings all link to relevant information.
Umajin Help general help and support.
Umajin Developer Help advanced help for developers who are creating custom scripts using code.
Contact Us
Scene Tree
Under the umajin logo, the name you have given the Project that is open, will display in the left hand panel, as below.
On the right is the plus button for adding Components to any of your pages. We have placed it here so that it is always available for you to add a Component without having to take time to click back to the actual page in the scene tree. (Other plus buttons which sit directly on a Component indicate a parent/child relationship and are indented accordingly on the scene tree.)
Underneath the Project name is the Scene Tree. Displaying first will be the page and underneath it all the Components you have added to that page (most recently added component at the top).
When a Component is selected in the scene tree it is highlighted blue.Components can be dragged and dropped to change their position in the Scene tree.
All Pages and Components have a Properties Inspector to set Properties and Actions. If an Action is set on a Page or a Component Event a ‘Lightning Bolt’ icon is displayed at the right end of the Page or Component name panel.
The Properties Inspector panel can be pinned to the left hand side with the pin icon or unpinned to float.
It can be stretched wider or longer with the triangular icon at the bottom right when it is floating.
Long Properties Inspectors have a scroll bar to move down the property list. The Properties Inspector has 2 tabs: a Properties panel and an Actions panel. The Properties panel sets form and function for the component/page and the Actions panel displays Events for that component/page that can have Actions attributed to them. Actions can also be dragged and dropped to change order when they are added to Events in the Actions panel.
Command Panel
The double down/up arrows show and hide the Preview panel.
The tabs: Pages, Masters, Foregrounds and Dialogs are tabs for viewing all the items you have created in each category. When you click the Pages tab you will see all the pages you have created in the Preview panel. When you click the Masters tab you will see any Masters you have created, the Foregrounds tab will display all the foregrounds you have created and the Dialogs tab will display all the existing Dialogs (Global Popup, Loading Spinner, Combo Box Popup, Combo Box Autocomplete Popup, Camera Display, Code Scanner) and any you have created.
- Masters are used in feeds and other list type components to layout the individual items of the list. Data is fed into the Master and the data feed can also be external, such as a blog, a Twitter feed or information you have entered into the Project’s content management system on Umajin Cloud Services.
- Foregrounds are overlays which sit on top of the Page. They are usable on multiple pages and are good for use as tool-bars and other navigation items.
- A Page is a container which is the size of the device’s screen that allows you to lay out components that are available in Umajin Editor. Pages can be transitioned to with navigation events using Actions. Pages can also have Masters and Foregrounds added to them.
- Dialogs (or Popups) include a set of default (but customizable) message boxes that have specific purposes such as a loading spinner, standard combo boxes, the camera display and scanner. Additionally, you can make your own.
Setting Page Properties and Actions
- The page can be renamed in the Name panel in the Properties panel. Double click on the Page Number to type in new name.
- Position and size of pages are set by the device selected.
- Appearance enables you to add a pre-made Foreground overlay to the page.
- Checking the Pre-load page box will automatically pre-load the whole page.
- Pages have a list of events that can have Actions added to them.
The Device Selection tab opens a scrollable list of devices you can select to view/create your project.
The Zoom tab opens a list of zoom percentages as well as Native and Fit – 5%, 12%, 25%, 50%, 75%, 100%, 150%, 200%, 300%.
Project Preview button. When you have your current Project selected and you want to check how it looks on a range of devices, you can hit this button and the page you are working on will display on all 3 devices – the Sony Xperia tipo w:320 h:480 ppi:179, the GalaxyS3 w:720.h:1280 ppi:306 and the ipad3/4 w:1536 h:2048 ppi:263.
The page icon with swing arrows alters the page view from portrait/vertical to landscape/horizontal. This setting can be locked to either state or made to support rotation in the Project Settings.
The right facing triangular button will take you to preview your Project as you build it.
Close the preview mode using the black page icon that sits bottom right of the screen when you are in preview/play mode.
The Save icon will save your project. If there is an asterisk beside the ‘Save’ icon it indicates you have made changes to the project you are working on and so a ‘Save’ is in order. The first save will be to your local machine and then to the Cloud. Both saves are signalled with a success message at the top of your screen.
The ‘Publish’/Cloud icon opens the Publish Options screen. There are links to 4 different options; Umajin Mobile Editor, Publish to Stores, Publish to Portal and Publish Raw App Files.
The Show/Hide Comments icon pops up a panel with a Notification tab and a Page comments tab.The Page Comments view also has a Chat message panel available. Useful tools when working in multi-user mode. The threaded commenting system synchronizes with Umajin Editor and allows users of the Umajin Editor Lite to give feedback to the author on specific pages of the project. These comments can be accessed by the Umajin Editor on the desktop for discussion.
Show/Hide console icon provides Script Console Access: This is very useful for getting feedback when you create actions and controls using JavaScript. Errors you have made will be output to this console. A blue circle indicates no errors in the project whilst a red circle indicates an error is present.
Preview Panel
The Preview panel displays all the Pages, Masters, Foregrounds or Dialogs you have created in your project. It can be opened or closed using the double arrow tab.
The plus button adds a new page in the page view and in the scene tree. If you are in the Masters or Foreground or Dialogs Tabs the plus button adds the appropriate item. The colored circle on the item indicates its current owner/editor .
The double page icon enables you to duplicate a page.
Onscreen Resizing Indicators
Both resizing and moving a Component show position and size measurements changing, both onscreen and in the Property Inspector.
