2D preview (feature request)

Feature Ideas + Requests
1

It would be nice if the preview could show 2D arrays, rather than just the 1D line preview. Maybe I just haven’t figured out the mapper yet… maybe someone has some good documentation?

Perhaps the previewer could switch modes if a ‘width’ variable is detected in the code. If so, maybe allow seperate widths for the physical pixel array and the pattern repetition, to allow easy creation of herringbone diagonal patterns while still previewing an accurate physical 2D array.

1 Like
2

Great idea! I’m thinking of using the pixel map too.

2 Likes
3

Is this already worked on?

It was a total bummer for me not being able to find this feature, since I kinda excepted it due to the live mapper feature.

And it feels as though the most/hardest work is already done, because the software is perfectly able to display the location of the pixels in 2D/3D. Though finding a fit into the UI might be a challenge as well.

Really hope to see this feature request become reality!

1 Like
4

Hey @Paling - this is a good feature request. I just want to be sure you know about PixelTeleporter from zranger1.

You use a cheap Wemos ESP board to receive pixel data out from a Pixelblaze, and receive that data over USB into a computer. From there, it’s displayed by Processing and played through your Pixelblaze map on your screen. It took me about an hour to get set up, but it’s been essential for previewing and developing patterns when I can’t easily see the final installation (it’s not built yet, or I’m freezing cold in a lawn chair).

1 Like
5

Hello @jeff - thanks for pointing this out, though this does not answer my question if it is already worked on.

6

Yes this is on the list of things I’m working on for future versions of PB.

Right, finding a spot to put the preview is a design challenge. My current thinking is that the previews will be small to avoid making the list too tall and slowing down the page, and take the place of the 1D preview. I may have a larger one on the editor screen, but haven’t worked out the layout just yet.

7

Great to see that this feature is implemented! Really like that I’m now able to see what the Pixelblaze is outputting.

Is there a way to externally view the preview? Like extracting it from the page?

Noticed the HA integration from @vutang50 based on @zranger1 client and would love to have a card in HA showing the preview.

8

You can definitely do this, with a bit of programming.

Thanks to @pixie, the current version of the python client library can read preview data either from the saved pattern file or from the Pixelblaze’s live preview output, and access the current map to build a 1D, 2D, or 3D display. The library provides APIs to get the data, but the actual display is left to you.

@pixie has also written a standalone tool that produces an html page showing all the patterns on a Pixelblaze, with nicely rendered previews embedded.

1 Like
9

Or here’s a trick that I learned a few days ago from the WLED community on Reddit:

If you save this file as “preview.html”:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <title>Pixelblaze Live Preview</title>
        <style>body{margin:0}#patternPreview{background:#000;filter:brightness(175%);width:100%;height:100%;position:absolute}</style>
    </head>
<body>
    <div id="patternPreview">
        <script>
            function getPreviewFrame(e) {
                try {
                    if("[object ArrayBuffer]"===toString.call(e.data)) {
                        let e=new Uint8Array(event.data);
                        //  Make sure that this is a preview frame.
                        if(5!=e[0]) return;
                        //  Rescale brightness of the preview pixels since they're scaled down by the UI settings. :(
                        var maxValue = 0; for (i=1; i<e.length; i+=1) maxValue = Math.max(maxValue, e[i]); mult = 255 / (maxValue == 0 ? 1 : maxValue);
                        //  Construct a representation of the pattern.
                        var bgStyle = "linear-gradient(90deg,"; 
                        for (i=1; i<e.length; i+=3) {
                            bgStyle += `rgb(${mult*e[i]},${mult*e[i+1]},${mult*e[i+2]})`;
                            if (i < e.length-3) bgStyle += ",";
                        }
                        bgStyle += ")";
                        document.getElementById("patternPreview").style.background=bgStyle;
                    }
                }
                catch(e) {
                }
            }
            var ws;
            try { ws=top.window.ws }
            catch(e) { }
            ws&&ws.readyState===WebSocket.OPEN ? 
                (ws.send("{'sendUpdates':true}")) :
                ((ws=new WebSocket("ws://" + document.location.host + "81")).onopen=function() { ws.send("{'sendUpdates':true}") }), 
                ws.binaryType="arraybuffer", ws.addEventListener("message", getPreviewFrame)
        </script>
    </body>
</html>

And then upload it to a Pixelblaze with CURL:

curl -s -i -X POST -H "Content-Type: multipart/form-data" -F "data=@preview.html;filename=preview.html" "http://{INSERT-YOUR-PIXELBLAZE-IP-HERE}/edit"

Then you can get a live preview of the current pattern by pointing your web browser at http://{INSERT-YOUR-PIXELBLAZE-IP-HERE}/preview.html.

The related blog post on Smart Home Pursuits describes how to create a card in Home Assistant to display the preview page, but TAKE NOTE that if you’re loading Home Assistant over HTTPS then you’ll also need to set up a reverse proxy to re-serve the Pixelblaze page over HTTPS.

Note also that the live preview is 1D only; if you want 2D or 3D then that’s a whole lot harder.

6 Likes