MMM-Fritz-Box-Callmonitor: Notification formatting

[Jan 0]

Hi,
I’m referring to this module (https://github.com/paviro/MMM-FRITZ-Box-Callmonitor). Although it is quite outdated, I still like it and I was able to transfer it to an python3 environment. However, since some update (don’t know which one), the notification (“alert”) is not formatted properly.
The reason seems to be in line 85 of the file MMM-FRITZ-Box-Callmonitor.js:

	// Override socket notification handler.
	socketNotificationReceived: function(notification, payload) {
		if (notification === "call") {
			//Show alert on UI
			this.sendNotification("SHOW_ALERT", {
				title: this.translate("title"),
				message: "<span style='font-size:" + this.config.numberFontSize.toString() + "px'>" + payload + "<span>",
				imageFA: "phone"
			});

			//Set active Alert to current call
			this.activeAlert = payload;
		}

There are two problems: 1) the title is not translated but printed, 2) the message is not formatted but the formatting information is printed verbosely.
Unfortunately, I’m neither an expert in the MagicMirror syntax nor in javascript. Could somebody give me a hint how I need to adopt the code?

Thanks

[coernel]

@Jan-0 Can you please fork the updated module? I also tried to make it run under Python3 but failed.

I will then install and have a look at the formatting - though I am no expert either I will give my best.

[coernel]

@Jan-0 Please publish your fork and I will have a look at the formatting!

[Jan 0]

Thanks @coernel
Here is the fork and the development branch: https://github.com/drtorchwood/MMM-FRITZ-Box-Callmonitor-py3/tree/code_update_2023

[coernel]

@Jan-0 I will have a look tomorrow!

[coernel]

I tried to install it but the MagicMirror stays blank after that. I noticed that you don’t use a pyhton-3 shebang in your Python file. Could this be the cause? I will try later to add that!

This is my config:

{
			module: 'MMM-FRITZ-Box-Callmonitor-py3',
			position: 'bottom_left',	// This can be any of the regions. Best results in left or right regions.
			header: "Verpasste Anrufe", // This is optional
			config: {
				username: "foo",
				password: "bar",
				reloadContactsInterval: 24*60,
			}
		},

[Jan 0]

@coernel Perhaps, my renaming of the module is the problem. On my computer, the module is stilled named “MMM-FRITZ-Box-Callmonitor”. I only renamed it for the branch.
I will check this in the next days.
Does python3 fritz-access.py -u '<username>' -p '<password>' work?

[sdetweil]

@Jan-0 if you rename a module, you have to rename the folder and the filename AND EDIT the file and change it’s register clause w the right name.

modulename - folder
modulename.js
edit modulename.js and change 1 line of code

[coernel]

After changing some lines as suggested by sdetweil the MagicMirror loads again.

@Jan-0 said in MMM-Fritz-Box-Callmonitor: Notification formatting:

python3 fritz-access.py -u ‘’ -p ‘’

The filename is fritz_access.py. So after executing it I got

 print json.dumps({"filename": file, "content": content})
          ^
SyntaxError: invalid syntax

This was easily solded by changing it to print (json.dumps({"filename": file, "content": content})) (Just adding round brackets) - that was a change from Python2 to Python3.

However it was followed by the next error urllib2 does not work in Python 3. According to stackoverflow urllib.error and urllib.request must be used for Python3.

Are you sure you uploaded the right code to github? It seems you accidentally uploaded th old python2 code!

[wishmaster270]

@coernel
@Jan-0

Additional to the wrong rename the fritz_access.py had the mentioned wrong urllib2 imports. I fixed the python script and the import of the PythonShell module in node_helper.js.

I created a pull request a few seconds ago.

[Jan 0]

@wishmaster270
I uploaded my changes in the branch code_update_2023 and did not pullit to the master of the fork.
I will have a look at the pull requests tomorrow.

[coernel]

@wishmaster270 This is great.
I can confirm that executing fritz_acces.py with username and password now works! It results in some structured data:

<Call><Id>4373</Id><Type>3</Type><Called>0123456789</Called><Caller>SIP: 9328727</Caller><CallerNumber>54321</CallerNumber><Name>Some fancy Name</Name><Numbertype>sip</Numbertype><Device>Tardis</Device><Port>13</Port><Date>03.09.22 12:55</Date><Duration>0:02</Duration><Count></Count><Path /></Call>

I also get the module to show however it does not show active nor missed calls. It just shows “no call”, the spinner and the phonebook.

I used this config:

			module: 'MMM-FRITZ-Box-Callmonitor-py3',
			position: 'bottom_left',
			header: "Verpasste Anrufe", 
			config: {
				username: "foo",
				password: "bar",
				reloadContactsInterval: 24*60,
				minimumCallLength: 0,
				showContactsStatus: true,
				maximumCallDistance: 60*6,
				maximumCalls: 4,
				fade: false,
				debug: true,
			}
		},

So I guess the communication between the js and the py is faulty.

I would like to help you with your formatting though in the end…

[wishmaster270]

@coernel
The pythons script is only responsible to fetch the call history and the phonebook of the fritz box. The call notification is handled by java script.
So should see a alter containing the (wrong formatted) phone number for each incoming call.

Are you sure you activated the call notification on your fritz box by dialing

#96*5*

with a phone connected to the box (DECT phone works as well).

Edit:
I do not think the formatting problem is related to this module. As of the documentation of the alert module it should be possible to send either simple text or html formatted text.
As a debug test i tried to send html formatted text with one of my other modules which ends in the same problem

[sdetweil]

@wishmaster270 known bug. fixed in next release

https://github.com/MichMich/MagicMirror/issues/2828

[wishmaster270]

@sdetweil
I should have checked that. Thank you for the link.
With the current develop branch the formatting works as expected, too.

Edit: If the comment is removed of the translation files the translations work as well and the right title is displayed

[coernel]

@wishmaster270 and @Jan-0 Is there now a current repository with the issues fixed? I would love to use the module as well.
Also it should be added here : https://github.com/MichMich/MagicMirror/wiki/3rd-party-modules

[Jose Walsh]

@Jan-0 said in MMM-Fritz-Box-Callmonitor: Notification formatting:

Hi,
I’m referring to this module (https://github.com/paviro/MMM-FRITZ-Box-Callmonitor). Although it is quite outdated, I still like it and I was able to transfer it to an python3 environment. However, since some update (don’t know which one), the notification (“alert”) is not formatted properly.
The reason seems to be in line 85 of the file MMM-FRITZ-Box-Callmonitor.js:
// Override socket notification handler.
socketNotificationReceived: function(notification, payload) {
if (notification === “call”) {
//Show alert on UI
this.sendNotification(“SHOW_ALERT”, {
title: this.translate(“title”),
message: “” + payload + “”,
imageFA: “phone”
});

  	//Set active Alert to current call
  	this.activeAlert = payload;
  }

There are two problems: 1) the title is not translated but printed, 2) the message is not formatted but the formatting information is printed verbosely.
Unfortunately, I’m neither an expert in the MagicMirror syntax nor in javascript. Could somebody give me a hint how I need to adopt the code?

To fix this, you can remove the quotes and use template literals instead. Template literals allow you to include variables and formatting within a string using backticks () instead of quotes. Here's how you can modify the code to use template literals: socketNotificationReceived: function(notification, payload) { if (notification === "call") { //Show alert on UI this.sendNotification("SHOW_ALERT", { title: this.translate("title"), message: ${payload}`,
imageFA: “phone”
});

//Set active Alert to current call
this.activeAlert = payload;

}
}
As for the translation issue, you need to make sure that the translate function is correctly configured in your module. The translate function should be defined in the getTranslations function in the module’s node_helper.js file. Here’s an example of how to define the translate function:
getTranslations: function() {
return {
en: “translations/en.json”,
de: “translations/de.json”
};
},

translate: function(key) {
return this.translate(key);
}
This assumes that you have translation files for English and German located in the translations folder of your module. You may need to modify this code to match the structure of your module.

I hope this helps! Let me know if you have any other questions.

[wishmaster270]

@coernel
Hi,
as i can see this fork https://github.com/drtorchwood/MMM-FRITZ-Box-Callmonitor-py3/tree/code_update_2023 contains all changes needed.
But you will need to either use the current development version of MagicMirror or wait for the next release which i think is planned for 2022-04-01 to get the alerts formatted correctly.

[coernel]

@wishmaster270 said in MMM-Fritz-Box-Callmonitor: Notification formatting:

@coernel
Hi,
as i can see this fork https://github.com/drtorchwood/MMM-FRITZ-Box-Callmonitor-py3/tree/code_update_2023 contains all changes needed.
But you will need to either use the current development version of MagicMirror or wait for the next release which i think is planned for 2022-04-01 to get the alerts formatted correctly.

This is great however I just get this:

Is this the formatting error we are talking about without the Core update? If yes I am willing to wait. But this for me looks like more than a formatting setting!

Callmonitor definately is enabled via Fritz!Phone. And username and password are correct - I can access the Fritz!Box and the user has the view and edit settings:

Benutzer mit dieser Berechtigung können alle Einstellungen der FRITZ!Box sehen und bearbeiten.

Any help would be appreciated!

[wishmaster270]

@coernel
The view you show indicates that there are no recent calls and that the fetch of the telephone book is still running or was not successful. But it is the normal view. The calls will be signaled as alerts. So make sure you have the default alert module activated in your config.js:

		{
			module: "alert",
		},

The formatting will only be wrong in the alert.

Please make sure to check the following things, too:

• You cloned the right fork with the following command?

cd ~/MagicMirror/modules
git clone git@github.com:drtorchwood/MMM-FRITZ-Box-Callmonitor-py3.git

Edit:
* You use the right branch by calling the following commands?
As of 2023-02-25 the changes are merged to the master branch of the fork. So no need to change to the code_update_2023 branch anymore.

• You installed the JavaScript dependencies?

cd ~/MagicMirror/modules/MMM-FRITZ-Box-Callmonitor-py3
npm install

• You installed the Python dependencies?

sudo pip3 install fritzconnection

• You activated the call monitor service of the box by dialing the following number with one of your phones?

#96*5*

• You configured the right IP address in config.js with option fritzIP. Default is 192.168.178.1?

		{
			module: 'MMM-FRITZ-Box-Callmonitor-py3',
			position: 'bottom_left',
			header: "Verpasste Anrufe", 
			config: {
				username: "foo",
				password: "bar",
				fritzIP: "10.18.8.1",
				reloadContactsInterval: 50,
				minimumCallLength: 0,
				showContactsStatus: true,
				maximumCallDistance: 60*6,
				maximumCalls: 4,
				fade: false,
				debug: true,
			}
		},

If the call monitor service is not activated on the fritz box you will see a message like this in the logs:

[24.02.2023 16:31.29.944] [ERROR] Error: connect ECONNREFUSED 192.168.178.1:1012
    at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1494:16) {
  errno: -111,
  code: 'ECONNREFUSED',
  syscall: 'connect',
  address: '192.168.178.1,
  port: 1012
}

And again the call monitor service is independent of username and password. The credentials are used to fetch the telephone book and the past calls only.

Thats how the default view looks in my case:

And thats how it looks if there is a incomming call:

If you do not use the current development branch of MagicMirror there may be some html code in the alert and it will look like <span style='font-size:30px'>Tom</span>