Skip to content

Instantly share code, notes, and snippets.

@derekmc

derekmc/stereo_webpage.html

Last active May 2, 2025 17:52
Show Gist options
  • Save derekmc/036e3173bfd07f47f71a7ccc79c056dd to your computer and use it in GitHub Desktop.
Save derekmc/036e3173bfd07f47f71a7ccc79c056dd to your computer and use it in GitHub Desktop.
Download ZIP
Raw
stereo_webpage.html
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* CSS */
body{
overflow: hidden;
}
#contentframe, #contentframe2{
position: absolute;
}
/*#contentframe{
top: 40px; left: 40px;
}
#contentframe2{
top: 40px; right: 40px;
}*/
/* END */
</style>
</head>
<body>
<div class="markdown-src">
<!-- HTML -->
<iframe id='contentframe' srcdoc="<h1>Test</h1>">
</iframe>
<iframe id='contentframe2' srcdoc="<h1>Test</h1>">
</iframe>
<!-- END -->
</div>
<div style="display: none;"></div>
<script>
let datakey = "__HTML_NOTES__:notedataid=w0fuQQWGfX"
let inframe = (window!=window.top)
window.Note = {}
window.Note.data =
/* JSON */
{"marginWidth":40,"marginHeight":60,"crosseye":25};
/* END */
(function(){
window.Note.save = saveData
window.Note.load = loadData
window.Note.autoSave = autoSave
function getNoteModule(){
if(!window['Note']) window.Note = {}
return window.Note
}
function loadData(){
let note = getNoteModule()
if(!inframe){
try{
let savedata = localStorage.getItem(datakey)
if(savedata && savedata.length){
note.data = JSON.parse(savedata)
}
window.addEventListener("message", onMessage)
} catch(e){
console.log("No local data")
console.log(e)
}
} else {
return note.data
}
}
let firstLogCall = true
let originalLogFunc = console.log
function log(x, ...rest){
if(firstLogCall)
document.body.appendChild(document.createElement("hr"))
else
document.body.appendChild(document.createElement("br"))
document.body.appendChild(
document.createTextNode(x + " " + rest.join(" ")))
firstLogCall = false
originalLogFunc(x, ...rest)
}
console.log = log
let SaveInterval = 500
window.addEventListener("load", ()=>{
convertMarkdown()
autoSave()
loadData() // dont wait for async
})
let saveIntervalRef = null
function autoSave(enable){
if(enable === undefined) enable = true
clearInterval(saveIntervalRef)
if(enable){
saveIntervalRef = window.setInterval(saveData, SaveInterval)
}
}
// this is preferred over a 'localstorage' polyfill for a frame,
// so the programmer doesn't assume this is the browsers localstorage
function saveData(){
let note = getNoteModule()
if(inframe){
let msg_obj = {
action: "saveData",
data: JSON.stringify(note['data'])
}
let message = JSON.stringify(msg_obj)
window.parent.postMessage(message)
} else {
localStorage.setItem(datakey, JSON.stringify(note['data']))
}
}
let md_subs = [
/(\n|^)\s*######\s([^\s#].*)\n*/g, "\n<h6 id=\"$2\">$2</h6>\n",
/(\n|^)\s*#####\s([^\s#].*)\n*/g, "\n<h5 id=\"$2\">$2</h5>\n",
/(\n|^)\s*####\s*([^\s#].*)\n*/g, "\n<h4 id=\"$2\">$2</h4>\n",
/(\n|^)\s*###\s*([^\s#].*)\n*/g, "\n<h3 id=\"$2\">$2</h3>\n",
/(\n|^)\s*##\s*([^\s#].*)\n*/g, "\n<h2 id=\"$2\">$2</h2>\n",
/(\n|^)\s*#\s*([^\s#].*)\n*/g, "\n<h1 id=\"$2\">$2</h1>\n",
/\n(\s*)[\*\-](.*)/g, '\n<ul><li>$2</li></ul>',
/\n+\n(?=[^#\n])/g, "\n\n<br><br>",
/\n+\n/g, "\n",
/__([^_\n]*)__/g, "<b>$1</b>",
/\*\*([^_\n]*)\*\*/g, "<b>$1</b>",
/_([^_\n]*)_/g, "<i>$1</i>",
/\*([^_\n]*)\*/g, "<i>$1</i>",
/\!\[([^\]\n]*)\]\(([^\)\n]*)\)/g, "<img src=\"$2\" alt=\"$1\"></img>",
/\[([^\]\n]*)\]\(([^\)\n]*)\)/g, "<a href=\"$2\" target=\"_blank\">$1</a>",
]
function onMessage(){
try{
let message = JSON.parse(e.data)
// console.log('received message', message)
if(message.hasOwnProperty("event")){
if(message.event == "keydown" && typeof keydown != "undefined"){
keydown(message)
}
if(message.event == "keyup" && typeof keyup != "undefined"){
keydown(message)
}
}
} catch(e){
console.warn("error processing message: " + e.data)
}
}
function convertMarkdown(){
let containers = document.getElementsByClassName("markdown-src")
for(let j=0; j<containers.length; ++j){
let container = containers[j]
let src = container.innerHTML
for(var i=0; i<md_subs.length-1; i += 2){
var search = md_subs[i]
var replace = md_subs[i+1]
src = src.replace(search, replace)
}
container.innerHTML = src
}
}
})()
//window.addEventListener('load', htmlNotesMainFunc)
//function htmlNotesMainFunc(){
/* JS */
let data = Note.data
let src = `
<h1> Hello, World. </h1>
<span id='statusout'> </span>
<\script>
let data = {}
main()
function main(){
window.addEventListener('message', message)
}
function update(){
id('statusout').innerHTML = data.status
}
function message(e){
data = JSON.parse(e.data)
update()
}
function id(x){
return document.getElementById(x)
}
<\/script>
`
main()
function init(){
data.marginWidth = 40
data.marginHeight = 60
data.crosseye = 25
}
function style(){
let w = window.innerWidth
let h = window.innerHeight
let mw = data.marginWidth
let mh = data.marginHeight
let x = mw + data.crosseye/2
let y = mh
let dy = h - 2*mh
let dx = w/2 - 2*mw
let frame1 = id('contentframe')
let frame2 = id('contentframe2')
let px = "px"
frame1.style.position =
frame2.style.position = "absolute"
frame1.style.left = x + px
frame1.style.top = y + px
frame1.style.width = dx + px
frame1.style.height = dy + px
frame2.style.right = x + px
frame2.style.top = y + px
frame2.style.width = dx + px
frame2.style.height = dy + px
}
function main(){
init()
style()
id('contentframe').srcdoc =
id('contentframe2').srcdoc = src
setInterval(update, 3000)
}
function update(){
let status = new Date().toLocaleString();
console.info(status)
let payload = json({status})
id('contentframe').contentWindow.postMessage(payload)
id('contentframe2').contentWindow.postMessage(payload)
}
function id(x){
return document.getElementById(x)
}
function json(x){
return JSON.stringify(x)
}
/* END */
//}
</script>
</body>
<html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment