{"id":4895,"date":"2018-02-05T17:58:41","date_gmt":"2018-02-05T16:58:41","guid":{"rendered":"https:\/\/qdraw.nl\/blog\/?p=4895"},"modified":"2025-05-28T07:54:55","modified_gmt":"2025-05-28T06:54:55","slug":"met-tabletop-bijhouden-of-de-tafelvoetbal-vrij-is","status":"publish","type":"post","link":"https:\/\/qdraw.nl\/blog\/design\/met-tabletop-bijhouden-of-de-tafelvoetbal-vrij-is\/","title":{"rendered":"Met Tabletop bijhouden of de tafelvoetbal vrij is"},"content":{"rendered":"<p>Realtime bijhouden of een ruimte bezet is, het kan allemaal met Internet of Things. Als side project heb ik een webapp gemaakt waarbij te zien of een ruimte vrij is of niet. Hier maakt ik gebruik van een Arduino met bewegingssensor die waardes doorstuurt naar een website.<\/p>\n<h2>Realtime zien of een kamer vrij is.<\/h2>\n<p>In \u00e9\u00e9n oogopslag is te zien of ruimte bezet is en in de webapp is er te zien wanneer er voor het laatste activiteit is geweest. In de grafiek onder de laatste activiteit is er een overzicht van alle recente bewegingen.<\/p>\n<p><a class=\"lightbox[blog]\" title=\"Met Tabletop bijhouden of de tafelvoetbaltafel vrij is Live \u2013 Table footbal webapp | foto 1\" href=\"https:\/\/media.qdraw.nl\/log\/\/met-tabletop-bijhouden-of-de-tafelvoetbaltafel-vrij-is\/1000\/001_tabletop-mockup_kl1k.jpg\" data-gps=\"0,0\" data-heightratio=\"0.67\"><br \/>\n<noscript><img decoding=\"async\" src=\"https:\/\/media.qdraw.nl\/log\/\/met-tabletop-bijhouden-of-de-tafelvoetbaltafel-vrij-is\/500\/001_tabletop-mockup_kl.jpg\" alt=\"Met Tabletop bijhouden of de tafelvoetbaltafel vrij is\" \/><\/noscript><br \/>\n<img decoding=\"async\" title=\"Met Tabletop bijhouden of de tafelvoetbaltafel vrij is Live \u2013 Table footbal webapp | foto 1\" src=\"data:image\/jpeg;base64,\/9j\/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj\/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj\/wAARCAAEAAoDASIAAhEBAxEB\/8QAFQABAQAAAAAAAAAAAAAAAAAAAAb\/xAAgEAACAQQCAwEAAAAAAAAAAAABAgMABAURBnEhMVGR\/8QAFQEBAQAAAAAAAAAAAAAAAAAAAwT\/xAAVEQEBAAAAAAAAAAAAAAAAAAAAEf\/aAAwDAQACEQMRAD8AmeKcZxuSwN3Ndxu0qB2Vg2tEpsfhHjs+6nIcJbPDG5ebbKCdEfOqUqmgf\/\/Z\" alt=\"Met Tabletop bijhouden of de tafelvoetbaltafel vrij is Live \u2013 Table footbal webapp ; tabletop, mockup, webapp\" \/><br \/>\n<\/a><\/p>\n<h2>Fun facts<\/h2>\n<p>De tabletop app draait nu vanaf 10 januari op het kantoor waar ik werk. Het gaat over een periode van 16 werkdagen. Dit zijn leuke weetjes: Er zijn drie pieken op een dag. De eerste piek is om 12:30. Je hebt dan 12% kans dat de tafel dan vrij is. Om 13:00 uur is het tot nu toe altijd piektijd en om half 4 is de kans 25%. <\/p>\n<p><a class=\"lightbox[blog]\" title=\"Met Tabletop bijhouden of de tafelvoetbaltafel vrij is Live \u2013 Table footbal webapp | foto 2\" href=\"https:\/\/media.qdraw.nl\/log\/\/met-tabletop-bijhouden-of-de-tafelvoetbaltafel-vrij-is\/1000\/002_20180110-20170205-all-tabletop_kl1k.jpg\" data-gps=\"0,0\" data-heightratio=\"0.45\"><br \/>\n<noscript><img decoding=\"async\" src=\"https:\/\/media.qdraw.nl\/log\/\/met-tabletop-bijhouden-of-de-tafelvoetbaltafel-vrij-is\/500\/002_20180110-20170205-all-tabletop_kl.jpg\" alt=\"Met Tabletop bijhouden of de tafelvoetbaltafel vrij is\" \/><\/noscript><br \/>\n<img decoding=\"async\" title=\"Met Tabletop bijhouden of de tafelvoetbaltafel vrij is Live \u2013 Table footbal webapp | foto 2\" src=\"data:image\/jpeg;base64,\/9j\/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj\/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj\/wAARCAAHAAoDASIAAhEBAxEB\/8QAFgABAQEAAAAAAAAAAAAAAAAAAAYH\/8QAHxAAAgIDAAIDAAAAAAAAAAAAAQIDEQAEBRIhBzFR\/8QAFQEBAQAAAAAAAAAAAAAAAAAAAAL\/xAAaEQACAgMAAAAAAAAAAAAAAAABAgBRAxES\/9oADAMBAAIRAxEAPwCt29bX6PyVq9TmysmykfmInBYShULNZJFCxX1fq\/zNHil5UsSSWy+YDUVPq8Yy0QNsm4yNyQBU\/9k=\" alt=\"Met Tabletop bijhouden of de tafelvoetbaltafel vrij is Live \u2013 Table footbal webapp ; Tabletop, all time\" \/><br \/>\n<\/a><em>Het aantal bewegingen in de Tabletop kamer. Deze zijn samengevoegd per 5 minuten in \u00e9\u00e9n staaf.<\/em><\/p>\n<p>&nbsp;<\/p>\n<h2>Hoe werkt Tabletop nu?<\/h2>\n<p>\nEen Arduino met een PIR-sensor houdt bij of er beweging wordt geconstateerd. Een Arduino is een microprocessor waarbij het mogelijk is om relatief eenvoudig zelf programma\u2019s op te zetten. Een PIR-sensor wordt ook gebruikt in buitenlampen met een bewegingssensor. Deze stuurt via het internet berichten door naar een webserver. Deze server kan twee type acties uitvoeren. De eerste actie is het verzamelen van data en deze wegschrijven naar een database. De tweede actie is het tonen van data. Wanneer er een bezoeker op de webapp komt wordt een data visualisatie gemaakt van de meest recente bewegingen.\n<\/p>\n<p>\nVoor deze setup heb ik gebruik gemaakt van de volgende technieken:<\/p>\n<ul>\n<li> .NET Core 2<\/li>\n<li>   ASP.NET MVC<\/li>\n<li> SignalR SSE\/Websockets<\/li>\n<li>  Send events van een Arduino met een ethernet shield en een PIR-Sensor<\/li>\n<li>  D3.v4 Javascript Datavisualisation <\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p>\nMocht je ge\u00efnteresseerd zijn in de werking dan is de code <a href=\"https:\/\/github.com\/qdraw\/tabletop\" target=\"_blank\" rel=\"noopener\">open source beschikbaar<\/a> en op <a href=\"https:\/\/github.com\/qdraw\/tabletop\/archive\/master.zip\" target=\"_blank\" rel=\"noopener\">Github te downloaden<\/a>. Heb je vragen stuur mij dan een mailtje dan kunnen we een kopje koffiedrinken.\n<\/p>\n<p><a class=\"lightbox[blog]\" title=\"Met Tabletop bijhouden of de tafelvoetbaltafel vrij is Het aantal bewegingen in de Tabletop kamer. Deze zijn samengevoegd per 5 minuten in \u00e9\u00e9n staaf. | foto 3\" href=\"https:\/\/media.qdraw.nl\/log\/\/met-tabletop-bijhouden-of-de-tafelvoetbaltafel-vrij-is\/1000\/003-tabletop-solution-vs2017_kl1k.jpg\" data-gps=\"0,0\" data-heightratio=\"0.6\"><br \/>\n<noscript><img decoding=\"async\" src=\"https:\/\/media.qdraw.nl\/log\/\/met-tabletop-bijhouden-of-de-tafelvoetbaltafel-vrij-is\/500\/003-tabletop-solution-vs2017_kl.jpg\" alt=\"Met Tabletop bijhouden of de tafelvoetbaltafel vrij is\" \/><\/noscript><br \/>\n<img decoding=\"async\" title=\"Met Tabletop bijhouden of de tafelvoetbaltafel vrij is Het aantal bewegingen in de Tabletop kamer. Deze zijn samengevoegd per 5 minuten in \u00e9\u00e9n staaf. | foto 3\" src=\"data:image\/jpeg;base64,\/9j\/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj\/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj\/wAARCAAGAAoDASIAAhEBAxEB\/8QAFgABAQEAAAAAAAAAAAAAAAAAAAIH\/8QAGxAAAgMBAQEAAAAAAAAAAAAAAQIAAxExEiH\/xAAVAQEBAAAAAAAAAAAAAAAAAAABAv\/EABURAQEAAAAAAAAAAAAAAAAAAAAR\/9oADAMBAAIRAxEAPwDEb6rVK7cT93pltcPRxn7ES4H\/2Q==\" alt=\"Met Tabletop bijhouden of de tafelvoetbaltafel vrij is Het aantal bewegingen in de Tabletop kamer. Deze zijn samengevoegd per 5 minuten in \u00e9\u00e9n staaf. ; Visual Studio, C#, .Net Core 2, MVC\" \/><br \/>\n<\/a><\/p>\n<h2>Gebruik SignalR om de UI realtime te updaten<\/h2>\n<p><video loop style=\"width:100%; height:100%;\" autoplay muted controls preload=\"auto\" poster=\"https:\/\/media.qdraw.nl\/log\/met-tabletop-bijhouden-of-de-tafelvoetbaltafel-vrij-is\/video\/met-tabletop-bijhouden-of-de-tafelvoetbal_1000.jpg\"><source src=\"https:\/\/media.qdraw.nl\/log\/met-tabletop-bijhouden-of-de-tafelvoetbaltafel-vrij-is\/video\/met-tabletop-bijhouden-of-de-tafelvoetbal_1000.mp4\" type=\"video\/mp4\">Your browser does not support the video tag.<\/video><\/p>\n","protected":false},"excerpt":{"rendered":"Realtime bijhouden of een ruimte bezet is, het kan allemaal met Internet of Things. Als side project heb ik een webapp gemaakt waarbij te zien of een ruimte vrij is of niet. Hier maakt ik gebruik van een Arduino met bewegingssensor die waardes doorstuurt naar een website. Realtime zien of een kamer vrij is. In&#8230; <a class=\"view-article\" href=\"https:\/\/qdraw.nl\/blog\/design\/met-tabletop-bijhouden-of-de-tafelvoetbal-vrij-is\/\">Bekijk artikel<\/a>","protected":false},"author":2,"featured_media":4896,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2136],"tags":[2841,2761,2719,2722],"class_list":["post-4895","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design","tag-net","tag-code","tag-data-visualization","tag-raspberry-pi"],"_links":{"self":[{"href":"https:\/\/qdraw.nl\/blog\/wp-json\/wp\/v2\/posts\/4895","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qdraw.nl\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qdraw.nl\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qdraw.nl\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/qdraw.nl\/blog\/wp-json\/wp\/v2\/comments?post=4895"}],"version-history":[{"count":0,"href":"https:\/\/qdraw.nl\/blog\/wp-json\/wp\/v2\/posts\/4895\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qdraw.nl\/blog\/wp-json\/wp\/v2\/media\/4896"}],"wp:attachment":[{"href":"https:\/\/qdraw.nl\/blog\/wp-json\/wp\/v2\/media?parent=4895"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qdraw.nl\/blog\/wp-json\/wp\/v2\/categories?post=4895"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qdraw.nl\/blog\/wp-json\/wp\/v2\/tags?post=4895"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}