Ks0262 keyestudio

Using Arduino Programming Questions
1

Hi all, again here sharing some hopefully useful info.

I've got the Ks0262 keyestudio and started to play with it with my Arduino Nano. I've uploaded the sample code and all went fine.

Later on I wanted to "show my own images" on it, and realized it was somehow hard to design my own "bitmaps" and display them (I admit probably there is a simpler way and I did not get to it yet), because the way the byte array is converted into rows ( byte[i] + byte[i+16].

Well to solve that, I've done a relative simple application that allows me (you) to draw "pixels" and get the byte array already encoded ready to use.

If you are on the same situation, feel free to head to github, I've uploaded it here (including the precompiled binary).

Mind the UI please :smiley: some squares might look more like a rectangle, so just ignore that part :slight_smile:

Here is how it looks:
usage

Yeah I did it on C# as a Desktop App (my bad, I come from the dark side), if anyone can create a web version from it, then be my guest :slight_smile:

Copy & paste from my README.md

Features

1. Grid-Based Design Interface

  • The app provides a 16x16 pixel grid where each pixel can be toggled on or off. Users can directly interact with this grid to create custom designs.
  • Each cell in the grid represents a bit in the byte array output. Toggling a cell changes its state from low (gray) to high (red), corresponding to a binary value of 0 or 1.

2. Dynamic Grid Control

  • Users can configure the grid size using combo boxes to select different horizontal and vertical bit resolutions (multiples of 4, ranging from 4x4 to 64x64).
  • This flexibility allows for a wide variety of pattern sizes beyond the default 16x16 grid.

3. Byte Array Output

  • The app automatically converts the current state of the grid into a hexadecimal byte array, displayed in a text box. This byte array can be directly used in embedded programming for LED matrices.
  • Supports two conversion methods:
    • RAW Conversion: Converts the grid as is into a byte array, row by row.
    • KS0262 Conversion: A special format for specific LED drivers, which uses a different byte arrangement.

4. Load and Apply Byte Arrays

  • Users can paste existing byte arrays into the text box. The app will interpret and apply these arrays to the grid, enabling easy visualization and modification of pre-existing patterns.
  • When a valid byte array is pasted, the grid updates to reflect the pattern represented by the array.

5. Control Options for Rows and Columns

  • Context menus available on row and column labels offer quick actions:
    • Low all: Sets all cells in the selected row/column to low (gray).
    • High all: Sets all cells in the selected row/column to high (red).
    • Invert all: Toggles the state of all cells in the selected row/column.
  • Labels can be clicked (left or right) to show the context menu, providing easy access to these features.

6. Global Control Buttons

  • Three main buttons allow for global control of the grid:
    • High All: Sets all cells in the grid to high (red).
    • Low All: Sets all cells in the grid to low (gray).
    • Invert All: Inverts the state of every cell in the grid.

7. Tooltips

  • Each cell in the grid has a tooltip displaying its coordinates in the format Row X, Col Y, aiding in precise design and debugging.

8. Context Menu for Labels

  • Right-clicking on row or column labels opens a context menu with options to modify the entire row or column, improving ease of use for large grids.

9. Resizable Grid Cells

  • The grid is responsive and adjusts cell sizes to ensure uniformity. The layout adapts when the window is resized, maintaining square proportions for each cell.

How to Use

  1. Setting Up the Grid:
  • Open the app and choose the desired grid size using the combo boxes for horizontal and vertical bits. Click on "Generate Table" to create the grid.
  1. Designing a Pattern:
  • Click on individual cells to toggle their state. Red indicates high (1), and gray indicates low (0). Use the context menu on labels for bulk actions on rows and columns.
  1. Converting to Byte Array:
  • The byte array is automatically updated as you modify the grid. The array is shown in the text box at the bottom, formatted for easy copy-pasting into code.
  1. Loading a Byte Array:
  • Paste a byte array into the text box and click "Byte Array to Matrix". The grid will update to show the pattern represented by the array.
  1. Saving Patterns:
  • Copy the generated byte array from the text box for use in your embedded projects.
  1. Global Controls:
  • Use the "High All", "Low All", and "Invert All" buttons to quickly modify the entire grid.