Visual Automations

A visual programming environment for Arduino and ESP32 development. This tool allows you to create Arduino programs by connecting visual nodes in a flow-based interface, without writing code manually.

Features

• Drag-and-drop interface for creating Arduino programs
• Visual node-based programming
• Automatic Arduino code generation
• Support for various sensors and output devices
• Logic nodes for conditional operations
• Real-time code preview

Installation

# Clone the repository
git clone https://github.com/yourusername/visual-automations.git
cd visual-automations

# Install dependencies
npm install

# Start the development server
npm run dev

Usage

1. Drag components from the left panel onto the canvas
2. Connect nodes by clicking and dragging from one handle to another
3. Configure each node's parameters
4. Click "Generate Arduino Code" to see the resulting code
5. Copy the generated code to the Arduino IDE or use it directly with your preferred upload method

Project Architecture

The project is built with React and uses the following key libraries:

• ReactFlow: Provides the core flow-based canvas functionality
• Zustand: State management for the application
• Vite: Build tool and development server

Key Components

• Flow.jsx: Main component that renders the ReactFlow canvas and handles node interactions
• NodePanel.jsx: Side panel that displays available nodes for dragging onto the canvas
• nodes/: Directory containing all node type implementations:
  • ArduinoNode.jsx: Configuration node for Arduino settings
  • SensorNode.jsx: Input nodes for various sensors
  • OutputNode.jsx: Output nodes for LEDs, relays, etc.
  • LogicNode.jsx: Conditional logic nodes
• store.js: Zustand store that manages application state and code generation
• CodePreview.jsx: Component for displaying generated Arduino code

Contributing

Contributions are welcome! Here's how you can help improve Visual Automations:

Adding New Node Types

One of the most valuable contributions is adding new node types to support additional Arduino components and functionality.

Step 1: Create a New Node Component

Create a new file in the src/components/nodes/ directory. Use the existing node components as templates.

// src/components/nodes/MyNewNode.jsx
import React, { useState } from 'react';
import { Handle, Position } from 'reactflow';

function MyNewNode({ data }) {
  const [params, setParams] = useState(data.params || {
    // Default parameters for your node
    myParam1: 'default',
    myParam2: 'value'
  });

  // Update node data when parameters change
  const handleParamChange = (e) => {
    const { name, value } = e.target;
    
    const updatedParams = {
      ...params,
      [name]: value
    };
    
    setParams(updatedParams);
    data.params = updatedParams;
  };

  return (
    <div className="node my-new-node-type">
      <div className="node-header">{data.label}</div>
      <div className="node-content">
        {/* Add your node's UI controls here */}
        <div className="node-param">
          <label>My Parameter:</label>
          <input 
            type="text" 
            name="myParam1" 
            value={params.myParam1 || 'default'} 
            onChange={handleParamChange}
          />
        </div>
      </div>
      
      {/* Add handles as needed */}
      <Handle type="target" position={Position.Top} id="in" />
      <Handle type="source" position={Position.Bottom} id="out" />
    </div>
  );
}

export default MyNewNode;

Step 2: Register the Node Type

Add your new node type to the nodeTypes object in Flow.jsx:

// In Flow.jsx
import MyNewNode from './nodes/MyNewNode';

// Define custom node types
const nodeTypes = {
  arduinoNode: ArduinoNode,
  sensorNode: SensorNode,
  outputNode: OutputNode,
  logicNode: LogicNode,
  myNewNode: MyNewNode, // Add your new node type here
};

Step 3: Add the Node to the Panel

Add your node to the NodePanel.jsx component so users can drag it onto the canvas:

// In NodePanel.jsx
<div className="node-item my-new-type" 
  onDragStart={(e) => onDragStart(e, 'myNewNode', 'My New Node')} 
  draggable>
  My New Node
</div>

Step 4: Update the Code Generator

Modify the generateArduinoCode function in store.js to handle your new node type:

// In store.js, within the generateArduinoCode function

// Find your new nodes
const myNewNodes = nodes.filter(node => node.type === 'myNewNode');

// Add any necessary includes or pin definitions
myNewNodes.forEach(node => {
  // Add code generation logic for your node type
});

// Add setup code if needed
myNewNodes.forEach(node => {
  // Add setup code for your node type
});

// Add loop code if needed
myNewNodes.forEach(node => {
  // Add loop code for your node type
});

Guidelines for Node Development

1. Consistent UI: Follow the existing UI patterns for node appearance and behavior
2. Descriptive Parameters: Use clear labels and appropriate input types for parameters
3. Default Values: Always provide sensible default values for parameters
4. Code Generation: Ensure your node generates clean, efficient Arduino code
5. Error Handling: Validate inputs and handle edge cases gracefully

Other Contributions

• Bug fixes: Help identify and fix bugs in the existing codebase
• Documentation: Improve this README or add additional documentation
• UI Improvements: Enhance the user interface and experience
• Testing: Add tests for components and functionality

License

MIT