You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@streampipes.apache.org by ri...@apache.org on 2026/06/03 09:00:45 UTC
(streampipes-website) 07/08: Update homepage
This is an automated email from the ASF dual-hosted git repository.
dominikriemer pushed a commit to branch refactor-website
in repository https://gitbox.apache.org/repos/asf/streampipes-website.git
commit b7b5f5096198ada5ed10d89baee6bb1b99175325
Author: Dominik Riemer <do...@gmail.com>
AuthorDate: Wed Jun 3 10:15:44 2026 +0200
Update homepage
---
website-v2/src/components/Teaser.tsx | 20 +++++++-----
.../src/components/home/LovedByDevelopers.tsx | 16 ----------
website-v2/src/components/home/LovedByUsers.tsx | 35 +++++++++++++--------
.../src/components/home/ReadyforProduction.tsx | 6 ++--
website-v2/static/css/custom-website.css | 12 +++----
.../img/2026/pipeline-editor-configuration.png | Bin 0 -> 309764 bytes
6 files changed, 44 insertions(+), 45 deletions(-)
diff --git a/website-v2/src/components/Teaser.tsx b/website-v2/src/components/Teaser.tsx
index fe1f4573a..80d4e96c3 100644
--- a/website-v2/src/components/Teaser.tsx
+++ b/website-v2/src/components/Teaser.tsx
@@ -1,6 +1,5 @@
import React, { FC } from 'react';
import TeaserFeature from './TeaserFeature';
-import CircleContainer from './CircleContainer';
const Teaser = (props) => (
<>
@@ -13,10 +12,10 @@ const Teaser = (props) => (
<span className={"top-claim-area-subtitle-text"}>All-In-One</span>
</div>
<div className={"top-claim-area-main-title"}>
- Industrial IoT Toolbox
+ Industrial IoT Data Platform
</div>
</div>
- <div className="apache-teaser">Apache StreamPipes is a self-service Industrial IoT toolbox to enable
+ <div className="apache-teaser">Apache StreamPipes is a self-service Industrial IoT data platform to enable
non-technical
users to
connect, analyze and explore IoT data streams.
@@ -37,27 +36,34 @@ const Teaser = (props) => (
<div className="container-header">
<div className="row">
- <div className="col-12 col-lg-4">
+ <div className="col-12 col-lg-3">
<TeaserFeature
icon={"fa-table-columns"}
title={"Easy to use"}
subtitle={"Intuitive and fully integrated web-based user interface"}>
</TeaserFeature>
</div>
- <div className="col-12 col-lg-4">
+ <div className="col-12 col-lg-3">
<TeaserFeature
icon={"fa-bolt"}
title={"Powerful"}
- subtitle={"Quickly implement your IIoT use cases"}>
+ subtitle={"Quickly implement your IIoT use cases."}>
</TeaserFeature>
</div>
- <div className="col-12 col-lg-4">
+ <div className="col-12 col-lg-3">
<TeaserFeature
icon={"fa-code"}
title={"Extensible"}
subtitle={"Developer tools for Java, Python and TypeScript"}>
</TeaserFeature>
</div>
+ <div className="col-12 col-lg-3">
+ <TeaserFeature
+ icon={"fa-industry"}
+ title={"Enterprise-ready"}
+ subtitle={"Scale from pilot to production"}>
+ </TeaserFeature>
+ </div>
{/*<a href="https://www.apache.org/events/current-event.html">*/}
{/* <img src="https://www.apache.org/events/current-event-125x125.png"*/}
{/* className={"event-image"}/>*/}
diff --git a/website-v2/src/components/home/LovedByDevelopers.tsx b/website-v2/src/components/home/LovedByDevelopers.tsx
index 9d171195e..3c395b97c 100644
--- a/website-v2/src/components/home/LovedByDevelopers.tsx
+++ b/website-v2/src/components/home/LovedByDevelopers.tsx
@@ -75,22 +75,6 @@ const LovedByDevelopers = (props) => (
<img className="d-block w-100 mt-2 mb-2" src={"/img/screenshots/python-onlineml.png"} alt={"Online ML"}/>
</div>
</TwoColumnFeatureSection>
- <TwoColumnFeatureSection>
- <div>
- <img className="d-block w-100 mt-2 mb-2" src={"/img/screenshots/streampipes-custom-ui.png"} alt={"Online ML"}/>
- </div>
- <Subsection title={"Customized User Interfaces"}>
- <p className={"text-left"}>
- As a software platform that targets the Industrial IoT, we know that many applications require their own user interface, for instance, to assist maintenance personnel or to visualize machine behaviour.
- </p>
- <p className={"text-left"}>
- The default user interface of StreamPipes can be extended with additional views by an integrated microfrontend framework.
- </p>
- <p className={"text-left"}>
- A Typescript client library and an API to access platform features help you to build your custom IIoT solution with much less programming effort.
- </p>
- </Subsection>
- </TwoColumnFeatureSection>
</PageSection>
</>
diff --git a/website-v2/src/components/home/LovedByUsers.tsx b/website-v2/src/components/home/LovedByUsers.tsx
index 3185baa7f..2cacb7774 100644
--- a/website-v2/src/components/home/LovedByUsers.tsx
+++ b/website-v2/src/components/home/LovedByUsers.tsx
@@ -9,19 +9,20 @@ const LovedByUsers = (props) => (
sectionSubtitle={"No more application wiring"} backgroundClass={"background-white"}>
<FeatureItemHorizontal featureNumber={"01."} title={"IIoT Connectivity"}
images={[
- {src: "/img/screenshots/streampipes-connect-opcua.png", alt: "StreamPipes Connect OPC-UA Browser"},
- {src: "/img/screenshots/streampipes-connect-overview.png", alt: "StreamPipes Connect"},
- {src: "/img/screenshots/streampipes-connect-schema-editor.png", alt: "StreamPipes Connect Schema Editor"}]}>
+ {src: "/img/2026/connect-create-select-adapter.png", alt: "StreamPipes Connect Adapter Library"},
+ {src: "/img/2026/connect-create-opcua-browser.png", alt: "StreamPipes Connect OPC UA browser"},
+ {src: "/img/2026/connect-create-configure-schema-example.png", alt: "StreamPipes Connect Schema Transformations"}]}>
<p className={"text-left"}>Integrate data streams using the built-in StreamPipes Connect library
- with support many industrial protoocls such as S7, MQTT, Modbus, OPC-UA and many other IT protocols such as Apache Kafka and Apache Pulsar.</p>
+ with support many industrial protoocls such as S7, MQTT, Modbus, OPC UA, OPC UA Events, WinCC Alarm Archive and many other IT protocols such as Apache Kafka and Apache Pulsar.</p>
<hr/>
<p><b>Some included adapters and integrations:</b></p>
<p className={"text-left"}>
+ <a href="https://opcfoundation.org/">OPC UA</a>,
<a href="https://kafka.apache.org">Apache Kafka</a>,
- <a href="https://pulsar.apache.org">Apache Pulsar</a>,
- <a href="https://plc4x.apache.org">Apache PLC4X (e.g., S7</a>,
+ <a href="https://mqtt.org">MQTT</a>,
+ <a href="https://plc4x.apache.org">Apache PLC4X (e.g., S7, Modbus)</a>,
<a href="https://www.ros.org">Robot Operating System (ROS)</a>,
- OPC-UA, MQTT and more.
+ and many more.
</p>
<hr/>
<p className={"text-left"}>Adapters can be easily configured right from the user interface - with an intuitive
@@ -33,7 +34,7 @@ const LovedByUsers = (props) => (
<a href="/docs/use-connect/" className="sp-button sp-button-medium sp-button-blue"><i
className="fas fa-hand-point-right"></i> Learn more</a>
</FeatureItemHorizontal>
- <FeatureItemHorizontal featureNumber={"02."} title={"Analyze"} images={[{src: "/img/screenshots/sp-editor-pipeline.png", alt: "StreamPipes Pipeline Editor"}, {src: "/img/screenshots/sp-editor-config-trend.png", alt: "Pipeline Editor Configuration"}]}>
+ <FeatureItemHorizontal featureNumber={"02."} title={"Analyze"} images={[{src: "/img/2026/pipeline-editor-example.png", alt: "StreamPipes Pipeline Editor"}, {src: "/img/2026/pipeline-editor-configuration.png", alt: "Pipeline Configuration"}, {src: "/img/2026/pipeline-overview-grouped.png", alt: "Pipeline Overview"}]}>
<p className={"text-left"}>Harmonize and analyze data by using the real-time algorithm toolbox ranging from simple filters up to pre-trained neural networks - or build your own algorithm with the provided SDK.</p>
<hr/>
<p className={"text-left"}><b>Some included data processors:</b></p>
@@ -46,7 +47,7 @@ const LovedByUsers = (props) => (
<a href="/docs/use-pipeline-editor/" className="sp-button sp-button-medium sp-button-blue"><i
className="fas fa-hand-point-right"></i> Learn more</a>
</FeatureItemHorizontal>
- <FeatureItemHorizontal featureNumber={"03."} title={"Exploit"} images={[{src: "/img/screenshots/sp-data-explorer-config.png", alt: "Data Explorer Widgets"}, {src: "/img/screenshots/sp-explorer-ts.png", alt: "StreamPipes Data Explorer Time Series Chart"}, {src: "/img/screenshots/sp-dashboard.png", alt: "Live Dashboard"}]}>
+ <FeatureItemHorizontal featureNumber={"03."} title={"Exploit"} images={[{src: "/img/2026/dashboard-create.png", alt: "Dashboards"}, {src: "/img/2026/chart-status-heatmap.png", alt: "StreamPipes Status Heatmap"}, {src: "/img/2026/chart-traffic-light.png", alt: "Chart Traffic Light"}]}>
<p className={"text-left"}>Trigger notifications, configure your real-time dashboard or send data to third-party systems such as databases (e.g., Kafka or Elasticsearch), external services (e.g., Slack) or IoT actuators.</p>
<hr/>
<p className={"text-left"}><b>Some included data sinks:</b></p>
@@ -58,13 +59,21 @@ const LovedByUsers = (props) => (
OPC-UA, RabbitMQ, Email, Slack, Internal Notification, PostgreSQL and more.
</p>
<hr/>
- <p className={"text-left"}>The brand-new data explorer gives you an intuitive and feature-rich component to visually analyze persisted time-series data and comes with ready-to-use visualizations such as heatmaps, value distribution charts or time-series charts.</p>
+ <p className={"text-left"}>The chart library gives you an intuitive and feature-rich component to visually analyze persisted time-series data and comes with ready-to-use visualizations such as heatmaps, value distribution charts or time-series charts.</p>
<hr/>
<p className={"text-left"}>Use the live dashboard to visualize data in real-time, e.g., show critical values directly on the shopfloor.</p>
- <a href="/docs/use-data-explorer/" className="sp-button sp-button-medium sp-button-blue"><i
- className="fas fa-hand-point-right/"></i> Data Explorer</a>
+ <a href="/docs/use-charts/" className="sp-button sp-button-medium sp-button-blue"><i
+ className="fas fa-hand-point-right/"></i> Charts</a>
<a href="/docs/use-dashboard/" className="sp-button sp-button-medium sp-button-blue"><i
- className="fas fa-hand-point-right"></i> Live Dashboard</a>
+ className="fas fa-hand-point-right"></i> Dashboards</a>
+ </FeatureItemHorizontal>
+ <FeatureItemHorizontal featureNumber={"04."} title={"Manage"} images={[{src: "/img/2026/home-map.png", alt: "Homepage"}, {src: "/img/2026/asset-create.png", alt: "Asset Management"}, {src: "/img/2026/dataset-export-provider-dialog-s3.png", alt: "Retention Config"}]}>
+ <p className={"text-left"}>Manage assets, sites, locations and assign resources to physical assets. Organize your unified namespace.</p>
+ <hr/>
+ <p className={"text-left"}>As an integrated data platform you can manage assets, sites, users, permissions and much more. Developer interfaces ensure that StreamPipes integrates with your existing infrastructure.</p>
+ <hr/>
+ <a href="/docs/use-assets/" className="sp-button sp-button-medium sp-button-blue"><i
+ className="fas fa-hand-point-right"></i> Assets</a>
</FeatureItemHorizontal>
</PageSection>
diff --git a/website-v2/src/components/home/ReadyforProduction.tsx b/website-v2/src/components/home/ReadyforProduction.tsx
index df479a95b..a5f26b661 100644
--- a/website-v2/src/components/home/ReadyforProduction.tsx
+++ b/website-v2/src/components/home/ReadyforProduction.tsx
@@ -14,17 +14,17 @@ const ReadyforProduction = (props) => (
User management is included and can be configured directly from the user interface.
</p>
<p className={"text-left text-light"}>
- StreamPipes supports the management of users, groups and permissions, so that access to views can be individually restricted.
+ StreamPipes supports the management of users, groups and permissions, so that access to views can be individually restricted. OAuth 2.0 can enabled.
</p>
</Subsection>
<div>
- <img className="d-block w-100 mt-2 mb-2" src={"/img/screenshots/streampipes-user-management.png"} alt={"User Management"}/>
+ <img className="d-block w-100 mt-2 mb-2" src={"/img/2026/security-edit-user.png"} alt={"User Management"}/>
</div>
</TwoColumnFeatureSection>
<TwoColumnFeatureSection>
<div>
- <img className="d-block w-100 mt-2 mb-2" src={"/img/screenshots/streampipes-mail-configuration.png"} alt={"Mail Configuration"}/>
+ <img className="d-block w-100 mt-2 mb-2" src={"/img/2026/settings-mail-template.png"} alt={"Mail Configuration"}/>
</div>
<Subsection title={"Email & notifications"}>
<p className={"text-left text-light"}>
diff --git a/website-v2/static/css/custom-website.css b/website-v2/static/css/custom-website.css
index 7d6f0c0ee..216635667 100644
--- a/website-v2/static/css/custom-website.css
+++ b/website-v2/static/css/custom-website.css
@@ -301,7 +301,7 @@ img {
width:100%;
//background: rgba(255, 255, 255, 0.85);
box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
- height: 250px;
+ height: 200px;
border-radius: 10px;
text-align: center;
padding: 15px;
@@ -310,20 +310,20 @@ img {
.feature-highlights-icon {
margin-right:10px;
color: var(--color-accent);
- font-size: 3rem;
+ font-size: 2.5rem;
}
.feature-highlights-title {
font-weight: 800;
color: var(--color-accent);
- font-size: 1.5rem;
+ font-size: 1.25rem;
}
.feature-highlights-subtitle {
color:var(--color-primary);
padding:3px;
font-weight: 500;
- font-size: 1rem;
+ font-size: 0.9rem;
}
.sp-blue {
@@ -389,7 +389,7 @@ img {
}
.teaser-image {
- background-image:url('/img/bg-img/sp.png');
+ background-image:url('/img/2026/home-table.png');
//background:linear-gradient(0deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url('/img/bg-img/bg-index-color.png');
background-size:cover;
border-radius: 20px;
@@ -451,7 +451,7 @@ img {
.top-claim-area-main-title {
font-weight: 800;
- font-size: 5.25rem;
+ font-size: 4.25rem;
color: var(--color-primary);
}
diff --git a/website-v2/static/img/2026/pipeline-editor-configuration.png b/website-v2/static/img/2026/pipeline-editor-configuration.png
new file mode 100644
index 000000000..7cdca9cc4
Binary files /dev/null and b/website-v2/static/img/2026/pipeline-editor-configuration.png differ