User Guide for Profile Designer

User Guide for ...
(0 ratings)
Create by Lénárd Pásztor | January 9, 2015 | Last updated by Zsolt Szrapkó November 18, 2015 (view change)

Profile Designer

After you have put the SBrick(s) into your LEGO creation, the next thing to do is start the app on your smart device and beginning using it.  However, you can customize the look and layout of the remote control screen - which we call the profile - by using our Profile Designer.

 

What is it?

Profile Designer is a service available to those who have a valid account on our social site - social.sbrick.com - and can be accessed here (designer.sbrick.com). Profile Designer makes it simple to create and save profiles from the comfort of your desktop, laptop or tablet which match your LEGO models.

The Profile Designer works with the desktop versions of the Chrome and Safari browsers.

The service is free to use (as long as you have registered) and while many will use the Profile Designer to produce a profile for LEGO designs, that’s just where the story begins. You can also use it to put together remote control profiles for any and all SBrick designs you come up with! While the Profile Designer service is currently in the public testing phase, those profiles you create can only be seen by you - they are private.

 

Profile list screen

After navigating through the login screen, you will be shown the profiles you have already created.  The newest profiles will be at the top. This is also where you can go about setting up a new profile.

 

Creating a new profile

Begin by giving your new profile a name - enter this in the Profile Title box.

Next, should you so choose, you can add a description of your profile in the Profile Detail Text box. If you plan on creating many profiles, filling out this box will help you differentiate between the different profiles you have created.

The next step is to pick which screen ratio matches that of your device; you can choose from 3:2, 4:3, 5:3, 16:9 or 16:10 from the pulldown list. This is important because when you go about chooses a profile from your device (smartphone, tablet, etc), only those choices which matches the aspect ratio of your device will be visible.

Finally choose between creating the profile in either landscape or portrait.  When you have made your choices, click on the large CREATE button.

Profile editor screen

The profile screen is divided into four distinct areas.

Header

The left area contains the Resource handler button, your profile's name, which activates the profile's settings, and the floppy disc icon, which is saving your profile if you press it. At the right side, you can see another icon which takes the Profile Designer into fullscreen and back to normal.

Sidebar

The sidebar is where can you find your control layers.

Layers

At the layers section, you can see a list of the elements on the workspace. By clicking on one of the list's element, the element's settings panel going to show the selected control changeable parameters.

At the bottom of this section you can see the control type buttons. every button add a new control element to the workspace, and as well to the layer list.

Workspace

On the top left you will see the Navigator; this shows you, in miniature, a full screen of how your profile looks. Below you can see the Guide control area.  On the middle left the panel lists the LAYERS you currently have in your profile; this is similar to many graphic programs.  Below that on the bottom left is a bar which shows which elements are available for you to place into your profile.  Most of the screen is taken up by the panel on the right, which displays a magnified version of your profile - the size makes it easier to be precise when adding your control interfaces to your profile.

There are two special elements in the Layer list; Background and Close Button.  

Background

If you wish to change your background, click on the Background bar found below the Layer title. You will be shown the background currently in use. Clicking on the thumbnail of the background will trigger a small drop down panel; this will display those backgrounds already in your library. Uploading a new background is simply a matter of clicking on the Choose Files button and then browsing to the image you wish to use. Any background image you select should have the same aspect ratio as the Profile Designer, e.g. 4:3, 16:9, etc.  If you are happy with your choice you can move on to selecting which interfaces you wish to add.

Close button

You will need the Close Button to exit your Profile Screen when you are using it. You can adjust the size as you would a control interface, and can also change the way it looks just as you would the other elements.  You cannot remove this element as it is required for the app to work.

You can change the way the Close Button looks beneath the Resources label.  By clicking on the thumbnail you can switch out the Close Button for an image that already exists in your library, or alternatively you can upload a new image which will replace the current button.

To change the size of the button, double click on the button in the main window and use the markers on the corner to drag the image to a different size.

To move the Close Button within the Profile, drag the image where you want it to be.

 

Footer

Guides

At the left side of the footer that you can see the Guide control area. There are two kind of guides, side and center. If you activate them, you will see guides after you click on any element. If you click the Background element, the guides will hide away.

Every Guideline has a snapping area. If you drag the selected element close one of the guides, it will attach to that line.

Links

At the right side, you can see a “home icon” which is take you to the Profile Designer Start screen. Next to it, you can find a link to this Wiki page. Also you can find your profile image which is takes you to your Social Profile.

Interactions with the elements on the Workspace area

On the workspace you can do several things with your control elements.

Single click: By clicking on the element you will get a selection border and four point to resize it. If the element is rotatable (like the Slider or the Joystick) you will see another point where you can start rotate the element by drag and drop that area.

If you enabled before, the guides also will show up on the other control interface sides and/or middle points.

To remove the selection, just do a simple click on the background element. This will also removes the guidelines.

Drag & Drop: You can reposition the selected control interface by drag & drop. If you enabled the guides, the control interface will snap to the near guideline while you moving it.

Double Click: If you’re double click on the element, you will get the selected control interface’s settings on the sidebar’s layers area. By clicking another element, the settings bar will going to hide away.

 

Control interfaces

The control interfaces are the buttons and sliders you will use to control the motors attached to your SBrick(s).  These are found on the bottom left of the screen. You can choose a New Slider, New Joystick or New Button. Clicking on the respective icon will place that interface in your Profile.  The interface will also appear in the Layer frame on the left. You can be very creative with the way each interface acts, and looks.

To adjust the control interface’s properties, click on the name of the interface in the Layer frame.  The frame will expand to reveal the following. Name, Channel, Rotation, Auto Reset, Points, Values.

Basic settings tab

Name: edit the name of the interface control by typing in the text box.

Channel: change the information to reflect the function of the control.  We recommend using common descriptors like Steering, Acceleration, Arm Up, Arm Down, in case you wish to make your profile public for others to see and use.

Rotation: the slider interface allows you to rotate the object within the profile. Pulling the slider to the right will rotate the interface clockwise, while pulling the slider to the left will rotate the interface in the other direction.  The interface can be rotated 90 degrees in either direction.

Auto Reset: choose between Yes and No from the dropdown menu. Selecting No means that the interface will stay where it is if you use it.  Selecting Yes will mean that the interface will return to the Zero position once it is released.

Points: there are two parameters to play with here, namely Zero Point and Start Point.

Zero Point marks the position where the interface does not produce a response.  By default this is set to 0.5.

Start Point marks where the controller begins if the Profile is used. By default this matches the Zero Point - so when you activate the Profile it is idle. By changing this value you can program your Profile to start at a certain setting.

Values: here you can adjust the minimum and maximum for your interface.  By default the minimum is -1 and the maximum is 1, but you can change this by pulling the slider on the left.

This takes care of the functionality of the control interface, but you can also adjust the way the interface looks by clicking on the Resources tab. found below the values you entered.

Resources tab

Each control element is broken down into composite elements which you can change.  This includes things like the Background of the interface, colour of the button, etc. You do this the same way as you would change the background, i.e. by clicking on the element in question and then choosing from the components shown, or by uploading one you have created using the Choose Files button.

If you change your mind and want to remove the interface from your profile, click on the Remove Control window, and then click on the Remove Control.

Moving back to the large panel on the right, you can arrange the position of these control interfaces by holding and moving the interface where you want them to be.

You can make these interfaces as large or small as you wish by double clicking on the interface itself and pulling the markers located on each corner until the size is just right.

Manual Settings tab

Every Control Interface (except the Background) has a third settings tab, where you can see the selected control element’s every parameter, and you can fine tuning by numeric fields. Every modification saved automatically. Also there’s two extra parameter section in this area. Here you can set manually the selected element’s X and Y coordinate (fine tuning the placement), and the width and height parameter. These parameters (including the rotation point) are updating live on the workspace.

TIP: before you set about designing your profile, we recommend you download the Kit we have created to get the ball rolling. You can download it here.

TIP: The Profile Designer accept resources as PNG or JPG format.

TIP: to change the shape of the slider - let’s say that you want a thin bar rather than something more chunky - upload a background with the aspect ratio you want to see.  The aspect ratio of the background determines the shape of the the control interface.

The control interfaces currently available are the Slider, Joystick and Button.  While the slider and joystick are very similar, with the Button you can design how the Button looks when it is in the ON and in the OFF position. You do this as you would change the background for the other elements. By default, the Button is only in the ON position if it is depressed.  Once the Button is released, it will revert back to the OFF position.

 

Resource Browser

By clicking the picture icon left before your profile name, the resource browser panel will shows. There are five tabs on the top of it, every tabs contains the resources of a control interface type. There is an area of every section where you can upload custom artwork for the selected control interface. By clicking the picture icon once again, the resource browser goes hidden.

 

Settings

The down arrow symbol found in the top bar of your edited profiles name enables you to change the Settings for the profile you are working on.  You can change the name of the Profile, edit the description of the Profile, as well as choosing to make the Profile public so that others can see it, or to keep it private.

Once you are happy with the changes, click Save Settings to preserve your edits. This action also saves your full profile.

 

Save profile

By clicking on the Floppy Disc symbol found in the top bar you will save the Profile to your library. Don’t forget to save your changes before you exit the Profile Designer!

 

Transferring profiles to your device

After you’ve taken the time to create your profile, now is the time to test it out on your device, be this a smartphone or tablet. To do this, open the SBrick app on your device.  Once you have logged in, swipe from left to right on your device.  This will reveal the Slide Menu. Now click on Profile Market.

On the top you will be able to select between My Profiles and Market. Selecting My Profiles will display those Profiles you have created.  If the Profile has yet to be stored on your device, you will see a Download button beside the name of the Profile.  On the other hand if you have edited your profile the app will let you know that the Profile has been updated since you last used the app.

By selecting Market, you will see Profiles that other members of the SBrick community have created and made public.

IMPORTANT: only those Profiles which match the aspect ratio of your device will be visible, so take care when designing your Profile to make sure it matches the aspect ratio of your smartphone or tablet.

 

Compatibility

If you are using Android, your device needs to be running Android version 0.41 or higher.  If you are using iOS you will need version 3.6 or higher.

 

Quick Guide

Follow these steps to create a Profile quickly.

  1. Use a graphics program to create a background for your profile. Make sure the image matches the aspect ratio of your device.
  2. Create images for your control elements, be these buttons, sliders, etc.
  3. Open the Profile Designer and create a new profile.
  4. Upload the background and control element images you have created.
  5. Add controls for your profile and check the set-up.
  6. Save your profile.
  7. Open the app on your device and download the profile you have created.
  8. Add the profile to your creation and configure the SBrick channels.
  9. PLAY!

Steps 1, 2 and 4 are optional.

« View Page History