Giter Site home page Giter Site logo

mmm-customtext's Introduction

Module: MMM-CustomText

MMM-CustomText is a module for MagicMirror². It posts any message you want to your MagicMirror. Multiple instances are supported. Message can be updated via notification. And messages can include HTML elements including CSS formatting.

Example Screenshot

The main differences between this and MMM-CustomMessage are that (1) this module allows separately updating multiple instances, (2) this module primarily employs the MagicMirror notification system for updating messages, and (3) this module completely collapses to 0 pixels in height by default when no message is displayed.

Suggestions are welcome.

Installation

cd ~/MagicMirror/modules
git clone https://github.com/dathbe/MMM-CustomText

No dependencies need to be installed, but you likely want MMM-Remote-Control installed to allow posting of messages via API.

Updating

cd ~/MagicMirror/modules/MMM-CustomText
git pull

Usage

Example Config

To use this module, add it to the modules array in your ~/MagicMirror/config/config.js file:

{
	module: 'MMM-CustomText',
	position: 'top_bar',
	config: {
		initialMessage: "I posted my first message!",
		uniqueID: "myUniqueID",
		animationSpeed: 1000 * 2,
	},
}

Configuration options

The following properties can be configured:

Option Description
initialMessage Optional A message you would like to display when MagicMirror loads
Type: string
Default: "No notification received yet"
uniqueID Optional, but necessary if you plan to have multiple instances of this module in your config file. Give each instance a unique uniqueID that you can pass in notifications (see below)
Type: anything
Default: null
animationSpeed Optional The speed of animated transitions from one message to another in milliseconds
Type: int
Default: 2000 (2 seconds)

Posting a message via notification

You can update the message displayed by this module using a CUSTOMTEXT_UPDATE notification. Pass the message and, if you have more than one instance of the module, the uniqueID of the instance in a json object:

{
	"uniqueID": "myUniqueID",
	"message": "I posted a notification message!"
}

For example, if you wanted to create such a notification in python, install the MMM-Remote-Control module, and then you can execute the following script:

import requests 

accesstoken = 'mYsUpErSeCrEtToKeN'
header = {'Authorization': f"Bearer {accesstoken}", 'Content-type': 'application/json'}
message = 
json = {
	"uniqueID": "myUniqueID",
	"message": "<div style='background-color:#f19b52'>I posted a notification message!</div>"
}
x = requests.post('http://localhost:8080/api/notification/CUSTOMTEXT_UPDATE', json=json, headers=header)

Notes

  • Both the initial message and any subsequent message posted by notification will accept standard HTML elements within the string. That means you could, for example, style the message using inline CSS or by giving the message a class name and using ~/MagicMirror/css/custom/css. You could also insert more complex elements like a table.
  • You can clear the message from the display by posting "" via notification. If the message is ""--either via initialMessage or a notification posting--it should collapse the module so that no unnecessary space is taken up on your display. If you want the module to take up a fixed height on your display regardless of the length of the message, you should be able to set this in ~/MagicMirror/css/custom.css.
  • If you only have one instance of this module in your config (or you want to update all instances at the same time) and you have not set an explicit uniqueID in your config, you do not need to pass a uniqueID in your notification. The module will update no matter what you pass as uniqueID, or if you pass nothing at all.

Changelog

  • 2024-3-30: Initial release

mmm-customtext's People

Contributors

dathbe avatar kristjanesperanto avatar

Stargazers

 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.