Generation of User Interfaces for Mobile Applications Using Neuronal Networks

  • Laura N. Sánchez-MoralesEmail author
  • Giner Alor-Hernández
  • Rosebet Miranda-Luna
  • Viviana Y. Rosales-Morales
  • Cesar A. Cortes-Camarillo
Part of the Management and Industrial Engineering book series (MINEN)


Nowadays, there are different approaches of software automatic generation such as model-driven architecture (MDA), feature-driven development (FDD), rapid application development (RAD), to mention but a few. However, the aforementioned approaches lack of the use of artificial intelligence techniques such as digital image processing, neuronal networks, and patterns recognition which have not been addressed. Due to this, new and novel approaches on mobile applications development process are needed by incorporating artificial intelligence techniques in order to propose agile, easy, and intuitive development through computational methods that involve neural networks, digital image processing, and pattern recognition techniques. The aim of this work is to present a software component for generating user interfaces for mobile applications by using pattern recognition, image processing, and neural networks techniques. The process of generating user interfaces consists of three phases: (1) image analysis, (2) configuration, and (3) source code generation. The component identifies the elements of an image generated freehand, to transform its source code equivalent. Finally, we present a case study as proof of concept to show the functionality of the component described throughout this chapter.


Automatic software development Image processing Mobile applications UI design patterns 



The authors are grateful to the National Technological Institute of Mexico for supporting this work. This research paper was sponsored by the National Council of Science and Technology (CONACYT), as well as by the Public Education Secretary (SEP) through PRODEP.


  1. Andrés C, Santiago O (2005) Formatos De Imagen Digital. Rev Digit Univ 5:10Google Scholar
  2. Behringer B (2012) Towards frame-based source code generation for heterogeneous real-time environments. IFACGoogle Scholar
  3. Benoit A, Caplier A, Durette B, Hérault J (2010) Using human visual system modeling for bio-inspired low level image processing. Comput Vis Image Underst 114:758–773CrossRefGoogle Scholar
  4. Bijaoui A, Rué F (1995) A multiscale vision model adapted to the astronomical images. Sig Process 46:345–362. doi: 10.1016/0165-1684(95)00093-4 CrossRefzbMATHGoogle Scholar
  5. Boley H, Paschke A, Shafiq O (2010) RuleML 1.0: the overarching specification of web rules. In: Lecture notes in computer science (including subseries Lecture notes in artificial intelligence and lecture notes in bioinformatics), pp 162–178Google Scholar
  6. Clark JE, Johnson BP (2013) Sencha touch 2 mobile javascript framework. Packt Publishing Ltd, UKGoogle Scholar
  7. Colombo-Mendoza LO, Alor-Hernández G, Rodríguez-González A (2012) A novel approach for generating multi-device rich internet applications. In: 2012 22nd international conference on electrical communications and computers (CONIELECOMP), IEEE, pp 361–367Google Scholar
  8. Cowan DD, Lucena CJP (1995) Abstract data views: an interface specification concept to enhance design for reuse. IEEE Trans Softw Eng 21:229–243. doi: 10.1109/32.372150 CrossRefzbMATHGoogle Scholar
  9. David M (2012) Developing websites with jQuery mobile. In: HTML5 mobile websites, pp 69–108Google Scholar
  10. De la Rosa R (2007) Procesamiento de Imágenes Digitales. In: X Congreso Nacional en Informática y Computación del Instituto Tecnológico de PueblaGoogle Scholar
  11. Eklund A, Dufort P, Forsberg D, LaConte SM (2013) Medical image processing on the GPU—past, present and future. Med Image Anal 17:1073–1094CrossRefGoogle Scholar
  12. Farrugia P, Camilleri KP, Borg JC (2014) A language for representing and extracting 3D geometry semantics from paper-based sketches. J Visual Lang Comput 25:602–624Google Scholar
  13. Fernández-pacheco DG, Conesa J, Aleixos N (2013) A new agent-based paradigm for recognition of free-hand sketches. In: Procedia computer science international conference on computational science, ICCS 2010, vol 1. pp 2013–2022. doi: 10.1016/j.procs.2010.04.225
  14. Freitas F, Maia PHM (2015) JustBusiness: a framework for developing android applications using naked objects. pp 11–20. doi: 10.1109/SBCARS.2015.12
  15. Fu L, Kara LB (2011) From engineering diagrams to engineering models: visual recognition and applications. CAD Comput Aided Des 43:278–292. doi: 10.1016/j.cad.2010.12.011 CrossRefGoogle Scholar
  16. Ghatol R, Patel Y (2012) Beginning phoneGap: mobile web framework for JavaScript and HTML5. Apress, USAGoogle Scholar
  17. Holder E (2013) Cloud twin: interactive cross-platform replay for mobile applications. pp 119–120. doi: 10.1145/2508075.2514879
  18. Josa VG, Bertolino SR, Riveros JA, Castellano G (2009) Methodology for processing backscattered electron images. Application to Aguada archaeological paints. Micron 40:793–799. doi: 10.1016/j.micron.2009.07.005 CrossRefGoogle Scholar
  19. Kundu D, Samanta D, Mall R (2013) Automatic code generation from unified modelling language sequence diagrams. IET Softw 7:12–28. doi: 10.1049/iet-sen.2011.0080 CrossRefGoogle Scholar
  20. Li X, Fang M, Zhang J, Wu J (2017) Learning coupled classifiers with RGB images for RGB-D object recognition. Pattern Recogn 61:433–446CrossRefGoogle Scholar
  21. Morgado IC, Paiva ACR (2016) The iMPAcT tool: testing UI patterns on mobile applications. In: Proceedings—2015 30th IEEE/ACM international conference on automated software engineering, ASE 2015, pp 876–881Google Scholar
  22. Nedzved A, Gurevich I, Trusova Y, Ablameyko S (2013) Software development technology with automatic configuration 23:269–277. doi: 10.1134/S1054661813020120
  23. Obara B (2007) An image processing algorithm for the reversed transformation of rotated microscope images. Comput Geosci 33:853–859. doi: 10.1016/j.cageo.2006.11.007 CrossRefGoogle Scholar
  24. Olsen L, Samavati FF, Costa M, Jorge JA (2009) Computers & graphics sketch-based modeling : a survey. 33:85–103. doi: 10.1016/j.cag.2008.09.013
  25. Oyarzo F, Herrera F, Casas S (2014) API TVD, a wizard for interactive applications for Digital TV. In: Computing conference (CLEI), 2014 XL Latin American. IEEE, pp 1–8Google Scholar
  26. Panunzio M, Vardanega T (2014) A component-based process with separation of concerns for the development of embedded real-time software systems. J Syst Softw 96:105–121. doi: 10.1016/j.jss.2014.05.076 CrossRefGoogle Scholar
  27. Piszczek M (2013) Laser photography-examples of processing of image information. Acta Phys Pol A 124:546CrossRefGoogle Scholar
  28. Popp R, Raneburger D, Kaindl H (2013) Tool support for automated multi-device GUI generation from discourse-based communication models. In: Proceedings of the 5th ACM SIGCHI symposium on engineering interactive computing systems. ACM, pp 145–150Google Scholar
  29. Rogai D, Bisconti C, Faye SO (2015) Content-based multi-platform app forge. pp 2–3. doi: 10.1109/MobileSoft.2015.47
  30. Sacramento C (2014) Web application model generation through reverse engineering and UI pattern inferring. doi: 10.1109/QUATIC.2014.20
  31. Sadiq M, Pirhonen A (2011) Design time, run time, and artificial intelligence techniques for mobility of user interface. Procedia Comput Sci 3:1120–1125. doi: 10.1016/j.procs.2010.12.182 CrossRefGoogle Scholar
  32. Saikrishna P (2013) Script independent detection of bold words in multi font-size documents. IEEE, pp 1–4. doi: 10.1109/NCVPRIPG.2013.6776180
  33. The Mathworks Inc. (2016) MATLAB—MathWorks. In:
  34. Thüm T, Kästner C, Benduhn F, et al (2014) FeatureIDE : an extensible framework for feature-oriented software development. 79:70–85. doi: 10.1016/j.scico.2012.06.002

Copyright information

© Springer International Publishing AG 2018

Authors and Affiliations

  • Laura N. Sánchez-Morales
    • 1
    Email author
  • Giner Alor-Hernández
    • 1
  • Rosebet Miranda-Luna
    • 2
  • Viviana Y. Rosales-Morales
    • 1
  • Cesar A. Cortes-Camarillo
    • 1
  1. 1.División de Estudios de Posgrado e InvestigaciónTecnológico Nacional de México-Instituto Tecnológico de OrizabaOrizabaMexico
  2. 2.Instituto de Electrónica y MecatrónicaUniversidad Tecnológica de la MixtecaHuajuapan de LeónMexico

Personalised recommendations