# Perspective - Best Way To Display Grid 10,000 x 384

**URL:** <https://forum.inductiveautomation.com/t/perspective-best-way-to-display-grid-10-000-x-384/50526>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [September 1, 2021, 4:47pm UTC](https://forum.inductiveautomation.com/t/perspective-best-way-to-display-grid-10-000-x-384/50526 "2021-09-01T16:47:28Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![bfearnow](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bfearnow/32/3337_2.png) [@bfearnow](https://forum.inductiveautomation.com/u/bfearnow)\
**Post date:** [September 1, 2021, 4:47pm UTC](https://forum.inductiveautomation.com/t/perspective-best-way-to-display-grid-10-000-x-384/50526/1 "2021-09-01T16:47:28Z")

</div>

All,

I have data that is just 1s and 0s. I am reading the bits out of 120,000 DINTs. That’s a burden as it is, but now I am trying to display this in a grid format (0=Color 1, 1=Color 2). I tried to create a table that was 10,000 rows and 384 columns via a script without any data even in it. Once I get out to about 100 columns at 10,000 rows deep, my gateway crashes. Am I missing a very simple way to display this information?

---

<div class="post-metadata">

**Author:** ![Kevin.Herron](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/kevin.herron/32/7259_2.png) [@Kevin.Herron](https://forum.inductiveautomation.com/u/Kevin.Herron)\
**Post date:** [September 1, 2021, 4:49pm UTC](https://forum.inductiveautomation.com/t/perspective-best-way-to-display-grid-10-000-x-384/50526/2 "2021-09-01T16:49:41Z")

</div>

Are you trying to display this in Vision or Perspective?

edit: oops, title…

---

<div class="post-metadata">

**Author:** ![bfearnow](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bfearnow/32/3337_2.png) [@bfearnow](https://forum.inductiveautomation.com/u/bfearnow)\
**Post date:** [September 1, 2021, 4:50pm UTC](https://forum.inductiveautomation.com/t/perspective-best-way-to-display-grid-10-000-x-384/50526/3 "2021-09-01T16:50:40Z")

</div>

Perspective. I don’t think I was clear its 3,840,000 bits, 10,000x384

Thanks for the speedy response.

---

<div class="post-metadata">

**Author:** ![Kevin.Herron](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/kevin.herron/32/7259_2.png) [@Kevin.Herron](https://forum.inductiveautomation.com/u/Kevin.Herron)\
**Post date:** [September 1, 2021, 4:51pm UTC](https://forum.inductiveautomation.com/t/perspective-best-way-to-display-grid-10-000-x-384/50526/4 "2021-09-01T16:51:46Z")

</div>

I don’t know… this seems like way too much data to display using any kind of first class components. If it were Vision I’d suggest custom rendering using the paintable canvas. For Perspective you’d have to render an image in script and load it somehow. Maybe somebody else has a better idea.

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [September 1, 2021, 4:54pm UTC](https://forum.inductiveautomation.com/t/perspective-best-way-to-display-grid-10-000-x-384/50526/5 "2021-09-01T16:54:26Z")

</div>

Yeah, the first vaguely performant way that occurs to me is manually constructing a BMP as a byte array, then rendering it using a data URI in an Image component.  
It won’t be interactable, and actually constructing the image bytes is non-trivial, but that’s my first idea.

Stepping back a bit - is it actually that useful to display 120,000 points to someone? What action is going to be taken based on the state of this mega-display?

---

<div class="post-metadata">

**Author:** ![bfearnow](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bfearnow/32/3337_2.png) [@bfearnow](https://forum.inductiveautomation.com/u/bfearnow)\
**Post date:** [September 1, 2021, 5:02pm UTC](https://forum.inductiveautomation.com/t/perspective-best-way-to-display-grid-10-000-x-384/50526/6 "2021-09-01T17:02:57Z")

</div>

@paul-griffith you are asking the same questions we are asking. I have been thinking the amount of time involved in this is not worth the effort.

@Kevin.Herron , @paul-griffith I was on the track of creating an image at one point. It was looking like I was going to need to add some python libraries to make it happen.

---

<div class="post-metadata">

**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\
**Post date:** [September 1, 2021, 5:27pm UTC](https://forum.inductiveautomation.com/t/perspective-best-way-to-display-grid-10-000-x-384/50526/7 "2021-09-01T17:27:17Z")

</div>

A WebDev endpoint to to construct an image is what I would do.

---

<div class="post-metadata">

**Author:** ![bfearnow](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bfearnow/32/3337_2.png) [@bfearnow](https://forum.inductiveautomation.com/u/bfearnow)\
**Post date:** [September 1, 2021, 6:27pm UTC](https://forum.inductiveautomation.com/t/perspective-best-way-to-display-grid-10-000-x-384/50526/8 "2021-09-01T18:27:53Z")

</div>

Okay looking into this now. Thanks for the advice.

---

<div class="post-metadata">

**Author:** ![peter](https://avatars.discourse-cdn.com/v4/letter/p/278dde/32.png) [@peter](https://forum.inductiveautomation.com/u/peter)\
**Post date:** [September 1, 2021, 10:44pm UTC](https://forum.inductiveautomation.com/t/perspective-best-way-to-display-grid-10-000-x-384/50526/9 "2021-09-01T22:44:56Z")

</div>

I can’t remember who did it, but in the last 12 months there was a an impressive solution presented in this forum about how to generate a really large heat map. I’d post a link if I could find it.

---

<div class="post-metadata">

**Author:** ![Kevin.Herron](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/kevin.herron/32/7259_2.png) [@Kevin.Herron](https://forum.inductiveautomation.com/u/Kevin.Herron)\
**Post date:** [September 1, 2021, 10:46pm UTC](https://forum.inductiveautomation.com/t/perspective-best-way-to-display-grid-10-000-x-384/50526/10 "2021-09-01T22:46:03Z")

</div>

This one maybe?

> [@Reading values from database and converting it using python](https://forum.inductiveautomation.com/t/reading-values-from-database-and-converting-it-using-python/44508/12):
>
> Looks like @JordanCClark beat me to it smile However, if you do want to go down the XY chart route here is what I have created: 
> 
> > **xAxis Props**
> >
> > [ { "name": "col", "label": { "enabled": false, "text": "Time", "color": "" }, "inversed": false, "visible": false, "tooltip": { "enabled": true, "text": "…

---

<div class="post-metadata">

**Author:** ![peter](https://avatars.discourse-cdn.com/v4/letter/p/278dde/32.png) [@peter](https://forum.inductiveautomation.com/u/peter)\
**Post date:** [September 1, 2021, 10:47pm UTC](https://forum.inductiveautomation.com/t/perspective-best-way-to-display-grid-10-000-x-384/50526/11 "2021-09-01T22:47:29Z")

</div>

That was teh one I was thinking about.

---

<div class="post-metadata">

**Author:** ![Kevin.Herron](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/kevin.herron/32/7259_2.png) [@Kevin.Herron](https://forum.inductiveautomation.com/u/Kevin.Herron)\
**Post date:** [September 1, 2021, 10:50pm UTC](https://forum.inductiveautomation.com/t/perspective-best-way-to-display-grid-10-000-x-384/50526/12 "2021-09-01T22:50:52Z")

</div>

It is neat, but I don’t think plotting 3.84 million points on the XY chart ends well 😆

---

<div class="post-metadata">

**Author:** ![bfearnow](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bfearnow/32/3337_2.png) [@bfearnow](https://forum.inductiveautomation.com/u/bfearnow)\
**Post date:** [September 2, 2021, 12:16am UTC](https://forum.inductiveautomation.com/t/perspective-best-way-to-display-grid-10-000-x-384/50526/13 "2021-09-02T00:16:36Z")

</div>

@peter @Kevin.Herron

The chart may not work, but that SVG library may be something to look into unless I am missing something. Just need a viewer to open the SVG and I suppose a window command to open it. What I didn’t explain is that this isn’t something that needs to be kept up with realtime. Maybe created every several minutes and displayed as a static image. At least that’s what the requirements are for now.

Thanks.

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [September 2, 2021, 9:11am UTC](https://forum.inductiveautomation.com/t/perspective-best-way-to-display-grid-10-000-x-384/50526/14 "2021-09-02T09:11:47Z")

</div>

even with svg, looping over that many elements is gonna require some time.  
i dont think it can handle that many elements. i doubt it kan even handle 5k…

id say images usualy work faster with these kinda numbers. or create a module and use html5canvas / js to generate it, that goes a lot better. With html5canvas ive generated more than a million moving 3d objects so a grid should be no problem xd

---

<div class="post-metadata">

**Author:** ![JordanCClark](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/jordancclark/32/83362_2.png) [@JordanCClark](https://forum.inductiveautomation.com/u/JordanCClark)\
**Post date:** [September 2, 2021, 12:40pm UTC](https://forum.inductiveautomation.com/t/perspective-best-way-to-display-grid-10-000-x-384/50526/15 "2021-09-02T12:40:43Z")

</div>

I’m looking into something that would provide a bmp. My fear in creating an svg would be in the length of the string 😕

---

<div class="post-metadata">

**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\
**Post date:** [September 2, 2021, 12:53pm UTC](https://forum.inductiveautomation.com/t/perspective-best-way-to-display-grid-10-000-x-384/50526/16 "2021-09-02T12:53:57Z")

</div>

You create a BuffferedImage of the correct dimensions and pixel type, then get its Graphics object. Paint on the graphics object like you would in a PaintableCanvas component, then use ImageIO to generate the target file format bytes. (I would use PNG, not BMP. Compresses a bit even when lossless.)

---

<div class="post-metadata">

**Author:** ![Kevin.Herron](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/kevin.herron/32/7259_2.png) [@Kevin.Herron](https://forum.inductiveautomation.com/u/Kevin.Herron)\
**Post date:** [September 2, 2021, 1:52pm UTC](https://forum.inductiveautomation.com/t/perspective-best-way-to-display-grid-10-000-x-384/50526/17 "2021-09-02T13:52:34Z")

</div>

Some Java for inspiration if someone wants to translate to Jython:

```auto
class Scratch {
    public static void main(String[] args) throws IOException {
        Random r = new Random();
        boolean[][] data = new boolean[10_000][384];
        for (int x = 0; x < 10_000; x++) {
            for (int y = 0; y < 384; y++) {
                data[x][y] = r.nextBoolean();
            }
        }

        BufferedImage image = new BufferedImage(
            10_000,
            384,
            BufferedImage.TYPE_INT_RGB
        );

        for (int x = 0; x < 10_000; x++) {
            for (int y = 0; y < 384; y++) {
                image.setRGB(x, y, data[x][y] ? Color.RED.getRGB() : Color.BLACK.getRGB());
            }
        }

        ImageIO.write(image, "JPEG", new FileOutputStream("/Users/kevin/Desktop/test.jpeg"));
    }
}

```

Output (2mb…):

 ![test](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/0/0050b380a48684dfef82883cccb0357f50a65ab7.jpeg)

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [September 2, 2021, 2:08pm UTC](https://forum.inductiveautomation.com/t/perspective-best-way-to-display-grid-10-000-x-384/50526/18 "2021-09-02T14:08:24Z")

</div>

nice!

its kinda big but 2mb isnt the worst… the problem is that 10000x384 is so wide, not sure if you can get any usefull info out of it xd seems like it would be a better idea to split it up a couple of times and whos multiple smaller images under eachother…  
so just use less data xd

---

<div class="post-metadata">

**Author:** ![Kevin.Herron](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/kevin.herron/32/7259_2.png) [@Kevin.Herron](https://forum.inductiveautomation.com/u/Kevin.Herron)\
**Post date:** [September 2, 2021, 2:12pm UTC](https://forum.inductiveautomation.com/t/perspective-best-way-to-display-grid-10-000-x-384/50526/19 "2021-09-02T14:12:28Z")

</div>

Yeah it’s hard to believe this is actually useful to anybody. Maybe if it was blown up even larger by using multiple pixels per data point you could see patterns start to emerge (in the real data, not my random data)… but still…

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [September 2, 2021, 2:28pm UTC](https://forum.inductiveautomation.com/t/perspective-best-way-to-display-grid-10-000-x-384/50526/20 "2021-09-02T14:28:28Z")

</div>

doubling the pixels wouldnt do much help here as the ratios would still be way off.  
maybe only adding some extra in the height, but that doubles the size of the image and finding a pattern would even be harder… unless you also add in a white line or two between each row…

[Next page](https://forum.inductiveautomation.com/t/perspective-best-way-to-display-grid-10-000-x-384/50526.md?page=2)