<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>nodejs Archives - ClickedyClick</title>
	<atom:link href="https://gergely.imreh.net/blog/tag/nodejs/feed/" rel="self" type="application/rss+xml" />
	<link>https://gergely.imreh.net/blog/tag/nodejs/</link>
	<description>Life in real, complex and digital.</description>
	<lastBuildDate>Wed, 31 Jul 2013 14:56:12 +0000</lastBuildDate>
	<language>en-GB</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	
	<item>
		<title>Electronic check-in at the Taipei Hackerspace</title>
		<link>https://gergely.imreh.net/blog/2013/07/electronic-check-in-at-the-taipei-hackerspace/</link>
					<comments>https://gergely.imreh.net/blog/2013/07/electronic-check-in-at-the-taipei-hackerspace/#comments</comments>
		
		<dc:creator><![CDATA[Gergely Imreh]]></dc:creator>
		<pubDate>Wed, 31 Jul 2013 07:47:18 +0000</pubDate>
				<category><![CDATA[Maker]]></category>
		<category><![CDATA[Programming]]></category>
		<category><![CDATA[arduino]]></category>
		<category><![CDATA[hackerspace]]></category>
		<category><![CDATA[nodejs]]></category>
		<category><![CDATA[rfid]]></category>
		<category><![CDATA[web]]></category>
		<guid isPermaLink="false">https://gergely.imreh.net/blog/?p=1523</guid>

					<description><![CDATA[<p>Made an Arduino/RFID/Node.js/Websockets powered real-time check-in/out system for the Taipei Hackerspace, to see better when is someone there so people come visit.</p>
<p>The post <a href="https://gergely.imreh.net/blog/2013/07/electronic-check-in-at-the-taipei-hackerspace/">Electronic check-in at the Taipei Hackerspace</a> appeared first on <a href="https://gergely.imreh.net/blog">ClickedyClick</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p>One issue we have frequently at the <a title="Taipei Hackerspace mailing list" href="https://groups.google.com/forum/?fromgroups#!forum/taipeihackerspace">Taipei Hackerspace</a> is that people don&#8217;t know when we are open. Our  basic rule is simple: whenever a keyholder member is in the Hackerspace, anyone/everyone can come. In practice people never really know if anyone&#8217;s there.</p>
<p>They could give <a title="Call the Taipei Hackerspace" href="tel:00886225507630">a call</a> to the space, or even send an email to the <a title="Taipei Hackerspace mailing list" href="https://groups.google.com/forum/?fromgroups#!forum/taipeihackerspace">mailing list</a>, while the people I know usually end up asking me directly &#8211; hey, anyone&#8217;s at the space at the moment? Since I don&#8217;t always know the answer, the search was on for a better &#8211; maybe more technological or hackish solution: let&#8217;s build an electronic check-in/out system that will show the current status on out <a title="Taipei Hackerspace website" href="http://tpehack.no-ip.biz/">website</a>, so people can check right there.</p>
<p>I had the following idea in the back of my mind for a few weeks and even got the hardware acquired, but one of our co-founder had to call me out by name on the mailing list, a few days ago to swing into action. So now here it is, kinda working, ready for real usage.</p>
<p>The main idea is that in Taipei pretty much everyone has an <a title="EasyCard on wikipedia" href="http://en.wikipedia.org/wiki/EasyCard">EasyCard</a>, an 13.56MHz RFID card that is used for all public transport in the city and a lot more. The <a title="RFID-RC522 on eBay" href="http://www.ebay.com/sch/Electrical-Test-Equipment-/92074/i.html?_from=R40&amp;_nkw=rc522">RC522 card-antenna module</a> seems to be able to read the card pretty well, and all I need to get off it is the the ID number which is pretty straightforward (after digging the Arduino forums for source code).</p>
<p>The project in a nutshell is:</p>
<ul>
<li><span style="line-height: 13px;">Use Arduino Mega with an RC522 board to get the ID number of a given EasyCard</span></li>
<li>Use witches to get whether the person is checking in or out</li>
<li>Use LEDs to provide some feedback and basic user interface for the hardware</li>
<li>Node.js server to communicate with the Arduino, interface the check-in/out database, and provide API and realtime access to the data</li>
<li>Create a bit of interface on the website to display the check-in status</li>
</ul>
<p>Now let me dig into the different parts in detail.</p>
<h3>RFID</h3>
<p>The RC522 module has 8 pins, and Arduino can use the SPI library to communicate with it. I used <a title="Arduino Mega ADK home page" href="http://arduino.cc/en/Main/ArduinoBoardADK">Arduino Mega ADK</a>, because the SPI pins are conveniently accessible, unlike e.g. the <a title="Arduino Leonardo" href="http://arduino.cc/en/Main/ArduinoBoardLeonardo">Leonardo</a>, for which I would have had to make some new cables or headers. The RC522(pin number)-&gt;Mega(pin number) connections are done such that:</p>
<ul>
<li>SA(1) -&gt; SS(53)</li>
<li>SCK(2) -&gt; SCK(52)</li>
<li>MOSI(3) -&gt; MOSI(51)</li>
<li>MISO(4) -&gt; MISO(50)</li>
<li>(5) not connected</li>
<li>GND(6) -&gt; GND</li>
<li>RST(8) -&gt; (any digital pin)</li>
<li>+3.3V(8) -&gt; +3.3V</li>
</ul>
<figure id="attachment_1531" aria-describedby="caption-attachment-1531" style="width: 500px" class="wp-caption aligncenter"><img fetchpriority="high" decoding="async" class="size-full wp-image-1531" alt="Photo of the electronics" src="https://gergely.imreh.net/blog/wp-content/uploads/2013/07/rc522.jpg" width="500" height="257" /><figcaption id="caption-attachment-1531" class="wp-caption-text">RFID-RC522, with blank card and pins</figcaption></figure>
<p>The source code to talk to the card is from a <a title="How to get started with the Mifare MF522-AN and Arduino" href="http://www.grantgibson.co.uk/blog/2012/04/how-to-get-started-with-the-mifare-mf522-an-and-arduino/">blog</a>, and originally from a tech shop in China, I guess (based on the big bunch of Simplified Chinese comments).</p>
<p>Switches and Visual Feedback</p>
<p>I wanted to make as simple interface for the card reader as possible. Added this pair of switches and LEDs (the D1 being green, and D2 being red). After the Arduino received a card ID from the reader, the LEDs are blinked to prompt people to press either the Check In or Check Out buttons. If they press either of them, the corresponding LED is blinked very brightly for a bit, and the card ID and check-in/out event is sent to the connected computer via serial connection</p>
<figure id="attachment_1524" aria-describedby="caption-attachment-1524" style="width: 500px" class="wp-caption aligncenter"><img decoding="async" class="size-full wp-image-1524  " alt="The (very basic) circuit for the check-in/out buttons and visual feedback LEDs" src="https://gergely.imreh.net/blog/wp-content/uploads/2013/07/checkinswitches.png" width="500" height="265" /><figcaption id="caption-attachment-1524" class="wp-caption-text">The (very basic) circuit for the check-in/out buttons and visual feedback LEDs. &#8220;Pins&#8221; refer to the Arduino pins used in the current version</figcaption></figure>
<p>If no button press occurs within 10 seconds or so, the reading is discarded and the card reader goes back to listening mode.</p>
<h3>Webserver</h3>
<p><a title="Node.js homepage" href="http://nodejs.org/">Node.js</a> is very useful to make quick web services, and its library support is not too bad at all, although it&#8217;s not all smooth sailing: their documentation is often scarce at best. Nevertheless it was the fastest one to get things up and running, since I have used before almost all required components.</p>
<p>The server communicates with Arduino via the <a title="Serialport library" href="https://npmjs.org/package/serialport">serialport</a> library. I&#8217;m more used to Python&#8217;s <a title="PySerial" href="http://pyserial.sourceforge.net/">pyserial</a>, though in this case it was very handy that serialport can emit read events, thus the server can just wait until there&#8217;s something to read and run some functions on the incoming data. In my experience, serialport wouldn&#8217;t be good for every cornercase I came across in serial-land, but in this setup works beautifully.</p>
<p>I chose SQLite3 to store the data, using the <a title="sqlite3 library" href="https://npmjs.org/package/sqlite3">sqlite3</a> library. There are a bunch of others, had to look around which one is still being developed. This particular library is not too bad, though I found myself fighting the lack of documentation and asynchronicity quite a bit. The resulting code is pretty ugly I&#8217;m sure, in some places inefficient because I didn&#8217;t know how to get to the result I wanted in a less roundabout way, still it seems to work and that is what matters for a prototype.</p>
<p>First I made a simple REST API to query the currently checked-in people, and later added (real-time) push updates via <a title="Socket.io homepage" href="http://socket.io/">socket.io</a>, to make it nicer. It&#8217;s brilliant that without any polling, all clients can be updated once someone signs in or out.</p>
<p>Since this code is running on a different computer than our main web server, had to play around with the <a title="HTTP access control (CORS)" href="https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS">Access-Control-Allow-Origin</a> header, and adjusting the settings of our  router to make it accessible for the web correctly.</p>
<p>Tried to add a pretty-much self-contained script that the front-end can load, and it handles everything, just need an appropriate HTML span or div element to display the information.</p>
<figure id="attachment_1527" aria-describedby="caption-attachment-1527" style="width: 500px" class="wp-caption aligncenter"><img decoding="async" class="size-full wp-image-1527" alt="Photo showing the circuit used for the check-in system" src="https://gergely.imreh.net/blog/wp-content/uploads/2013/07/checkinarduino.jpg" width="500" height="375" /><figcaption id="caption-attachment-1527" class="wp-caption-text">Hardware setup for checking in/out: Arduino Mega, RFID-RC522 circuit, and some switches and LEDs.</figcaption></figure>
<p>The result is pretty good, as long as the card-reader does not crash. Originally the results were displayed in a table, but wanted to make it more human, so here&#8217;s the format I ended up with:</p>
<figure id="attachment_1525" aria-describedby="caption-attachment-1525" style="width: 500px" class="wp-caption aligncenter"><img loading="lazy" decoding="async" class="size-full wp-image-1525" alt="Website screenshot showing two people checked in" src="https://gergely.imreh.net/blog/wp-content/uploads/2013/07/checkedinscreenshot.png" width="500" height="96" /><figcaption id="caption-attachment-1525" class="wp-caption-text">Screenshot of the homepage with one particular check-in situation.</figcaption></figure>
<p>There can also be people with no name, they just show up something like &#8220;Right now there are three people checked in the Hackerspace: Greg, and two other people.&#8221;</p>
<h3>It lives!</h3>
<p>Here&#8217;s a quick demonstration video of how does it work:</p>
<p><iframe loading="lazy" title="Taipei Hackerspace Check-in System" width="580" height="326" src="https://www.youtube.com/embed/L3ccO_AuhQ8?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></p>
<p>So you can check out our website at <a href="http://tpehack.no-ip.biz/">http://tpehack.no-ip.biz/</a> for the live results, and drop in if you are in the neighbourhood if there&#8217;s anyone in the &#8216;space.</p>
<p>The whole source code is shared in <a title="thcheckin Github repo" href="https://github.com/taipeihackerspace/thcheckin">a Github repository</a>: the Arduino sketch, the server script, and any additional files. I&#8217;m sure there are a lot of things that could be improved about it.</p>
<p>The post <a href="https://gergely.imreh.net/blog/2013/07/electronic-check-in-at-the-taipei-hackerspace/">Electronic check-in at the Taipei Hackerspace</a> appeared first on <a href="https://gergely.imreh.net/blog">ClickedyClick</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://gergely.imreh.net/blog/2013/07/electronic-check-in-at-the-taipei-hackerspace/feed/</wfw:commentRss>
			<slash:comments>3</slash:comments>
		
		
			</item>
		<item>
		<title>Laboratory 2.0 &#8211; a monitoring system</title>
		<link>https://gergely.imreh.net/blog/2012/10/laboratory-2-0-a-monitoring-system/</link>
					<comments>https://gergely.imreh.net/blog/2012/10/laboratory-2-0-a-monitoring-system/#comments</comments>
		
		<dc:creator><![CDATA[Gergely Imreh]]></dc:creator>
		<pubDate>Sun, 28 Oct 2012 14:03:15 +0000</pubDate>
				<category><![CDATA[Admin]]></category>
		<category><![CDATA[Lab]]></category>
		<category><![CDATA[Programming]]></category>
		<category><![CDATA[mongodb]]></category>
		<category><![CDATA[nodejs]]></category>
		<category><![CDATA[python]]></category>
		<guid isPermaLink="false">http://gergely.imreh.net/blog/?p=1150</guid>

					<description><![CDATA[<p>Being lazy physicist programmer, I grab on every opportunity to automate things in our lab. Recently I had my first large scale chance to try out the technologies I was playing with in my spare time, and amaze my coworkers. And of course create something useful.</p>
<p>The post <a href="https://gergely.imreh.net/blog/2012/10/laboratory-2-0-a-monitoring-system/">Laboratory 2.0 &#8211; a monitoring system</a> appeared first on <a href="https://gergely.imreh.net/blog">ClickedyClick</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p>Looks like that one of my specialty as a physicist, and contribution to the labs where I have worked so far, is bringing different kinds of programming techniques, and technologies to the table. I&#8217;m not saying I&#8217;m any better than many of the professors, post-docs, and students I&#8217;ve met so far (there are plenty of ingenious ones), it&#8217;s more like I experiment with different tools, have tried more of the cutting edge or recent technologies, did some web programming and could whip up something quick &#8211; that might not work very well at first, but does broaden the horizon for the rest of the people.</p>
<p>Also, I&#8217;m a lazy person, so want to automate as much as possible. That was on my mind recently when we have been preparing to do a vacuum-system <a title="Bake-out explanation on Wikipedia" href="http://en.wikipedia.org/wiki/Bake-out" target="_blank">bake-out</a>. It&#8217;s essentially a procedure to have a delicate experimental system, mostly made up of steel, glass, and stuff like that, closed up from the atmosphere, all the air pumped out, then heated up to high temperature (~150-300°C). One has to be careful, because things can break, there are temperature limitations for some materials, also on how quickly that temperature can change, requiring careful monitoring of the status of the system. And the whole thing takes something like two weeks or more. Perfect setting for automation.</p>
<h2>Set up the electronics</h2>
<p>The pressure measurements are done by some expensive other equipment so didn&#8217;t have to bother with that one yet, so set to work first on the temperature monitoring. Before it was a bunch of <a title="Thermocouple on Wikipedia" href="http://en.wikipedia.org/wiki/Thermocouple" target="_blank">thermocouples</a> and <a title="Multimeter on Wikipedia" href="http://en.wikipedia.org/wiki/Multimeter" target="_blank">multimeters</a>, requiring manual intervention and lots of labour. Instead, got some inspiration from <a title="Thermocouple Amplifier MAX31855 breakout board (MAX6675 upgrade) - v1.0" href="http://www.adafruit.com/products/269" target="_blank">Adafruit&#8217;s Thermocouple Breakout Board</a>, using the <a title="MAX31855 Cold-Junction Compensated Thermocouple-to-Digital Converter" href="http://www.maximintegrated.com/datasheet/index.mvp/id/7273" target="_blank">MAX31855</a> chip, and also from the <a title="Ocean Controls K Thermocouple Multiplexer Shield" href="http://www.oceancontrols.com.au/KTA-259.html" target="_blank">Thermocouple Multiplexer Shield</a>. It can handle only one channel, but can use some other chip together with it to switch between the different thermocouples, and so we can read it out one-by-one. The Adafruit board could only handle 1 channel, and the multiplexer shield was using an older chip for the measurement that I could not buy anymore. In the end, found a good analog multiplexer that one that is sold in the computer market here in Taipei, the <a title="CD4067B CMOS Single 16-Channel Analog Multiplexer/Demultiplexer" href="http://www.ti.com/product/cd4067b" target="_blank">CD4067B</a>, and it works pretty well.</p>
<figure id="attachment_1167" aria-describedby="caption-attachment-1167" style="width: 550px" class="wp-caption aligncenter"><a href="http://gergely.imreh.net/blog/wp-content/uploads/2012/10/temphack2.jpg"><img loading="lazy" decoding="async" class="size-large wp-image-1167" title="Breadboard setup for temperature monitoring" src="http://gergely.imreh.net/blog/wp-content/uploads/2012/10/temphack2-1024x768.jpg" alt="Breadboard setup for temperature monitoring Arduino" width="550" height="412" srcset="https://gergely.imreh.net/blog/wp-content/uploads/2012/10/temphack2-1024x768.jpg 1024w, https://gergely.imreh.net/blog/wp-content/uploads/2012/10/temphack2-500x375.jpg 500w, https://gergely.imreh.net/blog/wp-content/uploads/2012/10/temphack2-768x576.jpg 768w, https://gergely.imreh.net/blog/wp-content/uploads/2012/10/temphack2.jpg 2048w" sizes="auto, (max-width: 550px) 100vw, 550px" /></a><figcaption id="caption-attachment-1167" class="wp-caption-text">Breadboard setup for temperature monitoring with Arduino</figcaption></figure>
<p>Of course, setting it all up was quite a bit of fun times, as there were way too many gotchas along the way.</p>
<ul>
<li>MAX31855 is a <a title="Surface Mount Technology on Wikipedia" href="http://en.wikipedia.org/wiki/Surface-mount_technology" target="_blank">surface-mount</a> component, and haven&#8217;t worked with it before. Not too bad, and can be much neater, just takes some plactice</li>
<li>MAX31855 is a 3.3V circuit, so the CMOS voltage levels used by my <a title="Arduino Mega ADK on Arduino Wiki" href="http://www.arduino.cc/en/Main/ArduinoBoardADK" target="_blank">Arduino Mega ADK</a> had to be level shifted</li>
<li>Unlike the older chip, MAX31855 really needs differential input, and it&#8217;s much more sensitive to the environment. This required different kind of analog multiplexer than that board had</li>
<li>The Arduino Mega is a new model for me, and had some strange behaviour in terms of the serial communication</li>
<li>Surprisingly there are not too many options for 3.3V voltage regulators over here, just the LM1117, which is different from what others are using elsewhere</li>
<li>Lots of noise and stability issues until figured out what should be how. For example under no circumstance should touch the thermocouple to conducting surfaces, and avoid ground loops</li>
<li>While MAX31855 says it&#8217;s &#8220;cold-point compensated&#8221;, meaning that it accounts for the chip-s local temperature when measuring the thermocouple, it doesn&#8217;t appear completely compensated, meaning that we can have unexpected measurement change because the chip is heating up for example by being in a closed box.</li>
<li>Figuring out the right amount of time to wait between switching channels (375ms seems to be good enough, 500ms is totally fine)</li>
</ul>
<div>In the end, though, we did have a nice 16 channel thermocouple multiplexer, sending off the measurements onto an LCD screen and to the computer over an USB cable.</div>
<figure id="attachment_1166" aria-describedby="caption-attachment-1166" style="width: 550px" class="wp-caption aligncenter"><a href="http://gergely.imreh.net/blog/wp-content/uploads/2012/10/temphack.jpg"><img loading="lazy" decoding="async" class="size-large wp-image-1166" title="Temperature monitoring board" src="http://gergely.imreh.net/blog/wp-content/uploads/2012/10/temphack-1024x768.jpg" alt="Temperature monitoring board soldered" width="550" height="412" srcset="https://gergely.imreh.net/blog/wp-content/uploads/2012/10/temphack-1024x768.jpg 1024w, https://gergely.imreh.net/blog/wp-content/uploads/2012/10/temphack-500x375.jpg 500w, https://gergely.imreh.net/blog/wp-content/uploads/2012/10/temphack-768x576.jpg 768w, https://gergely.imreh.net/blog/wp-content/uploads/2012/10/temphack.jpg 2048w" sizes="auto, (max-width: 550px) 100vw, 550px" /></a><figcaption id="caption-attachment-1166" class="wp-caption-text">Temperature monitoring board in it&#8217;s lab setting with 16 thermocouple channels</figcaption></figure>
<p>This is then saved in a database, and can be accessed from elsewhere.</p>
<h2>Visualize!</h2>
<p>The thing that my co-workers were most amazed by wasn&#8217;t the electronics. Sure, they haven&#8217;t worked with Arduinos, but did do similar stuff. Instead they liked the monitoring interface much more, this is the one on the picture right here (can click to enlarge)</p>
<figure id="attachment_1151" aria-describedby="caption-attachment-1151" style="width: 550px" class="wp-caption aligncenter"><a href="http://gergely.imreh.net/blog/wp-content/uploads/2012/10/BOMon.png" target="_blank"><img loading="lazy" decoding="async" class="size-large wp-image-1151  " title="Bakeout Monitor" src="http://gergely.imreh.net/blog/wp-content/uploads/2012/10/BOMon-1024x586.png" alt="Bakeout Monitor  interface showing the vacuum system, temperatures, pressures and long term graphs" width="550" height="314" /></a><figcaption id="caption-attachment-1151" class="wp-caption-text">Bakeout Monitor interface (click image for full view)</figcaption></figure>
<p>It&#8217;s the schematic layout of our equipment, with the temperatures positioned where the actual sensors are. Also, the change of the measured values in time are also displayed with live scrolling.</p>
<p>I&#8217;m not saying it&#8217;s great. Thinking about it, the major insight that made it good for the rest of the people is that I realized how much more people understand visual data: the placement of the values to the corresponding locations on the schematics. That&#8217;s the only thing.</p>
<p>So inside it&#8217;s a <a title="MongoDB" href="http://www.mongodb.org/" target="_blank">MongoDB</a> database (learned from previous mistakes, using a replica-set at least), with <a title="Python homepage" href="http://www.python.org/" target="_blank">Python</a> scripts talking to the sensors and saving the data, <a title="NodeJS home page" href="http://nodejs.org/" target="_blank">NodeJS</a> /<a title="Smoothie Charts homepage" href="http://smoothiecharts.org/" target="_blank"> Smoothie Charts</a> for visualization (and plain old CSS positioning of <a title="&lt;input&gt; tag explanation" href="http://www.w3schools.com/tags/tag_input.asp">&lt;input&gt; tags</a> for the reading display), <a title="NGINX homepage" href="http://nginx.org/" target="_blank">nginx</a>&#8216;s upstream module for running two monitoring servers just in case. It&#8217;s mostly in the <a title="Bakeout code on Github" href="https://github.com/imrehg/bakeout" target="_blank">Github repo of the monitoring code</a>, as well as the <a title="Arduino temperature monitoring" href="https://github.com/imrehg/sketchbook/tree/master/Thermocouple5" target="_blank">Arduino sketch for talking to the electronics</a>.</p>
<p>It was actually quite fun to write it all, and the gradual improvements, trying the new tech, trying not to lose to much data, amazed how well it works. Especially had a good time learning about the database, scaling, fault tolerance, performance&#8230;</p>
<p>Of course there could be room for a lot more improvements.</p>
<ul>
<li>My failover-restart bash scripts are awful, though they do seem to work more or less and counteract the USB unreliablilities</li>
<li>There were some changes to Smoothie Charts that I could improve on: logarithmic plotting, some display enhancements, wonder if it can be more optimized for performance</li>
<li>More efficient data loading. 12h data is about 30Mb in JSON format, that I send compressed, apparently it gets down to ~5% in size, but it still takes quite a bit of time to process on the frontend</li>
<li>The layout now can be changed from config files if the sensors change, so co-workers can do that without programming knowledge. I wonder if that can be simplified even more</li>
</ul>
<p>Of course, I&#8217;m a person who generally overengineers stuff, so maybe it&#8217;s good to stop somewhere. And the somewhere might be when I got to the point to use my Kindle for monitoring (craps out on 1h data already, but some real time things are good enough).</p>
<figure id="attachment_1161" aria-describedby="caption-attachment-1161" style="width: 500px" class="wp-caption aligncenter"><a href="http://gergely.imreh.net/blog/wp-content/uploads/2012/10/bomon_kindle_opt1.jpg"><img loading="lazy" decoding="async" class="size-full wp-image-1161" title="Bakeout Monitor on Kindle" src="http://gergely.imreh.net/blog/wp-content/uploads/2012/10/bomon_kindle_opt1.jpg" alt="Bakeout Monitor interface running on Kindle" width="500" height="416" /></a><figcaption id="caption-attachment-1161" class="wp-caption-text">Bakeout Monitor on running on Kindle 3, not perfect but does work</figcaption></figure>
<h2>Get on with it</h2>
<p>I did learn a lot along the way, and I&#8217;m sure that with this experience I will be let to do a little bit more in the lab in terms of programming ideas. I don&#8217;t like that the rest of the system is currently forced to be LabView, but that&#8217;s for another post, and there are so many things that can be improved in general as well. Let&#8217;s just go and do that.</p>
<p>The post <a href="https://gergely.imreh.net/blog/2012/10/laboratory-2-0-a-monitoring-system/">Laboratory 2.0 &#8211; a monitoring system</a> appeared first on <a href="https://gergely.imreh.net/blog">ClickedyClick</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://gergely.imreh.net/blog/2012/10/laboratory-2-0-a-monitoring-system/feed/</wfw:commentRss>
			<slash:comments>1</slash:comments>
		
		
			</item>
		<item>
		<title>Frindcare, some improvements</title>
		<link>https://gergely.imreh.net/blog/2012/06/frindcare-some-improvements/</link>
					<comments>https://gergely.imreh.net/blog/2012/06/frindcare-some-improvements/#comments</comments>
		
		<dc:creator><![CDATA[Gergely Imreh]]></dc:creator>
		<pubDate>Tue, 12 Jun 2012 07:43:00 +0000</pubDate>
				<category><![CDATA[Programming]]></category>
		<category><![CDATA[facebook]]></category>
		<category><![CDATA[heroku]]></category>
		<category><![CDATA[nodejs]]></category>
		<guid isPermaLink="false">http://gergely.imreh.net/blog/?p=950</guid>

					<description><![CDATA[<p>After using for about a week, I tried to improve on the functionality of my web app that tracks my connections on Facebook. Some lessons learned, some ranting is still necessary.</p>
<p>The post <a href="https://gergely.imreh.net/blog/2012/06/frindcare-some-improvements/">Frindcare, some improvements</a> appeared first on <a href="https://gergely.imreh.net/blog">ClickedyClick</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p>After <a title="Friendcare, satisfying a curiosity" href="http://gergely.imreh.net/blog/2012/06/friendcare-satisfying-a-curiosity/" target="_blank">getting to a working level</a> with <a title="Friendcare" href="https://friendcare.herokuapp.com" target="_blank">Friendcare</a>, my web app to track friending and defriending on Facebook, I was still doing some tweaks. Some of the tweaks is to improve functionality, some of them to fix some broken behaviour by the services I use (especially Facebook). This is a little summary of what I have learned in this short time.</p>
<h2>Changes</h2>
<h3>Heroku</h3>
<p>The very day of my last blogpost, when I actually had others sign up as well, <a title="Heroku home" href="http://heroku.com" target="_blank">Heroku</a> had a few hour long outage. That was quite unfortunate, and it was annoying to see the &#8220;Application Error&#8221; page, which pretty much hides what really happened. In real production environment probably I would have to run things on multiple independent platforms so if the platform itself is the one that crashes, the site could be just switched over. This time I&#8217;m just taking it simple, make a personalized maintenance page, which I can turn on in this case, or when I&#8217;ll really need some maintenance time. Also, played around Google Web Fonts, so can have the good old school <a title="Press Start 2P on Google Webfonts" href="http://www.google.com/webfonts/specimen/Press+Start+2P" target="_blank">Press Start 2P</a> on this one.</p>
<figure id="attachment_954" aria-describedby="caption-attachment-954" style="width: 500px" class="wp-caption aligncenter"><a href="http://gergely.imreh.net/blog/2012/06/frindcare-some-improvements/friendcaremaintenance-2/" rel="attachment wp-att-954"><img loading="lazy" decoding="async" class="size-full wp-image-954" title="Friendcare Maintenance" src="http://gergely.imreh.net/blog/wp-content/uploads/2012/06/FriendCareMaintenance1.jpg" alt="Friendcare is offline for maintenance" width="500" height="544" srcset="https://gergely.imreh.net/blog/wp-content/uploads/2012/06/FriendCareMaintenance1.jpg 500w, https://gergely.imreh.net/blog/wp-content/uploads/2012/06/FriendCareMaintenance1-460x500.jpg 460w" sizes="auto, (max-width: 500px) 100vw, 500px" /></a><figcaption id="caption-attachment-954" class="wp-caption-text">Friendcare maintenance screen</figcaption></figure>
<p>It would be nice if in case of trouble I could use a web interface to trigger maintenance mode. Might build a service for that, though now that I think of it, that will have to be hosted outside of Heroku. Also, later might do an application error page as well, just in case. Might even choose a mascot for that. Though probably not.</p>
<h3>Fonts</h3>
<p>Besides the error page, I was playing around with other fonts for the main interface as well. In the end the current one is <a title="Crimson Text on Google Webfonts" href="http://www.google.com/webfonts/specimen/Crimson+Text" target="_blank">Crimson Text</a>, which should be quite readable even with very different font size. It is mostly good, though it doesn&#8217;t play completely well with <a title="Twitter Bootstrap home" href="http://twitter.github.com/bootstrap/" target="_blank">Twitter Bootstrap</a>, the button texts for example are not totally well aligned vertically. Might have to look around the fonts a little bit more.</p>
<figure id="attachment_957" aria-describedby="caption-attachment-957" style="width: 500px" class="wp-caption aligncenter"><a href="http://gergely.imreh.net/blog/2012/06/frindcare-some-improvements/friendcareheader/" rel="attachment wp-att-957"><img loading="lazy" decoding="async" class="size-full wp-image-957" title="Friendcare header 2" src="http://gergely.imreh.net/blog/wp-content/uploads/2012/06/FriendcareHeader.jpg" alt="Friendcare header layout" width="500" height="153" /></a><figcaption id="caption-attachment-957" class="wp-caption-text">Tweaked layout, and it actually already has results</figcaption></figure>
<h3>Facebook</h3>
<p>Facebook has so many weird things going on, that I can barely wrap my head around it. One of my impression, which probably shouldn&#8217;t surprise me, that they are most likely not using their own APIs, otherwise it wouldn&#8217;t have such huge bugs in it. Another impression is, that somehow they manage make everything almost good, but in some way completely bad.</p>
<h4>Graph API reliability</h4>
<p>Since the entire site relies on regularly polling the user&#8217;s friend list, getting that list consistently is a must. Somehow the Graph API occasionally misses some friends: they don&#8217;t appear in the list and I mistakenly assume as lost connections. An hour later, when polling again they are back in the list, so they show up as friendship gain. That doesn&#8217;t work very well. This happens a lot, so I had some algorithms in place for that and sometimes had to manually clean up the database (which I really shouldn&#8217;t do if it can be avoided).</p>
<h4>FQL</h4>
<p>I can also use the <a title="Facebook Query Language" href="https://developers.facebook.com/docs/reference/fql/" target="_blank">Facebook Query Language</a> to get the information I want. It is quite straightforward, they even have the expression among their examples:</p>
<pre lang="SQL">SELECT uid2 FROM friend WHERE uid1=me()</pre>
<p>This is pretty fast as well, maybe half the time of the Graph API request. There&#8217;s one problem, though: it returns wrong results. Not entirely wrong, just wrong enough. The list I receive seem to have a bunch of invalid user IDs, such that it doesn&#8217;t belong to anyone. They just don&#8217;t exists, but I still receive them. So while Graph API suffered from false negatives, FQL suffers from false positives. Fortunately there seems to be a workaround, in the form of a deeper query such that</p>
<pre lang="SQL">SELECT name, uid FROM user WHERE uid in (SELECT uid2 FROM friend WHERE uid1=me())</pre>
<p>Here I will actually throw away the &#8216;name&#8217; part, but at least I know that the IDs that I receive do belong to actual people. So far this seems to be the most reliable, though it takes as much time as the Graph API request, or maybe a bit more.</p>
<p>In the end, currently I query both the Graph and FQL in sequence, compare the results, note if they differ (for debugging purposes) and use the FQL result since that seems to be more reliable. Will check back later to this part, when I have more information to go on.</p>
<h4>Offline access</h4>
<p>Offline access is pretty important for this kind of service, because it&#8217;s not that useful if we can only check the results when the user comes to the page. Unfortunately, the &#8216;offline_access&#8217; permission has <a title="Offline access permission removed" href="https://developers.facebook.com/roadmap/offline-access-removal/" target="_blank">just been removed</a>. Instead the access token lives for 60 days, after which one has to get a new one by logging the user in again. I&#8217;m not saying it&#8217;s unreasonable, maybe even better since I don&#8217;t have to ask for any extended permission over the ones that are granted to every app automatically, but have to keep in mind. It might complicate things. Also reminds me that other apps that I&#8217;m using with Facebook (e.g. <a title="If This Than That" href="http://ifttt.com/" target="_blank">ifttt</a>) will have some problem because of this thus I will have problem with this. Better check with them.</p>
<h4>Send message prompt dialog</h4>
<p>I kinda understood when they have removed the ability to send message to others on the user&#8217;s behalf without their interaction, that&#8217;s such a tempting spam delivery system for most, I presume. On the other hand, for a long time at least they had (or I seem to remember they had) a send dialog, where I could prompt a user to send a message to someone else: they write the actual message and they click send. On the other hand, the current <a title="Send Dialog on Facebook docs" href="https://developers.facebook.com/docs/reference/dialogs/send/" target="_blank">Send Dialog</a> has a required parameter &#8216;link&#8217;, this it is no longer possible to send &#8220;just a message&#8221;. This must be a relatively new chance, since the dialog&#8217;s page describes it as:</p>
<blockquote><p>The Send Dialog lets people to send content to specific friends.</p></blockquote>
<p>Fair enough, that&#8217;s exactly how does it work. On the other hand, just one level up, the <a title="Dialogs Overview on Facebook docs" href="https://developers.facebook.com/docs/reference/dialogs/" target="_blank">Dialogs Overview</a> says this:</p>
<blockquote><p>The Send Dialog allows a user to send a Facebook Message to one or more of their friends.</p></blockquote>
<p>Content vs. message, subtle but crucial difference. Thus in my app I cannot have a &#8220;send message to this user&#8221; button, unless I attach some kind of link to the message. Now this feels really spammy to me.</p>
<h2>Overall</h2>
<p>It is good to add a few more features, because I can use it better as well, and I learned a lot too. Might add a proper dashboard, a deregister option, notification to email or (if I can figure out how) Facebook message, stats, better layout. Or whatever suggestion I receive.</p>
<p>Finally, the most important thing that it works. In the last week I found two people who defriended me for whatever reason, and I wouldn&#8217;t have known about otherwise. They were not close ones, so not going to pursue them, but it could have been otherwise, so at least it&#8217;s good to know.</p>
<p>The post <a href="https://gergely.imreh.net/blog/2012/06/frindcare-some-improvements/">Frindcare, some improvements</a> appeared first on <a href="https://gergely.imreh.net/blog">ClickedyClick</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://gergely.imreh.net/blog/2012/06/frindcare-some-improvements/feed/</wfw:commentRss>
			<slash:comments>1</slash:comments>
		
		
			</item>
		<item>
		<title>Friendcare, satisfying a curiosity</title>
		<link>https://gergely.imreh.net/blog/2012/06/friendcare-satisfying-a-curiosity/</link>
					<comments>https://gergely.imreh.net/blog/2012/06/friendcare-satisfying-a-curiosity/#respond</comments>
		
		<dc:creator><![CDATA[Gergely Imreh]]></dc:creator>
		<pubDate>Wed, 06 Jun 2012 17:05:18 +0000</pubDate>
				<category><![CDATA[Programming]]></category>
		<category><![CDATA[heroku]]></category>
		<category><![CDATA[nodejs]]></category>
		<guid isPermaLink="false">http://gergely.imreh.net/blog/?p=894</guid>

					<description><![CDATA[<p>I wanted to know who defriends me on Facebook, so made a service to track the changes in my friendlist.</p>
<p>The post <a href="https://gergely.imreh.net/blog/2012/06/friendcare-satisfying-a-curiosity/">Friendcare, satisfying a curiosity</a> appeared first on <a href="https://gergely.imreh.net/blog">ClickedyClick</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p>Quite often I find services I&#8217;m using inadequate. Something is missing, or not working the way I hope, I wish it could be changed. In a fraction of the cases it can actually be changed, and an even smaller fraction I go and change it myself.</p>
<p>This time it was bugging me that while I am always aware if I have new contact established on Facebook (or colloquially &#8220;friended someone&#8221;), but there&#8217;s just no way to know if someone cut ties (&#8220;defriended&#8221;) me. In some ways that knowledge is just as important, since the first means I succeeded in being interesting to another person in some way, the second means I was actually annoyance &#8211; not just being ignored and never talked to but people took the effort to never hear about me again. Recently quite a few people did that to me, or at least it&#8217;s only now that I try to find them for this or that but I can&#8217;t. I never want to be caught off-guard like this again, so I made <a title="Friendcare" href="https://friendcare.herokuapp.com" target="_blank">Friendcare</a>.</p>
<figure id="attachment_895" aria-describedby="caption-attachment-895" style="width: 500px" class="wp-caption aligncenter"><a href="http://gergely.imreh.net/blog/2012/06/friendcare-satisfying-a-curiosity/friendcare/" rel="attachment wp-att-895"><img loading="lazy" decoding="async" class="size-full wp-image-895   " title="FriendCare" src="http://gergely.imreh.net/blog/wp-content/uploads/2012/06/FriendCare.jpg" alt="" width="500" height="230" /></a><figcaption id="caption-attachment-895" class="wp-caption-text">Friendcare interfacing</figcaption></figure>
<p>It was mostly an exercise in web app building, since if it was only for me, I could have just set up a script on my server that monitors things. It&#8217;s more fun as well. First I started it a long time ago, tried to <a title="Hack+Taiwan" href="http://gergely.imreh.net/blog/2012/04/hacktaiwan/" target="_blank">work on it</a> and rewrote from scratch a couple of times until getting here.</p>
<h2>What does it do?</h2>
<p>In this one the site just gets the user&#8217;s friendlist (a list of IDs) from Facebook and compares it with the last known friendlist. If there are new IDs, they are considered friend gains, if there are missing ones, those are friend losses.</p>
<p>Actually it got pretty complicated logic (for my usual thinking) inside because of the asynchronous management of good NodeJS apps, had to think a lot about what information is available at what step and what time of the usage. It also didn&#8217;t help that I haven&#8217;t really planed the user experience (UX) first, just started to code. Some of the things are surely pretty terribly done because of premature optimization and scaling I was doing while only havng a single user of the site. All in all, it&#8217;s an absolutely horrendous mess in the inside that still seems to implement a suitably close approximation of what I wanted. Surly will need some refractoring sooner rather than later.</p>
<h2>The parts</h2>
<p>It&#8217;s amazing how many different parts I need to use to make one complete site work, a total web-tech-soup. Everything is in a library or in an external service. It&#8217;s good and bad &#8211; good because other people did the heavy lifting for me already, bad because every one of them needs a non-trivial effort to learn and all of them different. Nevertheless, trying to keep things minimal. At the moment it&#8217;s <a title="NodeJS homepage" href="http://nodejs.org/" target="_blank">NodeJS</a> on <a title="Heroku homepage" href="http://www.heroku.com" target="_blank">Heroku</a>, with <a title="MongoDB homepage" href="http://www.mongodb.org/" target="_blank">MongoDB</a> and using <a title="Heroku Scheduler addon" href="https://addons.heroku.com/scheduler" target="_blank">Heroku Scheduler</a> to trigger the update service. The other modules and parts are:</p>
<h4>Everyauth</h4>
<p>Without <a title="Everyauth on Github" href="https://github.com/bnoguchi/everyauth" target="_blank">Everyauth</a> nothing would work, it handles the Facebook authentication on the backend. Also, it gave me ideas how the site can be extended to multiple services / multiple social networks.</p>
<h4>Fbgraph</h4>
<p>There are so many interfaces to talk to Facebook, and the heroku-nodejs app I started off from uses one of them as well. That just seems to be too specialized for an example app, not in functionality but in implementation. Instead I found myself another library, <a title="Fbgraph on Github" href="https://github.com/criso/fbgraph" target="_blank">fbgraph</a>, and so far so good. If I really wanted to, I could even easier interface just the Graph API, but no need to do that at the moment.</p>
<h4>Mongoose</h4>
<p>I choose <a title="Mongoose on Github" href="https://github.com/learnboost/mongoose" target="_blank">Mongoose</a>/MongoDB to store the associated data, well, basically because <a title="MongoLab homepage" href="https://mongolab.com/" target="_blank">MongoLab</a> had the largest free database offering of all the databases I have checked. So far so good. I like the schemaless database, though already run into problems when I was updating wrong fields in the dataset I was surprised that the results didn&#8217;t show up at the right place. I guess that&#8217;s a danger I can live with at the moment. Will have to learn more about it, how to back things up, how to maintain it well, and about mongoose and it&#8217;s schemas.</p>
<h4>Underscore</h4>
<p>The core functionality is basically taking the difference of two sets, and in general there is quite a bit of set manipulation, so <a title="UnderscoreJS homepage" href="http://underscorejs.org/" target="_blank">Underscore</a> works very well, I used for a couple of other parts as well (reduce, groupBy), and it works well. The whole thing feels like it should be part of the base library.</p>
<h4>Twitter Bootstrap</h4>
<p>While risking that I&#8217;ll look exactly the same as many others, <a title="Twitter Bootstrap home" href="http://twitter.github.com/bootstrap/" target="_blank">Bootstrap</a> does give some good-looking results with moderate effort. Will have to do some tweaking because I know so little about making good UIs, but it&#8217;s a start.</p>
<h4>EJS</h4>
<p>Used <a title="EJS on Github" href="https://github.com/visionmedia/ejs" target="_blank">EJS</a> for templating, and it&#8217;s great. Fast, flexible, and it&#8217;s not too bad that I have to fill in most of the HTML manually. I will know more about the structure of the client facing  side of the page more than I would otherwise.</p>
<h2>Lessons learned</h2>
<p>There are things that went well and not so well.</p>
<ul>
<li>Maybe the most important: Facebook is unreliable. Sometimes I got missing people in the list that appear in the next update again. This happened when using <a title="Graph API" href="https://developers.facebook.com/docs/reference/api/" target="_blank">Graph API</a>, will have to see if <a title="FQL reference" href="https://developers.facebook.com/docs/reference/fql/" target="_blank">FQL</a> is any better. From my experience: not, it just has different problems.</li>
<li>For a while I started to write in <a title="Coffeescript" href="http://coffeescript.org/" target="_blank">Coffeescript</a>, but then I just spent too much time trying to figure out how to get the right things, so went back to Javascript, at least until I <a title="Eloquent Javascript website" href="http://eloquentjavascript.net/" target="_blank">learn</a> that and can move up again to that higher level.</li>
<li>From the app&#8217;s point of view, some simplification needed. Too many middleware and helpers, this I quite often not sure about what is the state of my data, what variables were available and what are not.</li>
<li>Forums are not always helpful, quite often people have really dumb answers to questions, so have to figure things out myself.</li>
<li>Too many successful libraries mean that the library-soup will inevitably cause problems, and people start writing new libraries that connect and unify the old ones: mongoose &amp; backbone, mongodb &amp; everyauth, so much magic (ie. behind the scenes stuff) happens.</li>
<li>I still like to make logos and facicons, though I&#8217;m sure they are terrible, it makes good playtime in <a title="Inkscape homepage" href="http://inkscape.org/" target="_blank">Inkscape</a> and <a title="Gimp homepage" href="http://www.gimp.org/" target="_blank">Gimp</a>. Might have to change the colours, it does remind me of a strange toilet logo&#8230;</li>
</ul>
<figure id="attachment_898" aria-describedby="caption-attachment-898" style="width: 200px" class="wp-caption aligncenter"><a href="http://gergely.imreh.net/blog/2012/06/friendcare-satisfying-a-curiosity/logo/" rel="attachment wp-att-898"><img loading="lazy" decoding="async" class="size-full wp-image-898" title="Friendcare logo" src="http://gergely.imreh.net/blog/wp-content/uploads/2012/06/logo.png" alt="" width="200" height="203" /></a><figcaption id="caption-attachment-898" class="wp-caption-text">Friendcare logo</figcaption></figure>
<h2>Aftermath</h2>
<p>In the end, I&#8217;m solving a very narrow problem at the moment, a problem that so rarely arises, that I don&#8217;t even know if it will happen again. But if it does happen, without this I wouldn&#8217;t know about it, so still worth it.</p>
<p>Might extend it later to count <a title="Me on Twitter" href="http://www.twitter.com/imrehg" target="_blank">Twitter</a> followers, <a title="Me on Google+" href="https://plus.google.com/116948925972911973649" target="_blank">Google+</a> circles, <a title="Me on Github" href="https://github.com/imrehg" target="_blank">Github</a> watch/fork, whatnot&#8230; But that&#8217;s later when I see how does this work, I care much less about those than my &#8220;friends&#8221; because of the symmetricity of it .</p>
<p>The good thing is that currently it works well enough that I kinda got this off my chest and can back to making a <a title="FUSE-Gett on Github" href="https://github.com/imrehg/fuse-gett" target="_blank">FUSE module for Ge.tt</a>, a group based location sharing mobile app, an app to connect my <a title="My Goodreads profile" href="http://www.goodreads.com/user/show/3669238-gergely" target="_blank">Goodreads</a> to-read list and bookstore databases,  <a title="Octopress Rich Objects" href="https://github.com/imrehg/octopress-richobject" target="_blank">adding Open Graph and Rich Objects to Octopress</a>, getting out an update for <a title="WatchDoc – an experiment in Chrome Extensions" href="http://gergely.imreh.net/blog/2011/10/watchdoc/" target="_blank">WatchDoc</a>, or even check out the games I just got from <a title="HumbleBundle" href="http://www.humblebundle.com" target="_blank">HumbleBundle</a>. But will come back to this, will have to make it better (it&#8217;s a compulsion).</p>
<p>Finally, if you the site, let me know your suggestions, I&#8217;m eager to learn. The <a title="Friendcare on Github" href="https://github.com/imrehg/friendcare" target="_blank">source is up on Github</a>.</p>
<p>The post <a href="https://gergely.imreh.net/blog/2012/06/friendcare-satisfying-a-curiosity/">Friendcare, satisfying a curiosity</a> appeared first on <a href="https://gergely.imreh.net/blog">ClickedyClick</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://gergely.imreh.net/blog/2012/06/friendcare-satisfying-a-curiosity/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>

<!--
Performance optimized by W3 Total Cache. Learn more: https://www.boldgrid.com/w3-total-cache/?utm_source=w3tc&utm_medium=footer_comment&utm_campaign=free_plugin

Object Caching 15/73 objects using APC
Page Caching using Disk: Enhanced 
Lazy Loading (feed)

Served from: gergely.imreh.net @ 2026-06-23 12:15:53 by W3 Total Cache
-->