Course evaluation

Our program, Creative Media & Game Technologies, teaches new courses each quarter. A period is typically ten weeks long. Those courses get evaluated in the last week before the course ends and typically ask students about their experience of the course. How well were they prepared, and how would they grade the course? They also have the option to answer some open questions to leave their remarks.

As a teacher, I always found the “open question” remarks the most valuable. They are interesting to read and give a good insight into the student experience. The most helpful comments are from highly critical students who also think along and come up with suggestions for improvement.

One evaluation per period seemed to me like a missed opportunity. I wanted to evaluate more often to make quicker iterations, even during a course, next to the default course evaluation. To prevent evaluation fatigue, I kept the evaluations plain and straightforward.

Student evaluation of teaching lab classes (version 1)

Since open questions gave me the most valuable input, I started with three questions. I took inspiration from the Retrospective method used in Eduscrum.

• What went well?
• What could be improved?
• What must be improved?

At the end of each class, I handed out some post-its and asked them to answer these questions. The questions were summarized by using a simple emoji and the terms: Good, Improve, and Annoying.

Students could paste their post-its with their remarks under those three “categories.” I didn’t explicitly ask students to evaluate my teaching. The goal was to assess the whole class experience.

The categories help to set priorities. At first, I hesitated to include the “Good” category because I was mainly interested in what didn’t work. However, the “Good” category helped me become aware of what works and what students actually appreciate.

After class, I would group the post-its with similar feedback with the affinity map method.

Student evaluation of teaching lectures (during the pandemic).

During the pandemic, we had to switch to online lectures. Which, in general, meant that I was doing my class in front of a screen without no way to check how the students received the information. Of course, I built in interaction moments with polls and audio chat, but it was mainly one-way communication.

I found it important to give students a way to leave their feedback on a lecture and evaluate my teaching. With the help of their feedback, I was also better able to iterate and adapt my lessons to a new way of teaching.

Through the slide above, I asked them to evaluate my teaching. I shared the link in the online chat environment. In the form, they could answer the three open questions shown above.

About 40% of the students used the form and left their feedback.

Retrospective

Students gave valuable feedback to improve teaching. However, some things are challenging to improve directly in the course. Other things might be out of my direct control.

Students also have different opinions. Some like the lecture pacing, while others mention that the pacing could be better. I wanted to share these insights with students and elaborate on my choices. An essential part of teaching is setting the right expectations. Doing a retrospective gave me the ability to make students part of course development and clarify the choices I’ve made.

For each lecture, I do a quick recapture of the previous class. After that, I would show a slide with (a summary) of the student’s feedback. During this retrospective, I take a short moment to talk about the input.

Students valued the retrospective (which came back several times in the following “what did you like?” evaluation). And it helps to elaborate on choices like lecture pacing and length.

Student evaluation of teaching lab classes (version 2)

The questions “What could be better?” and “What was annoying to you?” determine the feedback’s priority. The feedback that students mark as highly annoying has a higher priority. After several evaluations, I figured I could remove the “annoying” question. Removing this question makes the evaluation faster and simpler for the students and me.

• Most students weren’t filling in the annoying question at all.
• Different students have different priorities. So what one student would put under “better” would be “annoying” for the other students.
• The priority between “better” and “annoying” gave a bit more information, but I couldn’t act differently on this. In reality, I valued “better” responses as much as “annoying.”
• Simpler is better. Why cause more cognitive strain if it’s not needed?
• I found the annoying question and emoji to be too negative.

I eliminated the “annoying” question and changed the “subtitle” of the “What could be better?” question to “Ideas for improvement.” This invites students to not only mention what could be better but also come up with ideas to improve it.

This change to two categories also made the retrospective more straightforward.

For practical reasons, I still teach lectures online. The practical classes are at our location again. I decided to keep the class evaluation digital and not move back to post-its.

• Everyone is now used to scanning a QR Code with their smartphone.
• Using a digital form for evaluation makes I can use the results in the retrospective slides easier.
• Archiving the feedback is more manageable (no need to take photos and digitalize them myself).

Tops & Tips

The current evaluation method is similar to another feedback method called “Tops & Tips.”

• Tops are the points that you did well.
• Tips are the recommendations for where you can improve.

While I don’t get insecure by straightly negative feedback, this is not the case for everyone. I am very critical (a remark I heard from students and colleagues), and sometimes I forget to mention the good things. This evaluation and feedback methodology nudges you to say positive things too.

I like this focus on positive feedback because it allows you to double down on the things that are going fine instead of solely focusing on things that need improvement.

Next step

Everyone who has to teach, lecture, or present can benefit from this evaluation methodology. That’s why I’m creating a simple tool to speed up the evaluation and feedback process.

Please subscribe to my newsletter if you are interested in this journey. I only send out a newsletter when I have some serious updates.

The post Student evaluation of teaching appeared first on Kasper Kamperman.

If you run into these errors, the chance is big that you forgot to import a Library in your Arduino IDE.

Unfortunately, Arduino doesn’t give hints that can help beginners (Processing, a creative software tool, does a better job in this).

You get this “No such file or directory” error when you don’t install a library. The default functionality in Arduino can be extended by libraries. In this case, a library that includes all the functionality to connect to the Arduino IoT Cloud service.

How do you figure out which library is missing when you get the “no such file or directory” error?

My tip is to search for the plain file. So, in this situation, “ArduinoIoTCloud.h”. Most Arduino code is open-source and published on GitHub. Lucky for us, code shared on Github is well-indexed by engines like Google and DuckDuckGo.

This will lead you to ArduinoIoTCloud/src/ArduinoIoTCloud.h

How do you install an Arduino library?

You can download the code from Github and copy it to your library directory.

An easier way is to add the library in the Library Manager.

Go to Sketch > Include Library > Manage Libraries …
Type in the name “ArduinoIoTCloud”, select it in the list and press Install.

Press Install and make sure you install the library, including all of its dependencies (other libraries that this library uses).

I hope I could help you move forward. Have fun playing with Arduino and check some of my other articles in my Arduino category.

The post Arduino – How to fix error .h: No Such File or Directory appeared first on Kasper Kamperman.

We start with reverse engineering the Simon game. In the introduction video I show how we can reverse engineer the game (thanks to Simon Inn for his in-depth article on reverse engineering the electronic Simon Game) and break down a programming problem in different steps. Breaking apart a bigger problem in multiple smaller steps is one of the most important skills a developer should master.

This tutorial series is suited for beginning/intermediate programmers. In the list below you can read what you’ll learn in each video. The code for each programming in Processing video is available on Github.

Introduction (12 minutes)
Reverse Engineering the MB Simon Says game.

• Inspecting the original game.
• Breaking apart the functionality of the game in small development steps.

Illuminated buttons (33 minutes)
Creating four buttons that light up on a mouse-click.

• Drawing in Processing (fill, rect, width, height).
• Using the Processing Reference.
• Creating a button object (class, void).
• Displaying four buttons (for-loop, [] array).
• Illuminated buttons (lerpColor).
• Handle mouse clicks (if, && logical operator, else, mousePressed, mouseReleased, println).

Tone Generator (25 minutes)
Generate tones with the Processing Sound library and trigger the notes with the buttons.

• Using the Sound library.
• Creating a Simon Tone Generator object.
• Use the Square Wave Oscillator (SqrOsc, play, amp).
• Generate a unique tone for each button (freq).
• Program a timer that controls the note duration (millis).

Simon Speaks (21 minutes)
Let Simon say a sentence of random words.

• Light up the buttons based on the tone length.
• Play random notes (random, int() typecasting).
• Play random notes with a pause in between (millis).
• Let Simon generate a sentence.
• Let Simon play the sentence word by word (int, [] array).
• Deal with an ArrayOutOfBoundsException error.
• Join an array (sentence) and print it to the console (join(), printArray).

User talks, Simon checks (12 minutes)
The user “talks” and Simon checks if the user said the correct sentence. If not Simon generates a new sentence.

• Check if the button matches the current word in mousePressed (!= inequality relational operator).
• Advance in the sentence when the button matches the word in mouseReleased.
• Start over when the button doesn’t match the word in mouseReleased (boolean variable).
• Debugging. Reset the position in the sentence to the start.

Wrap up everything in one final game (30 minutes)
Create the turn based game (Simon, User, Simon, User, etc.) and the difficulty curve.

• Implement the difficulty curve.
• Each time you repeated the correct word, Simon makes the sentence one word longer.
• Give feedback to the users if they won or not.
• Debugging sentence length (println) and find I forgot to reset the sentence length.
• Make Simon talk faster with longer sentences.
• Create a dialog and show it on screen (text, textSize, textAlign).
• Game states introduction and ideas.

Check out the whole programming Simon Says in Processing playlist on YouTube. The whole series, with 6 videos, will take you about 135 minutes to watch.

Watch this playlist on YouTube

The post Programming in Processing for beginners appeared first on Kasper Kamperman.

A while ago, I visited a look-out spot on the Holterberg. “Berg” means mountain in Dutch. In a flat country like The Netherlands we even call our smallest hills proudly mountains. Nonetheless, while I was there, I wondered which cities I could actually see in the distance. Of course, I could open up Google Maps, but I thought it was nice to create a more straightforward solution. The idea came up to create a compass showing which cities are located in different directions and their distance. I developed a small prototype in two days. My goal was to play with some web technologies (Sensor API’s, SVG rendering) and create a technical prototype.

Technical prototype concept

The phone’s compass sensor returns a value between 0-360 degrees, depending on how your phone is positioned relative to the magnetic north. Based on the positioning of the phone, the “compass base” (the view on the screen) shows the cities name in the viewport.

The “compass base” is an SVG image. For each user location (latitude, longitude), the “compass base” is unique. Based on the location of the user and the city locations, we can calculate which city should be visible on each compass bearing. We position the city name on the SVG based on that initial bearing.

Based on the phone’s direction, we get the angle. The higher that angle value, the more we translate the canvas to the left. Giving the user the experience that the canvas scrolls to the right.

SVG Canvas concept

The first thing I developed for this technical prototype was the SVG canvas concept. Moving your phone in different directions should be a seamless and endless experience. Moving from 360° to 0° and onwards and the other way round should be possible without a hick-up. You see the “edge-cases” in the picture below, where the phone is around 0 and 360 degrees. As you can see, we need to add a copy of the canvas at both sides of the “main” canvas.

In SVG you can define an object by using <def></def> tags. With the <use> tag you can later re-use this object, multiple times throughout your SVG. So we only add elements once to our canvas, and they are display three times at different positions.

The group (g) with the compass_base id, is draw multiple times.

<svg id="compass" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 10800 600" width="10800">
  <defs>
    <g id="compass_base">
      <g id="compass_degrees"></g>
      <g id="compass_cardinaldirs"></g>
      <g id="compass_cities"></g>
    </g>
  </defs>  
  <use xlink:href="#compass_base" x="0" y="0" />
  <use xlink:href="#compass_base" x="3600" y="0" />
  <use xlink:href="#compass_base" x="7200" y="0" />
</svg>

Smooth motion

If the compass is at 0°, the SVG is positioned at an x of -3600px plus half of the innerWidth of the window. When the angle goes up, we translate the SVG gradually more to the left (until -7200 plus half innerWidth) so it appears that the canvas scrolls to the right.

function setCompassCenterPosition() {
    compassCenterPosition = -3600 + (0.5 * window.innerWidth);
}

At the moment we cross from 359° to 0°, we translate the SVG translates back to the 0 position (-3600 plus half innerWidth). This looks seamless to the user, because we have a canvas at both sides.

The compass output was bit jumpy, we could smooth that with an algorithm in JavaScript (read this article on how I smooth sensor values on an Arduino). We can use requestAnimationFrame to calculate the smoothed translate animation, but it’s better to let the browser handle this. With CSS3 transitions you can create smooth animations.

Using transitions works fine, until you cross the 0° degrees point. At that point we do translate the SVG from -7200px (+ innerWidth) to -3600px (+ innerWidth). Of course the user shouldn’t notice this big translation, so we can’t have the transition at that point.

I solve this by temporary setting the transition duration to 0 and then back to the original setting (by setting a wasDisableSmoothTransition flag). You still notice the zero degrees cross mark a bit, but it doesn’t disturb the UX. For a technical prototype is sophisticated enough.

Below the moveCompass function, which takes care of the translation of the SVG element. It accepts a value between 0-360 degrees.

function moveCompass(angle) {
    
    let position = compassCenterPosition - (angle * 10);
    let angleDelta = lastAngle-angle;

    if(wasDisabledSmoothTransition) {
        document.getElementById("compass").style.transitionDuration = "150ms";
    }

    if(Math.abs(angleDelta) > 180) {
        // crossed 0-360 line
        // temporary switch of CSS transitions
        document.getElementById("compass").style.transitionDuration = "0ms";
        wasDisabledSmoothTransition = true;
    }

    lastAngle = angle;

    document.getElementById("compass").style.transform = 'translateX('+position+'px)';
}

Adding elements to the SVG Canvas

For this technical prototype, I only added text to the SVG, but you could add anything. In the HTML code (first code block in this article), you can see I made different groups (<g>) with the IDs: compass_degrees, compass_cardinaldirs, compass_cities.

With the addText function I can add <text> elements to those specific groups. Since the width of the SVG is 3600px, I multiply the degrees *10 to calculate the x position.

function addText(text, degrees, distance, element) { 
    let x = degrees*10;
    let y = distance;
    let textEl = document.createElementNS(svgNS,"text");
    textEl.setAttribute("x",x);
    textEl.setAttribute("y",y);
    textEl.setAttributeNS(null,"alignment-baseline","hanging");
    textEl.setAttributeNS(null,"text-anchor","middle");
    let textNode = document.createTextNode(text);
    textEl.appendChild(textNode);

    element.appendChild(textEl);

    return textEl;
}

Elements will be added to the SVG in the render function.

function renderSVG(data) {

  // display compass angles
  const elCompassDegrees = document.getElementById("compass_degrees");
    
  for (i = 0; i < 24; ++i) {
    let degree = i*15;
    addText(degree,degree,0,elCompassDegrees);
  }

  //... to be continued below

Prototyping element collision detection

One challenge was left. There are multiple cities that lie on the same angle seen from your location. Although, I didn’t work on a specific algorithm to reflect distance, I figured that I needed to prevent overlapping text. The idea is that if there is already an element on that position, the next element (with the same or a nearby compass bearing) will be moved downwards.

Luckily there is a function, getBBox(), that gives us back the bounding-box of an SVG element. We use this to check if elements overlap. If an newly added element overlaps with previous element, we move this element down (higher y-position).

The hasCollision function checks if an element (the last added one), collides with all the other elements in that specific group (#compass_cities) in the SVG.

function hasCollision(element) {

  const boxA = element.getBBox();

  // get all the children (previously added elements)
  const children = document.getElementById("compass_cities").getElementsByTagName('*');

  // we walk through children array in reverse
  // if we have one collision we jump out and return true
  // to prevent collision with itself (last added element) we do length - 2
  for (i = children.length-2; i >= 0 ; i--) {
    let boxB = children[i].getBBox();

    if(intersectBox(boxA,boxB)) {
      return true;
    }
  }

  return false;
}

function intersectBox(a, b) {
    return (Math.abs((a.x + a.width/2) - (b.x + b.width/2)) * 2 < (a.width + b.width)) &&
           (Math.abs((a.y + a.height/2) - (b.y + b.height/2)) * 2 < (a.height + b.height));
}

In order to add the cities to the SVG canvas, we walk through our data (a json file with cities and their latitude longitude) and add the elements. When adding an element, we check if it collides with other elements and move the element down (higher y-position) if that’s the case.

To prevent a hanging browser, I made sure that the while-loop is not executed more than 100 times (preventEndlessLoop counter). This happend to me on iOS/MacOS while developing, I figured that getBBox on Safari returned the wrong values on a <tspan> element (that’s why I switched to <text> elements). So to be better safe than sorry I added this protection.

// continued renderSVG function

// walk through the data
// calculate bearing and distance based on currentLocation and city latitude/longitude
// store angle and distance in the data array.
data.forEach((item) => {
  let angle_dist = getBearingDistancePrepare(currentLocation, item.ll);
  item.a = angle_dist[0].toPrecision(6);
  item.d = Math.round(angle_dist[1]);
});

// sort data on angle
data.sort((a, b) => (a.a > b.a) ? 1 : -1);

const elCities = document.getElementById("compass_cities");

// walk through the data and add the citie names.
data.forEach((item) => {

  let startY = 60;
  const padding = 40;

  // Add the text to our compass_cities group. 
  let addedChildEl = addText(item.city,item.a, startY, elCities);

  let preventEndlessLoop = 0;

  // Check if this element collides. If so, change the y-position.
  while(preventEndlessLoop<100 && hasCollision(addedChildEl)) {
    startY = startY + padding;
    addedChildEl.setAttribute('y',startY);
    preventEndlessLoop++;
  }

});

Calculating the distance and bearing

In other to calculate the “as the crow flies” distance I used the algorithms shared by Chriss Veness (Movable Type). I combined two algorithms (distance and initial bearing), so slower cos/sin calculations can be re-used.

function toDegrees (radians) {
    return radians* (180 / Math.PI);
}

function toRadians (degrees) {
    return degrees * (Math.PI / 180);
}

// https://www.movable-type.co.uk/scripts/latlong.html
// initial bearing formula
function getBearingDistance(lonlatA, lonlatB) {
    
    const R = 6371e3; // earth radius in meters
    const latA = toRadians(lonlatA[1]);
    const latB = toRadians(lonlatB[1]);
    const lonDelta = toRadians(lonlatB[0] - lonlatA[0]);

    // prevent double sin/cos calculations
    const sinlatA = Math.sin(latA);
    const coslatA = Math.cos(latA);
    const sinlatB = Math.sin(latB);    
    const coslatB = Math.cos(latB);
    const coslonDelta = Math.cos(lonDelta);

    // distance
    const distance = Math.acos(sinlatA * sinlatB + coslatA * coslatB  * coslonDelta) * R;

    // initial bearing
    const y = Math.sin(lonDelta) * coslatB ;
    const x = coslatA * sinlatB - sinlatA * coslatB * coslonDelta;
    let bearing = toDegrees(Math.atan2(y, x));

    if(bearing<0) bearing += 360;
    
    return [bearing, distance/1000];
}

Reader the compass with web technologies

One of the biggest challenges provided to get a reliable compass reading on Android. Apple is not known for supporting API’s for the Web, but their compass implementation is simple and gives a reliable result. Getting the compass bearing is simple a question of calling compassDir = e.webkitCompassHeading; The only thing, is that you need to get user permission. Below the code, the startCompass function should be triggered by a user action (onClick).

function startCompass() {
	if (typeof DeviceOrientationEvent !== 'undefined' && 
    typeof DeviceOrientationEvent.requestPermission === 'function') {
      DeviceOrientationEvent.requestPermission()
        .then((response) => {
          if (response === "granted") {
            window.addEventListener("deviceorientation", handler, true);
          } else {
            alert("has to be allowed!");
          }
        })
        .catch((error) => { 
            console.error(error);
            alert("not supported")
        });
}
  
function handler(e) {
   if (e.webkitCompassHeading) {
        compassDir = e.webkitCompassHeading;   
   }
}

I expected that reading a compass would be a trivial and easy task on Chrome Android too. Most StackOverflow answers mention that for Android just the alpha can be read (returned by the deviceorientationabsolute event). However, I didn’t seem to get reliable results on my Android device with those values. The needle went everywhere (even after calibration movements). I couldn’t let the web compass behave like native compass apps on Android.

I spend some time checking demos and came across this awesome Marine compass demo by Rich Tibbett. This one seemed to give results that seemed to make sense (less then iOS) and the compass heading angle was similar to native apps (you have to refresh after loading, then it seems to work).

It uses his own Full-Tilt API library (most recent fork), which normalises the data. If you are interested, you should dive into Quarternions, Euler angles and more (I vaguely remember those terms from some Unity work I did). The library is not updated recently, but it seems to work ok.

Chriss Hewett made a demo which displays all the different API outputs. I also could dive into the AbsoluteOrientationSensor API, to see if that gives some better compass readings.

Continuation of this project

The prototype is not live and released. For several reasons, both in UX as technically, I’m not sure if I will continue with this project in this form.

First, I figured out that when testing it myself, I got a bit motion sick. I handed it over to some other people, and they had the same experience. Probably moving around and looking at a screen is not the most comfortable user experience. Maybe I have to come up with a different design approach to solve this.

Secondly, placing 240 world cities on the compass was a nice idea, but I think it’s pretty overwhelming in UX terms. Maybe I should stick with the Use Case I started with (cities around a point close by). Rendering should also be optimised. Currently rendering the SVG (with 240 cities) costs about 50-60 seconds on a low-end Android phone. This could be solved by moving calculations to another thread (WebWorkers) or optimising the bearing/distance calculations. I could also create a backend and do calculations server-side.

Thirdly, to use geo location and access device orientation (compass) the user needs to give permission. For a good user experience, some effort is required to create screens that explain why location and sensor data is used.

LastIy the biggest issue was the difficulty of getting reliable compass readings. All of the above doesn’t really makes sense, if I can’t get a correct compass bearing.

Final thoughts on the technical prototype

I thought the compass idea might be interesting to move around in new cities. In many (touristic) cities then have those way-finding signs that point to touristic attractions, maybe this idea could be an addition to that.

Another iteration could be for education. Let pupils select/enter a city name and guess the direction.

Feel free to contact me if you have any questions or if you are looking for solutions related to this article.

The post Technical Prototyping a Compass Web App appeared first on Kasper Kamperman.

I’m working on a store and business locator service. Instead of building a User Interface to add addresses to a database, I like to keep track of all the data in an Excel/Google Sheets spreadsheet. This article explains how I build a script to import CSV in MongoDB and keep it in sync with the same CSV file.

I use PHP because I’m most familiar with it. It’s a bit of a challenge with MongoDB because PHP is not that JSON-friendly. In PHP, you have to rewrite the JSON operations in object/array notation.

I picked PHP because I have the most experience with it, and it runs on any cheap shared web hosting service. The downside of PHP is that it’s not really JSON friendly (query notation for MongoDB), so you need to rewrite the MongoDB queries into object/array notation for PHP. I use the MongoDB PHP driver and a locally installed database (calling a remote Atlas instance felt too slow when developing). However, you can use the script with the free MongoDB Atlas instance too. This will save you the local installation step.

Resources to start:

• Installing MongoDB Community edition locally
• Instructions on installing and using the MongoDB PHP driver.
• Compass GUI

Why MongoDB?

I chose MongoDB as database for several reasons:

• Geo functionalities out-of-the-box.
• Free tools with a pleasant UI, like MongoDB Compass.
• Good documentation, tutorials, and a proven track record.
• Easy (and free) to set up cloud service: MongoDB Atlas.
• A document database seems a good fit for the project I’m working on.

The most common and universal spreadsheet export format is CSV (Comma Separated Values). Actually, there are plenty of ways to import a CSV in MongoDB. In MongoDB Compass, you create a new collection and drop a CSV file, and in the shell, you can run mongoimport.

Requirements

1. I like the spreadsheet as a single source of truth (SSOT) for the address data.
   • Remove a row in the CSV, should remove the document in MongoDB.
   • Remove a column in the CSV, should remove the key in each MongoDB document.
   • Empty a cell in the CSV should remove the key in MongoDB.
2. I also like to clean up CSV data:
   • Leave out empty fields (ignoreBlanks in mongoimport).
   • Merge longitude and latitude fields into a single field to be used as a 2d sphere index (for fast geo lookups).
3. Automate it later on with a daily cronjob or another trigger.

Importing CSV data in MongoDB with mongoimport works perfectly. However, deleting data from MongoDB when it’s removed from the CSV file needs more processing. So I decided to write my own code. This also allowed me to learn more about MongoDB.

Steps

• Read the CSV directly from Google sheets and loop through the rows.
• Check if specific fields (address and city) exist (they serve as a unique index).
• Check which fields are empty, remove them from the CSV object and unset them in MongoDB.
• Prepare update/upsert query.
• Run aggregation pipeline to check which rows are present in MongoDB and not in the CSV and prepare those for bulk delete.
• BulkWrite the update/delete queries of those rows from MongoDB.

Learnings

Set default collation when creating a new collection.

Adding addresses is a manual human operation, so mistakes (double spaces, forget acute symbols like é, capitals) can happen. We truly want to make sure addresses are unique and that the same address points to the same information. For example: “Dam 1 Amsterdam” is the same as “dam   1 amsterdam”. To make sure string comparison goes right, you can set collation in MongoDB:

Collation allows users to specify language-specific rules for string comparison, such as rules for lettercase and accent marks. (MongoDB collation documentation)

The best is to set a default collation; you don’t have to pass the collation parameters for each query. You can only do this during creation time.

Pick any locale, most languages have the same default collation parameters (like English(en) or Dutch (nl)).

Since I like to ignore case and other diacritics for lookup (like an acute accent, é), I picked "strength: 1" by default.  I also ignore whitespace and punctuation, “alternate” and “maxVariable".

Mongo Compass has a built-in shell. Create a database with “use,” After that, the collection, named “mycollection.”

use mydatabase

db.createCollection(
	"mycollection", 
	{ collation: 
		{ locale:"en",strength:1, alternate:"shifted", maxVariable:"punct"}
	}
)

You can also create a new database and collection in one step in MongoDB Compass. Use the settings above when you select “Custom Collation.”

Even with a collation set, I prefer to clean up the data as much as possible in PHP. I change all characters to lower-case and remove additional whitespaces to clean the data for displaying online later anyway (I will use text-transform: capitalize; CSS on address and city fields when displaying them).

$row['address'] = strtolower(preg_replace('/\s+/', '', $row['address']));
$row['city']    = strtolower(preg_replace('/\s+/', '', $row['city']));

Unique compound index

MongoDB has a default unique index field called _id. We don’t have that in our spreadsheet, which is the source of data. I needed to consider the fields unique that makes a row unique. In this address database case, that’s a combination of the address (street + house number) and city. There are cities with the same name, though, so we have to make sure that we add some indicators (like the province in the city name).

Luckily MongoDB supports unique compound indexes:

If you use the unique constraint on a compound index, then MongoDB will enforce uniqueness on the combination of the index key values. (MongoDb unique indexes documentation)

In the mongo shell, you can run the operation below. You can also create an index in the “indexes” tab in Compass.

db.mycollection.createIndex(
  { "address": 1, "city": 1 }, 
  { unique: true, name: "direction" } 
)

Empty fields

Updating or inserting based on CSV rows works perfect with:

$foreach ($csv as $doc) { 
  filter = [ 'address' => $doc['address'], 'city' => $doc['city'] ];
  $mongo_bulk_write->update( 
    $filter,
    ['$set' => $doc], 
    ['upsert' => true] 
  );
}

$driver->executeBulkWrite('mydatabase.mycollection', $mongo_bulk_write);

This doesn’t deal with empty fields, though. I don’t include empty cells in the CSV file in the document to save data. So if the “address2” column or cell doesn’t have data, I won’t include the “address2” key-value pair (since the field is empty anyway).

A problem arises when removing a cell value from the CSV. I explicitly have to unset those fields; otherwise, old keys are not removed in MongoDB when updating.

// remove empty columns from the row
$unset = [];

foreach ($row as $key => $val) {
  if(empty($val)) {
    unset($row[$key]);
    // MongoDB needs an associative array with empty values for unset
    $unset[$key] = 1;
  }
}

$mongo_bulk_write->update(
 	$filter, 
	[ '$set' => $doc, '$unset' => $unset ], 
    ['upsert' => true]
);

Remove a document in MongoDB when a row is removed from the CSV source.

Upserting (updating and inserting when an index is not found) works with the above setup. The challenge is to remove documents from the MongoDB collection when rows are removed from the CSV file.

The idea is to look up documents that are not present as rows anymore in the CSV but still are present in the MongoDB collection. We also have to deal with address and city as a compound index.

This is solved by adding city and address together in one field. In the for-loop city and address values are merged, with # as a separator to split it later again and stored in an array.

// in the for-loop we merge city and address with # as seperator
$csv_compound[] = $doc['city'].'#'.$doc['address'];

To check this array in MongoDB, I use an aggregation pipeline.
All credits go to this answer on StackOverflow.

First, a list ($group) is made using the $concat function so that we can compare the csv_compound array with the resulting mdb_compound array. The $setDifference function is used to check the difference between the two arrays. The pipeline returns an array with the self-created compound indexes that are still in MongoDB but not in the CSV anymore.

// in the for-loop we merge city and address with # as seperator
$group = ['$group' => [ '_id' => null, 'mdb_compound' => [ '$addToSet' => [ '$concat' => ['$city','#','$address'] ] ] ]];
$project = [ '$project' => [ 'difference_mdb-sheets' => [ '$setDifference' => [ '$mdb_compound', $csv_compound] ], '_id' => 0 ] ];
$pipeline = array($group, $project);
$cursor = $collection->aggregate($pipeline);

$remove_from_mdb = json_decode(MongoDB\BSON\toJSON(MongoDB\BSON\fromPHP($cursor->toArray())), true)[0]['difference_mdb-csv'];

This created list is used to run a delete operation, with bulkwrite.

foreach ($remove_from_mdb as $doc) {
	$doc = explode("#", $doc);
 	$filter = [ 'address' => $doc[1], 'city' => $doc[0] ];
    $mongo_bulk_write->delete($filter);
}

Publish the CSV in Google Sheets to import it in MongoDB

You don’t need an API to use Google Sheets as input. Just go to file > Publish to Web. Pick the CSV option and copy-paste the URL. By using that URL in PHP, we import the CSV in MongoDB.

I found that sometimes updates to the CSV (when saving) are a bit delayed. So you might have to wait a bit before running the PHP script. Of course, Sheets has plenty of opportunities for scripting, so you could even run the same progress I explained in PHP as an Apps script. However, I wanted to make a more general solution that I can utilize later with some web drag/drop interface

Show me the code

You can find the complete script on Github including the Mongo dependency.

The post Import CSV in MongoDB and keep it in sync. appeared first on Kasper Kamperman.

The most easy way to test those scripts and APIs them is by directly making a photo and sending image data to the API/script, instead of uploading files. I didn’t find a fast mobile first camera template for HTML5 as a starting point for my prototypes, so I developed one myself. The interface setup is mainly inspired by the standard Android and iOS Cameras.

The template doesn’t do anything with the image(canvas) data yet, I’ll leave that up to you.

Feel free to use it in your next Computer Vision or AI project.

Code was updated 17th of May 2020 (some fixes for iOS 13.4.1)

Check out the Demo

Get the code on Github

Requirements

WebRTC is only supported on secure connections. So you need to serve it from https (You can test and debug in Chrome from localhost although (this doesn’t work in Safari).

Because it utilises WebRTC you need a recent (mobile) OS and browser. It should work on Android, Firefox and iOS11 and Safari 11.

Functionalities

– Fullscreen mode
– Take Photo
– Flip Camera (environment / user)
– Supports both portrait and landscape mode

Used Libraries

• Fullscreen functionality: Screenfull.js
• Detect WebRTC support: DetectRTC.js
• WebRTC cross-browser: Adapter.js
• UI click sound: Howler.js

Used Assets

• Basic Click Wooden sound – GameAudio
• Material Design Icons (camera front, camera rear, photo camera, fullscreen, fullscreen exit)

Good WebRTC resources

• webrtc.github.io/samples/
• webrtc-experiment.com/
• html5rocks.com/en/tutorials/getusermedia/intro/
• developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia

Credits and a link to this page are always appreciated.

I’m always curious how people end up using my stuff, so feel free to contact me or send a tweet@kasperkamperman.

The post Mobile First Camera Template (HTML, CSS, JS and WebRTC) appeared first on Kasper Kamperman.

Actually the code is largely based on my Processing Azure Face API code, however instead of sending the image to Microsoft Azure, the image is uploaded to a web server and stored with PHP. Like the Azure example this code uses the Apache HTTP client library (from the Apache HTTPComponents project). It’s already included in the sketch folder, so you don’t have to download or install it separately. 

Get the code on Github

Web Server configuration

First make sure you have a host that supports PHP. 

Create a folder called “processing_upload” on the location you want (or modify the $targetDir variable in saveImage.php). Place saveImage.php in the same folder as you’ve placed the processing_upload folder (pay attention don’t place saveImage.php within processing_upload).

Don’t forget to set the file permissions of the folder to write (755).

Modify the Processing sketch

In the Processing sketch you have to point the

String baseUrl

  (in ImageUploader.pde) to the folder on your own server where you saved the saveImage.php file. 

Credits

• JPEG compression sketch by Jeff Thompson.
• Multipart uploader example by Eugen Paraschiv (Baeldung). 
• PHP saveImage file from W3Schools.
• Apache HTTPClient binary.

The post Save Image to Web with Processing and PHP appeared first on Kasper Kamperman.

Make sure you request the Azure Face API subscription key. On this page you can make a trial API key, which works from the West-US server. However you can also create an Azure Account and add the Face API over there (use the search function, because to interface is not really straight forward). That would give you the benefit of all the Azure servers and (I think) the free version is not limited to 30 days.  

Process

I’ve based my Processing sketch on this Quickstart example for Java. It uses the Apache HTTP client library (from the Apache HTTPComponents project). There is an implementation for Processing called the HTTP Requests for Processing library. However not everything is implemented, so I decided to include the HTTPClient library directly in the Sketch. It’s actually pretty easy to include compiled Java (*.jar) code in Processing. I’ve created a folder named “code” in the Sketch folder and copied the files in there. 

You can download the HttpClient binary over here. However it’s already included in my example. 

The Quickstart code shows how to upload an online image, however I needed to upload a local file. This StackOverflow post showed how to do that with the FileEntity class. 

The Processing demo

The demo code creates a picture out of the webcam stream (press space) and uploads this to the Azure Face API. It receives the data string in JSON format, which we then parse with the Processing JSON functions (JSONArray and JSONObject). A PGraphics canvas is created to directly overlay parts of the output on our screenshot picture. I noticed this goes slower after the first data comes in (no idea why), however after that it goes kind of realtime. I didn’t parse all the data, check the reference to see all the data you’ll get back. 

I’ve implemented a timer to limit the calls to the API (to stay within the 20 calls per minute). The FaceAnalysis class runs as a separate thread. This is necessary otherwise the draw-loop would wait until the Azure service (or any web service) would sent back the requested information. There is the thread() function in Processing, however that doesn’t work in classes. Luckily there was some basic information on how to use Threads from Daniel Shiffman on the Processing Wiki (now only accessible through the Wayback Machine). 

Get the code on Github

The post Using Azure Cognitive Services with Processing appeared first on Kasper Kamperman.

For my light installations I work with different addressable LED strips like Dotstar (APA102) and WS2812 (Neopixels). You can control them by sending serial data (a bunch of 0’s and 1’s in a certain structure) to the data input. In Tim’s blog you can read for example how APA102 pixels are controlled.

The “problem” with sending that data is that the CPU of the microcontroller is busy with that. You can’t do any other things in the mean time. The longer your LED pixel strip is the longer the wait. Besides that different chipsets have different data rates as you can read in the FastLED chipset reference. The APA102’s can be updated super fast (although you need 2 wires, one for clock, one for data), but WS2812 chips are really slower.

One of the nice things of faster STM32 processors is that they have a DMA (Direct Memory Access) feature. This makes it possible to output data in memory to output pins without the need of the CPU. So while DMA functionality transfers data to your LEDstrip, you are able to render for example your effects with the CPU. Keep in mind that for most applications this is an overkill, you won’t need it. Andreas Finkelmeyer wrote a good explanatory post on DMA. 

Their are some great DMA implementations already for LEDstrips, the best example is the OctoWS2811 library by Paul Stoffregen (Teensy). For the Particle Photon I’ve released a modified version of the Adafruit DotStar library, to control APA102 strips with DMA (thanks to the tips of Louis Beaudoin of the SmartMatrix library). This is possible, because for SPI transfers DMA is already implemented in the firmware. The limitation is that you have to use the SPI pins (A3/A5 and D2/D4) to connect your APA102/DotStar strips.

For a recent project I’m interested in controlling lights with DMX. Because DMX has slow dataspeed (compared with led pixel strips), the ability to send data in the background is kind of a need. SPI speed cannot set precisely enough, so I had to come with another solution. I’ve found several DMA examples, but without some knowledge of it’s inner workings, it’s pretty impossible to make it work. There is not a lot of explanation for people that don’t have an engineering background (like me), so it cost me a lot to understand this stuff. However I finally got a small prototype (just some blinking LEDs) to work, so I thought I might share my learnings for other engineering “noobs”. 

In this proof of concept I transfer data from an array to a GPIO port. In this case just two blinking LED’s on the A3 and A5 ports. Because of a circular double buffer, this will continue without any CPU intervention. 

DMA output concept on GIST

GPIO registers and other stuff

If you work with Arduino you are probably used to set pins to HIGH and LOW with functions like:

digitalWrite(13, HIGH);
digitalWrite(13, LOW);

If you need to send Serial data (bit banging), these functions are pretty slow (we are talking about microseconds now). They need to work on a lot of different devices (the Arduino script language Wiring is supported by many platforms). In order to manipulate a pin in a faster way we have to work on a lower level. Particle has some other functions like pinSetFast() and pinResetFast(). However this won’t work for DMA, you need to access the GPIO register through a port address directly. 

In embedded programming a pin is called a GPIO (General Purpose Input Output) pin. Those pins are connected to a port.

As you can see in this pinout diagram from the Particle Photon datasheet pin A0 is connected to port C pin5, and pin A3 is connected to port A, pin5. Internally a pin map is used to make sure that A0 is actually controlling pin 5 on port C (which is of course still labeled as A0 on the physical device). This pin map code is also a great resource to understand how GPIO ports and pins are used.

In order to set certain GPIO pins to HIGH and LOW you can write to the pin registers. ScruffR explains that in the Particle forum.

And for direct port writes you can use this:

    GPIOA->ODR = 0xAAAA;    // directly setting the respective pins HIGH or LOW
    GPIOA->BSRRL = 0xAAAA;  // only setting the pins with a set bit to HIGH (counter intuitive tho')
    GPIOA->BSRRH = 0x5555;  // only resetting the pins with a set bit to LOW (counter intuitive tho')

There would also be an atomic instruction to have BSRRH & BSRRL set at once, but _IO uint32_t BSRR is not declared for some reason, but this workaround might work (not yet tested tho’)

Each port has 16 pins (16 bit), so each bit sets or resets a certain pin.

ODR we don’t want to use, because it influences all the pins on the port (they will be reset automatically). Since I’d like to keep using other pins (like SPI, D7 etc) function just as normal, this is not an option. 

Julien Vanier came with the suggestion to use the BSRRL and BSRRH registers and use two DMA channels to control them. However BSRRL and BSRRH actually form together the 32 bit set/unset register named BSRR. So the “left” 16 bit part of the number will reset the pins, the “right” 16 bit part will set the pins. 

Using the BSRR register will save us a DMA channel (and Timers that have to be synced). One small problem is that BSRR is not declared in the Particle firmware. However the address of BSRRL points to the same location, so the workaround of ScruffR works.

Below (or in the Particle IDE here) an example of blinking the D7 LED with GPIO manipulation of BSRRL, BSRRH and through BSRR. 

// D7 is GPIO pin 13 on GPIOA. 
// https://github.com/particle-iot/firmware/blob/develop/hal/src/stm32f2xx/pinmap_hal.c#L80

void setup() {
    pinMode(D7, OUTPUT);
}

void loop() {
    
    //GPIOA->BSRR  = 0b00000000000000000010000000000000; // HIGH
    GPIOA->BSRRL = 0b0010000000000000; // HIGH
    
    delay(1000);
    
    //GPIOA->BSRR = 0b00100000000000000000000000000000; // LOW
    GPIOA->BSRRH = 0b0010000000000000; // LOW
    
    delay(1000);
    
    // actually we can make the "left" part by using the "right" BSSRL part and using a 
    // XOR, a pinMask and a bitshift of <<16 
    
    // 0b0010000000000000 HIGH
    // 0b0010000000000000 pinMask
    // ------------------ XOR
    // 0b0000000000000000
    
    // 0b0000000000000000 LOW
    // 0b0010000000000000 pinMask
    // ------------------ XOR
    // 0b0010000000000000
    
    // if we use BSRR we can use a 1 for HIGH and a 0 for LOW by using XOR and a pinMask. 
    uint16_t pinMaskD7 = 1<<13; // pin 13 on GPIOA (same as 0b0010000000000000)
    
    uint16_t valueHigh = 0b0010000000000000;
    uint16_t valueLow  = 0;
    
    uint32_t* GPIOA_BSRR = (uint32_t*)&GPIOA->BSRRL;
    
    //GPIOA->BSRR = valueHigh + ((valueHigh ^ pinMaskD7) << 16);
    *GPIOA_BSRR = valueHigh + ((valueHigh ^ pinMaskD7) << 16);
    
    delay(1000);
    
    //GPIOA->BSRR = valueLow + ((valueLow ^ pinMaskD7) << 16);
    *GPIOA_BSRR = valueLow + ((valueLow ^ pinMaskD7) << 16);
    
    delay(1000);
    
}

This GPIO tutorial for the STM32 Discovery board  helped me understand how GPIO registers and BSRR works.

Transfer data to output pins with DMA.

Like mentioned we would like to modify the GPIO registers with DMA. Each processor has it’s own architecture with Timers, GPIO’s and DMA channels/streams. If found different examples that used DMA to controlled pins or elements. A great working example for the Particle Photon was the Particle Speaker library by Julien Vanier. It uses DMA to control the DAC pin (A7 on the Photon) to play sinus waves. However my idea, was not to be limited to that pin. I wanted to be able to control any pin with DMA.

I started reverse engineering the code, understanding what different lines of code do. The biggest question was why DMA1 Stream5, channel7 is used. Because changing those numbers, would break the code. Well the answer can be find in Table 22 of the reference manual for the STM32F20x range (RM0033).

As you can see above. Channel 7 of DMA, Stream 5 is mapped to DAC1. You can also see that certain channels/streams are connected to a Timer. In other examples I’ve found that this timer needs to match with an DMA Stream/Channel.

Another important insight came from this post on StackOverflow:

There is a problem though, that DMA1 cannot access the AHB bus at all (see Fig. 1 or 2 in the Reference Manual), to which the GPIO registers are connected. Therefore we must use DMA2, and that leaves us with the advanced timers TIM1 or TIM8.

Since TIMER1 is used on the Particle for other functions, only TIMER8 can be used to control the DMA transfer.

Just as in the Speaker library a double circular buffer is used. This means that you can update one buffer, while another buffer is transferred. This makes it possible to transmit DMX on a fixed frame rate in the background. 

Like mentioned at the beginning of this post you can check the proof of concept on GIST. It works with GPIOA (A4,A5,A6,A7,D5,D6,D7) but you can also select GPIOC (A0, A1, A30 or GPIOB (D0,D1,D2,D3,D4). 

DMA output concept on GIST

#include "Particle.h"

// RM0033 MANUAL - Table 23 / Figure 1 System architecture
// Photon is STM32F205
// Only DMA2 is connected with GPIO ports https://stackoverflow.com/questions/46613053/pwm-dma-to-a-whole-gpio
// GPIO BSSRL/BSSRH/BSSR http://hertaville.com/stm32f0-gpio-tutorial-part-1.html
// DMA_Mode_Circular https://github.com/monkbroc/particle-speaker
// Ulrich Radig OctoArtnetNode https://www.ulrichradig.de/home/index.php/dmx/8-kanal-art-net
// Thanks to Julien Vanier for the idea of BSRR manipulation.

// The timers connected to APB2 are clocked from TIMxCLK up to 120 MHz
// In case of the Photon: TIM1, TIM8.

//SYSTEM_MODE(MANUAL); // only use this when you build local

// D7 is GPIO pin 13 on GPIOA.
uint16_t pinMask = 1<<13; // pin 13 on GPIOA (same as 0b0010000000000000)

uint16_t bufferSize = 4;
uint16_t blink_turnhigh_buffer[4];
uint32_t blink_bsrr_buffer0[4];
uint32_t blink_bsrr_buffer1[4]; // double buffer

void timerInit();
void dmaInit();

void setup() { // Put setup code here to run once

    delay(2000);
    Serial.begin(57600);

    timerInit();
    dmaInit();

    pinMode(D7, OUTPUT);

    //WiFi.off();

    // D7 is GPIO pin 13 on GPIOA.
    // of course you can modify multiple pins if you want
    // for example 0b0000000010100000 would turn on A3 and A5 (don't forget to modify the pinMask);
    blink_turnhigh_buffer[0] = 1<<13; //(same as 0b0010000000000000)
    blink_turnhigh_buffer[1] = 0;
    blink_turnhigh_buffer[2] = 1<<13;
    blink_turnhigh_buffer[3] = 0;

    // We use a XOR operation to mask and make the turn to LOW register low
    // (Done by sending a one. )
    for(int i = 0; i < 4; i++) {

      blink_bsrr_buffer0[i] = blink_turnhigh_buffer[i] + ((blink_turnhigh_buffer[i] ^ pinMask) << 16);
      blink_bsrr_buffer1[i] = blink_bsrr_buffer0[i]; // double buffer

    }
}

void loop() {

}

void timerInit (void) {

  // https://github.com/pkourany/SparkIntervalTimer/blob/master/src/SparkIntervalTimer.cpp
  // tryout with a slow timer. 2Hz (so each number is 0.5ms)
  //const uint16_t SIT_PRESCALERu = (uint16_t)(SYSCORECLOCK / 1000000UL) - 1;	//To get TIM counter clock = 1MHz
  const uint16_t SIT_PRESCALERm = (uint16_t)(SystemCoreClock / 2000UL) - 1;	  //To get TIM counter clock = 2KHz

  TIM_TimeBaseInitTypeDef	TIM_TimeBaseStructure;

  TIM_DeInit(TIM8);

  RCC_APB2PeriphClockCmd(RCC_APB2Periph_TIM8, ENABLE);

  TIM_TimeBaseStructure.TIM_Prescaler = SIT_PRESCALERm;
  //TIM_TimeBaseStructure.TIM_Prescaler = SIT_PRESCALERu;
  TIM_TimeBaseStructure.TIM_CounterMode = TIM_CounterMode_Up;
  TIM_TimeBaseStructure.TIM_Period =  2000;
  TIM_TimeBaseStructure.TIM_ClockDivision = TIM_CKD_DIV1;
  TIM_TimeBaseStructure.TIM_RepetitionCounter = 0;

  TIM_TimeBaseInit(TIM8,&TIM_TimeBaseStructure);
  TIM_ClearFlag(TIM8,TIM_FLAG_Update);

  TIM_Cmd(TIM8, ENABLE);

}

void dmaInit(void) {

  // DMA2 only connects to GPIO ports...
  // DMA2 channel 7 stream 1 connects to TIM8_UP
  DMA_InitTypeDef DMA_InitStructure;

  // Clock enable
  RCC_AHB1PeriphClockCmd(RCC_AHB1Periph_DMA2, ENABLE);

  DMA_Cmd(DMA2_Stream1, DISABLE);
  DMA_DeInit(DMA2_Stream1);

  DMA_StructInit(&DMA_InitStructure);

  DMA_InitStructure.DMA_Channel = DMA_Channel_7;
  DMA_InitStructure.DMA_PeripheralBaseAddr = ((uint32_t)&(GPIOA->BSRRL));
  DMA_InitStructure.DMA_Memory0BaseAddr = (uint32_t) blink_bsrr_buffer0;
  DMA_InitStructure.DMA_BufferSize = bufferSize;

  DMA_InitStructure.DMA_PeripheralDataSize = DMA_PeripheralDataSize_Word;
  DMA_InitStructure.DMA_MemoryDataSize = DMA_MemoryDataSize_Word;

  DMA_InitStructure.DMA_DIR = DMA_DIR_MemoryToPeripheral;
  DMA_InitStructure.DMA_PeripheralInc = DMA_PeripheralInc_Disable;
  DMA_InitStructure.DMA_MemoryInc = DMA_MemoryInc_Enable;

  DMA_InitStructure.DMA_Mode = DMA_Mode_Circular;
  DMA_InitStructure.DMA_Priority = DMA_Priority_VeryHigh;

  /* Configure double buffering */
  DMA_DoubleBufferModeConfig(DMA2_Stream1, (uint32_t) blink_bsrr_buffer1, DMA_Memory_1);
  DMA_DoubleBufferModeCmd(DMA2_Stream1, ENABLE);

  DMA_Init(DMA2_Stream1, &DMA_InitStructure);

  DMA_Cmd(DMA2_Stream1, ENABLE);

  // DMA-Timer8 enable
  TIM_DMACmd(TIM8,TIM_DMA_Update,ENABLE);

}

The post Particle Photon (STM32F205) DMA Control of GPIO pins appeared first on Kasper Kamperman.

The most easy might be to switch to Text view and add some anchor text around the part you want to link. However I liked a more user friendly solution in which the source is stored within the Media Library itself.

I started out trying some plugins like media-credit and better image credits. However they added too much stuff around it, while I essentially wanted hyper-linked caption.

Luckily I came across a solution from Kaspars Dambis; How to Automatically Add Image Credit or Source URL to Photo Captions in WordPress. It behaved a bit strange with https links, but it was a solid base to work on. He created a filter for the ‘img_caption_shortcode’. You can read more about how Captions work in Justin Tadlock’s blog.

Solution

Most of the solution was already provided by Kaspars Dambis. I’ve added an extra field below the Source URL field in which you can fill in the credits. If you fill in the source URL only, the whole text in the Caption will change in a hyperlink to the source. If you fill in the credits field, that will be added to the  caption (after a ‘-‘ symbol) as a hyperlink.

To use this, just copy-paste the code to the functions.php of the theme (or child-theme) that you are using.

Result

Check the result of the plugin in my article on dynamic light (in Dutch only) at the Lumiflow website.

Code

View the code on Gist.

The post How to add source links to image captions in WordPress appeared first on Kasper Kamperman.

I needed to use the raw Robert Penner easing functions. The functions are already implemented in the Ani Library from Benedikt Gross, but there wasn’t an example to use the functions directly without using the transition and time function. Apart from timed animations you could use the functions as well as a curve in audio-visualisations (for example the Sound library can give you back an amplitude on which you can apply these functions).

In the code below I use the object, but syntax like this also works:

float easingOutput = AniConstants.CUBIC_IN_OUT.calcEasing(normalizedValue,0.0,1.0,1.0);

In this example code I used normalized values.  Which means that we use an value between 0.0 – 1.0 as input and also get that back as output.

The functions accept 4 values:

• t is time, in this case just 0.0 – 1.0
• b is the start, we just use 0.0
• c is the change, we use normalized so also 1.0
• d is the duration, because we use normalised it’s 1.0

If you only need the functions you can also copy-paste them from the Ani-library source.

import de.looksgood.ani.AniConstants;
import de.looksgood.ani.easing.*;
import de.looksgood.ani.*;

Sine sine = new Sine();
Quad quad = new Quad();
Cubic cubic = new Cubic()
Quart quart = new Quart();
Quint quint = new Quint();
Expo expo = new Expo();
Circ circ = new Circ();
Back back = new Back();
Elastic elastic = new Elastic();
Bounce bounce = new Bounce();

// stuff it all in an array for display

Easing[] easingFunctions = { 
  sine, quad, cubic, quart, quint, expo, circ, back, elastic, bounce
};

String [] easingNames = {
  "sine", "quad", "cubic", "quart", "quint", "expo", "circ", "back", "elastic", "bounce"
};

String [] aniModes = { "IN", "OUT", "IN_OUT" };
int currentAniMode = AniConstants.IN_OUT;

float xLeftMargin  = 80;
float xRightMargin = 80;

void setup() {
  // tip FX2D looks really smooth on retina displays
  // some things won't work in this mode, but most things do
  size(640,480,FX2D);
  noStroke();
  frameRate(25);
  
  changeMode(currentAniMode);
}

void draw() {
  
  background(255);
  
  float durationInMilliSeconds = 4000;
  float normalizedValue        = (millis()%durationInMilliSeconds)/durationInMilliSeconds;
  
  // overwrite the calculated value when pressing the mouse
  if(mousePressed) normalizedValue = mouseX/(float)width;
  
  fill(0);
  text("easing mode : " + aniModes[currentAniMode] + " - " + nf(normalizedValue,0,2),10,20);
  
  fill(224);
  rect(xLeftMargin,40,(width-xLeftMargin-xRightMargin),height-80);
  
  // line to display the linear 0.0 - 1.0 progress
  stroke(196);
  float lineX = xLeftMargin + (normalizedValue * (width-xLeftMargin-xRightMargin));
  line(lineX,40,lineX,height-40);
  
  for(int i = 0; i < easingFunctions.length; i++) {
    
    float yPos = 60+(i*40);
    
    float easingOutput = easingFunctions[i].calcEasing(normalizedValue,0.0,1.0,1.0);
    
    // put the text in front and draw horizontal line
    fill(0);
    text(easingNames[i], 20, yPos);
    line(xLeftMargin,yPos,(width-xRightMargin),yPos);
    
    // draw the eased circle
    drawCircle(easingOutput, yPos, 20);
    
  }
  
  text("Press to mouse control the value manually. Change the Ease mode with the 1, 2, 3 keys.", 20, height-15);
  
  if(frameCount > 22 && frameCount<151) saveFrame("easing-#####.png");
  
}

void drawCircle(float normalizedValue, float yPos, float radius) {
  // calculate the x position and take the margins in account
  float xPos = xLeftMargin + (normalizedValue * (width-xLeftMargin-xRightMargin));
  noStroke();
  fill(64);
  ellipse(xPos,yPos,radius,radius);
}


void keyReleased() {
  
  if(key == '1') {
    changeMode(AniConstants.IN);
   }
  else if(key == '2') {
    changeMode(AniConstants.OUT);
  }
  if(key == '3') {
    changeMode(AniConstants.IN_OUT);
  }
  
}

void changeMode(int mode) {
  
  currentAniMode = mode;
  // change the mode for all easing objects
  for (Easing e : easingFunctions) {
     e.setMode(currentAniMode); 
  }
}

The post Penner Easing functions in Processing appeared first on Kasper Kamperman.

Watch this video on YouTube.

Techniques used in Web App

• Doing AJAX GET and POST requests with the native (Vanilla JS) XMLHttpRequest function.
• Different checks (404, Particle.connected).
• Rate limit (throttle) requests.
• Passing values as a comma separated string.
• Parsing received JSON data.
• Calculating performance of the Particle Function.
• Material Design Lite as framework.

Techniques used on the Photon

• Using Particle Function and Particle Variable
• Implemented HSB to RGB conversion and brightness correction LUT.
• Parsing a comma separated string.
• Formatting a JSON string.
• Control the RGB led on the Photon.

What happens

Flow

• At start-up check if the device is connected by doing a call to the device and look for the connected variable.
• When you move a slider or press the button we submit the Hue, Saturation and Brightness (and time) as a comma separated String to the setHSB Particle.function.
• The Photon will display the color and the function will return the send time as an integer.
• When we receive the response we calculated the time it took and display that in the durationChip.
• We do a call to the getRGB Particle.variable to get the calculated red, green and blue values.
• The Photon will return a JSON formatted string with r,g,b variables.
• We change the title background based on the received values.

Known limitations/problems

You need to set your deviceId and accessToken in the JavaScript code. It’s not smart to publish this on the internet, because then anyone can take ownership if your Photon. Just use this code on a private network or from your own computer. If you want a more sophisticated way to connect to your Photon (with username/pass), then this excellent Particle API JS tutorial of Rickkas7 will help you to get started. 

The HTML5 range-slider input type is used. I’ve found that it doesn’t work good on Touch devices. There are several solutions. I’ve added rangetouch.js, however that doesn’t seem to have much effect right now. Maybe it conflict with the Material Design Light code.

The Material Design Lite framework is not actively developed anymore. However I liked the well-designed user interface elements for this demo.

Design choices

You might wonder why I use a comma-separated string to send data from JavaScript to the Photon and why I use a JSON formatted string to send data the other way round. I decided that it was best to use the parsing strengths of each platform. Sending a lot of data to an embedded platform is not a smart idea (although processors get faster), the less data the better. A comma-separated string feels like a balance between shortness and human-readability. It simpler than JSON, because you don’t pass the variable names. In case you would like to parse some JSON, this Arduino JSON library might be a good library to start.

I’ve decided to send a JSON string back from the Photon. Actually this is just more out of laziness, because parsing JSON is already build in JavaScript. I’ve kept the string as short as possible (so using r,g,b instead of red, green, blue).

As you can read you need both a Particle Function and a Particle Variable. The Particle Function to send a string to the Photon and the Particle variable to receive a string. Unfortunately there isn’t a type that receives a string and can pass back as string. (You could encode the rgb value in the integer if you really want, this seemed unnecessary for this demo).

In my other demo that communicates with the localhost and send data back and forth in one step by using a POST request. We send a comma-separated string and we receive a JSON string back. You’ll notice it goes a lot faster, because we only need one call and more important because it stays on the local network.

Check the code and Quickstart on GitHub

The post Particle Photon RGB Cloud Remote Control appeared first on Kasper Kamperman.

Watch this video on YouTube.

The idea is to run a small webserver on the Photon. Unfortunately there isn’t yet an HTTP server available in the Particle API. Maybe it will come a the near future, because WICED (the Broadcom SDK for the microchip on the Particle Photon) implements a HTTP server (Adafruit implemented this HTTP-API for their WICED feather WiFi). For the SoftAP configuration page this is already used, but that only works in Listen mode.

Luckily there is the Webduino library. It makes use of the existing TCPServer and TCPClient functions on the Photon and adds the HTTP layer on top of that. I’ve forked and updated the library ported by Matthew McGowan, because I noticed that in the previous version communication was slowed-down because of some kind of bug in the Particle Core. To my surprise it took 300 milliseconds to send a message on my local network almost the same time as it took when communicating over the Particle Cloud. My expectation was that it should be way faster. I’ve found the cause the code, an added delay which was added to solve a bug on the Particle Core. I’ve removed the added delay and the communication speed changed to 15-20 milliseconds for one message. 

In my experience the Webduino library is not always stable. It doesn’t manage client/server connections. Rickkas7 has some code that does this better, with some modifications this might be a better and more stable alternative. 

Use Case

The idea is to be able to directly control Photon by sending data over the local network. There are some implementations that serve a complete webpage from the Photon. The problem is that serving HTML, CSS and JavaScript  (I’m not even talking about images) eats up a lot of memory space on your Photon.

What I like is that anyone can control the Photon. So you also don’t need to put your credentials. I’m designing a light product, and I want that people within the local network are able to change the color. I don’t even what that people need to download an app (if you opt for that, I’d advice to look into UDP).  With the mDNS library you can publish your device with an address in your network, like myphoton.local. This doesn’t seem to work out-of-the-box on Windows (if you have tested this, please share some info), however installing iTunes (Bonjour protocol of Apple is mDNS) seems to help. AJ ONeal did a good explanation on mDNS of you’d like to know more. Another way to reach your device is to go to the ip-address in your browser like http://192.168.0.106/.

Design choices

My code builds on the idea of the Hackster article of Garret Bartley. He serves a webpage on the Photon with an iFrame. The iFrame points to an online webpage, served from a hosting provider. I tried installing this on my HTTPS server and ran into some security errors. Most browsers prevent making connections to insecure (HTTP) servers to a HTTPS server.

There are some ways to deal with that, however I’ve decided to take another road. Incase you decide to dive in here are some terms linked to some interesting articles:

• Cross-Origin Resource Sharing (CORS)
• JSONP
• X-Frame-Options and Content-Security-Policy

In the shared Particle Photon code I’ve implemented a version that redirects you to my hosted remote control application and a version that seems to run on the Photon (like the iFrame idea of Garret Bartley) by storing html code in a JavaScript. 

You can try the methods below out directly by installing this Particle build project on your Particle Photon. 

Redirect to online application

The first is that if you surf to myphoton.local, the Photon will redirect you to an index.html file on my web server and passes both the ip-address and the mDNS address. From that website we call then the address myphoton.local/sethsb/ and post a comma separated string. The server returns a JSON formatted string. Check the Particle Photon Cloud Remote Control article in which I explain my design choices. 

It’s important to know that I redirect the user to my insecure (http) part of the website. Because doing a call from my secure (HTTPS) part to the Particle Photon server won’t work, because the server only supports http. You can try it yourself by opening the control application over HTTPS (check the console for the error messages). 

Of course the user will see that they get redirected to another page (the iFrame version of Garret made it appear that everything was running on the Photon), which might be something you won’t like. However there are benefits. You can easily bookmark the page and it will be reachable even if your Particle device is offline. In that way you can give a friendly error message (like I did by opening “Is your Particle device online?” ‘snack bar’ dialog).

Serve a webpage on the Photon

I also wanted to explore the idea of serving the webpage from the Photon. In that way I liked the idea of Garret that used the iFrame to load the HTML, CSS and JavaScript externally, so you would save memory on the Photon.

I did some research and importing HTML is much more difficult than importing JavaScript (like including a library hosted on the Google CDN) or images from an external host. A solution might be using a technique like webcomponents which at the time of writing are only supported in Google Chrome, although there is a polyfill (some script that works around this on older browsers) available.

I decided to try what Eric Bidelman would file under Crazy Hacks to import HTML. I’ve stored the HTML body code in a JavaScript file and use the innerhtml property to place that content in the HTML body. The code below is the index page served by the Photon, you see that all the scripts, and styling are hosted externally. Between the HTML body-tags there is no code.

const unsigned char index_html[] =
"DOCTYPE html> "
"Particle Photon RGB LOCAL Remote" "" "" "" "" "" "" " ";

The HTML body is stored in the index_content.js file. To make this work I’ve added slashes and I’ve “compressed” it. So I store it in a JavaScript file (check the whole file here).

That’s it. The HTML and CSS for the remote control app is exactly the same used for the Photon Cloud remote code. The index.js file is mainly different in the part where we communicate with the device.

Check the code and Quickstart on GitHub

The post Particle Photon RGB Local Remote Control appeared first on Kasper Kamperman.

Master Thesis Media Innovation – Static Art versus Ambient Visuals

Get in contact

I’m currently working on new product concepts to implement this research. Please reach out if you are a product designer and what to implement this research and technology in one of your products. Possible markets: spa, wellness, waiting rooms and healthcare.

The post Research Ambient Visuals appeared first on Kasper Kamperman.

The Extract Project was started as a graduation project by Kasper Kamperman and Sebastiaan Elstgeest. The name Extract refers to “extracting” music and visual content to allow translation of this content to other senses.

The primary goal of the project was to create an experience which starts with the integration of music visuals, light and space and ends with delivering the proof that combined media have an enhancing effect upon each other. Besides that, the visitors can within certain limits influence the experience. An important element is the lounging furniture object. The audience public can experience this special type of furniture, while at the same time the furniture is an integrated part of the experience itself with its multiple synchronized light effects coming from the heart of the furniture piece.

To realize the project we approached students of different educational institutes in Enschede ( University of Twente, AKI, Saxion, conservatory ) and created a multidisciplinary team ( musicians, technicians, product designers, programmers and more ).

Extract wins Europrix (article in Dutch)

The post Extract appeared first on Kasper Kamperman.