Web Remote Customisation

Sean Lavigne sean at houselavigne.us
Tue Jun 7 14:48:57 EDT 2022 

That’s cool!  Would it be possible to have graphics load/change based on the state of a unit using this Websocket method?

> On Jun 3, 2022, at 7:57 PM, David Gregg <djgregg at icloud.com> wrote:
> 
> 
> 
>> On Jun 3, 2022, at 4:35 PM, Marty Roberts <marteyroberts at hotmail.com <mailto:marteyroberts at hotmail.com>> wrote:
>> 
>> Sorry for the late reply, David! - moving house, so packing etc and forgot to reply. 
>> 
>> Thanks! I will check web sockets when at the new place.
> 
> I wasn't really expecting a reply.
> 
> If you locate the websocket plug-in, path shown below, James has already supplied an html file with an example of how to implement the websocket on the client side. 
> 
> <PastedGraphic-1.png>
> 
> This implementation is primarily oriented towards the control aspect of XTension, although the big advantage of the socket is it can be used to automatically provide updates to changes happening in XTension, so perfect for monitoring without having to send a client request.
> 
> 
>> 
>> 
>>> On 19 May 2022, at 2:17 am, David Gregg <djgregg at icloud.com <mailto:djgregg at icloud.com>> wrote:
>>> 
>>> Marty,
>>> 
>>> I forgot to mention that XTension also has a websocket interface if you want realtime monitoring.
>>> 
>>>> On May 17, 2022, at 10:56 PM, Marty Roberts <marteyroberts at hotmail.com <mailto:marteyroberts at hotmail.com>> wrote:
>>>> 
>>>> Thanks for the detailed info on that, David!
>>>> 
>>>> The image map route sounds like a great idea. I’m familiar with HTML5, CSS3 and JavaScript, but not so much the other stuff you mentioned. If it’s possible, that would be a cool project! I’ll have a dive into it ��
>>>> 
>>>> 
>>>>> On 18 May 2022, at 10:54 am, David Gregg <djgregg at icloud.com <mailto:djgregg at icloud.com>> wrote:
>>>>> 
>>>>> This could be done using simple web technologies on a local area network. An ngrok connection, which has been added to XTension, would give you the ability to connect securely outside of the local area network.
>>>>> 
>>>>> Obviously this requires more work and knowledge of those web technologies.
>>>>> 
>>>>> However, you get full control over the look of the interface. and the connection/response of XTension. There would not be any other third-party software involved. Furthermore, it is highly unlikely that this method will ever be end-of-lifed as long as XTension remains kicking.
>>>>> 
>>>>> It may be possible to add some of this method (image maps) to the already developed webremote interface of XTension. James?
>>>>> 
>>>>> ===============
>>>>> 
>>>>> 
>>>>> Here are the basic steps for doing it:
>>>>> 
>>>>> 1) Create the floor plan image;
>>>>> 
>>>>> 	Some options:
>>>>> 	a) take a picture or scan an already existing floor plan;
>>>>> 	b) hand-draw a floor plan and then scan or take a picture;
>>>>> 	c) use a drawing or drafting program to generate a digital floor plan.
>>>>> 
>>>>> The image map doesn't have to be limited to just the rooms/regions of the floor/field plan, you could include other objects that may represent the various devices to be automated: lights, fans. drapes. irrigation pumps/gates, etc.
>>>>> 
>>>>> 2) Create an html image map, which creates a clickable map of that image in a webpage;
>>>>> 
>>>>> 	Here is a description of what an image map is:
>>>>> 	https://www.w3schools.com/html/html_images_imagemap.asp <https://www.w3schools.com/html/html_images_imagemap.asp>
>>>>> 
>>>>> 	... and a free web tool to create one from your image...
>>>>> 	https://www.image-map.net
>>>>> 
>>>>> 3) Create an API (Application Programming Interface) within XTension using a JSON Interface;
>>>>> 
>>>>> 	This interface defines the command set you want to support with the clickable items from the image map. 
>>>>> 
>>>>> 	Arguably this is the most challenging of the steps.
>>>>> 
>>>>> This step requires a knowledge of the GET/POST command handling in XTension, how to use the extracted information to select and execute the appropriate XTension command, and return an appropriate response to the control device for a failed/successful execution of the command.
>>>>> 	
>>>>> 3) Create a web page that presents the image map, and connects the clickable events on the image map to JavaScript functions that call into an XTension JSON Interface
>>>>> 
>>>>> 	Creating a simple webpage is described here:
>>>>> 
>>>>> 		https://www.w3schools.com/howto/howto_create_and_view.asp
>>>>> 
>>>>> 	Description of how to implement a single click event:
>>>>> 
>>>>> 		https://www.w3schools.com/tags/ev_onclick.asp
>>>>> 
>>>>> 	Description of how to implement a double click event:
>>>>> 
>>>>> 		https://www.w3schools.com/tags/ev_ondblclick.asp
>>>>> 
>>>>> 	The JavaScript functions then execute the web call, through a GET or POST request, to XTension. More information on doing that is in the JavaScript section of the W3Schools website. 
>>>>> 	
>>>>> 4) Save the webpage on each device you would like to use as a automation control device.
>>>>> 
>>>>> 	The webpage can be loaded into the default browser on the device. Clicking on the image map will send the appropriate API commands to XTension, and the resulting update, if any, will come back from XTension.
>>>>> 
>>>>> This step may require further knowledge of how to compose an html page in XTension if you require a response to a command.
>>>>> 
>>>>> 	
>>>>> 
>>>>> 
>>>>>> On May 17, 2022, at 1:15 PM, Sean Lavigne <sean at houselavigne.us> wrote:
>>>>>> 
>>>>>> About 15 years ago I ran both XTension and another home automation program because we had Insteon switches in that house.  While I love the simplicity of using XTension, I couldn’t really get a good grasp on the web interface side.  In the other program, I had a background that was the floor-plan of the house:
>>>>>> 
>>>>>> <Scroll_Background4_1024x704_upper_level.png>
>>>>>> 
>>>>>> When you selected any of the room names, a button which was a graphic that covered each room would change state.  The button was transparent when the lights were on (as pictured above) and when they were off the room will be partially filled with “pencil lines” to indicate that it was dark.  We might have been reading Harry Potter around that time…  
>>>>>> 
>>>>>> In the large empty area we had our weather station readout and a smaller version of the basement floorplan that you could click on to load it as the main floor plan.
>>>>>> 
>>>>>> I would LOVE to do this in XTension, along with a mobile friendly version, but I definitely don’t have the knowledge to do so.
>>>>>> 
>>>>>> Cheers,
>>>>>> 
>>>>>> Sean
>>>>>> 
>>>>>>> On May 10, 2022, at 7:15 PM, Marty Roberts <marteyroberts at hotmail.com> wrote:
>>>>>>> 
>>>>>>> Hi again everyone!
>>>>>>> 
>>>>>>> Just wondering if anyone has set up some cool web remote interfaces?
>>>>>>> 
>>>>>>> Has anyone had any luck with using <img> tags in HTML description units? 
>>>>>>> Managed to change the fonts of the grouping rectangles? 
>>>>>>> Mess with the colours of the toggle buttons? 
>>>>>>> 
>>>>>>> Some things I would love to be able to do and see would be: 
>>>>>>> 
>>>>>>> 	• Embedding images into the HTML description. I have tried doing this with the full path to the Icon folder (where the png is stored), but just get the broken image icon. I feel displaying an icon or image on a UI is better than text most times. 
>>>>>>> 
>>>>>>> <Screen Shot 2022-05-11 at 9.57.38 am.png>
>>>>>>> 
>>>>>>> When trying to use an <img> tag in the HTML description, using the full path to the icon.
>>>>>>> 
>>>>>>> 
>>>>>>> 	• Changing the colour of the toggle buttons to something more standardised i.e.: the grey off state and green background for on (not the whole button like it currently has- just the slider part), rather than the blue & yellow. 
>>>>>>> 
>>>>>>> <toggle buttons.jpg>
>>>>>>> 
>>>>>>> As an example of a more standard iOS/Mac button: only the slider’s background colour changes, not the buttons themselves (above), versus XTension’s colours being across the entire button (below).
>>>>>>> 
>>>>>>> <Screen Shot 2022-05-11 at 9.55.17 am.png>
>>>>>>> 
>>>>>>> I actually prefer XTension’s squarer buttons, but would prefer the top image’s colours.
>>>>>>> 
>>>>>>> 
>>>>>>> 	• Be able to customise background colours, border colours and fonts of the grouping rectangles & icons. The system font of Helvetica Neue gives it a much more modern and cleaner appearance - although the difference is very subtle - imo. Having control over background colours would make something like creating a dark mode for night time use possible, which would be easier on the eyes in the wee hours lol.
>>>>>>> 
>>>>>>> <Screen Shot 2022-05-11 at 9.59.30 am.png>
>>>>>>> 
>>>>>>> The font XTension uses (above) versus macOS’s system font (below). 
>>>>>>> I was able to specify the font in HTML- subtle, but looks nicer - but being able to choose the font UI-wide would make a big difference in the look of it imo.
>>>>>>> 
>>>>>>> <Screen Shot 2022-05-11 at 9.59.09 am.png>
>>>>>>> 
>>>>>>> 
>>>>>>> 
>>>>>>> Rather than trying to customise/“hack” the web remote stuff, has anyone created a full HTML web page UI with something else XTension may offer?  
>>>>>>> 
>>>>>>> So yeah- if anyone is willing to share some cool tricks and ideas they have made for theirs, I’d love to see them! Also, my jump into this has really made me realise how much work James has put into XTension! It’s such a cool app to be able to do so many varied things with and customise. 
>>>>>>> 
>>>>>>> Thanks for your time reading and hope to hear any responses you might have! 
>>>>>>> 
>>>>>>> Marty.
>>>>>>> _______________________________________________
>>>>>>> XTensionList mailing list
>>>>>>> XTensionList at machomeautomation.com
>>>>>>> http://mail.machomeautomation.com/mailman/listinfo/xtensionlist
>>>>>> 
>>>>>> _______________________________________________
>>>>>> XTensionList mailing list
>>>>>> XTensionList at machomeautomation.com
>>>>>> http://mail.machomeautomation.com/mailman/listinfo/xtensionlist
>>>>> 
>>>>> _______________________________________________
>>>>> XTensionList mailing list
>>>>> XTensionList at machomeautomation.com
>>>>> http://mail.machomeautomation.com/mailman/listinfo/xtensionlist
>>>> 
>>>> _______________________________________________
>>>> XTensionList mailing list
>>>> XTensionList at machomeautomation.com <mailto:XTensionList at machomeautomation.com>
>>>> http://mail.machomeautomation.com/mailman/listinfo/xtensionlist
>>> 
>>> _______________________________________________
>>> XTensionList mailing list
>>> XTensionList at machomeautomation.com <mailto:XTensionList at machomeautomation.com>
>>> http://mail.machomeautomation.com/mailman/listinfo/xtensionlist
>> 
>> _______________________________________________
>> XTensionList mailing list
>> XTensionList at machomeautomation.com <mailto:XTensionList at machomeautomation.com>
>> http://mail.machomeautomation.com/mailman/listinfo/xtensionlist
> 
> _______________________________________________
> XTensionList mailing list
> XTensionList at machomeautomation.com <mailto:XTensionList at machomeautomation.com>
> http://mail.machomeautomation.com/mailman/listinfo/xtensionlist <http://mail.machomeautomation.com/mailman/listinfo/xtensionlist>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://mail.machomeautomation.com/pipermail/xtensionlist/attachments/20220607/d1cfea19/attachment.html>

More information about the XTensionList mailing list