salfter/ESP3D-WEBUI
1
0
Fork 0
mirror of https://github.com/luc-github/ESP3D-WEBUI.git synced 2025-10-31 11:56:46 -07:00
Code Issues Packages Projects Releases Wiki Activity

Add custom pages support

Browse Source
This commit is contained in:
Luc
2020-10-30 16:36:00 +01:00
parent 52459f198f
commit d3f0bf8c69
10 changed files with 237 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
dist/grbl/debug/index.html.gz vendored
View File

Binary file not shown.

BIN
dist/grbl/production/index.html.gz vendored
View File

Binary file not shown.

BIN
dist/printer/debug/index.html.gz vendored
View File

Binary file not shown.

BIN
dist/printer/production/index.html.gz vendored
View File

Binary file not shown.

1
sizetracker.txt
View File

@@ -32,3 +32,4 @@ Status : 0.0.0.61: 83.6KB | N/A
Macros : 0.0.0.66: 91.0KB | N/A
Authentication : 0.0.0.70: 91.2KB | N/A
Custom panels + camera : 0.0.0.71: 93.0KB | N/A
Custom pages : 0.0.0.73: 93.5KB | N/A

3
src/components/app.js
View File

@@ -27,7 +27,7 @@ import { disconnectWsServer } from "./websocket"
import { AboutPage } from "./about"
import { DashboardPage, updateTerminal } from "./dashboard"
import { SettingsPage, initApp, preferences, stopPolling } from "./settings"
import { Header } from "./header"
import { Header, ExtraPages } from "./header"
import { Notification, NotificationPage } from "./notification"
import { setLang, T } from "./translations"
import { prefs } from "./settings"
@@ -109,6 +109,7 @@ const Container = () => {
<NotificationPage />
<DashboardPage />
<SettingsPage />
<ExtraPages />
</div>
)
}

205
src/components/header/index.js
View File

@@ -18,16 +18,25 @@
Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA
*/
import { h } from "preact"
import { h, Fragment } from "preact"
import { Page, customdata } from "../app"
import { ESP3DLogo, ESP3DBanner } from "../images"
import { Server, Settings, Eye, Lock } from "preact-feather"
import { T } from "../translations"
import { prefs } from "../settings"
import { SendGetHttp } from "../http"
import { esp3dSettings, disconnectPage } from "../app"
import { SubmitCredentials } from "../http"
import { showDialog } from "../dialog"
import { useStoreon } from "storeon/preact"
const { getIcon } = require(`../${process.env.TARGET_ENV}`)
/*
* Local variables
*
*/
let timeoutpanel = []
/*
* Force disconnection
@@ -48,11 +57,200 @@ function confirmDisconnection() {
})
}
/*
* ButtonExtraPage
*/
const ButtonExtraPage = ({ data }) => {
const { activePage } = useStoreon("activePage")
const onClick = e => {
const { dispatch } = useStoreon()
dispatch("setPage", data.id)
}
return (
<div
class={activePage == data.id ? "nav-item active" : "nav-item"}
title={data.name}
onClick={onClick}
>
{data.icon != "None" ? getIcon(data.icon) : null}
<span class="disable-select hide-low">&nbsp;{data.name}</span>
</div>
)
}
/*
* ExtraPagesButtons
*/
const ExtraPagesButtons = () => {
let buttonlist = []
for (let i = 0; i < prefs.extrapanels.length; i++) {
if (prefs.extrapanels[i].target == "page") {
buttonlist.push(<ButtonExtraPage data={prefs.extrapanels[i]} />)
}
}
return <Fragment>{buttonlist}</Fragment>
}
/*
* ExtraPages
*/
const ExtraPages = () => {
const { activePage } = useStoreon("activePage")
for (let i = 0; i < prefs.extrapanels.length; i++) {
if (prefs.extrapanels[i].target == "page") {
if (activePage == prefs.extrapanels[i].id) {
let source = ""
let content = []
let data = prefs.extrapanels[i]
//small sanity check to avoid end loop
//need to improve check here
if (data.source != "/") {
source = data.source
}
if (typeof timeoutpanel[data.id] == "undefined") {
timeoutpanel[data.id] = null
}
if (timeoutpanel[data.id]) {
clearInterval(timeoutpanel[data.id])
}
if (data.type == "content") {
let d = 0
if (document.getElementById("notif").clientHeight) {
if (
document.getElementById("notif").getClientRects()[0]
) {
d =
document.getElementById("notif").clientHeight +
document
.getElementById("notif")
.getClientRects()[0].top
}
}
content.push(
<iframe
class="w-100 mw-100"
id={"panel_content_" + data.id}
style={
"border:none; height:calc(100vh - " + d + "px);"
}
src={source}
></iframe>
)
} else {
content.push(<div class="p-2" />)
content.push(
<div class="w-100" width="100%">
<img
id={"panel_content_" + data.id}
src={source}
></img>
</div>
)
}
if (data.refreshtime != 0) {
console.log(
"setup interval " +
data.refreshtime +
" for " +
document.getElementById("panel_content_" + data.id)
)
if (data.type != "camera") {
timeoutpanel[data.id] = setInterval(() => {
let src
if (
document.getElementById(
"panel_content_" + data.id
) != null
) {
if (source.indexOf("?") == -1)
src =
source +
"?esp3d=" +
new Date().getTime()
else
src =
source +
"&esp3d=" +
new Date().getTime()
console.log(
"refresh for " +
document.getElementById(
"panel_content_" + data.id
)
)
}
}, data.refreshtime * 1000)
} else {
if (source.length > 0) {
timeoutpanel[data.id] = setInterval(() => {
let src
if (
document.getElementById(
"panel_content_" + data.id
) != null
) {
if (source.indexOf("?") == -1)
src =
source +
"?esp3d=" +
new Date().getTime()
else
src =
source +
"&esp3d=" +
new Date().getTime()
SendGetHttp(
src,
response => {
if (
document.getElementById(
"panel_content_" + data.id
) != null
) {
document.getElementById(
"panel_content_" + data.id
).src = URL.createObjectURL(
response
)
}
},
(errorcode, response) => {
console.log("fail getting image")
},
null,
"download",
5
)
console.log(
"refresh for " +
document.getElementById(
"panel_content_" + data.id
)
)
}
}, data.refreshtime * 1000)
}
}
}
return (
<Fragment>
{content}
<div class="p-2" />
</Fragment>
)
}
}
}
return null
}
/*
* Header component
*
*/
export const Header = () => {
const Header = () => {
const { activePage } = useStoreon("activePage")
const { dispatch } = useStoreon()
if (typeof esp3dSettings == "undefined") return
@@ -135,6 +333,7 @@ export const Header = () => {
<Settings />
<span class="disable-select hide-low">&nbsp;{T("S14")}</span>
</div>
<ExtraPagesButtons />
<div
class={
esp3dSettings.FWTarget == "unknown"
@@ -158,3 +357,5 @@ export const Header = () => {
</nav>
)
}
export { ExtraPages, Header }

2
src/components/version.js
View File

@@ -19,4 +19,4 @@
*/
import { h } from "preact"
export const Esp3dVersion = () => <span>3.0.0.72</span>
export const Esp3dVersion = () => <span>3.0.0.73</span>

5
src/server/public/hello.html Normal file
View File

@@ -0,0 +1,5 @@
<html>
<body>
<h1>Hello world</h1>
</body>
</html>

28
src/server/public/preferences.json
View File

@@ -44,13 +44,35 @@
"extrapanels": [
{
"id": 1603307186211,
"name": "Panel1",
"name": "Page1 de la mort",
"color": "#C0C0C0",
"textcolor": "#000000",
"icon": "Globe",
"target": "page",
"source": "http://192.168.1.61/snap?framesize=9",
"refreshtime": "0",
"type": "image"
},
{
"id": 1604059348627,
"name": "Panel2",
"color": "#C0C0C0",
"textcolor": "#000000",
"icon": "Globe",
"target": "panel",
"source": "http://192.168.1.61/snap?framesize=9",
"refreshtime": "0.2",
"source": "http://127.0.0.1",
"refreshtime": "0",
"type": "content"
},
{
"id": 1604059351918,
"name": "Panel3",
"color": "#C0C0C0",
"textcolor": "#000000",
"icon": "Globe",
"target": "page",
"source": "/hello.html",
"refreshtime": "0",
"type": "content"
}
]