tanner/solar-display
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

idk

Browse Source
This commit is contained in:
Tanner Collin 2022-01-10 07:57:27 +00:00
parent f2e9b389b2
commit af87378fd3
2 changed files with 81 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
client/src/App.css
View File

@ -47,3 +47,8 @@ p {
margin: 0.25em; margin: 0.25em;
} }
.recharts-wrapper p {
color: initial;
font-size: initial;
}

60
client/src/App.js
View File

@ -6,11 +6,12 @@ import './App.css';
function App() { function App() {
const [data, setData] = useState(false); const [data, setData] = useState(false);
const [history, setHistory] = useState(false);
useEffect(() => { useEffect(() => {
const get = async() => { const get = async() => {
try { try {
const res = await axios.get('https://reg.t0.vc/solar.json'); const res = await axios.get('https://solar-api.dns.t0.vc/data');
setData(res.data); setData(res.data);
} catch (error) { } catch (error) {
setData(false); setData(false);
@ -18,45 +19,47 @@ function App() {
}; };
get(); get();
const interval = setInterval(get, 1000); const interval = setInterval(get, 30000);
return () => clearInterval(interval); return () => clearInterval(interval);
}, []); }, []);
const listen = () => { useEffect(() => {
var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); const get = async() => {
var myArrayBuffer = audioCtx.createBuffer(2, audioCtx.sampleRate * 5, audioCtx.sampleRate); try {
for (var channel = 0; channel < myArrayBuffer.numberOfChannels; channel++) { const date = moment().format('YYYY-MM-DD');
var nowBuffering = myArrayBuffer.getChannelData(channel); const res = await axios.get('https://solar-api.dns.t0.vc/history/'+date);
for (var i = 0; i < myArrayBuffer.length; i++) { setHistory(res.data);
nowBuffering[i] = data.history[i % data.history.length].total / 24000.0; } catch (error) {
} setHistory(false);
}
var source = audioCtx.createBufferSource();
source.buffer = myArrayBuffer;
source.connect(audioCtx.destination);
source.start();
} }
};
get();
const interval = setInterval(get, 30000);
return () => clearInterval(interval);
}, []);
return ( return (
<div> <div>
{data ? {history ?
<div>
<ResponsiveContainer width='100%' height={300}> <ResponsiveContainer width='100%' height={300}>
<LineChart data={data.history}> <LineChart data={history}>
<XAxis <XAxis
dataKey='time' dataKey='time'
minTickGap={10} minTickGap={10}
tickFormatter={timeStr => moment.utc(timeStr).format('HH:mm')} tickFormatter={timeStr => moment(timeStr).format('HH:mm')}
/>
<YAxis
domain={[0, 6000]}
/> />
<YAxis />
<CartesianGrid strokeDasharray='3 3'/> <CartesianGrid strokeDasharray='3 3'/>
<Tooltip <Tooltip
labelFormatter={timeStr => 'Time: ' + moment.utc(timeStr).format('HH:mm')} labelFormatter={timeStr => 'Time: ' + moment(timeStr).format('HH:mm')}
/> />
<Line <Line
type='monotone' type='monotone'
dataKey='total' dataKey='actual_total'
name='Watts' name='Watts'
stroke='#ff5900' stroke='#ff5900'
strokeWidth={2} strokeWidth={2}
@ -65,14 +68,11 @@ function App() {
/> />
</LineChart> </LineChart>
</ResponsiveContainer> </ResponsiveContainer>
<button onClick={listen}>Listen</button>
{data.night ?
<div className='container'>
<p>The sun has set 😴</p>
</div>
: :
<p>Loading...</p>
}
{data ?
<div className='container'> <div className='container'>
<p>Total: {data.actual_total} W — {parseInt(data.actual_total / 5985 * 100)}%</p> <p>Total: {data.actual_total} W — {parseInt(data.actual_total / 5985 * 100)}%</p>
@ -108,8 +108,6 @@ function App() {
)} )}
</div> </div>
</div> </div>
}
</div>
: :
<p>Loading...</p> <p>Loading...</p>
} }