I don’t have a V2 and I am waiting on my pre-ordered V3. This will be my first try at coding since Fortran in college 30 years ago! Is there a way for me to access a demo version or practice version of the web interface before I actually have my hardware? I’d like to start playing around with the coding to get the hang of the basics before my controller arrives.
See codepen.io/mleibman/pen/WMVbVq
It’s a poor substitute, but you can simulate a PB and one or more strips using this.
Absolutely needs to be improved but better than nothing.
Hey! Welcome to Pixelblaze! You’re going to love it.
A while back I recommended this sequence (a subset) of the JavaScript Codecademy courses to someone. Then you’ll be more comfortable using the Codepen simulator Scruffynerf linked:
2 Likes
I’d also throw out the web-based live-coding animation playgrounds that are similar in nature:
http://maxbittker.github.io/Mojulo
BTW @Scruffynerf ported a tixy framework and examples to Pixelblaze, you can find it on the pattern site and load it when you get your PB.
3 Likes
Yeah, I do plan on writing up “LED lights from zero to Wow” blog series… The idea being to act as a series of tutorials. Still in the works.
3 Likes
Awesome guys thanks so much for the info and links! I think these will keep me busy for a while!
On a related note I am running into terms such as “floor” and “clamp” even PI2 while poking around here. I am looking them up individually as needed. Can anyone recommend a good central resource? Thanks.
These are all Pixelblaze expression language things – documentation for the v2 version is here:
and the v3 documentation is here:
Once you get your board, the docs are always available at the bottom of the pattern editor window.
1 Like
That’s a good index but hopefully we can build a page that’s even more user friendly (examples of everything, ways to use them, etc).
It’s easy to forget that inexperienced new to coding users dont know what “just like JavaScript” means. And yet, just different enough that not everything works like JS
1 Like
Feel free to PR enhancements to that file. I expanded it quite a bit recently, but small examples would be welcome. Can’t be too volumous or it won’t work well as a reference, but plenty of room to grow.
1 Like
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.
1 Like
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.
1 Like
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.
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?
@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)
1 Like
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.
2 Likes
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…
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.
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.
1 Like
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.
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.