Förslag på mjukvara för att göra en Rpi väggkalender

[Magnus_K]

Det var så långt jag också kom. Sen när jag ville modifiera layouten, då blev det för mycket.
Tryck inte ner mig i skorna och fixa en snygg kalender på en dag nu Mickecarlsson

[Mickecarlsson]

Nja Magnus_K, jag har inte börjat på kalendern (än).
Fick fart på vädret och svenska helgdagar.

23E39831-DCD4-4694-98A6-E0352801EF43.jpeg

[Mickecarlsson]

Jag har Office365, billigaste licensen. Jag och frugan har vår mail där, en ”egen” Exchangeserver.
Jag delade ut kalendern, aktiverade modulen calendar och voila, en kalender i Magic Mirror.
Sen har jag kalendern synkad till min iPad, och kör alla uppdateringarna där.
Funkar perfekt.
Nu ska jag bara lägga in frugans kalender sen kommer jag att permanenta Magic Mirror i hemmet.

8D4B37AC-8332-42F6-9D01-CEC9A9850FE8.jpeg

[Mickecarlsson]

@Magnus_K du kan dela ut en Google-kalender till MagicMirror, mata in via datorn och du ser det inom ett par minuter på MgicMirror.
Jag börjar bli riktigt nöjd med min nu, jag har kalendern, klocka med veckonummer, väder från SMHI, nyheter från SVT för Skåne och på morgonen får jag trafiksituationen från Google (Waze) för vägen till jobb.

[Magnus_K]

Jo, så skulle antaligen en kalender för mig också se ut. Dock är den här för barnen och jag måste kunna modifiera "stilen" väldigt mycket.
Även öppna upp för lite "integration".

Sitter redan fast i programmeringens värld så det här skiter sig nog som allt annat.

[Jonaz]

Funkar det utan rpi, om man slänger in någon lämplig linuxdist?
Har en gammal toutchskärm med inbyggd dator.

[Mickecarlsson]

@Jonaz, citat från hemsidan:

Electron, the app wrapper around MagicMirror², only supports the Raspberry Pi 2/3.

Du kan köra i servermode med en fullskärmsbrowser.

[netrunner]

Jag började mitt MagicMirror projekt nu. Har skaffat en hygglig ram att ha runt skärmen:

https://cdon.se/hem-tradgard/30x40-cm-o ... -p45725134

299kr



Har laserskurit distanser så att skärmens baksida ska få ett luftflöde. Så ska distanserna få lite guldfärg på sig. Alternativ så lackar jag allt vitt, i högglans.

[Magnus_K]

Gjorde en liten kladd för att visa hur jag vill ha det samt att försöka bryta ner det i delar som jag måste fokusera på och även läsa mer om.

Grunden är en vanlig månadskalender där dagens datum markeras automatisk med en annan färg i bakgrunden.
Data (event) för varje dag sparas i en databas.
Med hjälp av enbart piltangenter kan man navigera till annan dag. Denna valda dag markeras med en röd ram.
När en ny dag valts så visas den dagens händelser i stor version samt även uppdelat på respektive barn.

Varning, nu blir det svengelska men jag vet inte dom korrekta svenska orden.

Vad jag hittat än så länge på nätet är en bra "html table kalender".
Tror också jag hittat något lämpligt som kallas jquery script som göra att man man gå runt bland dagarna med piltangenterna.
Är det rätt väg att gå tror ni? Är det någon med kunskap om sån här programmering som kan tänka sig kladda ihop en liten enkel "att göra lista" för att få ihop det här?

20190227_203130.jpg

[Magnus_K]

Ursäkta mitt snabba bump, men Ingen som har lite tid över att knuffa mig i rätt riktning?

[papabear]

Låter väl som ok väg.

1. Visa kalender (html)
2. Få in ikoner i kalendern för händelser från db (html/php)
3. Visa händelser från vald dag (html)
4. Navigera med piltangenterna (js)
5. Funktion för att hämta dags händelser från db (php)
6. Ladda om händelser när vald dag ändras (js ajax)

html = bara att fixa layout
php = serverkod
js = javascript/jquery (ett js-bibliotek)
ajax = ladda in data från js utan att ladda om sidan

Jag skulle börja med html och css så att man får det att se ut som man vill, sen börja lägga in data från db och navigering.
5an skulle jag göra så att du har nånting på serversidan som svarar med json för dagens dag.
Tex dagdetaljer.php?datum=190301 som svarar med
{
barn1[{namn: 'aktivitet1', plats:'...', tid:'...'}],
barn2[<tomt om inga aktiviteter, alternativt ta bort hela objektet>]
}

Dvs ett json-objekt med egenskaper för resp barn (arrayer med aktiviteter), där aktivitet har egenskaper som ex namn, plats, tid osv.

Bara lite snabba tankar.

[Magnus_K]

Jättesnällt papabear! Exakt vad jag behöver.
Kan inte språken så bra så vet inte vad dom är kapabla till men nu har jag fått jättebra info om vad att söka på till respektive funktion.

Tack än en gång

[Magnus_K]

Kommer köra på benhårt enligt papbear's listan och först ut är att få kalendern att se ut som jag vill.

Det är egentligen inte så mycket som saknas, eller som jag vill modifiera, men veckonummer saknar jag.
Vill lägga till dessa i lägre vänstra hörnet i början på varje vecka.

Det borde vara $weeknum = date('W'); som ska användas men jag kan bara inte klura ut hur dom här tabellerna fungerar.
Plockar jag tex bort echo $week; så försvinner inte bara siffrorna utan hela tabellen (!?). Man verkar alltså skapa tabellen utifrån vad som skrivs i den (datan).

Är det någon som ser vart jag borde baka in mitt veckonummer så det kläms in i början på varje ny rad?
Det kommer ju inte bara vara veckonummer utan måste klura ut ett sätt att "adressera/namnge" varje ruta men det går knappast med nuvarande sätt att skapa tabellen va?

Kod: Markera allt

// Set your timezone!!
date_default_timezone_set('Europe/Stockholm');
// Get prev & next month
if (isset($_GET['ym'])) {
    $ym = $_GET['ym'];
} else {
    // This month
    $ym = date('Y-m');
}
// Check format
$timestamp = strtotime($ym . '-01');  // the first day of the month
if ($timestamp === false) {
    $ym = date('Y-m');
    $timestamp = strtotime($ym . '-01');
}
// Today (Format:2018-08-8)
$today = date('Y-m-j');
// Week number
$weeknum = date('W');
// Title (Format:August, 2018)
$title = date('F, Y', $timestamp);
// Create prev & next month link
$prev = date('Y-m', strtotime('-1 month', $timestamp));
$next = date('Y-m', strtotime('+1 month', $timestamp));
// Number of days in the month
$day_count = date('t', $timestamp);
// 1:Mon 2:Tue 3: Wed ... 7:Sun
$str = date('N', $timestamp);
// Array for calendar
$weeks = [];
$week = '';
// Add empty cell(s)
$week .= str_repeat('<td></td>', $str - 1);
for ($day = 1; $day <= $day_count; $day++, $str++) {
    $date = $ym . '-' . $day;
    if ($today == $date) {
        $week .= '<td class="today">';
    } else {
        $week .= '<td>';
    }
    $week .= $day . '</td>';
    // Sunday OR last day of the month
    if ($str % 7 == 0 || $day == $day_count) {
        // last day of the month
        if ($day == $day_count && $str % 7 != 0) {
            // Add empty cell(s)
            $week .= str_repeat('<td></td>', 7 - $str % 7);
        }
        $weeks[] = '<tr>' . $week . '</tr>';
        $week = '';
    }
}
?>
<!DOCTYPE html>
<html lang="en">
<head>    
    <meta charset="utf-8">
    <title>index</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
    <style>
        .container {
            font-family: 'Montserrat', sans-serif;
            margin: 60px auto;
        }
        .list-inline {
            text-align: center;
            margin-bottom: 20px;
        }
        .title {
            font-weight: bold;
            font-size: 26px;
        }
        th {
            text-align: center;
        }
        td {
            height: 120px;
            width: 100px;
        }
        th:nth-of-type(6), td:nth-of-type(6) {
            color: blue;
        }
        th:nth-of-type(7), td:nth-of-type(7) {
            color: red;
        }
        .today {
            background-color: DarkGray;
        }
        div img.center {
            margin:o auto;
        }
    </style>
</head>
<body>
    <div class="container">
        <ul class="list-inline">
            <li class="list-inline-item"><a href="?ym=<?= $prev; ?>" class="btn btn-link">< prev</a></li>
            <li class="list-inline-item"><span class="title"><?= $title; ?></span></li>
            <li class="list-inline-item"><a href="?ym=<?= $next; ?>" class="btn btn-link">next ></a></li>
        </ul>
        <p class="text-right"><a href="index.php">Today</a></p>
	    <table class="table table-bordered">
            <thead>
                <tr>
                    <th>MÅN</th>
                    <th>TIS</th>
                    <th>ONS</th>
                    <th>TORS</th>
                    <th>FRE</th>
                    <th>LÖR</th>
                    <th>SÖN</th>
                </tr>
            </thead>
            <tbody>
                <?php
                    foreach ($weeks as $week) {
                        echo $week;
                    }
                ?>
            </tbody>
        </table>
    </div>
</body>
</html>

[papabear]

echo $week kommer ju att skriva ut hela tabellraden för den veckan dvs:

Kod: Markera allt

<tr>
<td>...</td>
...
</tr>

vilket är det som bakats ihop på rad 49.
Tar du bort den så försvinner ju alla rader från tbody just som du testat.

Jag skulle ju vilja lägga in veckonumret i den första td, men iom att det kan vara lite olika stället så kommer koden bli lite ful.
Om du lägger till <th>v</th> innan <th>MÅN</th> så kan du ju ha den kolumnen för veckonummer och ändra rad 49 till.

Kod: Markera allt

$weeks[] = '<tr><td>'.$weeknum.'</td>' . $week . '</tr>';

Alternativt

Kod: Markera allt

$weeks[] = '<tr data-week="'.$weeknum.'">' . $week . '</tr>';

så kan vi plocka ut det med js senare och lägga in ett element i första tdn.

edit:
alt två från ovan med din kod, fast utan php då jag inte har det uppsatt på den här maskinen:

Kod: Markera allt

<!DOCTYPE html>
<html lang="en">
<head>    
    <meta charset="utf-8">
    <title>index</title>
	<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
    <style>
        .container {
            font-family: 'Montserrat', sans-serif;
            margin: 60px auto;
        }
        .list-inline {
            text-align: center;
            margin-bottom: 20px;
        }
        .title {
            font-weight: bold;
            font-size: 26px;
        }
        th {
            text-align: center;
        }
        td {
            height: 120px;
            width: 100px;
        }
        th:nth-of-type(6), td:nth-of-type(6) {
            color: blue;
        }
        th:nth-of-type(7), td:nth-of-type(7) {
            color: red;
        }
        .today {
            background-color: DarkGray;
        }
        div img.center {
            margin:o auto;
        }
    </style>
	<script type="text/javascript">
	$(function(){
		$("tbody tr").each(function(){
			var wni = document.createElement("span");
			$(wni).append($(this).data("week"));
			$(wni).addClass("week-number-indicator");
			$(this).children().first().append(wni);
		});
	});
	</script>
</head>
<body>
    <div class="container">
        <ul class="list-inline">
            <li class="list-inline-item"><a href="?ym=<?= $prev; ?>" class="btn btn-link">< prev</a></li>
            <li class="list-inline-item"><span class="title"><?= $title; ?></span></li>
            <li class="list-inline-item"><a href="?ym=<?= $next; ?>" class="btn btn-link">next ></a></li>
        </ul>
        <p class="text-right"><a href="index.php">Today</a></p>
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>MÅN</th>
                    <th>TIS</th>
                    <th>ONS</th>
                    <th>TORS</th>
                    <th>FRE</th>
                    <th>LÖR</th>
                    <th>SÖN</th>
                </tr>
            </thead>
            <tbody>
                <tr data-week="1">
					<td>MÅN</td>
                    <td>TIS</td>
                    <td>ONS</td>
                    <td>TOR</td>
                    <td>FRE</td>
                    <td>LÖR</td>
                    <td>SÖN</td>
				</tr>
                <tr data-week="2">
					<td>MÅN</td>
                    <td>TIS</td>
                    <td>ONS</td>
                    <td>TOR</td>
                    <td>FRE</td>
                    <td>LÖR</td>
                    <td>SÖN</td>
				</tr>
            </tbody>
        </table>
    </div>
</body>
</html>

I tbody har jag alltså bara hårdkodat två "veckor".
I javascriptet på rad 44 väljer vi alla tr i tbody, skapar en span-tag och lägger in veckonummret från data-week, och lägger in detta sist i första barnet till aktuell tr.
Du kan byta .append() mot .prepend() om du vill ha det först i td istället.
css-klassen week-number-indicator kan du använda för att sätta styles på span:en.
.week-number-indicator { ... }

Det kommer ju inte bara vara veckonummer utan måste klura ut ett sätt att "adressera/namnge" varje ruta men det går knappast med nuvarande sätt att skapa tabellen va?

Nja. Du kan ju ändra rad 37/39 (din kod) så att du petar in aktuellt datum som data-attribut på tdn.
Det kan du sen använda både för text att lägga in ikoner för aktiviteter på den dagen och för att ladda info om vald dag.