diff --git a/app/resources/examples/1. Basics/1) Led on.ice b/app/resources/examples/1. Basics/1) Led on.ice new file mode 100644 index 000000000..581692da8 --- /dev/null +++ b/app/resources/examples/1. Basics/1) Led on.ice @@ -0,0 +1,152 @@ +{ + "image": "", + "state": { + "pan": { + "x": 0, + "y": 0 + }, + "zoom": 1.0000000282278803 + }, + "board": "icezum", + "graph": { + "blocks": [ + { + "id": "a538a5b4-d5d5-4ace-a593-efb1fa9b930c", + "type": "basic.info", + "data": { + "info": "LED-ON Hello world circuit example!\n\nThe simplest digital circuit that turns a \nled on\n\nA bit set to 1 is wired directly to the\noutput FPGA pin, where the led is connected" + }, + "position": { + "x": 16, + "y": 16 + } + }, + { + "id": "0d05784e-8e32-4c80-b85d-cde4e892dbf3", + "type": "basic.info", + "data": { + "info": "Ejemplo de circuito Hola mundo: LED-ON\n\nEs el circuito digital más sencillo que\nenciende un led\n\nUn bit a 1 se cablea directamente a una\nsalida de la FPGA, donde está conectado\nel LED" + }, + "position": { + "x": 448, + "y": 16 + } + }, + { + "id": "e657ee6f-9430-4fce-a539-72d12d32f5bb", + "type": "bit.1", + "data": {}, + "position": { + "x": 32, + "y": 304 + } + }, + { + "id": "949075cb-26c0-49da-ba76-2496ea9aa7cc", + "type": "basic.output", + "data": { + "label": "led", + "pin": { + "name": "LED0", + "value": "95" + } + }, + "position": { + "x": 304, + "y": 304 + } + }, + { + "id": "c2fdfed1-93e8-4bec-9823-e26b5fbd2810", + "type": "basic.info", + "data": { + "info": "The blue box is the bit (set to 1)\nIt is inside the FPGA\n\nThe yellow box is the output FPGA pin. Using\nthe bottom menu the pin can be changed\n\nEXERCISE 1: Upload this circuit into your \nFPGA board and watch the led. \nIt should be turned on\n\nEXERCISE 2: Change the pin number to turn\nanother led on and upload it again" + }, + "position": { + "x": 16, + "y": 400 + } + }, + { + "id": "4636e6a5-3a88-4cd0-b7b6-dd31e7041368", + "type": "basic.info", + "data": { + "info": "La caja azul es el bit a 1\nEstá dentro de la FPGA\n\nLa caja amarilla es el pin de salida de\nla FPGA. Por medio del menú desplegable\ninferior se puede cambiar el pin\n\nEJERCICIO 1: Carga este circuito en la FPGA\ny observa el LED0. Debe estar encendido\n\nEJERCICIO 2: Cambia el pin de salida para\nencender otro led (por ejemplo el LED1)\ny cárgalo en la FPGA de nuevo" + }, + "position": { + "x": 448, + "y": 400 + } + } + ], + "wires": [ + { + "source": { + "block": "e657ee6f-9430-4fce-a539-72d12d32f5bb", + "port": "19c8f68d-5022-487f-9ab0-f0a3cd58bead" + }, + "target": { + "block": "949075cb-26c0-49da-ba76-2496ea9aa7cc", + "port": "in" + } + } + ] + }, + "deps": { + "bit.1": { + "graph": { + "blocks": [ + { + "id": "b959fb96-ac67-4aea-90b3-ed35a4c17bf5", + "type": "basic.code", + "data": { + "code": "// Bit 1\n\nassign v = 1'b1;", + "ports": { + "in": [], + "out": [ + "v" + ] + } + }, + "position": { + "x": 96, + "y": 96 + } + }, + { + "id": "19c8f68d-5022-487f-9ab0-f0a3cd58bead", + "type": "basic.output", + "data": { + "label": "" + }, + "position": { + "x": 608, + "y": 192 + } + } + ], + "wires": [ + { + "source": { + "block": "b959fb96-ac67-4aea-90b3-ed35a4c17bf5", + "port": "v" + }, + "target": { + "block": "19c8f68d-5022-487f-9ab0-f0a3cd58bead", + "port": "in" + } + } + ] + }, + "deps": {}, + "image": "resources/images/1.svg", + "state": { + "pan": { + "x": 0, + "y": 0 + }, + "zoom": 1 + } + } + } +} \ No newline at end of file diff --git a/app/resources/examples/1. Basics/2) Switch led.ice b/app/resources/examples/1. Basics/2) Switch led.ice new file mode 100644 index 000000000..64732f232 --- /dev/null +++ b/app/resources/examples/1. Basics/2) Switch led.ice @@ -0,0 +1,189 @@ +{ + "image": "", + "state": { + "pan": { + "x": 0, + "y": 0 + }, + "zoom": 0.9999999806863423 + }, + "board": "icezum", + "graph": { + "blocks": [ + { + "id": "aac1b394-533e-4410-9f35-ba80af8abd63", + "type": "basic.input", + "data": { + "label": "button", + "pin": { + "name": "SW1", + "value": "10" + } + }, + "position": { + "x": 48, + "y": 304 + } + }, + { + "id": "30a83e46-176d-40a8-ac0e-f19a131ea9d9", + "type": "basic.output", + "data": { + "label": "led", + "pin": { + "name": "LED0", + "value": "95" + } + }, + "position": { + "x": 416, + "y": 304 + } + }, + { + "id": "9e124703-5a80-4d0d-8c31-945447862085", + "type": "basic.info", + "data": { + "info": "Switch-led basic example\n\nA simple circuit that connects the input pin,\nwhere there is a button switch, with the\noutpun pin, where there is a led\n\nWhen the button is pressed (1), the led is\nturned on. When the button is released (0), the\nled is turned off\n\nNotice the blue box with a gear. It is a\nconfiguration block for activating the \nFPGA internal pull-up resistor in the SW1 pin" + }, + "position": { + "x": 16, + "y": 8 + } + }, + { + "id": "0cccecc3-0d0c-48f5-9066-0adff1a3280e", + "type": "config.Input-config", + "data": {}, + "position": { + "x": 224, + "y": 304 + } + }, + { + "id": "f76f55d3-ba32-42d8-8c16-9f4cbbd9d27c", + "type": "basic.info", + "data": { + "info": "Ejemplo básico switch-led\n\nSencillo circuito que conecta directamente\nun pin de entrada de la FPGA, donde hay\nun pulsador, con el pin de salida, donde está\nel led\n\nCuando se aprieta el pulsador (1), se enciende\nel led. Cuando se suelta (0) se apaga\n\nFíjate en la caja azul con el engranaje. Es un\nbloque de configuración que permite activar la\nresistencia de pull-up interna del pin de la \nFPGA" + }, + "position": { + "x": 432, + "y": 8 + } + }, + { + "id": "d556c4f6-736a-41a9-9f64-badf2b790010", + "type": "basic.info", + "data": { + "info": "EXERCISE 1: Upload the circuit into your FPGA\nboard and test it!\n\nEXERCISE 2: Change the button to SW2 and test\nit again\n\n---------------------------------------------\nEjercicio 1: Carga el circuito en la FPGA y\n¡pruébalo!\n\nEJERCICIO 2: Cambia el pulsador al SW2 y\npruébalo de nuevo" + }, + "position": { + "x": 16, + "y": 400 + } + } + ], + "wires": [ + { + "source": { + "block": "aac1b394-533e-4410-9f35-ba80af8abd63", + "port": "out" + }, + "target": { + "block": "0cccecc3-0d0c-48f5-9066-0adff1a3280e", + "port": "bb4a1ca9-1b30-471e-92ca-ca7ff2fc1150" + } + }, + { + "source": { + "block": "0cccecc3-0d0c-48f5-9066-0adff1a3280e", + "port": "a139fa0d-9b45-4480-a251-f4a66b49aa23" + }, + "target": { + "block": "30a83e46-176d-40a8-ac0e-f19a131ea9d9", + "port": "in" + } + } + ] + }, + "deps": { + "config.Input-config": { + "image": "resources/images/input-config.svg", + "state": { + "pan": { + "x": -23, + "y": 8 + }, + "zoom": 1 + }, + "graph": { + "blocks": [ + { + "id": "2b245a71-2d80-466b-955f-e3d61839fe25", + "type": "basic.code", + "data": { + "code": "wire din, dout, outen;\n\nassign o = ~din;\n\nSB_IO #(\n .PIN_TYPE(6'b 1010_01),\n .PULLUP(1'b 1)\n) io_pin (\n .PACKAGE_PIN(i),\n .OUTPUT_ENABLE(outen),\n .D_OUT_0(dout),\n .D_IN_0(din)\n);", + "ports": { + "in": [ + "i" + ], + "out": [ + "o" + ] + } + }, + "position": { + "x": 256, + "y": 104 + } + }, + { + "id": "bb4a1ca9-1b30-471e-92ca-ca7ff2fc1150", + "type": "basic.input", + "data": { + "label": "" + }, + "position": { + "x": 64, + "y": 200 + } + }, + { + "id": "a139fa0d-9b45-4480-a251-f4a66b49aa23", + "type": "basic.output", + "data": { + "label": "" + }, + "position": { + "x": 776, + "y": 200 + } + } + ], + "wires": [ + { + "source": { + "block": "bb4a1ca9-1b30-471e-92ca-ca7ff2fc1150", + "port": "out" + }, + "target": { + "block": "2b245a71-2d80-466b-955f-e3d61839fe25", + "port": "i" + } + }, + { + "source": { + "block": "2b245a71-2d80-466b-955f-e3d61839fe25", + "port": "o" + }, + "target": { + "block": "a139fa0d-9b45-4480-a251-f4a66b49aa23", + "port": "in" + } + } + ] + }, + "deps": {} + } + } +} \ No newline at end of file diff --git a/app/resources/examples/1. Basics/3) Switch and gate.ice b/app/resources/examples/1. Basics/3) Switch and gate.ice new file mode 100644 index 000000000..59c9b3415 --- /dev/null +++ b/app/resources/examples/1. Basics/3) Switch and gate.ice @@ -0,0 +1,341 @@ +{ + "image": "", + "state": { + "pan": { + "x": 0, + "y": 0 + }, + "zoom": 1 + }, + "board": "icezum", + "graph": { + "blocks": [ + { + "id": "aa8bab8b-61e4-4e28-b444-0e68d9484ea1", + "type": "basic.input", + "data": { + "label": "button1", + "pin": { + "name": "SW1", + "value": "10" + } + }, + "position": { + "x": 96, + "y": 304 + } + }, + { + "id": "5d1b4f33-ae65-4154-b4f4-ff1403437600", + "type": "basic.input", + "data": { + "label": "button2", + "pin": { + "name": "SW2", + "value": "11" + } + }, + "position": { + "x": 96, + "y": 440 + } + }, + { + "id": "3cad6e72-e7d3-4273-be1c-ce5f9b4c020a", + "type": "basic.output", + "data": { + "label": "led", + "pin": { + "name": "LED7", + "value": "104" + } + }, + "position": { + "x": 712, + "y": 368 + } + }, + { + "id": "cb5b06e5-0d7d-4c89-9c17-0cd7892369c1", + "type": "logic.and", + "data": {}, + "position": { + "x": 520, + "y": 368 + } + }, + { + "id": "4d525b5f-21b6-44f0-a349-e8f72f5c907a", + "type": "config.Input-config", + "data": {}, + "position": { + "x": 288, + "y": 304 + } + }, + { + "id": "97a6dae1-7b79-4133-b952-93fdc4f59d2f", + "type": "config.Input-config", + "data": {}, + "position": { + "x": 288, + "y": 440 + } + }, + { + "id": "cce8504a-dc1f-4deb-9ee3-5f215ac88408", + "type": "basic.info", + "data": { + "info": "Basic AND gate circuit\n\nA 2-inputs AND logic gate is used to turn on\nthe LED7 only when the 2 input buttons\nare pressed\n\nThis example shows the basic behaviour of\nthe AND gate\n\nEXERCISE: Upload this circuit into the FPGA\nboard and play with it" + }, + "position": { + "x": 24, + "y": 16 + } + }, + { + "id": "edf3b438-4271-45f7-bb14-2a6d040880dd", + "type": "basic.info", + "data": { + "info": "Circuito básico con puerta AND\n\nUna puerta lógica AND de 2 entradas se usa\npara encender un led solo cuando los dos\npulsadores de entrada están apretados\n\nEste ejemplo muestra el comportamiento básico\nde una puerta AND\n\nEJERCICIO: Carga este circuito en la FPGA y \njuega con él" + }, + "position": { + "x": 464, + "y": 16 + } + } + ], + "wires": [ + { + "source": { + "block": "cb5b06e5-0d7d-4c89-9c17-0cd7892369c1", + "port": "664caf9e-5f40-4df4-800a-b626af702e62" + }, + "target": { + "block": "3cad6e72-e7d3-4273-be1c-ce5f9b4c020a", + "port": "in" + } + }, + { + "source": { + "block": "5d1b4f33-ae65-4154-b4f4-ff1403437600", + "port": "out" + }, + "target": { + "block": "97a6dae1-7b79-4133-b952-93fdc4f59d2f", + "port": "bb4a1ca9-1b30-471e-92ca-ca7ff2fc1150" + } + }, + { + "source": { + "block": "aa8bab8b-61e4-4e28-b444-0e68d9484ea1", + "port": "out" + }, + "target": { + "block": "4d525b5f-21b6-44f0-a349-e8f72f5c907a", + "port": "bb4a1ca9-1b30-471e-92ca-ca7ff2fc1150" + } + }, + { + "source": { + "block": "4d525b5f-21b6-44f0-a349-e8f72f5c907a", + "port": "a139fa0d-9b45-4480-a251-f4a66b49aa23" + }, + "target": { + "block": "cb5b06e5-0d7d-4c89-9c17-0cd7892369c1", + "port": "18c2ebc7-5152-439c-9b3f-851c59bac834" + } + }, + { + "source": { + "block": "97a6dae1-7b79-4133-b952-93fdc4f59d2f", + "port": "a139fa0d-9b45-4480-a251-f4a66b49aa23" + }, + "target": { + "block": "cb5b06e5-0d7d-4c89-9c17-0cd7892369c1", + "port": "97b51945-d716-4b6c-9db9-970d08541249" + } + } + ] + }, + "deps": { + "config.Input-config": { + "image": "resources/images/input-config.svg", + "state": { + "pan": { + "x": -23, + "y": 8 + }, + "zoom": 1 + }, + "graph": { + "blocks": [ + { + "id": "2b245a71-2d80-466b-955f-e3d61839fe25", + "type": "basic.code", + "data": { + "code": "wire din, dout, outen;\n\nassign o = ~din;\n\nSB_IO #(\n .PIN_TYPE(6'b 1010_01),\n .PULLUP(1'b 1)\n) io_pin (\n .PACKAGE_PIN(i),\n .OUTPUT_ENABLE(outen),\n .D_OUT_0(dout),\n .D_IN_0(din)\n);", + "ports": { + "in": [ + "i" + ], + "out": [ + "o" + ] + } + }, + "position": { + "x": 256, + "y": 104 + } + }, + { + "id": "bb4a1ca9-1b30-471e-92ca-ca7ff2fc1150", + "type": "basic.input", + "data": { + "label": "" + }, + "position": { + "x": 64, + "y": 200 + } + }, + { + "id": "a139fa0d-9b45-4480-a251-f4a66b49aa23", + "type": "basic.output", + "data": { + "label": "" + }, + "position": { + "x": 776, + "y": 200 + } + } + ], + "wires": [ + { + "source": { + "block": "bb4a1ca9-1b30-471e-92ca-ca7ff2fc1150", + "port": "out" + }, + "target": { + "block": "2b245a71-2d80-466b-955f-e3d61839fe25", + "port": "i" + } + }, + { + "source": { + "block": "2b245a71-2d80-466b-955f-e3d61839fe25", + "port": "o" + }, + "target": { + "block": "a139fa0d-9b45-4480-a251-f4a66b49aa23", + "port": "in" + } + } + ] + }, + "deps": {} + }, + "logic.and": { + "graph": { + "blocks": [ + { + "id": "18c2ebc7-5152-439c-9b3f-851c59bac834", + "type": "basic.input", + "data": { + "label": "" + }, + "position": { + "x": 64, + "y": 80 + } + }, + { + "id": "97b51945-d716-4b6c-9db9-970d08541249", + "type": "basic.input", + "data": { + "label": "" + }, + "position": { + "x": 64, + "y": 208 + } + }, + { + "id": "664caf9e-5f40-4df4-800a-b626af702e62", + "type": "basic.output", + "data": { + "label": "" + }, + "position": { + "x": 752, + "y": 144 + } + }, + { + "id": "00925b04-5004-4307-a737-fa4e97c8b6ab", + "type": "basic.code", + "data": { + "code": "// AND logic gate\n\nassign c = a & b;", + "ports": { + "in": [ + "a", + "b" + ], + "out": [ + "c" + ] + } + }, + "position": { + "x": 256, + "y": 48 + } + } + ], + "wires": [ + { + "source": { + "block": "18c2ebc7-5152-439c-9b3f-851c59bac834", + "port": "out" + }, + "target": { + "block": "00925b04-5004-4307-a737-fa4e97c8b6ab", + "port": "a" + } + }, + { + "source": { + "block": "97b51945-d716-4b6c-9db9-970d08541249", + "port": "out" + }, + "target": { + "block": "00925b04-5004-4307-a737-fa4e97c8b6ab", + "port": "b" + } + }, + { + "source": { + "block": "00925b04-5004-4307-a737-fa4e97c8b6ab", + "port": "c" + }, + "target": { + "block": "664caf9e-5f40-4df4-800a-b626af702e62", + "port": "in" + } + } + ] + }, + "deps": {}, + "image": "resources/images/and.svg", + "state": { + "pan": { + "x": 0, + "y": 0 + }, + "zoom": 1 + } + } + } +} \ No newline at end of file diff --git a/app/scripts/services/graph.service.js b/app/scripts/services/graph.service.js index ccb9cd1f5..f648b9dd4 100644 --- a/app/scripts/services/graph.service.js +++ b/app/scripts/services/graph.service.js @@ -716,7 +716,7 @@ angular.module('icestudio') blockLabel = [ blockInstance.type.split('.')[0], blockInstance.type.split('.')[1].toUpperCase() - ].join(' '); + ].join('\n'); } var blockImage = ''; diff --git a/app/styles/project.css b/app/styles/project.css index 96b2001cb..550cdfdc4 100644 --- a/app/styles/project.css +++ b/app/styles/project.css @@ -10,6 +10,7 @@ #paper svg { background: transparent; position: relative; + z-index: 0; } #breadcrumbs { @@ -26,6 +27,7 @@ border: 2px solid #777; pointer-events: none; -webkit-user-select: none; + z-index: 0; } .generic-block img { @@ -53,6 +55,7 @@ border: 2px solid #777; pointer-events: none; -webkit-user-select: none; + z-index: 0; } .io-block label { @@ -78,6 +81,7 @@ border: 2px solid #777; pointer-events: none; -webkit-user-select: none; + z-index: 0; } .code-block .code-editor {