This is an old experiment I did where I had my face follow the mouse around the browser document. Originally I wrote it using jQuery, but I've updated it to vanilla js. Source available on Github. You can access it on its own here: Physiognomy - A JS experiment.
Step one is to create an image with the nine different head positions:
Next create a function to take the mouse position and image position which will then be fed to another function which calculates which image to show. imagew and imageh are the size of the final element, in other words should be a third of the height and width
function changeFace(mousex, mousey, face_id){
var face = document.querySelector(face_id)
var imagew = 160;
var imageh = 160;
var facepos = { // image position
top: face.offsetTop,
left: face.offsetLeft
};
face.style.backgroundPosition = calucateBp(imagew, imageh, mousex, mousey, facepos);
}
Next create a function to calculate which the CSS background-position and return it. This looks complicated but should be self explanatory. Each if statement tests where the mouse is relative to the element and sets the background-position accordingly.
Note.offsetTop and .offsetLeft return the offset relative to the parent element, not the document. Some extra maths are involved to allow for this if the element isn't at the root of the DOM.
In these days of cloud storage, file synchronisation, and sharing on social media it's more important than ever to properly name files.
Spaces make sense in written language but computers don't like them. Try to use a space in a filename in a URL and it'll replace it with %20. Try to do anything on the command line and you'll have to wrap the filename in double quotes.
The two common conventions are underscores (_) and hyphens (-). One convention used commonly in Unix/Linux filenames is to use underscores to separate words in the file title, and hyphens to separate the title from version number. For example Apache modules take the form of file_name-version.extension, eg. mod_ftp-0.9.6.tar.gz.
Turns out if your filename is ever to be processed by a regular expressions (such as by the Google indexer!) the underscore will be removed and filename concatenated. When using the the \w operator to find words the underscore is ignored, but the hypen is not.
Always use dashes in filenames instead of spaces or underscores.
I have the pleasure of being one of a small group who run a cinema night once a month in the small town of Writtle, Essex. It's my job to take care of anything remotely technical.
We didn't have any money when we started so had to go cap-in-hand to the parish council who were great and bought the screen and the projector, we use an old Hifi system I had for sound.
We didn't want to use DVDs as we wanted a pre-show slideshow, trailers and an intermission which would've been impractical using DVDs, especially since we would need Blu-ray. Another option was to use a laptop which would've worked fine, but the Raspberry Pi with it's h.264 capable GPU seemed a perfect fit.
Initially we used a Raspberry Pi 3b+ but with the recent release of the A+ we've switched due it's lower power consumption.
In order to use the hardware h.264 decoding we had to use Omxplayer which unfortunately doesn't have playlist support so I had to use a little bash magic.
First we need a playlist file containing a list of video files in the order we want them to play:
A simple bash script to read the playlist and line-by-line and invoke Omxplayer. The -o both parameter sets the output of audio to both the HDMI cable and phones out. -b blanks the screen first.
#!/bin/bash
PLAYER=(/usr/bin/omxplayer -o both -b)
PLAYLIST="sotg.pls"
clear # clear the screen
if [ -e "$PLAYLIST" ]
then
IFS=$'\012' # Set the line ending
for file in $(cat "$PLAYLIST")
do
${PLAYER[@]} "$file"
done
fi
In order to split the film in two for the intermission I find a suitable spot, note the time, and convert it to seconds. For example, 45m 34s in would be (45 * 60) + 34 which is 2734. I then use this in a couple of FFMpeg commands to trim the single film file in to two parts:
-ss sets the start time for the trimmed file, and -t sets the end time, which we can omit on the second command as we want to trim to the end. -af "volume=12dB" boosts the volume while we're at it.
This paragraph has a couple of spans with different title attributes.
It is also possible to target a substring at the end using the dollar ($) sign.
<p>This paragraph has a couple of <span title='twotone'>spans</span> with different <span title='donedown'>title</span> attributes.</p>
span[title$="one"] { background : cyan; }
This paragraph has a couple of spans with different title attributes.
To target a substring at the beginning use the caret (^) sign.
<p>This paragraph has a couple of <span title='twotone'>spans</span> with different <span title='onedown'>title</span> attributes.</p>
span[title^="one"] { background : cyan; }
This paragraph has a couple of spans with different title attributes.
It is also possible to target an exact match followed by anything separated with a dash using the pipe (|) symbol.
<p>This paragraph has a couple of <span title='one-up'>spans</span> with different <span title='one-down'>title</span> attributes.</p>
span[title|="one"] { background : cyan; }
This paragraph has a couple of spans with different title attributes.
Lastly we can do a full text search using the asterisk (*)
<p>This paragraph has a couple of <span title='donedown'>spans</span> with different <span title='doneup'>title</span> attributes.</p>
span[title*="one"] { background : cyan; }
This paragraph has a couple of spans with different title attributes.
Attribute stacking
Attribute selection can also be stacked to give even finer control of selection.
<p>This paragraph has a couple of <span class='onetwothree' title='onetwothree'>spans</span> with different <span class='twothreefour' title='onetwothree'>title</span> attributes.</p>
As someone whose interest in computing struck in the early 1980s I've always loved small self-contained computers. In my teens I discovered dumb terminals. However, it wasn't until the last ten years when I found myself SSHing in to remote servers that the idea I might have a use for one made any sense.
I Googled, I pored over oldcomputers.com and terminals-wiki.org, I watched old films. I kept coming back to the DEC VT100. I scoured eBay and other sites but they rarely come up and when they do are out of my price range.
It dawned on me, "heck! I have a 3D printer, a competency with CAD, Linux, and basic electronics, and oh, the Raspberry Pi would be perfect for this."
First things first was to source the parts so I could design my VT100 around it.
The guts would be a Raspberry Pi Zero W since all I intended to use it for would be connecting to other systems.
The screen was straightforward enough on AliExpress. A nice 8", 4:3 screen with driver board, HDMI, VGA, and AV inputs was only ~£26. It's bright and sharp and only requires 12v at 2-4amp.
With a big enough power supply I could power the Pi and the screen from one input. I bought a simple step-down board to convert 12v to 5v with a USB output.
The keyboard was a bit of a headscratcher. I wasn't about to 3D print a chassis and full keyboard so I was forced to compromise on the VT100 authenticity. I bought a cheap small USB keyboard. A future upgrade might be to make a housing this 3rd party keyboard would fit in to.
I leapt in with both feet (and a set of calipers) and designed a small VT100 which would fit the screen I had nicely.
The further I got in to designing it I realized how difficult it would be to print on my printer (the case itself would require six or seven parts glued together) and that it would take up a lot of precious desk space. I decided version one should be a working machine, not a faithful reconstruction. With a coffee and a notebook I started with some sketches.
With 3d printing in mind I selected one design and created it in CAD, but I found it wanting. Instead of a side-by-side arrangement for the circuit boards I came up with a design where the boards are stacked.
Abandoned design
Final design
Circuit board arrangement
In all I think it took about twenty-six hours to print. I'm happy to say it fits together nicely.
I realised that this was wasted as just a terminal so I put a Pi 3b+ in there and installed the desktop environment. I put a ZX Spectrum emulator on and realised I'd neglected to a put a speaker in! Something for v2. For version two I'll probably make some of the corners softer by rounding them and make it snap together tighter.
