<?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>Posts Archives - Digital Urban</title>
	<atom:link href="https://www.digitalurban.org/blog/category/posts/feed/" rel="self" type="application/rss+xml" />
	<link>https://www.digitalurban.org/blog/category/posts/</link>
	<description>Data, Cities, IoT, Writing, Music and Making Things</description>
	<lastBuildDate>Fri, 18 Jul 2025 12:18:57 +0000</lastBuildDate>
	<language>en-GB</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	

<image>
	<url>https://www.digitalurban.org/wp-content/uploads/2012/07/Dulogosm-1.png</url>
	<title>Posts Archives - Digital Urban</title>
	<link>https://www.digitalurban.org/blog/category/posts/</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>Vibe Coding: From iOS Apps to an Asteroid Clock and 3D Cities</title>
		<link>https://www.digitalurban.org/blog/2025/07/16/vibe-coding-from-ios-apps-to-an-asteroid-clock-and-3d-cities/</link>
		
		<dc:creator><![CDATA[Andy]]></dc:creator>
		<pubDate>Wed, 16 Jul 2025 20:38:17 +0000</pubDate>
				<category><![CDATA[3D Modelling]]></category>
		<category><![CDATA[Posts]]></category>
		<category><![CDATA[Gemini]]></category>
		<category><![CDATA[iOS App]]></category>
		<category><![CDATA[LLM]]></category>
		<category><![CDATA[Vibe Coding]]></category>
		<category><![CDATA[Weather]]></category>
		<guid isPermaLink="false">https://www.digitalurban.org/blog/2025/07/16/vibe-coding-from-ios-apps-to-an-asteroid-clock-and-3d-cities/</guid>

					<description><![CDATA[<p>Back in 2023, I wrote a blog post over on DigitalUrban.org creating an app called Frame-IT. It turns out I was using 'Vibe Coding' and it's changed the way I view the creation of almost everything...</p>
<p>The post <a href="https://www.digitalurban.org/blog/2025/07/16/vibe-coding-from-ios-apps-to-an-asteroid-clock-and-3d-cities/">Vibe Coding: From iOS Apps to an Asteroid Clock and 3D Cities</a> appeared first on <a href="https://www.digitalurban.org">Digital Urban</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<h4 class="wp-block-heading"><strong>Back in 2023, I wrote a blog post entitled Creating an app called Frame-IT. It turns out I was using &#8216;Vibe Coding&#8217; and it&#8217;s changed the way I view the creation of almost everything&#8230;</strong></h4>



<h2 class="wp-block-heading">Everything Changed</h2>



<p>The term ‘Vibe Coding’ was defined Andrej Karpathy, a co-founder at OpenAI in Early 2025. The basic idea is to rely entirely on Large Language Models &#8211; LLMs &#8211; and code by using only natural language prompting, rather than writing the code yourself.</p>



<p>Back in 2023, I published ‘Frame-IT’, an iOS app on the Apple Store, written in Swift but coded completely in the then-early version of ChatGPT. As I noted on <a href="https://www.digitalurban.org/">DigitalUrban</a>, every app has a story, from the idea through to story boarding, finding a design team, working with in house computer scientists or outsourcing. All of these steps take time, resources and often for the small ‘would be developer’ the obstacles are overwhelming, meaning that the spark of an idea often gets lost.</p>



<p>Yet, everything has changed, the whole landscape of developing, designing and creating has turned on its head. It has reached the point where the spark of an idea can be coded, designed, marketed and launched with the help of Artificial Intelligence. Frame-IT is a very simple app, doing a simple thing, but it came from an idea, a want, a desire to do something which before AI would have got lost in logistics, finding the time of computer scientists, and it would certainly be economically unfeasible.</p>



<h3 class="wp-block-heading">The First Idea</h3>



<p>Frame-IT came about while looking at Samsungs’ Frame Televisions, beyond the normal 4K television they blend into the background by displaying art and making the art look as it is mounted on a white background while also being enclosed in a frame – i.e. like a painting. Samsung does this well and the screens are excellent, but it is limited to art works, leading to the idea that it would be nice to frame websites, specifically ‘data’ based web sites and hang data on walls, data that changes in Realtime. Of course, any screen could be used, but if you simply show data on a screen or monitor, no one notices. If you hang it in a frame, as if its art, people will notice.</p>



<figure class="wp-block-image size-large"><img decoding="async" src="https://www.digitalurban.org/wp-content/uploads/2025/07/51d58c8b-8cc2-49af-a1cb-46048fa08d49_730x584.webp" alt="" /></figure>



<p>The concept was therefore simple, build an application that puts a picture frame around websites, allow users to select which websites to show and if there is more than one, cycle through them, like a dashboard. This would allow small screens, such as iPads, to act as frames and, via AirPlay, devices such as projectors or general screens to gain a look beyond their norm and display websites and data in the same way as hanging art on the wall.</p>



<figure class="wp-block-image size-large"><img decoding="async" src="https://www.digitalurban.org/wp-content/uploads/2025/07/170669e6-abd6-4279-9228-a053860fff00_1536x1009.png" alt="" /></figure>



<p>The problem was, this was an idea, to code it would require knowledge of Swift, a library of ‘picture frames’ and probably a business case to justify the time of resident computer scientists (I work at University College London, so we have a few around) and to be honest it was such a simple idea I’m note sure anyone would listen. So, with the rise of AI, I decided to build it myself, using AI from start to finish, from knowing little about Swift, and only as much about AI as my then twitter feed was full of and reading articles on site such as The Verge.</p>



<p>The app took me two days to build, two days where I was also working, so mainly doing things in-between other tasks, over lunch and a little bit in the evenings. With the initial learning curve out the way, I could rebuild it in a day. The first things I did was sign up to OpenAI to gain access to GPT 4 , which released on March 14th 2023. This allowed me access to the latest version and therefore the most up to date knowledge base, although looking back version 3 would probably have been fine and I could have simply used the free tier. My first prompt was “Can you write me swift code to take a website, centre it and add the image of a picture frame around it’. The app should work full screen, in landscape mode”. I had a sample picture frame (taken from Wikipedia and cutting out the actual image to leave a transparent centre).</p>



<figure class="wp-block-image size-large"><img decoding="async" src="https://www.digitalurban.org/wp-content/uploads/2025/07/764c8b30-9da0-4793-ae7a-be228d42eb10_1000x1000.jpeg" alt="" /></figure>



<p>Within 60 seconds, GPT gave me a section of code and then stopped, it turns out there was a limit in the amount of characters it could respond with. A quick Google search (ironically) showed me that by typing ‘continue’ ChatGPT will continue the code. With this I became a master of cutting and pasting, with the code often taking three continues and code which while sometimes was in code boxes, was also in simply text. It also allowed me to start to understand the layout and nature of Swift, within 30 minutes i had my first app running on an iPad, via Xcode. Simply by cutting and pasting and pressing ‘play’. Not all things worked out, there were often errors, but errors I could cut and paste back into GPT and it would solve them, most of the time.</p>



<p>Each time a milestone was made – a working version, a version with a picture frame in and a website showing, I would save the code as Chat GPT would sometimes break the next version while I was asking for new features. Features such as ‘Add a button to move to the next website’, ‘If there is more than one website, then cycle through them every 60 seconds’ (the websites were hard-coded at this point). Once i had a concept running on my own iPad, I realised it was quite neat and decided to then adapt it so others maybe able to use it. I added a settings page – via ‘Can you delete all the websites I have added and include a settings page, the settings page should be reached via a button and have the ability to add and delete websites, once added they should be saved so the app remembers them when reopened’. This is coding but in the new language – human language.</p>



<p>The picture frames were created in Image Creator by Bing, a search engine I never thought I would use (being a Mac user) but in that last week I had not been near Google. Bing allowed me to type in prompt and get images without any user limits. Simple prompts such as “create me a gold Victorian picture frame, it should be photorealistic with minimum reflections and the centre should be cut out” worked amazingly well, providing me with an almost limitless range of Picture frames to include as part of the assets.</p>



<figure class="wp-block-image size-large"><img decoding="async" src="https://www.digitalurban.org/wp-content/uploads/2025/07/6635903d-3268-45db-b3ce-13e2ed6eb961_2048x1345-1.png" alt="" /></figure>



<p>Not all the picture frames are from AI, a couple are from open source imagery, it felt wrong to cut out the picture, but the frames have some provenance and they were nice to include.</p>



<p>Marketing requires imagery as well – as such I took a very simple picture of my two test iPads and used the ‘PhotoRoom” AI app to transform it to two iPads on a bench with a concrete wall behind, whereas the reality was far from as glamourous.</p>



<p>The <a href="https://apps.apple.com/us/app/frame-it/id6447362214">App is now available via the Apple Store</a>, it even <a href="https://frame-it.framer.website/">has its own website</a> and logo – again designed by AI, designed using <a href="https://looka.com/">Looka</a> and hosted on <a href="https://framer.com/">Framer</a>. So while it worked, it was a little painful with the limited lengths of code in the early version of ChatGPT and the endless cutting and pasting/fixing things &#8211; it was quick, but it still took a notable commitment and time. It is also a very very niche app, but as we get to, thats the point of Vibe Coding.</p>



<h3 class="wp-block-heading">And then Everything Changed Again</h3>



<p>That was 2023 &#8211; late 2024, and everything has changed again, not only the workflow and the tools, but also the ability of the LLMs to Vibe Code, they now work, no more cutting and pasting small chunks of code, everything works. Code comes out ready to go and any errors can be fixed in a complete code base, with notably less errors compared to 2024 . As such, we made another app &#8211; again Vibe Coding, without knowing at the time &#8211; MQTTFrame.</p>



<p>The aim was to build on the concept of FrameIT but allow realtime data intergration directly in the app via MQTT (a lightweight, publish-subscribe network protocol for data) and to make it easy to subscribe to any MQTT topic and display live updates.</p>

<div class="pullquote">
<p>It is a niche thing to want to do, but that’s what Vibe Coding is great for &#8211; building those apps that you want, but perhaps few others do.</p>
</div>

<p>Our aim was to allow:</p>



<ul class="wp-block-list">
<li>
<p><strong>Customizable Frames</strong>: Choose from multiple high-quality decorative frames to complement your home or office décor.</p>
</li>



<li>
<p><strong>Clean and Clear Data Display</strong>: Showcase important data such as temperature, pressure, news, and more with clear typography and layout.</p>
</li>



<li>
<p><strong>Fullscreen Mode</strong>: Tap to seamlessly switch to an immersive fullscreen view, maximizing readability and aesthetics.</p>
</li>



<li>
<p><strong>Easy Management</strong>: Add, edit, and reorder topics quickly through an intuitive interface.</p>
</li>



<li>
<p><strong>Instant Updates</strong>: Receive real-time data updates over MQTT, ensuring you’re always in the know.</p>
</li>
</ul>



<p>And that&#8217;s what we did &#8211; but this time in a day and with everything created in ChatGPT &#8211; icons, graphics, code, marking text, and even walking me back through how to get it on the Apple Store (as it&#8217;s an oddly complex and easily forgotten process).</p>



<figure class="wp-block-image size-large"><img decoding="async" src="https://www.digitalurban.org/wp-content/uploads/2025/07/d4b1fad6-69b7-427f-8106-0d6459dca027_2014x1348.png" alt="" /></figure>



<p>So one day Vibe Coding and an app was taken from concept to ready to publish on the Apple Store &#8211; if you want to try it its currently <a href="https://apps.apple.com/gb/app/mqtt-frame/id6743003699">available for free, on the Apple Store</a></p>



<h3 class="wp-block-heading">Everything Again and Again</h3>



<p>That was the end of 2024, now in mid 2025 and term Vibe Coding has come into common use and Large Language Models are now more than capable of making anything from webpages to apps to writing posts (all of this was, however, written by an actual human; any grammatical errors are of course, intentional). We have now switched from ChatGPT to Google Gemini and use it almost daily to produce and make apps or webpages that perhaps only I want in my life, such as &#8211; an Asteroids Clock, made in 30 minutes (temporarily housed at &#8211; <a href="https://finchamweather.co.uk/astroidsclock.html">https://finchamweather.co.uk/astroidsclock.html</a> &#8211; we will move it to Github soon as we get chance).</p>

<div class="native-video-embed" data-component-name="VideoPlaceholder" data-attrs="{&quot;mediaUploadId&quot;:&quot;58d654b0-ee21-4fb6-ab79-a58beb898566&quot;,&quot;duration&quot;:null}"> </div>

<p>or a Procedural City Maker (<a href="https://finchamweather.co.uk/proceduralcity.html">https://finchamweather.co.uk/proceduralcity.html)</a></p>

<div class="native-video-embed" data-component-name="VideoPlaceholder" data-attrs="{&quot;mediaUploadId&quot;:&quot;8abdc2e7-b243-40d0-8713-c62e50d0623b&quot;,&quot;duration&quot;:null}"> </div>

<p>or a Weather Dashboard with the forecast made into the image of an English Landscape using data from the API from the UK Met Office:</p>



<figure class="wp-block-image size-large"><img decoding="async" src="https://www.digitalurban.org/wp-content/uploads/2025/07/43df66a8-a90e-4fe8-8edd-279c8d09aaaa_2908x1538.png" alt="" /></figure>



<p>You can view the dashboard live at <a href="https://finchamweather.co.uk/aiweatherimage.html">https://finchamweather.co.uk/aiweatherimage.html</a></p>



<p>All small, niche things that somehow I love and I am happy that Vibe Coding allowed them to exist &#8211; that&#8217;s the magic, Vibe Coding allows you to create anything in your imagination that did not exist to exist, it’s a great time to be making digital things.</p>



<p>If you liked this post, please do subscribe, it gives us a good reason to write another one…</p>


<hr class="wp-block-separator has-css-opacity" />
<div class="subscription-widget-wrap-editor" data-attrs="{&quot;url&quot;:&quot;https://digitalurban.substack.com/subscribe?&quot;,&quot;text&quot;:&quot;Subscribe&quot;,&quot;language&quot;:&quot;en&quot;}" data-component-name="SubscribeWidgetToDOM">
<div class="subscription-widget show-subscribe">
<div class="preamble">
<p class="cta-caption">Thanks for reading Digitalurban’s Substack! Subscribe for free to receive new posts and support my work.</p>
</div>
<form class="subscription-widget-subscribe"><input class="email-input" tabindex="-1" name="email" type="email" placeholder="Type your email…" /><input class="button primary" type="submit" value="Subscribe" />
<div class="fake-input-wrapper">
<div class="fake-input"> </div>
<div class="fake-button"> </div>
</div>
</form></div>
</div><p>The post <a href="https://www.digitalurban.org/blog/2025/07/16/vibe-coding-from-ios-apps-to-an-asteroid-clock-and-3d-cities/">Vibe Coding: From iOS Apps to an Asteroid Clock and 3D Cities</a> appeared first on <a href="https://www.digitalurban.org">Digital Urban</a>.</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Make a Scrolling Hub75 Matrix Display using a Pimoroni Interstate75W and MQTT</title>
		<link>https://www.digitalurban.org/blog/2024/07/12/creating-an-scrolling-hub75-matrix-display-with-pimoroni-interstate75w-and-mqtt/</link>
					<comments>https://www.digitalurban.org/blog/2024/07/12/creating-an-scrolling-hub75-matrix-display-with-pimoroni-interstate75w-and-mqtt/#comments</comments>
		
		<dc:creator><![CDATA[Andy]]></dc:creator>
		<pubDate>Fri, 12 Jul 2024 09:30:06 +0000</pubDate>
				<category><![CDATA[Making]]></category>
		<category><![CDATA[Posts]]></category>
		<category><![CDATA[Data]]></category>
		<category><![CDATA[home assistant]]></category>
		<category><![CDATA[iot]]></category>
		<category><![CDATA[making]]></category>
		<category><![CDATA[MQTT Scroller]]></category>
		<guid isPermaLink="false">https://www.digitalurban.org/?p=7832</guid>

					<description><![CDATA[<p>The post <a href="https://www.digitalurban.org/blog/2024/07/12/creating-an-scrolling-hub75-matrix-display-with-pimoroni-interstate75w-and-mqtt/">Make a Scrolling Hub75 Matrix Display using a Pimoroni Interstate75W and MQTT</a> appeared first on <a href="https://www.digitalurban.org">Digital Urban</a>.</p>
]]></description>
										<content:encoded><![CDATA[<div id="fws_696b821a0b165"  data-column-margin="default" data-midnight="dark"  class="wpb_row vc_row-fluid vc_row top-level"  style="padding-top: 0px; padding-bottom: 0px; "><div class="row-bg-wrap" data-bg-animation="none" data-bg-animation-delay="" data-bg-overlay="false"><div class="inner-wrap row-bg-layer" ><div class="row-bg viewport-desktop"  style=""></div></div></div><div class="row_col_wrap_12 col span_12 dark left">
	<div  class="vc_col-sm-12 wpb_column column_container vc_column_container col no-extra-padding inherit_tablet inherit_phone "  data-padding-pos="all" data-has-bg-color="false" data-bg-color="" data-bg-opacity="1" data-animation="" data-delay="0" >
		<div class="vc_column-inner" >
			<div class="wpb_wrapper">
				
<div class="wpb_text_column wpb_content_element " >
	<div class="wpb_wrapper">
		<p>There are many tutorials online on using an LED Matrix to display data—many of them require wiring up a screen, external power supplies, or flashing boards. We wanted to highlight a slightly more accessible way to get an LED Matrix—in our case, a Hub 75, 32&#215;64 pixel up and running using an <a href="https://shop.pimoroni.com/products/interstate-75-w?variant=40453881299027">Interstate75W from Pimoroni.</a> The benefit of the Interstate is that it plugs indirectly into the matrix and can power a single screen directly from the board.</p>
<div id="attachment_7838" style="width: 310px" class="wp-caption alignnone"><img fetchpriority="high" decoding="async" aria-describedby="caption-attachment-7838" class="size-medium wp-image-7838" src="https://www.digitalurban.org/wp-content/uploads/2024/07/interstate-75-w-2_1500x1500_crop_center-300x300.webp" alt="Interstate75W " width="300" height="300" srcset="https://www.digitalurban.org/wp-content/uploads/2024/07/interstate-75-w-2_1500x1500_crop_center-300x300.webp 300w, https://www.digitalurban.org/wp-content/uploads/2024/07/interstate-75-w-2_1500x1500_crop_center-1024x1024.webp 1024w, https://www.digitalurban.org/wp-content/uploads/2024/07/interstate-75-w-2_1500x1500_crop_center-150x150.webp 150w, https://www.digitalurban.org/wp-content/uploads/2024/07/interstate-75-w-2_1500x1500_crop_center-768x768.webp 768w, https://www.digitalurban.org/wp-content/uploads/2024/07/interstate-75-w-2_1500x1500_crop_center-140x140.webp 140w, https://www.digitalurban.org/wp-content/uploads/2024/07/interstate-75-w-2_1500x1500_crop_center-100x100.webp 100w, https://www.digitalurban.org/wp-content/uploads/2024/07/interstate-75-w-2_1500x1500_crop_center-500x500.webp 500w, https://www.digitalurban.org/wp-content/uploads/2024/07/interstate-75-w-2_1500x1500_crop_center-350x350.webp 350w, https://www.digitalurban.org/wp-content/uploads/2024/07/interstate-75-w-2_1500x1500_crop_center-1000x1000.webp 1000w, https://www.digitalurban.org/wp-content/uploads/2024/07/interstate-75-w-2_1500x1500_crop_center-800x800.webp 800w, https://www.digitalurban.org/wp-content/uploads/2024/07/interstate-75-w-2_1500x1500_crop_center.webp 1500w" sizes="(max-width: 300px) 100vw, 300px" /><p id="caption-attachment-7838" class="wp-caption-text">Interstate75W</p></div>
<p>We wanted a way to display any data we wanted on the screen with the screen lighting up and data scrolling up as it arrives and then turning off. To use this we use MQTT to load our data (a test feed is included in the scripts &#8211; which displays Time, News and Environmental Information) &#8211; see below for a demo:</p>
<p>&nbsp;</p>
<div style="text-align: center;"><iframe src="https://www.youtube.com/embed/kG3OStmfXLk" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>
<p>We also incorporate manual brightness control and reconnecting for the MQTT for message handling, making it easy to update the display from anywhere. Setting up your own MQTT is beyond this post, but its easier than you may think and once you have one it can be used to display any data, from external feeds such as weather apis through to data from systems such as Home Assistant. Edit April 2025, we have added additional files to allow use with the new <a href="https://shop.pimoroni.com/products/interstate-75-w?variant=55006518411643">Pimoroni Intersate Starter Kit 128&#215;128 Matrix</a>, allowing a larger format screen, as pictured below.</p>
<div id="attachment_7914" style="width: 1034px" class="wp-caption aligncenter"><img decoding="async" aria-describedby="caption-attachment-7914" class="wp-image-7914 size-large" src="https://www.digitalurban.org/wp-content/uploads/2024/07/Matrix128x128-1024x576.jpeg" alt="Matrix128x128" width="1024" height="576" srcset="https://www.digitalurban.org/wp-content/uploads/2024/07/Matrix128x128-1024x576.jpeg 1024w, https://www.digitalurban.org/wp-content/uploads/2024/07/Matrix128x128-300x169.jpeg 300w, https://www.digitalurban.org/wp-content/uploads/2024/07/Matrix128x128-768x432.jpeg 768w, https://www.digitalurban.org/wp-content/uploads/2024/07/Matrix128x128-1536x864.jpeg 1536w, https://www.digitalurban.org/wp-content/uploads/2024/07/Matrix128x128-2048x1152.jpeg 2048w" sizes="(max-width: 1024px) 100vw, 1024px" /><p id="caption-attachment-7914" class="wp-caption-text">Matrix128x128</p></div>
<h3>Features</h3>
<ul>
<li><strong>Scrolling Text Messages:</strong> Display messages that scroll across the HUB75 LED matrix.</li>
<li><strong>Manual Brightness Control:</strong> Adjust the brightness of the display manually.</li>
<li><strong>MQTT Integration:</strong> Receive and display messages via MQTT.</li>
</ul>
<h3>Hardware Requirements</h3>
<p>To get started, you&#8217;ll need the following hardware:</p>
<ul>
<li><a href="https://shop.pimoroni.com/products/interstate-75-w?variant=40453881299027">Pimoroni Interstate75W</a></li>
<li><a href="https://shop.pimoroni.com/products/rgb-led-matrix-panel?variant=42312764298">A HUB75 LED matrix display</a></li>
<li><a href="https://www.printables.com/model/939763-hub75-display-case-for-the-interstate75w-32x64-4mm">3D Printed Case</a></li>
<li>MQTT broker (local or cloud-based) &#8211; we provide our own feed so you can test the set up.</li>
</ul>
<p>There is also room in the 3D printed case to attach a cloth cover, acting a diffuser (a grey t-shirt works well, cut to size):</p>
<div id="attachment_7879" style="width: 1034px" class="wp-caption aligncenter"><img loading="lazy" decoding="async" aria-describedby="caption-attachment-7879" class="wp-image-7879 size-large" src="https://www.digitalurban.org/wp-content/uploads/2024/07/Photoroom_20250128_104636-1024x576.png" alt="LED Matrix with Cloth Cover" width="1024" height="576" srcset="https://www.digitalurban.org/wp-content/uploads/2024/07/Photoroom_20250128_104636-1024x576.png 1024w, https://www.digitalurban.org/wp-content/uploads/2024/07/Photoroom_20250128_104636-300x169.png 300w, https://www.digitalurban.org/wp-content/uploads/2024/07/Photoroom_20250128_104636-768x432.png 768w, https://www.digitalurban.org/wp-content/uploads/2024/07/Photoroom_20250128_104636-1536x864.png 1536w, https://www.digitalurban.org/wp-content/uploads/2024/07/Photoroom_20250128_104636-2048x1152.png 2048w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><p id="caption-attachment-7879" class="wp-caption-text">LED Matrix with Cloth Cover</p></div>
<h2>Software Requirements</h2>
<p>You&#8217;ll also need the following software &#8211; all available from our GitHub</p>
<ul>
<li>MicroPython</li>
<li>Required MicroPython libraries:
<ul>
<li><code>interstate75</code></li>
<li><code>mqtt_as</code></li>
<li><code>uasyncio</code></li>
</ul>
</li>
</ul>
<h3>Setup</h3>
<h3>1. Clone the Repository</h3>
<p>First, clone the project repository from GitHub, or just download the files directly:</p>
<p>&#8220;`sh<br />
git clone <a href="https://github.com/digitalurban/Interstate75W_MQTT_Scroller">https://github.com/digitalurban/Interstate75W_MQTT_Scroller</a><br />
cd interstate75w-mqtt-display<br />
&#8220;`</p>
<h3>2. Upload the Code</h3>
<p>Next, upload the code to your microcontroller. You can use tools like Thonny or ampy to do this.</p>
<h3>3. Configure WiFi and MQTT</h3>
<p>Update the <code>config.py</code> file with your WiFi credentials, the MQTT details can also be updated if you have your own server, if not then leave them for our demo feed.</p>
<p>&#8220;`python<br />
config = {<br />
&#8216;ssid&#8217;: &#8216;your_wifi_ssid&#8217;,<br />
&#8216;wifi_pw&#8217;: &#8216;your_wifi_password&#8217;,<br />
&#8216;server&#8217;: &#8216;mqtt_broker_address&#8217;,<br />
&#8216;user&#8217;: &#8216;mqtt_user&#8217;,<br />
&#8216;password&#8217;: &#8216;mqtt_password&#8217;,<br />
&#8216;port&#8217;: 1883,<br />
&#8216;keepalive&#8217;: 60,<br />
}<br />
&#8220;`</p>
<h3>Usage</h3>
<h3>Run the Script</h3>
<p>The script will automatically connect to WiFi and the MQTT broker, then start displaying messages &#8211; our MQQ feed displays messages approximatly every 3 minutes.</p>
<h3>Constants and Initial Setup</h3>
<p>The script defines constants for controlling the scrolling text speed, how long the screen says on for after displaying the message and brightness settings. It also initializes the Interstate75W object:</p>
<h4>Constants for controlling scrolling text</h4>
<p>BACKGROUND_COLOUR = (0, 0, 0) # Black background to turn off the screen<br />
HOLD_TIME = 2.0<br />
BLANK_SCREEN_TIME = 10.0<br />
BUFFER_PIXELS = 2 # Increased buffer to ensure full scroll off<br />
SCROLL_SPEED_LEVEL = 8 # Set the desired scrolling speed level (1 to 10)<br />
SCROLL_SPEED = 1 / SCROLL_SPEED_LEVEL # Convert to a delay in seconds</p>
<h4>Brightness settings</h4>
<p>brightness = 50 # Initial brightness (0 to 100)</p>
<p>Do let us know if you make one &#8211; we would love to see images of your own set up and we hope this made it a little easier for anyone new looking to run an LED matrix using MQTT.</p>
	</div>
</div>




			</div> 
		</div>
	</div> 
</div></div>
<p>The post <a href="https://www.digitalurban.org/blog/2024/07/12/creating-an-scrolling-hub75-matrix-display-with-pimoroni-interstate75w-and-mqtt/">Make a Scrolling Hub75 Matrix Display using a Pimoroni Interstate75W and MQTT</a> appeared first on <a href="https://www.digitalurban.org">Digital Urban</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.digitalurban.org/blog/2024/07/12/creating-an-scrolling-hub75-matrix-display-with-pimoroni-interstate75w-and-mqtt/feed/</wfw:commentRss>
			<slash:comments>1</slash:comments>
		
		
			</item>
		<item>
		<title>Node.JS, Node Express and Puppeteer for Epaper / EInk Displays: How to Open a Web Page &#038; Save as an Image</title>
		<link>https://www.digitalurban.org/blog/2021/02/24/node-js-node-express-and-puppeteer-for-epaper-eink-displays-how-to-open-a-web-page-save-as-an-image-2/</link>
					<comments>https://www.digitalurban.org/blog/2021/02/24/node-js-node-express-and-puppeteer-for-epaper-eink-displays-how-to-open-a-web-page-save-as-an-image-2/#comments</comments>
		
		<dc:creator><![CDATA[Andy]]></dc:creator>
		<pubDate>Wed, 24 Feb 2021 22:40:44 +0000</pubDate>
				<category><![CDATA[Posts]]></category>
		<category><![CDATA[eink]]></category>
		<category><![CDATA[epaper]]></category>
		<category><![CDATA[inkpate]]></category>
		<category><![CDATA[kindle]]></category>
		<category><![CDATA[node express]]></category>
		<category><![CDATA[node.js]]></category>
		<category><![CDATA[puppeteer]]></category>
		<guid isPermaLink="false">http://www.digitalurban.org/?p=5929</guid>

					<description><![CDATA[<p>The post <a href="https://www.digitalurban.org/blog/2021/02/24/node-js-node-express-and-puppeteer-for-epaper-eink-displays-how-to-open-a-web-page-save-as-an-image-2/">Node.JS, Node Express and Puppeteer for Epaper / EInk Displays: How to Open a Web Page &#038; Save as an Image</a> appeared first on <a href="https://www.digitalurban.org">Digital Urban</a>.</p>
]]></description>
										<content:encoded><![CDATA[
		<div id="fws_696b821a10d34"  data-column-margin="default" data-midnight="dark"  class="wpb_row vc_row-fluid vc_row"  style="padding-top: 0px; padding-bottom: 0px; "><div class="row-bg-wrap" data-bg-animation="none" data-bg-animation-delay="" data-bg-overlay="false"><div class="inner-wrap row-bg-layer" ><div class="row-bg viewport-desktop"  style=""></div></div></div><div class="row_col_wrap_12 col span_12 dark left">
	<div  class="vc_col-sm-12 wpb_column column_container vc_column_container col no-extra-padding"  data-padding-pos="all" data-has-bg-color="false" data-bg-color="" data-bg-opacity="1" data-animation="" data-delay="0" >
		<div class="vc_column-inner" >
			<div class="wpb_wrapper">
				
<div class="wpb_text_column wpb_content_element " >
	<div class="wpb_wrapper">
		<p class="has-drop-cap">Sometimes there is a need to step back and do things as simply as possible. EInk / Epaper screens are amazing, they carrying on showing an image with zero power and the screens have a certain clarity that is hard to achieve with more standard LED offerings. The more difficult part is getting content onto them, especially content that is well designed and fits the screen.</p>
<p>&nbsp;</p>
<figure class="wp-block-pullquote">
<blockquote>
<p>Puppeteer can do many things but for our use it allows the Pi to open a webpage, take a screengrab, save it as an image and then close. This image can subsequently be served via Node Express and viewed on an eInk screen.</p>
</blockquote>
</figure>
<p>To make the most of eInk/epaper screens you generally grab some information using a microcontroller, such as a Node MCU or ESP32, send it to the screen and then power down. This means you can check for new information over a period of time, say, every 15 minutes, display it and then sleep, allowing your screen to be battery powered for weeks on end.</p>
<p>&nbsp;</p>
<div class="wp-block-media-text alignwide is-stacked-on-mobile">
<figure class="wp-block-media-text__media"><img decoding="async" class="wp-image-5942 size-full" src="http://www.digitalurban.org/wp-content/uploads/2021/02/Nighttimeside-1024x867.jpg" alt="Inkplate 6 Case" /></figure>
<div class="wp-block-media-text__content">
<p>At the moment we are using the amazing <a href="https://inkplate.io/">InkPlate 6.</a> The InkPlate 6 is built around a recycled Kindle Screen and has a built-in ESP32 controller, a lithium battery connecter/charger and perhaps, more importantly, an easy to understand library to display an image and then sleep. In the world of eInk screens, the importance of an easy to understand library really cannot be understated, some of them are notably complex. We have published the <a href="https://www.thingiverse.com/thing:4729759">3D printable case to Thingiverse</a> so all you need is the InkPlate (or any other screen you want to display an image on), a script to load a webpage and some Node JS to grab the information you want to display.</p>
</div>
</div>
<p>&nbsp;</p>
<div class="wp-block-media-text alignwide has-media-on-the-right is-stacked-on-mobile">
<figure class="wp-block-media-text__media"><img decoding="async" class="wp-image-5933 size-full" src="http://www.digitalurban.org/wp-content/uploads/2021/02/IMG_2865-1024x768.jpg" alt="windy.com on an eink screen" /></figure>
<div class="wp-block-media-text__content">
<p>We are using 3 variations of the same script on our ePaper display, one to grab a webpage showing environmental information, a second decoding a weather forecast from the Met Office, another showing a Rainfall radar and we cycle these every 15 minutes with the environmental information showing twice in the hour.</p>
</div>
</div>
<p><!-- /wp:post-content -->The information can of course be any web page you want to display, from a news site,  a social network feed, transport information or anything you want to show.</p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:paragraph --><strong>Ingredients</strong></p>
<p><!-- /wp:paragraph --></p>
<p>&nbsp;</p>
<p><!-- wp:list {"ordered":true} --></p>
<ol>
<li>You will need a device capable of running Node JS, we are using a Raspberry Pi 4. We assume here that you have a Pi up and running with the full operating system installed, if not then take a look at the main<a href="https://www.raspberrypi.org/documentation/installation/installing-images/" target="_blank" rel="noreferrer noopener"> Pi site</a> for details on how to set up. If you need any help then drop us a line in the comments and we can expand this section as needs be.</li>
<li>Optional: An eInk screen and controller &#8211; we are using the <a href="https://inkplate.io/" target="_blank" rel="noreferrer noopener">InkPlate 6</a> and our code to load the image once grabbed is now <a href="https://github.com/digitalurban/InkPlate6WebImage">available on GitHub</a>. There are a number of eInk/epaper screens, the most popular ones being made by WaveShare. These will also work if you edit the example code from the libraries that allow the display of online images. Of course, you may simply want to have an automated screengrab of a webpage. Such things are useful in Unity3D to make Augmented Reality displays, for example.</li>
</ol>
<p><!-- /wp:list --></p>
<p><!-- wp:paragraph --><strong>Installing Node JS</strong></p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:paragraph -->The first part is to install Node.JS, thankfully Node is quick and easy to install &#8211; in your terminal enter:</p>
<p><!-- /wp:paragraph --></p>
<p>&nbsp;</p>
<p><!-- wp:code --></p>
<pre class="wp-block-code"><code>$ curl -sL https://deb.nodesource.com/setup_15.10.0 | sudo -E bash -</code></pre>
<p><!-- /wp:code --></p>
<p><!-- wp:paragraph -->The 15.10.0 represent the current version as of February 2021, change this number to the latest version as needs be &#8211; you can find out the current release via the <a href="https://nodejs.org/en/download/current/" target="_blank" rel="noreferrer noopener">main Node JS site.</a> You have now made your Pi aware of where to find Node.</p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:paragraph --> The next step is to install it:</p>
<p><!-- /wp:paragraph --></p>
<p>&nbsp;</p>
<p><!-- wp:code --></p>
<pre class="wp-block-code"><code>sudo apt install nodejs</code></pre>
<p><!-- /wp:code --></p>
<p><!-- wp:paragraph -->To check all is in place you can run:</p>
<p><!-- /wp:paragraph --></p>
<p>&nbsp;</p>
<p><!-- wp:code --></p>
<pre class="wp-block-code"><code>node -v</code></pre>
<p><!-- /wp:code --></p>
<p><!-- wp:paragraph -->This will tell you the version of Node you are running. You have installed Node, well done, now for the Puppeteer library.</p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:paragraph --><strong>Installing and Configuring Puppeteer</strong></p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:paragraph -->Puppeteer is a library for Node.js that allows for the control of the Chrome browser in headerless mode (i.e. you dont see it happening). This allows you to open a web page, do something with it &#8211; in our case take a screenshot &#8211; and then close chrome, all via a simple script.</p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:paragraph -->Installing Puppeteer is all via a single line in the terminal:</p>
<p><!-- /wp:paragraph --></p>
<p>&nbsp;</p>
<p><!-- wp:code --></p>
<pre class="wp-block-code"><code>npm i puppeteer --save</code></pre>
<p><!-- /wp:code --></p>
<p><!-- wp:paragraph -->Now you have Node.js and Puppeteer installed, all you need now is to create a script to tell Node what to do:</p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:paragraph -->We like to start a new script in a new directory called &#8216;Scripts&#8217; (although it can be anywhere).</p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:paragraph -->So firstly create a new directory via the terminal:</p>
<p><!-- /wp:paragraph --></p>
<p>&nbsp;</p>
<p><!-- wp:code --></p>
<pre class="wp-block-code"><code>mkdir Scripts</code></pre>
<p><!-- /wp:code --></p>
<p><!-- wp:paragraph -->Now create your first empty script, we are going to call ours &#8216;webpage.js&#8217;:</p>
<p><!-- /wp:paragraph --></p>
<p>&nbsp;</p>
<p><!-- wp:code --></p>
<pre class="wp-block-code"><code>sudo nano webpage.js</code></pre>
<p><!-- /wp:code --></p>
<p><!-- wp:paragraph -->Below is the javascript to cut and paste into your new script:</p>
<p><!-- /wp:paragraph --></p>
<p>&nbsp;</p>
<p><!-- wp:code --></p>
<pre class="wp-block-code"><code>const puppeteer = require('puppeteer');
async function timeout(ms) {
  return new Promise(resolve =&gt; setTimeout(resolve, ms));
}
(async () =&gt; {
let browser = await puppeteer.launch({
          headless: true,
          executablePath: '/usr/bin/chromium-browser',
//          args: ['--no-sandbox', '--disable-setuid-sandbox']
  });
  const page = await browser.newPage();
  await page.goto('http:YourWebPageURL');
// 5 second timeout: allows the page to fully render before taking the screenshot
  await timeout(5000);
  await page.setViewport({ width: 800, height: 600});
  await page.screenshot({path: '/home/pi/Scripts/eink.jpg'});
  await browser.close();
})();
</code></pre>
<p><!-- /wp:code --></p>
<p><!-- wp:paragraph -->The main parts to note above are the http: where you need to add in the webpage you want to capture and the width and height of the page. This should be changed according to the resolution of your screen, the InkPlate 6 runs at 800&#215;600 resolution. The script opens the URL, waits 5 seconds for it to fully load and then saves a screenshot as a jpg to the location of your choice.</p>
<p>To run your script:</p>
<p><code>node webpage.js</code><br /><!-- /wp:paragraph --></p>
<p>The script should now run, load a webpage and save the image to your Pi.</p>
<p><!-- wp:paragraph -->If you are running your eInk display direct from your Pi (such as using a Waveshare screen) you can stop here and point your display to the new image. If however, you are using a screen elsewhere on your network you will need to host it, this is where Node Express comes in.</p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:paragraph --><strong>Installing Node Express</strong></p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:paragraph -->As with Node and Puppeteer installing is via a simple one line command:</p>
<p><!-- /wp:paragraph --></p>
<p>&nbsp;</p>
<p><!-- wp:code --></p>
<pre class="wp-block-code"><code>npm install express --save</code></pre>
<p><!-- /wp:code --></p>
<p><!-- wp:paragraph -->To start the server and host the image, you need another script. So the same as before, create a script, we called ours server.js:</p>
<p><!-- /wp:paragraph --></p>
<p>&nbsp;</p>
<p><!-- wp:code --></p>
<pre class="wp-block-code"><code>sudo nano server.js</code></pre>
<p><!-- /wp:code --></p>
<p><!-- wp:paragraph -->Cut and paste the following:</p>
<p><!-- /wp:paragraph --></p>
<p>&nbsp;</p>
<p><!-- wp:code --></p>
<pre class="wp-block-code"><code>var express = require('express');
var app = express();
var path = require('path');
var public = path.join(__dirname, 'public');
// viewed at http://localhost:8080
app.get('/', function(req, res) {
    res.sendFile(path.join(public, 'index.html'));
});
app.use('/', express.static(public));
app.listen(8080);</code></pre>
<p><!-- /wp:code --></p>
<p><!-- wp:paragraph -->The above script runs a server at http://localhost:8080 where you can install a welcome page (index.html) if you wish but more importantly you can serve static files, in our case our screen grab eink.jpg. Note that the folder address is &#8216;public&#8217; this is where you will host your files.</p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:paragraph -->In our first script we now want to edit the folder where our image is saved, so we can host it as soon as it is created, so simply edit the file, (again using sudo nano webpage.js) to include the &#8216;public&#8217; directory -ie /home/pi/Scripts/public/eink.jpg</p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:paragraph -->If you now go to either http://localhost:8080/eink.jpg on the host machine or your http://<em>Your IP of the PI:</em>8080/eink.jpg you should be able to view the jpg.</p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:paragraph -->All that needs to be done now is to start the server when the Pi boots and to run the webpage script every set period of time. To load different webpages simply clone the webpage.js script but with a different URL to grab and run it at a different time, as mentioned, we run 4 scripts an hour via cron jobs.</p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:paragraph --><strong>Cron Jobs</strong></p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:paragraph -->The final part is to run the server at boot and the script every 15 minutes.</p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:paragraph -->Firstly go to your root directory by typing:</p>
<p><!-- /wp:paragraph --></p>
<p>&nbsp;</p>
<p><!-- wp:code --></p>
<pre class="wp-block-code"><code>cd:</code></pre>
<p><!-- /wp:code --></p>
<p><!-- wp:paragraph -->Now we want to install a new Cron Job, or edit one we have already set up:</p>
<p><!-- /wp:paragraph --></p>
<p>&nbsp;</p>
<p><!-- wp:code --></p>
<pre class="wp-block-code"><code>sudo crontab -e</code></pre>
<p><!-- /wp:code --></p>
<p><!-- wp:paragraph -->At the end of the file that opens add the following lines:</p>
<p><!-- /wp:paragraph --></p>
<p>&nbsp;</p>
<p><!-- wp:code --></p>
<pre class="wp-block-code"><code>@reboot sudo /usr/bin/node /home/pi/Scripts/server.js
15 * * * * /usr/bin/node /home/pi/Scripts/webpage.js</code></pre>
<p><!-- /wp:code --></p>
<p><!-- wp:paragraph -->Whenever the Pi reboots it will now start the server &#8211; via your server.js script and every 15 minutes run your webpage.js script to take an image of a webpage, which you can subsequently point your eInk screen to load.</p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:paragraph -->It may feel like a number of hoops to jump through for a simple screengrab, but once running it opens up the wider world of Node.js and Puppeteer as well as the ability to use your eInk screen to display any webpage you want.</p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:paragraph -->I hope this has been useful, do drop me a line in the comments with any thoughts or tweet me <a href="https://twitter.com/digitalurban" target="_blank" rel="noreferrer noopener">@digitalurban</a>. It&#8217;s part of a series of new &#8216;how to&#8217;s&#8217; here on <a href="https://digitalurban.org/">digitalurban.org </a>and over at <a href="https://connected-environments.org/" target="_blank" rel="noreferrer noopener">https://connected-environments.org/</a></p>
<p><!-- /wp:paragraph --><br /><!-- wp:paragraph --><!-- /wp:paragraph --> </p>
	</div>
</div>




			</div> 
		</div>
	</div> 
</div></div><p>The post <a href="https://www.digitalurban.org/blog/2021/02/24/node-js-node-express-and-puppeteer-for-epaper-eink-displays-how-to-open-a-web-page-save-as-an-image-2/">Node.JS, Node Express and Puppeteer for Epaper / EInk Displays: How to Open a Web Page &#038; Save as an Image</a> appeared first on <a href="https://www.digitalurban.org">Digital Urban</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.digitalurban.org/blog/2021/02/24/node-js-node-express-and-puppeteer-for-epaper-eink-displays-how-to-open-a-web-page-save-as-an-image-2/feed/</wfw:commentRss>
			<slash:comments>1</slash:comments>
		
		
			</item>
		<item>
		<title>The Little Book of Public Space and the Internet of Things</title>
		<link>https://www.digitalurban.org/blog/2021/02/24/the-little-book-of-public-space-and-the-internet-of-things-2/</link>
		
		<dc:creator><![CDATA[Andy]]></dc:creator>
		<pubDate>Wed, 24 Feb 2021 11:12:46 +0000</pubDate>
				<category><![CDATA[Posts]]></category>
		<category><![CDATA[Internet of Things]]></category>
		<category><![CDATA[iot]]></category>
		<category><![CDATA[Little Book]]></category>
		<category><![CDATA[Public Space]]></category>
		<guid isPermaLink="false">http://www.digitalurban.org/?p=5922</guid>

					<description><![CDATA[<p>Following on from our Little Book of Connected Environments and the Internet of Things we have a new publication &#8211; The Little Book of Public Space and the Internet of...</p>
<p>The post <a href="https://www.digitalurban.org/blog/2021/02/24/the-little-book-of-public-space-and-the-internet-of-things-2/">The Little Book of Public Space and the Internet of Things</a> appeared first on <a href="https://www.digitalurban.org">Digital Urban</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<div class="wp-block-media-text alignwide is-stacked-on-mobile is-vertically-aligned-top"><figure class="wp-block-media-text__media"><img decoding="async" src="https://www.digitalurban.org/wp-content/uploads/2021/02/Screenshot-2021-02-24-at-10.46.59-727x1024.png" alt="The Little Book of Public Space and the Internet of Things" class="wp-image-5923 size-full"/></figure><div class="wp-block-media-text__content">
<p class="has-drop-cap">Following on from our <a href="https://connected-environments.org/books-and-papers/the-little-book-of-connected-environments-and-the-internet-of-things/">Little Book of Connected Environments and the Internet of Things</a> we have a new publication &#8211; The Little Book of Public Space and the Internet of Things.</p>


<p>Our public spaces are changing, they are at the forefront of a technological revolution yet this is a revolution that often remains hidden from sight. Sensors are being installed and the ability to interact with objects in our spaces – from projects such as the PETRAS Talking Trees through to conversations with Lamp Posts or data interactions with local wildlife is changing our interactions both in and with these places and spaces.</p>


<p>Written with the brilliant <a href="https://www.designswarm.com/">Alex Deschamps-Sonsino</a>, alongside Professor Andrew Hudson-Smith and Professor Duncan Wilson from the Connected Environments Team, the Little Book explores safety and security and moves on to maintenance. We then look at some of the issues affecting people and explore health, community building and culture while exploring the use of public space for play. After this, we explore conservation and culture, transport and signage, accessibility and then, finally, we discuss future trends.</p>


<p>You can download it for free as a PDF &#8211; <a href="https://petras-iot.org/wp-content/uploads/2020/12/Little_Book_of_Public_Space_IoT.pdf"><strong>The Little Book of Public Space and the Internet of Things [PDF]</strong></a></p>


<p>Reference&nbsp; &#8211; Deschamps-Sonsino, A, Hudson-Smith, A, and Wilson, D (2020). Edited by Coulton C. ISBN 978-1-86220-391-4</p>
</div></div>
<p>The post <a href="https://www.digitalurban.org/blog/2021/02/24/the-little-book-of-public-space-and-the-internet-of-things-2/">The Little Book of Public Space and the Internet of Things</a> appeared first on <a href="https://www.digitalurban.org">Digital Urban</a>.</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>IoT 3D Printable Devices &#8211; The Spring 2021 Collection</title>
		<link>https://www.digitalurban.org/blog/2021/02/23/iot-3d-printable-devices-the-spring-2021-collection/</link>
		
		<dc:creator><![CDATA[Andy]]></dc:creator>
		<pubDate>Tue, 23 Feb 2021 09:42:01 +0000</pubDate>
				<category><![CDATA[Posts]]></category>
		<category><![CDATA[3D Printing]]></category>
		<category><![CDATA[Barograph]]></category>
		<category><![CDATA[Data]]></category>
		<category><![CDATA[iot]]></category>
		<category><![CDATA[neopixels]]></category>
		<category><![CDATA[servos]]></category>
		<category><![CDATA[SketchFab]]></category>
		<category><![CDATA[Spring 2021]]></category>
		<guid isPermaLink="false">http://www.digitalurban.org/?p=5898</guid>

					<description><![CDATA[<p>At The Connected Environments Lab, part of The Bartlett Centre for Advanced Spatial Analysis, here at University College London we are designing and building a series of IoT devices to...</p>
<p>The post <a href="https://www.digitalurban.org/blog/2021/02/23/iot-3d-printable-devices-the-spring-2021-collection/">IoT 3D Printable Devices &#8211; The Spring 2021 Collection</a> appeared first on <a href="https://www.digitalurban.org">Digital Urban</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<p>At <a rel="noreferrer noopener" href="https://connected-environments.org/" target="_blank">The Connected Environments Lab</a>, part of <a href="http://www.casa.ucl.axc.uk" target="_blank" rel="noreferrer noopener">The Bartlett Centre for Advanced Spatial Analysis</a>, here at <a href="http://ucl.ac.uk" data-type="URL" data-id="http://ucl.ac.uk" target="_blank" rel="noreferrer noopener">University College London</a> we are designing and building a series of IoT devices to communicate live data feeds. Using a mix of servo motors, neopixels, LEDs, speech systems, eink and sound we are exploring ways to monitor data within a home/office environment. These form part of a module exploring the ability to build and design devices that not only can be physically made but also exist and run with both Augmented and Virtual Reality. </p>


<p>The YouTube clip below details the collection so far (Spring 2021):</p>


<figure class="wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<iframe loading="lazy" title="3D Printable IoT Devices  -  Connected Environments,  Spring 2021. UCL, The Bartlett, CASA." width="1080" height="608" src="https://www.youtube.com/embed/MpRavRJTQzI?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div></figure>


<p>Each of these objects will be explored further and made available to print, insert into 3D worlds and view online. One such example is our &#8216;THE&#8217;  &#8211; Time, Headlines and Environmental Data. </p>


<figure class="wp-block-image size-large"><img decoding="async" src="http://www.digitalurban.org/wp-content/uploads/2019/12/IMG_1883-1024x768.jpeg" alt="THE: eink Time Headlines and Environmental Data" class="wp-image-5854"/></figure>


<p>We have a<a rel="noreferrer noopener" href="https://connected-environments.org/making/the/" target="_blank"> full tutorial on making a &#8216;THE&#8217; over at Connected Environments</a>. A more recent addition is the ability to <a href="https://sketchfab.com/digitalurban/models" target="_blank" rel="noreferrer noopener">upload models to SketchFab and make them available to download</a>. </p>


<figure class="wp-block-image size-large"><a href="https://sketchfab.com/digitalurban/models"><img decoding="async" src="https://www.digitalurban.org/wp-content/uploads/2021/02/Screenshot-2021-02-23-at-09.32.57-2-1024x694.png" alt="IoT Printable Devices" class="wp-image-5899"/></a><figcaption>Spring 2021 Collection on SketchFab</figcaption></figure>


<p>SketchFab also allows models to be embed and viewed directly within a web browser &#8211; below is an example of our 3D Printed Barograph, using realtime data feeds combined with more traditional paper and ink to recreate the Barograph &#8211; click &#8216;Play&#8217; to view the model in 3D.</p>


<center><iframe loading="lazy" sandbox="allow-scripts allow-same-origin allow-popups allow-forms" frameborder="0" width="800" height="640" src="https://sketchfab.com/3d-models/barograph-3d-printable-a2f702cb3aac478b8a4204d0c7275588//embed"></iframe></center>


<p>We will be posting more about the Spring 2021 collection in the coming weeks. Its been a while since our last post over here on Digital Urban, it is good to be back.</p>
<p>The post <a href="https://www.digitalurban.org/blog/2021/02/23/iot-3d-printable-devices-the-spring-2021-collection/">IoT 3D Printable Devices &#8211; The Spring 2021 Collection</a> appeared first on <a href="https://www.digitalurban.org">Digital Urban</a>.</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Raspberry Pi Internet Radio</title>
		<link>https://www.digitalurban.org/blog/2019/01/31/raspberry-pi-internet-radio/</link>
		
		<dc:creator><![CDATA[Andy]]></dc:creator>
		<pubDate>Thu, 31 Jan 2019 09:03:11 +0000</pubDate>
				<category><![CDATA[Posts]]></category>
		<category><![CDATA[radio]]></category>
		<category><![CDATA[raspberry pi]]></category>
		<guid isPermaLink="false">http://www.digitalurban.org/?p=3756</guid>

					<description><![CDATA[<p>Part of creating a new insight into &#8216;Connected Environments&#8217; (more on that term in future posts) is understanding the function, design and nature of devices. The enclosure of a device...</p>
<p>The post <a href="https://www.digitalurban.org/blog/2019/01/31/raspberry-pi-internet-radio/">Raspberry Pi Internet Radio</a> appeared first on <a href="https://www.digitalurban.org">Digital Urban</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p>Part of creating a new insight into &#8216;Connected Environments&#8217; (more on that term in future posts) is understanding the function, design and nature of devices. The enclosure of a device is all important and in the world of the Internet of Things, often overlooked.<br />
Before delving into casing sensors its worth taking a step to look at kits available online and how they can be adapted to a new form. As such we have used the <a href="https://shop.pimoroni.com/products/pirate-radio-pi-zero-w-project-kit">Pimoroni radio kit</a> (its a great kit) as a first example:<br />
<img loading="lazy" decoding="async" class=" wp-image-3760" src="https://www.digitalurban.org/wp-content/uploads/2019/01/zero-w-kits-square-1_1024x1024-1.jpg" alt="" width="530" height="530" srcset="https://www.digitalurban.org/wp-content/uploads/2019/01/zero-w-kits-square-1_1024x1024-1.jpg 1024w, https://www.digitalurban.org/wp-content/uploads/2019/01/zero-w-kits-square-1_1024x1024-1-300x300.jpg 300w, https://www.digitalurban.org/wp-content/uploads/2019/01/zero-w-kits-square-1_1024x1024-1-150x150.jpg 150w, https://www.digitalurban.org/wp-content/uploads/2019/01/zero-w-kits-square-1_1024x1024-1-768x768.jpg 768w" sizes="auto, (max-width: 530px) 100vw, 530px" /><br />
The redesigned radio case was designed to create a small, easy to use radio with decent sound. It uses the PhatBeat header from Pimoroni, which can either be purchased alone or as as part of a Pi Radio kit, full links are below via Thingiverse. It will of course work with any other audio output from a Raspberry Pi Zero.<br />
<iframe loading="lazy" width="560" height="315" src="https://www.youtube.com/embed/BSZwm-QcnEU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe><br />
The speaker has been replaced with a Surface Transducer, allowing a smaller case as well as making use of what ever surface the radio is placed upon to enhance the sound. The transducer is at the bottom of the unit as a small metal disc, placing it on a wooden surface creates the deepest sound, a sound beyond the size of the device.<br />
<img loading="lazy" decoding="async" class="aligncenter wp-image-3762" src="https://www.digitalurban.org/wp-content/uploads/2019/01/10975-Surface_Transducer_-_Large-02_1024x1024-1.jpg" alt="" width="403" height="403" srcset="https://www.digitalurban.org/wp-content/uploads/2019/01/10975-Surface_Transducer_-_Large-02_1024x1024-1.jpg 600w, https://www.digitalurban.org/wp-content/uploads/2019/01/10975-Surface_Transducer_-_Large-02_1024x1024-1-300x300.jpg 300w, https://www.digitalurban.org/wp-content/uploads/2019/01/10975-Surface_Transducer_-_Large-02_1024x1024-1-150x150.jpg 150w" sizes="auto, (max-width: 403px) 100vw, 403px" /><br />
The buttons are &#8216;mini arcade&#8217; buttons, aimed at simplifying the operation of the radio &#8211; it features play/pause (Yellow), next station (Blue) and Volume up (Red), Volume Down (Green).<br />
<img loading="lazy" decoding="async" class="aligncenter wp-image-3758" src="https://www.digitalurban.org/wp-content/uploads/2019/01/IMG_5244-1-1024x768.jpg" alt="" width="491" height="368" srcset="https://www.digitalurban.org/wp-content/uploads/2019/01/IMG_5244-1-1024x768.jpg 1024w, https://www.digitalurban.org/wp-content/uploads/2019/01/IMG_5244-1-300x225.jpg 300w, https://www.digitalurban.org/wp-content/uploads/2019/01/IMG_5244-1-768x576.jpg 768w, https://www.digitalurban.org/wp-content/uploads/2019/01/IMG_5244-1-1536x1152.jpg 1536w, https://www.digitalurban.org/wp-content/uploads/2019/01/IMG_5244-1-2048x1536.jpg 2048w" sizes="auto, (max-width: 491px) 100vw, 491px" /><br />
There is no power off in the current version as its built to be left powered for instant audio (although the feature is built into the PhatBeat so can be easily extended).<br />
<img loading="lazy" decoding="async" class="aligncenter wp-image-3757" src="https://www.digitalurban.org/wp-content/uploads/2019/01/IMG_3470-1-1024x768.jpg" alt="" width="496" height="372" srcset="https://www.digitalurban.org/wp-content/uploads/2019/01/IMG_3470-1-1024x768.jpg 1024w, https://www.digitalurban.org/wp-content/uploads/2019/01/IMG_3470-1-300x225.jpg 300w, https://www.digitalurban.org/wp-content/uploads/2019/01/IMG_3470-1-768x576.jpg 768w, https://www.digitalurban.org/wp-content/uploads/2019/01/IMG_3470-1-1536x1152.jpg 1536w, https://www.digitalurban.org/wp-content/uploads/2019/01/IMG_3470-1-2048x1536.jpg 2048w" sizes="auto, (max-width: 496px) 100vw, 496px" /><br />
Full details on how to make it, along with the 3D case to print are <a href="https://www.thingiverse.com/thing:3391811">now available on Thingiverse</a>.<br />
.<br />
Do let us know if you make one&#8230;<br />
&nbsp;<br />
&nbsp;</p>
<p>The post <a href="https://www.digitalurban.org/blog/2019/01/31/raspberry-pi-internet-radio/">Raspberry Pi Internet Radio</a> appeared first on <a href="https://www.digitalurban.org">Digital Urban</a>.</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>3D Printing a Radiation Shield for the Weather Flow Air</title>
		<link>https://www.digitalurban.org/blog/2018/09/21/3d-printing-a-radiation-shield-for-the-weather-flow-air/</link>
		
		<dc:creator><![CDATA[Andy]]></dc:creator>
		<pubDate>Fri, 21 Sep 2018 15:56:06 +0000</pubDate>
				<category><![CDATA[Posts]]></category>
		<category><![CDATA[3d modelling]]></category>
		<category><![CDATA[3D Printing]]></category>
		<category><![CDATA[senors]]></category>
		<category><![CDATA[weather data]]></category>
		<guid isPermaLink="false">http://www.digitalurban.org/?p=3725</guid>

					<description><![CDATA[<p>The Weather Flow &#8216;Smart Weather Station&#8216; is arguably one of the most innovative weather sensors on the market. Launched via a kickstater campaign in 2017, the system is now shipping...</p>
<p>The post <a href="https://www.digitalurban.org/blog/2018/09/21/3d-printing-a-radiation-shield-for-the-weather-flow-air/">3D Printing a Radiation Shield for the Weather Flow Air</a> appeared first on <a href="https://www.digitalurban.org">Digital Urban</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<figure class="wp-block-image is-resized"><img loading="lazy" decoding="async" src="https://www.digitalurban.org/wp-content/uploads/2018/09/WFRender-1.png" alt="" class="wp-image-3726" width="580" height="298" srcset="https://www.digitalurban.org/wp-content/uploads/2018/09/WFRender-1.png 1511w, https://www.digitalurban.org/wp-content/uploads/2018/09/WFRender-1-300x154.png 300w, https://www.digitalurban.org/wp-content/uploads/2018/09/WFRender-1-1024x527.png 1024w, https://www.digitalurban.org/wp-content/uploads/2018/09/WFRender-1-768x395.png 768w" sizes="auto, (max-width: 580px) 100vw, 580px" /><figcaption>Weather Flow Shield &#8211; Fusion 360 Model Render</figcaption></figure>


<p>The Weather Flow &#8216;<a href="http://weatherflow.com/smart-home-weather-stations/">Smart Weather Station</a>&#8216; is arguably one of the most innovative weather sensors on the market. Launched via a kickstater campaign in 2017, the system is now shipping to backers and will be made available for general sale shortly.</p>


<figure class="wp-block-image"><img loading="lazy" decoding="async" width="740" height="366" src="https://www.digitalurban.org/wp-content/uploads/2018/09/sws-all-wp-1-1.png" alt="" class="wp-image-3727" srcset="https://www.digitalurban.org/wp-content/uploads/2018/09/sws-all-wp-1-1.png 740w, https://www.digitalurban.org/wp-content/uploads/2018/09/sws-all-wp-1-1-300x148.png 300w" sizes="auto, (max-width: 740px) 100vw, 740px" /><figcaption>Air, Sky and Breathe</figcaption></figure>


<p>The system consists of two current hardware modules &#8211; the Air and Sky with a third unit &#8211; Breathe focusing on air quality arriving at a future date. The Air (pictured above left) measures Temperature, Pressure, Humidity and Lightning. The Sky unit (above middle) measures wind (via ultrasonic sensors), rain (haptic sensors), Solar Radiance and Solar UV.  </p>


<p>Sensor data refreshes every 3 seconds via either the Weather Flow app (see <a href="http://smartweather.weatherflow.com/share/2701/grid">smartweather.weatherflow.com/share/2701/grid</a> for our data feed) or via a<a href="http://finchamweather.co.uk"> dashboard</a> powered by various 3rd party applications.</p>


<figure class="wp-block-image"><img loading="lazy" decoding="async" width="1167" height="701" src="https://www.digitalurban.org/wp-content/uploads/2018/09/Capture-1.png" alt="" class="wp-image-3732" srcset="https://www.digitalurban.org/wp-content/uploads/2018/09/Capture-1.png 1167w, https://www.digitalurban.org/wp-content/uploads/2018/09/Capture-1-300x180.png 300w, https://www.digitalurban.org/wp-content/uploads/2018/09/Capture-1-1024x615.png 1024w, https://www.digitalurban.org/wp-content/uploads/2018/09/Capture-1-768x461.png 768w" sizes="auto, (max-width: 1167px) 100vw, 1167px" /><figcaption><a href="http://finchamweather.co.uk">Local Weather Data Dashboard</a></figcaption></figure>


<p>Placing temperature and humidity in the field is not as easy as simply putting a device outside. It needs to be suitably shielded from the sun and rain as well as being at a set height (1.25m) to reduce heating from the ground. High end stations often use a &#8216;Stevenson Screen&#8217; to shield instruments and to comply with international measurement standards. </p>


<figure class="wp-block-image"><img loading="lazy" decoding="async" width="627" height="599" src="https://www.digitalurban.org/wp-content/uploads/2018/09/627px-Single_louvered_stevenson_screen-1.jpg" alt="" class="wp-image-3735" srcset="https://www.digitalurban.org/wp-content/uploads/2018/09/627px-Single_louvered_stevenson_screen-1.jpg 627w, https://www.digitalurban.org/wp-content/uploads/2018/09/627px-Single_louvered_stevenson_screen-1-300x287.jpg 300w" sizes="auto, (max-width: 627px) 100vw, 627px" /><figcaption>Typical Stevenson Screen Construction</figcaption></figure>


<p>Such screens are expensive to buy and often impractical for home based weather stations. As such we decided to model and 3D print our own shield for the Weather Flow Air.</p>


<p>Modelled using Fusion 360 it is designed to be made on a standard 3D printer, apart from the screws required to fix it to a post. We used the Ultimaker 3.</p>


<figure class="wp-block-image"><img loading="lazy" decoding="async" width="1024" height="768" src="https://www.digitalurban.org/wp-content/uploads/2018/09/ShieldAssembeled_2018-Sep-21_11-53-01AM-000_CustomizedView3006009436-1.png" alt="" class="wp-image-3736" srcset="https://www.digitalurban.org/wp-content/uploads/2018/09/ShieldAssembeled_2018-Sep-21_11-53-01AM-000_CustomizedView3006009436-1.png 1024w, https://www.digitalurban.org/wp-content/uploads/2018/09/ShieldAssembeled_2018-Sep-21_11-53-01AM-000_CustomizedView3006009436-1-300x225.png 300w, https://www.digitalurban.org/wp-content/uploads/2018/09/ShieldAssembeled_2018-Sep-21_11-53-01AM-000_CustomizedView3006009436-1-768x576.png 768w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>Model Rendered Fusion 360</figcaption></figure>


<p>The model consists of 6 separately designed parts &#8211; top and bottom mounts, middle sections,  rods, nuts and spacing washers (again all printed) &#8211; and is designed to be easy to print and assemble. Everything slides into place without any need for gluing or fixing.</p>


<figure class="wp-block-image"><img loading="lazy" decoding="async" width="1233" height="925" src="https://www.digitalurban.org/wp-content/uploads/2018/09/IMG_0669-1.jpg" alt="" class="wp-image-3737" srcset="https://www.digitalurban.org/wp-content/uploads/2018/09/IMG_0669-1.jpg 1233w, https://www.digitalurban.org/wp-content/uploads/2018/09/IMG_0669-1-300x225.jpg 300w, https://www.digitalurban.org/wp-content/uploads/2018/09/IMG_0669-1-1024x768.jpg 1024w, https://www.digitalurban.org/wp-content/uploads/2018/09/IMG_0669-1-768x576.jpg 768w" sizes="auto, (max-width: 1233px) 100vw, 1233px" /><figcaption>Assembling the Shield</figcaption></figure>


<p>Each part was sanded (1000 and 400 grit), primed and sprayed with gloss white paint &#8211; although this is not an essential, it can simply be 3d printed. The Weather Flow air sits inside and the parts act as a shield against radiation and the sun.</p>


<figure class="wp-block-image"><img loading="lazy" decoding="async" width="1920" height="2560" src="https://www.digitalurban.org/wp-content/uploads/2018/09/IMG_0680-1-1.jpg" alt="" class="wp-image-3740" srcset="https://www.digitalurban.org/wp-content/uploads/2018/09/IMG_0680-1-1.jpg 1920w, https://www.digitalurban.org/wp-content/uploads/2018/09/IMG_0680-1-1-225x300.jpg 225w, https://www.digitalurban.org/wp-content/uploads/2018/09/IMG_0680-1-1-768x1024.jpg 768w, https://www.digitalurban.org/wp-content/uploads/2018/09/IMG_0680-1-1-1152x1536.jpg 1152w, https://www.digitalurban.org/wp-content/uploads/2018/09/IMG_0680-1-1-1536x2048.jpg 1536w" sizes="auto, (max-width: 1920px) 100vw, 1920px" /></figure>


<p>All the parts are <a href="https://www.thingiverse.com/thing:3112720">available on Thingiverse</a>, Weather Flow makes its data available via UDP, opening up opportunities to link to systems such as Node Red or any number of data displays/home hub devices. We will have more of that in future posts.</p>


<figure class="wp-block-image"><img loading="lazy" decoding="async" width="1514" height="778" src="https://www.digitalurban.org/wp-content/uploads/2018/09/Capture1-1.png" alt="" class="wp-image-3753" srcset="https://www.digitalurban.org/wp-content/uploads/2018/09/Capture1-1.png 1514w, https://www.digitalurban.org/wp-content/uploads/2018/09/Capture1-1-300x154.png 300w, https://www.digitalurban.org/wp-content/uploads/2018/09/Capture1-1-1024x526.png 1024w, https://www.digitalurban.org/wp-content/uploads/2018/09/Capture1-1-768x395.png 768w" sizes="auto, (max-width: 1514px) 100vw, 1514px" /><figcaption>Bottom up view from Fusion 360</figcaption></figure>


<p>Btw &#8211; Digital Urban is back, its been a long time since the last post &#8211; with a focus on connected environments, sensors and sensor validation, data visualisation and 3D systems its good to be back online &#8211;  after a long stint as Head of Department (and various other things) at the Centre for Advanced Spatial Analysis, University College London.</p>


<p> </p>
<p>The post <a href="https://www.digitalurban.org/blog/2018/09/21/3d-printing-a-radiation-shield-for-the-weather-flow-air/">3D Printing a Radiation Shield for the Weather Flow Air</a> appeared first on <a href="https://www.digitalurban.org">Digital Urban</a>.</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Streaming Urban Data &#8211; YouTube Live</title>
		<link>https://www.digitalurban.org/blog/2016/01/12/streaming-urban-data-youtube-live-2/</link>
					<comments>https://www.digitalurban.org/blog/2016/01/12/streaming-urban-data-youtube-live-2/#comments</comments>
		
		<dc:creator><![CDATA[Andy]]></dc:creator>
		<pubDate>Tue, 12 Jan 2016 11:20:02 +0000</pubDate>
				<category><![CDATA[Posts]]></category>
		<category><![CDATA[london data]]></category>
		<category><![CDATA[london live stream]]></category>
		<category><![CDATA[london live weather]]></category>
		<category><![CDATA[youtube live]]></category>
		<guid isPermaLink="false">http://www.digitalurban.org/?p=3697</guid>

					<description><![CDATA[<p>The increasingly availability of bandwidth along with advances in computer hardware and Internet services is making it possible to stream HD content, live from multiple places. Traditionally the first port...</p>
<p>The post <a href="https://www.digitalurban.org/blog/2016/01/12/streaming-urban-data-youtube-live-2/">Streaming Urban Data &#8211; YouTube Live</a> appeared first on <a href="https://www.digitalurban.org">Digital Urban</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p>The increasingly availability of bandwidth along with advances in computer hardware and Internet services is making it possible to stream HD content, live from multiple places. Traditionally the first port of contact for urban data is a web page and with that comes various issues of compatibility and the ability to communicate live urban data within a singe interface. The CASA city dashboard (<a href="http://www.citydashboard.org">citydashboard.org</a>) was developed over 4 years ago and represented the current state of play in live data.<br />
<div id="attachment_2577" style="width: 543px" class="wp-caption alignnone"><a href="http://www.citydashboard.org"><img loading="lazy" decoding="async" aria-describedby="caption-attachment-2577" class="wp-image-2577" src="https://www.digitalurban.org/wp-content/uploads/2012/04/Citydb-e1452597841783-1.png" alt="Citydashboard.org" width="533" height="292" srcset="https://www.digitalurban.org/wp-content/uploads/2012/04/Citydb-e1452597841783-1.png 633w, https://www.digitalurban.org/wp-content/uploads/2012/04/Citydb-e1452597841783-1-300x164.png 300w" sizes="auto, (max-width: 533px) 100vw, 533px" /></a><p id="caption-attachment-2577" class="wp-caption-text">Citydashboard</p></div><br />
Yet city data should perhaps be a true &#8216;window on the world&#8217; and with this comes the need for a streaming video with the potential to overlay data. As ever on digital urban we use our live weather feed for prototyping systems, as its a data set that is easy to hand and also provides a range of display options.<br />
<div id="attachment_3699" style="width: 580px" class="wp-caption alignnone"><a href="http://weather.casa.ucl.ac.uk"><img loading="lazy" decoding="async" aria-describedby="caption-attachment-3699" class="wp-image-3699" src="https://www.digitalurban.org/wp-content/uploads/2016/01/Screen-Shot-2016-01-12-at-10.53.10-1-1024x613.png" alt="Weather Dashboard" width="570" height="341" srcset="https://www.digitalurban.org/wp-content/uploads/2016/01/Screen-Shot-2016-01-12-at-10.53.10-1-1024x613.png 1024w, https://www.digitalurban.org/wp-content/uploads/2016/01/Screen-Shot-2016-01-12-at-10.53.10-1-300x179.png 300w, https://www.digitalurban.org/wp-content/uploads/2016/01/Screen-Shot-2016-01-12-at-10.53.10-1-768x459.png 768w, https://www.digitalurban.org/wp-content/uploads/2016/01/Screen-Shot-2016-01-12-at-10.53.10-1-1536x919.png 1536w, https://www.digitalurban.org/wp-content/uploads/2016/01/Screen-Shot-2016-01-12-at-10.53.10-1.png 1996w" sizes="auto, (max-width: 570px) 100vw, 570px" /></a><p id="caption-attachment-3699" class="wp-caption-text">Weather Data Dashboard</p></div><br />
Our weather dashboard provides data updates every 2 seconds from our Davis Pro station on the roof off Tottenham Court Road, London. It includes live graphs and gauges (via highcharts) as well an historical view of data, yet the traditional webcam view of the actual physical view of the data has always been lacking. Streaming HD video content onto the web, 24 hours a day and in a format accessible across multiple platforms has until now been problematic. This is where YouTube Live comes in, currently in beta, the system allows a simple feed from a webcam (in our case a Logitech 930e) to be streamed live, along with additional overlays to provide realtime condition updates. It is not a case of simply pointing you camera to YouTube however, the encoding needs be carried out on the host machine and then streamed to YouTube for distribution. There are a number of options (see <a href="https://support.google.com/youtube/answer/2907883?hl=en-GB" target="_blank" rel="noopener">YouTube Encoding</a>), having tried them all out we settled on Xsplit as the best current system:<br />
<div id="attachment_3700" style="width: 580px" class="wp-caption alignnone"><img loading="lazy" decoding="async" aria-describedby="caption-attachment-3700" class="wp-image-3700" src="https://www.digitalurban.org/wp-content/uploads/2016/01/Screen-Shot-2016-01-12-at-08.31.10-1-1024x726.png" alt="Encoding and Overlaying Data" width="570" height="404" /><p id="caption-attachment-3700" class="wp-caption-text">Encoding and Overlaying Data</p></div><br />
Our stream runs at 720p, 30fps with an HTML overlay taken directly from the main weather landing page. This allows the current conditions to be viewed in realtime, the move to 30fps and HD makes a notable difference &#8211; it creates a window into the world, updating in realtime and providing a smooth, natural view of the city, you can view the stream direct below:<br />
<iframe loading="lazy" src="https://www.youtube.com/embed/Ubf5HDhbGTA" width="620" height="380" frameborder="0" allowfullscreen="allowfullscreen"></iframe><br />
The stream is aimed at viewing fullscreen &#8211; 720p has its limitations but is a current balance. The system accepts a 1080p feed but the encoding machine takes a notable hit on processing power. With a 24/7 feed we opted for the balance of a smooth stream and medium demands on machine capacity. Bandwidth is of course all important, the feed is coming direct from a home based fibre option feed, offering 500mb uploads over wifi and unlimited data. It is this option that is opening up the ability to create data windows on the world and perhaps a true view of the city in realtime.</p>
<p>The post <a href="https://www.digitalurban.org/blog/2016/01/12/streaming-urban-data-youtube-live-2/">Streaming Urban Data &#8211; YouTube Live</a> appeared first on <a href="https://www.digitalurban.org">Digital Urban</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.digitalurban.org/blog/2016/01/12/streaming-urban-data-youtube-live-2/feed/</wfw:commentRss>
			<slash:comments>1</slash:comments>
		
		
			</item>
		<item>
		<title>Introducing the MSc and MRes Smart Cities at the Bartlett Centre for Advanced Spatial Analysis</title>
		<link>https://www.digitalurban.org/blog/2014/02/05/introducing-the-msc-and-mres-smart-cities-at-the-bartlett-centre-for-advanced-spatial-analysis/</link>
		
		<dc:creator><![CDATA[Andy]]></dc:creator>
		<pubDate>Wed, 05 Feb 2014 12:11:08 +0000</pubDate>
				<category><![CDATA[Posts]]></category>
		<category><![CDATA[Courses]]></category>
		<category><![CDATA[Future Cities]]></category>
		<category><![CDATA[MSc]]></category>
		<category><![CDATA[Smart Cities]]></category>
		<category><![CDATA[The Bartlett MSc]]></category>
		<category><![CDATA[The Bartlett Post Grad]]></category>
		<category><![CDATA[UCL MSc]]></category>
		<guid isPermaLink="false">http://www.digitalurban.org/?p=3595</guid>

					<description><![CDATA[<p>Learn the New Science of Cities at University College London with the MSc in Smart Cities at The Bartlett&#8217;s Centre for Advanced Spatial Analysis from September 2014. APPLY NOW FOR...</p>
<p>The post <a href="https://www.digitalurban.org/blog/2014/02/05/introducing-the-msc-and-mres-smart-cities-at-the-bartlett-centre-for-advanced-spatial-analysis/">Introducing the MSc and MRes Smart Cities at the Bartlett Centre for Advanced Spatial Analysis</a> appeared first on <a href="https://www.digitalurban.org">Digital Urban</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p><strong>Learn the New Science of Cities at University College London with the MSc in Smart Cities at The Bartlett&#8217;s Centre for Advanced Spatial Analysis from September 2014.</strong><br />
<strong></strong><strong>APPLY NOW FOR SEPTEMBER ENTRY </strong></p>
<div>
<a href="http://mscsmartcities.org/"><img loading="lazy" decoding="async" class="alignright" title="MSc Smart Cities" alt="MSc Smart Cities" src="https://www.digitalurban.org/wp-content/uploads/2014/02/Screen-Shot-2014-02-05-at-09.51.51-1-300x297.png" width="210" height="208" /></a><br />
As Course Director, i am pleased to announce the new MSc and MRes in Smart Cities, here at the The Bartlett Centre for Advanced Spatial Analysis. Both the MSc and MRes offer an innovative and exciting opportunity to study at UCL &#8211; with key training for a new career in the emerging Smart Cities market. Smart cities are focused on how computers, data, and analytics which consist of models and predictions, are being embedded into cities. Cities  currently are being extensively wired, thus generating new kinds of control and new kinds of services, which are producing massive data streams – ‘big data’.  To this end, we need powerful analytics to make sense of this new world with a new skill set to understanding and lead this new field.<br />
<strong>CASA</strong><br />
The <a href="http://www.casa.ucl.ac.uk">Bartlett Centre for Advanced Spatial Analysis</a> (CASA) is one of the leading forces in the science of cities, generating new knowledge and insights for use in city planning, policy and design and drawing on the latest geospatial methods and ideas in computer-based visualisation and modelling.<br />
CASA’s focus is to be at the forefront of what is one of the grand challenges of 21st Century science: to build a science of cities from a multidisciplinary base, drawing on cutting edge methods, and ideas in modeling, complexity, visualisation and computation. Our current mix of architects, geographers, mathematicians, physicists, urban planners and computer scientists make CASA a unique department within UCL.<br />
Our vision is to be central to this new science, the science of smart cities, and relate it to city planning, policy and architecture in its widest sense.<br />
<div style="width: 650px" class="wp-caption aligncenter"><img loading="lazy" decoding="async" title="London - A Living Lab" alt="London - A Living Lab" src="https://www.digitalurban.org/wp-content/uploads/2014/02/London-1.jpg" width="640" height="303" /><p class="wp-caption-text">London &#8211; A Living Lab</p></div><br />
<strong>EDUCATIONAL AIMS OF THE PROGRAMME</strong><br />
The MSc Smart Cities and Urban Analytics comprises 180 credits which can be taken full-time over 12 months or on a flexible modular basis of up to 5 years duration (full details of the <a href="http://mscsmartcities.org/mres-smart-cities/">MRes structure can be found here</a>.  If taken full time over one year, the following structure is followed:<br />
<strong>TERM ONE</strong><br />
<strong>Smart Systems Theory<br />
</strong>The module provides a comprehensive introduction to a theory and science of cities. Many different perspectives developed by urban researchers, systems theorists, complexity theorists, urban planners, geographers and transport engineers will be considered, such as spatial interactions and transport models, urban economic theories, scaling laws and the central place theory for systems of cities, growth, migration, etc., to name a few. The course will also focus on physical planning and urban policy analysis as has been developed in western countries during the last 100 years.<br />
<strong>The class runs during term one, for two hours per week</strong><br />
<strong>Assessment is by coursework (2,500 – 3,000 words)</strong><br />
<strong>Quantitative Methods<br />
</strong>This module will empower you with essential mathematical techniques to be able to describe quantitatively many aspects of a city. You will learn various methodologies, from traditional statistical techniques, to more novel approaches, such as complex networks. These techniques will focus on different scales and hierarchies, from the micro-level, e.g. individual interactions, to the macro-level, e.g. regional properties, taking into account both discrete and continuous variables, and using probabilistic and deterministic approaches. All these tools will be developed within the context of real world applications.</p>
<div>
<article id="post-93"><strong>The class runs during term one, for two hours per week</strong></article>
<article><strong>Assessment is by a mix of presentations and coursework</strong></article>
<article></article>
<article></article>
<article></article>
<article><strong></strong><strong>Geographic Information Systems and Science</strong></article>
<div>GI Systems and Science aims to equip students with an understanding of the principles underlying the conception, representation/measurement and analysis of spatial phenomena. It presents an overview of the core organising concepts and techniques of Geographic Information Systems, and the software and analysis systems that are integral to their effective deployment in advanced spatial analysis.The practical sessions in the course will introduce students to both traditional and emerging technologies in geographical information science through the use of desktop GIS software like Arc GIS and Quantum GIS, and the powerful statistical software environment, R. In developing technical expertise in these software tools, students will be introduced to real-world geographical analysis problems and, by the end of the course, will be able to identify, evaluate and process geographic data from a variety of different sources, analyse these data and present the results of the analysis using different cartographic techniques.</div>
</div>
<p><strong>The class runs during term one, for three hours per week (one hour lecture followed by two a hour practical)</strong><br />
<strong></strong><strong>Assessment is by coursework (2,500 – 3,000 words) and via an exam</strong>
</div>
<div role="complementary"><strong>There is also an optional module selected from any other relevant 15 credit M-level module from UCL</strong></div>
<div role="complementary"></div>
<div role="complementary">
<div style="width: 650px" class="wp-caption aligncenter"><img loading="lazy" decoding="async" title="Urban Data and Simulation" alt="Urban Data and Simulation" src="https://www.digitalurban.org/wp-content/uploads/2014/02/citydata-1.jpg" width="640" height="343" /><p class="wp-caption-text">Urban Data and Simulation</p></div>
</div>
<div role="complementary"></div>
<div role="complementary"></div>
<div role="complementary"><strong>TERM TWO</strong></div>
<div role="complementary"></div>
<div role="complementary"><strong>Smart Cities: Context, Policy and Governance</strong></div>
<div role="complementary">This module provides  a perspective of smart cities from the viewpoint of technology. It will provide a context for the development of smart cities through a history of computing, networks and communications, of applications of smart technologies, ranging from science parks and technopoles to transport based on ICT. The course will cover a wide range of approaches, from concepts of The Universal Machine, to Wired Cities and sensing techniques, spatio-temporal real time data applications, smart energy, virtual reality and social media in the smart city, to name a few.</div>
<div role="complementary">
<strong>This class runs during term two, for one and a half hours per week</strong><br />
<strong>Assessment is by coursework (2,500 – 3,000 words)</strong><br />
<strong>Spatial Data Theory, Storage and Analysis</strong>
</div>
<p>This module introduces you to the tools needed to manipulate large datasets derived from Smart Cities data, from sensing, through storage and approaches to analysis. You will be able to capture and build data structures, perform SQL and basic queries in order to extract key metrics. In addition, you will learn how to use external software tools, such as R, Python, etc., in order to visualise and analyse the data. These database statistic tools will be complemented by artificial intelligence and pattern detection techniques, in addition to new technologies for big data.<br />
<strong>The class runs during term two, for two hours per week</strong><br />
<strong>Assessment is by project output (5,000 – 6,000 words)</strong><br />
<strong>Urban Simulation<br />
</strong>The module provides the key skills required  to construct and apply models in order to simulate urban systems. These are key in the development of smart cities technologies. You will learn different approaches, such as land-use transport interaction models, cellular automata, agent-based modelling, etc., and realise how these are fashioned into tools that are applicable in planning support systems, and how they are linked to big data and integrated data systems.  These models will be considered at different time scales, such as short-term modelling, e.g. diurnal patterns in cities, and long term models for exploring change through strategic planning.<br />
<strong>The module runs during term two, for two hours per week</strong><br />
<strong>Assessment is by coursework (2,500 – 3,000 words)</strong><br />
<div style="width: 650px" class="wp-caption aligncenter"><a href="http://www.digitalurban.org/wp-admin/The Hidden Data City"><img loading="lazy" decoding="async" title="The Hidden Data City" alt="The Hidden Data City" src="https://www.digitalurban.org/wp-content/uploads/2014/02/dataviz-1.jpg" width="640" height="281" /></a><p class="wp-caption-text">The Hidden Data City</p></div><br />
<strong>TERM THREE</strong><br />
<strong>Dissertation<br />
</strong>This dissertation marks the culmination of your studies and gives you the opportunity to produce an original piece of research making use of the knowledge gathered in the lectures. You will be guided throughout this challenge by your supervisor and with the support of the Course Director, and together you will decide the subject of research. This enterprise will enable you to create a unique, individual piece of work with an emphasis on data collection; analysis and visualisation linked to policy and social science oriented applications.<br />
<strong>Assessment is by 10,000-12,000 words dissertation.</strong><br />
<strong>STAFF<br />
</strong>The teaching staff are worlds leaders in the field from Professor Mike Batty MBE, through to Sir Alan Wilson &#8211; you can found out full details and staff profiles at our sub-site <a href="http://mscsmartcities.org/">http://mscsmartcities.org/</a><br />
<strong>ENTRY REQUIREMENTS<br />
</strong>Ideally, you will already have a Bachelor’s degree in an appropriate subject such as Geography, GIS, Urban Planning, Architecture, Computer Science, Civil Engineering, Economics or a field related to the Built Environment though other subjects will be considered especially if you can demonstrate a keen interest in your personal statement to convince us you should be given a place. You’ll need to have obtained a 2.2 (or international equivalent) to join the MSc.<br />
If you do not have a Bachelor’s degree, we can still consider you if you have a professional qualification and at least three years relevant experience, so don’t be put off applying if you fall into this category because the greater the mix of students we have on each course, the more interesting seminars and discussions are going to be.<br />
<strong>HOW TO APPLY</strong><br />
<strong></strong>You can <a href="http://www.ucl.ac.uk/adminsys/search/?lTitle=smart&amp;lDepartment=CASAN_BEN&amp;lProgrammeGroupID=Postgraduate+Taught&amp;lStudyTypeID=&amp;lStartYearID=&amp;search=Search+Now&amp;action=search">apply for this course online</a> or find out more at <a href="http://www.mscsmartcities.org">http://www.mscsmartcities.org</a>  &#8211;  If you have any questions, you can contact our Teaching and Learning Administrator, <a href="mailto:lisa.cooper@ucl.ac.uk">Lisa Cooper</a>. The <a href="http://mscsmartcities.org/wp-content/uploads/2013/11/CASASmartCitiesOptimised.pdf">course brochure can be download</a> in pdf format (5Mb).</p>
<p>The post <a href="https://www.digitalurban.org/blog/2014/02/05/introducing-the-msc-and-mres-smart-cities-at-the-bartlett-centre-for-advanced-spatial-analysis/">Introducing the MSc and MRes Smart Cities at the Bartlett Centre for Advanced Spatial Analysis</a> appeared first on <a href="https://www.digitalurban.org">Digital Urban</a>.</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Happy Christmas and a Happy New Year (Movie)</title>
		<link>https://www.digitalurban.org/blog/2013/12/19/happy-christmas-and-a-happy-new-year-movie/</link>
		
		<dc:creator><![CDATA[Andy]]></dc:creator>
		<pubDate>Thu, 19 Dec 2013 10:30:36 +0000</pubDate>
				<category><![CDATA[Posts]]></category>
		<category><![CDATA[CASA]]></category>
		<category><![CDATA[The Bartlett Centre for Advanced Spatial Analysis]]></category>
		<category><![CDATA[UCL Quad]]></category>
		<guid isPermaLink="false">http://www.digitalurban.org/?p=3543</guid>

					<description><![CDATA[<p>2013 has been quite a year for research  &#8211; the Smart/Future Cities discussion has moved forward with a notable pace, new setups such as the Future Cities Catapult  and the...</p>
<p>The post <a href="https://www.digitalurban.org/blog/2013/12/19/happy-christmas-and-a-happy-new-year-movie/">Happy Christmas and a Happy New Year (Movie)</a> appeared first on <a href="https://www.digitalurban.org">Digital Urban</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p>2013 has been quite a year for research  &#8211; the Smart/Future Cities discussion has moved forward with a notable pace, new setups such as the <a href="https://futurecities.catapult.org.uk/">Future Cities Catapult</a>  and the <a href="http://www.london.gov.uk/priorities/business-economy/vision-and-strategy/smart-london?source=vanityurl">Smart London Report</a> from the GLA are starting to drive the uptake. It has been a year of research around cities with multiple new grants, awards and PhD funding at <a href="http://www.casa.ucl.ac.uk">The Bartlett Centre for Advanced Spatial Analysis</a> (home of digitalurban).<br />
<div id="attachment_3544" style="width: 689px" class="wp-caption aligncenter"><img loading="lazy" decoding="async" aria-describedby="caption-attachment-3544" class=" wp-image-3544 " alt="UCL Quad in the Snow London 2050" src="https://www.digitalurban.org/wp-content/uploads/2013/12/QuadSnow-1-1024x576.jpg" width="679" height="382" srcset="https://www.digitalurban.org/wp-content/uploads/2013/12/QuadSnow-1-1024x576.jpg 1024w, https://www.digitalurban.org/wp-content/uploads/2013/12/QuadSnow-1-300x169.jpg 300w, https://www.digitalurban.org/wp-content/uploads/2013/12/QuadSnow-1-768x432.jpg 768w, https://www.digitalurban.org/wp-content/uploads/2013/12/QuadSnow-1.jpg 1280w" sizes="auto, (max-width: 679px) 100vw, 679px" /><p id="caption-attachment-3544" class="wp-caption-text">UCL Quad in the Snow London 2050</p></div><br />
Of note in the literature is Mike Batty&#8217;s new book on <a href="http://www.amazon.co.uk/The-Science-Cities-Michael-Batty/dp/0262019523">The Science of Cities</a> along with new papers in the <a href="http://www.bartlett.ucl.ac.uk/casa/latest/publications">CASA Working Paper Series</a> &#8211; now up to number 194 and all available to download. We have launched a new <a href="http://mscsmartcities.org/">MSc in Smart Cities and Urban Analytics </a>as well as an <a href="http://mscsmartcities.org/">MRes in Smart Cities</a> to run along side the current <a href="http://www.bartlett.ucl.ac.uk/casa/programmes/postgraduate/mres-advanced-spatial-analysis-visualisation">MRes in Advanced Spatial Analysis and Visualisation</a>, opening up a number of new routes to gain a Masters Degree at CASA. As a note to the season, our Christmas Movie is below:<br />
<center><iframe loading="lazy" src="//www.youtube.com/embed/OSMotRy8D6c?list=UUJ1tszHG3t_xumcz5kPdiVg" height="360" width="640" allowfullscreen="" frameborder="0"></iframe><center></center></center>2014 brings with it teaching of the Occulus Rift Virtual Reality Headset on our Masters courses, new research into the emotions of cities and a continuation of everything cities at CASA &#8211; from all <a href="https://twitter.com/CASAUCL">@CASA</a> and <a href="https://twitter.com/digitalurban">@digitalurban</a> have a wonderful Christmas and a Happy New Year&#8230;.<br />
&nbsp;</p>
<p>The post <a href="https://www.digitalurban.org/blog/2013/12/19/happy-christmas-and-a-happy-new-year-movie/">Happy Christmas and a Happy New Year (Movie)</a> appeared first on <a href="https://www.digitalurban.org">Digital Urban</a>.</p>
]]></content:encoded>
					
		
		
			</item>
	</channel>
</rss>
