diff --git a/app/series/[key]/page.jsx b/app/series/[key]/page.jsx index e1d03b7..96f7f71 100644 --- a/app/series/[key]/page.jsx +++ b/app/series/[key]/page.jsx @@ -82,6 +82,23 @@ export default async function SerieDetail({ params }) { content: (
+ +
+

+ + + + Sobre a Matriz de Conexões Flexível +

+

+ O ESP32 possui uma matriz de conexões flexível que permite mapear diversas funções para múltiplos pinos. + Isso significa que muitas conexões podem ser configuradas para desempenhar diferentes papéis, dependendo das necessidades do seu projeto. + Consulte a documentação oficial para entender como aproveitar ao máximo as GPIOs  + + nesse link. + +

+
) }, @@ -166,14 +183,34 @@ export default async function SerieDetail({ params }) { - - 📄 Datasheet Oficial - +
+ + 📄 Datasheet Oficial + + + + 💻 Guia de Programação + + + {serie.manual_tecnico && + 📖 Manual Técnico + } +

@@ -204,7 +241,7 @@ export default async function SerieDetail({ params }) { -

+
{previousKey ? ( {previousKey}

- ) : ( -
- )} - + ) : null} + → - ) : ( -
- )} + ) : null}
diff --git a/components/ConnectionsDiagram.jsx b/components/ConnectionsDiagram.jsx index 81364ad..518e511 100644 --- a/components/ConnectionsDiagram.jsx +++ b/components/ConnectionsDiagram.jsx @@ -3,30 +3,43 @@ import { useState, useEffect, useMemo } from "react"; const FILTER_CATEGORIES = [ - { id: "All", name: "Todos", color: "#64748b" }, - { id: "Ground", name: "Terra (GND)", color: "#64748b" }, + { id: "All", name: "Todos", color: "#374151" }, + { id: "GND", name: "Terra (GND)", color: "#64748b" }, { id: "Power", name: "Alimentação", color: "#ef4444" }, - { id: "RTC", name: "RTC", color: "#f59e0b" }, { id: "GPIO", name: "GPIO", color: "#22c55e" }, + { id: "Low Power", name: "GPIO LP", color: "#f59e0b" }, { id: "ADC", name: "ADC", color: "#ec4899" }, { id: "DAC", name: "DAC", color: "#a855f7" }, { id: "Touch", name: "Touch", color: "#06b6d4" }, { id: "UART", name: "UART", color: "#3b82f6" }, { id: "SPI", name: "SPI", color: "#ef4444" }, - { id: "I2C", name: "I2C", color: "#10b981" }, - { id: "PWM", name: "PWM", color: "#f97316" }, { id: "USB", name: "USB", color: "#8b5cf6" }, { id: "Clock", name: "Clock", color: "#eab308" }, { id: "JTAG", name: "JTAG", color: "#8b5cf6" }, { id: "Strapping", name: "Inicialização", color: "#dc2626" }, + { id: "DSI", name: "Display (DSI)", color: "#f97316" }, + { id: "CSI", name: "Câmera (CSI)", color: "#14b8a6" }, + { id: "Ethernet", name: "Ethernet", color: "#3b82f6" }, + { id: "SD", name: "Cartão SD", color: "#10b981" }, + { id: "I2C", name: "I2C", color: "#f59e0b" }, + { id: "Antena", name: "Antena", color: "#22d3ee" }, ]; +const type_colors = { + power: "#ef4444", + ground: "#64748b", + io: "#22c55e", + analog: "#ec4899", + dedicated: "#3b82f6", + nc: "#9ca3af", +}; + export default function ConnectionsDiagram({ connections, color }) { const [activeFilter, setActiveFilter] = useState("All"); const [selectedConnection, setSelectedConnection] = useState(null); const [hoveredConnection, setHoveredConnection] = useState(null); const [searchQuery, setSearchQuery] = useState(""); - const [viewMode, setViewMode] = useState("grid"); // 'grid' or 'list' + const [viewMode, setViewMode] = useState("grid"); const [showTooltip, setShowTooltip] = useState(null); const isConnectionVisible = (connection) => { @@ -326,17 +339,17 @@ export default function ConnectionsDiagram({ connections, color }) { onBlur={() => setHoveredConnection(null)} aria-label={`Connection ${connection.nome}, number ${connection.numero}`} aria-describedby={showTooltip === index ? `tooltip-${index}` : undefined} - className="relative w-full flex flex-col items-center justify-center p-3 rounded-2xl border-2 transition-all duration-300 opacity-100 hover:scale-110 hover:shadow-2xl hover:z-10 cursor-pointer active:scale-95 focus:outline-none focus:ring-4 focus:ring-offset-2" + className="relative w-full flex flex-col items-center justify-center p-3 rounded-2xl border-2 transition-all duration-300 opacity-100 hover:scale-110 hover:shadow-2xl hover:z-10 cursor-pointer active:scale-95 focus:outline-none focus:border-4" style={{ - backgroundColor: connection.cor + "15", - borderColor: isHovered ? connection.cor : connection.cor + "60", + backgroundColor: type_colors[connection.tipo] + (isHovered ? "20" : "10"), + borderColor: isHovered ? type_colors[connection.tipo] : type_colors[connection.tipo] + "60", transform: isHovered ? "translateY(-2px)" : undefined, - focusRingColor: connection.cor, + focusRingColor: type_colors[connection.tipo], }} >
{typeof connection.numero === "number" ? connection.numero @@ -347,23 +360,23 @@ export default function ConnectionsDiagram({ connections, color }) { {connection.nome}
-
+
{connection.categorias.slice(0, 5).map((cat) => ( ))} {connection.categorias.length > 5 && ( - + +{connection.categorias.length - 5} )}
- {connection.restricoes && ( + {connection.avisos && (
{connection.nome}
-
{connection.numero}
+
Pino {connection.numero}
{connection.categorias.map((cat) => ( Nome Categorias Funções - Status + Avisos @@ -438,7 +451,7 @@ export default function ConnectionsDiagram({ connections, color }) {
{typeof connection.numero === "number" ? connection.numero @@ -469,19 +482,19 @@ export default function ConnectionsDiagram({ connections, color }) {
- {connection.restricoes ? ( + {connection.avisos ? ( - Atenção + Sim ) : ( - OK + Não )} @@ -493,7 +506,7 @@ export default function ConnectionsDiagram({ connections, color }) {
)} - {connections.some(c => c.restricoes) && ( + {connections.some(c => c.avisos) && (
@@ -537,7 +550,7 @@ export default function ConnectionsDiagram({ connections, color }) { {selectedConnection && (
setSelectedConnection(null)} role="dialog" aria-modal="true" @@ -552,7 +565,7 @@ export default function ConnectionsDiagram({ connections, color }) {
{typeof selectedConnection.numero === "number" ? selectedConnection.numero @@ -563,7 +576,7 @@ export default function ConnectionsDiagram({ connections, color }) { {selectedConnection.nome}

- Conexão {selectedConnection.numero} + Pino {selectedConnection.numero}

@@ -589,7 +602,7 @@ export default function ConnectionsDiagram({ connections, color }) {
-
+ {selectedConnection.categorias.length > 0 && (

@@ -601,19 +614,43 @@ export default function ConnectionsDiagram({ connections, color }) { {selectedConnection.categorias.map((cat) => ( {cat === "Strapping" ? "Inicialização" : cat} ))}

-
+
)} + + {selectedConnection.alimentacao && ( +
+

+ + + + Alimentado por: +

+
+
    + {selectedConnection.alimentacao.map((source, index) => ( +
  • + + {source} +
    • + ))} +
+
+
+ )}

- + Funções da Conexão

@@ -623,8 +660,8 @@ export default function ConnectionsDiagram({ connections, color }) { {selectedConnection.funcoes.map((func, index) => (
  • {func}
    • @@ -633,7 +670,7 @@ export default function ConnectionsDiagram({ connections, color }) {
    - {selectedConnection.restricoes && ( + {selectedConnection.avisos && (
    @@ -653,11 +690,16 @@ export default function ConnectionsDiagram({ connections, color }) {

    - Alertas Importantes -

    -

    - {selectedConnection.restricoes} + Avisos Importantes

    + {selectedConnection.avisos.map((aviso, index) => ( +
    + • + + {aviso} + +
    + ))}
    @@ -678,20 +720,6 @@ export default function ConnectionsDiagram({ connections, color }) {
    )} -
    -

    - - - - Sobre a Matriz de Conexões Flexível -

    -

    - O ESP32 possui uma matriz de conexões flexível que permite mapear diversas funções para múltiplos pinos. - Isso significa que muitas conexões podem ser configuradas para desempenhar diferentes papéis, dependendo das necessidades do seu projeto. - Consulte a documentação oficial para entender como aproveitar ao máximo essa flexibilidade. -

    -
    -