Hopara User Guides
There are three types of Hopara Users:
- Users – able to navigate around large scale, complex data sets as fast and easy as navigating around a web site. > Go to User Guide
- Editors – able to edit the front end of a Hopara Viz App: add, remove, and re-position ‘assets’ on the screen like floor plans and data reporting units like sensors or IoT devices. > Go to Editor Guide
- Developers – able to build new Hopara Viz App using a Pre-designed template connected to your data set. > Go to Developer Guide
If you would like a totally custom viz app please Contact Hopara Labs to discuss your data resources and business requirements.
2. Editor’s Guide: Get started editing the front-end of a Hopara data viz app.
This guide will teach you how edit a sample Hopara Viz App template.
- Basic App Navigation
- Editing an App Template using Sample Data
If you would like a viz app that does not look like one of the pre-designed Templates please Contact Hopara Labs to discuss your data resources and business requirements.
1. Basic App Navigation
Hopara viz apps are designed to make navigating around complex data fast and easy for any user. You DO NOT need any special skills or training. If you can use a mouse or touchpad you can navigate a Hopara Viz App.
For a detailed description of how to navigate around a Hopara Viz App please refer to the User Guide.
2. Editing an app using sample data and a pre-designed template
From your Sample App home screen (Fig 1 below), click on the Labs Floor Plans icon in the menu on the left, then click on Lab 1 to zoom into the view of that Lab (Fig 2 below).
Fig 1. Sample App Home screen
Fig 2. Sample App Lab 1 detailed view
As highlighted in Fig 2 above, note the icons or data reporting units dotted around the floor plan. This is a sample 2D office floor plan, but you an make it look better!
We’re going to upload a new floorplan image. First, do a Google Search for a ‘3D laboratory floor plan image’, pick one you like, name it ‘floorplan’ and save it to your ‘downloads’ folder.
Fig 3. Lab 1 detailed view
Next, as shown in the image above, select ‘Place Labs floorplan list’ – the button will turn purple. Then click on the floorplan where X marks the spot in the image on the right. A new window will pop up with the option ‘Replace Image”
We picked a sample lab floor plan for demonstration purposes as shown to the right. Your image will look differently. But note that initially the new floorplan image is offset, icons are misplaced, and the blue box hovers over the left side. Don’t worry, we’ll fix that now.
Note the image edges and corners are highlighted. Click and drag one corner to make the image larger or smaller. Now use the vertical bar at the top of the image to rotate it into the position that you want.
Next, click the blue box and drag it to somewhere inside of your new floorplan, and resize or rotate the same was as you edited the floorplan.
Now, click on any one of the icons. You can ‘unplace’ or drag it to a new position on the new floorplan. When you’re done your new view should look similar to the lower image to the right (except of course the image will be the one you just uploaded). Note that in our sample all of the icons and the bllue box have been moved to fit inside the boundaries of the floorplan.
Fig 4. Lab 1 new floor plan view
Fig 5. Lab 1 new floor plan view with data reporting icons re-positioned
Now, lets jump to Lab 2. Try using the same process to change the floorplan image, move a few icons around, and rotate it into a good looking position.
You can also edit each sensor one by one. In the menu on the left, select Sensors, and then the third on the list in this example #10.
Fig 6: Lab 2 deatiled view
The view will jump to the location where that data reporting point is located, and position it in the middle of the screen.
You can also edit each sensor one by one. In the menu on the left, select Sensors, and then the third on the list in this example #10.
Fig 7: Asset-level navigation sample
The view will jump to the location where that data reporting point is located, and position it in the middle of the screen. If there are a lot icons you may need to click on several icons before you find the one you’re looking for.
If you click on #10 you will see a new window with the option ‘Temperature History’ which will look like the image on the right.
Fig 8: Device #10 Temperature detailed view
Sharing your app with co-workers, clients or friends is just as easy and navigating around an App.
In the top right of your browser address window look for the icon as shown below. Select Copy Link. Then open your favorite productivity and communications app and click paste. Note, only users with proper login credentials will be able to access the App.
However, if another user you have shared the link with does have login credentials they will be directed to the exact zoom level and location as you were just looking at, and then they will be able to navigate around the App as shown below:
