User Tools

Site Tools


ripdraw_web_portal1

rudy_wiki_header_ripdraw_lite_rev_1.jpg

Introduction to RipDraw Web Portal

The RipDraw Web Portal is the rapid prototype tool used to develop world class GUI designs for RipDraw Displays. Users can design and prototype their WYSIWYG GUI by dragging and dropping world class images from the RipDraw Asset Image Library of the RipDraw Web Portal.

The RipDraw Web Portal addresses the entire GUI project, not just a single static display page. The entire GUI project (containing multiple GUI pages) can be developed and prototype into a “story board” showing the full sequence of GUI displays bases on the users specific design.

Once a “storyboard” has been developed in the RipDraw Web Portal, other team members and contributors such as the marketing team, upper management, man-machine interface experts and end user focus groups can review, evaluate and provide feedback to the designers on the look, feel and navigation of the entire GUI project.

This introduction to the RipDraw Web Portal will guide a user through these procedures:

  1. Creating a Project on the Ripdraw Web Portal
  2. Adding a GUI Design to the Project
  3. Drag and Drop Images to the GUI Design

At the end of each procedure listed above you will find a screen capture video for that series of steps. It only takes 3-4 minutes to do everything!

Creating a Project on the Ripdraw Web Portal

Step 1. Login to the RipDraw Web Portal with your user name and we will create a simple project.

login.jpg

Step 2. From the Dashboard Page, click on Projects button on the left hand side to navigate to the Projects Page.

clickprojects.jpg

Step 3. From the Projects page click on Add New Project to add your new project

add_project.jpg

Step 4. Enter the project parameters for the 1U project and Save.

The important fields for the 1U are:

  1. Device Resolution set to 480×110, which is the full resolution of the 1U.
  2. Max Layers set to 2, which is the total number of display layers on the 1U.

projectparms.jpg

Congratulations! You have now added a new RipDraw Project called “DIY Project” to your RipDraw Web Portal account. This project is configured for a 1U RipDraw Display with a resolution of 480×110 and 2 image layers. At this time, the project is new and without any GUI designs. Adding GUI designs to this project is the next set of steps.

Screen capture video of Creating a Project on the Ripdraw Web Portal

Adding a GUI Design to the Project

Let's start by defining what RipDraw means by a GUI Design. A GUI Design in the RipDraw Web Portal is simply the WYSIWYG snapshot of the display at a certain time, situation or state of the designer's end product. For example, your project may have a “logo, copyright, serial number” state where the display presents all these pieces of information on the display. You can create GUI Design called “Logo” and then using the RipDraw Web Portal select the logo image for the display, select the font and font size, specify the actual text and the position for each item on the display. Once the selection and position is done, the WYSIWYG snapshot can be saved into the GUI Design inside the RipDraw Web Portal.

Another state or situation for the same project might be “Bar Graph Measurement”, where the desired display is now a collection of different color bar graphs. As in the previous case, a GUI Design can be created and saved inside the RipDraw Web Portal called “Measuring Bars” specifying all the images, bars, text and positioning for this GUI design.

A RipDraw Project is typically comprised of multiple GUI Designs where the number of GUI Designs can vary from just few to a large number based on on the display requirements of the end project. Moreover, the GUI Designs can be selected and ordered within the RipDraw Web Portal to create a “storyboard” that can be sequenced on a display to replicate the full GUI.

Step 1. Add the First GUI Design to the DIY Project

Your new DIY project is listed on the Project Page by name. Locate your new DIY project and open to the Design pages for your DIY Project by clicking on Designs in the Actions column.

diyprojectlist.jpg

On the Design of the DIY Project page, click on Add New Design and enter a new design called “Buttons” and click Submit add_design_buttons.jpg

Congratulations! You now added a the Buttons GUI Design to the DIY Project. buttons_design.jpg

Screen capture video of Add the First GUI Design to the DIY Project

The DIY Project now has just one GUI Design called “Buttons”. The “Buttons” GUI design is currently blank and the next step is to “drag and drop” images into this design.

Drag and Drop Images to the GUI Design

We will use the Design Editor to drag and drop images into the Buttons GUI Design of the DIY project.

Step 1. On the Designs of the DIY Project page, click on the Design Editor under the Actions column to open up the Design Editor. This opens up the currently blank Buttons GUI Design.

buttons_design.jpg

Step 2. Select the image templates to use.

Below is the blank Buttons GUI Design as seen by the Design Editor. We want to utilized the RipDraw Asset Library. Since there are over 8,000 images, the images of the same style and family are organized into various templates. We need to select the template to use for this design. Multiple templates can be used for any design, in this example, we will use only one.

On the Design Editor page for the Buttons GUI Design, click on Select Template select_template.jpg

The template we will use for this example is called LEDs

To filter the search for this template, set the Search Template pags as follows and then click Apply Filter

  1. Public Template
  2. Normal Template Type
  3. Attribute Name Normal with Value LED

The LEDs template will be filter from the rest, check to select this template and then click Done.

led_temlate_select.jpg

Step 3. Open LEDs Template.

The LEDs template is selected and visible to the Design Editor for the Buttons GUI Design, see far right column. On the Design Editor, click on the LEDs template (far right column is the template column) to “open” the template and show all the images that belong to that template. The individual images will appear on the column to just to left of the template column. These images can be now be dragged and dropped into the Buttons GUI Design.

led_images.jpg

Step 4. Drop and Position Individual LEDs into Button GUI Design.

First enable layers 1 and 2 by checking the enable box in the Layers column.

Select Layer 2 (Layer closest to bottom of screen) so that it is has an orange boarder highlight. This means that you will be drawing on this layer.

Now click on any of the LEDS images to bring them into that layer. Once the images are on the layer, you can position them at will. For this example, bring in 4 or 5 different LEDs images. Then click Save to write this to Buttons GUI Design. Followed by clicking Back to exit the Design Editor. drag_drop_leds.jpg

You should now be at this page.

design_done.jpg

Screen capture video of Drag and Drop Images to the GUI Design

Congratulations! You have completed introduction to the RipDraw Web Portal and performed the following steps

  1. Creating a Project on the Ripdraw Web Portal
  2. Adding a GUI Design to the Project
  3. Drag and Drop Images to the GUI Design

You can add more GUI Designs to the project by repeating the second and third steps.

Now that you have built a project, you can proceed to download and test drive the project. rudy_wiki_header_ripdraw_lite_bottom_rev_1.jpg

Last modified: 2015/07/31 00:34

Page Tools