Skip to content

Commit

Permalink
feat: recomputer page software
Browse files Browse the repository at this point in the history
  • Loading branch information
lisha committed Aug 2, 2023
1 parent d5fbb44 commit 9a47b64
Show file tree
Hide file tree
Showing 6 changed files with 310 additions and 114 deletions.
1 change: 1 addition & 0 deletions sidebars.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2171,6 +2171,7 @@ const sidebars = {
'Edge/reComputer/reComputer_Jetson_GPIO',
'Edge/reComputer/reComputer_Jetson_Series_GPIO_Grove',
'Edge/reComputer/jetson_FAQ',
'Edge/reComputer/RecomputerPage',
{
type: 'category',
label: 'Application',
Expand Down
40 changes: 20 additions & 20 deletions src/components/recomputer/index.css → src/components/recomputer/hardware.css
View file
Original file line number Diff line number Diff line change
@@ -1,80 +1,80 @@
.dvc_container {
.hardware_container {
display: flex;
max-width: 950px;
padding: 20px 0;
margin: 0 auto;
}
.dvc_container a {
.hardware_container a {
width: 100%;
height: 100%;
color: var(--text-color);
}
.dvc_container a:hover {
.hardware_container a:hover {
text-decoration: none;
}
.dvc_container .brand-list {
.hardware_container .brand-list {
display: flex;
margin-right: 30px;
font-size: 23px;
font-weight: bold;
flex: 2.5;
}
.dvc_container .scene-list {
.hardware_container .scene-list {
flex: 3;
}
.dvc_container .brand-list ul {
.hardware_container .brand-list ul {
width: 77%;
list-style: none;
}

.dvc_container .scene-list ul {
.hardware_container .scene-list ul {
width: 100%;
list-style: none;
padding: 0;
}

.dvc_container .brand-list li,
.dvc_container .scene-list li {
.hardware_container .brand-list li,
.hardware_container .scene-list li {
cursor: pointer;
margin-bottom: 10px;
border: 1px solid var(--ifm-color-emphasis-300);
border-radius: 5px;
color: var(--text-color);
}

.dvc_container .brand-list li.selected,
.dvc_container .brand-list li:hover {
.hardware_container .brand-list li.selected,
.hardware_container .brand-list li:hover {
border-color: #8fc31f;
background-size: cover;
background-position: center;
color: #fff;
}
.dvc_container .brand-list li.selected a,
.dvc_container .brand-list li:hover a {
.hardware_container .brand-list li.selected a,
.hardware_container .brand-list li:hover a {
/* color: #8fc31f; */
color: transparent;
}
.dvc_container .scene-list li:hover,
.dvc_container .scene-list li.selected {
.hardware_container .scene-list li:hover,
.hardware_container .scene-list li.selected {
border-color: #000000;
box-shadow: 0 0 2px 1px var(--ifm-color-primary-dark);
background-color: #000000;
transition: transform 0.5s ease-in-out;
transform: scale(1.1);
}
.dvc_container .scene-list li.selected a,
.dvc_container .scene-list li:hover a {
.hardware_container .scene-list li.selected a,
.hardware_container .scene-list li:hover a {
color: #8fc31f;
}
.dvc_container .scene-item {
.hardware_container .scene-item {
display: flex;
font-size: 30px;
font-weight: bold;
}
.dvc_container .scene-item img {
.hardware_container .scene-item img {
width: 100px;
margin-right: 12px;
}
.dvc_container .srene-title {
.hardware_container .srene-title {
align-self: center;
}
101 changes: 101 additions & 0 deletions src/components/recomputer/hardware.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
import React, { useState } from 'react';
import './hardware.css';

const HardwarePage = () => {
const [selectedBrand, setSelectedBrand] = useState([]);
const [selectedScenes, setSelectedScenes] = useState([]);
const brands = [
{ id: 1, name: 'CVEDIA-RT',link:'https://www.baidu.com/',bg:'https://files.seeedstudio.com/wiki/recomputerzhongwen/cvedia-logo.jpg', scenes: [4] },
{ id: 2, name: 'Lumeo', link:'https://www.baidu.com/',bg:'https://files.seeedstudio.com/wiki/recomputerzhongwen/lumeo-logo.jpg', scenes: [4] },
{ id: 3, name: 'alwaysAI', link:'https://www.baidu.com/',bg:'https://files.seeedstudio.com/wiki/recomputerzhongwen/jetsonaitools83.png', scenes: [1] },
{ id: 4, name: 'YOLOv8',link:'https://www.baidu.com/', bg:'https://files.seeedstudio.com/wiki/recomputerzhongwen/yolov8-logo.png', scenes: [1, 2, 4] },
{ id: 5, name: 'YOLOv5',link:'https://www.baidu.com/', bg:'https://files.seeedstudio.com/wiki/recomputerzhongwen/jetsonaitools80.png', scenes: [2, 4] },
{ id: 6, name: 'roboflow',link:'https://www.baidu.com/', bg:'https://files.seeedstudio.com/wiki/recomputerzhongwen/jetsonaitools81.png', scenes: [1, 4] },
{ id: 7, name: 'Allxon',link:'https://www.baidu.com/', bg:'https://files.seeedstudio.com/wiki/recomputerzhongwen/jetsonaitools4.png', scenes: [5] },
{ id: 8, name: 'Deci',link:'https://www.baidu.com/', bg:'https://files.seeedstudio.com/wiki/recomputerzhongwen/jetsonaitools82.png', scenes: [3] },
{ id: 9, name: 'Edge Impulse',link:'https://www.baidu.com/', bg:'https://files.seeedstudio.com/wiki/recomputerzhongwen/ei-logo.png', scenes: [1, 2, 4] },
{ id: 10, name: 'Cochl.Sense',link:'https://www.baidu.com/', bg:'https://files.seeedstudio.com/wiki/recomputerzhongwen/cochl-logo.png', scenes: [4] },
];
const scenes = [
{ id: 1, name: 'Data Upload & Label',link:'https://www.baidu.com/',img:'huang.png', brands: [3, 4, 6, 9]},
{ id: 2, name: 'Train',link:'https://www.baidu.com/', img:'huang.png',brands: [4, 5, 9] },
{ id: 3, name: 'Optimize',link:'https://www.baidu.com/',img:'huang.png', brands: [8] },
{ id: 4, name: 'Deploy',link:'https://www.baidu.com/', img:'huang.png',brands: [1, 2, 4, 5, 6, 9, 10] },
{ id: 5, name: 'Remote Manage',link:'https://www.baidu.com/', img:'huang.png',brands: [7] },
];
const handleBrandMouseEnter = (brand) => {
setSelectedBrand([brand]);
const associatedScenes = scenes.filter((scene) =>
scene.brands.includes(brand.id)
);
setSelectedScenes(associatedScenes);
};

const handleSceneMouseEnter = (scene) => {

setSelectedBrand([]);
const associatedBrandIds = scene.brands;
const associatedBrands = brands.filter((brand) =>
associatedBrandIds.includes(brand.id)
)
console.log(associatedBrands);

setSelectedScenes([scene]);
associatedBrands.length&&setSelectedBrand(associatedBrands);
};

const getBrandNameById = (brandId) => {
const brand = brands.find((brand) => brand.id === brandId);
return brand ? brand.name : '';
};

const handleMouseLeave=()=>{
setSelectedBrand([]);
setSelectedScenes([]);
}
return (
<div className="hardware_container">
<div className="brand-list ">
<ul>
{brands.map((brand) => (
<li
key={brand.id}
onMouseEnter={() => handleBrandMouseEnter(brand)}
onMouseLeave={handleMouseLeave}
className={
`padding--sm ${selectedBrand.find((d) => d.id === brand.id) ? 'selected' : ''}`
}
style={{backgroundImage:selectedBrand.find((d) => d.id === brand.id) ? `url(${brand.bg})` :''}}
>
<a target='_blank' href={brand.link}>{brand.name}</a>
</li>
))}
</ul>
</div>
<div className="scene-list">
<ul>
{scenes.map((scene) => (
<li
key={scene.id}
onMouseEnter={() => handleSceneMouseEnter(scene)}
onMouseLeave={handleMouseLeave}
className={
`padding--sm ${selectedScenes.find((s) => s.id === scene.id) ? 'selected' : ''}`
}
>
<a className='scene-item' target='_blank' href={scene.link}>
<img
src={require("../../../assets/recomputer/nvidia_icon.png").default}
/>
<div className='srene-title'> {scene.name}</div>
</a>
</li>
))}
</ul>
</div>

</div>
);
};

export default HardwarePage;
101 changes: 7 additions & 94 deletions src/components/recomputer/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,101 +1,14 @@
import React, { useState } from 'react';
import './index.css';
import HardwarePage from './hardware'
import SoftwarePage from './software'

const BrandSceneList = () => {
const [selectedBrand, setSelectedBrand] = useState([]);
const [selectedScenes, setSelectedScenes] = useState([]);
const brands = [
{ id: 1, name: 'CVEDIA-RT',link:'https://www.baidu.com/',bg:'https://files.seeedstudio.com/wiki/recomputerzhongwen/cvedia-logo.jpg', scenes: [4] },
{ id: 2, name: 'Lumeo', link:'https://www.baidu.com/',bg:'https://files.seeedstudio.com/wiki/recomputerzhongwen/lumeo-logo.jpg', scenes: [4] },
{ id: 3, name: 'alwaysAI', link:'https://www.baidu.com/',bg:'https://files.seeedstudio.com/wiki/recomputerzhongwen/jetsonaitools83.png', scenes: [1] },
{ id: 4, name: 'YOLOv8',link:'https://www.baidu.com/', bg:'https://files.seeedstudio.com/wiki/recomputerzhongwen/yolov8-logo.png', scenes: [1, 2, 4] },
{ id: 5, name: 'YOLOv5',link:'https://www.baidu.com/', bg:'https://files.seeedstudio.com/wiki/recomputerzhongwen/jetsonaitools80.png', scenes: [2, 4] },
{ id: 6, name: 'roboflow',link:'https://www.baidu.com/', bg:'https://files.seeedstudio.com/wiki/recomputerzhongwen/jetsonaitools81.png', scenes: [1, 4] },
{ id: 7, name: 'Allxon',link:'https://www.baidu.com/', bg:'https://files.seeedstudio.com/wiki/recomputerzhongwen/jetsonaitools4.png', scenes: [5] },
{ id: 8, name: 'Deci',link:'https://www.baidu.com/', bg:'https://files.seeedstudio.com/wiki/recomputerzhongwen/jetsonaitools82.png', scenes: [3] },
{ id: 9, name: 'Edge Impulse',link:'https://www.baidu.com/', bg:'https://files.seeedstudio.com/wiki/recomputerzhongwen/ei-logo.png', scenes: [1, 2, 4] },
{ id: 10, name: 'Cochl.Sense',link:'https://www.baidu.com/', bg:'https://files.seeedstudio.com/wiki/recomputerzhongwen/cochl-logo.png', scenes: [4] },
];
const scenes = [
{ id: 1, name: 'Data Upload & Label',link:'https://www.baidu.com/',img:'huang.png', brands: [3, 4, 6, 9]},
{ id: 2, name: 'Train',link:'https://www.baidu.com/', img:'huang.png',brands: [4, 5, 9] },
{ id: 3, name: 'Optimize',link:'https://www.baidu.com/',img:'huang.png', brands: [8] },
{ id: 4, name: 'Deploy',link:'https://www.baidu.com/', img:'huang.png',brands: [1, 2, 4, 5, 6, 9, 10] },
{ id: 5, name: 'Remote Manage',link:'https://www.baidu.com/', img:'huang.png',brands: [7] },
];
const handleBrandMouseEnter = (brand) => {
setSelectedBrand([brand]);
const associatedScenes = scenes.filter((scene) =>
scene.brands.includes(brand.id)
);
setSelectedScenes(associatedScenes);
};

const handleSceneMouseEnter = (scene) => {

setSelectedBrand([]);
const associatedBrandIds = scene.brands;
const associatedBrands = brands.filter((brand) =>
associatedBrandIds.includes(brand.id)
)
console.log(associatedBrands);

setSelectedScenes([scene]);
associatedBrands.length&&setSelectedBrand(associatedBrands);
};

const getBrandNameById = (brandId) => {
const brand = brands.find((brand) => brand.id === brandId);
return brand ? brand.name : '';
};

const handleMouseLeave=()=>{
setSelectedBrand([]);
setSelectedScenes([]);
}
const computerPageA = () => {
return (
<div className="dvc_container">
<div className="brand-list ">
<ul>
{brands.map((brand) => (
<li
key={brand.id}
onMouseEnter={() => handleBrandMouseEnter(brand)}
onMouseLeave={handleMouseLeave}
className={
`padding--sm ${selectedBrand.find((d) => d.id === brand.id) ? 'selected' : ''}`
}
style={{backgroundImage:selectedBrand.find((d) => d.id === brand.id) ? `url(${brand.bg})` :''}}
>
<a target='_blank' href={brand.link}>{brand.name}</a>
</li>
))}
</ul>
</div>
<div className="scene-list">
<ul>
{scenes.map((scene) => (
<li
key={scene.id}
onMouseEnter={() => handleSceneMouseEnter(scene)}
onMouseLeave={handleMouseLeave}
className={
`padding--sm ${selectedScenes.find((s) => s.id === scene.id) ? 'selected' : ''}`
}
>
<a className='scene-item' target='_blank' href={scene.link}>
<img
src={require("../../../assets/recomputer/nvidia_icon.png").default}
/>
<div className='srene-title'> {scene.name}</div>
</a>
</li>
))}
</ul>
</div>

<div>
<HardwarePage></HardwarePage>
<SoftwarePage></SoftwarePage>
</div>
);
};

export default BrandSceneList;
export default computerPageA;
Loading

0 comments on commit 9a47b64

Please sign in to comment.