From adcdaba199305f70fa0f04af88df982bb31a0fec Mon Sep 17 00:00:00 2001 From: cschwinne Date: Tue, 1 Mar 2022 12:14:41 +0100 Subject: [PATCH] Indentation: Consistent use of Tab Added style guide Updated changelog --- CHANGELOG.md | 8 + CONTRIBUTING.md | 78 +++ wled00/data/index.css | 4 +- wled00/data/index.htm | 1 - wled00/data/index.js | 386 ++++++----- wled00/html_ui.h | 1519 ++++++++++++++++++++--------------------- wled00/wled.h | 2 +- 7 files changed, 1040 insertions(+), 958 deletions(-) create mode 100644 CONTRIBUTING.md diff --git a/CHANGELOG.md b/CHANGELOG.md index ac52339f..533c1ab6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,14 @@ ### Builds after release 0.12.0 +#### Build 2203011 + +- IR rewrite (PR #2561), supports CCT +- Added locate button to Time settings +- CSS fixes and adjustments +- Consistent Tab indentation in index JS and CSS +- Added initial contribution style guideline + #### Build 2202222 - Version bump to 0.13.0-b7 "Toki" diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md new file mode 100644 index 00000000..560a7097 --- /dev/null +++ b/CONTRIBUTING.md @@ -0,0 +1,78 @@ +## Thank you for making WLED better! + +Here are a few suggestions to make it easier for you to contribute! + +### Code style + +When in doubt, it is easiest to replicate the code style you find in the files you want to edit :) +Below are the guidelines we use in the WLED repository. + +#### Indentation + +We use tabs for Indentation in Web files (.html/.css/.js) and spaces (2 per indentation level) for all other files. +You are all set if you have enabled `Editor: Detect Indentation` in VS Code. + +#### Blocks + +Whether the opening bracket of e.g. an `if` block is in the same line as the condition or in a separate line is up to your discretion. If there is only one statement, leaving out block braches is acceptable. + +Good: +```cpp +if (a == b) { + doStuff(a); +} +``` + +```cpp +if (a == b) +{ + doStuff(a); +} +``` + +```cpp +if (a == b) doStuff(a); +``` + +There should always be a space between a keyword and its condition and between the condition and brace. +Within the condition, no space should be between the paranthesis and variables. +Spaces between variables and operators are up to the authors discretion. +There should be no space between function names and their argument parenthesis. + +Good: +```cpp +if (a == b) { + doStuff(a); +} +``` + +Not good: +```cpp +if( a==b ){ + doStuff ( a); +} +``` + +#### Comments + +Comments should have a space between the delimiting characters (e.g. `//`) and the comment text. +Note: This is a recent change, the majority of the codebase still has comments without spaces. + +Good: +``` +// This is a comment. + +/* This is a CSS inline comment */ + +/* + * This is a comment + * wrapping over multiple lines, + * used in WLED for file headers and function explanations + */ + + +``` + +There is no set character limit for a comment within a line, +though as a rule of thumb you should wrap your comment if it exceeds the width of your editor window. +Inline comments are OK if they describe that line only and are not exceedingly wide. \ No newline at end of file diff --git a/wled00/data/index.css b/wled00/data/index.css index d9ee67e5..e62e1e22 100644 --- a/wled00/data/index.css +++ b/wled00/data/index.css @@ -981,7 +981,7 @@ input[type=number]::-webkit-outer-spin-button { border-radius: 20px; text-align: left; transition: background-color 0.5s; - filter: brightness(1); + filter: brightness(1); /* required for slider background to render? */ } .selected { @@ -989,7 +989,7 @@ input[type=number]::-webkit-outer-spin-button { } /* "selected" CSS class is applied to the segment when it is the main segment. By default, do not highlight. Can be overridden by skin.css */ -.selected .seg { +.selected.seg { background-color: var(--c-2); /* var(--c-4); */ } .selected .checkmark, .selected .radiokmark { diff --git a/wled00/data/index.htm b/wled00/data/index.htm index c9f6c5d9..ac940aba 100644 --- a/wled00/data/index.htm +++ b/wled00/data/index.htm @@ -227,7 +227,6 @@
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 b748806d..381e790e 100644 --- a/wled00/data/index.js +++ b/wled00/data/index.js @@ -27,7 +27,7 @@ var fxlist = d.getElementById('fxlist'), pallist = d.getElementById('pallist'); 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, css:true, hdays:false} + labels:true, pcmbot:false, pid:true, seglen:false, css:true, hdays:false} }; var hol = [ [0,11,24,4,"https://aircoookie.github.io/xmas.png"], // christmas @@ -40,14 +40,14 @@ var hol = [ var cpick = new iro.ColorPicker("#picker", { width: 260, wheelLightness: false, - wheelAngle: 270, - wheelDirection: "clockwise", - layout: [ - { - component: iro.ui.Wheel, - options: {} - } - ] + wheelAngle: 270, + wheelDirection: "clockwise", + layout: [ + { + component: iro.ui.Wheel, + options: {} + } + ] }); function handleVisibilityChange() { @@ -107,45 +107,45 @@ function tglLabels() function cTheme(light) { if (light) { - sCol('--c-1','#eee'); - sCol('--c-f','#000'); - sCol('--c-2','#ddd'); - sCol('--c-3','#bbb'); - sCol('--c-4','#aaa'); - sCol('--c-5','#999'); - sCol('--c-6','#999'); - sCol('--c-8','#888'); - sCol('--c-b','#444'); - sCol('--c-c','#333'); - sCol('--c-e','#111'); - sCol('--c-d','#222'); - sCol('--c-r','#c42'); - sCol('--c-o','rgba(204, 204, 204, 0.9)'); - sCol('--c-sb','#0003'); sCol('--c-sbh','#0006'); - sCol('--c-tb','rgba(204, 204, 204, var(--t-b))'); - sCol('--c-tba','rgba(170, 170, 170, var(--t-b))'); - sCol('--c-tbh','rgba(204, 204, 204, var(--t-b))'); - d.getElementById('imgw').style.filter = "invert(0.8)"; - } else { - sCol('--c-1','#111'); - sCol('--c-f','#fff'); - sCol('--c-2','#222'); - sCol('--c-3','#333'); - sCol('--c-4','#444'); - sCol('--c-5','#555'); - sCol('--c-6','#666'); - sCol('--c-8','#888'); - sCol('--c-b','#bbb'); - sCol('--c-c','#ccc'); - sCol('--c-e','#eee'); - sCol('--c-d','#ddd'); - sCol('--c-r','#831'); - sCol('--c-o','rgba(34, 34, 34, 0.9)'); - sCol('--c-sb','#fff3'); sCol('--c-sbh','#fff5'); - sCol('--c-tb','rgba(34, 34, 34, var(--t-b))'); - sCol('--c-tba','rgba(102, 102, 102, var(--t-b))'); - sCol('--c-tbh','rgba(51, 51, 51, var(--t-b))'); - d.getElementById('imgw').style.filter = "unset"; + sCol('--c-1','#eee'); + sCol('--c-f','#000'); + sCol('--c-2','#ddd'); + sCol('--c-3','#bbb'); + sCol('--c-4','#aaa'); + sCol('--c-5','#999'); + sCol('--c-6','#999'); + sCol('--c-8','#888'); + sCol('--c-b','#444'); + sCol('--c-c','#333'); + sCol('--c-e','#111'); + sCol('--c-d','#222'); + sCol('--c-r','#c42'); + sCol('--c-o','rgba(204, 204, 204, 0.9)'); + sCol('--c-sb','#0003'); sCol('--c-sbh','#0006'); + sCol('--c-tb','rgba(204, 204, 204, var(--t-b))'); + sCol('--c-tba','rgba(170, 170, 170, var(--t-b))'); + sCol('--c-tbh','rgba(204, 204, 204, var(--t-b))'); + d.getElementById('imgw').style.filter = "invert(0.8)"; + } else { // default dark theme + sCol('--c-1','#111'); + sCol('--c-f','#fff'); + sCol('--c-2','#222'); + sCol('--c-3','#333'); + sCol('--c-4','#444'); + sCol('--c-5','#555'); + sCol('--c-6','#666'); + sCol('--c-8','#888'); + sCol('--c-b','#bbb'); + sCol('--c-c','#ccc'); + sCol('--c-e','#eee'); + sCol('--c-d','#ddd'); + sCol('--c-r','#831'); + sCol('--c-o','rgba(34, 34, 34, 0.9)'); + sCol('--c-sb','#fff3'); sCol('--c-sbh','#fff5'); + sCol('--c-tb','rgba(34, 34, 34, var(--t-b))'); + sCol('--c-tba','rgba(102, 102, 102, var(--t-b))'); + sCol('--c-tbh','rgba(51, 51, 51, var(--t-b))'); + d.getElementById('imgw').style.filter = "unset"; } } @@ -357,7 +357,7 @@ function cpBck() { copyText.select(); copyText.setSelectionRange(0, 999999); d.execCommand("copy"); - + showToast("Copied to clipboard!"); } @@ -418,7 +418,7 @@ function loadPresets(callback = null) }) .then(res => { if (!res.ok) { - showErrorToast(); + showErrorToast(); } return res.json(); }) @@ -524,7 +524,7 @@ function populateInfo(i) urows += inforow(k,val); } } - } + } var vcn = "Kuuhaku"; if (i.ver.startsWith("0.13.")) vcn = "Toki"; @@ -536,8 +536,8 @@ function populateInfo(i) ${inforow("Signal strength",i.wifi.signal +"% ("+ i.wifi.rssi, " dBm)")} ${inforow("Uptime",getRuntimeStr(i.uptime))} ${inforow("Free heap",heap," kB")} - ${inforow("Estimated current",pwru)} - ${inforow("Frames / second",i.leds.fps)} + ${inforow("Estimated current",pwru)} + ${inforow("Frames / second",i.leds.fps)} ${inforow("MAC address",i.mac)} ${inforow("Filesystem",i.fs.u + "/" + i.fs.t + " kB (" +Math.round(i.fs.u*100/i.fs.t) + "%)")} ${inforow("Environment",i.arch + " " + i.core + " (" + i.lwip + ")")} @@ -695,14 +695,13 @@ function populatePalettes(palettes) for (let i = 0; i < palettes.length; i++) { html += generateListItemHtml( 'palette', - palettes[i].id, - palettes[i].name, - 'setPalette', + palettes[i].id, + palettes[i].name, + 'setPalette', `
`, palettes[i].class, - ); + ); } - pallist.innerHTML=html; } @@ -773,7 +772,7 @@ function genPalPrevCss(id) function generateListItemHtml(listName, id, name, clickAction, extraHtml = '', extraClass = '') { - return `
+ return `
`; } - + function btype(b){ - switch (b) { - case 32: return "ESP32"; - case 82: return "ESP8266"; - } - return "?"; + switch (b) { + case 32: return "ESP32"; + case 82: return "ESP8266"; + } + return "?"; } function bname(o){ - if (o.name=="WLED") return o.ip; - return o.name; + if (o.name=="WLED") return o.ip; + return o.name; } function populateNodes(i,n) { var cn=""; var urows=""; - var nnodes = 0; + var nnodes = 0; if (n.nodes) { n.nodes.sort((a,b) => (a.name).localeCompare(b.name)); for (var x=0;x${bname(o)}`; urows += inforow(url,`${btype(o.type)}
${o.vid==0?"N/A":o.vid}`); - nnodes++; + nnodes++; } } } @@ -978,7 +977,7 @@ function makeWS() { ws = new WebSocket('ws://'+(loc?locip:window.location.hostname)+'/ws'); ws.binaryType = "arraybuffer"; ws.onmessage = function(event) { - if (event.data instanceof ArrayBuffer) return; //liveview packet + if (event.data instanceof ArrayBuffer) return; //liveview packet var json = JSON.parse(event.data); clearTimeout(jsonTimeout); jsonTimeout = null; @@ -1007,90 +1006,90 @@ function makeWS() { } function readState(s,command=false) { - isOn = s.on; - d.getElementById('sliderBri').value= s.bri; - nlA = s.nl.on; - nlDur = s.nl.dur; - nlTar = s.nl.tbri; - nlMode = s.nl.mode; - syncSend = s.udpn.send; - currentPreset = s.ps; - tr = s.transition; - d.getElementById('tt').value = tr/10; + isOn = s.on; + d.getElementById('sliderBri').value= s.bri; + nlA = s.nl.on; + nlDur = s.nl.dur; + nlTar = s.nl.tbri; + nlMode = s.nl.mode; + syncSend = s.udpn.send; + currentPreset = s.ps; + tr = s.transition; + d.getElementById('tt').value = tr/10; - var selc=0; var ind=0; - populateSegments(s); - for (let i = 0; i < (s.seg||[]).length; i++) - { - if(s.seg[i].sel) {selc = ind; break;} ind++; - } - var i=s.seg[selc]; - if (!i) { - showToast('No Segments!', true); - updateUI(); - return; - } - - selColors = i.col; - var cd = d.getElementById('csl').children; - for (let e = 2; e >= 0; e--) - { - cd[e].style.backgroundColor = "rgb(" + i.col[e][0] + "," + i.col[e][1] + "," + i.col[e][2] + ")"; - if (isRgbw) whites[e] = parseInt(i.col[e][3]); - selectSlot(csel); - } - if (i.cct != null && i.cct>=0) d.getElementById("sliderA").value = i.cct; + var selc=0; var ind=0; + populateSegments(s); + for (let i = 0; i < (s.seg||[]).length; i++) + { + if(s.seg[i].sel) {selc = ind; break;} ind++; + } + var i=s.seg[selc]; + if (!i) { + showToast('No Segments!', true); + updateUI(); + return; + } + + selColors = i.col; + var cd = d.getElementById('csl').children; + for (let e = 2; e >= 0; e--) + { + cd[e].style.backgroundColor = "rgb(" + i.col[e][0] + "," + i.col[e][1] + "," + i.col[e][2] + ")"; + if (isRgbw) whites[e] = parseInt(i.col[e][3]); + selectSlot(csel); + } + if (i.cct != null && i.cct>=0) d.getElementById("sliderA").value = i.cct; - d.getElementById('sliderSpeed').value = i.sx; - d.getElementById('sliderIntensity').value = i.ix; + d.getElementById('sliderSpeed').value = i.sx; + d.getElementById('sliderIntensity').value = i.ix; - // Effects - var selFx = fxlist.querySelector(`input[name="fx"][value="${i.fx}"]`); - if (selFx) selFx.checked = true; - else location.reload(); //effect list is gone (e.g. if restoring tab). Reload. + // Effects + var selFx = fxlist.querySelector(`input[name="fx"][value="${i.fx}"]`); + if (selFx) selFx.checked = true; + else location.reload(); //effect list is gone (e.g. if restoring tab). Reload. - var selElement = fxlist.querySelector('.selected'); - if (selElement) { - selElement.classList.remove('selected') - } - var selectedEffect = fxlist.querySelector(`.lstI[data-id="${i.fx}"]`); - selectedEffect.classList.add('selected'); - selectedFx = i.fx; + var selElement = fxlist.querySelector('.selected'); + if (selElement) { + selElement.classList.remove('selected') + } + var selectedEffect = fxlist.querySelector(`.lstI[data-id="${i.fx}"]`); + selectedEffect.classList.add('selected'); + selectedFx = i.fx; - // Palettes - pallist.querySelector(`input[name="palette"][value="${i.pal}"]`).checked = true; - selElement = pallist.querySelector('.selected'); - if (selElement) { - selElement.classList.remove('selected') - } - pallist.querySelector(`.lstI[data-id="${i.pal}"]`).classList.add('selected'); + // Palettes + pallist.querySelector(`input[name="palette"][value="${i.pal}"]`).checked = true; + selElement = pallist.querySelector('.selected'); + if (selElement) { + selElement.classList.remove('selected') + } + pallist.querySelector(`.lstI[data-id="${i.pal}"]`).classList.add('selected'); - if (!command) { - selectedEffect.scrollIntoView({ - behavior: 'smooth', - block: 'nearest', - }); - } + if (!command) { + selectedEffect.scrollIntoView({ + behavior: 'smooth', + block: 'nearest', + }); + } - if (s.error && s.error != 0) { - var errstr = ""; - switch (s.error) { - case 10: - errstr = "Could not mount filesystem!"; - break; - case 11: - errstr = "Not enough space to save preset!"; - break; - case 12: - errstr = "Preset not found."; - break; - case 19: - errstr = "A filesystem error has occured."; - break; - } - showToast('Error ' + s.error + ": " + errstr, true); - } - updateUI(); + if (s.error && s.error != 0) { + var errstr = ""; + switch (s.error) { + case 10: + errstr = "Could not mount filesystem!"; + break; + case 11: + errstr = "Not enough space to save preset!"; + break; + case 12: + errstr = "Preset not found."; + break; + case 19: + errstr = "A filesystem error has occured."; + break; + } + showToast('Error ' + s.error + ": " + errstr, true); + } + updateUI(); } var jsonTimeout; @@ -1113,15 +1112,15 @@ function requestJson(command, rinfo = true) { var type = command ? 'post':'get'; if (command) { - command.v = true; //get complete API response - command.time = Math.floor(Date.now() / 1000); - var t = d.getElementById('tt'); - if (t.validity.valid && command.transition===undefined) { - var tn = parseInt(t.value*10); - if (tn != tr) command.transition = tn; - } + command.v = true; //get complete API response + command.time = Math.floor(Date.now() / 1000); + var t = d.getElementById('tt'); + if (t.validity.valid && command.transition===undefined) { + var tn = parseInt(t.value*10); + if (tn != tr) command.transition = tn; + } req = JSON.stringify(command); - if (req.length > 1000) useWs = false; //do not send very long requests over websocket + if (req.length > 1000) useWs = false; //do not send very long requests over websocket } if (useWs) { @@ -1254,7 +1253,7 @@ function toggleLiveview() { } function toggleInfo() { - if (isNodes) toggleNodes(); + if (isNodes) toggleNodes(); isInfo = !isInfo; if (isInfo) populateInfo(lastinfo); d.getElementById('info').style.transform = (isInfo) ? "translateY(0px)":"translateY(100%)"; @@ -1392,8 +1391,8 @@ function plR(p) { } function makeP(i,pl) { - var content = ""; - if (pl) { + var content = ""; + if (pl) { var rep = plJson[i].repeat ? plJson[i].repeat : 0; content = `
Playlist Entries
@@ -1417,7 +1416,7 @@ function makeP(i,pl) {
`; } - else content = `