Coding practice while waiting on V3?

[JustPete]

Yes. Thanks. I found the Pixekblaze expression docs and they are very helpful.

Still, some expressions and syntax are obscure. One example: =+… And simple math expressions apparently JS derived but documented… where.
Anyway, chugging along here.

I imagine a searchable lookup file would be super useful.

[Scruffynerf]

@JustPete

One example: =+… And simple math expressions apparently JS derived but documented… where.

Bingo. Assuming deep JS knowledge is the main “issue” with the existing document. Totally fixable. I’m not sure adjusting the existing document is the answer, so much as a “Newbie” version meant to hand hold thru the basics.

That said, someone asked about a Blockly type interface. Give that it runs on the browser, I wonder if that’s easily addable (since JS blocks exist, this would be mostly stripped down version)

Either way, the target audience is the same: newbie PB users without much if any coding experience.

Hopefully in the next months, we’re fixing that.

[JustPete]

Pretty much. Just a reference document to assist with deconstructing existing pattern code to learn what’s going on would help.

I have lots of operational knowledge with finite element, heat transfer and other mostly energy-related modeling but not JS… So, a new modeling and control environment! Cool!

I am among the “newbies” here who could “crash-test” such a doc.

[SeaLaVie]

Is there somewhere that I could download the code for the patterns that are in the pattern library to view them in text rather than in the pixel Blaze interface?

[jeff]

@SeaLaVie sure! You can view them all individually by clicking to expand each in the pattern library.

Also, if you just want a big collection of source code files, this works for now (but will eventually be taken down when the next iteration of the pattern library is out, which will be backed by this repo)

[wizard]

Unfortunately blockly is far too large to embed in Pixelblaze. Something similar could be found or created of course… I think rather than blocks more of an audio input/output mapper kind of visual editor could work well. Maybe something like https://nodered.org/ which seems to have been used to build Teensy’s audio system design tool https://www.pjrc.com/teensy/gui/ Things like this might turn the problem from a textual to a point and click interface, it doesn’t inherently change the “programming” skill challenge.

Of course a cloud/internet based app could spit out PB code.

I’m interested in enhancing the textual interface for code, improving documentation, and writing or curating tutorials for all skill levels. I’ve been looking at adding autocomplete, and built-in hover docs like IntelliSense.

[Scruffynerf]

@wizard

Unfortunately blockly is far too large to embed in Pixelblaze

I was thinking more than it would be loaded from a page like Blockly.pixelblaze.com but unsure if https crosssite is an issue

Added later: I suspect it would be, because blockly is basically adding a handful of js to be loaded onto the page. However…

http proxy using EPS8266 - Everything ESP8266

Someone seems to have gotten an esp32/8266 proxy working, I wonder if serving up specific files (ie custom js files hosted by you) could be used to store the js on the web, and the editor page (if this is turned on) just adds the “local js” which, when the browser loads, it asks the PB for the js as well, and the PB then proxies in the js from PB.com

I’m spitballing but this might be workable.

[zranger1]

Generally, I think I’d prefer just a documented interface for loading/storing/parsing pattern code (and for reading/writing maps as well!). That way it’d be possible to make extensions for Visual Studio, PlatformIO, Eclipse, etc.

[Scruffynerf]

Oohh no, to add blockly is easy(ish)

Example:

  <title>Blockly Demo: Resizable Blockly (Part 2)</title>
  <script src="https://unpkg.com/blockly/blockly_compressed.js"></script>
  <script src="https://unpkg.com/blockly/blocks_compressed.js"></script>
  <script src="https://unpkg.com/blockly/msg/en.js"></script>
  <style>...

They’re loading that on the sample page
Here: https://github.com/google/blockly-samples/tree/master/examples/resizable-demo

In use: https://google.github.io/blockly-samples/examples/resizable-demo/overlay.html

So the only “work” is to figure out which JS bits to remove from the existing blocks, and add a few special PB functions as special blocks.

I’m actually going to play with this a bit.

[Scruffynerf]

You’re at the other end of the spectrum here, @zranger1

At that point, WLED or FastLED also work.

The “nonprogrammer” who is an artist or otherwise wants to do cool LED stuff but isn’t going to learn tons of coding should still be able to do basic custom things in PB beyond just clicking a pattern and sliders.

[Scruffynerf]

Looking at the non-block GUIs, I actually agree they would be awesome, but that’s way more work, and likely more limited, because probably have to write to a format that lends itself to inputs and outputs. Which is still a huge playfield.

I’ll have to research some more. The block customizing might just let a hybrid work. I have an idea…

[wizard]

@Scruffynerf one of the key design constraints of Pixelblaze is that it works stand-alone, without internet access (but obviously with WiFi). Theres a subtle line between a website that runs blockly or something and can send that to a Pixelblaze, and Pixelblaze units themselves having and interface that requires or partially requires internet access.

The near future plans include some kind of cloud based firestorm, or at the least a way to attach PBs to a server/service, where additional functionality (perhaps like blockly editors) can be added.

[Scruffynerf]

@wizard

it works stand-alone, without internet access (but obviously with WiFi

Oh I agree. I saw this as “value add”: Turn on a “use blockly (requires internet access)” setting and it would add the includes to the editor page.

I’m going to play with doing it via a userscript and see if I can make it all work.

I’m picturing a BeforeRender block, Render block, Render2D, etc. For all of us who program naturally this isn’t needed.

I really like the Teensy Audio GUI but it’s huge.

[JustPete]

I see this is quite a deep topic. And I am going to rely pretty strongly on the assembled brilliance here…

For now, if I could inquire as to the (basic) meaning quick intro to the following terms/phrases -

PI2 Is this Pi squared? The number? But there’s PISQ…
Following would be PI3_4…

Then a few terms from the blinkfade pattern -

array
for ( 1 = 0; i < pixelCount; i++)

random(max)… in this case randon(1) which is the maximum b=value for max ?

And this one, really cool, I think from somewhere I don’t remember -

timer…

OK. Perhaps better to ask these scattered things in a separate topic, or in the Random Project 1 Forum. Please let me know.

ps I’ve got a PB v 2+ to play with now!

[Scruffynerf]

@JustPete

PI2 Is this Pi squared?

2 PI (6.28…) useful for Radian math (angles)

Following would be PI3_4…

PI *3/4

Also often useful.

See

Atan2(y, x) bug?

@Scruffynerf, Sure, you can get a small bit of performance with a constant. You can also do that in the pattern with a var. Vars, literals, and constants have near the same performance. e.g. var HALF_PI = PI/2 If I were to add half-PI to the constants, what should it be called? HALF_PI, PI_2, PI1_2? The naming convention I borrowed sort of uses _ in place of division, e.g. PI3_4 is PI * 3 / 4. I added PI2 because I used it a lot, when I really wanted 1 Tau.

Search for the rest, I know we have discussed timer and random recently.

The blinkfade code I’d have to go look at, someone else know the answer?

[JustPete]

Thanks. There’s a typo above in my post… its not

@JustPete

for ( 1 = 0; i < pixelCount; i++)

but rather

for (i =0; i , pixelcount; i++)

I get that for is a looping command… (in my own lingo)

[Scruffynerf]

@JustPete

looping command… (in my own lingo)

Ah, without the typo, makes more sense.

Yes, it’s a For loop.

I is zero, each loop, add one to I, until I is one less than the number of pixels, then do whatever, and loop back and add one to I…
Starts with I is zero, first time thru …

[jeff]

Hey @Gandalf!

I too once wondered why it was PI2; but in PB/JS/many languages, you can’t start a constant name with a number, so 2PI isn’t an option

For your question about timers like t1 = time(PERIOD), check out this section of the Intro pattern (which will be loaded on your v3):

jvyduna/pb-examples/blob/master/src/An Intro to Pixelblaze Code.js#L298-L352

[JustPete]

This is very cool, and looking forward to that V3.

For now, I’m wondering how one determines this -

@jeff

Let's say you have 4 pixels and it takes 10ms to compute all 4 of them

Sorry if I missed it somewhere… I seem to remember it being rather introductory.

[jeff]

There’s two ways I use to estimate the time it takes to compute all LEDs (a frame) for a given pattern and number of LEDs.

1. Compute the inverse of FPS

FPS stands for Frames Per second and is always displayed in the top right corner of the Pixelblaze web IDE. The inverse (divide 1 by FPS) will be the number of seconds per frame; multiply by 1000 to get ms per frame.

80 FPS = 1/80th second per frame.
1/80th * 1000ms/s = 12.5ms

2. Use the watcher to monitor delta

The argument passed to your beforeRender() is the number of milliseconds since beforeRender was last called. It’s usually named delta, so you see it as function beforeRender(delta) {}

You can see a variable’s current value in the watcher if the variable is declared as exported and you’ve enabled the watcher.

export var lastDelta
function beforeRender(delta) {
  lastDelta = delta
}

Here’s an example, and you can do the math to see how it correlates well with the displayed FPS:

So it checks out. 18ms ~= 1000ms / 53FPS.