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;
}

154
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,97 +19,94 @@ 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; get();
source.connect(audioCtx.destination); const interval = setInterval(get, 30000);
source.start(); return () => clearInterval(interval);
} }, []);
return ( return (
<div> <div>
{history ?
<ResponsiveContainer width='100%' height={300}>
<LineChart data={history}>
<XAxis
dataKey='time'
minTickGap={10}
tickFormatter={timeStr => moment(timeStr).format('HH:mm')}
/>
<YAxis
domain={[0, 6000]}
/>
<CartesianGrid strokeDasharray='3 3'/>
<Tooltip
labelFormatter={timeStr => 'Time: ' + moment(timeStr).format('HH:mm')}
/>
<Line
type='monotone'
dataKey='actual_total'
name='Watts'
stroke='#ff5900'
strokeWidth={2}
dot={false}
animationDuration={1000}
/>
</LineChart>
</ResponsiveContainer>
:
<p>Loading...</p>
}
{data ? {data ?
<div> <div className='container'>
<ResponsiveContainer width='100%' height={300}> <p>Total: {data.actual_total} W — {parseInt(data.actual_total / 5985 * 100)}%</p>
<LineChart data={data.history}>
<XAxis
dataKey='time'
minTickGap={10}
tickFormatter={timeStr => moment.utc(timeStr).format('HH:mm')}
/>
<YAxis />
<CartesianGrid strokeDasharray='3 3'/>
<Tooltip
labelFormatter={timeStr => 'Time: ' + moment.utc(timeStr).format('HH:mm')}
/>
<Line <p>Today: {data.today_energy} kWh</p>
type='monotone'
dataKey='total'
name='Watts'
stroke='#ff5900'
strokeWidth={2}
dot={false}
animationDuration={1000}
/>
</LineChart>
</ResponsiveContainer>
<button onClick={listen}>Listen</button> <p>Updated: {data.timestamp.split(' ')[1]}</p>
{data.night ? <p>Individual panels:</p>
<div className='container'>
<p>The sun has set 😴</p>
</div>
:
<div className='container'>
<p>Total: {data.actual_total} W — {parseInt(data.actual_total / 5985 * 100)}%</p>
<p>Today: {data.today_energy} kWh</p> <div className='panels'>
{Object.values(data.inverters).map((x, i) =>
<>
<div
className='panel'
style={{ backgroundColor: `hsl(21, 100%, ${x.power[0]/315*50}%)` }}
>
<div className='panel-label'>
{x.power[0]}
</div>
</div>
<p>Updated: {data.timestamp.split(' ')[1]}</p> {i != 2 &&
<div
<p>Individual panels:</p> className='panel'
style={{ backgroundColor: `hsl(21, 100%, ${x.power[1]/315*50}%)` }}
<div className='panels'> >
{Object.values(data.inverters).map((x, i) => <div className='panel-label'>
<> {x.power[1]}
<div
className='panel'
style={{ backgroundColor: `hsl(21, 100%, ${x.power[0]/315*50}%)` }}
>
<div className='panel-label'>
{x.power[0]}
</div>
</div> </div>
</div>
{i != 2 && }
<div </>
className='panel' )}
style={{ backgroundColor: `hsl(21, 100%, ${x.power[1]/315*50}%)` }} </div>
>
<div className='panel-label'>
{x.power[1]}
</div>
</div>
}
</>
)}
</div>
</div>
}
</div> </div>
: :
<p>Loading...</p> <p>Loading...</p>