Skip to content

Commit

Permalink
changed layout from tables to flexbox; added two layouts horizontal a…
Browse files Browse the repository at this point in the history 
…nd vertical which are highly customizable
  • Loading branch information
@Tom-Hirschberger
Tom-Hirschberger committed Apr 17, 2020
1 parent 246cf5f commit 5481e38
Show file tree
Hide file tree
Showing 8 changed files with 253 additions and 146 deletions.
172 changes: 97 additions & 75 deletions MMM-SynologySurveillance.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@ Module.register('MMM-SynologySurveillance', {

defaults: {
ds: [],
columns: 2,
order: null,
missingIconUrl: "./MMM-SynologySurveillance/camera_icon.svg",
noUrlIcon: "fa-video-camera",
currentBigIcon: "fa-hand-point-up",
showOneBig: true,
addBigToNormal: false,
showBigCamName: false,
Expand All @@ -13,13 +13,19 @@ Module.register('MMM-SynologySurveillance', {
urlRefreshInterval: 60,
onlyRefreshIfUrlChanges: true,
animationSpeed: 500,
vertical: true,
},

/**
* Apply any styles, if we have any.
*/
getStyles() {
return ["synology-surveillance.css", "font-awesome.css"];
if(this.config.vertical){
return ["synology-surveillance_v.css", "font-awesome.css"];
} else {
return ["synology-surveillance_h.css", "font-awesome.css"];
}

},

start() {
Expand Down Expand Up @@ -87,49 +93,44 @@ Module.register('MMM-SynologySurveillance', {

getDom() {
const self = this
const wrapper = document.createElement("table")
const wrapper = document.createElement("div")
wrapper.className = "synology-surveillance"

if(this.config.showOneBig){
if(this.config.vertical && this.config.showOneBig){
if(typeof this.order[this.curBigIdx] !== "undefined"){
var curDsIdx = this.order[this.curBigIdx][0]
var curCamIdx = this.order[this.curBigIdx][1]
var curCamAlias = this.order[this.curBigIdx][2]
var curCamName = this.config.ds[curDsIdx].cams[curCamIdx].name
var curRow = document.createElement("tr")
curRow.className="row big"
var curCell = document.createElement("td")
curCell.className = "cell big "+curDsIdx+"_"+curCamIdx+" "+curCamAlias
curCell.setAttribute("colspan", this.config.columns)

var camWrapper = document.createElement("div")
camWrapper.className = "camWrapper big"
if(this.config.showBigCamName){
var camNameWrapper = document.createElement("span")
camNameWrapper.className = "name"
camNameWrapper.innerHTML = curCamAlias + "<br>"
camWrapper.appendChild(camNameWrapper)
}
var cam = document.createElement("img")
var camClass = "cam "+curDsIdx+"_"+curCamIdx+" "+curCamAlias
if((typeof this.dsStreamInfo[curDsIdx] !== "undefined") &&
(typeof this.dsStreamInfo[curDsIdx][curCamName] !== "undefined")
){
var camWrapper = document.createElement("div")
camWrapper.className = "camWrapper big "+curDsIdx+"_"+curCamIdx+" "+curCamAlias
if(this.config.showBigCamName){
var camNameWrapper = document.createElement("div")
camNameWrapper.className = "name"
camNameWrapper.innerHTML = curCamAlias + "<br>"
camWrapper.appendChild(camNameWrapper)
}

var innerCamWrapper = document.createElement("div")
var innerCamWrapperClassName = "innerCamWrapper big"
if((typeof this.dsStreamInfo[curDsIdx] !== "undefined") &&
(typeof this.dsStreamInfo[curDsIdx][curCamName] !== "undefined")
){
var cam = document.createElement("img")
cam.className = "cam"
cam.src = this.dsStreamInfo[curDsIdx][curCamName]
} else {
cam.src = this.config.missingIconUrl
camClass += " nourl"
}
cam.className = camClass
camWrapper.appendChild(cam)
curCell.appendChild(camWrapper)

curRow.appendChild(curCell)
wrapper.appendChild(curRow)
} else {
var cam = document.createElement("i")
cam.className = "cam nourl fa "+this.config.noUrlIcon
innerCamWrapperClassName += " nourl"
}
innerCamWrapper.className = innerCamWrapperClassName
innerCamWrapper.appendChild(cam)
camWrapper.appendChild(innerCamWrapper)
wrapper.appendChild(camWrapper)
}
}

var skippedCams = 0;
for(let curOrderIdx = 0; curOrderIdx < this.order.length; curOrderIdx++){
var curDsIdx = this.order[curOrderIdx][0]
var curCamIdx = this.order[curOrderIdx][1]
Expand All @@ -144,65 +145,86 @@ Module.register('MMM-SynologySurveillance', {
((typeof this.dsStreamInfo[curDsIdx] !== "undefined") &&
(typeof this.dsStreamInfo[curDsIdx][curCamName] !== "undefined"))
){
if(((curOrderIdx-skippedCams) % this.config.columns) == 0){
curRow = document.createElement("tr")
curRow.className = "row"
wrapper.appendChild(curRow)
}

if(!this.config.showOneBig || (curOrderIdx !== this.curBigIdx) || (this.config.dummyIcon === null)){
var curCell = document.createElement("td")
curCell.className = "cell "+curDsIdx+"_"+curCamIdx+" "+curCamAlias
var camWrapper = document.createElement("div")
if(!this.config.showOneBig || (curOrderIdx !== this.curBigIdx)){
var camWrapper = document.createElement("div")
camWrapper.className = "camWrapper "+curDsIdx+"_"+curCamIdx+" "+curCamAlias
if(this.config.showOneBig){
camWrapper.addEventListener("click", ()=>{self.sendSocketNotification("SYNO_SS_CHANGE_CAM", {id: curOrderIdx})})
}

if(this.config.showCamName){
var camNameWrapper = document.createElement("span")
var camNameWrapper = document.createElement("div")
camNameWrapper.className = "name"
camNameWrapper.innerHTML = curCamAlias + "<br>"
camNameWrapper.innerHTML = curCamAlias
camWrapper.appendChild(camNameWrapper)
}

var cam = document.createElement("img")
var camClass = "cam "+curDsIdx+"_"+curCamIdx+" "+curCamAlias
var innerCamWrapper = document.createElement("div")
var innerCamWrapperClassName = "innerCamWrapper"
if((typeof this.dsStreamInfo[curDsIdx] !== "undefined") &&
(typeof this.dsStreamInfo[curDsIdx][curCamName] !== "undefined")
(typeof this.dsStreamInfo[curDsIdx][curCamName] !== "undefined")
){
cam.src = this.dsStreamInfo[curDsIdx][curCamName]
var cam = document.createElement("img")
cam.className = "cam"
cam.src = this.dsStreamInfo[curDsIdx][curCamName]
} else {
cam.src = this.config.missingIconUrl
camClass += " nourl"
var cam = document.createElement("i")
cam.className = "cam nourl fa "+this.config.noUrlIcon
innerCamWrapperClassName += " nourl"
}
cam.className = camClass
camWrapper.appendChild(cam)
curCell.appendChild(camWrapper)
curRow.appendChild(curCell)
innerCamWrapper.className = innerCamWrapperClassName
innerCamWrapper.appendChild(cam)
camWrapper.appendChild(innerCamWrapper)
wrapper.appendChild(camWrapper)
} else {
if(this.config.addBigToNormal){
var curCell = document.createElement("td")
curCell.className = "cell "+curDsIdx+"_"+curCamIdx+" "+curCamAlias
var camWrapper = document.createElement("div")
camWrapper.className = "camWrapper currentBig "+curDsIdx+"_"+curCamIdx+" "+curCamAlias
var iconWrapper = document.createElement("span")
iconWrapper.className = "iconWrapper"
if(this.config.vertical && this.config.addBigToNormal){
var camWrapper = document.createElement("div")
camWrapper.className = "camWrapper currentBig "+curDsIdx+"_"+curCamIdx+" "+curCamAlias

if(this.config.showCamName){
var camNameWrapper = document.createElement("div")
camNameWrapper.className = "name"
camNameWrapper.innerHTML = curCamAlias
camWrapper.appendChild(camNameWrapper)
}

var innerCamWrapper = document.createElement("div")
innerCamWrapper.className = "innerCamWrapper currentBig"
var icon = document.createElement("i")
icon.className = "far fa-hand-point-up"
iconWrapper.appendChild(icon)
camWrapper.appendChild(iconWrapper)
curCell.appendChild(camWrapper)
curRow.appendChild(curCell)
} else {
skippedCams += 1
icon.className = "cam currentBig far "+this.config.currentBigIcon
innerCamWrapper.appendChild(icon)
camWrapper.appendChild(innerCamWrapper)
wrapper.appendChild(camWrapper)
} else if(!this.config.vertical){
var camWrapper = document.createElement("div")
camWrapper.className = "camWrapper big "+curDsIdx+"_"+curCamIdx+" "+curCamAlias
if(this.config.showBigCamName){
var camNameWrapper = document.createElement("div")
camNameWrapper.className = "name"
camNameWrapper.innerHTML = curCamAlias + "<br>"
camWrapper.appendChild(camNameWrapper)
}

var innerCamWrapper = document.createElement("div")
var innerCamWrapperClassName = "innerCamWrapper big"
if((typeof this.dsStreamInfo[curDsIdx] !== "undefined") &&
(typeof this.dsStreamInfo[curDsIdx][curCamName] !== "undefined")
){
var cam = document.createElement("img")
cam.className = "cam"
cam.src = this.dsStreamInfo[curDsIdx][curCamName]
} else {
var cam = document.createElement("i")
cam.className = "cam nourl fa "+this.config.noUrlIcon
innerCamWrapperClassName += " nourl"
}
innerCamWrapper.className = innerCamWrapperClassName
innerCamWrapper.appendChild(cam)
camWrapper.appendChild(innerCamWrapper)
wrapper.appendChild(camWrapper)
}
}
} else {
skippedCams += 1
}
} else {
skippedCams += 1
}
}

Expand Down
13 changes: 10 additions & 3 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,15 @@ The urls of the cams will be refreshed preiodically.

Attention: The "mpjeg" streams provide worse quality than the rtsp streams but displaying the rtsp streams is much more and needs some extra tools installed on the pi. If you search for an rtsp module try: https://github.com/shbatm/MMM-RTSPStream.

Because the module uses Flexbox Layout instead of Tables there is a lot of css styling possiblity.

## Screenshots ##
![alt text](https://github.com/Tom-Hirschberger/MMM-SynologySurveillance/raw/master/examples/withBigAndUnreachable.png "Reachable, unreachable and big view of cams")
### Horizontal Layout ###
![alt text](https://github.com/Tom-Hirschberger/MMM-SynologySurveillance/raw/master/examples/screenshot-horizontal.png "Horizontal Layout")

### Vertical Layout ###
![alt text](https://github.com/Tom-Hirschberger/MMM-SynologySurveillance/raw/master/examples/screenshot-horizontal.png "Horizontal Layout")


## Installation
cd ~/MagicMirror/modules
Expand All @@ -26,12 +33,12 @@ Attention: The "mpjeg" streams provide worse quality than the rtsp streams but d
module: "MMM-SynologySurveillance",
position: "top_bar",
config: {
columns: 2,
showOneBig: true,
addBigToNormal: false,
showCamName: false,
showBigCamName: false,
showUnreachableCams: true,
vertical: true,
ds: [
{
protocol: "https",
Expand All @@ -55,7 +62,7 @@ Attention: The "mpjeg" streams provide worse quality than the rtsp streams but d
| Option | Description | Type | Default |
| ------- | --- | --- | --- |
| ds | The array containing the information about the discstations and cams | Array | [] |
| columns | How many columns should be used to arange the small views of the cams | Integer | 2 |
| vertical | Should the vertical or horizontal layout be used? | Boolean | true |
| showOneBig | If this option is true an extra big view of the first cam is displayed at the beginning | Boolean | true |
| addBigToNormal | If this option is true an icon will be displayed in the small views while the cam is visible in the big view | Boolean | false |
| showBigCamName | Should the name of the cam that is displayed in the big view added to the big view | Boolean | false |
Expand Down
Binary file added examples/screenshot-horizontal.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added examples/screenshot-vertical.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion node_helper.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,7 +103,7 @@ module.exports = NodeHelper.create({
self.started = true
} else if (notification === "INIT_DS"){
self.getStreamUrls()
} else if (notification === "REFRESH_URLS"){
} else if ((notification === "REFRESH_URLS") && self.started){
console.log(this.name + ': Refreshing the urls!')
self.getStreamUrls()
} else if (notification === "SYNO_SS_CHANGE_CAM"){
Expand Down
67 changes: 0 additions & 67 deletions synology-surveillance.css
View file

This file was deleted.

Loading

0 comments on commit 5481e38

Please sign in to comment.