@ant-design/icons#CarOutlined JavaScript Examples
The following examples show how to use
@ant-design/icons#CarOutlined.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: AiDrive.js From network-rc with Apache License 2.0 | 5 votes |
|
render() {
const {
state: { isPredicting, actionKey, probability, interval },
props: { cameraEnabled, ai },
drive,
stop,
test,
loadModel,
} = this;
return (
<div className="ai-train">
<Form layout="inline">
<Form.Item label="操作间隔">
<InputNumber
value={interval}
onChange={(interval) => this.setState({ interval })}
/>
</Form.Item>
<Form.Item label="动作">
<Tag>
{aiAction[actionKey].name} {aiAction[actionKey].icon}{" "}
{probability.toFixed(2)}
</Tag>
</Form.Item>
</Form>
<br />
<Form layout="inline">
<Form.Item>
<Button
icon={<ImportOutlined />}
loading={isPredicting}
onClick={loadModel}
>
导入模型
</Button>
</Form.Item>
<Form.Item>
<Button
icon={<BugOutlined />}
loading={isPredicting}
onClick={test}
disabled={!cameraEnabled || !ai || !ai.model}
>
测试
</Button>
<Button
type="danger"
key="predic"
loading={isPredicting}
onClick={drive}
icon={<CarOutlined />}
disabled={!cameraEnabled || !ai || !ai.model}
>
开始 Ai 驾驶
</Button>
</Form.Item>
<Form.Item>
<Button
onClick={stop}
icon={<StopOutlined />}
disabled={!isPredicting}
key="stop"
>
停止 Ai 驾驶
</Button>
</Form.Item>
<br />
</Form>
</div>
);
}
Example #2
| Source File: AudioPlayer.js From network-rc with Apache License 2.0 | 4 votes |
|
export default function AudioPlayer({ url, connectType, onMicphoneChange }) {
const audioEl = useRef(null);
const [enabled, setEnabled] = useState(
// window.MediaSource
// ? store.get("audio-enabled") === undefined
// ? true
// : false
// : false
false
);
const [src, setSrc] = useState(null);
useDebounceEffect(
() => {
if (connectType === "ws") {
if (!audioEl.current || !enabled) return;
if (!window.MediaSource) {
message.warn("移动版的 safari 浏览器暂不支持收听声音 ?");
setTimeout(() => {
setEnabled(false);
}, 1000);
return;
}
const mediaSource = new MediaSource();
let ws;
let buffer = [];
function sourceopen() {
var sourceBuffer = mediaSource.addSourceBuffer(
// "audio/webm"
"audio/mpeg"
);
setInterval(() => {
if (buffer.length && !sourceBuffer.updating) {
sourceBuffer.appendBuffer(buffer.shift());
}
}, 10);
function onAudioLoaded({ data }) {
buffer.push(data);
if (audioEl.current.buffered.length) {
const bufferTime =
audioEl.current.buffered.end(0) - audioEl.current.currentTime;
const playbackRate = 1 + (bufferTime - 0.8) * 1.2;
if (playbackRate < 0) {
audioEl.current.playbackRate = 0.5;
} else if (playbackRate > 3) {
audioEl.current.playbackRate = 3;
} else {
audioEl.current.playbackRate = playbackRate;
}
}
}
ws = new WebSocket(url);
ws.binaryType = "arraybuffer";
ws.addEventListener("message", onAudioLoaded);
ws.addEventListener("open", () => {
setEnabled(true);
});
ws.addEventListener("close", () => {
setEnabled(false);
});
}
mediaSource.addEventListener("sourceopen", sourceopen);
setSrc(URL.createObjectURL(mediaSource));
return function () {
ws && ws.close();
mediaSource.removeEventListener("sourceopen", sourceopen);
};
} else {
onMicphoneChange(enabled);
}
},
[audioEl, enabled, url, connectType, onMicphoneChange],
{ wait: 500 }
);
return (
<div>
<audio ref={audioEl} src={src} autoPlay></audio>
<Switch
checked={enabled}
onChange={(v) => {
setEnabled(v);
store.set("audio-enabled", v);
}}
checkedChildren={
<>
<CarOutlined /> <AudioOutlined />
</>
}
unCheckedChildren={
<>
<CarOutlined /> <AudioMutedOutlined />
</>
}
/>
</div>
);
}
Example #3
| Source File: ObjectDetection.js From network-rc with Apache License 2.0 | 4 votes |
|
render() {
const {
state: {
loading,
threshold,
interval,
detecting,
driving,
detectionList,
targetClass,
pauseThreshold,
},
props: { videoSize, cameraEnabled, action, videoEl },
startDetect,
start,
stop,
stopDetect,
} = this;
return (
<div className="ai-object-detection">
<Spin spinning={loading} tip={loading}>
<Form
className="inline-form"
layout="inline"
style={{ padding: "1em" }}
size="small"
>
<Form.Item>
<Switch
onChange={(v) => (v ? startDetect() : stopDetect())}
checked={detecting}
disabled={!cameraEnabled}
checkedChildren="检测"
unCheckedChildren="检测"
/>
</Form.Item>
<Form.Item>
<Popover
placement="topLeft"
content={
<Radio.Group
onChange={({ target: { value: targetClass } }) =>
this.setState({ targetClass })
}
value={targetClass}
>
{detectionList.map((i) => (
<Radio value={i}>{i}</Radio>
))}
</Radio.Group>
}
>
<Button shape="round">目标:{targetClass || "无"}</Button>
</Popover>
</Form.Item>
<Form.Item>
<Popover
placement="topLeft"
content={
<Slider
min={0}
max={100}
value={threshold}
onChange={(threshold) => this.setState({ threshold })}
arrowPointAtCenter
style={{ width: "30vw" }}
/>
}
>
<Button shape="round">目标阀值:{threshold}</Button>
</Popover>
</Form.Item>
<Form.Item>
<Popover
placement="topLeft"
content={
<Slider
min={0}
max={100}
value={pauseThreshold}
onChange={(pauseThreshold) =>
this.setState({ pauseThreshold })
}
arrowPointAtCenter
style={{ width: "30vw" }}
/>
}
>
<Button shape="round">跟随阀值:{pauseThreshold}</Button>
</Popover>
</Form.Item>
<Form.Item>
<Popover
placement="topLeft"
content={
<InputNumber
min={0}
max={1000}
value={interval}
onChange={(interval) => this.setState({ interval })}
/>
}
>
<Button shape="round">间隔:{interval} ms</Button>
</Popover>
</Form.Item>
<Form.Item>
<Button
icon={<CarOutlined />}
type="danger"
onClick={start}
disabled={!detecting || driving || !targetClass}
>
开始驾驶
</Button>
</Form.Item>
<Form.Item>
<Button
icon={<StopOutlined />}
onClick={stop}
disabled={!driving}
>
停止驾驶
</Button>
</Form.Item>
<Form.Item>
<Tag>方向{action.direction.toFixed(2)}</Tag>
<Tag>油门{action.speed.toFixed(2)}</Tag>
</Form.Item>
</Form>
</Spin>
<div
className="ai-object-detection-canvas-container"
style={{
opacity: cameraEnabled ? 1 : 0,
transform: `scale(${videoSize / 50})`,
}}
>
{videoEl &&
<canvas ref={this.canvas} width={videoEl.width} height={videoEl.height}></canvas>
}
</div>
</div>
);
}
