Announcement

Collapse
No announcement yet.

Example project using gen4-IOD

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • Example project using gen4-IOD

    Hi,

    Very excited to start using a new gen4-iod board. Was wondering if you guys have any sort of end-to-end sample that shows how to design an interface (VisiGenie?) and then interface with the UI elements from the Arduino code. I assume it's possible to respond to button presses in the Arduino (ESP8266) code, make web requests, then update label elements with values? Do you have any example code which shows how to do this?

    Any advice / guidance you can give me would be greatly appreciated!

    Thanks!

  • #2
    Hello,

    Welcome to the forum,

    The are a few examples you can try in the Arduino IDE included with the library. Click on File, Examples, GFX4d. You can open coolgageiod in Workshop by clicking on File, Open and then navigate to your Arduino libraries folder then GFX4d then Examples then coolgageiod. The GFXdemo4D demonstrates connecting to the internet and retreiving image data from a web server and then displaying the images on the display.

    As the IoD is using the ESP8266 running the Arduino core you won't be able to use Visi-Genie but you can create graphics quickly and generate the code for a graphic element you have created by clicking on paste code in the Object Inspector

    I hope this helps.

    Best regards

    Paul



    The Manual for the library can be found here https://github.com/4dsystems/GFX4d/b...ries_R_1_1.pdf

    Comment


    • #3
      Thanks! A few more questions, because some of the examples use different techniques (from what I can tell).

      1. It looks like you can use Visi to draw controls on a form, that then gets saved as an image, and you can use the "controls" (basically coordinates of an image?) for things like a button press or updating a label? I see a button that says "Paste Static Code" which added these two lines:

      gfx.imageTouchEnable(iWinbutton1, true) ; // Winbutton1 show initialy, if required
      gfx.UserImages(iWinbutton1,0) ;

      ...that means that that button that I drew on the form will appear on the display, and I can interact with it in the Arduino code using iWinButton1?

      2. I can't tell from the examples, are you able to change the text of a button or label when using this "image" approach?
      3. What's the difference between the "image" approach and using something like the ButtonX command, which appears to dynamically create controls on the form from the Arduino code?
      4. What are the 4Dino files? What are they used for, and how are they generated?
      5. Can I use an image generated in Photoshop as the "form" and define coordinates in code for regions (e.g. buttons) so that when they are pressed I get an event/trigger for that? If so, do you have any example code for that?

      Thanks!

      Comment


      • #4
        Hello

        Yes there are a few techniques that can be used.

        Yes you can simply place a button on the screen and the check if the object has been touched. You will notice that the line gfx.UserImages(iWinbutton1,0) ; has a value with it 0. This value corresponds to a frame and in this case the button is in it's up drawn state. This is an example bit of code for a widget button inside the loop of your code.

        gfx.touch_Update();
        if(gfx.imageTouched() == iWinbutton1){
        gfx.UserImages(iWinbutton1,1) ;
        }
        if(gfx.touch_GetPen() == TOUCH_RELEASED){
        gfx.UserImages(iWinbutton1,0) ;
        }

        2. With widget buttons it isn't possible to change the text in runtime.

        3. ButtonX is a button made of primitive shapes and is self handling. Once a Buttonx is defined it can simply be checked by the command gfx.CheckButtons(); which will return the number of the button pressed. A ButtonX can be deleted and redrawn with new text in runtime and modified by size and position. The 4Dos example shows ButtonX in use as a keyboard.

        4. 4Dino files are the extension given to ino files to be recognised by Workshop 4

        5. Yes you can generate an image and use it as the form background, you will have to paste code on Form0 as workshop will turn it into an image and your code will display it a start up. Yo can then check for a touch in the co-odinates that you require.

        gfx.touch_Update();
        int x = gfx.touch_GetX();
        int y = gfx.touch_GetY();
        int p = gfx.touch_GetPen();
        if(p == TOUCH_PRESSED){
        if(x > 50 && x < 100 && y > 50 && y < 100){ // this will check for a touch in the area of the screen x from 50 to 100 and y from 50 to 100
        // do something
        }
        }

        I hope this helps

        Best regards

        Paul

        Comment

        Working...
        X