Show and Tell - Node-RED playing Snake, and more!

Hello everyone,

I have three projects to share today, but the common thread in these projects is that these are all "no backend" applications. Meaning, everything is served with flat files and the flow is interpreted in browser scope. Nothing here is immediately useful, but I'm hoping this will spark some inspiration about what else is possible.

[#1] Flow-based Snake AI:

Using Node-RED to play a simulated game of Snake, inspired by this video: How to Win Snake: The UNKILLABLE Snake AI - YouTube

This is by far the most finished of these projects. Note that if you Deploy changes to the flow they will be retained in your browser's localStorage until you run localStorage.clear() which will cause the page to load the default flow.

Link to Live Demo: https://mdkrieg.github.io/snakeAI/red.html

image

[#2] Node-RED TamperTool

Write TamperMonkey (https://www.tampermonkey.net/) scripts using Node-RED. I think this has a lot of potential for user-automation scripting.

image

[#3] RED-Grapes

An integration of Node-RED and Grapes.js (https://grapesjs.com) which is a browser-based WYSIWYG editor for HTML. The thought here is to create a low-code environment that can create a fully dynamic web page. Similar to how I did the Snake AI, there would be a custom interpreter that attaches your flow to the web page.

image

Regards,
-Matt

5 Likes

Love the snake game.

:wink:

[#1] Flow-based Snake AI:

Please include gamepad controller please, cant wait :wink:

Great work :smiley:

Hi @mdkrieg. Very interesting projects. I was specifically searching for your grapesjs idea. can you share some more information on it. Can we work with it and develop any web pages right now?

Thanks for your interest! That project is a work in progress but it sounds like you envision it correctly.

For the GrapesJS integration, I think all the technical pieces are there, the next step is to create useful templates and nodes, also the interpreter needs to be written and I want to find a better interface solution. I'll edit this response with the github repo later today.

@pranavthakkar - Here is a link to a live demo: https://mdkrieg.github.io/REDGrapes/

The "BUTTON" object all the way at the bottom is the only one that has a node that can be dropped. The next major hurdle is developing a usable set of templates for the GrapesJS engine. Also, I'm still not sure if it is best to have GJS be dynamic with the flow, I'm thinking not, probably best to only show an isolated "end result" (webpage, probably in a popup (will new tab work?)).

The demo page has the "websites" theme linked from the grapesjs homepage enabled, I'm not sure how usable it is for dashboard purposes or any kind of interactive website. Perhaps Bootstrap would be a way to go here (looks like there's some grapesjs templates already done: GitHub - kaoz70/grapesjs-blocks-bootstrap4: GrapesJS Bootstrap v4 Blocks Plugin).

Looks amazing,
How can this be deployed as a backend for the form? I'm not able to trigger anything after setting up the trigger...seems we are missing some steps to have ability to interact with the flow.

Correct, there is no pseudo-backend on this one. The snake-AI is the only project with a working interpreter.

There is an example csv generator I made that you can demo here: ReQUI Example App

If you look in the source here there is an element <script type="text/json" id="flow"> that contains the flow and the script in the header reads and interprets it to make the page work.

In this example app the page was built manually but it is essentially a template for the backend, Here is what the flow in that script tag looks like:

I also had successfully implanted GrapesJS into the configuration panel of a template node, but can't seem to find it at the moment.