Skip to content

Commit

Permalink
block list in home. update docs
Browse files Browse the repository at this point in the history
  • Loading branch information
@eyak
eyak committed Feb 24, 2019
1 parent b5ea6ae commit c0b7aa5
Show file tree
Hide file tree
Showing 7 changed files with 128 additions and 94 deletions.
2 changes: 1 addition & 1 deletion circuito-schema
Submodule circuito-schema updated 1 files
+33 −8 part.json
26 changes: 13 additions & 13 deletions public/bundle.js
View file

Large diffs are not rendered by default.

104 changes: 63 additions & 41 deletions src/client/blocks-list.js
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,11 @@
import React from "react";
import { Typeahead } from "react-bootstrap-typeahead";
import { toast } from "react-toastify";
import { ListGroup } 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";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

function createNewBlockData(blockName) {
var blockId = Math.floor(Math.random() * 5000 + 5000);
Expand All @@ -22,9 +25,32 @@ function createNewBlockData(blockName) {
};
}

function MenuOption(props) {
return (
<div
style={{
height: 45,
verticalAlign: "middle"
}}
key={props.id}
>
<span style={{ width: 45, display: "inline-block" }}>
{props.img && (
<img
src={props.img.replace("/image/upload/", "/image/upload/h_42/")}
/>
)}
</span>
{props.label}
</div>
);
}

export class BlocksList extends React.Component {
constructor(props) {
super(props);

this.state = { input: "" };
}

render() {
Expand All @@ -42,16 +68,34 @@ export class BlocksList extends React.Component {
<Typeahead
options={blocksIdsLabels}
selectHintOnEnter={true}
allowNew={true}
newSelectionPrefix="Create new block:"
emptyLabel={false}
onInputChange={input => {
this.setState({ input });
}}
onChange={selection => {
if (
selection[0] &&
typeof selection[0] === "object" &&
"customOption" in selection[0]
) {
analytics.track("Block Opened", { name: selection[0].id });
this.props.onBlockSelected(selection[0].id);
}}
bsSize={"small"}
open
maxHeight="600px"
menuId="main-block-list"
placeholder="Choose a block to edit or enter name to create a new one..."
renderMenuItemChildren={(option, props, index) => (
<MenuOption {...option} />
)}
/>

<ListGroup>
<ListGroup.Item
disabled={
this.state.input === "" ||
this.props.cachedData.blocks.includes(this.state.input)
}
action
onClick={event => {
// clicked create new
var newBlockName = selection[0].label;
var newBlockName = this.state.input;

analytics.track("Block Created", { name: newBlockName });
analytics.track("Block Opened", { name: newBlockName });
Expand Down Expand Up @@ -84,39 +128,17 @@ export class BlocksList extends React.Component {
this.props.onBlockSelected(newBlockName);
}
});
} else {
analytics.track("Block Opened", { name: selection[0].id });
this.props.onBlockSelected(selection[0].id);
}
}}
bsSize={"small"}
open
maxHeight="600px"
menuId="main-block-list"
placeholder="Choose a block to edit or enter name to create a new one..."
renderMenuItemChildren={(option, props, index) => (
<React.Fragment key={index}>
<div
style={{
height: 45,
verticalAlign: "middle"
}}
>
<span style={{ width: 45, display: "inline-block" }}>
{option.img && (
<img
src={option.img.replace(
"/image/upload/",
"/image/upload/h_42/"
)}
/>
)}
</span>
{option.label}
</div>
</React.Fragment>
)}
/>
}}
>
<FontAwesomeIcon icon={faPlus} style={{ width: "45px" }} />
Create new block: &nbsp;
<span>
<mark class="rbt-highlight-text">
{this.state.input || "Enter name"}
</mark>
</span>
</ListGroup.Item>
</ListGroup>
</React.Fragment>
);
}
Expand Down
74 changes: 36 additions & 38 deletions src/client/docs.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,12 +22,12 @@ export const docs = {
img: "block_image.png"
},
"block.requiresSoldering": {
text: "Display an indicator in the app that parts in this block require soldering",
text:
"Display an indicator in the app that parts in this block require soldering",
img: "block_soldering.png"
},
"block.description": {
text:
`A short paragraph in html describing the block, its features and uses. This description will appear in the block’s info pop up.
text: `A short paragraph in html describing the block, its features and uses. This description will appear in the block’s info pop up.
always wrap you paragraphs in \`\`\`<p>text</p>\`\`\``,
img: "block_desc.png"
},
Expand Down Expand Up @@ -80,13 +80,11 @@ E.g: when adding a controller similar to Arduino Uno, choose “Arduino Uno”
text:
"If blank, the system will try to optimally place the part on the circuit, based on the geometry of its SVG file. To override this preset, specify the rotation angle in degrees."
},
"circuit.part.includeInFirmware": {
"circuit.part.includeInFirmware": {
text: `Adds the port definition in the code.`
},



"circuit.ports": {
"circuit.ports": {
text: `Ports are the representation of the physical interface between circuits.
A port can either require or provide attributes. These attributes are used by the system to connect between ports.`
},
Expand All @@ -109,16 +107,17 @@ A port can either require or provide attributes. These attributes are used by th
"circuit.port.requires.load": {
text: `Specify the load that the port provides/requires (Only for significant load above 50mA).`
},
"circuit.port.unique" : {
text: "Defines that no other ports will be routed to its provider. Connecting Arduino Uno with 2 flex sensors with unique ports, will determine that each unique port will be connected to a different ADC port on the Arduino."
"circuit.port.unique": {
text:
"Defines that no other ports will be routed to its provider. Connecting Arduino Uno with 2 flex sensors with unique ports, will determine that each unique port will be connected to a different ADC port on the Arduino."
},
"circuit.port.chainTo": {
text: `Used for chainable blocks. (e.g. Led Matrix, Led Strips) When these are defined, the system will connect only the first instance of the chainable blocks to the controller and the rest will be chained to one another using this definition.
In this field, specify a port name to chain to, it comes together with the ‘Port is Chainable’ in the corresponding provides port.`,
img: "block_chainBlocks.png"
img: "block_chainBlocks.png"
},

"circuit.port.provides": {
"circuit.port.provides": {
text: `List all attributes it can provide.
Note:
- For power (3.3-5v and GND) pins, leave the spec blank.
Expand Down Expand Up @@ -160,38 +159,39 @@ Relative units. (0-inf)
Support blocks with a lower cost will be tried first. For controllers, there may be more than one support block.`
},



"circuit.coders": {
text: `The coder information is used to generate the test code provided in the app.
A block can have multiple coders which will differ according to their supported controllers.
The coder links between the block and the auto-generated code according to the selected controller. The coder’s information will be used to render the code for your controller. It’s also possible to add external code libraries to coders.`
},
"circuit.name":{
text:`Internal name of the code in the database. Must be unique.`
},
"circuit.supportedControllers":{
text:`List the controllers for which this coder is applicable.`
},
"circuit.files":{
text:`Upload external code libraries if necessary.`
},
"circuit.license":{
text:`It is important to also upload the license of the library added, and make sure that it is …`
},
"circuit.classname":{
text:`Specify the class name for this coder if necessary.`
},
"circuit.varname":{
text:`Specify the var name for this coder. Must be unique among all coders.`
},
"circuit.code":{
text:`The firmware.ino is generated by combining templates from all selected coders.
"coder.name": {
text: `Internal name of the code in the database. Must be unique.`
},
"coder.supportedControllers": {
text: `List the controllers for which this coder is applicable.`
},
"coder.files": {
text: `Upload external code libraries if necessary.`
},
"coder.headers": {
text: `Specify a list of header files to be included in the firmware.ino (could also be built-in Arduino IDE libraries such as SoftwareSerial.h).`
},
"coder.license": {
text: `It is important to upload the license of the library added, specify the license type here and make sure that it is under the public domain.`
},
"coder.classname": {
text: `Specify the class name for this coder if necessary.`
},
"coder.varname": {
text: `Specify the var name for this coder. Must be unique among all coders.`
},
"coder.code": {
text: `The firmware.ino is generated by combining templates from all selected coders.
Fill in the following sections and preview the renderd code example to verify.
`
},
"coder.code.global": {
},
"coder.code.global": {
text: "Used for global variables. Rendered at the top of the file."
},
"coder.code.constructors": {
Expand All @@ -205,8 +205,7 @@ Fill in the following sections and preview the renderd code example to verify.
text: `demonstrates basic use of the part. Should include comments.`
},


"circuit.parts": {
"circuit.parts": {
text: `Parts are the building blocks of the circuits. They are physical components, represented by an illustrated SVG file, and refer to a specific electronic component model.
A circuit consists of at least one part which interconnects with other parts and ports of the block. These connections are defined in the ‘wiring’ section.
`
Expand Down Expand Up @@ -281,5 +280,4 @@ E.g. screws, nuts, bolts, heatsinks, breakouts or special connectors.
Note: these parts aren’t represented in the schematics.
`
}

};
3 changes: 3 additions & 0 deletions src/client/form/commonfields.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,9 @@ export function supportedControllersUISchema(controllersList) {
placeholder: "Select controllers",
multiple: true,
minLength: 0
},
"ui:options": {
forceLabelDisplay: true
}
};
}
3 changes: 3 additions & 0 deletions src/client/form/tooltipdescriptionfield.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,9 @@ export const TooltipDescriptionField = ({ id, description }) => {
.use(html)
.processSync(docText);

if (!(doc && doc.text))
console.warn("Missing doc key ", descText)

return (
<div className="tooltip-hint" id={id} data-tip={`${docHTML}${imgTag}`}>
<a>
Expand Down
10 changes: 9 additions & 1 deletion src/client/home.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ export class Home extends React.Component {

render() {
return (
<Container>
<Container style={{ maxWidth: "unset" }}>
<Row>
<Col>
<Card>
Expand All @@ -35,6 +35,7 @@ export class Home extends React.Component {
<h3>How this works</h3>
</Card.Header>
<Card.Body>
Welcome to the <a href="www.circuito.io" target="_blank">circuito.io</a> Component Editor!
<ol>
<li>
Choose a block to <b>edit</b> or create a new one
Expand All @@ -50,6 +51,13 @@ export class Home extends React.Component {
it
</li>
</ol>
Need help? Visitr our{" "}
<a
href="https://talk.circuito.io/c/component-editor"
target="_blank"
>
support forum
</a>
</Card.Body>
</Card>
</Col>
Expand Down

0 comments on commit c0b7aa5

Please sign in to comment.