Friday, November 29, 2013

Interactive Embedded Touch GUIs with HTML5

Recently we've been considering graphical user interfaces (GUIs) from the point of view of a systems integrator. There are several thing to consider, when creating a complete solution, such as: several different software platforms ( embedded devices, phones, tablets, desktop computers, ...), data network considerations and future proofing.

Several technical solutions come to the rescue here. Firstly, there are standards that span several (all involved) platforms and allow software development to be done once - with perhaps some adaptation for each platform. Secondly, networks of all sizes and shapes allow for powerful distributed systems, where data can be shared and interaction happens across the room or from the other side of the globe.

The Ixonos Embedded HTML5 library - ixgui.js - has proven to be a highly flexible and scalable platform for creating embedded GUIs. Recently, a number of system topologies have been explored using ixgui.js, involving running the GUI as detached from the embedded device. HTML5 obviously fits natively into this kind of distributed environment. The GUI can be hosted on the cloud, on an embedded device or basically anywhere.

Sensor data sharing in our demonstrator is fascilitated using the Ixonos sensact library, which you can read about in an earlier blog post.

The user interface for this demo is simple. It displays data coming in from the TI Sensor Hub Booster Pack. In addition, there is an RPM display and setting slider, but that is only for show: there is no motor in this version - but in later ones there will. below is a screenshot of the GUI:

Simple Touch Interface using ixgui.js
The below video illustrates using this GUI on the Texas Instruments AM3359 Evaluation Module with a separate, more elaborate, GUI running on a detached display.

ixgui.js is a HTML5-based GUI library, which allows performance optimized GUI creation by using the Canvas 2D interface for fast graphics and fine control over what is drawn at a given time. It is designed around the principles of simplicity, performance, standards compliance and programmer friendliness.

This article outlines some key methods for improving Canvas 2D performance. It has been extremely gratifying to fine-tune drawing for ixgui.js, and indeed we implement optimization on several levels.

On the top level, rendering is optimized by only drawing what needs to be redrawn. For most GUIs, only when items are interacted with, do they require to be redrawn.

Pre-rendering: often a large part of an item is static, and actually requires no update at all during the entire lifecycle of an application. In these cases, we can simply pre-render those areas that don't change onto a separate buffer, and reuse that for each redraw. As an example, see the below picture for how the vertical sliders in the demo are drawn:

Finally, at the lowest level possible (in JavaScript), some optimization is achieved by only feeding integer values to drawing routines. All coordinates and dimensions throughout the GUI are cast to integers.

Mikael Laine, SW Specialist - Ixonos

55 comments:

  1. This blog post deliver key function of HTML5. Here i easily learn how to perform this activity.
    HTML5 Game Development Company

    ReplyDelete
  2. HTML5 is not an easy language. It requires tough processes to understand. That's why it's developers have huge demand in the market.
    Buy Digital Products

    ReplyDelete
  3. can control the introduction of the screen in any capacity you see fit. Found in this light, portable PCs are quite less touch-accommodating. faytech - Touchscreen Display PCs and Touch Screen Manufacturer

    ReplyDelete
  4. I have read all the comments and suggestions posted by the visitors for this article are very fine,We will wait for your next article so only.Thanks! large

    ReplyDelete
  5. Replies
    1. Many people struggle with the process of DissertationWriter . They may not have the time to dedicate to the task, or they may not be skilled writers. In either case, it is worth hiring a professional to do it for you. A good dissertation writer will follow a detailed plan to get you the results you need.

      Delete
  6. if anyone looking for best Advanced Excel training institute in delhi so contact here +91-9311002620 visit https://www.htsindia.com/Courses/business-analytics/adv-excel-training-course

    ReplyDelete
  7. I precisely needed to thank you so much yet again. I do not know the things I would’ve taken care of without these secrets contributed by you regarding this problem. It seemed to be a very frightful crisis for me, but encountering a new well-written tactic you processed it forced me to jump with contentment.
    카지노
    사설토토

    ReplyDelete
  8. This article was written by a real thinking writer without a doubt. I agree many of the with the solid points made by the writer. I’ll be back day in and day for further new updates.
    토토사이트
    경마
    온라인경마

    ReplyDelete
  9. great post really appreciable work. That will be valuable to everyone who uses it, including myself. Many thanks...
    릴게임

    ReplyDelete
  10. Throughout history, powerful people have been able to prevent some things or cause them to happen. But there are some cases that the powerful and the rich are not able to deal https://footofan.com/about-footofan/ with. They can only be associated with these few cases. One of these is technology.

    ReplyDelete
  11. Elon Currency Development Team believes that this currency is completely different from صرافی نیل Sheiba or Dodge Quinn digital currency and is a token that is developing day by day.

    ReplyDelete
  12. You are my inhalation, I have few web logs and very sporadically run out from to post .

    오피

    ReplyDelete
  13. You actually make it seem so easy with your presentation but I find this matter to be really something which I think I would never understand. It seems too complex and extremely broad for me. I am looking forward for your next post, I’ll try to get the hang of it!

    건전마사지

    ReplyDelete
  14. Excellent goods from you, man. I have understand your stuff previous to and you are just extremely excellent. 야한동영상

    Click this link
    야설

    ReplyDelete
  15. Thank you for sharing this information. I read your blog and I can't stop my self to read your full blog. Again Thanks and Best of luck to your next Blog in future. 일본야동

    Click this link
    한국야동

    ReplyDelete
  16. So informative things are provided here, I really happy to read this post, I was just imagine about it and you provided me the correct information I really bookmark it, for further 국산야동

    Click this link
    야설
    .

    ReplyDelete
  17. What your declaring is entirely genuine. I know that everyone need to say the exact same factor, but I just believe that you put it in a way that all of us can comprehend. 중국야동넷

    Click this link
    야설

    ReplyDelete
  18. Уour blog providеd us useful information to work on. Үou have done a marvelous job! 파칭코

    ReplyDelete
  19. Very good blog! Do you have any suggestions for aspiring writers? I’m planning to start my own site soon but I’m a little lost on everything. 토토일정

    ReplyDelete
  20. I am unable to read articles online very often, but I’m glad I did today. This is very well written and your points are well-expressed. Please, don’t ever stop writing. 토토사이트

    ReplyDelete
  21. This is very educational content and written well for a change. It's nice to see that some people still understand how to write a quality post.! 스포츠토토

    ReplyDelete
  22. Thanks for writing such a good article, I stumbled onto your blog and read a few post. I like your style of writing... 파워볼

    ReplyDelete
  23. Thank you for such a well written article. It’s full of insightful information and entertaining descriptions. Your point of view is the best among many. 스포츠토토

    ReplyDelete
  24. I love the way you write and share your niche! Very interesting and different! Keep it coming! rolet online

    ReplyDelete
  25. Prolific Animations is a California based animation company. The company thrives on creating memorable stories through the use of 2D and 3D Animation, Motion Graphics, VFX, Character Design, etc. Our in-house team has over a decade of combined experience in the animation and storytelling industry.

    ReplyDelete
  26. Thank you for sharing an amazing & wonderful blog. This content is very useful, informative and valuable in order to enhance knowledge. Keep sharing this type of content with us & keep updating us with new blogs. Apart from this, if anyone who wants to join the Advanced Excel Training institute in Delhi, can contact 9311002620 or visit our website-
    https://htsindia.com/Courses/Business-Analytics/adv-excel-training-course

    ReplyDelete
  27. I savour, lead to I found exactly what I used to be having a look for. You’ve ended my four day long hunt! God Bless you man. Have a nice day. Bye
    토토
    온라인경마

    ReplyDelete
  28. Grab the top data science course online in the convenience of your own home. Flexible schedules, top-notch industry instructors, and painstakingly designed curriculum. Now available!data science course institute in nagpur

    ReplyDelete
  29. Once you have created the touch GUI, test it on your development board to ensure that it works as expected. You can test it using a browser on the development board or by connecting to it from a remote device. Assignment Writing Service

    ReplyDelete
  30. Thanks for sharing the article, its gives useful information. Keep sharing more updates. dc sex crimes lawyer

    ReplyDelete
  31. At Xtreme Web Studios, we take immense pride in our highly efficient and methodical approach, dedicated to empowering brands and nurturing their growth right from the beginning. Our comprehensive range of design and development services catalyzes your brand to establish and sustain its digital presence and distinctive persona.

    ReplyDelete
  32. but I cannot access external websites or specific reviews as my training only includes knowledge up until September 2021. If you have a specific question or topic related to technology or a tech blog, I'd be happy to provide information or insights based on my existing knowledge. Please feel free to ask your question, and I'll do my best to assist you. Reckless Driving Virginia Code

    ReplyDelete
  33. Un abogado de divorcios en Stafford, VA, ofrece orientación legal especializada y representación en cuestiones de divorcio, ayudando a los residentes de Stafford, Virginia, a navegar por este proceso legal complejo. Abogado Divorcios Stafford VA

    ReplyDelete
  34. HTML5's canvas element and multimedia features enable the integration of graphics, animations, and video, providing a versatile toolkit for crafting engaging user interfaces. The use of responsive design principles ensures that the GUI adapts seamlessly to different screen sizes and resolutions, catering to the diverse landscape of embedded touch-enabled devices. virginia beach uncontested divorce manual

    virginia uncontested divorce procedure

    ReplyDelete
  35. "Interactive Embedded Touch GUIs with HTML5" is a comprehensive guide that explains the process of creating user interfaces using HTML5. It offers clear explanations and practical examples, making it an essential resource for both beginners and experienced developers. The author's expertise is highlighted, and real-world case studies add practicality. The book is a must-read for those interested in building interactive and responsive GUIs using HTML5.
    Ayuda Violencia Doméstica Nueva Jersey

    ReplyDelete
  36. The article discusses a system architecture and GUI development approach using HTML5 and the ixgui.js library for embedded devices. It emphasizes the importance of considering various platforms, network considerations, and future-proofing when developing solutions. The use of the Ixonos sensact library for sensor data sharing enhances the system's functionality for real-time data interaction. The article also highlights the importance of performance optimization through Canvas 2D, focusing on simplicity, performance, standards compliance, and programmer friendliness. The optimization techniques, such as selective rendering and pre-rendering static elements, enhance the GUI's responsiveness and resource efficiency. The article suggests future iterations may include the integration of additional hardware components, such as motors, to further demonstrate the versatility and practicality of the GUI solution. The article serves as a comprehensive guide for developers seeking to leverage HTML5 and ixgui.js for creating interactive GUIs in embedded systems, contributing significantly to the advancement of embedded GUI development practices. dui lawyer emporia virginia

    ReplyDelete
  37. If you're dealing with traffic violations in Fauquier County, VA, seeking the assistance of a skilled traffic lawyer can be beneficial. These legal professionals specialize in handling various traffic offenses, including speeding tickets, reckless driving charges, and DUI/DWI cases. A Traffic Lawyer Fauquier Va County can assess the details of your case, develop a defense strategy tailored to your situation, and represent you in court proceedings. With their expertise, they can work to minimize the consequences of your traffic violations and protect your driving record.

    ReplyDelete
  38. When selecting a reckless driving lawyer, it's essential to consider factors such as experience, reputation, and track record of success in handling reckless driving cases. A skilled attorney not only defends against the charges but also offers guidance and support throughout the legal process, striving to minimize the impact on the client's life and future. reckless driving Lunenburg VA lawyer

    ReplyDelete