<?xml version="1.0" encoding="UTF-8"?><rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" version="2.0"><channel><title><![CDATA[Navigation inside MagicMirror with Buttons &#x2F; Rotary Encoder on GPIO]]></title><description><![CDATA[<p dir="auto">Hi,</p>
<p dir="auto">i am searching for a navigation for my mirror, finally i would like to use an rotary encoder.<br />
I will start with 3 Push Buttons (Left, Right, Enter), as i think this is easier to start.<br />
I got my inspiration from MMM-Buttons which works OK on my mirror but is limited (choosing Pages - MMM-Pages).<br />
I would like to have an individual (extendable) navigation where i can choose from different options.</p>
<p dir="auto"><strong>Example:</strong><br />
Navigation is hidden and shows only up, if used/needed for some seconds.</p>
<ul>
<li>Enter (first time): Navigation shows up</li>
<li>Left/Right: Move inside the navigation</li>
<li>Enter: choose the selected navigation entry and execute (or enter another navigation level)</li>
<li>after x seconds, Navigation disappears</li>
</ul>
<p dir="auto">Something like this, but not on separate display rather on MM:<br />
<img src="/assets/uploads/files/1522429138946-navigation_request.jpg" alt="0_1522429140816_Navigation_Request.JPG" class=" img-fluid img-markdown" /></p>
<p dir="auto"><strong>Ideas:</strong></p>
<ul>
<li>Choose Pages (MMM-Pages, Command to Execute: PAGE_INCREMENT/PAGE_DECREMENT)</li>
<li>Show Newsfeed Details (News Feed, Command to Execute: ARTICLE_MORE_DETAILS/ARTICLE_LESS_DETAILS)
<ul>
<li>Scroll in Newsfeed (ARTICLE_MORE_DETAILS shows Website where scrolling is needed)</li>
</ul>
</li>
<li>Show/Hide Modules</li>
<li>Volume Up/Down</li>
<li>etc.</li>
</ul>
<p dir="auto">Maybe someone has an idea, how to realise that or are there already modules with some matching code to do that?<br />
I have seen some navigation modules, but they interact with mouse or touchscreen but not with Button on GPIO.</p>
<p dir="auto">I am looking forward hearing from you.</p>
<p dir="auto">Best regards</p>
<p dir="auto">AxLED</p>
]]></description><link>https://forum.magicmirror.builders/topic/6866/navigation-inside-magicmirror-with-buttons-rotary-encoder-on-gpio</link><generator>RSS for Node</generator><lastBuildDate>Wed, 20 May 2026 22:19:06 GMT</lastBuildDate><atom:link href="https://forum.magicmirror.builders/topic/6866.rss" rel="self" type="application/rss+xml"/><pubDate>Fri, 30 Mar 2018 17:01:22 GMT</pubDate><ttl>60</ttl><item><title><![CDATA[Reply to Navigation inside MagicMirror with Buttons &#x2F; Rotary Encoder on GPIO on Sun, 13 May 2018 19:15:07 GMT]]></title><description><![CDATA[<p dir="auto">Hi to all,<br />
i finished the first version of my module, detail see: <a href="https://forum.magicmirror.builders/topic/7167/mmm-navigate-navigation-inside-magicmirror-with-rotary-encoder">MMM-Navigate</a></p>
<p dir="auto">AxLED</p>
]]></description><link>https://forum.magicmirror.builders/post/39440</link><guid isPermaLink="true">https://forum.magicmirror.builders/post/39440</guid><dc:creator><![CDATA[AxLed]]></dc:creator><pubDate>Sun, 13 May 2018 19:15:07 GMT</pubDate></item><item><title><![CDATA[Reply to Navigation inside MagicMirror with Buttons &#x2F; Rotary Encoder on GPIO on Mon, 07 May 2018 21:49:19 GMT]]></title><description><![CDATA[<p dir="auto">Hi to all,</p>
<p dir="auto">i made some further progress, i solved following topics:</p>
<ul>
<li>i don’t need to set focus on a div anymore after loading MM, as GPIO Input can directly interact with my navigation</li>
<li>i replaced the keyboard eventlistener by GPIO Inputs of a rotary encoder</li>
<li>i wrote a node_helper.js for the rotary encoder</li>
<li>the module has only one depencie - onoff</li>
</ul>
<p dir="auto">So my module is beta or alpha so far, is there a special way to put it on github or can somebody explain it to me, how to do it, so i can put the module online.</p>
<p dir="auto">Partlist for using this module:</p>
<ul>
<li>Rotary encoder (KY-040)</li>
<li>3 free GPIO Pins on raspberry</li>
</ul>
<p dir="auto">Regards AxLED</p>
]]></description><link>https://forum.magicmirror.builders/post/39282</link><guid isPermaLink="true">https://forum.magicmirror.builders/post/39282</guid><dc:creator><![CDATA[AxLed]]></dc:creator><pubDate>Mon, 07 May 2018 21:49:19 GMT</pubDate></item><item><title><![CDATA[Reply to Navigation inside MagicMirror with Buttons &#x2F; Rotary Encoder on GPIO on Tue, 01 May 2018 20:01:56 GMT]]></title><description><![CDATA[<p dir="auto">Hi to all,</p>
<p dir="auto">i made some progress, i solved following topics:</p>
<ul>
<li>i got <code>addEventListener</code> working (it now listens to Keyboard inputs so far, Future: GPIO PINs)</li>
<li>i dont have a need for <code>jQuery</code> anymore (reduces complexity)</li>
<li>i improved the navigation-actions from http-Links (to MMM-Remote-control) to direct using <code>sendnotifications</code> (reduces complexity and dependencies)</li>
</ul>
<p dir="auto">and i still have some problems (challenges):</p>
<ul>
<li>how can i set the focus on a <code>div</code> on my module afer MM finished loading? I need this so my keyboard keypresses are recognised. (Setting the focus manual by mouse let my module work).</li>
</ul>
<p dir="auto">Maybe someone can help me or give me some tips.</p>
<p dir="auto">Regards AxLED</p>
]]></description><link>https://forum.magicmirror.builders/post/39148</link><guid isPermaLink="true">https://forum.magicmirror.builders/post/39148</guid><dc:creator><![CDATA[AxLed]]></dc:creator><pubDate>Tue, 01 May 2018 20:01:56 GMT</pubDate></item><item><title><![CDATA[Reply to Navigation inside MagicMirror with Buttons &#x2F; Rotary Encoder on GPIO on Fri, 27 Apr 2018 19:46:28 GMT]]></title><description><![CDATA[<p dir="auto">i made some progress to the following problem:<br />
30. Failure: script source in html site: <a href="http://code.jquery.com/jquery-1.7.2.min.js" target="_blank" rel="noopener noreferrer nofollow ugc">http://code.jquery.com/jquery-1.7.2.min.js</a></p>
<p dir="auto"><strong>Problem 1:</strong> I tried getScripts to load it</p>
<pre><code>getScripts: function() {
		return [
			'http://code.jquery.com/jquery-1.7.2.min.js', //js laden
		]
	},
</code></pre>
<p dir="auto">but i dont know if loading worked an how i can test it.<br />
<strong>Solution:</strong> F12 Debugger (Firefox) shows “Load script: <a href="http://code.jquery.com/jquery-1.7.2.min.js" target="_blank" rel="noopener noreferrer nofollow ugc">http://code.jquery.com/jquery-1.7.2.min.js</a> in loader.js:182:4”.</p>
<p dir="auto">So i know (guess) it works.</p>
<p dir="auto">Now i moved to the next problem, i tried to use</p>
<pre><code>addEventListener
</code></pre>
<p dir="auto">in my .js code to react on mouseover, to color hyperlinks red (just an example to test how and if it works). One of my 4 links turn red (always the last one), could this be because i create my links in a “for loop” and addEventListener just grabs the last one?</p>
<p dir="auto">Looking forward hearing from you.</p>
<p dir="auto">Greets AxLED</p>
]]></description><link>https://forum.magicmirror.builders/post/39014</link><guid isPermaLink="true">https://forum.magicmirror.builders/post/39014</guid><dc:creator><![CDATA[AxLed]]></dc:creator><pubDate>Fri, 27 Apr 2018 19:46:28 GMT</pubDate></item><item><title><![CDATA[Reply to Navigation inside MagicMirror with Buttons &#x2F; Rotary Encoder on GPIO on Thu, 26 Apr 2018 20:55:14 GMT]]></title><description><![CDATA[<p dir="auto">thank you yawns</p>
]]></description><link>https://forum.magicmirror.builders/post/38963</link><guid isPermaLink="true">https://forum.magicmirror.builders/post/38963</guid><dc:creator><![CDATA[AxLed]]></dc:creator><pubDate>Thu, 26 Apr 2018 20:55:14 GMT</pubDate></item><item><title><![CDATA[Reply to Navigation inside MagicMirror with Buttons &#x2F; Rotary Encoder on GPIO on Thu, 26 Apr 2018 20:54:40 GMT]]></title><description><![CDATA[<p dir="auto">Moved as requested :)</p>
]]></description><link>https://forum.magicmirror.builders/post/38962</link><guid isPermaLink="true">https://forum.magicmirror.builders/post/38962</guid><dc:creator><![CDATA[yawns]]></dc:creator><pubDate>Thu, 26 Apr 2018 20:54:40 GMT</pubDate></item><item><title><![CDATA[Reply to Navigation inside MagicMirror with Buttons &#x2F; Rotary Encoder on GPIO on Thu, 26 Apr 2018 20:36:19 GMT]]></title><description><![CDATA[<p dir="auto">Hi,</p>
<p dir="auto">because of suggestion of some users, i try to write my own module and need some help.</p>
<p dir="auto">I have a working html file with following components:</p>
<ul>
<li>
<ol start="10">
<li>css</li>
</ol>
</li>
<li>
<ol start="20">
<li>html</li>
</ol>
</li>
<li>
<ol start="30">
<li>script source in html site: <a href="http://code.jquery.com/jquery-1.7.2.min.js" target="_blank" rel="noopener noreferrer nofollow ugc">http://code.jquery.com/jquery-1.7.2.min.js</a></li>
</ol>
</li>
<li>
<ol start="40">
<li>javascript in html site, to react on some interaction</li>
</ol>
</li>
</ul>
<p dir="auto"><strong>navigation.html in action:</strong><br />
<img src="/assets/uploads/files/1524774324099-mm-navigation.gif" alt="0_1524774325444_MM-navigation.gif" class=" img-fluid img-markdown" /></p>
<p dir="auto">I tried to reconstruct the html file as a MMM-Module, with some succuss and some failure.<br />
<strong>Success:</strong><br />
10. css<br />
20. html</p>
<p dir="auto"><img src="/assets/uploads/files/1524774372213-mm4.jpg" alt="0_1524774373586_MM4.JPG" class=" img-fluid img-markdown" /></p>
<p dir="auto"><strong>Failure:</strong><br />
30. script source in html site: <a href="http://code.jquery.com/jquery-1.7.2.min.js" target="_blank" rel="noopener noreferrer nofollow ugc">http://code.jquery.com/jquery-1.7.2.min.js</a></p>
<p dir="auto"><strong>Problem 1:</strong> I tried getScripts to load it</p>
<pre><code>getScripts: function() {
		return [
			'http://code.jquery.com/jquery-1.7.2.min.js', //js laden
		]
	},
</code></pre>
<p dir="auto">but i dont know if loading worked an how i can test it.</p>
<ol start="40">
<li>javascript in html site, to react on some interaction</li>
</ol>
<p dir="auto"><strong>Problem 2:</strong> I have javascript code in my html file, but i dont know where and how to place it in my module.js file</p>
<p dir="auto"><img src="/assets/uploads/files/1524774668661-code.jpg" alt="0_1524774669736_code.JPG" class=" img-fluid img-markdown" /></p>
<p dir="auto">Maybe somebody can help me or give me some hints.</p>
<p dir="auto">Regards</p>
<p dir="auto">AxLED<br />
@moderator: maybe this topic can be moved to ‘modules -&gt; development’</p>
]]></description><link>https://forum.magicmirror.builders/post/38961</link><guid isPermaLink="true">https://forum.magicmirror.builders/post/38961</guid><dc:creator><![CDATA[AxLed]]></dc:creator><pubDate>Thu, 26 Apr 2018 20:36:19 GMT</pubDate></item><item><title><![CDATA[Reply to Navigation inside MagicMirror with Buttons &#x2F; Rotary Encoder on GPIO on Mon, 23 Apr 2018 21:56:53 GMT]]></title><description><![CDATA[<p dir="auto"><a class="plugin-mentions-user plugin-mentions-a" href="/user/axled" aria-label="Profile: AxLed">@<bdi>AxLed</bdi></a> said in <a href="/post/38799">Navigation inside MagicMirror with Buttons / Rotary Encoder on GPIO</a>:</p>
<blockquote>
<p dir="auto">led pikeyd (to map GPIO Buttons to keyboard press, as my navigation.html works with javascript which interacts with keyboard press)</p>
</blockquote>
<p dir="auto">What help exactly do you need? I haven’t taken a look but it seems like a nodejs library for rpi gpios exists making it a completely viable solution.<br />
A heads up: don’t hack your solution depending on iframe and remote control. Everything you described is natively possible and jumping through many hoops will only introduced bugs and glitches.</p>
<hr />
<p dir="auto">Gib mir bescheid woran genau es momentan scheitert und ich kann dir sicher den ein oder anderen Anstoß geben.</p>
]]></description><link>https://forum.magicmirror.builders/post/38803</link><guid isPermaLink="true">https://forum.magicmirror.builders/post/38803</guid><dc:creator><![CDATA[Patex]]></dc:creator><pubDate>Mon, 23 Apr 2018 21:56:53 GMT</pubDate></item><item><title><![CDATA[Reply to Navigation inside MagicMirror with Buttons &#x2F; Rotary Encoder on GPIO on Mon, 23 Apr 2018 20:36:59 GMT]]></title><description><![CDATA[<p dir="auto">Hi to the builders,</p>
<p dir="auto">i made some progress.</p>
<ul>
<li>i connected 3 buttons to my RPI1 (my TestPi, as my pixel VM doesnt have GPIO)
<ul>
<li>arrow up</li>
<li>arrow down</li>
<li>enter</li>
</ul>
</li>
<li>installed pikeyd (to map GPIO Buttons to keyboard press, as my navigation.html works with javascript which interacts with keyboard press)</li>
<li>modified css and javascript on navigation.html, so i grab focus on loading and hide after x milliseconds (navigation shows back on button press)</li>
</ul>
<p dir="auto"><strong>Requirements (so far):</strong></p>
<ul>
<li>MMM-Remote-Control (as i use hyperlinks to navigate)</li>
<li>MMM-IFrame (to show my navigation.html)</li>
<li>pikeyd (<a href="https://github.com/mmoller2k/pikeyd" target="_blank" rel="noopener noreferrer nofollow ugc">https://github.com/mmoller2k/pikeyd</a>)</li>
</ul>
<p dir="auto">Here are some screenshots:<br />
<img src="/assets/uploads/files/1524515723416-mm-navigation.gif" alt="0_1524515723542_MM-navigation.gif" class=" img-fluid img-markdown" /></p>
<p dir="auto"><strong>I still have some problems:</strong></p>
<ul>
<li>loosing focus on navigation.html, after “Button Enter” at Chromium on RPI1 via VNC (Webbrowser of Win PC works with keyboard press an keeps focus after pressing enter), maybe this works on RPI3 (my productive environment)</li>
</ul>
<p dir="auto">Is there someone who can help me to put this in a module?<br />
I like the idea, to navigate through my MM using only 3 buttons (planed: Rotary Encoder)</p>
<p dir="auto">Regards</p>
<p dir="auto">AxLED</p>
]]></description><link>https://forum.magicmirror.builders/post/38799</link><guid isPermaLink="true">https://forum.magicmirror.builders/post/38799</guid><dc:creator><![CDATA[AxLed]]></dc:creator><pubDate>Mon, 23 Apr 2018 20:36:59 GMT</pubDate></item><item><title><![CDATA[Reply to Navigation inside MagicMirror with Buttons &#x2F; Rotary Encoder on GPIO on Thu, 05 Apr 2018 21:39:58 GMT]]></title><description><![CDATA[<p dir="auto">Hello,</p>
<p dir="auto">i started creating a html file with javascript, which responses on keyboard action.</p>
<p dir="auto">So far i check for 3 Keys: Arrow Up, Arrow Down and Enter.</p>
<p dir="auto"><strong>For testing:</strong></p>
<ul>
<li>i showmy html site (navigation.html) in module MMM-iFrame.</li>
<li>i call MM via Webbrowser from a PC</li>
<li>i have to set the focus in the MMM-iFrame Window first</li>
<li>now i can “scroll to my pages” and “show details on Newsfeed” (realized via Hyperlinks of MMM-Remote-Control)</li>
</ul>
<p dir="auto"><strong>Screenshot:</strong><br />
<img src="/assets/uploads/files/1522961337305-navi1.jpg" alt="0_1522961338522_navi1.JPG" class=" img-fluid img-markdown" /></p>
<p dir="auto"><strong>Code of navigation.html:</strong><br />
(@moderator: i dont have the permission to upload that 13KB HTML File, can you help me?)</p>
<p dir="auto">So the first steps are made, i hope that “Website javascript” can somehow be translated to javascript code which can be handled by MM needs it.</p>
<p dir="auto">AxLED</p>
]]></description><link>https://forum.magicmirror.builders/post/38017</link><guid isPermaLink="true">https://forum.magicmirror.builders/post/38017</guid><dc:creator><![CDATA[AxLed]]></dc:creator><pubDate>Thu, 05 Apr 2018 21:39:58 GMT</pubDate></item></channel></rss>