Domoticz

Code: Select all

git clone https://github.com/Dashticz/dashticz

Code: Select all

git checkout beta

Code: Select all

from flask import Flask, render_template, request
import requests
import json
import logging

app = Flask(__name__, static_folder='static')
app.logger.setLevel(logging.DEBUG)

rooms = ['keuken', 'woonkamer', 'veranda']  # List of rooms

@app.route('/')
def home():
    states = {}
    for room in rooms:
        response = requests.get(f'http://192.168.2.11:5005/{room}/state') # url from sonos api https://github.com/chrisns/docker-node-sonos-http-api
        if response.status_code == 200:
            state = json.loads(response.text)
            states[room] = state
        else:
            print(f"Couldn't fetch state for room: {room}")
    return render_template('index.html', states=states)  # Assuming you have a template called index.html

@app.route('/<zone>/<action>', methods=['POST'])
def handle_button(zone, action):
    print(f'Button clicked - Zone: {zone}, Action: {action}')
    url = f'http://192.168.2.11:5005/{zone}/{action}' # url from sonos api https://github.com/chrisns/docker-node-sonos-http-api
    response = requests.post(url)
    if response.ok:
        return "Button action performed"
    else:
        return "Error: Button action failed", 500

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=5000, debug=True)

Code: Select all

# Use the official Python base image with the desired version
FROM python:3.8-slim

# Set the working directory inside the container
WORKDIR /app

# Copy the requirements file and install the dependencies
COPY requirements.txt .
RUN pip install --no-cache-dir -r requirements.txt

# Copy the rest of the application code
COPY . .

# Expose the port your Flask app is listening on
EXPOSE 5000

# Define the command to run your Flask app when the container starts
CMD ["python", "sonos-flask.py"]

Code: Select all

flask
requests

Code: Select all

@import url('https://fonts.googleapis.com/css2?family=Bad+Script&display=swap');

body {
    background-color: rgba(18, 18, 18, 0.1); /* Set the background color with transparency */
    color: #ffffff;
    font-family: Arial, sans-serif;
    max-width: 700px; /* Set maximum width to 800px */
    margin: 0 auto; /* Center the body horizontally */
}

#currentValue{
	margin-top: 5px;
	font-size: 20px;
    color: #1DB954;
}

.container {
    width: 100%;
    padding-top: 10px;
	margin-bottom: -25;
}



img#album-art {
    width: 220px;
    margin-top: 15px;
    position: absolute;
    border-radius: 20px; /* Set the border-radius to create rounded edges */
    top: 0;
    left: 0;
}

#time-remaining {
	display: flex;
    margin-left: 240px;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-start;
    justify-content: flex-start;
}

.music-button {
    padding: 0;
    width: 50px;
    border-radius: 25%;
    background-color: transparent;
    border: none;
    cursor: pointer;

}

.music-button img {
    width: 100%;
    height: 100%;
}

h1, h2 {
    color: #1DB954;
    display: flex;
	margin-top: 10px;
	margin-bottom: -20px;
    margin-left: 240px;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-start;
    justify-content: flex-start;
}

#current-artist-song {
	font-family: 'Bad Script', cursive;
    font-size: 24px;
	margin-bottom: -25px;
	padding: 0 5px;
	Display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
	animation: scrollText 12s linear infinite;
}

@keyframes scrollText {
  0% {
    transform: translateX(750px);
  }
  100% {
    transform: translateX(240px);
  }
}

.larger-select option { 
	background-color: #333;
}

.larger-select {
    font-size: 18px;
	color: white;
    width: 100px;
    height: 50px;
#	margin-left: 42px;
	background-color: transparent;
	border-radius: 5%;
}

.favorieten option { 
	background-color: #333;
}

.favorieten {
    font-size: 18px;
color: white;
    width: 170px;
    height: 50px;
#	margin-left: 42px;
	background-color: rgba(18, 18, 18, 0.1);
	border-radius: 5%;
}

.controls {
    display: flex;
    margin-left: 240px;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-start;
    justify-content: flex-start;
}

.music-button:hover {
    background-color: #e0e0e0;
}

.volume-slider {
    -webkit-appearance: none;
    width: 80%;
    height: 10px;
    margin-top: 10px;
    border-radius: 5px;
	margin-left: 0px;
    background-color: #f2f2f2;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

.volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #1DB954;
    cursor: pointer;
}

Code: Select all

<!DOCTYPE html>
<html>
<head>
    <title>Sonos State</title>
    </style>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">  
</head>
<body>
    <div class="container">
        <div id="current-track-info">
            <h2 id="current-zone">Sonos - Now Playing</h2>
            <p id="current-artist-song">
               <span id="current-artist">-</span> &nbsp;-&nbsp; <span id="current-song"></span>
				<p id="time-remaining"></p>
            </p>			
        </div>
        <img id="album-art" src="" alt="Album Art">
    </div>
    <div class="controls">
		<button id="previous" class="music-button"><img src="/static/img/previous.png" alt="Previous"></button>
		<button id="pause" class="music-button"><img src="/static/img/pause.png" alt="Pause"></button>
        <button id="play" class="music-button"><img src="/static/img/play.png" alt="Play"></button>
        <button id="next" class="music-button"><img src="/static/img/next.png" alt="Next"></button>
        <!-- Buttons and volume slider -->
        <select id="zone-select" class="larger-select">
            <option value="keuken">Keuken</option>
            <option value="woonkamer">Woonkamer</option>
            <option value="veranda">Veranda</option>
        </select>
        <select id="favorite-select" class="favorieten">
			<option value="">select playlist</option>
            <option value="favorite/Happy_Tunes">Happy Tunes</option>
            <option value="favorite/Liever_Hollands">Liever Hollands</option>
			<option value="favorite/Koffiehuis">Koffiehuis</option>
			<option value="favorite/foute_1500">de foute 1500</option>
			<option value="favorite/Q-Music">Q-music</option>
			<option value="favorite/radioNL">Radio NL</option>
			<option value="favorite/100_procent_nl">100% NL</option>
			<option value="favorite/Joy_Radio">Joy Radio</option>
        </select>
        <input type="range" id="volume-slider" class="volume-slider" min="0" max="100" step="1"><p id="currentValue"></p>
    </div>
    
    <script>
        // Function to handle the action for all buttons
        function handleButtonClick(url) {
            // Send a GET request to the specified URL
            fetch(url)
              .then(function(response) {
                // Handle the response if needed
              })
              .catch(function(error) {
                // Handle any errors that occurred during the request
                console.error('Error:', error);
              });
        }
    
        // Get the zone-select element by its id
        var zoneSelect = document.getElementById("zone-select");
    
        // Get all the buttons by their respective ids
        var playButton = document.getElementById("play");
        var pauseButton = document.getElementById("pause");
        var previousButton = document.getElementById("previous");
        var nextButton = document.getElementById("next");
		var musicControls = document.querySelector(".music-controls");
		
			// Hide the pause button initially
			pauseButton.style.display = "none";
    
        // Add click event listeners to the buttons
        playButton.addEventListener("click", function() {
            var selectedValue = zoneSelect.value; // Get the selected value
            var url = "http://192.168.2.11:5005/" + selectedValue + "/play";
            handleButtonClick(url);
						// Toggle visibility of pause and play buttons
			pauseButton.style.display = "inline";
			playButton.style.display = "none";

			// Adjust the positioning of the music controls container
			musicControls.style.left = "50%";
        });
    
        pauseButton.addEventListener("click", function() {
            var selectedValue = zoneSelect.value; // Get the selected value
            var url = "http://192.168.2.11:5005/" + selectedValue + "/pause";
            handleButtonClick(url);
			
			// Toggle visibility of pause and play buttons
			pauseButton.style.display = "none";
			playButton.style.display = "inline";

			// Adjust the positioning of the music controls container
			musicControls.style.left = "50%";
        });
    
        previousButton.addEventListener("click", function() {
            var selectedValue = zoneSelect.value; // Get the selected value
            var url = "http://192.168.2.11:5005/" + selectedValue + "/previous";
            handleButtonClick(url);
        });
    
        nextButton.addEventListener("click", function() {
            var selectedValue = zoneSelect.value; // Get the selected value
            var url = "http://192.168.2.11:5005/" + selectedValue + "/next";
            handleButtonClick(url);
        });
        
        // favorite selector
        var favoriteSelect = document.getElementById("favorite-select");
        
        // Add change event listener to the favorite-select
        favoriteSelect.addEventListener("change", function() {
            var selectedValue = favoriteSelect.value; // Get the selected value
            var zoneValue = zoneSelect.value; // Get the selected zone
            var url = base_url + zoneValue + "/" + selectedValue;
            handleButtonClick(url);
        });
		
        // Function to update the volume slider value
        function updateVolumeSlider(volume) {
            var volumeSlider = document.getElementById("volume-slider");
            volumeSlider.value = volume;
            var currentValue = document.getElementById("currentValue");
            currentValue.textContent = "vol: " + volume;
        }
        
        // Function to handle the volume slider change event
        function handleVolumeChange() {
            var selectedValue = zoneSelect.value; // Get the selected value
            var volumeSlider = document.getElementById("volume-slider");
            var volume = volumeSlider.value;
            var url = "http://192.168.2.11:5005/" + selectedValue + "/volume/" + volume;
            handleButtonClick(url);
        }
    
        // Add change event listener to the volume slider
        var volumeSlider = document.getElementById("volume-slider");
        volumeSlider.addEventListener("change", handleVolumeChange);
    
			var base_url = 'http://192.168.2.11:5005/';
			var selectedZone = localStorage.getItem('selectedZone') || document.getElementById('zone-select').value;
			var oldState = null;

			if (localStorage.getItem('selectedZone')) {
				zoneSelect.value = localStorage.getItem('selectedZone');
				var selectedOption = document.getElementById("zone-select");
				var currentZone = selectedOption.options[selectedOption.selectedIndex].text;
				document.getElementById("current-zone").textContent = "Sonos " + currentZone + " - Now Playing";
			}
    
        async function getState(zone) {
            var url = base_url + zone + '/state';
            let response = await fetch(url);
            if (!response.ok) {
                throw new Error('HTTP error ' + response.status);
            }
            let data = await response.json();
            return data;
        }
    
        function formatTime(seconds) {
            var minutes = Math.floor(seconds / 60);
            var remainingSeconds = seconds % 60;
            return minutes.toString().padStart(2, '0') + ':' + remainingSeconds.toString().padStart(2, '0');
        }
		
		function updateAlbumArt(albumArtUri) {
			var albumArtImg = document.getElementById("album-art");
			if (albumArtUri) {
				albumArtImg.src = albumArtUri;
          } else {
            albumArtImg.src = "/static/img/default_album_art.png";
          }
        }
    
        async function updateState() {
            var newState = await getState(selectedZone);
            if (oldState === null || JSON.stringify(newState) !== JSON.stringify(oldState)) {
                // The state has changed, update the webpage
                document.getElementById('current-song').textContent = newState['currentTrack']['title'];
                document.getElementById('current-artist').textContent = newState['currentTrack']['artist'];

				// Update the album art
				updateAlbumArt(newState['currentTrack']['absoluteAlbumArtUri']);

    
                var elapsedTime = newState['elapsedTime'];
                var trackDuration = newState['currentTrack']['duration'];
                var remainingTime = trackDuration - elapsedTime;
    
                document.getElementById('time-remaining').textContent = formatTime(remainingTime);
    
                oldState = newState;
                
                // Update volume slider value
                updateVolumeSlider(newState['volume']);
                
                // Update the current zone dynamically based on the selected option
                var selectedOption = document.getElementById("zone-select");
                var currentZone = selectedOption.options[selectedOption.selectedIndex].text;
                document.getElementById("current-zone").textContent = "Sonos " + currentZone + " - Now Playing";
            }
        }
    
        // Update the current zone dynamically based on the selected option
        document.getElementById("zone-select").addEventListener("change", function() {
            var selectedOption = document.getElementById("zone-select");
            var currentZone = selectedOption.options[selectedOption.selectedIndex].text;
            document.getElementById("current-zone").textContent = "Sonos " + currentZone + " - Now Playing";
            selectedZone = selectedOption.value; // Update the selected zone
            oldState = null; // Reset old state to force update on zone change
            localStorage.setItem('selectedZone', selectedZone); // Save the selected zone to local storage
            updateState(); // Update the state immediately after zone change
        });
    
        // Initial state update
        updateState();
    
        // Regular state updates every 1 second
        setInterval(updateState, 1000);
    </script>
</body>
</html>

Code: Select all

import json
import requests
import subprocess

# Instellingen voor het script
NORMAL_DISTANCE = 77.4  # Normale routeafstand in kilometers
DOMOTICZ_IP = "192.168.1.55"  # Vervang dit door jouw Domoticz IP-adres
DOMOTICZ_IDX = 5098  # IDX van jouw Domoticz device

# Google Maps API: Vul je eigen API-sleutel hieronder in
API_KEY = "YOUR_API_KEY"  # <-- Vervang dit door je eigen API-sleutel!

# Voer de curl-opdracht uit om de routegegevens op te halen
curl_command = (
    "curl -s 'https://maps.googleapis.com/maps/api/directions/json?"
    "origin=Stationsplein+1,+Amsterdam&destination=Stationsplein+1,+Rotterdam"
    f"&key={API_KEY}&language=nl&departure_time=now' -o route_data.json"
)

# Voer de curl-opdracht uit
subprocess.run(curl_command, shell=True)

# Laad de JSON-gegevens uit het bestand
try:
    with open("route_data.json", "r") as f:
        data = json.load(f)
except FileNotFoundError:
    print("Fout: route_data.json niet gevonden. Controleer de API-aanroep.")
    exit()

# Controleer of er een route beschikbaar is
if "routes" in data and len(data["routes"]) > 0:
    # Haal de eerste route op
    route = data["routes"][0]
    leg = route["legs"][0]

    # Haal routegegevens op
    distance_text = leg["distance"]["text"]
    distance = float(distance_text.replace(",", ".").split()[0])
    duration_traffic_text = leg["duration_in_traffic"]["text"]
    duration_traffic = int(duration_traffic_text.split()[0])

    # Controleer of het een afwijkende route is
    if abs(distance - NORMAL_DISTANCE) > 0.05:  # Drempel 50 meter
        route_type = "AFWIJKENDE ROUTE!!"
    else:
        route_type = "Normale route"

    # Verkeersstatus op basis van reistijd
    if duration_traffic < 26:
        traffic_status = "rustig verkeer"
    elif 26 <= duration_traffic < 30:
        traffic_status = "drukte op de weg"
    elif 30 <= duration_traffic < 40:
        traffic_status = "Vertraging!"
    else:
        traffic_status = "Extreme vertraging!!"

    # Bericht opstellen
    message = (
        f"{route_type}, {traffic_status}, {duration_traffic} minuten "
        f"({distance_text})."
    )

    # Update Domoticz met de route-informatie
    url = (
        f"http://{DOMOTICZ_IP}:8080/json.htm?"
        f"type=command&param=udevice&idx={DOMOTICZ_IDX}&svalue={message}"
    )
    try:
        response = requests.get(url)
        if response.status_code == 200:
            print("Succesvol bijgewerkt in Domoticz.")
        else:
            print(f"Fout bij het bijwerken van Domoticz: {response.status_code}")
    except Exception as e:
        print(f"Fout bij het bijwerken van Domoticz: {e}")

    # Herlaad het device in Domoticz
    reload_url = f"http://{DOMOTICZ_IP}:8080/json.htm?type=command&param=refreshdevice&idx={DOMOTICZ_IDX}"
    try:
        response = requests.get(reload_url)
        if response.status_code == 200:
            print("Device succesvol herladen in Domoticz.")
        else:
            print(f"Fout bij het herladen van het device in Domoticz: {response.status_code}")
    except Exception as e:
        print(f"Fout bij het herladen van het device in Domoticz: {e}")

else:
    print("Geen routes gevonden in de JSON-gegevens. Controleer je API-aanroep.")

Code: Select all

blocks['routeAR'] = {
  type: 'text',             // Geeft tekstuele gegevens weer
  title: 'Van Amsterdam naar Rotterdam :)',   // Titel van het block
  refresh: 60,              // Update elke 60 seconden
  idx: 5098,                // De IDX van Domoticz waar je routegegevens staan
  icon: 'fas fa-car',       // Pictogram (optioneel, afhankelijk van Dashticz-versie)
  width:12,
};

Code: Select all

/* Kleuren voor de icoontjes afhankelijk van de reistijd */
.warninggreen {
  color: green !important;
}

.warningorangefloor {
  color: #ff6d00 !important;
}

.warningred {
  color: red !important;
}

.warningrozefloor {
  color: #f7088a !important;
}

.warninggrey {
  color: grey !important;
}

Code: Select all

$(document).ready(function() {
    setInterval(function() {
        var routeData = alldevices['5098']?.Data || '';

        if (!routeData || routeData === "") {
            console.log('Geen data beschikbaar, icoon blijft ongewijzigd.');
            return; // Stop de verdere uitvoering
        }

        console.log('Routegegevens: ' + routeData);

        // Zoek naar de reistijd in minuten
        var match = routeData.match(/(\d+)\s*minuten/);
        var duration_in_traffic = match ? parseInt(match[1]) : null;

        var iconColorClass = 'warninggrey'; // Fallback naar grijs

        if (duration_in_traffic !== null) {
            if (duration_in_traffic < 26) {
                iconColorClass = 'warninggreen'; // Snel
            } else if (duration_in_traffic < 30) {
                iconColorClass = 'warningorangefloor'; // Lichte vertraging
            } else if (duration_in_traffic < 40) {
                iconColorClass = 'warningred'; // Matige vertraging
            } else {
                iconColorClass = 'warningrozefloor'; // Zware vertraging
            }
        }

        // Selecteer het icoon en pas de kleurklasse toe
        var $icon = $('.block_routeAT em:first');
        if ($icon.length === 0) {
            console.error('Icoon niet gevonden in DOM.');
            return;
        }

        // Verwijder oude kleurklassen en voeg de nieuwe kleurklasse toe
        $icon.removeClass('warninggreen warningorangefloor warningred warningrozefloor warninggrey')
             .addClass(iconColorClass);

    }, 3000); // Iets kortere interval (3 seconden)
});

Code: Select all

var config = {}
config['language'] = 'nl_NL'; //or: en_US, de_DE, fr_FR, hu_HU, it_IT, pt_PT, sv_SV
config['domoticz_ip'] = 'http://[IP-adres]:[poort]';
config['domoticz_refresh'] = '5';
config['dashticz_refresh'] = '60';
config['user_name'] = 'username';
config['pass_word'] = 'password';
config['loginEnabled'] = 'false';
config['login_timeout'] = '0';
config['enable_websocket'] = 'true';
config['domoticz_timeout'] = '2000';
config['default_news_url'] = 'https://www.volkskrant.nl/voorpagina/rss.xml';
config['news_scroll_after'] = '10';
config['standby_after'] = '15';
config['start_page'] = '1';
config['vertical_scroll'] = '1';
config['enable_swiper'] = '2';
config['swiper_touch_move'] = '1';
config['auto_swipe_back_to'] = '1';
config['auto_swipe_back_after'] = '180';
config['auto_slide_pages'] = '0';
config['slide_effect'] = 'slide';
config['standard_graph'] = 'day';
config['security_panel_lock'] = '0';
config['language'] = 'nl_NL';
config['timeformat'] = 'DD-MM-YY HH:mm';
config['boss_stationclock'] = 'ViennaBoss';
config['gm_api'] = 'Google Maps API key';
config['gm_latitude'] = 'latitude';
config['gm_longitude'] = 'longitude';
config['static_weather_icons'] = 'false';
config['use_beaufort'] = 'true';
config['use_fahenheit'] = '0';
config['translate_windspeed'] = '1';
config['selector_instead_of_buttons'] = '0';
config['auto_positioning'] = '1';
config['use_favorites'] = '0';
config['use_hidden'] = '0';
config['use_cors'] = '0';
config['last_update'] = '1';
config['hide_topbar'] = '1';
config['hide_seconds'] = '0';
config['hide_seconds_stationclock'] = '1';
config['hide_mediaplayer'] = '1';
config['selector_instead_of_buttons'] = '1';
config['settings_icons'] = 'settings';
config['shortdate'] = 'D MMM';
config['longdate'] = 'D MMMM YYYY';
config['shorttime'] = 'HH:mm';
config['longtime'] = 'HH:mm:ss';
config['weekday'] = 'dddd';
config['no_rgb'] = '0';
config['colorpicker'] = '0';
config['standby_call_url'] = '';
config['standby_call_url_on_end'] = '';
config['hide_off_button'] = '0';
config['speak_lang'] = 'nl_NL';
config['use_favorites'] = 0; //Request all Domoticz Devices, not only favorites
config['auto_positioning'] = 0; // Use 0 if you have defined your own columns
config['garbage_icalurl'] = 'https://wasteapi2.ximmio.com/api/CallIcal?cn=Meerlanden&x=800bf8d7-6dd1-4490-ba9d-b419d6dc8a45&ty=Diemen&ua=3000099563&sd=2024-12-21&ed=2028-01-09&path=https://wasteapi2.ximmio.com&ln=nl&nt=7';
config['garbage'] = {
	rest: {kliko: 'grey', code: '#5e5d5c', name: 'Restafval', icon: 'img/garbage/kliko_grey.png'},
	gft: {kliko: 'green', code: '#2B660A', name: 'GFT', icon: 'img/garbage/kliko_green.png'},
	pmd: {kliko: 'orange', code: '#db5518', name: 'Plastic', icon: 'img/garbage/kliko_orange.png'},
	papier: {kliko: 'blue', code: '#153477', name: 'Papier', icon: 'img/garbage/kliko_blue.png'},
	kca: {kliko: 'red', code: '#b21807', name: 'Chemisch afval', icon: 'img/garbage/kliko_red.png'},
	brown: {kliko: 'brown', code: '7c3607', name: 'Bruin', icon: 'img/garbage/kliko_brown.png'},
	black: {kliko: 'black', code: '#000000', name: 'Zwart', icon: 'img/garbage/kliko_black.png'},
	milieu: {kliko: 'yellow', code: '#f9e231', name: 'Geel', icon: 'img/garbage/kliko_yellow.png'},
	kerstboom: {kliko: 'green', code: '#375b23', name: 'Kerstboom', icon: 'img/garbage/tree.png'},
}

var frames = {}

frames.foksuk = {
	frameurl: "/img/FokSuk.htm",
	refresh: 10000,
	height: 210,
	scrollbars: false,
	width: 6
}

frames.sigmund = {
	frameurl: "/img/Sigmund.html",
	refresh: 10000,
	height: 195,
	scrollbars: false,
	width: 12
}

frames.volumegraph = {
	frameurl: "/img/graph.htm",
	height: 215,
	scrollbars: false,
	width: 4
}

frames.volumegraphsun = {
	frameurl: "img/sungraph.htm",
	height: 215,
	scrollbars: false,
	width: 4
}

frames.warmtepomp = {
	frameurl: "img/warmtepomp.htm",
	height: 215,
	scrollbars: false,
	width: 4
}

frames.flightradar = {
	frameurl: "img/flightradar.htm",
	width: 12,
	height: 340,
	scrollbars: false,
	forcerefresh: 1
}

frames.iss = {
	frameurl: "img/ISS.htm",
	width: 7,
	height: 336,
	scrollbar: false
}

frames.airquality = {
	frameurl: "img/AirQuality.htm",
	refresh: 5000,
	height: 71,
	scrollbars: false,
	width: 6
}

frames.pollen = {
	frameurl: "img/Pollen.htm",
	refresh: 5000,
	height: 160,
	scrollbars: false,
	width: 12
}

frames.liander = {
	frameurl: "img/Liander.htm",
	refresh: 5000,
	height: 92,
	scrollbars: false,
	width: 12
}

//definition of blocks


blocks['empty'] = {
    	title:'',
    	width: 12
}
blocks['empty2'] = {
    	title:'',
    	width: 1
}

blocks['traffic'] = {
	show_lastupdate: false,
	icon: 'fas fa-car-burst',
	width: 12
}
blocks['train'] = {
	width: 12
}
blocks['sunrise'] = {
	width: 6
}
blocks['buien'] = {
	frameurl: '/img/buienradar.htm',
	scrollbars: false,
	aspectratio: 1,
	scaletofit: 256,
	width: 6,
}
blocks['weer'] = {
	type: 'weather',
	provider: 'knmi',
	apikey: 'api-key',
	city: 'City',
	layout: 4,
	refresh: 900,
	icon: 'meteo',
	monochrome: false,
	useBeaufort: true,
	width: 6,
	count: 3
}
blocks['news'] = {
	title: 'Nieuws',
	icon: 'fas fa-newspaper',
	newwindow: 5,
	filter: '3 days',
	maxheight: '150',
	width: 12
}
blocks['news_NASA'] = {
	title: 'NASA Image of the Day',
	feed: 'https://www.nasa.gov/feeds/iotd-feed/',
	icon: 'fas fa-newspaper',
	newwindow: 5,
	filter: '3 days',
	maxheight: '175',
	width: 12
}
blocks['ovapi_1'] = {
	tpc: '30009542',
	title:'Metro 53 Diemen-Zuid',
	show_lastupdate: true,
	provider: 'ovapi',
	show_via: true,
	show_direction: true,
	url: 'https://reisinfo.gvb.nl/nl/lijnen/53',
	icon: 'fas fa-subway',
	interval: '120',
	newwindow: '1',
	url: 'https://reisinfo.gvb.nl/reisinformatie/lijn/GVB/53',
	results: 7,
	width: 4
}
blocks['ovapi_2'] = {
	tpc: '30000998',
	title:'Bushalte  Vinkenbrug',
	show_lastupdate: true,
	provider: 'ovapi',
	show_via: true,
	url: 'https://reisinfo.gvb.nl/nl/lijnen/66',
	icon: 'fas fa-bus',
	interval: '120',
	newwindow: '1',
	url: 'https://9292.nl/diemen/bushalte-vinkenbrug',
	results: 8,
	width: 6
}
blocks['ovapi_3'] = {
	tpc: '30000453',
	title:'Tram 19 Diemen-Sniep',
	show_lastupdate: true,
	provider: 'ovapi',
	show_via: true,
	url: 'https://reisinfo.gvb.nl/nl/lijnen/19',
	icon: 'fas fa-train-tram',
	interval: '120',
	newwindow: '1',
	url: 'https://reisinfo.gvb.nl/reisinformatie/lijn/GVB/19',
	results: 10,
	width: 6
}
blocks['mygarbage'] = {
	company: 'meerlanden',
	icon: 'fas fa-trash-alt',
	zipcode: '1112WS',
	street: 'street',
	housenumber: nbr,
	maxitems: 4,
	maxdays: 14,
	hideicon: false,
	use_names: true,
	use_colors: false,
	icon_use_colors: true,
	title: 'Afvalkalender',
	layout: '1',
	width: 12
}
blocks['my_calendar'] = {
	type: 'calendar',
	maxitems: 10,
	layout: 1,
	url: 'https://calendar.url.html',
	icalurl: 'https://calendar/calendar.ics',
	lastweek: false,
	isoweek: true,
	emptytext: 'Geen afspraken',
	title: 'Agenda',
	method: '2',
	startonly: true,
	scaletofit: 256,
	width: 6
}
blocks['mymap'] =  {
	type: 'map',
	latitude: latitude,
	longitude: longitude,
	zoom: 11,
	width: 12,
	height: 340,
	showtraffic: true,
	showUI: false,
	showrefresh: false
}
blocks['moon'] = {
	width: 12
}
blocks['graph_1'] = {
	devices: [1],
	title: 'Elektra',
	height: 280,
	width: 12, 
	graph: ['line', 'bar', 'bar'],
	ylabels: ['kWh'],
	custom: {
		"Vandaag": {
			range: 'day',
			filter: '24 hours',
			data: {
				netto: 'd.v1_1+d.v2_1-d.r1_1-d.r2_1',
				verbruik: 'd.v1_1+d.v2_1',
				teruglevering: '-d.r1_1-d.r2_1'
			}
		},
		"Maand": {
			range: 'month',
			filter: '30 days',
			data: {
				netto: 'd.v1_1+d.v2_1-d.r1_1-d.r2_1',
				verbruik: 'd.v1_1+d.v2_1',
				teruglevering: '-d.r1_1-d.r2_1'
			}
		},
		"Jaar": {
			range: 'year',
			filter: '365 days',
			data: {
				netto: 'd.v1_1+d.v2_1-d.r1_1-d.r2_1',
				verbruik: 'd.v1_1+d.v2_1',
				teruglevering: '-d.r1_1-d.r2_1'
			}
		}
	},
	legend: true,
	datasetColors: ['white', '#0096FF', '#FFEA00']
}
blocks['graph_95'] = {
	devices: [95],
	title: 'Warmtepomp',
	graph: 'line',
	height: 280,
	width: 12,
	graph: ['line'],
	custom: {
		"Vandaag": {
			range: 'day',
			filter: '24 hours',
			data: {
				netto: 'd.v1_95+d.v2_95',
				verbruik: 'd.v1_95+d.v2_95',
			}
		},
		"Maand": {
			range: 'month',
			filter: '30 days',
			data: {
				netto: 'd.v1_95+d.v2_95',
				verbruik: 'd.v1_95+d.v2_95',
			}
		},
		"Jaar": {
			range: 'year',
			filter: '365 days',
			data: {
				netto: 'd.v1_11+d.v2_11',
				verbruik: 'd.v1_95+d.v2951',
			}
		}
	},
	legend: true,
	datasetColors: ['white', '#0096FF']
}
blocks['zonnepanelen'] = {
	devices: [12],
	title: 'Zonnepanelen',
	graph: 'line',
	height: 280,
	width: 12,
	datasetColors: ['yellow'],
	legend: true,
	custom: {
		"Vandaag": {
			range: 'day',
			filter: '12 hours',
			data: {
				Opbrengst: 'd.v_12'	}
			},

		"Maand": {
			range: 'month',
			filter: '30 days',
			data: {
				Opbrengst: 'd.v_12'	}
			},

		"Jaar": {
			range: 'year',
			filter: '365 days',
			data: {
				Opbrengst: 'd.v_12'	}
			}

		}
}
blocks['graph_15'] = {
	devices: [15],
	title: 'Water',
	graph: 'line',
	width: 12,
	height: 280,
	datasetColors: ['#0096FF'],
	legend: true,
	custom: {
		"Vandaag": {
			range: 'day',
			filter: '12 hours',
			data: {
				Waterverbruik: 'd.v_15/10'	}
			},

		"Maand": {
			range: 'month',
			filter: '30 days',
			data: {
				Waterverbruik: 'd.v_15/10'	}
			},

		"Jaar": {
			range: 'year',
			filter: '365 days',
			data: {
				Waterverbruik: 'd.v_15/10'	}
			}
		}
}
blocks['waterverbruik_dial'] = {
	type: 'dial',
	idx: 14,
	title: 'Waterverbruik',
	showvalue: true,
	animation: true,
	showring: true,
	shownumbers: true,
	min: 0,
	max: 3000,
	last_update: false,
	color: 'fff',
	width: 10
}
blocks[28] = {
	devices: [28],
	icon: 'fas fa-sun',
	width: 12
}
blocks[43] = {
	devices: [43],
	icon: 'fas fa-euro-sign',
	width: 12
}
blocks[75] = {
	devices: [75],
	icon: 'fas fa-cloud-sun',
	last_update: false,
	width: 12
}
blocks['tijd-volgende-bui'] = {
	idx: 31,
	icon: 'fas fa-cloud-rain',
	width: 12
}
blocks['p1_dial'] = {
	type: 'dial',
	subtype: 'usage',
	idx: 73,
		values: [
    			{
      			value: 'Data0',
      			unit: 'kWh',
      			label: 't1',
      			scale: 0.001
    			},
    			{
      			value: 'Data1',
      			unit: 'kWh',
      			label: 't2',
      			scale: 0.001
    			},
			],
	dialicon: 'fas fa-plug-circle-bolt',
	showvalue: true,
	animation: true,
	showring: true,
	shownumbers: true,
	min: 0,
	max: 6000,
	last_update: false,
	color: '#fff',
	width: 5
}
blocks['power-failures_dial'] = {
	idx: 61,
	type: 'dial',
	showring: true,
	color: '#fff',
	width: 3
}
blocks['long-power-failures_dial'] = {
	idx: 62,
	type: 'dial',
	showring: true,
	color: '#fff',
	width: 3
}
blocks['warmtepomp_dial'] = {
	type: 'dial',
	idx: 105,
		values: [
    			{
      			value: 'Data0',
      			unit: 'kWh',
      			label: 't1',
      			scale: 0.001
    			},
    			{
      			value: 'Data1',
      			unit: 'kWh',
      			label: 't2',
      			scale: 0.001
    			},
			],
	showvalue: true,
	animation: true,
	showring: true,
	shownumbers: true,
	min: 0,
	max: 2500,
	last_update: false,
	color: '#fff',
	unit: 'W',
	width: 3
}
blocks['staande-lamp'] = {
	idx: 117,
	title: 'Staande lamp',
	type: 'dial',
	SwitchType: 'On/Off',
	last_update: false,
	color: '#7dd657',
	width: 2
}
blocks['staande-lamp_dial'] = {
	idx: 119,
	title: 'Verbruik staande-lamp',
	type: 'dial',
	showvalue: true,
	animation: true,
	showring: true,
	shownumbers: true,
	min: 0,
	max: 12,
	last_update: false,
	color: '#fff',
	width: 3
}
blocks['kerstboom'] = {
	idx: 122,
	title: 'Kerstboom',
	type: 'dial',
	SwitchType: 'On/Off',
	last_update: false,
	color: '#57a3d6',
	width: 5
}
blocks['temp_hum_baro'] = {
	idx: 24,
	title: 'Weer',
	type: 'dial',
	setpoint: 15,
	min: -10,
	max: 40,
	width: 6,
	/* dialicon: ['fas fa-thermometer-half', 'fas fa-arrow-down'], */   // dial icons array when dials have more than 1 extra info
	/* dialimage: ['volumio.png', 'air.png'],  */   // dial images array when for dials have more than 1 extra info
	showunit: true,
	shownumbers: true,
	showring: true,
	last_update: false  // disabling last update to allow for more room
}
blocks['wind'] = {
	idx: 26,
	title: 'Wind',
	type: 'dial',
	setpoint: 18, // the entire outer ring will change color based on this setpoint, factoring in the current temperature (default 15)
	offset: 0,  // 0 will point to the wind source, 180 will point to wind direction (default is 0)
	width: 6,
	showring: true,
	showunit: true,
	shownumbers: true,
	last_update: false
}
blocks['zonkracht'] = {
	idx: 28,
	type: 'dial',
	min: 0,
	max: 1000,
	shownumbers: true,
	showring: true,
	last_update: true,
	color: '#ffea00',
	width: 6
}
blocks['zichtbaarheid'] = {
	idx: 27,
	type: 'dial',
	min: 0,
	max: 50,
	shownumbers: true,
	showring: true,
	last_update: true,
	color: '#fff',
	width: 6
}
blocks['pi-temp'] = {
	idx: 88,
	title: 'Pi Temp',
	type: 'dial',
	min: 0,
	max: 100,
	shownumbers: true,
	last_update: false,
	color: '#7dd657',
	width: 6
}
blocks['memory-usage'] = {
	idx: 89,
	title: 'Memory Usage',
	type: 'dial',
	min: 0,
	max: 100,
	shownumbers: true,
	last_update: false,
	color: '#7dd657',
	width: 6
}
blocks['process-usage'] = {
	idx: 90,
	title: 'Process Usage',
	type: 'dial',
	min: 0,
	max: 100,
	shownumbers: true,
	last_update: false,
	color: '#7dd657',
	width: 6
}
blocks['hdd'] = {
	idx: 91,
	title: 'HDD',
	type: 'dial',
	min: 0,
	max: 100,
	shownumbers: true,
	last_update: false,
	color: '#7dd657',
	width: 6
}
blocks['hdd-boot'] = {
	idx: 92,
	title: 'HDD boot',
	type: 'dial',
	min: 0,
	max: 100,
	shownumbers: true,
	last_update: false,
	color: '#7dd657',
	width: 6
}
blocks['cpu-usage'] = {
	idx: 93,
	title: 'CPU usage',
	type: 'dial',
	min: 0,
	max: 100,
	shownumbers: true,
	last_update: false,
	color: '#7dd657',
	width: 6
}
blocks['alarmmeldingen'] = {
        rss: 'https://alarmeringen.nl/feeds/city/amsterdam.rss',
        filter: 'Amsterdam',
        show_lastupdate: true,
	icon: 'fas fa-tower-broadcast',
        width: 12,
        refresh: 60,
        results: 10
}
blocks['log'] = {
	title: 'Domoticz log',
	type: 'log',
	ascending: false,
	width: 12,
	height: 282,
	icon: 'fas fa-file-lines'
}

//Definition of columns

var columns = {}
columns[1] = {
	blocks : ['clock', frames.pollen, 'mygarbage', 'news', 'moon'],
	width: 2
}
columns[2] = {
	blocks : ['sunrise', frames.airquality, 'my_calendar', 'weer', 'empty', frames.foksuk, 'buien'],
	width: 5
}
columns[3] = {
	blocks : ['traffic', 'mymap', 'train', 'ovapi_3', 'ovapi_2'],
	width: 5
}
columns[4] = {
	blocks : [43, frames.liander, 75, 'zonkracht', 'zichtbaarheid', 'temp_hum_baro', 'wind', 'empty2', 'waterverbruik_dial'],
	width: 2
}
columns[5] = {
	blocks : [frames.volumegraph, frames.volumegraphsun, frames.warmtepomp, 'empty', 'zonnepanelen', 'graph_15'],
	width: 5
}
columns[6] = {
	blocks : ['graph_1', 'graph_95', 'news_NASA'],
	width: 5
}
columns[7] = {
	blocks : ['clock', 'memory-usage', 'process-usage', 'hdd', 'hdd-boot', 'cpu-usage', 'pi-temp'],
	width: 2
}
columns[8] = {
	blocks : ['alarmmeldingen', frames.iss],
	width: 5
}
columns[9] = {
	blocks : [frames.flightradar, frames.sigmund, 'log'],
	width: 5
}

var columns_standby = {}
columns_standby[1] = {}
columns_standby[1]['blocks'] = ['weer', 'buien']
columns_standby[1]['width'] = 12;


//Definition of screens

var screens = {}
screens['default'] = {}
screens['default']['maxwidth'] = 3200;
screens['default']['maxheight'] = 1800;

screens['default'][1] = {}
screens['default'][1]['background'] = 'bg10.jpg';
screens['default'][1]['columns'] = [1,2,3]

screens['default'][2] = {}
screens['default'][2]['background'] = 'bg10.jpg';
screens['default'][2]['columns'] = [4,5,6]

screens['default'][3] = {}
screens['default'][3]['background'] = 'bg10.jpg';
screens['default'][3]['columns'] = [7,8,9]

Code: Select all

/* Weather */
.big .weatherdegrees,
.big .weatherloc {
	display: inline-block;
	margin-top: -2px;
	margin-left: 24px;	/* move text to the right */
	font-size: 30px;
	font weight: bold;
	
}

div[data-id='empty'] {
	visibility: hidden;
}

div[data-id='empty2'] {
	visibility: hidden;
}

.skyconsmall {
	display: block;
	width: 75px;
	font-size: 15px;
}

/* sunrise */
.sunriseholder,
.sunriseholder .wi{
	font-size:20px !important;
}

.transbg.col-xs-1,
.transbg.col-xs-2,
.transbg.col-xs-3,
.transbg.col-xs-4,
.transbg.col-xs-5,
.transbg.col-xs-6,
.transbg.col-xs-7,
.transbg.col-xs-8,
.transbg.col-xs-9,
.transbg.col-xs-10,
.transbg.col-xs-11,
.transbg.col-xs-12 {
	padding-top:15px;
	padding-bottom:15px;
	border: 5px solid rgba(255,255,255,0);									
	background-clip: padding-box;
		border-radius: 15px;				/* Rounded corners */
}

[data-id='mygarbage'].garbage img			{max-width: 50px !important;}
}

.selectedbutton {
	font-size:12px !important;
}

.dial-center {
        height: 75%!important;width: 75%!important;
}

[data-id='staande-lamp'] .dial-center {
	height: 65%!important;width: 65%!important;
}

[data-id='zonkracht'] .slice.secondary {
	color: #ffea00;
}

[data-id='zichtbaarheid'] .slice.secondary {
	color: #9cf5f7;
}

[data-id='temp_hum_baro'] .slice.secondary {
	color: #33ff99;
}

[data-id='power-failures_dial'] .slice.primary {
	color: #f80000;
	font-size: 18px !important;
}

[data-id='long-power-failures_dial'] .slice.primary {
	color: #f80000;
}

div.mh.titlegroups {
	height: 50px !important;
	padding-top: 3px !important;
		background: rgba(0,0,0,0);
}

.alarmrow{
font-size: 12px !important;
}

.alarmrow a {
color: white;
}

.message{
color: white;
}

.timestamp{
color: white;

.alarmrow strong{
display: inline-block;
}

/* DOTS BELOW SCREEN SWITCH SCREENS */
.swiper-pagination-bullet {background: #FFFFFF; width: 10px; height: 10px; float:middle; position:relative; left:35px;}
}