jeans/WLED
jeans/WLED
1
0
Fork 0
mirror of https://github.com/wled/WLED.git synced 2025-07-19 08:46:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix Firefox loading order, more resilient fallback to gradient method

Browse Source
This commit is contained in:
zanhecht 2023-12-28 13:06:13 -05:00 committed by GitHub
parent 901d56f898
commit 55eceb4080
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 10 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
wled00/data/liveview.htm
View File

@ -24,13 +24,7 @@
</style> </style>
<script> <script>
var ws; var ws;
var c = document.getElementById('canvas');
var ctx = c.getContext('2d');
var tmout = null; var tmout = null;
function setCanvas() {
c.width = document.documentElement.clientWidth;
}
setCanvas();
function update() // via HTTP (/json/live) function update() // via HTTP (/json/live)
{ {
if (document.hidden) { if (document.hidden) {
@ -50,14 +44,16 @@
var leddata = (data) => "#" + ((data.length > 6) ? data.substring(2) : data); var leddata = (data) => "#" + ((data.length > 6) ? data.substring(2) : data);
var str = "linear-gradient(90deg,"; var str = "linear-gradient(90deg,";
var len = json.leds.length; var len = json.leds.length;
if (typeof ctx === "object") { //canvas support try { //canvas support
setCanvas(); var c = document.getElementById('canvas');
var ctx = c.getContext('2d');
c.width = document.documentElement.clientWidth;
ctx.clearRect(0, 0, c.width, c.height); ctx.clearRect(0, 0, c.width, c.height);
for (i = 0; i < len; i++) { for (i = 0; i < len; i++) {
ctx.fillStyle = leddata(json.leds[i]); ctx.fillStyle = leddata(json.leds[i]);
ctx.fillRect ( i * c.width / len, 0, c.width, c.height); ctx.fillRect ( i * c.width / len, 0, c.width, c.height);
} }
} else { //fallback to gradient method } catch (e) { //fallback to gradient method
for (i = 0; i < len; i++) { for (i = 0; i < len; i++) {
str += leddata(json.leds[i]) + ((i < len -1) ? "," : ""); str += leddata(json.leds[i]) + ((i < len -1) ? "," : "");
} }
@ -108,14 +104,16 @@
let len = leds.length; let len = leds.length;
let start = leds[1]==2 ? 4 : 2; // 1 = 1D, 2 = 1D/2D (leds[2]=w, leds[3]=h) let start = leds[1]==2 ? 4 : 2; // 1 = 1D, 2 = 1D/2D (leds[2]=w, leds[3]=h)
let rgb = (i) => `rgb(${leds[i]},${leds[i+1]},${leds[i+2]})`; let rgb = (i) => `rgb(${leds[i]},${leds[i+1]},${leds[i+2]})`;
if (typeof ctx === "object") { //canvas support try { //canvas support
setCanvas(); var c = document.getElementById('canvas');
var ctx = c.getContext('2d');
c.width = document.documentElement.clientWidth;
ctx.clearRect(0, 0, c.width, c.height); ctx.clearRect(0, 0, c.width, c.height);
for (i = start; i < len; i+=3) { for (i = start; i < len; i+=3) {
ctx.fillStyle = rgb(i); ctx.fillStyle = rgb(i);
ctx.fillRect ( (i - start) * c.width / (len - start), 0, c.width, c.height); ctx.fillRect ( (i - start) * c.width / (len - start), 0, c.width, c.height);
} }
} else { //fallback to gradient method } catch (e) { //fallback to gradient method
let str = "linear-gradient(90deg,"; let str = "linear-gradient(90deg,";
for (i = start; i < len; i+=3) { for (i = start; i < len; i+=3) {
str += rgb(i) + ((i < len -3) ? "," : ""); str += rgb(i) + ((i < len -3) ? "," : "");