Skip to content
GitLab
Explore
Sign in
Primary navigation
Search or go to…
Project
K
Kalle WebUI
Manage
Activity
Members
Labels
Plan
Issues
Issue boards
Milestones
Code
Merge requests
Repository
Branches
Commits
Tags
Repository graph
Compare revisions
Build
Pipelines
Jobs
Pipeline schedules
Artifacts
Deploy
Releases
Monitor
Service Desk
Help
Help
Support
GitLab documentation
Compare GitLab plans
Community forum
Contribute to GitLab
Provide feedback
Terms and privacy
Keyboard shortcuts
?
Snippets
Groups
Projects
Show more breadcrumbs
Teckids
Projekt Hack-n-Fun
Kalle WebUI
Commits
2b4acfb7
Commit
2b4acfb7
authored
1 year ago
by
Pinguin
Browse files
Options
Downloads
Plain Diff
Merge branch '1-adapt-the-webui-to-the-new-firmware' into 'main'
Resolve "Adapt the WebUI to the new firmware" Closes
#1
See merge request
!2
parents
1b5ace37
f703b64b
No related branches found
No related tags found
1 merge request
!2
Resolve "Adapt the WebUI to the new firmware"
Pipeline
#190957
passed
1 year ago
Stage: deploy
Changes
3
Pipelines
1
Hide whitespace changes
Inline
Side-by-side
Showing
3 changed files
.gitignore
+3
-0
3 additions, 0 deletions
.gitignore
public/index.html
+12
-12
12 additions, 12 deletions
public/index.html
public/kalle.js
+30
-40
30 additions, 40 deletions
public/kalle.js
with
45 additions
and
52 deletions
.gitignore
+
3
−
0
View file @
2b4acfb7
# mqtt.js
public/mqtt.min.js
# Logs
# Logs
logs
logs
*.log
*.log
...
...
This diff is collapsed.
Click to expand it.
public/index.html
+
12
−
12
View file @
2b4acfb7
...
@@ -77,46 +77,46 @@
...
@@ -77,46 +77,46 @@
</div>
</div>
<h3>
Manuell LEDs einstellen
</h3>
<h3>
Manuell LEDs einstellen
</h3>
<div
id=
"led0"
>
<label
for=
"led0_inp"
>
LED 1:
</label>
<input
id=
"led0_inp"
type=
"color"
value=
"#ffffff"
/>
<label
for=
"led0_inp"
id=
"led8_hex"
></label>
</div>
<div
id=
"led1"
>
<div
id=
"led1"
>
<label
for=
"led1_inp"
>
LED
1
:
</label>
<label
for=
"led1_inp"
>
LED
2
:
</label>
<input
id=
"led1_inp"
type=
"color"
value=
"#ffffff"
/>
<input
id=
"led1_inp"
type=
"color"
value=
"#ffffff"
/>
<label
for=
"led1_inp"
id=
"led1_hex"
></label>
<label
for=
"led1_inp"
id=
"led1_hex"
></label>
</div>
</div>
<div
id=
"led2"
>
<div
id=
"led2"
>
<label
for=
"led2_inp"
>
LED
2
:
</label>
<label
for=
"led2_inp"
>
LED
3
:
</label>
<input
id=
"led2_inp"
type=
"color"
value=
"#ffffff"
/>
<input
id=
"led2_inp"
type=
"color"
value=
"#ffffff"
/>
<label
for=
"led2_inp"
id=
"led2_hex"
></label>
<label
for=
"led2_inp"
id=
"led2_hex"
></label>
</div>
</div>
<div
id=
"led3"
>
<div
id=
"led3"
>
<label
for=
"led3_inp"
>
LED
3
:
</label>
<label
for=
"led3_inp"
>
LED
4
:
</label>
<input
id=
"led3_inp"
type=
"color"
value=
"#ffffff"
/>
<input
id=
"led3_inp"
type=
"color"
value=
"#ffffff"
/>
<label
for=
"led3_inp"
id=
"led3_hex"
></label>
<label
for=
"led3_inp"
id=
"led3_hex"
></label>
</div>
</div>
<div
id=
"led4"
>
<div
id=
"led4"
>
<label
for=
"led4_inp"
>
LED
4
:
</label>
<label
for=
"led4_inp"
>
LED
5
:
</label>
<input
id=
"led4_inp"
type=
"color"
value=
"#ffffff"
/>
<input
id=
"led4_inp"
type=
"color"
value=
"#ffffff"
/>
<label
for=
"led4_inp"
id=
"led4_hex"
></label>
<label
for=
"led4_inp"
id=
"led4_hex"
></label>
</div>
</div>
<div
id=
"led5"
>
<div
id=
"led5"
>
<label
for=
"led5_inp"
>
LED
5
:
</label>
<label
for=
"led5_inp"
>
LED
6
:
</label>
<input
id=
"led5_inp"
type=
"color"
value=
"#ffffff"
/>
<input
id=
"led5_inp"
type=
"color"
value=
"#ffffff"
/>
<label
for=
"led5_inp"
id=
"led5_hex"
></label>
<label
for=
"led5_inp"
id=
"led5_hex"
></label>
</div>
</div>
<div
id=
"led6"
>
<div
id=
"led6"
>
<label
for=
"led6_inp"
>
LED
6
:
</label>
<label
for=
"led6_inp"
>
LED
7
:
</label>
<input
id=
"led6_inp"
type=
"color"
value=
"#ffffff"
/>
<input
id=
"led6_inp"
type=
"color"
value=
"#ffffff"
/>
<label
for=
"led6_inp"
id=
"led6_hex"
></label>
<label
for=
"led6_inp"
id=
"led6_hex"
></label>
</div>
</div>
<div
id=
"led7"
>
<div
id=
"led7"
>
<label
for=
"led7_inp"
>
LED
7
:
</label>
<label
for=
"led7_inp"
>
LED
8
:
</label>
<input
id=
"led7_inp"
type=
"color"
value=
"#ffffff"
/>
<input
id=
"led7_inp"
type=
"color"
value=
"#ffffff"
/>
<label
for=
"led7_inp"
id=
"led7_hex"
></label>
<label
for=
"led7_inp"
id=
"led7_hex"
></label>
</div>
</div>
<div
id=
"led8"
>
<label
for=
"led8_inp"
>
LED 8:
</label>
<input
id=
"led8_inp"
type=
"color"
value=
"#ffffff"
/>
<label
for=
"led8_inp"
id=
"led8_hex"
></label>
</div>
</main>
</main>
<footer>
<footer>
<p>
<p>
...
...
This diff is collapsed.
Click to expand it.
public/kalle.js
+
30
−
40
View file @
2b4acfb7
//const mqtt = require("mqtt");
const
url
=
"
wss://mqtt.felix-zauberer.de:443
"
const
url
=
"
wss://mqtt.felix-zauberer.de:443
"
const
options
=
{
const
options
=
{
// Clean session
clean
:
true
,
clean
:
true
,
connectTimeout
:
4000
,
connectTimeout
:
4000
,
// Authentication
clientId
:
'
kalle_webui
'
,
clientId
:
'
kalle_webui
'
,
username
:
'
kalle1
'
,
username
:
'
kalle1
'
,
password
:
'
eZcKn1zBE6KtbeFnZ33lV1EKnr9Bcn8B
'
,
password
:
'
eZcKn1zBE6KtbeFnZ33lV1EKnr9Bcn8B
'
,
...
@@ -15,41 +12,38 @@ const client = mqtt.connect(url, options);
...
@@ -15,41 +12,38 @@ const client = mqtt.connect(url, options);
client
.
on
(
'
connect
'
,
function
()
{
client
.
on
(
'
connect
'
,
function
()
{
console
.
log
(
'
Connected!
'
)
console
.
log
(
'
Connected!
'
)
document
.
getElementById
(
"
loading
"
).
innerHTML
=
"
Status: Fertig!
"
document
.
getElementById
(
"
loading
"
).
innerHTML
=
"
Status: Fertig!
"
// Subscribe to a topic
client
.
subscribe
(
'
kalle
'
);
client
.
subscribe
(
'
main
'
,
function
(
err
)
{
client
.
subscribe
(
'
kalle/effects
'
);
if
(
!
err
)
{
client
.
subscribe
(
'
kalle/led/0/color
'
);
// Publish a message to a topic
client
.
subscribe
(
'
kalle/led/1/color
'
);
console
.
log
(
"
Fully connected!
"
)
client
.
subscribe
(
'
kalle/led/2/color
'
);
}
client
.
subscribe
(
'
kalle/led/3/color
'
);
})
client
.
subscribe
(
'
kalle/led/4/color
'
);
})
client
.
subscribe
(
'
kalle/led/5/color
'
);
client
.
subscribe
(
'
kalle/led/6/color
'
);
client
.
subscribe
(
'
kalle/led/7/color
'
);
});
client
.
on
(
'
message
'
,
function
(
topic
,
message
)
{
client
.
on
(
'
message
'
,
function
(
topic
,
message
)
{
// message is Buffer
console
.
log
(
topic
,
"
:
"
,
message
.
toString
());
console
.
log
(
message
.
toString
())
if
(
topic
.
startsWith
(
'
kalle/led
'
))
{
})
const
number
=
topic
.
split
(
'
/
'
)[
2
];
const
rgb
=
message
.
toString
().
slice
(
1
,
-
1
);
const
hex
=
rgbToHex
(
rgb
);
document
.
getElementById
(
`led
${
number
}
_inp`
).
value
=
hex
;
}
});
function
sendParty
()
{
function
sendParty
()
{
client
.
publish
(
'
effects
'
,
'
{"command": "party", "_repeat": 10}
'
)
client
.
publish
(
'
kalle/
effects
'
,
'
["party"]
'
)
}
}
function
sendLoadingBar
()
{
function
sendLoadingBar
()
{
const
hex
=
document
.
querySelector
(
"
#loadingbar_inp
"
).
value
;
const
hex
=
document
.
querySelector
(
"
#loadingbar_inp
"
).
value
;
const
rgb
=
hexToRgb
(
hex
);
const
rgb
=
hexToRgb
(
hex
);
client
.
publish
(
'
kalle/effects
'
,
`["loading-bar",
${
rgb
.
r
}
,
${
rgb
.
g
}
,
${
rgb
.
b
}
]`
);
const
message
=
{
"
command
"
:
"
loading-bar
"
,
"
color1
"
:
rgb
.
r
,
"
color2
"
:
rgb
.
g
,
"
color3
"
:
rgb
.
b
,
"
color4
"
:
0
,
"
time_in_seconds
"
:
1
,
};
client
.
publish
(
'
effects
'
,
JSON
.
stringify
(
message
));
}
}
// Funktion zum Konvertieren von Hex zu RGB
function
hexToRgb
(
hex
)
{
function
hexToRgb
(
hex
)
{
const
result
=
/^#
?([
a-f
\d]{2})([
a-f
\d]{2})([
a-f
\d]{2})
$/i
.
exec
(
hex
);
const
result
=
/^#
?([
a-f
\d]{2})([
a-f
\d]{2})([
a-f
\d]{2})
$/i
.
exec
(
hex
);
return
result
?
{
return
result
?
{
...
@@ -59,28 +53,24 @@ function hexToRgb(hex) {
...
@@ -59,28 +53,24 @@ function hexToRgb(hex) {
}
:
null
;
}
:
null
;
}
}
function
rgbToHex
(
rgb
)
{
const
[
r
,
g
,
b
]
=
rgb
.
split
(
'
,
'
);
return
`#
${((
1
<<
24
)
+
(
parseInt
(
r
)
<<
16
)
+
(
parseInt
(
g
)
<<
8
)
+
parseInt
(
b
)).
toString
(
16
).
slice
(
1
)}
`
;
}
addEventListener
(
"
DOMContentLoaded
"
,
(
event
)
=>
{
addEventListener
(
"
DOMContentLoaded
"
,
(
event
)
=>
{
document
.
getElementById
(
"
loading
"
).
innerHTML
=
"
Status: Laden...
"
document
.
getElementById
(
"
loading
"
).
innerHTML
=
"
Status: Laden...
"
// Ereignislistener für alle LED-Eingabefelder
for
(
let
i
=
0
;
i
<=
7
;
i
++
)
{
for
(
let
i
=
1
;
i
<=
8
;
i
++
)
{
document
.
querySelector
(
`#led
${
i
}
_inp`
).
addEventListener
(
"
change
"
,
function
()
{
document
.
querySelector
(
`#led
${
i
}
_inp`
).
addEventListener
(
"
change
"
,
function
()
{
const
hex
=
this
.
value
;
const
hex
=
this
.
value
;
const
rgb
=
hexToRgb
(
hex
);
const
rgb
=
hexToRgb
(
hex
);
const
ledId
=
i
-
1
;
const
ledId
=
i
;
if
(
rgb
)
{
if
(
rgb
)
{
const
message
=
{
const
message
=
[
rgb
.
r
,
rgb
.
g
,
rgb
.
b
]
"
command
"
:
"
color
"
,
"
color1
"
:
rgb
.
r
,
"
color2
"
:
rgb
.
g
,
"
color3
"
:
rgb
.
b
,
"
color4
"
:
0
,
"
led_id
"
:
ledId
,
};
// Sende die Nachricht über MQTT
client
.
publish
(
`kalle/led/
${
ledId
}
/color`
,
JSON
.
stringify
(
message
),
{
retain
:
true
});
client
.
publish
(
'
main
'
,
JSON
.
stringify
(
message
));
}
else
{
}
else
{
console
.
error
(
"
Error HEX:
"
,
hex
);
console
.
error
(
"
Error HEX:
"
,
hex
);
}
}
...
...
This diff is collapsed.
Click to expand it.
Preview
0%
Loading
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Save comment
Cancel
Please
register
or
sign in
to comment