@slametps said in My First Magic Mirror:

@Snille said in My First Magic Mirror:

Looks great! Good reflection and see-through.
If you want to share… :)
What modules are you using and what customisation have you done?
I can see the colours on the calendar appointments, how did you manage that?

I will post more detail in picture later. I’m still on mobile :)

modifying custom.css (copy-paste from various forum posts) as following:

html {
  cursor: none;
  overflow: hidden;
}

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

body {
  margin: 5px;
  position: absolute;
  height: calc(100% - 10px);
  width: calc(100% - 10px);
  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 */
}

/*
 * 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;
}

I’m using 24" TV. But for better quality, you should consider using a monitor rather than a TV (based on ppi value).

@cowboysdude said in Wider Veriety of Modules For Different Kinds of People:

All types and kinds right here…

https://forum.magicmirror.builders/category/7/showcase

Calendars, schedulers, traffic, weather… tons of them. with more and more being developed everyday.

If someone needs something specific they can go the request forum and ask…

As for touch screen there are modules for that too… there are voice modules…

Some requests are met, some are not. Everyone that builds modules do so for free and it takes time… even the MagicMirror itself is free… This is THE one place in my life that I can come to and talk to all kinds of people from all over the world. I like that very much :)

Yes, that is the first place I read after I installed my first-time MM a month ago.

Finally, I completed my first magic mirror. Thx a lot, @MichMich for your great MM2 platform also all modules developers.
I show the mirror to my colleagues and wondering how to built it. I wrote a simple tutorial on my blog. Sorry, the blog is in Indonesian. But you just simply translate it using Google Translate, for example in English.

Here is my mirror.

I’m still working on voice-control, PIR and training face-reco (already works but still needs more training though).

@almasgai I’m using FHD TV myself. If you’re satisfied enough with the display result, that’s ok. But I think, it will be much better display if using monitor. Power source for raspi, it is not recommended to use USB port from the TV since raspi require 5v 2A for better performance since USB from TV just have 1A or less output.

Bandung, West Java, Indonesia

@zam said in MMM-RandomQuranAyah:

Jazakallah , if you can please try to implement a Module for ADAN it will be very usefull :)

@zam It is available now, MMM-PrayerTime for displaying praying time with adhan recital.

@Labzz yap, raspi 3 model B. set the update interval in minutes for modules that not required instant updates such as calendar (5 minutes), rss feed (15-30 minutes). The only module takes so much cpu is facial-recognition (run every 2 seconds).

@mizzoudavis I leave the bezel intact. Other area not covered by bezel (outside the monitor), you simply add black/dark tape/paper/paint.

Hi all,

I’m Slamet PS, a 39 year old hobbist from Bandung, Indonesia. I love tinkering (IoT), also a gunpla modeller and collector and a drone pilot. I completed my first MagicMirror a few weeks a go. One of great products I have ever met.

I also develop a new module (MMM-RandomQuranAyah).

Still tuning the facial-recognition module and plan to add voice-control.
You can find me at FB, instagram, twitter and blog.

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