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

idk

Browse Source
master
Tanner Collin 2 years ago
parent f2e9b389b2
commit af87378fd3
2 changed files with 80 additions and 77 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 5
      client/src/App.css
  2. 152
      client/src/App.js

5
client/src/App.css
Unescape View File

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

152
client/src/App.js
Unescape 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>
{data ? {history ?
<div> <ResponsiveContainer width='100%' height={300}>
<ResponsiveContainer width='100%' height={300}> <LineChart data={history}>
<LineChart data={data.history}> <XAxis
<XAxis dataKey='time'
dataKey='time' minTickGap={10}
minTickGap={10} tickFormatter={timeStr => moment(timeStr).format('HH:mm')}
tickFormatter={timeStr => moment.utc(timeStr).format('HH:mm')} />
/> <YAxis
<YAxis /> domain={[0, 6000]}
<CartesianGrid strokeDasharray='3 3'/> />
<Tooltip <CartesianGrid strokeDasharray='3 3'/>
labelFormatter={timeStr => 'Time: ' + moment.utc(timeStr).format('HH:mm')} <Tooltip
/> 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}
dot={false} dot={false}
animationDuration={1000} animationDuration={1000}
/> />
</LineChart> </LineChart>
</ResponsiveContainer> </ResponsiveContainer>
:
<p>Loading...</p>
}
<button onClick={listen}>Listen</button> {data ?
<div className='container'>
<p>Total: {data.actual_total} W — {parseInt(data.actual_total / 5985 * 100)}%</p>
{data.night ? <p>Today: {data.today_energy} kWh</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> <p>Updated: {data.timestamp.split(' ')[1]}</p>
<p>Updated: {data.timestamp.split(' ')[1]}</p> <p>Individual panels:</p>
<p>Individual panels:</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>
<div className='panels'> {i != 2 &&
{Object.values(data.inverters).map((x, i) => <div
<> className='panel'
<div style={{ backgroundColor: `hsl(21, 100%, ${x.power[1]/315*50}%)` }}
className='panel' >
style={{ backgroundColor: `hsl(21, 100%, ${x.power[0]/315*50}%)` }} <div className='panel-label'>
> {x.power[1]}
<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>

Write Preview
Loading…
Cancel
Save