Description:

A MM-module to display moslem praying time from https://aladhan.com.

Download:

[card:slametps/MMM-PrayerTime]

Screenshot

Initial Version

@MyMirror said in My First Magic Mirror:

@slametps
It really looks nice. May i have also the config and more detailed information of your settings? How did you get the coloured signs in each line of your calender?
Greets

Here is my custom css (copy-paste from various posts in MM-forum):

html {
  cursor: none;
  overflow: hidden;
}

::-webkit-scrollbar {
  display: none;
}

body {
  margin: 2px;
  position: absolute;
  height: calc(100% - 2px);
  width: calc(100% - 2px);
  background: #000;
  color: #fff;
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 400;
  font-size: 2em;
  line-height: 1.5em;
  -webkit-font-smoothing: antialiased;
}

/**
 * Default styles.
 */

.dimmed {
  color: #666;
}

.normal {
  color: #fff;
}

.bright {
  color: #fff;
}

.xsmall {
  font-size: 10px;
  line-height: 15px;
}

.small {
  font-size: 15px;
  line-height: 20px;
}

.medium {
  font-size: 25px;
  line-height: 30px;
}

.large {
  font-size: 60px;
  line-height: 60px;
}

.xlarge {
  font-size: 70px;
  line-height: 70px;
  letter-spacing: -3px;
}

.thin {
  font-family: Roboto, sans-serif;
  font-weight: 100;
}

.light {
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 300;
}

.regular {
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 400;
}

.bold {
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 700;
}

.align-right {
  text-align: right;
}

.align-left {
  text-align: left;
}

header {
  text-transform: uppercase;
  font-size: 15px;
  font-family: "Roboto Condensed";
  font-weight: 400;
  border-bottom: 1px solid #666;
  line-height: 10px;
  padding-bottom: 5px;
  margin-bottom: 10px;
  color: #999;
}

sup {
  font-size: 50%;
  line-height: 50%;
}

/**
 * Module styles.
 */

.module {
  margin-bottom: 20px;
}

.region.bottom .module {
  margin-top: 20px;
  margin-bottom: 0;
}

/**
 * Region Definitions.
 */

.region {
  position: absolute;
}

.region.fullscreen {
  position: absolute;
  top: -50px;
  left: -50px;
  right: -50px;
  bottom: -50px;
}

.region.right {
  right: 0;
}

.region.top {
  top: 0;
}

.region.top .container {
  margin-bottom: 15px;
}

.region.top .container:empty {
  margin-bottom: 0;
}

.region.top.center,
.region.bottom.center {
  left: 50%;
  -moz-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}

.region.top.right,
.region.top.left,
.region.top.center {
  top: 100%;
}

.region.bottom {
  bottom: 0;
}

.region.bottom .container {
  margin-top: 15px;
}

.region.bottom .container:empty {
  margin-top: 0;
}

.region.bottom.right,
.region.bottom.center,
.region.bottom.left {
  bottom: 100%;
}

.region.bar {
  width: 100%;
  text-align: center;
}

.region.third,
.region.middle.center {
  width: 100%;
  text-align: center;
  -moz-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.region.upper.third {
  top: 33%;
}

.region.middle.center {
  top: 50%;
}

.region.lower.third {
  top: 66%;
}

.region.left {
  text-align: left;
}

.region.right {
  text-align: right;
}

.region table {
  width: 100%;
  border-spacing: 0;
  border-collapse: separate;
}

/*
 * CALENDAR SPECIFIC
 */

.fa.fa-calendar {
  color: #ff0000; /* Red */
}
.fa.fa-birthday-cake {
  color: #ff0000; /* Red */
}
.fa.fa-calendar-check-o {
  color: #ffff00; /* Yellow */
}

fa.fa-calendar-o {
  color: #ffff00; /* white */
}

/*
 * WUFORECAST SPECIFIC
 */

.wuforecast .max-temp {
  font-size: 15px;
  line-height: 15px;
  color: #f66;
}

.wuforecast .min-temp {
  font-size: 15px;
  line-height: 15px;
  color: #0ff;
}

.wuforecast .weather-icon {
  font-size: 15px;
  line-height: 15px;
  color: #f93;
}

.wuforecast .day {
  font-size: 15px;
  line-height: 15px;
  color: #6f6;
}

/*
 * FORECAST
 */

.brightb {
  color: #55acee;
}
.currentweather .wi-sunrise {
  color: #ffd700;
}
.currentweather .wi-sunset {
  color: #ffa500;
}
.currentweather .wi-day-sunny {
  color: #ffff00;
}
.currentweather .wi-night-showers {
  color: #55acee;
}
.currentweather .wi-degrees {
  color: #415;
}
.currentweather .wi-rain {
  color: #55acee;
}
.currentweather .wi-showers {
  color: #55acee;
}
.currentweather .wi-night-showers {
  color: #55acee;
}
.currentweather .wi-night-alt-cloudy-windy {
  color: #aaa;
}
.currentweather .wi-night-cloudy {
  color: #aaa;
}
.currentweather .wi-cloudy {
  color: #aaa;
}
.currentweather .wi-day-cloudy {
  color: #aaa;
}
.currentweather .wi-cloudy {
  color: #aaa;
}
.currentweather .wi-cloudy-windy {
  color: #aaa;
}
.currentweather .wi-showers {
  color: #55acee;
}
.currentweather .wi-thunderstorm {
color: #ff00ff;
}
.currentweather .wi-snow {
color: #fff;
}
.currentweather .wi-fog {
color: #999;
}
.currentweather .wi-night-clear {
color: #fff;
}
.currentweather .wi-night-rain {
color: #55acee;
}
.currentweather .wi-night-thunderstorm {
color: #ff00ff;
}
.currentweather .wi-night-snow {
color: #fff;
}

.weatherforecast .wi-sunrise {
color: #ffd700;
}
.weatherforecast .wi-sunset {
color: #ffa500;
}
.weatherforecast .wi-day-sunny {
color: #ffff00;
}
.weatherforecast .wi-night-showers {
color: #55acee;
}
.weatherforecast .wi-degrees {
color: #415;
}
.weatherforecast .wi-rain {
color: #55acee;
}
.weatherforecast .wi-showers {
color: #55acee;
}
.weatherforecast .wi-night-showers {
color: #55acee;
}
.weatherforecast .wi-night-alt-cloudy-windy {
  color: #aaa;
}
.weatherforecast .wi-night-cloudy {
  color: #aaa;
}
.weatherforecast .wi-cloudy {
  color: #aaa;
}
.weatherforecast .wi-day-cloudy {
  color: #aaa;
}
.weatherforecast .wi-cloudy {
  color: #aaa;
}
.weatherforecast .wi-cloudy-windy {
  color: #aaa;
}
.weatherforecast .wi-showers {
  color: #55acee;
}
.weatherforecast .wi-thunderstorm {
color: #ff00ff;
}
.weatherforecast .wi-snow {
color: #fff;
}
.weatherforecast .wi-fog {
color: #999;
}
.weatherforecast .wi-night-clear {
color: #fff;
}
.weatherforecast .wi-night-rain {
color: #55acee;
}
.weatherforecast .wi-night-thunderstorm {
color: #ff00ff;
}
.currentweather .wi-night-snow {
color: #fff;
}

/*.clock .time {
  color: #99F;
}*/

.clock .date {
	color: #09F;
}

.calendar .header {
	color: #F00;
}

/*.newsfeed div.light.small.dimmed {
  color: #F00;
  font-size: 9px;
}*/

.MMM-WunderGround .max-temp {
  color: #f66;
}

.MMM-WunderGround .min-temp {
  color: #0ff;
}

.MMM-WunderGround .weather-icon {
  color: #f93;
}

.MMM-WunderGround .day {
  color: #6f6;
}

/* aligns the table to the right */
.MMM-SystemStats table {
  width: initial;
  float: right;
}

/* aligns all columns to the right within the table */
.MMM-SystemStats td {
  text-align: right !important;
}

.MMM-NetworkScanner ul .fa-ul li .fa-li {
  float: left;
}

Description:

A MM-module to display the status of TPLink lights/plugs in your local network.
Inspired by MMM-Hue.

Download:

[card:slametps/MMM-TPLink]

Screenshot

Initial Version

@slametps said in MMM-PrayerTime:

@zzaidi148 said in MMM-PrayerTime:

@slametps 12hour format would be easier for people in America to read.

Sorry for late response.
I’ll see what I can do tonight. I’ll inform you if 12-hour format is supported.

I have added 12-hours time-format support. Please update your clone.

@slametps it is my MM now.

Description:

A MM-module to display network connection status (ping, download speed, upload speed) for MagicMirror2.
This module combines internet-monitor and MMM-connection-status…

Download:

[card:slametps/MMM-NetworkConnection]

Screenshot

Initial Version

Description:

A MM-module to display ayah/verse of Quran randomly from https://alquran.cloud.

Download:

[card:slametps/MMM-RandomQuranAyah]

Screenshot

Initial Version

@BenNewsome a screenshot would be helpful!

@FlatPepsi it is active since arp-scan will executed every updateInterval setting. Of course, it will trigger such a security alert if violate the security policy of your office. No, arp-scan will scan all available devices in the network.

@slametps said in How to MANUALLY install MM on your Pi. For absolute beginners.:

@Mykle1 said in How to MANUALLY install MM on your Pi. For absolute beginners.:

@slametps

You didn’t answer my question.
You didn’t try my suggestion.
You did the one thing that I said I didn’t know was your issue.

Shrug

Yap, I install MM manually refers to documentation you wrote (and backed up current running MM 2.1.0).
config. js I mentioned earlier, is a fresh copy from config.js.sample in config folder.
I did npm-install in MM folder, but not in vendor yet. I’ll try later when I have access to my MM.

Finally, MM 2.1.3 was installed successfully by executing:

cd /root/MagicMirror/vendor
npm install /root/MagicMirror
cd /root/MagicMirror/fonts
npm install