[GSoC] Adding Different Preview Options To Designer in App Inventor - User Feedback

[Himani]

Hello Everyone
I am Hemani Kaul, one of the GSoC 20 participant.
This summer I will be working on Adding Different Preview Options To Designer under the mentor ship of Mr. Jeffery Schiller @jis also I would like to thank all the mentors supporting us in one or another way.

To know better about what I will be working on this summer : [Click Here]

Feel free to give your suggestions or questions anytime.

Thanks in advance.

Regards

[Ken]

Thank you for doing this!
It looks like a lot of work, I wish you the best!

[Peter]

Great proposal @himani. I wish you all the best in your endeavor.

[Himani]

Thank You @Peter @Ken

[Himani]

So the past one month has passed successfully and I am here to update the App Inventor community about the progress of my work this summer. Hope you all like it.

1. Firstly we can activate the Preview drop-down from the Device Default theme button. Here we have 3 styles initially as you can see.

2. For the Android Material, we can preview the color of the status bar by changing the PrimaryDarkColor.

3. These are the temporary iOS mocks which I have added for the correct flow of the project and will be changed later with iOS styling.

4. Finally the preview styles will be stored in the back-end once we the refresh is screen the preview style still exists.

Here is a little demonstration of my work :-

During the next phase I will be focusing on styling of all components according to different preview styles and improvising the current work. Thanks for watching and all suggestions are welcome.

Regards.

[Peter]

Nice work @Himani

[Himani]

Thanks @Peter

[Himani]

Hello Everyone!
So this summer I had great opportunity to work in Google Summer of Code and contribute towards improvising the designer. I am sure many of you might have attended the Global Meet or watched it on YouTube but still if any one has missed and want to see the work I have done so far or I might have forgotten to mention in the meet here is the detailed update to the community.

My Project was to improvise the MockForm/Editor so that What You See Is What You Get (WYSIWYG) environment is available to our users which will help them to understand how their designed apps will look on different mobile devices. The preview designer has 3 options right now: Android Material(Android 5+), Android Holo(Android 3.0 - 4.4.2) and the new iOS/iPad devices. I have even improvised the Classic theme with Android Gingerbread reference to implement WYSIWYG nature in Classic Mode.

Improvising the components according to different previews was the main challenge because I had to see how exactly I could improvise them without degrading their current behaviors and relating them with reality.

Here is the current preview of the designed app in Classic and Device Default theme:

Now here are the improvised previews with their components changed accordingly:

1. The Classic Theme
   

   
   

2. The Device Default, Black Title Text and Dark theme allows you to see the editor in 3 different preview styles.

• Android Material
  

  
  
  
  Combination of PrimaryColor, PrimaryDarkColor and AccentColor can now be directly visible in editor.

• Android Holo
  

  

• iOS (iPhoneX)
  

  

• iPad(Tablet Size)
  

  

• iPad(Monitor Size)
  

  

3. The Black Title Text theme for the iOS preview:
   

   
   
   
   

4. The editors are also available in the landscape mode.
   

   

5. Finally a little bit of the Dark theme
   

   
   
   
   
   

This was my small project and I hope you all will like it as much as I enjoyed working on it. I am very thankful to all my mentors for giving me a chance to work with them again this year and it wouldn't have been possible to reach so far without their guidance. Special thanks to @jis @ewpatton @Susan. Thank you all for your time. Your suggestions are always welcome.