also switched to json.Marshal at backend for watchAreas on stream page

This commit is contained in:
BroodjeAap 2020-08-09 15:25:50 +00:00
parent 5978e560f0
commit 82031fbce9
3 changed files with 18 additions and 10 deletions

View file

@ -41,6 +41,8 @@ func (server Server) index(w http.ResponseWriter, r *http.Request) {
} }
streamTemplate, err := template.ParseFiles(streamHTML, baseHTML) streamTemplate, err := template.ParseFiles(streamHTML, baseHTML)
watchAreasJSON, _ := json.Marshal(stream.WatchAreas)
if err != nil { if err != nil {
log.Println(err) log.Println(err)
return return
@ -48,9 +50,11 @@ func (server Server) index(w http.ResponseWriter, r *http.Request) {
streamTemplate.Execute(w, struct { streamTemplate.Execute(w, struct {
Streams map[string]*Stream Streams map[string]*Stream
Stream *Stream Stream *Stream
WatchAreasJSON string
}{ }{
server.Streams, server.Streams,
stream, stream,
string(watchAreasJSON[:]),
}) })
} }

View file

@ -40,6 +40,7 @@ let watchArea = new WatchArea(
let watchAreas = []; let watchAreas = [];
document.addEventListener("DOMContentLoaded", function(){ document.addEventListener("DOMContentLoaded", function(){
loadWatchAreas();
canvas = document.getElementById("canvas"); canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d"); ctx = canvas.getContext("2d");
src = document.getElementById("current_color_stream"); src = document.getElementById("current_color_stream");

View file

@ -83,14 +83,17 @@
</template> </template>
<script> <script>
{{range $watchArea := .Stream.WatchAreas}} let _watchAreas = {{.WatchAreasJSON}};
function loadWatchAreas(){
_watchAreas.forEach(watchArea => {
watchAreas.push(new WatchArea( watchAreas.push(new WatchArea(
'{{ $watchArea.Name }}', watchArea.name,
{{ $watchArea.Area.Min.X }}, {{ $watchArea.Area.Min.Y }}, watchArea.area.Min.X, watchArea.area.Min.Y,
{{ $watchArea.Area.Max.X }}, {{ $watchArea.Area.Max.Y }}, watchArea.area.Max.X, watchArea.area.Max.Y,
{{ $watchArea.Color.R }}, {{ $watchArea.Color.G }}, {{ $watchArea.Color.B }} watchArea.color.R, watchArea.color.G, watchArea.color.B
)); ));
{{end}} });
}
</script> </script>
{{end}} {{end}}