diff --git a/examples/starter/styles.css b/examples/starter/styles.css
index a7ef7efc..a42fb93a 100644
--- a/examples/starter/styles.css
+++ b/examples/starter/styles.css
@@ -52,6 +52,7 @@ body,
.logo,
.binding-mode,
.tiling-direction,
+.network,
.memory,
.cpu,
.battery {
diff --git a/examples/starter/vanilla.html b/examples/starter/vanilla.html
index 0faa475d..825c3bad 100644
--- a/examples/starter/vanilla.html
+++ b/examples/starter/vanilla.html
@@ -28,21 +28,24 @@
const zebarCtx = await init();
- const [cpu, date, battery, memory, weather] = await Promise.all([
- zebarCtx.createProvider({ type: 'cpu' }),
- zebarCtx.createProvider({
- type: 'date',
- formatting: 'EEE d MMM t',
- }),
- zebarCtx.createProvider({ type: 'battery' }),
- zebarCtx.createProvider({ type: 'memory' }),
- zebarCtx.createProvider({ type: 'weather' }),
- ]);
+ const [network, cpu, date, battery, memory, weather] =
+ await Promise.all([
+ zebarCtx.createProvider({ type: 'network' }),
+ zebarCtx.createProvider({ type: 'cpu' }),
+ zebarCtx.createProvider({
+ type: 'date',
+ formatting: 'EEE d MMM t',
+ }),
+ zebarCtx.createProvider({ type: 'battery' }),
+ zebarCtx.createProvider({ type: 'memory' }),
+ zebarCtx.createProvider({ type: 'weather' }),
+ ]);
createRoot(document.getElementById('root')).render();
function App() {
const [outputs, setOutputs] = useState({
+ network: network.output,
cpu: cpu.output,
date: date.output,
battery: battery.output,
@@ -51,6 +54,9 @@
});
useEffect(() => {
+ network.onOutput(network =>
+ setOutputs(outputs => ({ ...outputs, network })),
+ );
cpu.onOutput(cpu =>
setOutputs(outputs => ({ ...outputs, cpu })),
);
@@ -68,6 +74,36 @@
);
}, []);
+ // Get icon to show for current network status.
+ function getNetworkIcon() {
+ switch (outputs.network.defaultInterface?.type) {
+ case 'ethernet':
+ return ;
+ case 'wifi':
+ if (outputs.network.defaultGateway?.signalStrength >= 80) {
+ return ;
+ } else if (
+ outputs.network.defaultGateway?.signalStrength >= 65
+ ) {
+ return ;
+ } else if (
+ outputs.network.defaultGateway?.signalStrength >= 40
+ ) {
+ return ;
+ } else if (
+ outputs.network.defaultGateway?.signalStrength >= 25
+ ) {
+ return ;
+ } else {
+ return ;
+ }
+ default:
+ return (
+
+ );
+ }
+ }
+
// Get icon to show for how much of the battery is charged.
function getBatteryIcon() {
if (outputs.battery.chargePercent > 90)
@@ -81,7 +117,7 @@
return ;
}
- // Get icon to show for how much of the battery is charged.
+ // Get icon to show for current weather status.
function getWeatherIcon() {
switch (outputs.weather.status) {
case 'clear_day':
@@ -120,6 +156,13 @@
{outputs.date.formatted}
+ {outputs.network && (
+
+ {getNetworkIcon()}
+ {outputs.network.defaultGateway?.ssid}
+
+ )}
+
{Math.round(outputs.memory.usage)}%
@@ -147,10 +190,12 @@
)}
-
- {getWeatherIcon()}
- {Math.round(outputs.weather.celsiusTemp)}°C
-
+ {outputs.weather && (
+
+ {getWeatherIcon()}
+ {Math.round(outputs.weather.celsiusTemp)}°C
+
+ )}
);
diff --git a/examples/starter/with-glazewm.html b/examples/starter/with-glazewm.html
index a53f26b2..33e3c3bc 100644
--- a/examples/starter/with-glazewm.html
+++ b/examples/starter/with-glazewm.html
@@ -28,8 +28,9 @@
const zebarCtx = await init();
- const [glazewm, cpu, date, battery, memory, weather] =
+ const [network, glazewm, cpu, date, battery, memory, weather] =
await Promise.all([
+ zebarCtx.createProvider({ type: 'network' }),
zebarCtx.createProvider({ type: 'glazewm' }),
zebarCtx.createProvider({ type: 'cpu' }),
zebarCtx.createProvider({
@@ -45,6 +46,7 @@
function App() {
const [outputs, setOutputs] = useState({
+ network: network.output,
glazewm: glazewm.output,
cpu: cpu.output,
date: date.output,
@@ -54,6 +56,9 @@
});
useEffect(() => {
+ network.onOutput(network =>
+ setOutputs(outputs => ({ ...outputs, network })),
+ );
glazewm.onOutput(glazewm =>
setOutputs(outputs => ({ ...outputs, glazewm })),
);
@@ -71,6 +76,36 @@
);
}, []);
+ // Get icon to show for current network status.
+ function getNetworkIcon() {
+ switch (outputs.network.defaultInterface?.type) {
+ case 'ethernet':
+ return ;
+ case 'wifi':
+ if (outputs.network.defaultGateway?.signalStrength >= 80) {
+ return ;
+ } else if (
+ outputs.network.defaultGateway?.signalStrength >= 65
+ ) {
+ return ;
+ } else if (
+ outputs.network.defaultGateway?.signalStrength >= 40
+ ) {
+ return ;
+ } else if (
+ outputs.network.defaultGateway?.signalStrength >= 25
+ ) {
+ return ;
+ } else {
+ return ;
+ }
+ default:
+ return (
+
+ );
+ }
+ }
+
// Get icon to show for how much of the battery is charged.
function getBatteryIcon() {
if (outputs.battery.chargePercent > 90)
@@ -84,7 +119,7 @@
return ;
}
- // Get icon to show for how much of the battery is charged.
+ // Get icon to show for current weather status.
function getWeatherIcon() {
switch (outputs.weather.status) {
case 'clear_day':
@@ -160,6 +195,13 @@
>
)}
+ {outputs.network && (
+
+ {getNetworkIcon()}
+ {outputs.network.defaultGateway?.ssid}
+
+ )}
+
{Math.round(outputs.memory.usage)}%
@@ -187,10 +229,12 @@
)}
-
- {getWeatherIcon()}
- {Math.round(outputs.weather.celsiusTemp)}°C
-
+ {outputs.weather && (
+
+ {getWeatherIcon()}
+ {Math.round(outputs.weather.celsiusTemp)}°C
+
+ )}
);
diff --git a/examples/starter/with-komorebi.html b/examples/starter/with-komorebi.html
index 370b6bc9..273f83be 100644
--- a/examples/starter/with-komorebi.html
+++ b/examples/starter/with-komorebi.html
@@ -28,8 +28,9 @@
const zebarCtx = await init();
- const [komorebi, cpu, date, battery, memory, weather] =
+ const [network, komorebi, cpu, date, battery, memory, weather] =
await Promise.all([
+ zebarCtx.createProvider({ type: 'network' }),
zebarCtx.createProvider({ type: 'komorebi' }),
zebarCtx.createProvider({ type: 'cpu' }),
zebarCtx.createProvider({
@@ -45,6 +46,7 @@
function App() {
const [outputs, setOutputs] = useState({
+ network: network.output,
komorebi: komorebi.output,
cpu: cpu.output,
date: date.output,
@@ -54,6 +56,9 @@
});
useEffect(() => {
+ network.onOutput(network =>
+ setOutputs(outputs => ({ ...outputs, network })),
+ );
komorebi.onOutput(komorebi =>
setOutputs(outputs => ({ ...outputs, komorebi })),
);
@@ -74,7 +79,35 @@
);
}, []);
- console.log('outputs.komorebi', outputs.komorebi);
+ // Get icon to show for current network status.
+ function getNetworkIcon() {
+ switch (outputs.network.defaultInterface?.type) {
+ case 'ethernet':
+ return ;
+ case 'wifi':
+ if (outputs.network.defaultGateway?.signalStrength >= 80) {
+ return ;
+ } else if (
+ outputs.network.defaultGateway?.signalStrength >= 65
+ ) {
+ return ;
+ } else if (
+ outputs.network.defaultGateway?.signalStrength >= 40
+ ) {
+ return ;
+ } else if (
+ outputs.network.defaultGateway?.signalStrength >= 25
+ ) {
+ return ;
+ } else {
+ return ;
+ }
+ default:
+ return (
+
+ );
+ }
+ }
// Get icon to show for how much of the battery is charged.
function getBatteryIcon() {
@@ -89,7 +122,7 @@
return ;
}
- // Get icon to show for how much of the battery is charged.
+ // Get icon to show for current weather status.
function getWeatherIcon() {
switch (outputs.weather.status) {
case 'clear_day':
@@ -141,6 +174,13 @@
{outputs.date.formatted}
+ {outputs.network && (
+
+ {getNetworkIcon()}
+ {outputs.network.defaultGateway?.ssid}
+
+ )}
+
{Math.round(outputs.memory.usage)}%
@@ -168,10 +208,12 @@
)}
-
- {getWeatherIcon()}
- {Math.round(outputs.weather.celsiusTemp)}°C
-
+ {outputs.weather && (
+
+ {getWeatherIcon()}
+ {Math.round(outputs.weather.celsiusTemp)}°C
+
+ )}
);