2
2
* index.h
3
3
*
4
4
* Created on: 04.10.2018
5
- * Updated on: 05.05.2022
5
+ * Updated on: 24.03.2023
6
6
* Author: Wolle
7
7
*
8
8
* successfully tested with Chrome and Firefox
@@ -378,6 +378,19 @@ function connect() {
378
378
if (val == '1' ) document .getElementById ('chk_timeSpeech' ).checked = true;
379
379
break
380
380
381
+ case "DLNA_Names" : showServer (val )
382
+ break
383
+ case "Level1" : show_DLNA_Content (val , 1 )
384
+ break
385
+ case "Level2" : show_DLNA_Content (val , 2 )
386
+ break
387
+ case "Level3" : show_DLNA_Content (val , 3 )
388
+ break
389
+ case "Level4" : show_DLNA_Content (val , 4 )
390
+ break
391
+ case "Level5" : show_DLNA_Content (val , 5 )
392
+ break
393
+
381
394
default : console .log ('unknown message' , msg , val )
382
395
}
383
396
}
@@ -464,8 +477,14 @@ function showTab3 () {
464
477
document .getElementById ('btn3 ').src = 'SD /png /MP3_Yellow .png '
465
478
document .getElementById ('btn4 ').src = 'SD /png /Search_Green .png '
466
479
document .getElementById ('btn5 ').src = 'SD /png /About_Green .png '
480
+ document .getElementById ('level1 ').options .length = 0
481
+ document .getElementById ('level2 ').options .length = 0
482
+ document .getElementById ('level3 ').options .length = 0
483
+ document .getElementById ('level4 ').options .length = 0
484
+ document .getElementById ('level5 ').options .length = 0
467
485
socket .send ("change_state = 6 ")
468
486
socket .send ("audiolist ") // Now get the audio file list from SD
487
+ socket .send ('DLNA_getServer ')
469
488
}
470
489
471
490
function showTab4 () {
@@ -512,6 +531,103 @@ function uploadTextFile (fileName, content) {
512
531
xhr .send (fd ) // send
513
532
}
514
533
534
+ // ----------------------------------- DLNA ------------------------------------
535
+ function showServer (val ){
536
+ console .log (val )
537
+ var select = document .getElementById ('server ')
538
+ select .options .length = 0 ;
539
+ var server = val .split ("," )
540
+ for (i = -1 ; i < (server .length ); i ++ ) {
541
+ opt = document .createElement ('OPTION' )
542
+ if (i == -1 ){
543
+ opt .value = ""
544
+ opt .text = "Select a DLNA Server here"
545
+ }
546
+ else {
547
+ console .log (server [i ])
548
+ opt .value = server [i ]
549
+ opt .text = server [i ]
550
+ }
551
+ select .add (opt )
552
+ }
553
+ }
554
+ function show_DLNA_Content (val , level ){
555
+ var select
556
+ if (level == 1 ) select = document .getElementById ('level1' )
557
+ if (level == 2 ) select = document .getElementById ('level2' )
558
+ if (level == 3 ) select = document .getElementById ('level3' )
559
+ if (level == 4 ) select = document .getElementById ('level4' )
560
+ if (level == 5 ) select = document .getElementById ('level5' )
561
+ content = JSON .parse (val )
562
+ //console.log(ct[1].name)
563
+ select .options .length = 0 ;
564
+ for (i = -1 ; i < (content .length ); i ++ ) {
565
+ opt = document .createElement ('OPTION' )
566
+ if (i == -1 ){
567
+ opt .value = ""
568
+ opt .text = "Select level " + level .toString ()
569
+ }
570
+ else {
571
+ var n
572
+ var c
573
+ if (content [i ].isDir == true){
574
+ n = content [i ].name .concat ('\xa0\xa0' , '<DIR>' ); // more than one space
575
+ c = 'D=' + content [i ].id // is directory
576
+ }
577
+ else {
578
+ n = content [i ].name + '\xa0\xa0' + content [i ].size ;
579
+ c = 'F=' + content [i ].id // is file
580
+ }
581
+ opt .value = c
582
+ opt .text = n
583
+ }
584
+ select .add (opt )
585
+ }
586
+ }
587
+ function selectserver (presctrl ) { // preset, select a server, root, level0
588
+ socket .send ('DLNA_getContent0=' + presctrl .value )
589
+ select = document .getElementById ('level1' ); select .options .length = 0 ; // clear next level
590
+ select = document .getElementById ('level2' ); select .options .length = 0 ;
591
+ select = document .getElementById ('level3' ); select .options .length = 0 ;
592
+ select = document .getElementById ('level4' ); select .options .length = 0 ;
593
+ select = document .getElementById ('level5' ); select .options .length = 0 ;
594
+ console .log ('DLNA_getContent0=' + presctrl .value )
595
+ }
596
+ function select_l1 (presctrl ) { // preset, select root
597
+ socket .send ('DLNA_getContent1=' + presctrl .value )
598
+ select = document .getElementById ('level2' ); select .options .length = 0 ; // clear next level
599
+ select = document .getElementById ('level3' ); select .options .length = 0 ;
600
+ select = document .getElementById ('level4' ); select .options .length = 0 ;
601
+ select = document .getElementById ('level5' ); select .options .length = 0 ;
602
+ console .log ('DLNA_getContent1=' + presctrl .value )
603
+ }
604
+ function select_l2 (presctrl ) { // preset, select level 1
605
+ socket .send ('DLNA_getContent2=' + presctrl .value )
606
+ select = document .getElementById ('level3' ); select .options .length = 0 ;
607
+ select = document .getElementById ('level4' ); select .options .length = 0 ;
608
+ select = document .getElementById ('level5' ); select .options .length = 0 ;
609
+ console .log ('DLNA_getContent2=' + presctrl .value )
610
+ }
611
+ function select_l3 (presctrl ) { // preset, select level 2
612
+ socket .send ('DLNA_getContent3=' + presctrl .value )
613
+ select = document .getElementById ('level4' ); select .options .length = 0 ;
614
+ select = document .getElementById ('level5' ); select .options .length = 0 ;
615
+ console .log ('DLNA_getContent3=' + presctrl .value )
616
+ }
617
+ function select_l4 (presctrl ) { // preset, select level 3
618
+ socket .send ('DLNA_getContent4=' + presctrl .value )
619
+ select = document .getElementById ('level5' ); select .options .length = 0 ;
620
+ console .log ('DLNA_getContent4=' + presctrl .value )
621
+ }
622
+ function select_l5 (presctrl ) { // preset, select level 4
623
+ socket .send ('DLNA_getContent5=' + presctrl .value )
624
+ console .log ('DLNA_getContent5=' + presctrl .value )
625
+ }
626
+
627
+
628
+
629
+
630
+
515
631
// ----------------------------------- TAB RADIO ------------------------------------
516
632
517
633
function showLabel (id , src ) { // get the bitmap from SD, convert to URL first
@@ -1609,9 +1725,8 @@ function getnetworks () { // tab Config: load the connected WiFi network
1609
1725
< /center >
1610
1726
< /div >
1611
1727
< !-- = == = == = == = == = == = == = == = == = == = == = == = == = == = == = == = == = == = == = == = == = == = == = == = == = == = == = == = == = == = == = == = -- >
1612
- < div id = "tab-content3" >
1728
+ < div id = "tab-content3" >
1613
1729
< center >
1614
- < br >
1615
1730
< label for = "seltrack" > < big > Audio files on SD card :< /big > < /label >
1616
1731
< br >
1617
1732
< select class = "boxstyle" style = "width: calc(100% -280px)" ; onchange = "trackreq (this )" id = "seltrack ">
@@ -1620,9 +1735,40 @@ function getnetworks () { // tab Config: load the connected WiFi network
1620
1735
< br > < br >
1621
1736
< button class = "button" onclick = "socket.send('stopfile')" > STOP < /button >
1622
1737
< button class = "button" onclick = "socket.send('resumefile')" > RESUME < /button >
1623
- < br > < br >
1738
+ < br >
1624
1739
< input type = "text" class = "boxstyle " style=" width : calc (100 % - 8p x );" id = "resultstr3 " placeholder = "Waiting for a command ...."> < br >
1625
- < br > < br >
1740
+ < br >
1741
+ < hr >
1742
+ < br >
1743
+
1744
+ < div style = "flex: 0 0 calc(100% - 0px);" >
1745
+ < select class = "boxstyle" style = "width: 100%;" onchange = "selectserver(this)" id = "server" >
1746
+ < option value = "-1" > Select a DLNA Server here < /option >
1747
+ < /select >
1748
+ < select class = "boxstyle" style = "width: 100%; margin-top: 5px;" onchange = "select_l1(this)" id = "level1" >
1749
+ < option value = "-1" > < /option >
1750
+ < /select >
1751
+ < select class = "boxstyle" style = "width: 100%; margin-top: 5px;" onchange = "select_l2(this)" id = "level2" >
1752
+ < option value = "-1" > < /option >
1753
+ < /select >
1754
+ < select class = "boxstyle" style = "width: 100%; margin-top: 5px;" onchange = "select_l3(this)" id = "level3" >
1755
+ < option value = "-1" > < /option >
1756
+ < /select >
1757
+ < select class = "boxstyle" style = "width: 100%; margin-top: 5px;" onchange = "select_l4(this)" id = "level4" >
1758
+ < option value = "-1" > < /option >
1759
+ < /select >
1760
+ < select class = "boxstyle" style = "width: 100%; margin-top: 5px;" onchange = "select_l5(this)" id = "level5" >
1761
+ < option value = "-1" > < /option >
1762
+ < /select >
1763
+ < /div >
1764
+
1765
+
1766
+
1767
+
1768
+
1769
+
1770
+
1771
+
1626
1772
< /center >
1627
1773
< /div >
1628
1774
< !-- = == == == == == == == == == == == == == == == == == == == == == == == == == == == == == == == == == == == == == == == == == == == == == == = -- >
0 commit comments