diff --git a/wled00/data/index.css b/wled00/data/index.css index 5be49819..4aa24750 100644 --- a/wled00/data/index.css +++ b/wled00/data/index.css @@ -271,6 +271,20 @@ button { transform: translate(-50%,-50%); } +#pxm { + display: none; + width: 100%; + height: 100%; + border: 0; + position: absolute; +} + +#ipxm { + width: 100%; + height: 100%; + position: relative; +} + .tab { background-color: transparent; color: var(--c-d); diff --git a/wled00/data/index.htm b/wled00/data/index.htm index b8c0df85..b171c658 100644 --- a/wled00/data/index.htm +++ b/wled00/data/index.htm @@ -65,6 +65,7 @@ + @@ -392,6 +393,12 @@
For best performance, it is recommended to turn off the streaming source when not in use. + + +
diff --git a/wled00/data/index.js b/wled00/data/index.js index 6fa6d298..e824af55 100644 --- a/wled00/data/index.js +++ b/wled00/data/index.js @@ -1,6 +1,6 @@ //page js var loc = false, locip, locproto = "http:"; -var isOn = false, nlA = false, isLv = false, isInfo = false, isNodes = false, syncSend = false, syncTglRecv = true; +var isOn = false, nlA = false, isLv = false, isInfo = false, isNodes = false, syncSend = false, syncTglRecv = true, isPXM = false; var hasWhite = false, hasRGB = false, hasCCT = false; var nlDur = 60, nlTar = 0; var nlMode = false; @@ -26,7 +26,7 @@ var ws, cpick, ranges; var cfg = { theme:{base:"dark", bg:{url:""}, alpha:{bg:0.6,tab:0.8}, color:{bg:""}}, comp :{colors:{picker: true, rgb: false, quick: true, hex: false}, - labels:true, pcmbot:false, pid:true, seglen:false, segpwr:false, segexp:false, css:true, hdays:false} + labels:true, pcmbot:false, pid:true, seglen:false, segpwr:false, segexp:false, css:true, hdays:false, pxm: false} }; var hol = [ [0,11,24,4,"https://aircoookie.github.io/xmas.png"], // christmas @@ -38,6 +38,9 @@ var hol = [ [0,0,1,1,"https://initiate.alphacoders.com/download/wallpaper/1198800/images/jpg/2522807481585600"] // new year ]; +// Buttons +var btnPXM = gId('buttonPixelMagicTool'); + function handleVisibilityChange() {if (!d.hidden && new Date () - lastUpdate > 3000) requestJson();} function sCol(na, col) {d.documentElement.style.setProperty(na, col);} function gId(c) {return d.getElementById(c);} @@ -283,6 +286,8 @@ function onLoad() sl.addEventListener('touchstart', toggleBubble); sl.addEventListener('touchend', toggleBubble); } + + btnPXM.style.display = cfg.comp.pxm ? "block" : "none"; } function updateTablinks(tabI) @@ -1685,6 +1690,7 @@ function toggleLiveview() //WLEDSR adding liveview2D support if (isInfo && isM) toggleInfo(); if (isNodes && isM) toggleNodes(); + if (isPXM && isM) togglePixelMagicTool(); isLv = !isLv; var lvID = "liveview"; @@ -1709,6 +1715,7 @@ function toggleLiveview() function toggleInfo() { if (isNodes) toggleNodes(); + if (isPXM) togglePixelMagicTool(); if (isLv && isM) toggleLiveview(); isInfo = !isInfo; if (isInfo) requestJson(); @@ -1719,6 +1726,7 @@ function toggleInfo() function toggleNodes() { if (isInfo) toggleInfo(); + if (isPXM) togglePixelMagicTool(); if (isLv && isM) toggleLiveview(); isNodes = !isNodes; if (isNodes) loadNodes(); @@ -1726,6 +1734,40 @@ function toggleNodes() gId('buttonNodes').className = (isNodes) ? "active":""; } +function togglePixelMagicTool() +{ + if (isInfo) toggleInfo(); + if (isNodes) toggleNodes(); + if (isLv && isM) toggleLiveview(); + + isPXM = !isPXM; + + var id = "pxm"; + + if (isPXM) gId('ipxm').innerHTML = ``; + gId('mpxm').style.transform = (isPXM) ? "translateY(0px)":"translateY(100%)"; + + var iframe = gId(id); + iframe.style.display = (isPXM) ? "block":"none"; + iframe.src = (isPXM) ? getURL("/pxmagic.htm"):"about:blank"; + + iframe.onload = function () { + if(isPXM){ + var iframeContent = this.contentDocument; + iframeContent.body.style.backgroundColor = "transparent"; + var header = iframeContent.querySelector('.header'); + header.style.display = "none"; + } + } + + btnPXM.className = (isPXM) ? "active":""; + size(); +} + +function updateNameResize(){ + btnPXM.querySelector('p').textContent = (wW < 1024) ? "PXM" : "Pixel Magic"; +} + function makeSeg() { var ns = 0, ct = 0; @@ -2853,9 +2895,22 @@ function size() if (isLv) h -= 4; sCol('--tp', h + "px"); togglePcMode(); + updateNameResize(); lastw = wW; } +function listenMessage(e){ + const { origin, data } = e; + + if (origin === window.location.origin) { + switch(data){ + case 'loadPresets': + setTimeout(()=>{pmtLast=0; loadPresets();}, 250); + break; + } + } +} + function togglePcMode(fromB = false) { if (fromB) { @@ -2895,6 +2950,7 @@ size(); _C.style.setProperty('--n', N); window.addEventListener('resize', size, true); +window.addEventListener('message', listenMessage, true); _C.addEventListener('mousedown', lock, false); _C.addEventListener('touchstart', lock, false); diff --git a/wled00/data/pxmagic/pxmagic.htm b/wled00/data/pxmagic/pxmagic.htm index 587da71e..b76e0bc3 100644 --- a/wled00/data/pxmagic/pxmagic.htm +++ b/wled00/data/pxmagic/pxmagic.htm @@ -7,13 +7,10 @@ Pixel Magic Tool - -