Commit 7a57d0e7 authored by SteamMakers's avatar SteamMakers

week13

parent 69854536
Pipeline #166577 passed with stages
in 42 seconds
......@@ -13,47 +13,105 @@ Knowing little about applications and designing or deploying them, this week was
## Why I Chose AppHive
![Non Options](../images/week13/wk13nonAppOptions.jpg)
When I began to research what program I wanted to use I started with the MIT App Inventor. As I was working with this program I found that it only works to design and build applications for an Android operating system. Having an IPhone I knew I wanted to design and app that functions on my phone. I turned to the Internet to find a solution. I wanted to find a free source that could communicate with iOS and Android. Then I came across apprat.io and its capabilities to build for both operating systems and the web browser.
![Non Options](../images/week13/wk13NonAppOptions.jpg)
## App Hive Start Up
To start with AppHive I had to set up my free account. I registered with my information and clicked through the welcome screens.
![Create account](../images/week13/AppHive1.jpg)
With my account set up I began to create a new project. I clicked the plus icon and it sent me to a screen where I was able to title my project. I called my project Leaf Light. The next step was to choose a category that my app fit into. This was a bit confusing and didn't have much effect on the set up or design of my app. I chose entertainment and continued the set up process.
![Set up App Hive](../images/week13/AppHive2.jpg)
Adding a company name, choosing a template (if desired), and setting up the icon for your project are the last steps before designing and editing the vision of the app you want.
![Begin Designing](../images/week13/AppHive3.jpg)
## App Hive Creation and Design
![Begin Designing](../imagesweek13/AppHive3.jpg)
I chose not to use a template. I wanted to design as much from scratch as I could. By adding an empty page I began the design process. I played around with the background color options. Knowing I wanted a greener theme I changed from purple to a shade of green. I was able to access a color pallet and with this I dialed in a unique shade of green. Having this option was a nice addition to personalize your app.
![Color Background](../images/week13/AppHive4.jpg)
After working with the program more in depth I was able to find a theme setting. Once applied I had access to opacity options for green. With this menu bar I was able to have preset variations of the color I wanted. These variations were available for any color use, such as background, toggle menu, or text.
![Background Color](../images/week13/backgroundcolor.JPEG)
With text selected there will be a blue line to dot box. This box specifies which text is selected for changes. Keeping the the same green but with a lighter accent pulls the app together through each of the screens designed. I chose to use the 50 shade of the green. I applied this change to each of the different text applications on each screen.
![Text Color](../images/week13/textcolor.JPEG)
Another design option available is to upload images. The AppHive program allows you to upload images to personalize the design of you app. I created a leaf light logo that was designed to be two leafs coming from a socket and emitting energy. I took a picture of my drawing and uploaded it into the browser. The images tab then holds all images uploaded. I returned to my welcome screen and applied the photo as the background. This then became my welcome screen.
![Uploading Images](../images/week13/AppHive5.jpg)
The other images I wanted to use were unique LED representations. Using this LED Icon I was able to apply a colored gradient to each of the bulbs in InkScape. I then matched the RGB values of the green background in my app to the background of the icon. This helped to make a seamless addition to the page. Using the options on the right of the menu screen I placed each image into the designated pages.
![RGBLEDs](../images/week13/AppHiveRGBLEDs.jpg)
![Menu Design](../images/week13/menus.jpg)
The AppHive design screen shows each of the pages you have created. This allows the user to select each screen to edit, and to have a thumbnail preview of the designs as they evolve. The program also allows the user to add toggle menus. These menus can toggle from the top, bottom, left or right. I designed mine to toggle in from the left when activated.
![Menu Design](../images/week13/Menus.jpg)
The main screen of the design process allows the user to see a preview thumbnail of each screen created, as well as a live view of the screen the user is currently working on, and on the right hand side there is a menu with different plug in options. This option helps the user to apply elements such as buttons, slider, and text. It also allows for media applications such as images, icons, maps, and camera views. When these functions are drag and dropped into the working screen they can be placed where desired and triggered by additional settings.
![Main Screen Design](../images/week13/MainScreenAppHive.JPEG)
## App Hive Button Function
Placing the functions into the working screen is one thing, but if you don't assign the button to react to interactions it will be visually on the screen but wont change anything. I found that I wanted my toggle menu to be activated when pressed. This function is called "On Press". On the working screen the user will select the part that they wish to be interacted with. This will then provide the user with an editing option screen. The third tab down allows the user to add interaction on the function. By choosing to "Add event" the user can begin the interaction process. The option I chose was onPress. onPress I want the screen to be replaces. That was the next option I chose.
![On Press](../images/week13/AppHiveOnPressFunction.jpg)
I then told the program which screen I wanted to show when pressed. When the home button is pressed it will replace the current screen with the screen chosen from the drop down menu. For this example the welcome screen was chosen. This was the process used to set up the left hand toggle menu. Each text was selected and set to replace the screen with that corresponding screen onPress. Moving through each of the test placements on the toggle screen I applied these functions.
![On Press Examples](../images/week13/OnPressExampleScreens.jpg)
This process was also used to activate the toggle menu to come from the left hand side. In the top left hand side of each screen I placed and icon to indicate that the user can activate a menu. Each icon was then selected and an onPress function was added to activate the menu to appear. Once choosing onPress I chose the Controls option. Within Controls I was able to set Toogle side menu. This was added to each page.
![Toggle Side Menu](../images/week13/AppHiveToggleSideMenu.jpg)
## App Hive App on Phone
![](../images/week13/sample-photo.jpg)
Once the app was designed and set to function how I desired I then began the process of using it on my IPhone. My first step was to download the apphive application to my phone from the app store. This then provides the user with different login options. I entered my login information previously set up and loaded the program up.
![App Hive Phone Log In](../images/week13/AppHivePhoneLogIn.jpg)
I was able to move through each screen as set up using the side toggle menu. Each icon triggered to bring up the correct screens. The slider also functioned by sliding back and forth.
![Phone Screen Change](../images/week13/AppHivePhoneScreenChange.jpg)
I was on the Red screen. I used the icon in the top left to trigger the menu. When the menu was triggered I then chose green. When returning to the screen it showed green. This worked to move through each screen.
![Screen Change Red to Green](../images/week13/AppHivePhoneScreenChangeRedtoGreen.jpg)
![All Colors](../images/week13/AppHivePhoneAllColors.jpg)
I was also able to use the blue plus mark at the bottom of the screen to reload the app, return to my applications created, and to change the position of the button.
![Phone Menu](../images/week13/AppHivePhoneMenus.jpg)
### Interactions
<iframe width="560" height="315" src="https://www.youtube.com/embed/jjNgJFemlC4" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
<iframe width="905" height="510" src="https://www.youtube.com/embed/oZhnTinh1Fg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
## Complications
Disappearing Text
This has been a struggle to login each time because the text is not visible as you type. I believe this to be due to the app being a beta version and that some kinks are still being worked out.
![Complications](../images/week13/Complications.JPEG)
Different Appearances
This has also been a struggle. I had to design on my screen and reload the application on my phone to understand the actual visual effects. On the left is the desktop view where I was designing. The right is the real time comparison on my phone. This was difficult to track designing effects and visual differences.
![Begin Designing](../images/week13/Complications2.jpg)
## Code Example
......@@ -75,14 +133,5 @@ void loop() {
}
```
## Gallery
![](../images/sample-photo.jpg)
## Video
</p>
</div>
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment