Thanks to Victor Santiago for sending this video around. It is very cool.
And I always have a weakness for adults who aren’t afraid to do things on toys!
Contest for Wearables
Make it Wearable – Engineering Students Contest
https://www.instructables.com/contest/makeitwearable2025/
prizes between $100 and $500. Closes May 27th.
Library of Tools
I have a new role! Director of Innovation!!
I’m still here at Stony Brook University, but after many, many years with the Department of Information Technology, I have made the move to Stony Brook University Libraries! I started off my professional life, eons ago, between working at the library and working at bookstores, and my personal hobby is to collect signed first edition SF&F books, so this is a great fit for me. Especially since I get to continue doing what I deeply love doing, which is pairing art and technology to bring the folks of the university the COOLEST STUFF.
With the support of the Dean of Libraries, I will be spearheading bringing multiple creative and innovative spaces to the campus, at locations that are both centralized and welcoming to all students, faculty and staff.
We will certainly have 3d printers, textile making equipment, VR/AR spaces, sensors and other electronic doo dads, vinyl cutting, button making, and so much more!
I personally welcome any faculty who have ideas about alternative assessments, field trips, or entire modules that they want to have taught in the space, to please come and have a consultation with me to discuss what we can do together to make some dream projects for your course a reality. We are still in the design and renovation stages of the space – and the squeaky wheel could very well get the grease in what goes into the space first.
Embedding Video into a webpage or brightspace… from Google Drive
So, as is normal, there are different ways to tackle embedding video using systems here at SBU. I’m just going to look at google drive embeds. When you embed a video, it plays right there in the page, not something you have to click on which then opens up a new page or downloads the video to view it. Like this:
(BTW – this video I am using in this demonstration was made via copilot as I outlined in the previous blog post.)
So how did I do that? One usually won’t just drop a video into this blog site, as it will likely be too big. So the first thing I did after making the video, is drop it into my google drive. Make sure you share it to anyone that has the link or anyone at SBU as appropriate.
The thing is, the embed code from google drive is a wee bit hidden. You have to click on the three dots next to the file name, open it in a new tab, then click the three dots above the player area and then at the very bottom of the menu you can find the embed code. You will need to highlight and copy the code out from there.
Now that you have the embed code, what next? Well, here in the blog I switch from a Visual View to a Text view, and that shows me the html for the page and I just copy it in. It might look a little scary, but right after you paste, you can switch right back to the Visual Mode and safety.
In Brightspace, you go to the area you want to have the video, find this icon:
This is the “insert stuff” button which can be found in just about any text entry window where you can format the text.
Enter Embed Code is at the bottom
Paste in your code and hit next. It gives me a warning that you are getting media from another site. Click Allow. Click Insert. I got that warning again, and I told it to allow it again. And now it looks like this:
Google Drive auto captions the videos that you put in the drive. (You should still check and edit them.)
You do not get all the same engagement tools and analytics that you get in echo360 embedding, but I felt that this was still worth sharing.
Video from the Copilot page
I went to https://copilot.microsoft.com/
And then I saw this option on the side. It says Visual Creator
![list of clickable options on the right side of the page [copilot, Agents, Visual Creator, Get Agents, Create an agent]](https://you.stonybrook.edu/jadams/files/2025/03/Screenshot-2025-03-20-at-4.58.20 PM.png)
New sample prompts come up including “Create a video with stock media.”
My Prompt:
show a video about safety when using a drill
This was produced in short order:
and when I was on that page still and I clicked to open the video, it opens in this editor called ClipChamp.
So – that’s cool.
Gemini Feature boost – Canvas
If you have been using ChatGPT, you may have already seen this feature there, but Gemini has added a “canvas” to it’s potential workflow. The canvas is a separate “frame” or space on the page that gets updated as you work on whatever is in it with Gemini, without it scrolling up and away as you progress. I’ve mostly used it for things like code, but you can totally use it for working on a draft of a regular written object, like an essay, speech, screenplay, etc.
To activate it, you will want to open https://gemini.google.com/app.
Once there tell it what you want to work on – I’ll think of something on the simple side. Here is my prompt:
I would like to write a small app that lets me know that everything will be alright. I want it to suggest a nice quote and also ask me if I want to hear some soothing music. Can you help me write that?
Then, I want to use the new canvas feature. This requires that you click the button in the chat/prompt window that says “canvas” Now my screen looks like this:
It even has a preview mode!
I’m going to ask it to change how the music is selected. At this stage it is asking me to link it to the music from my own drive. I want it to find it on the internet for me.
Can you change it so that you find the music on the internet for me? Tell me what you selected and ask if I want to hear it?
It created some code that uses an API to retrieve the music, and because I don’t feel like fussing with that I have it rewrite the code one more time to play music without the need of a API. It tells me I really should use the API, but gives me what I wanted anyway. lol This is the result:
preview: (the preview is fully functional)
It doesn’t sound like Calming ocean waves” but it is fun music. Eventually I got sick of the synthy fun and asked it to find more appropriate music. Here is the code. You can copy it into a text/notepad app and save it as a html file if you want to play it in the browser on your computer
https://drive.google.com/file/d/1HtllluclKKzucMunkwVQ6kpSAaxLBtYr/view?usp=sharing
There is another feature “audio overview”. If you’ve used NotebookLM, I’m sure you’ve already seen it. They are bringing it to regular Gemini, but I don’t personally see it yet, so I believe it isn’t fully rolled out yet.
Have fun!
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Everything Will Be Alright</title>
<link href=”https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap” rel=”stylesheet”>
<style>
body {
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #f0f0f0;
font-family: ‘Inter’, sans-serif;
overflow: hidden; /* Prevent scrollbars during animation */
}
#canvas {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.container {
background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent white */
padding: 30px;
border-radius: 12px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
text-align: center;
max-width: 80%;
backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.3);
}
h1 {
color: #333;
margin-bottom: 20px;
font-size: 2em;
}
p {
color: #555;
font-size: 1.1em;
line-height: 1.6;
margin-bottom: 25px;
}
button {
padding: 12px 25px;
border: none;
border-radius: 6px;
background-color: #4CAF50; /* Green */
color: white;
font-size: 1.1em;
cursor: pointer;
transition: background-color 0.3s ease;
margin-top: 10px;
font-family: ‘Inter’, sans-serif;
}
button:hover {
background-color: #367c39; /* Darker green */
}
#music-container {
display: flex;
align-items: center;
justify-content: center;
margin-top: 20px;
flex-direction: column; /* Stack items vertically */
}
#play-music {
padding: 12px 25px;
border: none;
border-radius: 6px;
background-color: #007BFF; /* Blue */
color: white;
font-size: 1.1em;
cursor: pointer;
transition: background-color 0.3s ease;
margin-top: 10px;
font-family: ‘Inter’, sans-serif;
}
#play-music:hover {
background-color: #0056b3; /* Darker blue */
}
#music-controls {
display: none; /* Initially hide the controls */
flex-direction: column;
align-items: center;
margin-top: 10px;
background-color: rgba(255,255,255,0.7);
padding: 10px;
border-radius: 8px;
border: 1px solid rgba(255,255,255,0.3);
backdrop-filter: blur(5px);
}
#music-controls button {
margin: 5px;
padding: 8px 16px;
border: none;
border-radius: 6px;
background-color: #4CAF50; /* Green */
color: white;
font-size: 0.9em;
cursor: pointer;
transition: background-color 0.3s ease;
font-family: ‘Inter’, sans-serif;
}
#music-controls button:hover {
background-color: #367c39; /* Darker green */
}
#volume-control {
width: 100px;
margin: 10px 0;
}
#music-info {
margin-bottom: 10px;
font-size: 0.9em;
color: #555;
}
</style>
</head>
<body>
<canvas id=”canvas”></canvas>
<div class=”container”>
<h1>Everything Will Be Alright</h1>
<p id=”quote”>Loading a reassuring quote…</p>
<div id=”music-container”>
<p id=”music-info”>Finding soothing music…</p>
<button id=”play-music” style=”display:none;”>Play Soothing Music</button>
</div>
<div id=”music-controls”>
<button id=”pause-music”>Pause</button>
<button id=”resume-music”>Resume</button>
<label for=”volume-control”>Volume:</label>
<input type=”range” id=”volume-control” min=”0″ max=”1″ step=”0.01″>
</div>
</div>
<script>
const canvas = document.getElementById(‘canvas’);
const ctx = canvas.getContext(‘2d’);
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
let stars = [];
const numStars = 200;
function initializeStars() {
stars = [];
for (let i = 0; i < numStars; i++) {
stars.push({
x: Math.random() * canvas.width,
y: Math.random() * canvas.height,
radius: Math.random() * 2,
color: `rgba(255, 255, 255, ${Math.random() * 0.5 + 0.5})`, // Varying opacity
speedX: (Math.random() – 0.5) * 0.2, // Subtle movement
speedY: (Math.random() – 0.5) * 0.2
});
}
}
function drawStars() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
stars.forEach(star => {
ctx.beginPath();
ctx.arc(star.x, star.y, star.radius, 0, Math.PI * 2);
ctx.fillStyle = star.color;
ctx.fill();
ctx.closePath();
// Update star position for subtle animation
star.x += star.speedX;
star.y += star.speedY;
// Wrap around edges
if (star.x > canvas.width) star.x = 0;
if (star.x < 0) star.x = canvas.width;
if (star.y > canvas.height) star.y = 0;
if (star.y < 0) star.y = canvas.height;
});
}
function animateStars() {
drawStars();
requestAnimationFrame(animateStars);
}
initializeStars();
animateStars();
window.addEventListener(‘resize’, () => {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
initializeStars(); // Re-initialize stars on resize for proper distribution
});
const quoteElement = document.getElementById(‘quote’);
const quotes = [
“This too shall pass.”,
“Every cloud has a silver lining.”,
“You are stronger than you think.”,
“The best is yet to come.”,
“Breathe. You’re going to be okay. Breathe and remember that you’ve been in this place before. You’ve been this uncomfortable and anxious and scared, and you’ve survived. Breathe and know that you can survive this too. These feelings can’t break you. They’re painful and exhausting, but they can’t break you. You’re going to be okay.”
];
function displayQuote() {
const randomQuote = quotes[Math.floor(Math.random() * quotes.length)];
quoteElement.textContent = randomQuote;
}
displayQuote();
setInterval(displayQuote, 10000); // Change quote every 10 seconds
const playMusicButton = document.getElementById(‘play-music’);
const audio = new Audio();
const musicControls = document.getElementById(‘music-controls’);
const pauseMusicButton = document.getElementById(‘pause-music’);
const resumeMusicButton = document.getElementById(‘resume-music’);
const volumeControl = document.getElementById(‘volume-control’);
const musicInfo = document.getElementById(‘music-info’);
let isPlaying = false;
let selectedTrack = null; // Store the selected track URL
// Simulate an online search for music without an API
function searchForSoothingMusic() {
const tracks = [
{ title: “Relaxing Piano Music”, url: “https://www.bensound.com/royalty-free-music/track/rainy-day-lo-fi-jazz” },
{ title: “Gentle Rain Sounds”, url: “https://www.soundjay.com/buttons/sounds/rain-01a.mp3” },
{ title: “Calming Ocean Waves”, url: “https://www.soundjay.com/buttons/sounds/ocean-wave-01.mp3” },
{ title: “Soft Ambient Music”, url: “https://www.bensound.com/bensound-music/bensound-acousticbreeze.mp3” },
{ title: “Peaceful Flute Music”, url: “https://www.soundjay.com/buttons/sounds/flute-c-note.mp3” },
];
setTimeout(() => {
selectedTrack = tracks[Math.floor(Math.random() * tracks.length)];
musicInfo.textContent = `Found: “${selectedTrack.title}”. Would you like to hear it?`;
playMusicButton.textContent = “Play Music”;
playMusicButton.style.display = ‘inline-block’;
}, 2000);
}
searchForSoothingMusic();
playMusicButton.addEventListener(‘click’, () => {
if (selectedTrack) {
audio.src = selectedTrack.url;
musicControls.style.display = ‘flex’;
if (isPlaying) {
audio.pause();
isPlaying = false;
playMusicButton.textContent = “Resume Music”;
} else {
audio.play().then(() => {
isPlaying = true;
playMusicButton.textContent = “Pause Music”;
}).catch(error => {
console.error(“Playback failed:”, error);
alert(“Failed to play music. There may be an issue with the selected audio source.”);
isPlaying = false;
playMusicButton.textContent = “Play Music”;
});
}
} else {
alert(“No music track selected.”);
}
});
pauseMusicButton.addEventListener(‘click’, () => {
if (isPlaying) {
audio.pause();
isPlaying = false;
playMusicButton.textContent = “Resume Music”;
}
});
resumeMusicButton.addEventListener(‘click’, () => {
if (!isPlaying) {
audio.play().then(() => {
isPlaying = true;
playMusicButton.textContent = “Pause Music”;
}).catch(error => {
console.error(“Playback failed:”, error);
alert(“Failed to resume music.”);
isPlaying = false;
playMusicButton.textContent = “Play Music”;
});
}
});
volumeControl.addEventListener(‘input’, () => {
audio.volume = volumeControl.value;
});
audio.addEventListener(‘ended’, () => {
isPlaying = false;
playMusicButton.textContent = “Play Music”;
});
</script>
</body>
</html>
Basking in comments that are helpful
Just a really great conversation and exchange of ideas in the comment area of this video on youtube:
InDesign Scripts (Including some that work for accessibility needs.)
a screenshot showing the menu navigation, Window -> Utilities -> Scripts from inside indesign.
Gilbert Consulting offers custom Adobe InDesign and Illustrator scripts to solve workflow issues. They provide 38 free scripts designed to automate tasks and enhance functionality within these programs. These scripts cover a range of functions, from adding hyperlinks and page buttons to analyzing documents and exporting files in various formats. Many scripts address specific formatting needs like table styles, accessibility checks, and image conversions. The scripts are frequently updated, and several are accompanied by blog posts or videos offering further instruction and context.
https://gilbertconsulting.com/scripts
I discovered these while taking the Advanced Accessible PDFs course on Linkedin by Chad Chelius.
Enjoy!
(more here – including a color contrast checker: https://accessibilityscripts.com/store/product-category/indesign/)
What a LaTeX file exported to html sounds like to a screen reader
This is the original image of a handwritten math formula that was dragged into ChatGPT 4o with the query:
“I’m going to give you another image to interpret. Please switch this out to html if you can.”
It gave me the html:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Quantum Equation</title>
<script type=”text/javascript” async
src=”https://polyfill.io/v3/polyfill.min.js?features=es6″>
</script>
<script type=”text/javascript” async
src=”https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js”>
</script>
</head>
<body>
<h2>Quantum Mechanics Equation</h2>
<p>
\[
\dot{C}_m(t) = -\frac{i}{\hbar} \sum_n C_n(t) e^{i \omega_{mn} t} \langle \psi_m | H_1 | \psi_n \rangle
\]
</p>
</body>
</html>
and when this is opened in a browser, it looks like this:
and SOUNDS like this in the screen reader:
Here is the transcript produced by notebooklm from the audio file:
“over C subscript M left parenthesis T right parenthesis equals minus fraction start I over H with stroke end of fraction and area summation with N underneath C subscript N left parenthesis T right parenthesis E superscript I subscript MN T mathematical left angle bracket subscript M vertical line H subscript one vertical line subscript N mathematical right angle bracket”