Announcement

Collapse
No announcement yet.

Screens created with HSTouch

Collapse
This is a sticky topic.
X
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    #76
    Italian feelings

    Just to give you an idea of what I'm doing. Here you find my main screen and a weather screen. The background is an Italian church wall. I found the sign on the left at lake Trasimeno. I wiped the text (at home with Gimp, not at the lake ) and decided to use it for the sub menu items.

    Rest of the screens are not finished well enough to present here. Will follow later.

    I discovered that it takes me more time to create the graphics bits and pieces than the actual work in hstouch designer. This is real easy and forward. I used to develop in Visual Basic a long time ago and the way of working is similar.

    Next step is trying to get the music screen working!
    Attached Files

    Comment


      #77
      Originally posted by Chak View Post
      My Main screen
      Chak, really like the graphics. Would you be willing to post any of the elements/discuss how you did some of them?

      Thanks!

      Comment


        #78
        Work in progress

        Okay this is my work in progress page and i got to credit W.Vuyk for making the great scripts, like the channel slider.. ( yes the channel icons are dynamic and move a long with the slider ) But i do run in so many things that further development of ideas is kind of hard because of technical limitation.

        Orignal resolution is 1080p but had to be scaled down because the forum upload max of 800x600
        Last edited by Robin_f; May 15, 2013, 11:12 PM.

        Comment


          #79
          Originally posted by DJF3 View Post
          Hmmm, you're right.. The files are posted on my website
          http://domotica.nldj.com

          Click on Project "TouchScreen"

          This has a download with the 'select' icon. The unselected are always there. (part of background).

          About the size: you're right. Don't have the time to change this :-(

          DJ
          This should work.
          Attached Files
          Last edited by auger66; April 26, 2010, 11:40 AM.

          Comment


            #80
            And here are mine...

            In our house there're two different versions of the touch screen interface: A "big" version with which everything in the house can be controlled and a "small" version, which offers only the features desired for a part of the house. First the "big" version:

            The "Home" page: The main information at a glance.


            The controls of the home automation system for the attic on a clear page.


            The ground floor, the hallway and the basement have been combined on one page, because there are not that many controls for home automation.


            The comfortable control of our MP3 collection - the "Jukebox". In addition, the second row of the top menu bar displays the status of all important components for MP3 streaming.

            Comment


              #81
              And here are mine... (2)

              The first page of our weather station. Data is collected by a wireless weather station and recorded by software. This software provides the graphics shown on this page and the data for use with HomeSeer itself, e. g. for heating control.


              And the second page of the weather station. In the second row of the top menu bar, the pages summarized at "Weather & and news", are selected.


              Four different weather maps and the forecast for the next days at a glance. When you press one of the small weather map images, they will be displayed larger. This data will be retrieved by script and RSS feed from the Internet.


              The current news headlines. This data is also retrieved via RSS feed from the Internet.

              Comment


                #82
                And here are mine... (3)

                The important (for us) exchange rates of the ECB - updated daily - and the gold price - updated every fifteen minutes. This data will also be retrieved by script or RSS feed from the Internet.


                The e-mail page is a "HomeSeer Touch" embedded HTML page provided by an e-mail plug-in for HomeSeer. One could send e-mails from here, too. But the text input with our old Tablet PCs is a bit awkward within "HomeSeer Touch". So we use it only for reading and to track the "electronic mailbox".


                And the "small" version:

                The small "Home" page: All the important home automation controls for this area and the most important information is summarized here on one page.


                The first page of our weather station for the "small" version. Data is prepared in a different order here.

                Comment


                  #83
                  And here are mine... (4)

                  And the second page of the weather station. The second menu bar for further selections as in the "big" version isn't necessary.


                  This page is similar to the "big" version. Four different weather maps and the forecast for the next days at a glance. When you press one of the small weather map images, they will be displayed larger. This data will be retrieved by script and RSS feed from the Internet.


                  This page is similar to the "big" version. The current news headlines. This data is also retrieved via RSS feed from the Internet.


                  This page is similar to the "big" version. The important (for us) exchange rates of the ECB - updated daily - and the gold price - updated every fifteen minutes. This data will also be retrieved by script or RSS feed from the Internet.

                  Comment


                    #84
                    Thought I would contribute as well. I got sick of searching around for graphics so I went with what I know. I created the backgrounds, transparent buttons, etc in PowerPoint. I should mention the layout of the weather screen, the music screen background and the weather graphics are from the XBMC skin Confluence. Also, the sliders are a combination of sliders that W.Vuyk posted on the board.

                    For weather, I use the weather XML script. I have a script that updates a bunch of devices with values from the weather xml .ini file. I did figure out how to get the weather.com xml data directly using RSS but seemed less worth it so I stayed with the devices updated when weather xml updates.

                    The other backgrounds were photos of my house taken by myself (just kidding). I found them via google images, microsoft office online templates, etc.

                    I wanted to keep it simple, not too much information overload. I am also trying to work as much functionality as I can get out of HSTouch. For example, touch the house mode and a small window pops up to set the house mode. Touch on the message indicator and HS will play the messages over the speaker clients. Not everything works just as I want it right now so I will be making some events/scripts to get what I am looking for. For example, I am going to add functionality so that if you touch weather on the home page and HS reads the weatherxml weather forecast or if you go to the weather page and touch the current weather and have a live doppler radar screen popup. I also have a couple more screens to complete and need to figure out a way to have my Insteon scenes controlled correctly (right now I control lights directly since there is no toggle on/off or dimmer settins for a scene). So this will be a work in process for a while longer (probably always will be).

                    I uploaded my files to MediaShare (see Heatvent's HSTouch Template.zip file). Sorry, I couldn't get them to load on the forum. The file was big and I kept getting some kind of token error. Everything for the is in a separate skin directory named "Heatvent." Just unzip the heatvent directory from the downloaded file and put in you HSTouch\Skins\ directory (e.g. C:\Users\YourUserName\Documents\HSTouch\Skins\Heatvent).

                    My process for creating the backgrounds/graphics was as follows:

                    1. Create a powerpoint with page = to screen resolution at 96dpi. I used this one. Don't forget to change to 96dpi which PPT saves .jpgs at this resolution. You enter in your screen width and height in pixels and the converter will give you the width and height of the ppt page size to use. then when you do a save as .jpg in PPT, it will automatically save the background at the appropriate size for your screen. For my EEETop ET1602C which has a 1366x768 screen resolution, I needed a 14.23" x 8" ppt slide.
                    2. Created backgrounds including transparency for menu and bottom status bar.
                    3. Created any other transparency graphics (i.e. glossy squares that go behind data and related titles, etc.)
                    4. Right click on slide and save as (or go to file->save as), select JPG and then use this JPG as your HSTouch background.

                    I went this way so HSTouch had to load just 1 graphic and because HSTouch also has some issues with transparent elements over transparent elements...so the less for HSTouch to do when loding a screen the better.

                    I also created the buttons for the menu and the music selector buttons on a slide in powerpoint. Same process to export, right click and save as, only this time I saved as a png file. For buttons you need to save two files one for normal and one for pressed. Naming conventrion is as follows:

                    buttonname-norm.png
                    buttonname-pressed.png

                    Save these in the button directory of your project. HSTouch will know which one to use for nomal on which to used for pressed.

                    Here are the included files/directories:

                    Heatvent's HSTouchTemplate.pptx - Powerpoint 2007 template with a separate slide for each background as well as a slide with the button graphics. If you hae an older version of powerpoint, MS has a download that will let you open but you will need to save as a 2003 prior format. Not sure if this creates any issues.

                    Background Jpegs - directory with some of the source images for the backgrounds.

                    In the Heatvent skin directory:

                    \Backgrounds\1366x768 - My background images at the resolution for my EEETop touchpanel.

                    \Buttons - Custom buttons I created (there are some new ones not shown for the media player that use graphic play, pause, etc. rather than text).

                    \Custom\Weather Icon.xml - This is a custom HSTouch element. Based on the weather_xml condition number it loads the proper icon of the 47 weather.com icons. It is setup that these need to be in the HSTouch\Default\Weather\128x128 directory. I'm sure you can modify. Easiest way to do this is outside of HSTouch. Open up in notepad and do a search and replace.

                    \Graphics - Some of the other graphics I used.

                    \Sliders - These are the files for the sliders I used which the background is from W.Vuyk and the slider is a standard one from HSTouch.

                    \Weather - This directory includes the 47 weather.com condition icons from the XBMC Confluence skin.

                    That's it...have fun!

                    .
                    Attached Files
                    Last edited by heatvent; August 16, 2010, 09:41 PM. Reason: Added link to download template.

                    Comment


                      #85
                      17 Inch Touchscreen

                      Here is my ever evolving 17inch touchscreen. It brings everything together on a single screen.

                      Mark
                      Attached Files

                      Comment


                        #86
                        Why Not Post Your Screen Files?

                        Some of the screens in this Thread are Awesome! If willing to share, you can post them here:

                        http://www.needaleet.com/HSLockers/

                        ...and tell the readers of this Thread that you did so. Many Thanks! Jim

                        Comment


                          #87
                          iPad UI

                          Here's an interface I just started working on for my iPad. It's been a while since I've had time to mess with HS. We got a hurricane here so I have a few days to work on it.
                          Attached Files

                          Comment


                            #88
                            Not much as I'm just starting to play around with HSTouch and recently picked up an iPad for myself. I modified the "Lighting" page on the iPad template to give me one screen control of all my lights.

                            Comment


                              #89
                              Let me start off with it's complicated so there is some setup required. I went this complicated route because I wanted to use weather.com. I use weatherXML and didn't want to have different forecasts, etc.

                              Also, I set this up with a bunch of virtual weather devices in HS to update HSTouch. You could also do RSS directly with weather.com but I was using these devices anyway to update my overview page based on Jon00's Quick View package.

                              Here is what I did for the weather icons, the rest of the weather data is done with simple text device status updates in HSTouch (the following is based on an email I sent to another user asking how I did weather)...

                              Not a problem. First of all, it is designed to be used with WeatherXML. WeatherXML saves the weather data it retrieves from the internet in an .ini file. I created a script to pull the data from the .ini file and load it into a series of devices I created. There is an event that updates the weatherxml config file that I run every hour. I just added my device update script to run just after that one runs. So step 1 is you need to have the weather devices for the weather icon element to work. I will attach two scripts. One is for creating the devices you only have to run this once. CAUTION, I have mine set to use the house code "W." If you run it, it will create over 50 devices starting with W1, W2, etc. You can change this to another house code if you want but you will need to manually do this in both scripts. The second script is the one that updates the devices by pulling information from the weatherxml .ini file. This you will need to save in your scripts directory and have it run after weatherxml updates as I did. The third component is I have the XBMC weather icons updating for the HS devices as well so I saved them in the HomeSeer HS2/html/images/weathercom_xml/XBMC/ directory (these are the same icons as in the heatvent/weather/128x128 directory of the HS Touch project).

                              Weathericon.xml is a custom element in the Heatvent skin that can be added to any HS Touch project. If you have your project file open, and go to the "Custom" tab of the "Heatvent" skin, you will see Weather Icon as a custom element. If you drag and drop it to a project. You then need to associate the status of the appropriate weather condition device that were setup above. You do this in the Status/Device Associations section and look for the StatusTrackingNormal field. Set this to update based on the status image of the appropriate weather condition device. Basically, weatherxml uses weather.com data. Weather.com has 40+ icons that relate to various conditions. The icons are numbered 0 through whatever the highest is, I think 47. The HS device contains the number of the related condition from weather.com. The HS Touch element then updates the correct image from the heatvent/weather/128x128 directory that corresponds with the weather.com condition number from the HS device.
                              Attached Files
                              Last edited by heatvent; July 15, 2010, 02:30 PM. Reason: Add attachments

                              Comment


                                #90
                                Originally posted by mwaite View Post
                                Thanks for the nice comments!



                                The Phone screen is only 2 scripts and HST graphics.

                                The CID table shows both incoming and outgoing calls depending on which arrow is pressed. When a call comes in, Phone_Recent_Calls.txt script runs which parses the callers.log file into 2 tables (incoming/outgoing) which is stored in two devices for HST.

                                When a voice message is received, HSTphonedata.vb script is run which sorts the mailbox messages. Actions on the answering machine buttons also execute this script to take action and update its display. 12 devices are used to store pointers.

                                I was hoping to write something up for others to use this page, but haven't yet found the time. In the meantime the scripts are included if interested. I'm still working out a minor bug on the answering machine, but it's working 98%.
                                mwaite, any changes/progress. I am exploring how to get HSP into HST and see you did a nice job. I have a current solution although not as elegant as yours, it's simple and works fairly well. Below is a screenshot. I am using the messages.xml file in the config directory. HST can parse it if you setup RSS tracking. The downfall here is you can't format the data and it is not updated instantly. My buttons work off a script and pass the filename that was retrieved via RSS. I can go forward in the message list by using the HST increment RSS by 1 row for all elements presented. The filename is simply a text box off to the side with transparent font. The script code is as follows:

                                Code:
                                Sub PlayAllUnread()
                                 '===================================================================================================
                                 'DECLARE USER CONSTANTS
                                 '===================================================================================================
                                 dim speaker = ""         'set speaker client(leave blank "" for all)
                                 '===================================================================================================
                                 'DECLARE VARIABLES
                                 '===================================================================================================
                                 dim mb      'mailbox reference
                                 dim messages     'array of messages
                                 dim mfile     'message filename
                                 dim NewVM     'number of unread messages
                                 dim TotalVM
                                 dim i      'message counter
                                 dim path     'path to messages
                                 dim MDate     '??
                                 path = hsp.GetAppPath & "\messages\"   '& message
                                 hsp.MBSort      'updates mailbox status & sorts VM by date. Call before MBGet...
                                 mb = hsp.MBGetDefault     'selects the default mailbox
                                 messages = mb.messages     'get the collection of messages
                                 TotalVM= mb.total_messages   'get number of total voicemails
                                 NewVM = mb.unread_messages   'get number of new voicemails 
                                 '===================================================================================================
                                 'SCRIPT
                                 '===================================================================================================
                                 Select Case NewVM
                                  Case 0
                                   hs.Speak("You have no new messages.", TRUE, speaker)
                                   'The last call was from " & hsp.LastCallerInfo(1)
                                   Exit Sub
                                  Case 1
                                   hs.Speak("You have one new message.", TRUE, speaker)
                                  Case Else
                                   hs.Speak("You have " & NewVM & "new messages.", TRUE, speaker)
                                 End Select
                                 For i= TotalVM - NewVM + 1 to TotalVM
                                  mfile = messages(i)   ' get a reference to a message of type message_file 
                                  hs.Speak("Message " & i & " Sent " & hsp.MBMessageDate(mfile.filename) & " at " & hsp.MBMessageTime(mfile.filename) & ", From " & hsp.MBMessageName(mfile.filename), TRUE)
                                  'hs.Speak WeekdayName(Weekday(date))
                                  hs.Speak(Path & mfile.filename, TRUE, speaker)
                                  hsp.MBMarkRead(mfile.filename)
                                 Next
                                 hs.Speak("End of new messages", TRUE, speaker)
                                 hsp.MBSort
                                End Sub 
                                Sub PlayFile (vmFile() as String)
                                 dim path
                                 path = hsp.GetAppPath & "\messages\"
                                 hs.writelog("PHONE","Playing voicemail file " & vmFile(0) & ".")
                                    hs.Speak(path & vmFile(0), FALSE)
                                 hsp.MBMarkRead(vmFile(0))
                                End Sub
                                Sub MBSort()
                                 hsp.MBSort
                                End Sub
                                Sub MarkUnread(vmFile() as String)
                                 hsp.MBMarkUnread(vmFile(0))
                                 hsp.MBSort
                                End Sub
                                Sub DeleteMessage(vmFile() as String)
                                 hsp.MBDeleteMessage(vmFile(0))
                                 hsp.MBSort
                                End Sub
                                Sub Stop()
                                 hs.StopSpeaking
                                End Sub
                                Thought I would post to further ideas on this issue.
                                Attached Files

                                Comment

                                Working...
                                X