@theapplicable/elements

v1.1.3

Published

6 days ago

simulatable web elements for theapplicable.in

Downloads

247

0High
0Medium
0Low

akash-x1i

Elements

Web Components for Arduino and various electronic parts.

Note: these elements only provide the presentation and display of the represented hardware. They do not provide the functional simulation code of the hardware. That is dependant on the application (simulator) that you wish to use these with, and thus up to you to create.

📖 Complete Element Usage Documentation - Detailed guide with all attributes, properties, events, and examples for each element.

Using Elements

NPM Installation

You can install the package with npm and then import it into your code:

import '@theapplicable/elements';

CDN Usage (Self-Hosted)

You can use the Elements bundle directly in your HTML by hosting the bundle files yourself. After building the package, you'll find the bundle files in the dist/ directory:

dist/applicable-elements.bundle.js - Unminified version (for development)
dist/applicable-elements.bundle.min.js - Minified version (for production)

Option 1: Direct File Reference

If you've copied the bundle files to your project:

<!-- Development -->
<script src="./path/to/applicable-elements.bundle.js"></script>

<!-- Production -->
<script src="./path/to/applicable-elements.bundle.min.js"></script>

Option 2: GitHub Pages / Static Hosting

If you're hosting the bundle files on GitHub Pages or another static hosting service:

<!-- Example: GitHub Pages -->
<script src="https://yourusername.github.io/your-repo/dist/applicable-elements.bundle.min.js"></script>

<!-- Example: Your own domain -->
<script src="https://cdn.yourdomain.com/applicable-elements.bundle.min.js"></script>

Option 3: Local Development Server

For local development, you can serve the files using any static file server:

# Using Python
python3 -m http.server 8000

# Using Node.js (http-server)
npx http-server dist

# Using PHP
php -S localhost:8000

Then reference the bundle in your HTML:

<script src="http://localhost:8000/applicable-elements.bundle.js"></script>

Using the Elements

Once the bundle is loaded, you can use any element in your HTML:

💡 Tip: For complete documentation on all available attributes and properties for each element, see ELEMENTS_USAGE.md

<!DOCTYPE html>
<html>
<head>
  <script src="./applicable-elements.bundle.min.js"></script>
</head>
<body>
  <led-element value></led-element>
  <push-button color="red"></push-button>
  <arduino-uno></arduino-uno>
  <servo-element angle="90"></servo-element>
</body>
</html>

Available Elements

All elements are registered as custom HTML tags. Here's the complete list:

📖 For detailed usage information, attributes, and examples for each element, see ELEMENTS_USAGE.md

Microcontrollers & Development Boards

<arduino-uno> - Arduino Uno board
<arduino-nano> - Arduino Nano board
<arduino-mega> - Arduino Mega board
<esp32-devkit-v1> - ESP32 DevKit V1
<nano-rp2040-connect> - Arduino Nano RP2040 Connect

Displays

<seven-segment> - 7-segment display
<lcd-1602> - 16x2 LCD display
<lcd-2004> - 20x4 LCD display
<ssd-1306> - SSD1306 OLED display
<ili-9341> - ILI9341 TFT display
<led-bar-graph> - LED bar graph display

LEDs & Lighting

<led-element> - Single LED
<rgb-led> - RGB LED
<led-ring> - LED ring
<neo-pixel> - NeoPixel LED
<neopixel-matrix> - NeoPixel matrix

Input Components

<push-button> - Push button
<pushbutton-6mm> - 6mm push button
<slide-switch> - Slide switch
<tilt-switch> - Tilt switch
<dip-switch-8> - 8-position DIP switch
<membrane-keypad> - Membrane keypad
<rotary-dialer> - Rotary dialer
<analog-joystick> - Analog joystick
<ky-040> - KY-040 rotary encoder
<potentiometer-element> - Potentiometer
<slide-potentiometer> - Slide potentiometer

Motors & Actuators

<servo-element> - Servo motor
<stepper-motor> - Stepper motor
<biaxial-stepper> - Biaxial stepper motor

Sensors

<dht-22> - DHT22 temperature and humidity sensor
<hc-sr04> - HC-SR04 ultrasonic distance sensor
<mpu-6050> - MPU6050 accelerometer/gyroscope
<hx-711> - HX711 load cell amplifier
<pir-motion-sensor> - PIR motion sensor
<ntc-temperature-sensor> - NTC temperature sensor
<photoresistor-sensor> - Photoresistor (light sensor)
<heart-beat-sensor> - Heartbeat sensor
<flame-sensor> - Flame sensor
<gas-sensor> - Gas sensor
<small-sound-sensor> - Small sound sensor
<big-sound-sensor> - Big sound sensor
<ir-receiver> - IR receiver
<ir-remote> - IR remote control

Other Components

<resistor-element> - Resistor
<piezo-buzzer> - Piezo buzzer
<microsd-card> - MicroSD card
<ds-1307> - DS1307 real-time clock

Utility Elements

<show-pins> - Utility element for displaying pin information

CDN Hosting Guide

Hosting on GitHub Pages

Build the package: npm run build
Copy the dist/applicable-elements.bundle.js and dist/applicable-elements.bundle.min.js files to your repository
Enable GitHub Pages in your repository settings

Reference the files in your HTML:

<script src="https://yourusername.github.io/your-repo/applicable-elements.bundle.min.js"></script>

Hosting on Other Static Services

The bundle files can be hosted on any static file hosting service:

Netlify: Drag and drop the dist folder or use Git integration
Vercel: Deploy the dist folder as a static site
Cloudflare Pages: Connect your repository and set the build output to dist
AWS S3: Upload the bundle files to an S3 bucket and enable static website hosting
Your own server: Upload the files to your web server's public directory

Building for CDN

To build the bundle files for CDN usage:

npm run build

This will generate:

dist/applicable-elements.bundle.js (unminified, ~515KB)
dist/applicable-elements.bundle.min.js (minified, ~416KB)

The minified version is recommended for production use.

Local development

To prepare for local development, clone this repo, and then install the dependencies:

npm install

Then start storybook:

npm run storybook

This will open a local dev server at http://localhost:6006, where you can interact with the elements and see your changes live.

Creating a new element

The easiest way to create a new element is to run the generator:

npm run new-element --name demo

This will generate a new element called demo. It will also create a storybook file, so you will be able to see the new element in storybook (see the "Local development" section above).

Note: updates the docstrings in the code will not be reflected in Storybook's Docs tab unless you restart Storybook, or run the following command manually and refresh the page:

npm run analyze-components

Check out the Contributing Guide for more details.

Learn how to create elements

Video tutorial

The Membrane keypad element live-coding tutorial walks through the complete process behind creating an element: research, drawing, and writing the code / stories.

Blog posts

Recreating The Arduino Pushbutton Using SVG And <lit-element>

License

Elements are released under the MIT license.