I've been doing coding for more than 10 years now. Tried various programming languages and had a fair share of creating applications. May it be in office productivity, database, simple game application and even doing customized camera capture skins.
Camera skins in this aspect is where you could see those texts or captions in the background while capture is on-going. Although there are free applications out there, which I'm sure, can do better. I've just built my own for fun.
If you have seen The Martian movie. Below is what I have in mind. Doing live video log with live weather attributes (with graphs) in the background. How cool is that!
In my version, I did capture current weather information as captured by Mars Perseverance Rover currently on Mars. See script below and enjoy! For more info and code on how to capture Mars Weather data from Perseverance Rover, you can check this post > Mars Weather and how to fetch the data.
The script:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <base target="_top"> | |
| <meta charset="utf-8"> | |
| <style type="text/css"> | |
| .vElementContainer{ | |
| margin: 0px auto; | |
| position: relative; | |
| width: 500px; | |
| height: 375px; | |
| border: 2px #333 solid; | |
| background-color: black; | |
| } | |
| .vElement{ | |
| width: 500px; | |
| height: 375px; | |
| background-color: orange; | |
| } | |
| .overlay1{ | |
| position: absolute; | |
| z-index: 10; | |
| top: 0px; | |
| width:490px; | |
| height:375px; | |
| padding-left:5px; | |
| padding-right:5px; | |
| margin:auto; | |
| /* background-color: aqua; */ | |
| background-color: rgba(00, 0, 0, 0); | |
| } | |
| .domain, .missionStatus{ | |
| font-family: Arial, Helvetica, sans-serif; | |
| font-size: 10px; | |
| color:white; | |
| } | |
| </style> | |
| </head> | |
| <body bgcolor="black"> | |
| <div id="container" class="vElementContainer"> | |
| <video autoplay="true" id="videoElement" class="vElement"></video> | |
| <div id="topSkin1" class="overlay1"> | |
| <span class="domain">TRACKINGPERSEVERANCE.COM</span> | |
| <br> | |
| <span class="missionStatus">MISSION DAY<br>SOL <span id="missionDay">loading...</span></span> | |
| <br> | |
| <span class="missionStatus">PRESSURE<br><span id="pressure">loading...</span> PSI</span> | |
| <br> | |
| <span class="missionStatus">TEMPERATURE(min)<br><span id="minTempF">loading...</span> °F/<span id="minTempC">loading</span> °C</span> | |
| <br> | |
| <span class="missionStatus">TEMPERATURE(max)<br><span id="maxTempF">loading...</span> °F/<span id="maxTempC">loading</span> °C</span> | |
| </div> | |
| </div> | |
| <script type="text/javascript"> | |
| google.script.run.withSuccessHandler(setMissionStatus).getMissionStatus(); | |
| var video = document.querySelector("#videoElement"); | |
| navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUsermedia | |
| || navigator.mozGetUserMedia || navigato.msGetUserMedia || navigator.oGetUserMedia; | |
| if(navigator.getUserMedia){ | |
| navigator.getUserMedia({video:true}, handleVideo, videoError); | |
| } | |
| function handleVideo(stream){ | |
| video.srcObject = stream; | |
| video.play(); | |
| } | |
| function videoError(e){} | |
| function setMissionStatus(data){ | |
| // {SOL:targetData[2], | |
| // MINTEMPF:targetData[5].toFixed(2),MAXTEMPF:targetData[6].toFixed(2), | |
| // MINTEMPC:convertFTempToC(targetData[5]),MAXTEMPC:convertFTempToC(targetData[6]), | |
| // PRESSURE:targetData[7]}; | |
| document.getElementById("missionDay").innerHTML=data.SOL; | |
| document.getElementById("pressure").innerHTML=data.PRESSURE; | |
| document.getElementById("minTempF").innerHTML=data.MINTEMPF; | |
| document.getElementById("minTempC").innerHTML=data.MINTEMPC; | |
| document.getElementById("maxTempF").innerHTML=data.MAXTEMPF; | |
| document.getElementById("maxTempC").innerHTML=data.MAXTEMPC; | |
| } | |
| </script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function doGet(request) { | |
| return HtmlService | |
| .createTemplateFromFile('Page') | |
| .evaluate() | |
| .setSandboxMode(HtmlService.SandboxMode.IFRAME) | |
| .setTitle('TP Cam View|Custom Skin'); | |
| } | |
| function include(filename) { | |
| return HtmlService.createHtmlOutputFromFile(filename) | |
| .setSandboxMode(HtmlService.SandboxMode.IFRAME) | |
| .getContent(); | |
| } | |
| function getMissionStatus(){ | |
| var ss = SpreadsheetApp.openById('THIS IS WHERE THE SPREADSHEET ID OF THE DATABASE CREATED TO RECEIVE WEATHER IN FROM API'); | |
| var ws = ss.getSheetByName('Weather_Data_Perseverance'); | |
| var data = ws.getDataRange().getValues(); | |
| var targetData = data[data.length - 1]; | |
| var missionStatus = {SOL:targetData[2], | |
| MINTEMPF:targetData[5].toFixed(2),MAXTEMPF:targetData[6].toFixed(2), | |
| MINTEMPC:convertFTempToC(targetData[5]),MAXTEMPC:convertFTempToC(targetData[6]), | |
| PRESSURE:targetData[7]}; | |
| // Logger.log(missionStatus); | |
| return missionStatus; | |
| } | |
| function convertFTempToC(temp){ | |
| var tC = (temp - 32) * 5/9; | |
| return tC.toFixed(2); | |
| } |
No comments:
Post a Comment