Workflow Basics
Meet the KnowCode tool and start to build your Graphical User Interface 5 times faster!

Designed to code for embedded engineers

Here is a step-by-step guide on how to use KnowCode more smoothly and easily.
And for this first phase of the tool, the MVP (Minimum Viable Product) must to use the Windows operating system.
To use the KnowCode tool you need an early access key. If you don't have one yet, order it here.
This workflow includes 4 basic steps:
  1. 1.
    Upload the design files: Check that the reference files you received are correct and then upload them to the platform;
  2. 2.
    Adjusments and navigation: After uploading the files in KnowCode, you should check the AI results and then set the correct screen order;
  3. 3.
    Download: This is the easiest step, you just need to finish the project and choose the framework you are working with. For now, KnowCode is compatible with TouchGFX, which generates code for ST boards. If you are interested in other frameworks, join the waiting list;
  4. 4.
    Run: The last step is done outside KnowCode, where you will open your project, make any adjustments and compile it to run on your board.
If you prefer a more illustrative tutorial in video format, click here.

Step 1: Upload the design files

With your early access key, go to the KnowCode tool and fill in the fields with the following information:
  • Early access key: Fill this field with the access key that you have received in the registered email;
  • Project name: Put here the name of your project. At completion, the ZIP file with the code will be generated with this name;
  • Screenshots: Here you must select the ZIP file with the screens of your application in JPG or PNG files. Each image will correspond to an application screen;
  • Images and icons: Here a ZIP file must be sent containing all images and icons used in the interfaces. These are the images that are usually in the resources folder. If you have questions or you are not sure if you have all the images, ask the designer or the client.
KnowCode initial page with early access, project name, screenshots and assets fields
After uploading all the files just click on "Send Project" and wait a few seconds for the KnowCode Artificial Intelligence to process the files.

Step 2: Adjusments and navigation

Markup Settings Screen and Project Navigation Configuration in KnowCode
After the KnowCode AI processes the whole project it will recognize the following attributes of each interface:
  • Background color of the screen;
  • Components type and style;
  • Component position;
  • Text content and color.
In this step you will check if the markings, component types and texts are correct. Remembering that using the left bar option you can also:
  • Click on the arrow to edit size or positioning of components;
  • Click on the + button and add new components choosing the corresponding type.
And on the right side you can click in a component and edit its properties, for example:
  • Component type;
  • Height and width;
  • Color Background;
  • Image Background (the asset's name);
  • Text Content and Color.
Also in NAVIGATION you can select which screen the selected component might call when clicked, thus creating your GUI navigation events.
Now, It's just click on DONE and go to the next step!

Step 3: Download your TouchGFX project

Now you only need to select which framework you want to build your project with and download the zip file.
For now, KnowCode is only available for TouchGFX which is compatible with ST boards.
But soon we are going to support QT, LGVL and React. If you want to build embedded GUI prototypes for one of these frameworks, please feel free to join our waitlist!

Step 4: Run your project

This step takes place outside the KnowCode but it is still important. After downloading the ZIP file you must unzip it and import the project in TouchGFX.
With the project open, click on "run simulator" to check if the screens and screens navigation are ok.
After checking everything, now is the best part: just click on "generate code" to have your code compiled and ready to run on your ST board.
Last modified 4mo ago