### Run Local Documentation Site (Bash)

Source: https://context7.com/seeed-solution/sensecraft-hmi-docs/llms.txt

Provides commands for setting up and running the SenseCraft HMI documentation site locally. Requires Node.js and npm. Includes steps for cloning the repository, installing dependencies, starting the development server, building for production, and previewing the build.

```bash
# Prerequisites
# - Node.js v18.0+
# - npm v9.0+

# Clone and Install
git clone https://github.com/Seeed-Solution/sensecraft-hmi-docs.git
cd sensecraft-hmi-docs
npm install

# Development
npm run dev      # Start dev server at http://localhost:4321
npm run build    # Build for production
npm run preview  # Preview production build

# Alternative Port
npm run dev -- --port 3000

# Troubleshooting
rm -rf node_modules package-lock.json
npm install

```

--------------------------------

### Python Example for SenseCraft HMI Display

Source: https://github.com/seeed-solution/sensecraft-hmi-docs/blob/main/README.md

A basic Python code snippet demonstrating how to initialize a display object and show text using the SenseCraft HMI library. This example assumes the library is installed and configured.

```python
# Python example
import sensecraft_hmi

display = sensecraft_hmi.Display()
display.show_text("Hello World")
```

--------------------------------

### Start Development Server (Bash)

Source: https://github.com/seeed-solution/sensecraft-hmi-docs/blob/main/README.md

Command to start the development server for the SenseCraft HMI documentation. This allows for live preview and hot reloading as changes are made.

```bash
npm run dev
```

--------------------------------

### Install Project Dependencies

Source: https://github.com/seeed-solution/sensecraft-hmi-docs/blob/main/README.md

Installs all necessary packages listed in the package.json file. This is a prerequisite for running development or build commands.

```bash
npm install
```

--------------------------------

### Preview Production Build

Source: https://github.com/seeed-solution/sensecraft-hmi-docs/blob/main/README.md

Starts a local server to preview the production build. This helps in verifying the deployed version before actual release.

```bash
npm run preview
```

--------------------------------

### Clone Repository and Install Dependencies (Bash)

Source: https://github.com/seeed-solution/sensecraft-hmi-docs/blob/main/README.md

Instructions to clone the SenseCraft HMI documentation repository and install necessary project dependencies using npm. This is a prerequisite for running the development server.

```bash
git clone https://github.com/Seeed-Solution/sensecraft-hmi-docs.git
cd sensecraft-hmi-docs
npm install
```

--------------------------------

### Markdown Formatting Examples

Source: https://github.com/seeed-solution/sensecraft-hmi-docs/blob/main/README.md

Demonstrates various Markdown formatting techniques used in the SenseCraft HMI documentation, including headings, bold, italic, inline code, bullet points, and numbered lists.

```markdown
# Heading 1
## Heading 2
### Heading 3

**Bold text**
*Italic text*
`Inline code`

- Bullet point 1
- Bullet point 2

1. Numbered list
2. Second item
```

--------------------------------

### Markdown Table Formatting

Source: https://github.com/seeed-solution/sensecraft-hmi-docs/blob/main/README.md

An example of how to create tables in Markdown for the SenseCraft HMI documentation. This format is used for presenting structured data, such as feature comparisons or specifications.

```markdown
| Feature | Support | Status |
|---------|---------|--------|
| E-Paper | 7.5" | ✅ |
| Color | Spectra 6 | ✅ |
| No-Code | Yes | ✅ |
```

--------------------------------

### Display Web Content on SenseCraft HMI

Source: https://context7.com/seeed-solution/sensecraft-hmi-docs/llms.txt

Embed any web page directly onto your e-paper device. The setup involves navigating to 'Web Content', entering the URL, and validating. The example includes recommended URLs for weather and dashboards, along with a basic HTML structure for custom pages.

```javascript
// Web Content Setup
// 1. Navigate to Workspace > "Web Content"
// 2. Enter full URL with https:// or http://
// 3. Click "Set" to validate
// 4. Click "Preview" to verify display
// 5. Click "Deploy" to send to device

// Recommended Web Content:
{
  "weather": [
    "https://www.windy.com/",
    "https://weather.gov",
    "https://www.accuweather.com/"
  ],
  "dashboards": [
    "http://homeassistant.local:8123",
    "Grafana dashboards",
    "System status pages"
  ]
}

// Custom HTML Page Example:
`<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body { font-family: Arial; margin: 0; padding: 15px; }
        .title { font-size: 24px; font-weight: bold; }
        .info-box { border: 1px solid #ccc; padding: 10px; margin: 10px 0; }
    </style>
</head>
<body>
    <div class="title">Device Status</div>
    <div class="info-box">Temperature: 22.5°C</div>
    <div class="info-box">Humidity: 45%</div>
</body>
</html>`

// Hosting Options:
// - GitHub Pages, Netlify, Vercel (free static hosting)
// - Local network server (NGINX, Raspberry Pi)

```

--------------------------------

### Markdown Callouts/Admonitions

Source: https://github.com/seeed-solution/sensecraft-hmi-docs/blob/main/README.md

Examples of using different types of callouts (tip, note, caution, danger) in Markdown to highlight important information, tips, warnings, or critical alerts within the documentation.

```markdown
:::tip[Pro Tip]
Use AI Generator to quickly create layouts!
:::

:::note
This feature requires firmware v2.0 or higher.
:::

:::caution
Always backup your designs before updating firmware.
:::

:::danger
Incorrect voltage may damage your display!
:::
```

--------------------------------

### Change Development Server Port

Source: https://github.com/seeed-solution/sensecraft-hmi-docs/blob/main/README.md

Starts the development server on a specified port (e.g., 3000) if the default port is already in use. This allows running multiple development instances concurrently.

```bash
npm run dev -- --port 3000
```

--------------------------------

### Deploy Designs to Devices (JavaScript)

Source: https://context7.com/seeed-solution/sensecraft-hmi-docs/llms.txt

Outlines the standard deployment workflow for designs to connected devices. Includes a checklist for successful deployment and troubleshooting steps for common issues. Requires the device to be connected, online, and have internet access.

```javascript
// Standard Deployment Process
// 1. Design your interface in Canvas/Gallery/RSS/Web
// 2. Click "Preview" to verify appearance
// 3. Click "Save" to store configuration
// 4. Ensure device shows "Online" status
// 5. Click "Deploy" to push to device

// Deployment Checklist:
{
  "deviceConnected": true,
  "deviceOnline": true,
  "internetAccess": true,  // Required for data components
  "firmwareUpToDate": true,
  "layoutFitsScreen": true  // 800x480 for most devices
}

// Troubleshooting Deployment:
// - Check device WiFi connection
// - Verify device appears in Device list
// - Restart device if deployment fails
// - Re-pair device if connection issues persist

```

--------------------------------

### Build for Production

Source: https://github.com/seeed-solution/sensecraft-hmi-docs/blob/main/README.md

Compiles and bundles the project assets for deployment. This command generates optimized files in the 'dist/' directory.

```bash
npm run build
```

--------------------------------

### Troubleshoot Module Not Found Error

Source: https://github.com/seeed-solution/sensecraft-hmi-docs/blob/main/README.md

Resolves 'module not found' errors by removing existing node modules and package lock files, then reinstalling dependencies. This is a common fix for corrupted installations.

```bash
rm -rf node_modules package-lock.json
npm install
```

--------------------------------

### Markdown Structure for New Documentation Pages

Source: https://github.com/seeed-solution/sensecraft-hmi-docs/blob/main/README.md

Illustrates the basic Markdown structure for creating new documentation pages within the SenseCraft HMI project. It includes frontmatter for title and description, followed by standard Markdown content.

```markdown
---
title: Your Page Title
description: Brief description that appears in search results
---

# Your Page Title

Write your content here using Markdown...
```

--------------------------------

### Create Simple HTML Page for Device Dashboard

Source: https://github.com/seeed-solution/sensecraft-hmi-docs/blob/main/src/content/docs/en/guides/Workspace/sensecraft-hmi-web.md

This HTML code creates a basic dashboard page optimized for a device's resolution. It includes styling for text, containers, and information boxes, displaying device status like temperature, humidity, and battery level. No external dependencies are required.

```html
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Device Dashboard</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            font-size: 18px;
        }
        .container {
            padding: 15px;
        }
        .title {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 15px;
        }
        .info-box {
            border: 1px solid #ccc;
            padding: 10px;
            margin-bottom: 10px;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="title">Device Status</div>
        <div class="info-box">Temperature: 22.5°C</div>
        <div class="info-box">Humidity: 45%</div>
        <div class="info-box">Battery: 87%</div>
    </div>
</body>
</html>
```

--------------------------------

### Embed YouTube Video

Source: https://github.com/seeed-solution/sensecraft-hmi-docs/blob/main/src/content/docs/en/video-guide/index.md

Embeds a YouTube video using an iframe element. This is commonly used for displaying video content directly on a webpage. The iframe allows embedding external content, and various attributes control its behavior and appearance.

```html
<div class="video-container">
  <iframe 
    src="https://www.youtube.com/embed/GYtKNI3h7RI?si=IXyY3aXb03gIfKqU"
    title="YouTube video player"
    frameborder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
    referrerpolicy="strict-origin-when-cross-origin"
    allowfullscreen
  ></iframe>
</div>
```

--------------------------------

### Configure GitHub Repository Component in JavaScript

Source: https://context7.com/seeed-solution/sensecraft-hmi-docs/llms.txt

Displays GitHub repository statistics like stars, forks, or watchers. Requires a GitHub Personal Access Token and the repository name. The 'displayField' property selects the statistic to display.

```javascript
// GitHub Repository Component
{
  "component": "GitHubRepo",
  "properties": {
    "repository": "Seeed-Studio/wiki-documents",
    "token": "ghp_xxxxxxxxxxxx",
    "displayField": "stars"
  }
}

// Available Repo Fields:
// - Name, Full Name
// - Stars, Forks, Watchers
// - Description
```

--------------------------------

### SenseCraft HMI Canvas - Device Sensor Components

Source: https://context7.com/seeed-solution/sensecraft-hmi-docs/llms.txt

Explains how to integrate device sensor data into the SenseCraft HMI Canvas. It lists available device components like Battery, Temperature, Humidity, and SenseCAP, and provides a configuration example for the SenseCAP component.

```javascript
// Device Components (auto-populated from connected device)
// - Battery: Shows current battery percentage
// - Temperature: Shows device temperature reading
// - Humidity: Shows device humidity percentage
// - SenseCAP: Displays data from linked SenseCAP sensors

// SenseCAP Component Setup
// 1. Drag "SenseCAP" component to canvas
// 2. In Properties panel, select your SenseCAP device
// 3. Choose the sensor measurement to display
// 4. Customize font, size, and color

{
  "component": "SenseCAP",
  "properties": {
    "device": "SenseCAP-S2101",
    "measurement": "temperature",
    "unit": "celsius",
    "fontSize": "30px"
  }
}
```

--------------------------------

### Device Pairing Process

Source: https://context7.com/seeed-solution/sensecraft-hmi-docs/llms.txt

Outlines the steps to pair an e-paper display device with the SenseCraft HMI platform. This involves displaying a pairing code on the device and entering it into the platform's 'New Device' section. It also lists supported devices.

```javascript
// Device Pairing Process
// Step 1: Power on your device - a pairing code will display on screen
// Step 2: In the SenseCraft HMI platform, navigate to "Device" page
// Step 3: Click "New Device" button
// Step 4: Enter the pairing code displayed on your device

// Supported Devices:
// - reTerminal E1001 (7.5" monochrome, 800x480)
// - reTerminal E1002 (7.3" 6-color, 800x480)
// - ePaper DIY Kit EE04 (multiple screen sizes)
// - TRMNL 7.5" (OG) DIY Kit
```

--------------------------------

### Configure Stock Market Component in JavaScript

Source: https://context7.com/seeed-solution/sensecraft-hmi-docs/llms.txt

Displays real-time stock market data using the Twelve Data API. Requires a symbol, an API key from twelvedata.com, and a 'displayField' to specify the data to show (e.g., current price, change).

```javascript
// Stock Component Setup
// Requires free API key from: https://twelvedata.com/

{
  "component": "Stock",
  "properties": {
    "symbol": "AAPL",
    "apiKey": "YOUR_TWELVE_DATA_API_KEY",
    "displayField": "currentPrice"
  }
}

// Available Display Fields:
// - Symbol: Stock ticker symbol
// - Current Price: Latest stock price
// - Change: Price change since previous close
// - Change Percent: Percentage change

// Popular Stock Symbols for Testing:
// AAPL (Apple), MSFT (Microsoft), GOOGL (Google)
// AMZN (Amazon), TSLA (Tesla)
```

--------------------------------

### Embed MP4 Video

Source: https://github.com/seeed-solution/sensecraft-hmi-docs/blob/main/src/content/docs/en/video-guide/index.md

Embeds an MP4 video using the HTML5 video tag. This allows for direct playback of video files within a web page. The 'controls' attribute adds default video playback controls, and the 'source' tag specifies the video file and its type.

```html
<video width="100%" controls>
  <source src="https://files.seeedstudio.com/wiki/hmi/video/deploy.mp4" type="video/mp4">
  Your browser does not support HTML5 video playing
</video>
```

--------------------------------

### Access SenseCraft HMI Platform

Source: https://context7.com/seeed-solution/sensecraft-hmi-docs/llms.txt

Provides the URL for accessing the SenseCraft HMI web platform and lists supported authentication methods. Users can log in using their SenseCraft/SenseCAP account, Google OAuth, or GitHub OAuth.

```bash
# Platform URL
https://sensecraft.seeed.cc/hmi

# Supported Authentication Methods
- SenseCraft/SenseCAP email account
- Google OAuth
- GitHub OAuth
```