merging master
This commit is contained in:
Peli de Halleux
commit
da16428842
|
Before Width: | Height: | Size: 3.1 KiB After Width: | Height: | Size: 3.1 KiB |
|
|
@ -27,6 +27,8 @@
|
|||
"serial.cpp",
|
||||
"serial.ts",
|
||||
"buffer.cpp",
|
||||
"pxtparts.json",
|
||||
"parts/speaker.svg",
|
||||
"_locales/fr/microbit-jsdoc-strings.json"
|
||||
],
|
||||
"public": true,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,78 @@
|
|||
{
|
||||
"ledmatrix": {
|
||||
"visual": "ledmatrix",
|
||||
"breadboardColumnsNeeded": 8,
|
||||
"breadboardStartRow": "h",
|
||||
"pinAllocation": {
|
||||
"type": "auto",
|
||||
"gpioPinsNeeded": [5, 5]
|
||||
},
|
||||
"assemblyStep": 0,
|
||||
"wires": [
|
||||
{"start": ["breadboard", "j", 0], "end": ["GPIO", 5], "color": "purple", "assemblyStep": 1},
|
||||
{"start": ["breadboard", "j", 1], "end": ["GPIO", 6], "color": "purple", "assemblyStep": 1},
|
||||
{"start": ["breadboard", "j", 2], "end": ["GPIO", 7], "color": "purple", "assemblyStep": 1},
|
||||
{"start": ["breadboard", "j", 3], "end": ["GPIO", 8], "color": "purple", "assemblyStep": 1},
|
||||
{"start": ["breadboard", "a", 7], "end": ["GPIO", 9], "color": "purple", "assemblyStep": 1},
|
||||
{"start": ["breadboard", "a", 0], "end": ["GPIO", 0], "color": "green", "assemblyStep": 2},
|
||||
{"start": ["breadboard", "a", 1], "end": ["GPIO", 1], "color": "green", "assemblyStep": 2},
|
||||
{"start": ["breadboard", "a", 2], "end": ["GPIO", 2], "color": "green", "assemblyStep": 2},
|
||||
{"start": ["breadboard", "a", 3], "end": ["GPIO", 3], "color": "green", "assemblyStep": 2},
|
||||
{"start": ["breadboard", "j", 4], "end": ["GPIO", 4], "color": "green", "assemblyStep": 2}
|
||||
]
|
||||
},
|
||||
"buttonpair": {
|
||||
"visual": "buttonpair",
|
||||
"breadboardColumnsNeeded": 6,
|
||||
"breadboardStartRow": "f",
|
||||
"pinAllocation": {
|
||||
"type": "predefined",
|
||||
"pins": ["P13", "P12"]
|
||||
},
|
||||
"assemblyStep": 0,
|
||||
"wires": [
|
||||
{"start": ["breadboard", "j", 0], "end": ["GPIO", 0], "color": "yellow", "assemblyStep": 1},
|
||||
{"start": ["breadboard", "a", 2], "end": "ground", "color": "blue", "assemblyStep": 1},
|
||||
{"start": ["breadboard", "j", 3], "end": ["GPIO", 1], "color": "orange", "assemblyStep": 2},
|
||||
{"start": ["breadboard", "a", 5], "end": "ground", "color": "blue", "assemblyStep": 2}
|
||||
]
|
||||
},
|
||||
"neopixel": {
|
||||
"visual": "neopixel",
|
||||
"breadboardColumnsNeeded": 5,
|
||||
"breadboardStartRow": "h",
|
||||
"pinAllocation": {
|
||||
"type": "factoryfunction",
|
||||
"functionName": "neopixel.create",
|
||||
"pinArgPositions": [0],
|
||||
"otherArgPositions": [1]
|
||||
},
|
||||
"assemblyStep": 0,
|
||||
"wires": [
|
||||
{"start": ["breadboard", "j", 1], "end": "ground", "color": "blue", "assemblyStep": 1},
|
||||
{"start": ["breadboard", "j", 2], "end": "threeVolt", "color": "red", "assemblyStep": 2},
|
||||
{"start": ["breadboard", "j", 3], "end": ["GPIO", 0], "color": "green", "assemblyStep": 2}
|
||||
]
|
||||
},
|
||||
"speaker": {
|
||||
"visual": {
|
||||
"image": "/parts/speaker.svg",
|
||||
"width": 500,
|
||||
"height": 500,
|
||||
"firstPin": [180, 135],
|
||||
"pinDist": 70,
|
||||
"extraColumnOffset": 1
|
||||
},
|
||||
"breadboardColumnsNeeded": 5,
|
||||
"breadboardStartRow": "f",
|
||||
"pinAllocation": {
|
||||
"type": "auto",
|
||||
"gpioPinsNeeded": 1
|
||||
},
|
||||
"assemblyStep": 0,
|
||||
"wires": [
|
||||
{"start": ["breadboard", "j", 1], "end": ["GPIO", 0], "color": "#ff80fa", "assemblyStep": 1},
|
||||
{"start": ["breadboard", "j", 3], "end": "ground", "color": "blue", "assemblyStep": 1}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "pxt-microbit",
|
||||
"version": "0.3.67",
|
||||
"version": "0.3.69",
|
||||
"description": "micro:bit target for PXT",
|
||||
"keywords": [
|
||||
"JavaScript",
|
||||
|
|
@ -29,6 +29,6 @@
|
|||
"typescript": "^1.8.7"
|
||||
},
|
||||
"dependencies": {
|
||||
"pxt-core": "0.3.76"
|
||||
"pxt-core": "0.3.79"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
/// <reference path="../node_modules/pxt-core/built/pxtsim.d.ts"/>
|
||||
|
||||
namespace pxsim {
|
||||
export class DalBoard extends BaseBoard {
|
||||
id: string;
|
||||
|
|
@ -69,12 +71,14 @@ namespace pxsim {
|
|||
}
|
||||
|
||||
initAsync(msg: SimulatorRunMessage): Promise<void> {
|
||||
super.initAsync(msg);
|
||||
|
||||
let options = (msg.options || {}) as RuntimeOptions;
|
||||
|
||||
let boardDef = CURRENT_BOARD; //TODO: read from pxt.json/pxttarget.json
|
||||
|
||||
let cmpsList = msg.parts;
|
||||
let cmpDefs = PART_DEFINITIONS; //TODO: read from pxt.json/pxttarget.json
|
||||
let cmpDefs = msg.partDefinitions || {}; //TODO: read from pxt.json/pxttarget.json
|
||||
let fnArgs = msg.fnArgs;
|
||||
|
||||
let viewHost = new visuals.BoardHost({
|
||||
|
|
|
|||
|
|
@ -1,90 +1,10 @@
|
|||
/// <reference path="../node_modules/pxt-core/typings/bluebird/bluebird.d.ts"/>
|
||||
/// <reference path="../node_modules/pxt-core/built/pxtparts.d.ts"/>
|
||||
/// <reference path="../node_modules/pxt-core/built/pxtsim.d.ts"/>
|
||||
/// <reference path="../libs/microbit/dal.d.ts"/>
|
||||
/// <reference path="./visuals/neopixel.ts"/>
|
||||
|
||||
namespace pxsim {
|
||||
export interface PinBlockDefinition {
|
||||
x: number,
|
||||
y: number,
|
||||
labelPosition: "above" | "below";
|
||||
labels: string[]
|
||||
}
|
||||
export interface BoardImageDefinition {
|
||||
image: string,
|
||||
outlineImage?: string,
|
||||
width: number,
|
||||
height: number,
|
||||
pinDist: number,
|
||||
pinBlocks: PinBlockDefinition[],
|
||||
};
|
||||
export interface BoardDefinition {
|
||||
visual: BoardImageDefinition | string,
|
||||
gpioPinBlocks?: string[][],
|
||||
gpioPinMap: {[pin: string]: string},
|
||||
groundPins: string[],
|
||||
threeVoltPins: string[],
|
||||
attachPowerOnRight?: boolean,
|
||||
onboardComponents?: string[]
|
||||
useCrocClips?: boolean,
|
||||
marginWhenBreadboarding?: [number, number, number, number],
|
||||
spiPins?: {
|
||||
MOSI: string,
|
||||
MISO: string,
|
||||
SCK: string,
|
||||
},
|
||||
i2cPins?: {
|
||||
SDA: string,
|
||||
SCL: string,
|
||||
},
|
||||
analogInPins?: string[], //TODO: implement allocation
|
||||
}
|
||||
export interface FactoryFunctionPinAlloc {
|
||||
type: "factoryfunction",
|
||||
functionName: string,
|
||||
pinArgPositions: number[],
|
||||
otherArgPositions?: number[],
|
||||
}
|
||||
export interface PredefinedPinAlloc {
|
||||
type: "predefined",
|
||||
pins: string[],
|
||||
}
|
||||
export interface AutoPinAlloc {
|
||||
type: "auto",
|
||||
gpioPinsNeeded: number | number[],
|
||||
}
|
||||
export interface PartVisualDefinition {
|
||||
image: string,
|
||||
width: number,
|
||||
height: number,
|
||||
pinDist: number,
|
||||
extraColumnOffset?: number,
|
||||
firstPin: [number, number],
|
||||
}
|
||||
export interface PartDefinition {
|
||||
visual: string | PartVisualDefinition,
|
||||
breadboardColumnsNeeded: number,
|
||||
breadboardStartRow: string,
|
||||
wires: WireDefinition[],
|
||||
assemblyStep: number,
|
||||
pinAllocation: FactoryFunctionPinAlloc | PredefinedPinAlloc | AutoPinAlloc,
|
||||
}
|
||||
export interface WireDefinition {
|
||||
start: WireLocationDefinition,
|
||||
end: WireLocationDefinition,
|
||||
color: string,
|
||||
assemblyStep: number
|
||||
};
|
||||
export type SPIPin = "MOSI" | "MISO" | "SCK";
|
||||
export type I2CPin = "SDA" | "SCL";
|
||||
export type WireLocationDefinition = (
|
||||
["breadboard", string, number]
|
||||
| ["GPIO", number]
|
||||
| SPIPin
|
||||
| I2CPin
|
||||
| "ground"
|
||||
| "threeVolt");
|
||||
|
||||
export const MICROBIT_DEF: BoardDefinition = {
|
||||
visual: "microbit",
|
||||
gpioPinBlocks: [
|
||||
|
|
@ -133,110 +53,6 @@ namespace pxsim {
|
|||
marginWhenBreadboarding: [0, 0, 80, 0],
|
||||
}
|
||||
|
||||
export const PART_DEFINITIONS: Map<PartDefinition> = {
|
||||
"ledmatrix": {
|
||||
visual: "ledmatrix",
|
||||
breadboardColumnsNeeded: 8,
|
||||
breadboardStartRow: "h",
|
||||
pinAllocation: {
|
||||
type: "auto",
|
||||
gpioPinsNeeded: [5, 5],
|
||||
},
|
||||
assemblyStep: 0,
|
||||
wires: [
|
||||
{start: ["breadboard", `j`, 0], end: ["GPIO", 5], color: "purple", assemblyStep: 1},
|
||||
{start: ["breadboard", `j`, 1], end: ["GPIO", 6], color: "purple", assemblyStep: 1},
|
||||
{start: ["breadboard", `j`, 2], end: ["GPIO", 7], color: "purple", assemblyStep: 1},
|
||||
{start: ["breadboard", `j`, 3], end: ["GPIO", 8], color: "purple", assemblyStep: 1},
|
||||
{start: ["breadboard", `a`, 7], end: ["GPIO", 9], color: "purple", assemblyStep: 1},
|
||||
{start: ["breadboard", `a`, 0], end: ["GPIO", 0], color: "green", assemblyStep: 2},
|
||||
{start: ["breadboard", `a`, 1], end: ["GPIO", 1], color: "green", assemblyStep: 2},
|
||||
{start: ["breadboard", `a`, 2], end: ["GPIO", 2], color: "green", assemblyStep: 2},
|
||||
{start: ["breadboard", `a`, 3], end: ["GPIO", 3], color: "green", assemblyStep: 2},
|
||||
{start: ["breadboard", `j`, 4], end: ["GPIO", 4], color: "green", assemblyStep: 2},
|
||||
]
|
||||
},
|
||||
"buttonpair": {
|
||||
visual: "buttonpair",
|
||||
breadboardColumnsNeeded: 6,
|
||||
breadboardStartRow: "f",
|
||||
pinAllocation: {
|
||||
type: "predefined",
|
||||
pins: ["P13", "P12"],
|
||||
},
|
||||
assemblyStep: 0,
|
||||
wires: [
|
||||
{start: ["breadboard", "j", 0], end: ["GPIO", 0], color: "yellow", assemblyStep: 1},
|
||||
{start: ["breadboard", "a", 2], end: "ground", color: "blue", assemblyStep: 1},
|
||||
{start: ["breadboard", "j", 3], end: ["GPIO", 1], color: "orange", assemblyStep: 2},
|
||||
{start: ["breadboard", "a", 5], end: "ground", color: "blue", assemblyStep: 2},
|
||||
],
|
||||
},
|
||||
"neopixel": {
|
||||
visual: "neopixel",
|
||||
breadboardColumnsNeeded: 5,
|
||||
breadboardStartRow: "h",
|
||||
pinAllocation: {
|
||||
type: "factoryfunction",
|
||||
functionName: "neopixel.create",
|
||||
pinArgPositions: [0],
|
||||
otherArgPositions: [1],
|
||||
},
|
||||
assemblyStep: 0,
|
||||
wires: [
|
||||
{start: ["breadboard", "j", 1], end: "ground", color: "blue", assemblyStep: 1},
|
||||
{start: ["breadboard", "j", 2], end: "threeVolt", color: "red", assemblyStep: 2},
|
||||
{start: ["breadboard", "j", 3], end: ["GPIO", 0], color: "green", assemblyStep: 2},
|
||||
],
|
||||
},
|
||||
"speaker": {
|
||||
visual: {
|
||||
image: "/parts/speaker.svg",
|
||||
width: 500,
|
||||
height: 500,
|
||||
firstPin: [180, 135],
|
||||
pinDist: 70,
|
||||
extraColumnOffset: 1,
|
||||
},
|
||||
breadboardColumnsNeeded: 5,
|
||||
breadboardStartRow: "f",
|
||||
pinAllocation: {
|
||||
type: "auto",
|
||||
gpioPinsNeeded: 1,
|
||||
},
|
||||
assemblyStep: 0,
|
||||
wires: [
|
||||
{start: ["breadboard", "j", 1], end: ["GPIO", 0], color: "#ff80fa", assemblyStep: 1},
|
||||
{start: ["breadboard", "j", 3], end: "ground", color: "blue", assemblyStep: 1},
|
||||
],
|
||||
},
|
||||
"max6675": {
|
||||
visual: {
|
||||
image: "/static/hardware/max6675.svg",
|
||||
width: 58,
|
||||
height: 64,
|
||||
firstPin: [11, 5],
|
||||
pinDist: 7.2,
|
||||
extraColumnOffset: 2,
|
||||
},
|
||||
breadboardColumnsNeeded: 10,
|
||||
breadboardStartRow: "h",
|
||||
pinAllocation: {
|
||||
type: "factoryfunction",
|
||||
functionName: "max6675.temperature",
|
||||
pinArgPositions: [0]
|
||||
},
|
||||
assemblyStep: 0,
|
||||
wires: [
|
||||
{start: ["breadboard", "j", 2], end: "SCK", color: "green", assemblyStep: 1},
|
||||
{start: ["breadboard", "j", 3], end: ["GPIO", 0], color: "blue", assemblyStep: 1},
|
||||
{start: ["breadboard", "j", 4], end: "MISO", color: "orange", assemblyStep: 1},
|
||||
{start: ["breadboard", "j", 5], end: "ground", color: "blue", assemblyStep: 0},
|
||||
{start: ["breadboard", "j", 6], end: "threeVolt", color: "red", assemblyStep: 1},
|
||||
],
|
||||
},
|
||||
}
|
||||
|
||||
export const builtinComponentSimVisual: Map<() => visuals.IBoardComponent<any>> = {
|
||||
"buttonpair": () => new visuals.ButtonPairView(),
|
||||
"ledmatrix": () => new visuals.LedMatrixView(),
|
||||
|
|
|
|||
|
|
@ -20,34 +20,37 @@ namespace pxsim.instructions {
|
|||
const LBL_LEFT_PAD = 5;
|
||||
const REQ_WIRE_HEIGHT = 45;
|
||||
const REQ_CMP_HEIGHT = 55;
|
||||
const REQ_CMP_SCALE = 0.5;
|
||||
const REQ_CMP_SCALE = 0.5 * 4;
|
||||
type Orientation = "landscape" | "portrait";
|
||||
const ORIENTATION: Orientation = "portrait";
|
||||
const PPI = 96.0;
|
||||
const PAGE_SCALAR = 0.95;
|
||||
const [FULL_PAGE_WIDTH, FULL_PAGE_HEIGHT]
|
||||
= (ORIENTATION == "portrait" ? [PPI * 8.5, PPI * 11.0] : [PPI * 11.0, PPI * 8.5]);
|
||||
= (ORIENTATION == "portrait" ? [PPI * 8.5 * PAGE_SCALAR, PPI * 11.0 * PAGE_SCALAR] : [PPI * 11.0 * PAGE_SCALAR, PPI * 8.5 * PAGE_SCALAR]);
|
||||
const PAGE_MARGIN = PPI * 0.45;
|
||||
const PAGE_WIDTH = FULL_PAGE_WIDTH - PAGE_MARGIN * 2;
|
||||
const PAGE_HEIGHT = FULL_PAGE_HEIGHT - PAGE_MARGIN * 2;
|
||||
const BORDER_COLOR = "gray";
|
||||
const BORDER_RADIUS = 5;
|
||||
const BORDER_WIDTH = 2;
|
||||
const [PANEL_ROWS, PANEL_COLS] = [2, 2];
|
||||
const BORDER_RADIUS = 5 * 4;
|
||||
const BORDER_WIDTH = 2 * 2;
|
||||
const [PANEL_ROWS, PANEL_COLS] = [1, 1];
|
||||
const PANEL_MARGIN = 20;
|
||||
const PANEL_PADDING = 8;
|
||||
const PANEL_PADDING = 8 * 3;
|
||||
const PANEL_WIDTH = PAGE_WIDTH / PANEL_COLS - (PANEL_MARGIN + PANEL_PADDING + BORDER_WIDTH) * PANEL_COLS;
|
||||
const PANEL_HEIGHT = PAGE_HEIGHT / PANEL_ROWS - (PANEL_MARGIN + PANEL_PADDING + BORDER_WIDTH) * PANEL_ROWS;
|
||||
const BOARD_WIDTH = 240;
|
||||
const BOARD_WIDTH = 465;
|
||||
const BOARD_LEFT = (PANEL_WIDTH - BOARD_WIDTH) / 2.0 + PANEL_PADDING;
|
||||
const BOARD_BOT = PANEL_PADDING;
|
||||
const NUM_BOX_SIZE = 60;
|
||||
const NUM_FONT = 40;
|
||||
const NUM_MARGIN = 5;
|
||||
const FRONT_PAGE_BOARD_WIDTH = 200;
|
||||
const NUM_BOX_SIZE = 120;
|
||||
const NUM_FONT = 80;
|
||||
const NUM_MARGIN = 10;
|
||||
const FRONT_PAGE_BOARD_WIDTH = 400;
|
||||
const PART_SCALAR = 2.3
|
||||
const PARTS_BOARD_SCALE = 0.17;
|
||||
const PARTS_BB_SCALE = 0.25;
|
||||
const PARTS_CMP_SCALE = 0.3;
|
||||
const PARTS_WIRE_SCALE = 0.23;
|
||||
const BACK_PAGE_BOARD_WIDTH = PANEL_WIDTH - PANEL_PADDING * 1.5;
|
||||
const STYLE = `
|
||||
.instr-panel {
|
||||
margin: ${PANEL_MARGIN}px;
|
||||
|
|
@ -56,11 +59,12 @@ namespace pxsim.instructions {
|
|||
border-color: ${BORDER_COLOR};
|
||||
border-style: solid;
|
||||
border-radius: ${BORDER_RADIUS}px;
|
||||
display: inline-block;
|
||||
display: block;
|
||||
width: ${PANEL_WIDTH}px;
|
||||
height: ${PANEL_HEIGHT}px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
.board-svg {
|
||||
margin: 0 auto;
|
||||
|
|
@ -90,10 +94,11 @@ namespace pxsim.instructions {
|
|||
}
|
||||
.reqs-div {
|
||||
margin-left: ${PANEL_PADDING + NUM_BOX_SIZE}px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.partslist-wire,
|
||||
.partslist-cmp {
|
||||
margin: 5px;
|
||||
margin: 10px;
|
||||
}
|
||||
.partslist-wire {
|
||||
display: inline-block;
|
||||
|
|
@ -269,8 +274,8 @@ namespace pxsim.instructions {
|
|||
|
||||
let svgAtts = {
|
||||
"viewBox": `${dims.l} ${dims.t} ${dims.w} ${dims.h}`,
|
||||
"width": dims.w,
|
||||
"height": dims.h,
|
||||
"width": dims.w * PART_SCALAR,
|
||||
"height": dims.h * PART_SCALAR,
|
||||
"preserveAspectRatio": "xMidYMid",
|
||||
};
|
||||
svg.hydrate(svgEl, svgAtts);
|
||||
|
|
@ -560,7 +565,6 @@ namespace pxsim.instructions {
|
|||
return [panel, props];
|
||||
}
|
||||
function mkFinalPanel(props: BoardProps) {
|
||||
const BACK_PAGE_BOARD_WIDTH = PANEL_WIDTH - 20;
|
||||
|
||||
let panel = mkPanel();
|
||||
addClass(panel, "back-panel");
|
||||
|
|
@ -620,6 +624,9 @@ ${tsPackage}
|
|||
let parts = (getQsVal("parts") || "").split(" ");
|
||||
parts.sort();
|
||||
|
||||
// parts definitions
|
||||
let partDefinitions = JSON.parse(getQsVal("partdefs") || "{}") as pxsim.Map<PartDefinition>
|
||||
|
||||
//fn args
|
||||
let fnArgs = JSON.parse((getQsVal("fnArgs") || "{}"));
|
||||
|
||||
|
|
@ -637,7 +644,7 @@ ${tsPackage}
|
|||
style.textContent += STYLE;
|
||||
|
||||
const boardDef = CURRENT_BOARD;
|
||||
const cmpDefs = PART_DEFINITIONS;
|
||||
const cmpDefs = partDefinitions;
|
||||
|
||||
//props
|
||||
let dummyBreadboard = new visuals.Breadboard({});
|
||||
|
|
|
|||
|
|
@ -96,9 +96,9 @@
|
|||
|
||||
.organization {
|
||||
position: absolute;
|
||||
bottom: 1rem;
|
||||
right: 1rem;
|
||||
height: 2rem;
|
||||
bottom: 2rem;
|
||||
right: 2rem;
|
||||
height: 4rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
|
|
@ -112,23 +112,23 @@
|
|||
|
||||
#front-panel .board-svg {
|
||||
position: absolute;
|
||||
left: 1rem;
|
||||
width: 140px;
|
||||
top: 8rem;
|
||||
left: 2rem;
|
||||
width: 300px;
|
||||
top: 16rem;
|
||||
}
|
||||
|
||||
#proj-title {
|
||||
top: 20px;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
font-size: 70px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
#proj-code {
|
||||
width: 140px;
|
||||
height: 200px;
|
||||
width: 300px;
|
||||
height: 400px;
|
||||
position: absolute;
|
||||
right: 1rem;
|
||||
top: 8rem;
|
||||
right: 2rem;
|
||||
top: 16rem;
|
||||
}
|
||||
#proj-code-container {
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -59,16 +59,48 @@ namespace pxsim.visuals {
|
|||
const NP_PART_YOFF = -11;
|
||||
const NP_PART_WIDTH = 87.5;
|
||||
const NP_PART_HEIGHT = 190;
|
||||
const NEOPIXEL_PART_IMG = "neopixel.svg";
|
||||
const NEOPIXEL_PART_IMG = `<svg viewBox="-5 -1 53 112" xmlns="http://www.w3.org/2000/svg" xmlns:bx="https://boxy-svg.com">
|
||||
<rect x="2.5" width="38" height="100" style="fill: rgb(68, 68, 68);"/>
|
||||
<rect x="11.748" y="3.2" width="1.391" height="2.553" style="fill: none; stroke-linejoin: round; stroke-width: 3; stroke: rgb(165, 103, 52);"/>
|
||||
<rect x="20.75" y="3.2" width="1.391" height="2.553" style="fill: none; stroke-linejoin: round; stroke-width: 3; stroke: rgb(165, 103, 52);"/>
|
||||
<rect x="29.75" y="3.2" width="1.391" height="2.553" style="fill: none; stroke-linejoin: round; stroke-width: 3; stroke: rgb(165, 103, 52);"/>
|
||||
<g>
|
||||
<rect x="9" y="16.562" width="25" height="3.238" style="fill: rgb(216, 216, 216);"/>
|
||||
<rect x="9" y="22.562" width="25" height="3.238" style="fill: rgb(216, 216, 216);"/>
|
||||
<rect x="9" y="28.563" width="25" height="3.238" style="fill: rgb(216, 216, 216);"/>
|
||||
<rect x="11.607" y="14.833" width="19.787" height="18.697" style="fill: rgb(0, 0, 0);"/>
|
||||
<ellipse style="fill: rgb(216, 216, 216);" cx="21.5" cy="24.181" rx="7" ry="7"/>
|
||||
</g>
|
||||
<path d="M -7.25 -103.2 L -2.5 -100.003 L -12 -100.003 L -7.25 -103.2 Z" style="fill: rgb(68, 68, 68);" transform="matrix(-1, 0, 0, -1, 0, 0)" bx:shape="triangle -12 -103.2 9.5 3.197 0.5 0 1@ad6f5cac"/>
|
||||
<path d="M -16.75 -103.197 L -12 -100 L -21.5 -100 L -16.75 -103.197 Z" style="fill: rgb(68, 68, 68);" transform="matrix(-1, 0, 0, -1, 0, 0)" bx:shape="triangle -21.5 -103.197 9.5 3.197 0.5 0 1@07d73149"/>
|
||||
<path d="M -26.25 -103.2 L -21.5 -100.003 L -31 -100.003 L -26.25 -103.2 Z" style="fill: rgb(68, 68, 68);" transform="matrix(-1, 0, 0, -1, 0, 0)" bx:shape="triangle -31 -103.2 9.5 3.197 0.5 0 1@54403e2d"/>
|
||||
<path d="M -35.75 -103.197 L -31 -100 L -40.5 -100 L -35.75 -103.197 Z" style="fill: rgb(68, 68, 68);" transform="matrix(-1, 0, 0, -1, 0, 0)" bx:shape="triangle -40.5 -103.197 9.5 3.197 0.5 0 1@21c9b772"/>
|
||||
<g transform="matrix(1, 0, 0, 1, 0.000002, 29.999994)">
|
||||
<rect x="9" y="16.562" width="25" height="3.238" style="fill: rgb(216, 216, 216);"/>
|
||||
<rect x="9" y="22.562" width="25" height="3.238" style="fill: rgb(216, 216, 216);"/>
|
||||
<rect x="9" y="28.563" width="25" height="3.238" style="fill: rgb(216, 216, 216);"/>
|
||||
<rect x="11.607" y="14.833" width="19.787" height="18.697" style="fill: rgb(0, 0, 0);"/>
|
||||
<ellipse style="fill: rgb(216, 216, 216);" cx="21.5" cy="24.181" rx="7" ry="7"/>
|
||||
</g>
|
||||
<g transform="matrix(1, 0, 0, 1, 0.000005, 59.999992)">
|
||||
<rect x="9" y="16.562" width="25" height="3.238" style="fill: rgb(216, 216, 216);"/>
|
||||
<rect x="9" y="22.562" width="25" height="3.238" style="fill: rgb(216, 216, 216);"/>
|
||||
<rect x="9" y="28.563" width="25" height="3.238" style="fill: rgb(216, 216, 216);"/>
|
||||
<rect x="11.607" y="14.833" width="19.787" height="18.697" style="fill: rgb(0, 0, 0);"/>
|
||||
<ellipse style="fill: rgb(216, 216, 216);" cx="21.5" cy="24.181" rx="7" ry="7"/>
|
||||
</g>
|
||||
</svg>`;
|
||||
let [x, y] = xy;
|
||||
let l = x + NP_PART_XOFF;
|
||||
let t = y + NP_PART_YOFF;
|
||||
let w = NP_PART_WIDTH;
|
||||
let h = NP_PART_HEIGHT;
|
||||
let img = <SVGImageElement>svg.elt("image");
|
||||
svg.hydrate(img, {class: "sim-neopixel-strip", x: l, y: t, width: w, height: h,
|
||||
href: `/parts/${NEOPIXEL_PART_IMG}`});
|
||||
return {el: img, x: l, y: t, w: w, h: h};
|
||||
svg.hydrate(img, {
|
||||
class: "sim-neopixel-strip", x: l, y: t, width: w, height: h,
|
||||
href: svg.toDataUri(NEOPIXEL_PART_IMG)
|
||||
});
|
||||
return { el: img, x: l, y: t, w: w, h: h };
|
||||
}
|
||||
export class NeoPixel implements SVGAndSize<SVGCircleElement> {
|
||||
public el: SVGCircleElement;
|
||||
|
|
@ -83,7 +115,7 @@ namespace pxsim.visuals {
|
|||
let circle = <SVGCircleElement>svg.elt("circle");
|
||||
let r = PIXEL_RADIUS;
|
||||
let [cx, cy] = xy;
|
||||
svg.hydrate(circle, {cx: cx, cy: cy, r: r, class: "sim-neopixel"});
|
||||
svg.hydrate(circle, { cx: cx, cy: cy, r: r, class: "sim-neopixel" });
|
||||
this.el = circle;
|
||||
this.w = r * 2;
|
||||
this.h = r * 2;
|
||||
|
|
@ -121,14 +153,14 @@ namespace pxsim.visuals {
|
|||
"height": `${CANVAS_HEIGHT}px`,
|
||||
});
|
||||
this.canvas = el;
|
||||
this.background = <SVGRectElement>svg.child(el, "rect", { class: "sim-neopixel-background hidden"});
|
||||
this.background = <SVGRectElement>svg.child(el, "rect", { class: "sim-neopixel-background hidden" });
|
||||
this.updateViewBox(-CANVAS_VIEW_WIDTH / 2, 0, CANVAS_VIEW_WIDTH, CANVAS_VIEW_HEIGHT);
|
||||
}
|
||||
|
||||
private updateViewBox(x: number, y: number, w: number, h: number) {
|
||||
this.viewBox = [x, y, w, h];
|
||||
svg.hydrate(this.canvas, {"viewBox": `${x} ${y} ${w} ${h}`});
|
||||
svg.hydrate(this.background, {"x": x, "y": y, "width": w, "height": h});
|
||||
svg.hydrate(this.canvas, { "viewBox": `${x} ${y} ${w} ${h}` });
|
||||
svg.hydrate(this.background, { "x": x, "y": y, "width": w, "height": h });
|
||||
}
|
||||
|
||||
public update(colors: RGBW[]) {
|
||||
|
|
@ -144,7 +176,7 @@ namespace pxsim.visuals {
|
|||
}
|
||||
let color = colors[i];
|
||||
pixel.setRgb(color);
|
||||
svg.hydrate(pixel.el, {title: `offset: ${i}`});
|
||||
svg.hydrate(pixel.el, { title: `offset: ${i}` });
|
||||
}
|
||||
|
||||
//show the canvas if it's hidden
|
||||
|
|
@ -164,7 +196,7 @@ namespace pxsim.visuals {
|
|||
|
||||
public setLoc(xy: Coord) {
|
||||
let [x, y] = xy;
|
||||
svg.hydrate(this.canvas, {x: x, y: y});
|
||||
svg.hydrate(this.canvas, { x: x, y: y });
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -232,7 +264,7 @@ namespace pxsim.visuals {
|
|||
this.stripGroup.appendChild(part.el);
|
||||
let canvas = new NeoPixelCanvas(this.pin);
|
||||
this.canvas = canvas;
|
||||
let canvasG = svg.child(this.stripGroup, "g", {class: "sim-neopixel-canvas-parent"});
|
||||
let canvasG = svg.child(this.stripGroup, "g", { class: "sim-neopixel-canvas-parent" });
|
||||
canvasG.appendChild(canvas.canvas);
|
||||
this.updateStripLoc();
|
||||
}
|
||||
|
|
@ -245,12 +277,12 @@ namespace pxsim.visuals {
|
|||
private updateStripLoc() {
|
||||
let [x, y] = this.lastLocation;
|
||||
this.canvas.setLoc([x + CANVAS_LEFT, y + CANVAS_TOP]);
|
||||
svg.hydrate(this.part.el, {transform: `translate(${x} ${y})`}); //TODO: update part's l,h, etc.
|
||||
svg.hydrate(this.part.el, { transform: `translate(${x} ${y})` }); //TODO: update part's l,h, etc.
|
||||
}
|
||||
public updateState(): void {
|
||||
let colors = this.state.getColors(this.pin, this.mode);
|
||||
this.canvas.update(colors);
|
||||
}
|
||||
public updateTheme (): void { }
|
||||
public updateTheme(): void { }
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue