Giter Club home page Giter Club logo

stm32_uikit's Introduction

STM32_UIKit & TrueType renderer

A lightweight kit that uses a screen and touch panel with STM32.
Manipulate the 8bit/1pixel frame buffer.

Contents

  • Display ILI9341 conotrol(FSMC)
  • Touch Panel XPT2046
  • Bitmap Control
  • UIKit that integrates the above

Demos

Structure

structure

STM32_UIKit Quick start

The following is the basic idea. See example for full code.

#include <FSMC_ILI9341.h>
#include <bitmap.h>
#include <touch_2046.h>
#include <stm32uikit.h>

#define COLOR_BACKGROUND 0x00

uint8_t frameBuffer[ILI9341_PIXEL_COUNT] = {0};

int main(void){
  //touch panel init
  Coordinate_t touch_s3uikit;

  //display init
  ILI9341_init();
  ILI9341_setRotation(1);

  //bitmap init
  char string[30];
  bitmap_setparam(DISPLAY_WIDTH, DISPLAY_HEIGHT, COLOR_BACKGROUND, frameBuffer); //Set framebuffer size, background color, framebuffer pointer
  bitmap_clear();

  //loop
  while (1) {
    //get touched point
    touch_s3uikit = xpt2046_read(&hspi2, touch_cal);

    //set components. for example,,,
    stm32uikit_sllideBar(touch_s3uikit, 10, 100, 190, &slide_val);

    ILI9341_printBitmap(frameBuffer); //flush framebuffer to display
    bitmap_clear(); //clear bitmap
  }
}

STM32_UIKit Components

Progress Bar

void stm32uikit_rectProgress(uint16_t x0, uint16_t y0, uint16_t width, uint16_t val1000) fig1 void stm32uikit_roundProgress(uint16_t x0, uint16_t y0, uint16_t width, uint16_t val1000) fig2

Analog Meter

void stm32uikit_analogMeter(uint16_t x0, uint16_t y0, uint16_t val1000) fig3

Circle Meter

void stm32uikit_circleMeter(uint16_t x0, uint16_t y0, uint16_t val1000, uint16_t thickness) fig4

Status

void stm32uikit_status(uint16_t x0, uint16_t y0, uint16_t status) fig5

Slide Bar

void stm32uikit_sllideBar(Coordinate_t touch, uint16_t x0, uint16_t y0, uint16_t width, uint16_t *val1000)
fig6

Button

void stm32uikit_roundButton(Coordinate_t touch, uint16_t x0, uint16_t y0, uint16_t width, uint8_t *val) fig7

Switch

void stm32uikit_switch(Coordinate_t touch, uint16_t x0, uint16_t y0, uint8_t *val) fig8

Input structure of a component with input

Touched point.

typedef struct {
   uint16_t x;
   uint16_t y;
   uint16_t z;
} Coordinate_t;

If there is no z-axis information, increase the z value to more than 300 when touching.

TrueType Quick start

The following is the basic idea. See example for full code.

#include <FSMC_ILI9341.h>
#include <bitmap.h>

#define COLOR_BACKGROUND 0x00

uint8_t frameBuffer[ILI9341_PIXEL_COUNT] = {0};

int main(void){
  //display init
  ILI9341_init();
  ILI9341_setRotation(1);

  //bitmap init
  char string[30];
  bitmap_setparam(DISPLAY_WIDTH, DISPLAY_HEIGHT, COLOR_BACKGROUND, frameBuffer); //Set framebuffer size, background color, framebuffer pointer
  bitmap_clear();

  //SD FatFs init
  if(f_mount(&bitmap_truetype_fs.FatFs, "", 1) != FR_OK){
    while(1);
  }
  int total_sect = (bitmap_truetype_fs.FatFs.n_fatent - 2) * bitmap_truetype_fs.FatFs.csize / 2048;
  sprintf(string, " ->Total: %dMB", total_sect);

  bitmap_terminal("SD Mount: Successfully", 0, 0xff, TERMINAL_LINE_MAX);
  bitmap_terminal(string, 0, 0xff, TERMINAL_LINE_MAX);
  ILI9341_printBitmap(frameBuffer);

  //open ttf file
  if(f_open(&bitmap_truetype_fs.File, "/fonts/font.ttf", FA_OPEN_EXISTING | FA_READ) != FR_OK){
    while(1);
  }
  bitmap_terminal("File open: Successfully", 0, 0xff, TERMINAL_LINE_MAX);
  ILI9341_printBitmap(frameBuffer);
  HAL_Delay(1000);

  //Truetype init
  uint8_t res = truetype_setTtfFile(0);
  sprintf(string, "setTtfFile: %d", res);
  bitmap_terminal(string, 0, 0xff, TERMINAL_LINE_MAX);
  ILI9341_printBitmap(frameBuffer);

  truetype_setCharacterSize(40); //set height
  truetype_setCharacterSpacing(0, 1); //set Character Spacing. (characterSpace, kerningOn)
  truetype_setTextBoundary(0, 280, 320); //set line feed position. (start_x, end_x, end_y)
  truetype_setTextColor(0xff, 0xff, 1); //set text color. (in, out, fillingOn)
  truetype_setTextRotation(0); //set text rotation

  //loop
  while (1) {
    //Truetype countup test
    for(uint16_t i = 1; i <= 1000; i++){
      sprintf(string, "%04d", i);
      truetype_textDraw(80, 5, string);

      ILI9341_printBitmap(frameBuffer);
      bitmap_clear();
    }
  }
}

Known issues

  • Nothing now.

Notes

  • Set "SDIOCLK Clock divide factor" appropriately. If the clock is too fast, it will fail to access SD and stop working.

Development environment

stm32_uikit's People

Contributors

k-omura avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

Forkers

xw1998

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.