/* Any JavaScript here will be loaded for all users on every page load. */

if (document) window.µ = function (id, elem) {
var ret;
var root = ((elem) ? elem : document);
switch (id.charAt(0)) {
case '|':
ret = root;
break;
case '+':
ret = document.createElement(id.substring(1));
if (elem) elem.appendChild(ret);
break;
case '#':
ret = root.querySelector(id);
break;
default:
ret = Array.prototype.slice.call(root.querySelectorAll(id));
break;
}

return ret;
};

/* add additional edit button -- styled in Medik.css */
/* Takes them to visual editor if available/logged in; if not, takes them to normal edit mode; if they are not logged in at all, takes them to login page */
let editLinkQuery = document.querySelector("#ca-ve-edit a") ? "#ca-ve-edit a" : (document.querySelector("#ca-edit a") ? "#ca-edit a" : "#pt-login a");
document.getElementById("content").innerHTML += '<a href='+document.querySelector(editLinkQuery).href+'><button class="big-edit-button"><p>EDIT</p></button></a>';

/* like button. */
document.getElementById("content").innerHTML += '<a href=/wiki/index.php?title='+mw.config.get('wgPageName')+'&action=favorite>Like</a>';

/* looks at current url parameters of the form '?param1=value1&param2=value2...' and returns a dictionary of the form {param1: value1, param2: value2, ...} */
function parseUrlParameters() {
let queryStr = window.location.search.substring(1).replaceAll("%20", " "); // start string after the question mark and replace '%20' with spaces
let queryDict = {};
queryStr.split("&").forEach(function(query) {
let pair = query.split("=");
queryDict[pair[0]] = pair[1];
})
return queryDict;
}

// Gallery
mw.loader.using(['mediawiki.api', 'jquery'], function () {
$(document).ready(function () {
if (mw.config.get('wgPageName') !== 'GALLERY') return; // Ensure script runs only on the Gallery page

// get url parameters and automatically select appropriate filter
let queryDict = parseUrlParameters();
var category = queryDict['filter'] ? queryDict['filter'] : "Projects"; // If no filter query in url, use default category
var galleryContainer = $('#project-gallery');

galleryContainer.before('<div id="category-filter">' +
'<button id="all-filter-btn" class="filter-btn" data-filter="Projects">Show All</button>' +
'<button id="crafts-filter-btn" class="filter-btn" data-filter="Crafts">Crafts</button>' +
'<button id="design-filter-btn" class="filter-btn" data-filter="Design">Design</button>' +
'<button id="fabrication-filter-btn" class="filter-btn" data-filter="Fabrication">Fabrication</button>' +
'<button id="cnc-laser-filter-btn" class="filter-btn" data-filter="CNC-Laser">Laser & CNC</button>' +
'<button id="metalworking-filter-btn" class="filter-btn" data-filter="Metalworking">Metalworking</button>' +
'<button id="textiles-filter-btn" class="filter-btn" data-filter="Textiles">Textiles</button>' +
'</div>');

insertImage("File:Airbrushing_icon_color.png", "#fabrication-filter-btn", style="height:1.5em;padding-left:.4em");
insertImage("File:Button_icon_color.png", "#crafts-filter-btn", style="height:1.5em;padding-left:.4em");
insertImage("File:Cassette_icon_color.png", "#crafts-filter-btn", style="height:1.5em;padding-left:.4em");
insertImage("File:Crafting_icon_color.png", "#crafts-filter-btn", style="height:1.5em;padding-left:.4em");
insertImage("File:Graphic_icon_color.png", "#design-filter-btn", style="height:1.5em;padding-left:.4em");
insertImage("File:Handsewing_icon_color.png", "#textiles-filter-btn", style="height:1.5em;padding-left:.4em");
insertImage("File:Laser_icon_color.png", "#cnc-laser-filter-btn", style="height:1.5em;padding-left:.4em");
insertImage("File:Machining_icon_color.png", "#cnc-laser-filter-btn", style="height:1.5em;padding-left:.4em");
insertImage("File:Modeling_icon_color.png", "#design-filter-btn", style="height:1.5em;padding-left:.4em");
insertImage("File:Printing_icon_color.png", "#fabrication-filter-btn", style="height:1.5em;padding-left:.4em");
insertImage("File:Programming_icon_color.png", "#design-filter-btn", style="height:1.5em;padding-left:.4em");
insertImage("File:Soldering_icon_color.png", "#metalworking-filter-btn", style="height:1.5em;padding-left:.4em");
insertImage("File:Technical_icon_color.png", "#design-filter-btn", style="height:1.5em;padding-left:.4em");
insertImage("File:Textile_icon_color.png", "#textiles-filter-btn", style="height:1.5em;padding-left:.4em");
insertImage("File:Welding_icon_color.png", "#metalworking-filter-btn", style="height:1.5em;padding-left:.4em");
insertImage("File:Woodworking_icon_color.png", "#fabrication-filter-btn", style="height:1.5em;padding-left:.4em");

// load gallery based on category
function loadGallery(category) {
galleryContainer.html('<div class="gallery-container"></div>');

let pageTitles = [];
let categories = {
"Projects" : ["Projects"],
"Design" : ["Graphic Design", "3D Modeling", "Technical Design", "Programming"],
"Textiles" : ["Textiles", "Hand Sewing"],
"Crafts" : ["Crafting", "Button Pressing", "Cassette Making"],
"Fabrication" : ["Airbrushing", "3D Printing", "Woodworking"],
"CNC-Laser" : ["Laser Cutting", "Machining"],
"Metalworking" : ["Soldering", "Welding"]
};

categories[category].forEach(function(cat) {
new mw.Api().get({
action: 'query',
list: 'categorymembers',
cmtitle: 'Category:' + cat,
cmlimit: 50,
format: 'json'
}).done(function (data) {
var pages = data.query.categorymembers;
var galleryHtml = '';
var requests = pages.map(function (page) {
return new mw.Api().get({
action: 'query',
prop: 'revisions',
rvprop: 'content',
titles: page.title,
format: 'json'
}).then(function (pageData) {
var pageId = Object.keys(pageData.query.pages)[0];
var content = pageData.query.pages[pageId].revisions[0]['*'];
var pageUrl = mw.util.getUrl(page.title);
var imgUrl = '';

// Try to find a direct image URL (img1=https://...)
var directMatch = content.match(/img1=(https:\/\/[^\s|}%]+)/);
if (directMatch) {
imgUrl = directMatch[1];
}

// If no direct URL, try to find a [[File:...]] entry
var fileMatch = content.match(/\[\[File:([^|\]]+)/);
if (!imgUrl && fileMatch) {
var fileName = fileMatch[1].trim();

// Fetch full image URL from MediaWiki API
return new mw.Api().get({
action: 'query',
titles: 'File:' + fileName,
prop: 'imageinfo',
iiprop: 'url',
format: 'json'
}).then(function (imageData) {
var imagePageId = Object.keys(imageData.query.pages)[0];
if (imageData.query.pages[imagePageId].imageinfo) {
imgUrl = imageData.query.pages[imagePageId].imageinfo[0].url;
}

galleryHtml += generateGalleryItem(pageUrl, page.title, imgUrl, category);
});
} else {
// Add the gallery item if the image was found and is not already being shown
if(!pageTitles.includes(page.title)) {
galleryHtml += generateGalleryItem(pageUrl, page.title, imgUrl, category);
pageTitles.push(page.title);
}
}
});
});

Promise.all(requests).then(function () {
$('.gallery-container').append(galleryHtml);
});
});
});
}

// generate a gallery
function generateGalleryItem(pageUrl, title, imgUrl, category) {
return `
<div class="gallery-item ${category}">
<a href="${pageUrl}">
${imgUrl ? `<img src="${imgUrl}" alt="${title}">` : `<img src="https://upload.wikimedia.org/wikipedia/commons/6/65/No-Image-Placeholder.svg" alt="No Image Available">`}

</a>
<div class="gallery-caption">
<a href="${pageUrl}">${title}</a>
</div>
</div>
`;
}

loadGallery(category);
// find filter button corresponding to preselected category and add css class
$(".filter-btn").each(function () { $(this).data("filter") === category ? $(this).addClass('selected-filter') : null});

$(".filter-btn").click(function () {
var selectedCategory = $(this).data("filter");
loadGallery(selectedCategory);
$('.filter-btn.selected-filter').each((i, elem) => $(elem).removeClass('selected-filter'));
$(this).addClass('selected-filter');
});
});
});

// TOOLS Gallery
mw.loader.using(['mediawiki.api', 'jquery'], function () {
$(document).ready(function () {
if (mw.config.get('wgPageName') !== 'TOOLS') return; // Ensure script runs only on the TOOLS page

// get url parameters and automatically select appropriate filter
let queryDict = parseUrlParameters();
var category = queryDict['filter'] ? queryDict['filter'] : "Tools"; // If no filter query in url, use default category
var galleryContainer = $('#tools-gallery');

// Add filter buttons before the gallery
galleryContainer.before('<div id="category-filter">' +
'<button class="filter-btn" data-filter="Tools">Show All</button>' +
'<button class="filter-btn" data-filter="Makerspace Tools">Makerspace Tools</button>' +
'<button class="filter-btn" data-filter="Wood Shop Tools">Wood Shop Tools</button>' +
'<button class="filter-btn" data-filter="Machine Shop Tools">Machine Shop Tools</button>' +
'</div>');

function loadGallery(category) {
galleryContainer.html('<div class="gallery-container">Loading gallery...</div>');

new mw.Api().get({
action: 'query',
list: 'categorymembers',
cmtitle: 'Category:' + category,
cmlimit: 50,
format: 'json'
}).done(function (data) {
var pages = data.query.categorymembers;
var galleryHtml = '';

var requests = pages.map(function (page) {
return new mw.Api().get({
action: 'query',
prop: 'revisions',
rvprop: 'content',
titles: page.title,
format: 'json'
}).then(function (pageData) {
var pageId = Object.keys(pageData.query.pages)[0];
var content = pageData.query.pages[pageId].revisions[0]['*'];
var pageUrl = mw.util.getUrl(page.title);
var imgUrl = '';

// Try to find a [[File:...]] entry
var fileMatch = content.match(/\[\[File:([^|\]]+)/);
if (fileMatch) {
var fileName = fileMatch[1].trim();

// Fetch full image URL from MediaWiki API
return new mw.Api().get({
action: 'query',
titles: 'File:' + fileName,
prop: 'imageinfo',
iiprop: 'url',
format: 'json'
}).then(function (imageData) {
var imagePageId = Object.keys(imageData.query.pages)[0];
if (imageData.query.pages[imagePageId].imageinfo) {
imgUrl = imageData.query.pages[imagePageId].imageinfo[0].url;
}

// Add the gallery item
galleryHtml += generateGalleryItem(pageUrl, page.title, imgUrl, category);
});
} else {
// If no image is found, still display the title
galleryHtml += generateGalleryItem(pageUrl, page.title, imgUrl, category);
}
});
});

Promise.all(requests).then(function () {
// Append gallery items after loading them
galleryContainer.html('<div class="gallery-container">' + galleryHtml + '</div>');
});
});
}

function generateGalleryItem(pageUrl, title, imgUrl, category) {
return `
<div class="gallery-item ${category}">
<a href="${pageUrl}">
${imgUrl ? `<img src="${imgUrl}" alt="${title}">` : `<img src="https://upload.wikimedia.org/wikipedia/commons/6/65/No-Image-Placeholder.svg" alt="No Image Available">`}

</a>
<div class="gallery-caption">
<a href="${pageUrl}">${title}</a>
</div>
</div>
`;
}

loadGallery(category);
// find filter button corresponding to preselected category and add css class
$(".filter-btn").each(function () { $(this).data("filter") === category ? $(this).addClass('selected-filter') : null});

$(".filter-btn").click(function () {
var selectedCategory = $(this).data("filter");
loadGallery(selectedCategory);
$('.filter-btn.selected-filter').each((i, elem) => $(elem).removeClass('selected-filter'));
$(this).addClass('selected-filter');
});
});
});

//CAROUSEL
function loadCarouselData() {
// Make the API query to fetch pages for carousel
var category = "SimpleProjects";
var carouselData = [];

new mw.Api().get({
action: 'query',
list: 'categorymembers',
cmtitle: 'Category:' + category,
cmlimit: 50,
format: 'json'
}).done(function (data) {
var pages = data.query.categorymembers;

var requests = pages.map(function (page) {
return new mw.Api().get({
action: 'query',
prop: 'revisions',
rvprop: 'content',
titles: page.title,
format: 'json'
}).then(function (pageData) {
var pageId = Object.keys(pageData.query.pages)[0];
var content = pageData.query.pages[pageId].revisions[0]['*'];
var pageUrl = mw.util.getUrl(page.title);
var imgUrl = '';

// Try to find a direct image URL (img1=https://...)
var directMatch = content.match(/img1=(https:\/\/[^\s|}%]+)/);
if (directMatch) {
imgUrl = directMatch[1];
}

// If no direct URL, try to find a [[File:...]] entry
var fileMatch = content.match(/\[\[File:([^|\]]+)/);
if (!imgUrl && fileMatch) {
var fileName = fileMatch[1].trim();

// Fetch full image URL from MediaWiki API
return new mw.Api().get({
action: 'query',
titles: 'File:' + fileName,
prop: 'imageinfo',
iiprop: 'url',
format: 'json'
}).then(function (imageData) {
var imagePageId = Object.keys(imageData.query.pages)[0];
if (imageData.query.pages[imagePageId].imageinfo) {
imgUrl = imageData.query.pages[imagePageId].imageinfo[0].url;
}

// Store carousel item data
if (imgUrl) {
carouselData.push({ pageUrl: pageUrl, imgUrl: imgUrl, title: page.title });
}
});
} else {
// Store carousel item data
if (imgUrl) {
carouselData.push({ pageUrl: pageUrl, imgUrl: imgUrl, title: page.title });
}
}
});
});

Promise.all(requests).then(function () {
// Call the function to display carousel
displayCarousel(carouselData);
});
});
}

function displayCarousel(carouselData) {
var carouselHtml = '';

carouselData.forEach(function (item) {
carouselHtml += `
<div class="carousel-item">
<a href="${item.pageUrl}">
<img src="${item.imgUrl}" alt="Carousel Image">
</a>
<div class="carousel-title">${item.title}</div>
</div>
`;
});

// Inject the HTML into the carousel container
var carouselContainer = $('.carousel-container');
carouselContainer.html(carouselHtml);

// Initialize the carousel behavior
initializeCarousel();
}

function initializeCarousel() {
let currentIndex = 0;
let $carouselItems = $(".carousel-item");
let totalItems = $carouselItems.length;

$carouselItems.hide().eq(currentIndex).show();

let $prevButton = $('<button class="carousel-prev"> ◀ </button>');
let $nextButton = $('<button class="carousel-next"> ▶ </button>');
$('.carousel-container').append($prevButton, $nextButton);

function nextSlide() {
currentIndex = (currentIndex + 1) % totalItems;
updateCarousel();
}

function resetInterval() {
clearInterval(autoSlide);
interval = setInterval(nextSlide, 10000);
}

let autoSlide = setInterval(nextSlide, 10000); //auto slide every 10 seconds

$nextButton.click(function () {
nextSlide();
resetInterval();
});

$prevButton.click(function () {
currentIndex = (currentIndex - 1 + totalItems) % totalItems;
updateCarousel();
resetInterval();
});

function updateCarousel () {
$carouselItems.hide().eq(currentIndex).show();
}
}

$(document).ready(function () {
loadCarouselData(); // Load the carousel data on page load
});

// if page is part of a category, insert any corresponding skill badges (individual project pages)
if(document.getElementById("catlinks") != null) {
document.querySelectorAll("#catlinks li a").forEach((cat) => {
let query = "#firstHeading";
if(cat.title.includes("Category:Airbrushing")) {
insertImage('File:Airbrushing_badge_small.png', query, "padding-left:.3em;", "Fabrication", true, "Airbrushing");
}
if(cat.title.includes("Category:Button Pressing")) {
insertImage('File:Button_badge_small.png', query, "padding-left:.3em;", "Crafts", true, "Button Pressing");
}
if(cat.title.includes("Category:Cassette Making")) {
insertImage('File:Cassette_badge_small.png', query, "padding-left:.3em;", "Crafts", true, "Cassette Making");
}
if(cat.title.includes("Category:Crafting")) {
insertImage('File:Crafting_badge_small.png', query, "padding-left:.3em;", "Crafts", true, "Crafting");
}
if(cat.title.includes("Category:Graphic Design")) {
insertImage('File:Graphic_badge_small.png', query, "padding-left:.3em;", "Design", true, "Graphic Design");
}
if(cat.title.includes("Category:Hand Sewing")) {
insertImage('File:Handsewing_badge_small.png', query, "padding-left:.3em;", "Textiles", true, "Hand Sewing");
}
if(cat.title.includes("Category:Laser Cutting")) {
insertImage('File:Laser_badge_small.png', query, "padding-left:.3em;", "CNC-Laser", true, "Laser Cutting");
}
if(cat.title.includes("Category:Machining")) {
insertImage('File:Machining_badge_small.png', query, "padding-left:.3em;", "CNC-Laser", true, "Machining");
}
if(cat.title.includes("Category:3D Modeling")) {
insertImage('File:Modeling_badge_small.png', query, "padding-left:.3em;", "Design", true, "3D Modeling");
}
if(cat.title.includes("Category:3D Printing")) {
insertImage('File:Printing_badge_small.png', query, "padding-left:.3em;", "Fabrication", true, "3D Printing");
}
if(cat.title.includes("Category:Programming")) {
insertImage('File:Programming_badge_small.png', query, "padding-left:.3em;", "Design", true, "Programming");
}
if(cat.title.includes("Category:Soldering")) {
insertImage('File:Soldering_badge_small.png', query, "padding-left:.3em;", "Metalworking", true, "Soldering");
}
if(cat.title.includes("Category:Technical Design")) {
insertImage('File:Technical_badge_small.png', query, "padding-left:.3em;", "Design", true, "Technical Design");
}
if(cat.title.includes("Category:Textiles")) {
insertImage('File:Textile_badge_small.png', query, "padding-left:.3em;", "Textiles", true, "Textiles");
}
if(cat.title.includes("Category:Welding")) {
insertImage('File:Welding_badge_small.png', query, "padding-left:.3em;", "Metalworking", true, "Welding");
}
if(cat.title.includes("Category:Woodworking")) {
insertImage('File:Woodworking_badge_small.png', query, "padding-left:.3em;", "Fabrication", true, "Woodworking");
}
})
}

// inserts image at given selector element in html, using image in mediawiki format (eg [[File:filename...]])
// if asLinkedSkillBadge is true, styles as skill badge
function insertImage(image, selector, style="", linkFilter="", asLinkedSkillBadge=false, tooltip=image) {
$.getJSON(
mw.util.wikiScript( 'api' ), {
format: 'json',
action: 'query',
titles: image,
prop: 'imageinfo',
iiprop: 'url'
},
function( obj ) {
let pages = obj.query.pages;
let result1 = pages[Object.keys(pages)[0]];
let url = result1.imageinfo[0].url;
let alt = result1.title; // set alt text to image title
let urlSub = url.substring(url.indexOf("/wiki"));
if(asLinkedSkillBadge) {
document.querySelector(selector).innerHTML += '<a href="./GALLERY?title=GALLERY&filter='+linkFilter+'" title="'+tooltip+'"><img class="skill-badge-img" src="'+urlSub+'" alt="'+alt+'" style="'+style+'"></a>';
}
else {
document.querySelector(selector).innerHTML += '<img src="'+urlSub+'" alt="'+alt+'" style="'+style+'">';
}
}
);
}

// open any <a> wrapped in <u class="plainlinks"> in same tab (generally internal links that must be treated as external links in order to give url parameters)
$('u.plainlinks a').each(function() { $(this).attr('target', "_self")});

User:TCGmaker

2025-02-19T16:29:48Z

TCGmaker: Created page with "<favorites/>"

Building a Transistor Theremin (Project 0043)

2025-02-17T18:56:05Z

TCGmaker: /* Project Overview */

<small>by Mia David </small>
-----
__NOTOC__
{{DISPLAYTITLE:Building a Transistor Theremin}}
[[Category:Projects|Building a Transistor Theremin]]

<div class='overview'>

== Project Overview ==

This project includes instructions for the construction of a transistor based theremin, a simple electronic musical instrument. The theremin takes a constant DC signal as input and returns a clean sine wave (amplified and sent through a speaker to create a tone) as output; the frequency of the output audio signal is adjusted via a variable capacitor consisting of a control antenna and the performer’s hand. This particular design uses the Colpitts oscillator configuration to generate the oscillating output signal, which makes use of simple components including a bipolar junction transistor, a few capacitors, and an off-the-shelf inductor.

The basic functioning blocks of the theremin include a reference oscillator (which outputs a constant frequency), a pitch oscillator (the frequency of this output signal is controlled by the variable capacitor formed by the player’s hand and the wire), a mixer to combine the two signals, filtering to eliminate unwanted frequencies, amplification of the signal, and finally the loudspeaker.

{{#widget:gallery|img1=https://drive.google.com/thumbnail?id=1r7h1214gnzyWdB_TSr6vYhMRLfE7i75n&sz=w1000|img2=null|img3=null|img4=null|img5=null|num=2}}

</div>

== Tools and Materials ==
* - 4.7 nF capacitors (5)
* - 0.01 μF capacitors (2)
* - 680 pF capacitors (2)
* - 220 pF capacitor (1)
* - 260 pF capacitor (1)
* - 15 pF capacitors (2) — these replace the trimmer capacitors C15 and C25 in the schematic
* - 39 pF capacitors (2)
* - 100 pF capacitors (2)
* - 8.2 pF capacitor (1)
* - 0.22 μF capacitor (1)
* - 1000 μF capacitor (1)
* - 100 Ω resistors (2)
* - 9.2 kΩ resistors (2)
* - 3.3 kΩ resistors (2)
* - 390 Ω resistors (2)
* - 4.7 kΩ resistors (2)
* - 20 kΩ resistors (6)
* - 470 kΩ resistors (2)
* - 2.2 MΩ resistor (1)
* - 10 kΩ resistor (1)
* - 2N2222 npn transistors (2)
* - 1N5711 schottky diodes (1)
* - LM741 op amp (1)
* - LM386 low voltage audio power amplifier (1)
* - 8 Ω speaker
* - 530 μH inductors (2)
* - tinned copper wire, 16 AWG (~ 15cm) for pitch antenna
* - prototype board or breadboard (1)
* - DC power supply (or built-in power supply if using prototype board)
* - Oscilloscope
* - Multimeter for testing

<div class="files">

== Project Files==
* [https://drive.google.com/open?id=1NJoxoj1AFTFkFcVyzx0dQPT_L9oI4aZ- oscillator-osc14 - Mia David.gif]
* [https://drive.google.com/open?id=1JF0Lt7IGCvpWuMtZre63kqMT0rv-DQrp oscillator-osc15 - Mia David.gif]
</div>

<div class='sxs'>
== Step-by-Step Instructions ==

{{#widget:ProjectStep|inst=Begin by constructing the circuit for the reference oscillator. Trimmer capacitor C15 can be replaced by a standard capacitor in the specified range (15-60 pF). Once the circuit is constructed and connected to power, use the multimeter to check the voltage at the base of the transistor; this should be at around 1.9 V, which puts the 2N2222 transistor into saturation mode (any voltages between 1.2V-2.0V will work, if the resistors in the voltage divider need to be adjusted). Check the output using the oscilloscope probe at the point specified on the schematic; frequency of the oscillating signal can be calculated using the included formulas, which only require the values of the components in the “tank circuit” (highlighted on the schematic). The values for the components in the tank circuit in the schematic should yield an output signal with a frequency around 536 kHz.|src=17fyZd5EtYffCYVLM-0Aah0Ws7S0e4YHg|show=img}}
{{#widget:ProjectStep|inst=Build the pitch oscillator. For initial testing purposes, I would recommend adding a regular capacitor in place of the pitch antenna to make sure that the circuit behaves as expected; after the rest of the circuit is finished, replace that capacitor with the tinned copper wire which acts as the pitch antenna. The construction of the pitch oscillator should be very similar to the reference oscillator other than the additional capacitor; depending on the capacitor you choose, the output frequency will differ. As with the reference oscillator, I would check the voltage at the base of the transistor to make sure it is in saturation mode.|src=1RtGmIbb2wmPDk7KAwCegRgE2vJquol9O|show=img}}
{{#widget:ProjectStep|inst=Build the mixer. This consists of the schottky diode, a very large resistor, and a capacitor. Note that between the oscillators and the mixer are a couple of resistors and capacitors, which are intended to decouple the oscillators from the mixer. Measure output before C2 using the oscilloscope to confirm you are getting a new frequency.|src=1K3ypZGGYhfCLrb-tNfMrlwIp7B9MDwm7|show=img}}
{{#widget:ProjectStep|inst=Construct the remainder of the circuit. Before adding the speaker, measure the signal at the output of the audio amplifier to confirm it is a clean sine wave. Add the speaker. Depending on the capacitance of the capacitor substituted for the pitch antenna, the frequency of the tone will be different. Assuming that an audio signal is being produced, now replace the substitute capacitor for the wire used for the antenna. Move your hand closer and further from the antenna to observe how the pitch changes. At this point, you can try switching out the capacitors or inductor in the tank circuit for both oscillators to see how the audio output signal changes.|src=1NUwWlgCbj3zP-XraEeV-51uhJVgpVV8o|show=img}}

</div>
[[Category:Programming]]
[[Category:Technical design]]

DIY Chipmunk (Project 0004)

2025-02-17T15:07:13Z

TCGmaker:

<small>by Turn a Glove Into A Chipmunk!</small>
-----
__NOTOC__
{{DISPLAYTITLE:DIY Chipmunk}}
[[Category:Projects|DIY Chipmunk]]

<div class='overview'>

== Project Overview ==

Have you ever wanted to make a little stuffed animal, but never knew how? Well today is your lucky day because this project will show you how to turn any normal glove into a fun little chipmunk (no machine sewing required)!! Created By:(https://www.boredpanda.com/diy-glove-into-chipmunk/?utm_source=google&utm_medium=organic&utm_campaign=organic)

{{#widget:gallery|img1=https://drive.google.com/thumbnail?id=1RnA476qswLwlYP8-IKNdC5f-7fTIy8N2&sz=w1000|img2=https://drive.google.com/thumbnail?id=1kjiY2KKYpR30swaU5s3Rv7dFJmBlh6QP&sz=w1000|img3=null|img4=null|img5=null|num=3}}

</div>

== Tools and Materials ==
* Thread (Yarn optional)
* Stuffing
* Buttons
* Glove
* Scissors
* Pen
* Pipe Cleaners (optional)

<div class="files">

== Project Files==
</div>

<div class='sxs'>
== Step-by-Step Instructions ==

{{#widget:ProjectStep|inst=Flip the glove inside out and using a pen, draw the diagram. Then pin along the lines and cut, making sure the fabric does not fray. Sew along the white lines, leaving just enough room around the edges to ensure the fabric doesn't unravel and leave large holes in the seams. |src=1hmQfDPIU4sHq3H0PrBJtXF8u9PLJt3WU|show=img}}
{{#widget:ProjectStep|inst=Once you've sewn all the pieces together, turn them all right-side out. Stuff each piece with stuffing, except for the ears, and make sure you leave a little room at the top of each piece to allow for stitching. (Optional: before stuffing, place pipe cleaner pieces in the legs and tail to allow for a custom shape.)|show=none|src=none}}
{{#widget:ProjectStep|inst=Stitch the open side of the arms and tail. Then at the open side of the head piece, fold the two sides together and while holding the that in, bring the bottom to the center and then the top (like gift wrapping) . Sew the top flap down and make sure the folds are solidly in place. This should create two little pockets in the top right and left corners. fold the ears in half only at the bottom and sew the bottom half of an ear and a pocket at the back of the head together. repeat with other ear.|src=1B33hCo4ZGYn2DyWgSwjqalp9Cx00KtkM|show=img}}
{{#widget:ProjectStep|inst=Sew the head, arms, and tail onto the body|show=none|src=none}}
{{#widget:ProjectStep|inst=To complete, use thread or buttons to create eyes at the side of the head and a little nose at the tip. Then your little friend is complete.|show=none|src=none}}

</div>
[[Category:Crafting]]
[[Category:Hand Sewing]]
[[Category:Textiles]]

DIY Chipmunk (Project 0004)

2025-02-17T15:06:21Z

TCGmaker:

<small>by Turn a Glove Into A Chipmunk!</small>
-----
__NOTOC__
{{DISPLAYTITLE:DIY Chipmunk}}
[[Category:Projects|DIY Chipmunk]]

<div class='overview'>

== Project Overview ==

Have you ever wanted to make a little stuffed animal, but never knew how? Well today is your lucky day because this project will show you how to turn any normal glove into a fun little chipmunk (no machine sewing required)!! Created By:(https://www.boredpanda.com/diy-glove-into-chipmunk/?utm_source=google&utm_medium=organic&utm_campaign=organic)

{{#widget:gallery|img1=https://drive.google.com/thumbnail?id=1RnA476qswLwlYP8-IKNdC5f-7fTIy8N2&sz=w1000|img2=https://drive.google.com/thumbnail?id=1kjiY2KKYpR30swaU5s3Rv7dFJmBlh6QP&sz=w1000|img3=null|img4=null|img5=null|num=2}}

</div>

== Tools and Materials ==
* Thread (Yarn optional)
* Stuffing
* Buttons
* Glove
* Scissors
* Pen
* Pipe Cleaners (optional)

<div class="files">

== Project Files==
</div>

<div class='sxs'>
== Step-by-Step Instructions ==

{{#widget:ProjectStep|inst=Flip the glove inside out and using a pen, draw the diagram. Then pin along the lines and cut, making sure the fabric does not fray. Sew along the white lines, leaving just enough room around the edges to ensure the fabric doesn't unravel and leave large holes in the seams. |src=1hmQfDPIU4sHq3H0PrBJtXF8u9PLJt3WU|show=img}}
{{#widget:ProjectStep|inst=Once you've sewn all the pieces together, turn them all right-side out. Stuff each piece with stuffing, except for the ears, and make sure you leave a little room at the top of each piece to allow for stitching. (Optional: before stuffing, place pipe cleaner pieces in the legs and tail to allow for a custom shape.)|show=none|src=none}}
{{#widget:ProjectStep|inst=Stitch the open side of the arms and tail. Then at the open side of the head piece, fold the two sides together and while holding the that in, bring the bottom to the center and then the top (like gift wrapping) . Sew the top flap down and make sure the folds are solidly in place. This should create two little pockets in the top right and left corners. fold the ears in half only at the bottom and sew the bottom half of an ear and a pocket at the back of the head together. repeat with other ear.|src=1B33hCo4ZGYn2DyWgSwjqalp9Cx00KtkM|show=img}}
{{#widget:ProjectStep|inst=Sew the head, arms, and tail onto the body|show=none|src=none}}
{{#widget:ProjectStep|inst=To complete, use thread or buttons to create eyes at the side of the head and a little nose at the tip. Then your little friend is complete.|show=none|src=none}}

</div>
[[Category:Crafting]]
[[Category:Hand Sewing]]
[[Category:Textiles]]

MediaWiki:Common.js

2025-02-17T14:45:47Z

TCGmaker:

MediaWiki:Common.js

2025-02-14T20:13:07Z

TCGmaker:

/* Any JavaScript here will be loaded for all users on every page load. */
// browser.opaqueResponseBlocking.javascriptValidator = false;
if (document) window.µ = function (id, elem) {
var ret;
var root = ((elem) ? elem : document);
switch (id.charAt(0)) {
case '|':
ret = root;
break;
case '+':
ret = document.createElement(id.substring(1));
if (elem) elem.appendChild(ret);
break;
case '#':
ret = root.querySelector(id);
break;
default:
ret = Array.prototype.slice.call(root.querySelectorAll(id));
break;
}

return ret;
};

/* add additional edit button (prioritize 'Edit' over 'Edit Source' when available) -- styled in Medik.css */
if(document.getElementById("ca-edit") != null || document.getElementById("ca-ve-edit") != null) {
let link = document.getElementById("ca-ve-edit") != null ? document.querySelector("#ca-ve-edit a").href : document.querySelector("#ca-edit a").href;
document.getElementById("content").innerHTML += '<a href='+link+'><button class="big-edit-button"><p>EDIT</p></button></a>';
}

// Gallery
mw.loader.using(['mediawiki.api', 'jquery'], function () {
$(document).ready(function () {
if (mw.config.get('wgPageName') !== 'GALLERY') return; // Ensure script runs only on the Gallery page

var category = "Projects"; // Default category
var galleryContainer = $('#project-gallery');

galleryContainer.before('<div id="category-filter">' +
'<button class="filter-btn" data-filter="Projects">Show All</button>' +
'<button class="filter-btn" data-filter="Textiles">Textiles</button>' +
'<button class="filter-btn" data-filter="Crafting">Crafting</button>' +
'<button class="filter-btn" data-filter="Airbrushing">Airbrushing</button>' +
'<button class="filter-btn" data-filter="Button Pressing">Button Pressing</button>' +
'<button class="filter-btn" data-filter="Cassette Making">Cassette Making</button>' +
'<button class="filter-btn" data-filter="Graphic Design">Graphic Design</button>' +
'<button class="filter-btn" data-filter="Hand Sewing">Hand Sewing</button>' +
'<button class="filter-btn" data-filter="Laser Cutting">Laser Cutting</button>' +
'<button class="filter-btn" data-filter="Machining">Machining</button>' +
'<button class="filter-btn" data-filter="3D Modeling">3D Modeling</button>' +
'<button class="filter-btn" data-filter="3D Printing">3D Printing</button>' +
'<button class="filter-btn" data-filter="Programming">Programming</button>' +
'<button class="filter-btn" data-filter="Soldering">Soldering</button>' +
'<button class="filter-btn" data-filter="Technical Design">Technical Design</button>' +
'<button class="filter-btn" data-filter="Welding">Welding</button>' +
'<button class="filter-btn" data-filter="Woodworking">Woodworking</button>' +
'</div>');

// load gallery based on category
function loadGallery(category) {
galleryContainer.html('<div class="gallery-container">Loading gallery...</div>');

new mw.Api().get({
action: 'query',
list: 'categorymembers',
cmtitle: 'Category:' + category,
cmlimit: 50,
format: 'json'
}).done(function (data) {
var pages = data.query.categorymembers;
var galleryHtml = '';

var requests = pages.map(function (page) {
return new mw.Api().get({
action: 'query',
prop: 'revisions',
rvprop: 'content',
titles: page.title,
format: 'json'
}).then(function (pageData) {
var pageId = Object.keys(pageData.query.pages)[0];
var content = pageData.query.pages[pageId].revisions[0]['*'];
var pageUrl = mw.util.getUrl(page.title);
var imgUrl = '';

// Try to find a direct image URL (img1=https://...)
var directMatch = content.match(/img1=(https:\/\/[^\n|}%s]+)/);
if (directMatch) {
imgUrl = directMatch[1];
}

// If no direct URL, try to find a [[File:...]] entry
var fileMatch = content.match(/\[\[File:([^|\]]+)/);
if (!imgUrl && fileMatch) {
var fileName = fileMatch[1].trim();

// Fetch full image URL from MediaWiki API
return new mw.Api().get({
action: 'query',
titles: 'File:' + fileName,
prop: 'imageinfo',
iiprop: 'url',
format: 'json'
}).then(function (imageData) {
var imagePageId = Object.keys(imageData.query.pages)[0];
if (imageData.query.pages[imagePageId].imageinfo) {
imgUrl = imageData.query.pages[imagePageId].imageinfo[0].url;
}

galleryHtml += generateGalleryItem(pageUrl, page.title, imgUrl, category);
});
} else {
// Add the gallery item if the image was found
galleryHtml += generateGalleryItem(pageUrl, page.title, imgUrl, category);
}
});
});

Promise.all(requests).then(function () {

galleryContainer.html('<div class="gallery-container">' + galleryHtml + '</div>');
});
});
}

// generate a gallery
function generateGalleryItem(pageUrl, title, imgUrl, category) {
return `
<div class="gallery-item ${category}">
<a href="${pageUrl}">
${imgUrl ? `<img src="${imgUrl}" alt="${title}">` : '<div class="no-image">No Image Available</div>'}
</a>
<div class="gallery-caption">
<a href="${pageUrl}">${title}</a>
</div>
</div>
`;
}

loadGallery("Projects");

$(".filter-btn").click(function () {
var selectedCategory = $(this).data("filter");
loadGallery(selectedCategory);
});
});
});

// TOOLS Gallery
mw.loader.using(['mediawiki.api', 'jquery'], function () {
$(document).ready(function () {
if (mw.config.get('wgPageName') !== 'TOOLS') return; // Ensure script runs only on the TOOLS page

var category = "Tools"; // Default category
var galleryContainer = $('#tools-gallery');

// Add filter buttons before the gallery
galleryContainer.before('<div id="category-filter">' +
'<button class="filter-btn" data-filter="Tools">Show All</button>' +
'<button class="filter-btn" data-filter="Makerspace Tools">Makerspace Tools</button>' +
'<button class="filter-btn" data-filter="Wood Shop Tools">Wood Shop Tools</button>' +
'<button class="filter-btn" data-filter="Machine Shop Tools">Machine Shop Tools</button>' +
'</div>');

function loadGallery(category) {
galleryContainer.html('<div class="gallery-container">Loading gallery...</div>');

new mw.Api().get({
action: 'query',
list: 'categorymembers',
cmtitle: 'Category:' + category,
cmlimit: 50,
format: 'json'
}).done(function (data) {
var pages = data.query.categorymembers;
var galleryHtml = '';

var requests = pages.map(function (page) {
return new mw.Api().get({
action: 'query',
prop: 'revisions',
rvprop: 'content',
titles: page.title,
format: 'json'
}).then(function (pageData) {
var pageId = Object.keys(pageData.query.pages)[0];
var content = pageData.query.pages[pageId].revisions[0]['*'];
var pageUrl = mw.util.getUrl(page.title);
var imgUrl = '';

// Try to find a [[File:...]] entry
var fileMatch = content.match(/\[\[File:([^|\]]+)/);
if (fileMatch) {
var fileName = fileMatch[1].trim();

// Fetch full image URL from MediaWiki API
return new mw.Api().get({
action: 'query',
titles: 'File:' + fileName,
prop: 'imageinfo',
iiprop: 'url',
format: 'json'
}).then(function (imageData) {
var imagePageId = Object.keys(imageData.query.pages)[0];
if (imageData.query.pages[imagePageId].imageinfo) {
imgUrl = imageData.query.pages[imagePageId].imageinfo[0].url;
}

// Add the gallery item
galleryHtml += generateGalleryItem(pageUrl, page.title, imgUrl, category);
});
} else {
// If no image is found, still display the title
galleryHtml += generateGalleryItem(pageUrl, page.title, imgUrl, category);
}
});
});

Promise.all(requests).then(function () {
// Append gallery items after loading them
galleryContainer.html('<div class="gallery-container">' + galleryHtml + '</div>');
});
});
}

function generateGalleryItem(pageUrl, title, imgUrl, category) {
return `
<div class="gallery-item ${category}">
<a href="${pageUrl}">
${imgUrl ? `<img src="${imgUrl}" alt="${title}">` : '<div class="no-image">No Image Available</div>'}
</a>
<div class="gallery-caption">
<a href="${pageUrl}">${title}</a>
</div>
</div>
`;
}

loadGallery("Tools");

$(".filter-btn").click(function () {
var selectedCategory = $(this).data("filter");
loadGallery(selectedCategory);
});
});
});

//CAROUSEL
function loadCarouselData() {
// Make the API query to fetch pages for carousel
var category = "Projects";
var carouselData = [];

new mw.Api().get({
action: 'query',
list: 'categorymembers',
cmtitle: 'Category:' + category,
cmlimit: 50,
format: 'json'
}).done(function (data) {
var pages = data.query.categorymembers;

var requests = pages.map(function (page) {
return new mw.Api().get({
action: 'query',
prop: 'revisions',
rvprop: 'content',
titles: page.title,
format: 'json'
}).then(function (pageData) {
var pageId = Object.keys(pageData.query.pages)[0];
var content = pageData.query.pages[pageId].revisions[0]['*'];
var pageUrl = mw.util.getUrl(page.title);
var imgUrl = '';

// Try to find a direct image URL (img1=https://...)
var directMatch = content.match(/img1=(https:\/\/[^\n|}%s]+)/);
if (directMatch) {
imgUrl = directMatch[1];
}

// If no direct URL, try to find a [[File:...]] entry
var fileMatch = content.match(/\[\[File:([^|\]]+)/);
if (!imgUrl && fileMatch) {
var fileName = fileMatch[1].trim();

// Fetch full image URL from MediaWiki API
return new mw.Api().get({
action: 'query',
titles: 'File:' + fileName,
prop: 'imageinfo',
iiprop: 'url',
format: 'json'
}).then(function (imageData) {
var imagePageId = Object.keys(imageData.query.pages)[0];
if (imageData.query.pages[imagePageId].imageinfo) {
imgUrl = imageData.query.pages[imagePageId].imageinfo[0].url;
}

// Store carousel item data
if (imgUrl) {
carouselData.push({ pageUrl: pageUrl, imgUrl: imgUrl, title: page.title });
}
});
} else {
// Store carousel item data
if (imgUrl) {
carouselData.push({ pageUrl: pageUrl, imgUrl: imgUrl, title: page.title });
}
}
});
});

Promise.all(requests).then(function () {
// Call the function to display carousel
displayCarousel(carouselData);
});
});
}

function displayCarousel(carouselData) {
var carouselHtml = '';

carouselData.forEach(function (item) {
carouselHtml += `
<div class="carousel-item">
<a href="${item.pageUrl}">
<img src="${item.imgUrl}" alt="Carousel Image">
</a>
<div class="carousel-title">${item.title}</div>
</div>
`;
});

// Inject the HTML into the carousel container
var carouselContainer = $('.carousel-container');
carouselContainer.html(carouselHtml);

// Initialize the carousel behavior
initializeCarousel();
}

function initializeCarousel() {
let currentIndex = 0;
let $carouselItems = $(".carousel-item");
let totalItems = $carouselItems.length;

$carouselItems.hide().eq(currentIndex).show();

let $prevButton = $('<button class="carousel-prev"> ◀ </button>');
let $nextButton = $('<button class="carousel-next"> ▶ </button>');
$('.carousel-container').append($prevButton, $nextButton);

$nextButton.click(function () {
currentIndex = (currentIndex + 1) % totalItems;
updateCarousel();
});

$prevButton.click(function () {
currentIndex = (currentIndex - 1 + totalItems) % totalItems;
updateCarousel();
});

function updateCarousel() {
$carouselItems.hide().eq(currentIndex).show();
}
}

$(document).ready(function () {
loadCarouselData(); // Load the carousel data on page load
});

// if page is part of a category, insert any corresponding skill badges (individual project pages)
if(document.getElementById("catlinks") != null) {
document.querySelectorAll("#catlinks li a").forEach((cat) => {
let query = "#firstHeading";
if(cat.title.includes("Category:Textiles")) {
insertSkillBadgeLink('File:Textile_badge_small.png', query);
}
if(cat.title.includes("Category:Crafting")) {
insertSkillBadgeLink('File:Crafting_badge_small.png', query);
}
if(cat.title.includes("Category:Airbrushing")) {
insertSkillBadgeLink('File:Airbrushing_badge_small.png', query);
}
if(cat.title.includes("Category:Button Pressing")) {
insertSkillBadgeLink('File:Button_badge_small.png', query);
}
if(cat.title.includes("Category:Cassette Making")) {
insertSkillBadgeLink('File:Cassette_badge_small.png', query);
}
if(cat.title.includes("Category:Graphic Design")) {
insertSkillBadgeLink('File:Graphic_badge_small.png', query);
}
if(cat.title.includes("Category:Hand Sewing")) {
insertSkillBadgeLink('File:Handsewing_badge_small.png', query);
}
if(cat.title.includes("Category:Laser Cutting")) {
insertSkillBadgeLink('File:Laser_badge_small.png', query);
}
if(cat.title.includes("Category:Machining")) {
insertSkillBadgeLink('File:Machining_badge_small.png', query);
}
if(cat.title.includes("Category:3D Modeling")) {
insertSkillBadgeLink('File:Modeling_badge_small.png', query);
}
if(cat.title.includes("Category:3D Printing")) {
insertSkillBadgeLink('File:Printing_badge_small.png', query);
}
if(cat.title.includes("Category:Programming")) {
insertSkillBadgeLink('File:Programming_badge_small.png', query);
}
if(cat.title.includes("Category:Soldering")) {
insertSkillBadgeLink('File:Soldering_badge_small.png', query);
}
if(cat.title.includes("Category:Technical design")) {
insertSkillBadgeLink('File:Technical_badge_small.png', query);
}
if(cat.title.includes("Category:Welding")) {
insertSkillBadgeLink('File:Welding_badge_small.png', query);
}
if(cat.title.includes("Category:Woodworking")) {
insertSkillBadgeLink('File:Woodworking_badge_small.png', query);
}
})
}

// inserts image at given selector element in html, using image in mediawiki format (eg [[File:filename...]])
function insertSkillBadgeLink(image, selector) {
$.getJSON(
mw.util.wikiScript( 'api' ), {
format: 'json',
action: 'query',
titles: image,
prop: 'imageinfo',
iiprop: 'url'
},
function( obj ) {
let pages = obj.query.pages;
let result1 = pages[Object.keys(pages)[0]];
let url = result1.imageinfo[0].url;
let alt = result1.title; // set alt text to image title
let urlSub = url.substring(url.indexOf("/wiki"));
document.querySelector(selector).innerHTML += '<img src="'+urlSub+'" alt="'+alt+'" width="50px" style="padding-left:.3em">';
}
);
}

MediaWiki:Common.js

2025-02-14T20:10:16Z

TCGmaker:

/* Any JavaScript here will be loaded for all users on every page load. */
browser.opaqueResponseBlocking.javascriptValidator = false;
if (document) window.µ = function (id, elem) {
var ret;
var root = ((elem) ? elem : document);
switch (id.charAt(0)) {
case '|':
ret = root;
break;
case '+':
ret = document.createElement(id.substring(1));
if (elem) elem.appendChild(ret);
break;
case '#':
ret = root.querySelector(id);
break;
default:
ret = Array.prototype.slice.call(root.querySelectorAll(id));
break;
}

return ret;
};

/* add additional edit button (prioritize 'Edit' over 'Edit Source' when available) -- styled in Medik.css */
if(document.getElementById("ca-edit") != null || document.getElementById("ca-ve-edit") != null) {
let link = document.getElementById("ca-ve-edit") != null ? document.querySelector("#ca-ve-edit a").href : document.querySelector("#ca-edit a").href;
document.getElementById("content").innerHTML += '<a href='+link+'><button class="big-edit-button"><p>EDIT</p></button></a>';
}

// Gallery
mw.loader.using(['mediawiki.api', 'jquery'], function () {
$(document).ready(function () {
if (mw.config.get('wgPageName') !== 'GALLERY') return; // Ensure script runs only on the Gallery page

var category = "Projects"; // Default category
var galleryContainer = $('#project-gallery');

galleryContainer.before('<div id="category-filter">' +
'<button class="filter-btn" data-filter="Projects">Show All</button>' +
'<button class="filter-btn" data-filter="Textiles">Textiles</button>' +
'<button class="filter-btn" data-filter="Crafting">Crafting</button>' +
'<button class="filter-btn" data-filter="Airbrushing">Airbrushing</button>' +
'<button class="filter-btn" data-filter="Button Pressing">Button Pressing</button>' +
'<button class="filter-btn" data-filter="Cassette Making">Cassette Making</button>' +
'<button class="filter-btn" data-filter="Graphic Design">Graphic Design</button>' +
'<button class="filter-btn" data-filter="Hand Sewing">Hand Sewing</button>' +
'<button class="filter-btn" data-filter="Laser Cutting">Laser Cutting</button>' +
'<button class="filter-btn" data-filter="Machining">Machining</button>' +
'<button class="filter-btn" data-filter="3D Modeling">3D Modeling</button>' +
'<button class="filter-btn" data-filter="3D Printing">3D Printing</button>' +
'<button class="filter-btn" data-filter="Programming">Programming</button>' +
'<button class="filter-btn" data-filter="Soldering">Soldering</button>' +
'<button class="filter-btn" data-filter="Technical Design">Technical Design</button>' +
'<button class="filter-btn" data-filter="Welding">Welding</button>' +
'<button class="filter-btn" data-filter="Woodworking">Woodworking</button>' +
'</div>');

// load gallery based on category
function loadGallery(category) {
galleryContainer.html('<div class="gallery-container">Loading gallery...</div>');

new mw.Api().get({
action: 'query',
list: 'categorymembers',
cmtitle: 'Category:' + category,
cmlimit: 50,
format: 'json'
}).done(function (data) {
var pages = data.query.categorymembers;
var galleryHtml = '';

var requests = pages.map(function (page) {
return new mw.Api().get({
action: 'query',
prop: 'revisions',
rvprop: 'content',
titles: page.title,
format: 'json'
}).then(function (pageData) {
var pageId = Object.keys(pageData.query.pages)[0];
var content = pageData.query.pages[pageId].revisions[0]['*'];
var pageUrl = mw.util.getUrl(page.title);
var imgUrl = '';

// Try to find a direct image URL (img1=https://...)
var directMatch = content.match(/img1=(https:\/\/[^\n|}%s]+)/);
if (directMatch) {
imgUrl = directMatch[1];
}

// If no direct URL, try to find a [[File:...]] entry
var fileMatch = content.match(/\[\[File:([^|\]]+)/);
if (!imgUrl && fileMatch) {
var fileName = fileMatch[1].trim();

// Fetch full image URL from MediaWiki API
return new mw.Api().get({
action: 'query',
titles: 'File:' + fileName,
prop: 'imageinfo',
iiprop: 'url',
format: 'json'
}).then(function (imageData) {
var imagePageId = Object.keys(imageData.query.pages)[0];
if (imageData.query.pages[imagePageId].imageinfo) {
imgUrl = imageData.query.pages[imagePageId].imageinfo[0].url;
}

galleryHtml += generateGalleryItem(pageUrl, page.title, imgUrl, category);
});
} else {
// Add the gallery item if the image was found
galleryHtml += generateGalleryItem(pageUrl, page.title, imgUrl, category);
}
});
});

Promise.all(requests).then(function () {

galleryContainer.html('<div class="gallery-container">' + galleryHtml + '</div>');
});
});
}

// generate a gallery
function generateGalleryItem(pageUrl, title, imgUrl, category) {
return `
<div class="gallery-item ${category}">
<a href="${pageUrl}">
${imgUrl ? `<img src="${imgUrl}" alt="${title}">` : '<div class="no-image">No Image Available</div>'}
</a>
<div class="gallery-caption">
<a href="${pageUrl}">${title}</a>
</div>
</div>
`;
}

loadGallery("Projects");

$(".filter-btn").click(function () {
var selectedCategory = $(this).data("filter");
loadGallery(selectedCategory);
});
});
});

// TOOLS Gallery
mw.loader.using(['mediawiki.api', 'jquery'], function () {
$(document).ready(function () {
if (mw.config.get('wgPageName') !== 'TOOLS') return; // Ensure script runs only on the TOOLS page

var category = "Tools"; // Default category
var galleryContainer = $('#tools-gallery');

// Add filter buttons before the gallery
galleryContainer.before('<div id="category-filter">' +
'<button class="filter-btn" data-filter="Tools">Show All</button>' +
'<button class="filter-btn" data-filter="Makerspace Tools">Makerspace Tools</button>' +
'<button class="filter-btn" data-filter="Wood Shop Tools">Wood Shop Tools</button>' +
'<button class="filter-btn" data-filter="Machine Shop Tools">Machine Shop Tools</button>' +
'</div>');

function loadGallery(category) {
galleryContainer.html('<div class="gallery-container">Loading gallery...</div>');

new mw.Api().get({
action: 'query',
list: 'categorymembers',
cmtitle: 'Category:' + category,
cmlimit: 50,
format: 'json'
}).done(function (data) {
var pages = data.query.categorymembers;
var galleryHtml = '';

var requests = pages.map(function (page) {
return new mw.Api().get({
action: 'query',
prop: 'revisions',
rvprop: 'content',
titles: page.title,
format: 'json'
}).then(function (pageData) {
var pageId = Object.keys(pageData.query.pages)[0];
var content = pageData.query.pages[pageId].revisions[0]['*'];
var pageUrl = mw.util.getUrl(page.title);
var imgUrl = '';

// Try to find a [[File:...]] entry
var fileMatch = content.match(/\[\[File:([^|\]]+)/);
if (fileMatch) {
var fileName = fileMatch[1].trim();

// Fetch full image URL from MediaWiki API
return new mw.Api().get({
action: 'query',
titles: 'File:' + fileName,
prop: 'imageinfo',
iiprop: 'url',
format: 'json'
}).then(function (imageData) {
var imagePageId = Object.keys(imageData.query.pages)[0];
if (imageData.query.pages[imagePageId].imageinfo) {
imgUrl = imageData.query.pages[imagePageId].imageinfo[0].url;
}

// Add the gallery item
galleryHtml += generateGalleryItem(pageUrl, page.title, imgUrl, category);
});
} else {
// If no image is found, still display the title
galleryHtml += generateGalleryItem(pageUrl, page.title, imgUrl, category);
}
});
});

Promise.all(requests).then(function () {
// Append gallery items after loading them
galleryContainer.html('<div class="gallery-container">' + galleryHtml + '</div>');
});
});
}

function generateGalleryItem(pageUrl, title, imgUrl, category) {
return `
<div class="gallery-item ${category}">
<a href="${pageUrl}">
${imgUrl ? `<img src="${imgUrl}" alt="${title}">` : '<div class="no-image">No Image Available</div>'}
</a>
<div class="gallery-caption">
<a href="${pageUrl}">${title}</a>
</div>
</div>
`;
}

loadGallery("Tools");

$(".filter-btn").click(function () {
var selectedCategory = $(this).data("filter");
loadGallery(selectedCategory);
});
});
});

//CAROUSEL
function loadCarouselData() {
// Make the API query to fetch pages for carousel
var category = "Projects";
var carouselData = [];

new mw.Api().get({
action: 'query',
list: 'categorymembers',
cmtitle: 'Category:' + category,
cmlimit: 50,
format: 'json'
}).done(function (data) {
var pages = data.query.categorymembers;

var requests = pages.map(function (page) {
return new mw.Api().get({
action: 'query',
prop: 'revisions',
rvprop: 'content',
titles: page.title,
format: 'json'
}).then(function (pageData) {
var pageId = Object.keys(pageData.query.pages)[0];
var content = pageData.query.pages[pageId].revisions[0]['*'];
var pageUrl = mw.util.getUrl(page.title);
var imgUrl = '';

// Try to find a direct image URL (img1=https://...)
var directMatch = content.match(/img1=(https:\/\/[^\n|}%s]+)/);
if (directMatch) {
imgUrl = directMatch[1];
}

// If no direct URL, try to find a [[File:...]] entry
var fileMatch = content.match(/\[\[File:([^|\]]+)/);
if (!imgUrl && fileMatch) {
var fileName = fileMatch[1].trim();

// Fetch full image URL from MediaWiki API
return new mw.Api().get({
action: 'query',
titles: 'File:' + fileName,
prop: 'imageinfo',
iiprop: 'url',
format: 'json'
}).then(function (imageData) {
var imagePageId = Object.keys(imageData.query.pages)[0];
if (imageData.query.pages[imagePageId].imageinfo) {
imgUrl = imageData.query.pages[imagePageId].imageinfo[0].url;
}

// Store carousel item data
if (imgUrl) {
carouselData.push({ pageUrl: pageUrl, imgUrl: imgUrl, title: page.title });
}
});
} else {
// Store carousel item data
if (imgUrl) {
carouselData.push({ pageUrl: pageUrl, imgUrl: imgUrl, title: page.title });
}
}
});
});

Promise.all(requests).then(function () {
// Call the function to display carousel
displayCarousel(carouselData);
});
});
}

function displayCarousel(carouselData) {
var carouselHtml = '';

carouselData.forEach(function (item) {
carouselHtml += `
<div class="carousel-item">
<a href="${item.pageUrl}">
<img src="${item.imgUrl}" alt="Carousel Image">
</a>
<div class="carousel-title">${item.title}</div>
</div>
`;
});

// Inject the HTML into the carousel container
var carouselContainer = $('.carousel-container');
carouselContainer.html(carouselHtml);

// Initialize the carousel behavior
initializeCarousel();
}

function initializeCarousel() {
let currentIndex = 0;
let $carouselItems = $(".carousel-item");
let totalItems = $carouselItems.length;

$carouselItems.hide().eq(currentIndex).show();

let $prevButton = $('<button class="carousel-prev"> ◀ </button>');
let $nextButton = $('<button class="carousel-next"> ▶ </button>');
$('.carousel-container').append($prevButton, $nextButton);

$nextButton.click(function () {
currentIndex = (currentIndex + 1) % totalItems;
updateCarousel();
});

$prevButton.click(function () {
currentIndex = (currentIndex - 1 + totalItems) % totalItems;
updateCarousel();
});

function updateCarousel() {
$carouselItems.hide().eq(currentIndex).show();
}
}

$(document).ready(function () {
loadCarouselData(); // Load the carousel data on page load
});

// if page is part of a category, insert any corresponding skill badges (individual project pages)
if(document.getElementById("catlinks") != null) {
document.querySelectorAll("#catlinks li a").forEach((cat) => {
let query = "#firstHeading";
if(cat.title.includes("Category:Textiles")) {
insertSkillBadgeLink('File:Textile_badge_small.png', query);
}
if(cat.title.includes("Category:Crafting")) {
insertSkillBadgeLink('File:Crafting_badge_small.png', query);
}
if(cat.title.includes("Category:Airbrushing")) {
insertSkillBadgeLink('File:Airbrushing_badge_small.png', query);
}
if(cat.title.includes("Category:Button Pressing")) {
insertSkillBadgeLink('File:Button_badge_small.png', query);
}
if(cat.title.includes("Category:Cassette Making")) {
insertSkillBadgeLink('File:Cassette_badge_small.png', query);
}
if(cat.title.includes("Category:Graphic Design")) {
insertSkillBadgeLink('File:Graphic_badge_small.png', query);
}
if(cat.title.includes("Category:Hand Sewing")) {
insertSkillBadgeLink('File:Handsewing_badge_small.png', query);
}
if(cat.title.includes("Category:Laser Cutting")) {
insertSkillBadgeLink('File:Laser_badge_small.png', query);
}
if(cat.title.includes("Category:Machining")) {
insertSkillBadgeLink('File:Machining_badge_small.png', query);
}
if(cat.title.includes("Category:3D Modeling")) {
insertSkillBadgeLink('File:Modeling_badge_small.png', query);
}
if(cat.title.includes("Category:3D Printing")) {
insertSkillBadgeLink('File:Printing_badge_small.png', query);
}
if(cat.title.includes("Category:Programming")) {
insertSkillBadgeLink('File:Programming_badge_small.png', query);
}
if(cat.title.includes("Category:Soldering")) {
insertSkillBadgeLink('File:Soldering_badge_small.png', query);
}
if(cat.title.includes("Category:Technical design")) {
insertSkillBadgeLink('File:Technical_badge_small.png', query);
}
if(cat.title.includes("Category:Welding")) {
insertSkillBadgeLink('File:Welding_badge_small.png', query);
}
if(cat.title.includes("Category:Woodworking")) {
insertSkillBadgeLink('File:Woodworking_badge_small.png', query);
}
})
}

// inserts image at given selector element in html, using image in mediawiki format (eg [[File:filename...]])
function insertSkillBadgeLink(image, selector) {
$.getJSON(
mw.util.wikiScript( 'api' ), {
format: 'json',
action: 'query',
titles: image,
prop: 'imageinfo',
iiprop: 'url'
},
function( obj ) {
let pages = obj.query.pages;
let result1 = pages[Object.keys(pages)[0]];
let url = result1.imageinfo[0].url;
let alt = result1.title; // set alt text to image title
let urlSub = url.substring(url.indexOf("/wiki"));
document.querySelector(selector).innerHTML += '<img src="'+urlSub+'" alt="'+alt+'" width="50px" style="padding-left:.3em">';
}
);
}