0

sample.json is a file containing a list of values from 0 to 100 under a header called "readings":

[
    {
        "id": 105399,
        "time": "2022-11-22 01:25:23.920",
        "readings": [
            [
                0,
                2,
                3,
                2,
                ...
            ]
        ]
    }
]

I am trying to parse the data in sample.json to extract the "readings" data and convert it into an image. There are a total of 1728 integer values in "readings" ranging from 0 - 100.

The image I am trying to generate is 27 x 64 pixels using PixelFormat.rgba8888 for color coding. Here's what I have so far:

class _DemoState extends State<Demo> {

  Uint8List convertStringToUint8List(String str) {
    final List<int> codeUnits = str.codeUnits;
    final Uint8List uint8List = Uint8List.fromList(codeUnits);
    return uint8List;
  }

fetchFileData() async {
    String response;
    responseText = await rootBundle.loadString('assets/sample.json');

    setState(() {
        List raw = jsonDecode(responseText) as List;
        List readings = (raw[0]['readings']);
        Uint8List pixels = convertStringToUint8List(readingsStr);
        
        print(readings);
        print(pixels);
    });
}

print(readings); returns the List of values from the "readings" header in sample.json:

[0, 2, 3, 2, 1, ...]

Note that the values for "readings" are all positive integers with values ranging from 0 to 100, however the variable readings is a List<dynamic>.

print(pixels); returns a List of ASCII values corresponding to the contents of List readings:

[91, 48, 44, 32, 50, 44, 32, 51, 44, 32, 50, 44, 32, 49, 44, ...]

I've tried using the decodeImageFromPixels function, but I don't know how to implement it properly, especially when it comes to the ImageDecoderCallback argument.

I have tried Image.memory(pixles) but I believe I need to somehow create a method to send the pixels into a 27x64 array.

Disclosure: it's my 5th day working in Flutter and I have been stuck on this one problem for 2 days. This is also my first time posting to StackOverflow. I am at a point where I am unsure how to proceed.

ianjms
  • 9
  • 1

1 Answers1

0

You should start with this.

I need to somehow create a method to send the pixels into a 27x64 array.

You need to specify yourself how do you want to make the array? Is it first fill one row, and then start filling the next one? or maybe start filling the first column?

So basically you would need to change a 1d list to a 2d list, like here or just by nested loops like here.

Then with a 2d array, you can use a flutter_echarts package to generate a heatmap from the array's data.

It's not an easy solution, but basically i think the best thing for you is to use that one or look for some other heatmap flutter package.

JerZaw
  • 515
  • 1
  • 4
  • 9
  • Update: I've tried to use the method described in the answer below but it isn't working. I believe I know why: In my original post, the result from print(readings) is incorrect. There should be an additional set of brackets [ ] around the entire result. So, in reality, the list imported from the .json contains one element, which is the set of "readings". I know this is the case because when I call print(readings.length) I get a value of 1. I have an idea for a workaround: (1) Cast "readings" variable to String (2) Convert that String to a List or Uint8List Will update... – ianjms Nov 28 '22 at 18:47
  • Okay so I ended up just brute force by passing the json into a string then parsing it to delete the extra characters. After that I converted it to a Uint8List, cast it to a 27x64 image array from the images/images.dart package using nested for loops. – ianjms Dec 01 '22 at 06:09