Skip to content

Commit 402b35d

Browse files
Added README.md to extensions.
1 parent e288360 commit 402b35d

File tree

18 files changed

+621
-25
lines changed

18 files changed

+621
-25
lines changed

WebServerAI/assets/AI/css/webserverai.min.css

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,6 @@
6262
--wsa-target-attr: rgba(14,37,227,0.70);
6363
--wsa-elemName-bg: rgb(212, 212, 212);
6464
--wsa-target-size: #6e6d6d;
65-
6665
}
6766

6867
.wsa,

WebServerAI/assets/AI/js/components/utils.js

Lines changed: 4 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -264,13 +264,6 @@ function getInfo(name){
264264
d = e.request(window.location.origin+'/WebServerAI/libs/ai_checker.php?name='+name, true);
265265
return d[navigator.language.toLocaleLowerCase()];
266266
}
267-
/**
268-
* Checks if WebServerAI is active
269-
* @returns {Boolean} TRUE if webserverai is active, else FALSE.
270-
*/
271-
function isWSActive(){
272-
return (document.documentElement.hasAttribute('wsa-active') ? true : false);
273-
}
274267

275268
/**
276269
* Decode HTML to encoded
@@ -280,10 +273,10 @@ function isWSActive(){
280273
function HTMLEncoder($items){
281274
if(Array.isArray($items)){
282275
return $items.map((e)=>{
283-
return e.replace(/</g,'&lt;').replace(/>/g,'&gt;');
276+
return e.replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/'/g,'&#39;').replace(/"/g,'&#34;');
284277
});
285278
}else{
286-
return $items.replace(/</g,'&lt;').replace(/>/g,'&gt;');
279+
return $items.replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/'/g,'&#39;').replace(/"/g,'&#34;');
287280
}
288281
}
289282
/**
@@ -294,10 +287,10 @@ function HTMLEncoder($items){
294287
function HTMLDecoder($items){
295288
if(Array.isArray($items)){
296289
return $items.map((e)=>{
297-
return e.replace(/&lt;/g,'<').replace(/&gt;/g,'>');
290+
return e.replace(/&lt;/g,'<').replace(/&gt;/g,'>').replace(/&#39;/g,"'").replace(/&#34;/g,'"');
298291
});
299292
}else{
300-
return $items.replace(/&lt;/g,'<').replace(/&gt;/g,'>');
293+
return $items.replace(/&lt;/g,'<').replace(/&gt;/g,'>').replace(/&#39;/g,"'").replace(/&#34;/g,'"');
301294
}
302295
}
303296
/**
@@ -336,7 +329,6 @@ export {
336329
version_compare,
337330
isScrollable,
338331
getInfo,
339-
isWSActive,
340332
HTMLEncoder,
341333
HTMLDecoder,
342334
merge,

WebServerAI/build/clock/readme.md

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
# Clock
2+
3+
This is an extension to **WebServerAI** which will display the correct format of time
4+
***
5+
6+
### How to enable
7+
8+
Use this JS code to the WebServerAI _extension_ line
9+
```js
10+
"clock":{
11+
active: true,
12+
config:{
13+
options:{
14+
year: "numeric",
15+
month: "long",
16+
day: "numeric",
17+
hour: "2-digit",
18+
minute: "numeric",
19+
second: "numeric",
20+
hour12: true
21+
}
22+
},
23+
startup:{
24+
styles:[],
25+
scripts:[
26+
'/WebServerAI/build/clock/clock.js'
27+
]
28+
}
29+
}
30+
```
31+
32+
To use this type:
33+
34+
`build "clock"`
Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
en-us:
2+
name: Sound Measure
3+
updated: 7/25/24
4+
version: 0.0.1
5+
de-de:
6+
name: Schallmessung
7+
updated: 7/25/24
8+
version: 0.0.1
9+
fr-fr:
10+
name: Mesure du son
11+
updated: 7/25/24
12+
version: 0.0.1
13+
ai_version: "0.0.5 - Beta"
Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
# SoundMeasure
2+
3+
This is an extension to **WebServerAI** which will allow you to display your mic volume onto your page.
4+
***
5+
6+
### How to enable
7+
8+
Use this JS code to the WebServerAI _extension_ line
9+
```js
10+
"soundMeasure":{
11+
active: true,
12+
startup:{
13+
styles:[
14+
'/WebServerAI/build/soundMeasure/soundMeasure.css'
15+
],
16+
scripts:[
17+
'/WebServerAI/build/soundMeasure/soundMeasure.js'
18+
]
19+
}
20+
}
21+
```
22+
23+
To use this type:
24+
25+
`build "soundmeasure"`
26+
27+
To change the direction of the bar use:
28+
```
29+
set sound ?measure;? "{Element}" to "(width|height)"
30+
```
Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
:root{
2+
--soundmeasure-low: green;
3+
--soundmeasure-medium: yellow;
4+
--soundmeasure-high: red;
5+
--soundmeasure-line: gray;
6+
}
7+
.wpa-build-soundMeasure{
8+
width: auto;
9+
height: auto;
10+
}
11+
.soundmeasure .meter{
12+
position: relative;
13+
border-radius: 5px;
14+
width: auto;
15+
height: auto;
16+
}
17+
.soundmeasure .meter.meter-width{
18+
width: 100%;
19+
height: 120px;
20+
}
21+
22+
.soundmeasure .meter .line1,
23+
.soundmeasure .meter .line2,
24+
.soundmeasure .meter .line3{
25+
background-color: var(--soundmeasure-line);
26+
position: absolute;
27+
}
28+
29+
.soundmeasure .meter.meter-width .line1{
30+
height: 100%;
31+
width: 2px;
32+
left:50%
33+
}
34+
.soundmeasure .meter.meter-width .line2{
35+
height: 100%;
36+
width: 2px;
37+
left:70%
38+
}
39+
.soundmeasure .meter.meter-width .line3{
40+
height: 100%;
41+
width: 2px;
42+
left:100%
43+
}
44+
45+
.soundmeasure .meter.meter-height{
46+
width: 120px;
47+
height: calc(100% - 18px);
48+
transform: rotate(180deg);
49+
}
50+
51+
.soundmeasure .meter.meter-height .line1{
52+
height: 2px;
53+
width: 100%;
54+
top:50%
55+
}
56+
.soundmeasure .meter.meter-height .line2{
57+
height: 2px;
58+
width: 100%;
59+
top:70%
60+
}
61+
.soundmeasure .meter.meter-height .line3{
62+
height: 2px;
63+
width: 100%;
64+
top:100%
65+
}
66+
67+
.soundmeasure .meter .meter-bar{
68+
position: absolute;
69+
top:0;
70+
left:0;
71+
width: inherit;
72+
height: inherit;
73+
border-radius: inherit;
74+
transition: background-color 0.3ms;
75+
}
76+
.soundmeasure .meter .meter-bar[vol-status="low"]{
77+
background-color: var(--soundmeasure-low);
78+
}
79+
.soundmeasure .meter .meter-bar[vol-status="medium"]{
80+
background-color: var(--soundmeasure-medium);
81+
}
82+
.soundmeasure .meter .meter-bar[vol-status="high"]{
83+
background-color: var(--soundmeasure-high);
84+
}
85+
86+
.soundmeasure .sensitivity{
87+
display: block;
88+
}
Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<div class="soundmeasure">
2+
<div class="meter meter-height">
3+
<div class="meter-bar"></div>
4+
<div class="line1"></div>
5+
<div class="line2"></div>
6+
<div class="line3"></div>
7+
</div>
8+
<input type="range" class="sensitivity" min="0" max="10" step="0.1" value="1"/>
9+
</div>
Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
// Import "Extensions" from extension.js to allow usages
2+
import Extensions from "/WebServerAI/assets/AI/js/components/extenstions.js";
3+
import Events from "/WebServerAI/assets/AI/js/components/Events.js";
4+
import { getInfo, HTMLDecoder } from '../../assets/AI/js/components/utils.js';
5+
6+
// START LOAD-UP (Required)
7+
const url = new URL(import.meta.url),
8+
ext = new Extensions(),
9+
events = new Events(),
10+
buildName = ext.getBuildName(url),
11+
buildID = ext.getBuildID(url);
12+
ext.saveTemplate(buildName,ext.parse(buildName));
13+
const info = getInfo(buildName);
14+
15+
let baseLow = 0.5;
16+
17+
if(ext.isAllowed(buildName)){
18+
// Get the volume visualizer element
19+
events.submit((e)=>{
20+
e = HTMLDecoder(e);
21+
events.cmdLine(/set sound ?measure;? "(.*?)" to "(width|height)"/,e,(soundmeasure)=>{
22+
if(soundmeasure){
23+
const elem = document.querySelector(soundmeasure[1]),
24+
size = soundmeasure[2];
25+
if(elem.classList.contains('meter')){
26+
elem.classList.add('meter-'+size);
27+
if(size==='width'){
28+
elem.querySelector('.meter-bar').style.height = '100%';
29+
elem.querySelector('.meter-bar').style.width = '0px';
30+
}else{
31+
elem.querySelector('.meter-bar').style.width = '100%';
32+
elem.querySelector('.meter-bar').style.height = '0px';
33+
}
34+
elem.classList.remove('meter-'+(size==='width' ? 'height' : 'width'));
35+
}else{
36+
elem.querySelector('.meter').classList.add('meter-'+size);
37+
if(size==='width'){
38+
elem.querySelector('.meter .meter-bar').style.height = '100%';
39+
elem.querySelector('.meter .meter-bar').style.width = '0px';
40+
}else{
41+
elem.querySelector('.meter .meter-bar').style.width = '100%';
42+
elem.querySelector('.meter .meter-bar').style.height = '0px';
43+
}
44+
elem.querySelector('.meter').classList.remove('meter-'+(size==='width' ? 'height' : 'width'));
45+
}
46+
}
47+
});
48+
});
49+
window.addEventListener('wsa-build',()=>{
50+
ext.update(buildName);
51+
document.querySelectorAll('.soundmeasure').forEach(async (e)=>{
52+
const stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: false });
53+
const audioContext = new AudioContext();
54+
const mediaStreamAudioSourceNode = audioContext.createMediaStreamSource(stream);
55+
const analyserNode = audioContext.createAnalyser();
56+
mediaStreamAudioSourceNode.connect(analyserNode);
57+
const pcmData = new Float32Array(analyserNode.fftSize);
58+
59+
60+
61+
const onFrame = () => {
62+
const sensitivity = (e.querySelector('.sensitivity') ? parseFloat(e.querySelector('.sensitivity').value) : 1); // Adjust this value to change sensitivity
63+
analyserNode.getFloatTimeDomainData(pcmData);
64+
let sumSquares = 0.0;
65+
66+
for (const amplitude of pcmData) {
67+
sumSquares += (amplitude * sensitivity) * (amplitude * sensitivity);
68+
}
69+
let vol = Math.sqrt(sumSquares / pcmData.length),
70+
meter = e.querySelector('.meter');
71+
if(vol<baseLow)
72+
meter.querySelector('.meter-bar').setAttribute('vol-status','low');
73+
else if(vol>=baseLow&&vol<(baseLow+0.2))
74+
meter.querySelector('.meter-bar').setAttribute('vol-status','medium');
75+
else
76+
meter.querySelector('.meter-bar').setAttribute('vol-status','high');
77+
//console.log(meter.classList);
78+
(meter.classList.contains('meter-width') ? meter.querySelector('.meter-bar').style.width = ((vol*100 > 100) ? 100 : vol*100)+'%' : meter.querySelector('.meter-bar').style.height = ((vol*100 > 100) ? 100 : vol*100)+'%');
79+
window.requestAnimationFrame(onFrame);
80+
};
81+
82+
window.requestAnimationFrame(onFrame);
83+
});
84+
});
85+
}else
86+
ext.noSupport(buildName);

WebServerAI/build/tables/readme.md

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
# Tables
2+
3+
This is an extension to **WebServerAI** which will allow you to customize your tables to be place
4+
5+
***
6+
7+
### How to enable
8+
9+
Use this JS code to the WebServerAI _extension_ line
10+
```js
11+
"tables":{
12+
active: true,
13+
startup:{
14+
styles:[
15+
'/WebServerAI/build/tables/tables.css'
16+
],
17+
scripts:[
18+
'/WebServerAI/build/tables/tables.js'
19+
]
20+
}
21+
}
22+
```
23+
24+
To use this type:
25+
26+
`build "tables"`
27+
28+
### Regular tables
29+
30+
To activate regular tables use this setup
31+
32+
```
33+
...create "data tables" (labels|headers) "{TH_LABELS,TH_LABELS,TH_LABELS}" and cells "item 1, item 2, item 3". Make it hoverable and stripped
34+
```
Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
11
en-us:
22
name: Video-Player
3-
updated: 6/16/24
4-
version: 0.0.1
3+
updated: 7/25/24
4+
version: 0.0.2
55
play: 'Play'
66
pause: 'Pause'
77
de-de:
88
name: Video-Player
9-
updated: 6/16/24
10-
version: 0.0.1
9+
updated: 7/25/24
10+
version: 0.0.2
1111
play: 'Spielen'
1212
pause: 'Pause'
1313
fr-fr:
1414
name: Lecteur vidéo
15-
updated: 6/16/24
16-
version: 0.0.1
15+
updated: 7/25/24
16+
version: 0.0.2
1717
play: 'Jouer'
1818
pause: 'Pause'
1919
ai_version: "0.0.5 - Beta"

0 commit comments

Comments
 (0)