3 Replies Latest reply on Nov 7, 2016 12:38 PM by Intel Corporation

    Edison's GUI - NodeJs + HTML5?

    JamesLeo

      Hi,

      We know that Edison has no dispaly interface, but can do a web server by NodeJS.

      There is a sample of NodeJs for sever application which dispaly temperature value.

      HTML5 has many properties of drawing/animation, but less document for IOT hardware.

      Is it possible to make a nice GUI for Edison by use of NodeJS and HTML5?  any helpful document or code sample?

       

      Thanks

       

      James

        • 1. Re: Edison's GUI - NodeJs + HTML5?
          Intel Corporation
          This message was posted on behalf of Intel Corporation

          Hello  James,
           
          Thanks for reaching out!
           
          I believe it is possible to make a very nice web GUI using a HTML application. However, this has more to do with HTML+CSS+Javascript coding than with Edison. I mean, in the end it will be a browser the one who will interpret the HTML/CSS/JS files, the server just needs to give access to these files.
           
          Of course you'll need to use Node.js to set up the server that people will access and to interpret the data you send/receive to/from the GUI but how the website actually looks is completely dependent on how you code the HTML/CSS. On quick search online I found a couple of guides that might interest you, nevertheless, you can search for one that adapts better to your specific needs.
           
          https://24ways.org/2012/how-to-make-your-site-look-half-decent/
          https://code.tutsplus.com/tutorials/coding-a-beautiful-website-from-scratch--net-4940
           
          You can actually take the example as the base of your project, keep the server part and modify the actual website. This project sounds very interesting and I encourage you to continue and share your progress with the community.
           
          I hope this information helps you.
          -Peter.

          • 2. Re: Edison's GUI - NodeJs + HTML5?
            JamesLeo

            Hi, Peter

            Thanks for you encouragement.

            At first, I'll make a dynamic html to implement IO fuction with internal viarables.

            And then add some periodic tasks like ADC, GPIO pin toggle,,,in the background.

            The final target is to create interface between NodeJS and c++ modules ( some application like OpenCV coded in C++).

            Any suggestion for step by step?

             

            Thanks

            James

            • 3. Re: Edison's GUI - NodeJs + HTML5?
              Intel Corporation
              This message was posted on behalf of Intel Corporation

              Hi James,
               
              This is a very specific project, so, you find guides that will meet all the requirements. So, what I would try to do is divide the project in smaller tasks. For example:
               
              Project: Create a web based GUI that interacts with the physical interfaces of Edison
              --Graphic side
              -----Code the HTML/CSS
              -----Create the web server that will receive the clients
              -----Test that everything work fine
              --Edison side
              -----Implement ADC, GPIO toggles, etc.
              -----Implement OpenCV to the project
              -----Test that everything work fine
              --Integrate the graphic side to Edison's scripting
              -----Fuse both parts of the project
              -----Fix any issue that comes with the integration
              -----Test that everything work fine
               
              I know that is a little bit over simplistic but it's just to give you an Idea. You are already off to a good start by taking the sample code that uses a web server to display the temperature read by Edison. This is an excellent base, I suggest you to start by creating a simple web interface that does everything simple and then modify it to be more appealing. If you do this in parallel to the rest of the project, it shouldn't be as complex to integrate both parts together.
               
              I hope this helps, if you have any doubts, please don't hesitate to come back to the community, we'll try to help you in any way we can.
              -Peter.