Switch Github profile pictures according to the theme - javascript

I would like to automate the change of the profile picture according to the current theme on the github page, day or night. Is there a way to make this change?
I tried an html script but no way to get a result on github.
<!DOCTYPE html>
<html>
<head>
<title>switch_them</title>
</head>
<body>
<img id="day" src="img/0XCAF3_day.png" alt="day theme">
<img id="night" src="img/0XCAF3_night.png" alt="night theme">
<script>
function switchTheme() {
const dayThemePicture = '0XCAF3_day.png';
const nightThemePicture = '0XCAF3_night.png';
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
if (mediaQuery.matches) {
document.getElementById('night').src = nightThemePicture;
} else {
document.getElementById('day').src = dayThemePicture;
}
}
switchTheme();
window.addEventListener('load', switchTheme);
window.addEventListener('resize', switchTheme);
</script>
</body>
</html>

Related

unable to load webcam/video in html

I am using a basic html/javascript script where I load a webcam component.
<html>
<head>
<!-- Load the latest version of TensorFlow.js -->
<script src="https://cdn.jsdelivr.net/npm/#tensorflow/tfjs"></script>
<script src="https://cdn.jsdelivr.net/npm/#tensorflow-models/mobilenet"></script>
</head>
<body>
<div id="console"></div>
<!-- Add an image that we will use to test -->
<video autoplay playsinline muted id="webcam" width="224" height="224"></video>
<!-- Load index.js after the content of the page -->
<script src="index.js"></script>
</body>
</html>
const webcamElement = document.getElementById('webcam');
async function app() {
console.log('Loading mobilenet..');
// Load the model.
net = await mobilenet.load();
console.log('Successfully loaded model');
const webcam = await tf.data.webcam(webcamElement);
while (true) {
const img = await webcam.capture();
const result = await net.classify(img);
document.getElementById('console').innerText = `
prediction: ${result[0].className}\n
probability: ${result[0].probability}
`;
img.dispose();
await tf.nextFrame();
}
}
This seems to be the correct way to load a webcam as per other answers. However, nothing opens for me. No console logs as well. I am trying this on Firefox.
First of all, simply include the script webcam-easy.min.js in the section of the html file.
and try instead of that js, you will get the web cam output

How to check app is installed or not using javascript

I am using javascript to check if app is installed or not, if my app installed i want to open my app or else it will redirect to play store account. the issue is that it is redirecting to play store even i already have app installed
This is my .html file where i am checking for app
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
window.onload = function() {
// Deep link to your app goes here
document.getElementById("l").src = "intent://sdf/SplashScreen#Intent;scheme=vsd;package=com.sdf.android.ff;end";
setTimeout(function() {
// Link to the App Store should go here -- only fires if deep link fails
window.location = "https://play.google.com/store/apps/details?id=com.sdf.android.dffd";
}, 500);
};
</script>
<iframe id="l" width="1" height="1" style="visibility:hidden"></iframe>
</body>
</html>
It solved by this way
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script>
var fallbackToStore = function() {
window.location.replace('https://play.google.com/store/apps/details?id=packgename');
};
var openApp = function() {
window.location.replace('intent://app/SplashScreen#Intent;scheme=app_;package=com.sdf.android.dsds;end');
};
var triggerAppOpen = function() {
openApp();
setTimeout(fallbackToStore, 700);
};
triggerAppOpen();
</script>
</head>
<body>
</body>
</html>

Exif.js always returns "undefined"

I'm currently developing a simple WEB Application that allows users to upload a photo.
That photo's EXIF GPS data is then supposed to be extracted to a variable that will then be used in a google maps widget, with a "pin" on the location of shooting. The idea is then generate a link for users to be able to share both the photo and the google maps widget on Forums.
The issue at the moment is in the use of the EXIF.js library.
I currently have a simple html page just to test/try this such library and the code is:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>EXIF</title>
</head>
<body>
<img src="image1.jpg" id="img1" />
<h1>Localização da foto</h1>
<p id="info_model"></p>
<script src="exif.js"></script>
<script>
window.onload=getExif;
function getExif() {
var imagem = document.getElementById("img1");
var modelo = EXIF.getTag(imagem, "Model");
document.getElementById("info_model").innerHTML = modelo;
}
</script>
</body>
</html>
The expected result should be for it to say: "iPhone 6S Plus"
The actual result is: "undefined"
I can confirm the photo used to test the code does in fact have valid EXIF
New code as suggested:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>EXIF</title>
</head>
<body>
<img src="image1.jpg" id="img1" />
<h1>Modelo da câmara</h1>
<p id="info_model"></p>
<script src="exif.js"></script>
<script>
window.onload=getExif;
function getExif() {
var img1 = document.getElementById("img1");
EXIF.getData(img1, function() {
var model = EXIF.getTag(this, "Model");
var modelo = document.getElementById("info_model");
modelo.innerHTML = `${model}`;
});
}
</script>
</body>
</html>
getData works asynchronously and as such, needs to be passed a callback function, which your code does not have. You can only call getTag after you've called getData.
See the example on
https://github.com/exif-js/exif-js
Start with calling the EXIF.getData function. You pass it an image as a parameter:
either an image from a <img src="image.jpg">
OR a user selected image in a <input type="file"> element on your page.
function getExif() {
var img1 = document.getElementById("img1");
EXIF.getData(img1, function() {
var make = EXIF.getTag(this, "Make");
var model = EXIF.getTag(this, "Model");
var makeAndModel = document.getElementById("makeAndModel");
makeAndModel.innerHTML = `${make} ${model}`;
});
}
window.onload = getExif;
<script src="https://cdn.jsdelivr.net/npm/exif-js"></script>
<pre>Make and model: <span id="makeAndModel"></span></pre>
<img src="path/to/image.jpg" id="img1" />
I know this may be already solved, but I'd like to offer alternative solution using library exifr. It's new, maintained and actively developed library with focus on performance.
<img src="image1.jpg" id="img1" />
<h1>Modelo da câmara</h1>
<p id="info_model"></p>
<script src="https://unpkg.com/exifr#2.1.3/index.js"></script>
<script>
async function getExif() {
var img1 = document.getElementById("img1");
let output = await exifr.parse(img)
var model = EXIF.getTag(this, "Model");
var modelo = document.getElementById("info_model");
modelo.innerHTML = output.Model;
}
</script>
The important part here is the async/await. The image is loaded asynchronously so you need to wait until it's loaded and parsed. This is similar to above mentioned callbacks but more modern.
You can check out the library's playground and experiment with images and their output, or check out the .repository and docs

Electron HTML Javascript button not working

I'm trying to create and save files using javascript.
This is my HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tutorial</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.con/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="./css/styles.css">
</head>
<body>
<div class="container" id="form-container">
<textarea class= "form-control" placeholder ="File Contents..." rows="10"></textarea>
<input id= "content" class="form-control" placeholder="Input Text Here...">
<button id="createButton" class="btn btn-success">Create File</button>
</div>
</body>
<script>
require('./renderer.js')
</script>
</html>
The page looks like this currently. For some reason I don't understand, the button to create file doesn't work I click it but nothing happens. It does not create a file, nor does it open a location where you want to save the file.
This is my Javascript code:
var app = require('electron').remote;
var dialog = app.dialog;
var fs = require('fs');
document.getElementbyId('createButton').onclick = () => {
dialog.showSaveDialog((fileName) => {
if(fileName === undefined){
alert("You didnt save the file");
return;
}
var content = document.getElementbyId('content').value;
fs.writeFile(FileName, content, (err) => {
if(err) console.log(err);
alert("The file has been succesfully saved")
})
});
};
Why won't the 'Create File' button work?
The function you are trying to use is called document.getElementById, using the camel-case naming convention. Your code would look like this, when corrected:
//... require statements as in your code
document.getElementById("createButton").onclick = () => {
// ...
var content = document.getElementById("content").value;
// ...
}

CamanJS image manipulation, strange error

i'm using CamanJS to do some images manipulation with javascript, and I have two similar really simple scripts, the first works well, the second not (and this is the script i need working).
This is the first working:
<!DOCTYPE html>
<html lang="en">
<head>
<title>CamanJS Testing Playground</title>
<script type="text/javascript" src="caman.full.min.js"></script>
</head>
<body>
<button onclick="filtraPhoto();">MODIFICA</button><br />
<img id="smallImage" />
<script>
var immagine;
var smallImage = document.getElementById('smallImage');
smallImage.src = "test1_600.jpg";
immagine = Caman("#smallImage", function () {});
function filtraPhoto() {
immagine.brightness(10).contrast(500).render(function () {
alert("Done!");
});
}
</script>
</body>
</html>
This is the second not working, it return in firebug the error: TypeError: this.c.pixelData is undefined
<!DOCTYPE html>
<html lang="en">
<head>
<title>CamanJS Testing Playground</title>
<script type="text/javascript" src="caman.full.min.js"></script>
<script>
var immagine;
function carica()
{
var smallImage = document.getElementById('smallImage');
smallImage.src = "test1_600.jpg";
immagine = Caman("#smallImage", function () {});
}
function filtraPhoto() {
immagine.brightness(10).contrast(500).render(function () {
alert("Done!");
});
}
</script>
</head>
<body>
<button onclick="carica();">carica immagine</button><br />
<button onclick="filtraPhoto();">MODIFICA</button><br />
<img id="smallImage" />
</body>
</html>
Any help please?
It runs just fine in both Firefox and Chrome for me. In my limited experience, this.c.pixelData typically comes when your conversion to a CamanInstance was not successfully created.
This can be because of many things, but one that isn't expected is that CamanJS won't let you use the same html identifier (class or id) for more than one object, even if you've swapped them out. So if you're running the two scripts above on the same page, it will cause errors.
Sorry, without being able to reproduce your error, it's hard to help more than that.

Categories

Resources