Widget for BOSE Soundtouch 20

wiewior · March 23, 2023, 3:14pm

This is my first widget created for Bose Soundtouch 20. I decided to share it because i was not able to find something similar in this forum.

Functionality:

ON/OFF by clicking the preset button or image/logo
6 stations stored under the presets buttons. Highlighted if active
Volume control
Artwork cover displayed if available. If not bose logo replaces it
Artist name displayed above the cover.
Volume slider shows up if device switched on
Items definition in the widget settings
I was inspired by the post and panel from @der_optimist (thanks for that)

Improvements potentials:

widget is not responsive
I am not a professional developer so there is a need for code efficiency and optimisation.

Hope it will help someone, someday…

 <style>
  .mainsection {
   width: 100%;
	 overflow-x:auto;
  }
 
  .bose_title {
   width: 100%;
   height: 30px;
   padding: 5px;
   text-align: center;
  }
  .album_picture {
   width: 100%;
   overflow: hidden;
  }
  
  .button_number_off {
  border: 1px solid;
  border-radius: 10px; 
  margin: auto;
  width: 100%;
  background-color: #424242;
  }
  
  .button_number_on {
  border: 1px solid;
  border-radius: 10px; 
  margin: auto;
  width: 100%;
  background-color: grey;
  } 

   .slider_place {
   width: 90%;
   padding:15px;
   margin:auto;
  }
  
  .preset_no {
  text-align: center;
  font-size:22px;
  color: #ff9c27;
  }
 
 </style>

 <div ng-init="slider = {
                					'item': config.volume,
            							'vertical': false,
            							'floor': 0,
            							'ceil': 100,
            							'step': 1,
            							'precision': 1,
            							'hidelabel': false,
            							'hidelimits': false,
							            'hidepointer': false,
            							'showticks': false,
            							'bigslider': false,
               						'widht': '80%'
            						}"/> 

<div class="mainsection">
  <table style="width:100%">
    <tr>
    	<td>
      	<div class="bose_title" ng-if="itemValue(config.nowplaying) !='NULL'">{{itemValue(config.nowplaying)}}</div>
        <div class="bose_title" ng-if="itemValue(config.nowplaying) ==''">
          <div class="preset_no">BOSE Soundtouch</div>
        </div>
      </td>
    </tr>
    <tr>
    		<td>
          <div class="album_picture" ng-if="itemValue(config.power) !='ON'" ng-click="sendCmd(config.power, 'ON')"> <img style="max-width: 50%; max-height: 50%;" src="/static/images/boselogo.png" alt="logo"></img></div>
   				<div class="album_picture" ng-if="(itemValue(config.power) =='ON') && (itemValue(config.artwork) !='NULL')">
		  			<img style="max-width: 50%; max-height: 50%;" ng-src="{{itemValue(config.artwork)}}" aria-hidden="false" ng-click="sendCmd(config.power, 'OFF')"/>
   				</div>
          <div class="album_picture" ng-if="(itemValue(config.power) =='ON') && (itemValue(config.artwork) =='NULL')">
		   			<img style="max-width: 50%; max-height: 50%;" src="/static/images/boselogo.png" alt="logo" ng-click="sendCmd(config.power, 'OFF')"></img>
   				</div>
        </td>
    </tr>
    <tr>
    		<td>
      		<div class="slider_place" >
            <div ng-if="itemValue(config.power) =='ON'">
   	 					<widget-slider ng-model="slider"/>
   					</div>
          </div>
      	</td>
    </tr>
  		<table style="width:100%">
  			<tr>
    			<td style="padding:10px">
					  <button class="button_number_off"  ng-if="(itemValue(config.preset) != '1' )" ng-click="sendCmd(config.preset, '1')">
							<div class="preset_no">1</div>
  					</button>
  					<button class="button_number_on"  ng-if="(itemValue(config.preset) == '1')" ng-click="sendCmd(config.preset, '1')">
							<div class="preset_no">1</div>
  					</button>	
      		</td>
    			<td style="padding:10px">
					  <button class="button_number_off"  ng-if="(itemValue(config.preset) != '2' )" ng-click="sendCmd(config.preset, '2')">
							<div class="preset_no">2</div>
  					</button>
  					<button class="button_number_on"  ng-if="(itemValue(config.preset) == '2')" ng-click="sendCmd(config.preset, '2')">
							<div class="preset_no">2</div>
  					</button>	
      		</td>
      		<td style="padding:10px">
					  <button class="button_number_off"  ng-if="(itemValue(config.preset) != '3' )" ng-click="sendCmd(config.preset, '3')">
							<div class="preset_no">3</div>
  					</button>
  					<button class="button_number_on"  ng-if="(itemValue(config.preset) == '3')" ng-click="sendCmd(config.preset, '3')">
							<div class="preset_no">3</div>
  					</button>	
      		</td>
    		</tr>
    		<tr>
    			<td style="padding:10px">
					  <button class="button_number_off"  ng-if="(itemValue(config.preset) != '4' )" ng-click="sendCmd(config.preset, '4')">
							<div class="preset_no">4</div>
  					</button>
  					<button class="button_number_on"  ng-if="(itemValue(config.preset) == '4')" ng-click="sendCmd(config.preset, '4')">
							<div class="preset_no">4</div>
  					</button>	
      		</td>
    			<td style="padding:10px">
					  <button class="button_number_off"  ng-if="(itemValue(config.preset) != '5' )" ng-click="sendCmd(config.preset, '5')">
							<div class="preset_no">5</div>
  					</button>
  					<button class="button_number_on"  ng-if="(itemValue(config.preset) == '5')" ng-click="sendCmd(config.preset, '5')">
							<div class="preset_no">5</div>
  					</button>	
      		</td>
      		<td style="padding:10px">
					  <button class="button_number_off"  ng-if="(itemValue(config.preset) != '6' )" ng-click="sendCmd(config.preset, '6')">
							<div class="preset_no">6</div>
  					</button>
  					<button class="button_number_on"  ng-if="(itemValue(config.preset) == '6')" ng-click="sendCmd(config.preset, '6')">
							<div class="preset_no">6</div>
  					</button>	
      		</td>
    		</tr>
  	</table>
  </table>
</div> 
</html>