add 5V Dc pump

README.md

@@ -3,14 +3,15 @@
 ## Video Tutorial
 [![Intro Video](https://res.cloudinary.com/circuito/image/upload/w_300,b_white/v1550053341/circuito_youtube_help_title.png)](https://www.youtube.com/watch?v=i3CpeFhRLI4)
 
-## Using GitPod
+## Using GitPod - Recommended
 [Edit using GitPod](http://gitpod.io/#https://github.com/Circuito-io/ComponentEditor)
 
 ## Creating a Local Development Environment
 1. Make sure you have [Node.js](https://nodejs.org/en/download/)
-2. Clone this repository
+2. Clone this repository and cd into it
 ```bash
-git clone https://github.com/Circuito-io/ComponentsEditor.git
+git clone https://github.com/Circuito-io/ComponentEditor.git
+cd ComponentEditor
 ```
 3. Init and update submodule
 ```bash
@@ -19,7 +20,6 @@ git submodule update
 ```
 3. Run npm install
 ```bash
-cd ComponentEditor
 npm install
 ```
 4. Run the dev web server
@@ -28,5 +28,4 @@ npm run dev
 ```
 5. Connect to the web server - http://localhost:8080
 6. Edit your files locally - components are in the ```components``` subfloder
-7. When ready - click the 'save&upload' button to sync local files with our server
-8. Click the 'preview' button to open your **private** circuito.io preview window
+7. When ready - click the 'Preview' button to sync local files with our server and open your **private** circuito.io preview window

components/Blocks/5V_dc_Sub_WaterPump.json

@@ -0,0 +1,37 @@
+{
+  "name": "5V_dc_Sub_WaterPump",
+  "category": [
+    "output"
+  ],
+  "blockId": "5457",
+  "app": {
+    "visible": true,
+    "appName": "5V dc_Sub_WaterPump",
+    "indicators": {
+      "solder": false
+    },
+    "desc": "<p>A simple 5V DC submersible water pump.<br>Use this pump to water your plants!<br>Specifications:<br><li>Rated voltage: 5V DC.<br><li>Max rated current: 0.1-0.2A.<br><li>Flow Rate 1.2-1.6 L/min.<br><li>Suction Distance: 0.8 meter (Max).<br><li>SLife of Pump: 500 Hour.<br><li>Size: 4.5x3.0x2.5 cm.<br><li>Submersible installation and entirely waterproof.</p>",
+    "image": "https://res.cloudinary.com/circuito/image/upload/v1606977725/client/dc_pump_tealjk.png"
+  },
+  "altComp": {},
+  "circuits": [
+    {
+      "name": "default",
+      "cost": 0,
+      "coders": [
+        "5V_dc_Sub_WaterPump"
+      ],
+      "supportedControllers": [
+        "ArduinoNano",
+        "ArduinoUno",
+        "NodeMCU1"
+      ],
+      "parts": [
+        {
+          "name": "SubWaterPump_1",
+          "part": "SubWaterPump"
+        }
+      ]
+    }
+  ]
+}

components/Blocks/NodeMCU1.json

@@ -13,7 +13,7 @@
       "verified": false,
       "solder": false
     },
-    "desc": "<p>NodeMCU is an Arduino compatible ESP8266 based micro controller with on-board WiFi. It is great from internet of things projects or just as an Arduino replacement.</p>",
+    "desc": "<p>NodeMCU is an Arduino compatible ESP8266 based micro controller with on-board WiFi. It is great for Internet of Things (IoT) projects or just as an Arduino replacement.</p>",
     "visible": true
   },
   "circuits": [
@@ -1245,4 +1245,4 @@
       "cost": 2
     }
   ]
-}
+}

components/Blocks/Submersible_DC Water Pump.json

@@ -0,0 +1,37 @@
+{
+  "name": "Submersible_DC Water Pump",
+  "category": [
+    "output"
+  ],
+  "blockId": "5271",
+  "app": {
+    "visible": true,
+    "appName": "Submersible DC Water Pump",
+    "indicators": {
+      "solder": false
+    },
+    "desc": "<p>A simple 5V DC submersible water pump.<br>Use this pump to water your plants!<br>Specifications:<br><li>Rated voltage: 5V DC.<br><li>Max rated current: 0.1-0.2A.<br><li>Flow Rate 1.2-1.6 L/min.<br><li>Suction Distance: 0.8 meter (Max).<br><li>SLife of Pump: 500 Hour.<br><li>Size: 4.5x3.0x2.5 cm.<br><li>Submersible installation and entirely waterproof.</p>\n\n\n",
+    "image": "https://res.cloudinary.com/circuito/image/upload/v1606976560/client/dc_pump_umbcso.png"
+  },
+  "altComp": {},
+  "circuits": [
+    {
+      "name": "5v Dc Pump",
+      "cost": 0,
+      "coders": [
+        "Submersible_DC Water Pump"
+      ],
+      "parts": [
+        {
+          "name": "SubWaterPump_1",
+          "part": "SubWaterPump"
+        }
+      ],
+      "supportedControllers": [
+        "ArduinoNano",
+        "ArduinoUno",
+        "NodeMCU1"
+      ]
+    }
+  ]
+}

components/Coders/5V_dc_Sub_WaterPump.json

@@ -0,0 +1,6 @@
+{
+  "name": "5V_dc_Sub_WaterPump",
+  "instantiate": {
+    "varname": "5v_dc_sub_waterpump"
+  }
+}

components/Coders/Submersible_DC Water Pump.json

@@ -0,0 +1,6 @@
+{
+  "name": "Submersible_DC Water Pump",
+  "instantiate": {
+    "varname": "submersible_dc water pump"
+  }
+}

src/client/blocks-list.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { Typeahead } from "react-bootstrap-typeahead";
 import { toast } from "react-toastify";
-import { ListGroup, Button } from "react-bootstrap";
+import { Button } from "react-bootstrap";
 import { update_a_block, update_a_coder } from "./controller.js";
 import { createNewCoder } from "./form/coderfield.js";
 import { faPlus } from "@fortawesome/free-solid-svg-icons";
@@ -18,7 +18,7 @@ function createNewBlockData(blockName) {
     name: blockName,
     blockId: blockId.toString(),
     app: {
-      appName: blockName,
+      appName: blockName.replace("_", " "),
       visible: true,
       indicators: {
         solder: false
@@ -102,7 +102,7 @@ export class BlocksList extends React.Component {
       actions: [
         Dialog.CancelAction(),
         Dialog.OKAction(dialog => {
-          const newBlockName = dialog.value;
+          const newBlockName = dialog.value.replace(" ", "_");
 
           analytics.track("Block Created", { name: newBlockName });
           analytics.track("Block Opened", { name: newBlockName });
@@ -196,7 +196,6 @@ export class BlocksList extends React.Component {
           continuous
           run={this.state.runHelp}
           callback={data => {
-            console.log(data);
             if (["stop", "skip", "close"].includes(data.action)) {
               firstTimeHelp = false;
               this.setState({ runHelp: false });

src/client/publish.js

@@ -28,16 +28,14 @@ export class Publish extends React.Component {
             <Modal.Title>How to publish your work</Modal.Title>
           </Modal.Header>
           <Modal.Body>
-            <h4>Video comming soon.</h4>
-            After you fork the repo and commit your changes using the git panel
-            on the left, create a pull request using the pull-request panel on
-            the right, or directly in github in your fork.
-            {/*             
+            After you <b>fork</b> the repo and <b>commit</b> your changes using the git panel
+            on the left, create a <b>pull request</b> using the pull-request panel on
+            the right, or create the pull request directly in your github.
             <ReactPlayer
-              url="https://www.youtube.com/watch?v=i3CpeFhRLI4"
+              url="https://www.youtube.com/watch?v=1EkRuXEPBO4"
               width="90%"
               controls={true}
-            /> */}
+            />
           </Modal.Body>
           <Modal.Footer>
             <Button variant="secondary" onClick={this.handleClose}>
@@ -46,7 +44,12 @@ export class Publish extends React.Component {
           </Modal.Footer>
         </Modal>
 
-        <Button variant="secondary" id="btn-publish" onClick={this.handleShow} style={{margin: "0px 2px"}}>
+        <Button
+          variant="secondary"
+          id="btn-publish"
+          onClick={this.handleShow}
+          style={{ margin: "0px 2px" }}
+        >
           Publish
         </Button>
       </React.Fragment>