| Author |
|
TonyNo
Moderator Group
Joined: December 05 2001
Location: United States
Online Status: Offline
Posts: 2889
|
| Posted: June 18 2006 at 18:01 | IP Logged
|
|
|
I had another idea! I had been using Inkscape to create PNG's for use on my system, but I just realized that I could also use the SVG files directly since Firefox supports this graphic format.
Cool things are possible, even dynamic images. See here for an example. The progress bar and buttons on the right are SVG. The progress bar grows to the right and the times increment/decrement as tracks play. Updating objects (progress bar, text) is fairly easy. Getting mouse clicks is easy, too, since you can assign a link to an object in Inkscape.
One trick I just figured out is using "&nexturl=javascript:history.back()" to get back to where I was after processing a "/ph-cgi/evalformula" link for Winamp control.
More to come!
|
| Back to Top |
|
| |
TonyNo
Moderator Group
Joined: December 05 2001
Location: United States
Online Status: Offline
Posts: 2889
|
| Posted: June 19 2006 at 21:50 | IP Logged
|
|
|
Almost done! Here is a link to the live page which is a frame in my main page.
Use guest for both name and password.
Firefox only (IE does not support SVG natively, but it may work with an SVG plugin).
|
| Back to Top |
|
| |
dhoward
Admin Group
Joined: June 29 2001
Location: United States
Online Status: Offline
Posts: 4447
|
| Posted: June 19 2006 at 22:51 | IP Logged
|
|
|
Tony,
Just checked it out and it looks REALLY good!! Nice clean code and graphics. Definately top notch  .
Dave.
|
| Back to Top |
|
| |
smarty
Super User
Joined: May 21 2006
Location: United States
Online Status: Offline
Posts: 728
|
| Posted: June 19 2006 at 22:55 | IP Logged
|
|
|
Tony,
Can you supply any basic PSP pages for me to look at that can be opened w/ MS Frontpage and IE 6?
Just trying to learn how to make a PSP web interface.
edited for spelling
Edited by smarty - June 19 2006 at 22:56
__________________
Elk - Insteon - BlueIris - DMC1 - PowerHome - XLobby - HA_Bridge w/Dots - Brultech
|
| Back to Top |
|
| |
TonyNo
Moderator Group
Joined: December 05 2001
Location: United States
Online Status: Offline
Posts: 2889
|
| Posted: June 20 2006 at 00:02 | IP Logged
|
|
|
Dave: Thanks! Still tweaking...
Smarty: Most of my stuff does not work correctly in IE. I'll poke around my code.
|
| Back to Top |
|
| |
dhoward
Admin Group
Joined: June 29 2001
Location: United States
Online Status: Offline
Posts: 4447
|
| Posted: June 20 2006 at 00:16 | IP Logged
|
|
|
Smarty,
You can download a PSP example of the main device status screen here: http://www.power-home.com/download/pspsample_10346.zip. It's a little intense because of what it does but shows a fair amount of PSP code and how to do some things.
HTH,
Dave.
|
| Back to Top |
|
| |
TonyNo
Moderator Group
Joined: December 05 2001
Location: United States
Online Status: Offline
Posts: 2889
|
| Posted: June 22 2006 at 21:39 | IP Logged
|
|
|
I have this fully functional now. Let me know if anyone wants documentation.
|
| Back to Top |
|
| |
TonyNo
Moderator Group
Joined: December 05 2001
Location: United States
Online Status: Offline
Posts: 2889
|
| Posted: July 13 2006 at 00:11 | IP Logged
|
|
|
With Dave's help, I have jumped another level. No more JavaScript!
Here are some examples:
IE Only
Firefox Only (use guest for both name and password)
The highlights are a bit bright in the FF version, but I'll fix that later.
|
| Back to Top |
|
| |
TonyNo
Moderator Group
Joined: December 05 2001
Location: United States
Online Status: Offline
Posts: 2889
|
| Posted: January 02 2007 at 07:23 | IP Logged
|
|
|
Off on another tangent.
I found code for an SVG clock and modified it for my main screen.
Full Size
|
| Back to Top |
|
| |
raven77
Groupie
Joined: January 02 2007
Location: United States
Online Status: Offline
Posts: 44
|
| Posted: January 02 2007 at 16:50 | IP Logged
|
|
|
TonyNo wrote:
Off on another tangent.
I found code for an SVG clock and modified it for my main screen.
Full Size |
|
|
WOW! That looks sweet! I have been doing a lot of research. I made some PSP pages (basically just modified existing code) but yours puts mine to shame!! 
Is there any way to get that to work fully in IE7?
Also I cant seem to find or make any good interfaces for my PDA (Cingular 8525). any hints or places to look for help?
thanks!
Edited by raven77 - January 02 2007 at 18:12
|
| Back to Top |
|
| |
TonyNo
Moderator Group
Joined: December 05 2001
Location: United States
Online Status: Offline
Posts: 2889
|
| Posted: January 02 2007 at 23:25 | IP Logged
|
|
|
Raven:
Thanks! 
Not sure about IE7. I think you would just need the (Adobe) SVG plugin. Give it a shot!
Making interfaces for PDA's in indeed a challenge. I lowered my standards for this and am using just text mostly, with graphics used very sparingly.
I'll post some of my PDA screens later.
|
| Back to Top |
|
| |
raven77
Groupie
Joined: January 02 2007
Location: United States
Online Status: Offline
Posts: 44
|
| Posted: January 03 2007 at 07:44 | IP Logged
|
|
|
Sounds good!
When I was poking around in some older posts, I found a post you made that had a link to some pretty nice PDA screen shots. It had big blue buttons for lights, security, etc...
Thats close to what I am looking to do.
thanks again!
|
| Back to Top |
|
| |
ginigma
Senior Member
Joined: June 18 2006
Location: United States
Online Status: Offline
Posts: 127
|
| Posted: March 20 2007 at 16:39 | IP Logged
|
|
|
Tony,
Sorry to resurrect this old post, but can you share your psp code?
thanks!
__________________
Insteon (40 devices) ^ PowerHome (435 links) ^ Logitech Harmony 880
|
| Back to Top |
|
| |
TonyNo
Moderator Group
Joined: December 05 2001
Location: United States
Online Status: Offline
Posts: 2889
|
| Posted: March 20 2007 at 19:32 | IP Logged
|
|
|
Sure!
Overview
SVG is a vector image format stored as plain-text, and as such, can be manipulated via JavaScript or other methods. What I did was to name the dynamic elements and update their properties (visible or not, size, etc.) with info from PH.
Detail
Using the Inkscape vector graphic app, I created the panel shown. Then, I renamed the dynamic elements to something that made sense.
For example, the progress bar is simply a blue rectangle that I call "ProgressBar". The JavaScript looks for this element and changes the width of it as a function of time (value incremented once per second). The elapsed and remaining times are updated at the same time, but the text is actually changed.
The album art is simply a reference to a file called "albumartsmall.jpg" in the PH web folder. I have a macro that gets the current track's path info from Winamp via ph_winampinfo and copies the jpg over (each album I have is in a folder that also contains an the art image).
The main page, art4.psp, just loads the SVG file and contains the JavaScript to update the elements. You also need to have the svg.psp page so that the web return code correctly identifies the SVG content to the browser.
The svg file is here.
You also need a macro called PLAY PAUSE that contains this...
Code:
| case ( ph_winampinfo ( "status", 0, 2 ) WHEN "stopped" THEN ph_winampctrl( "play", 0, "") WHEN "playing" THEN ph_winampctrl( "pause", 0, "") when "paused" THEN ph_winampctrl( "play", 0, "")) |
|
|
Finally, you will need to go through these files and update the file paths and links for your system!
Let me know if I messed something up in preparing this post!
|
| Back to Top |
|
| |
Active Topics 
Memberlist 
Search 
Help
Register 
Login
PowerHome Messageboard : PowerHome Programming
Topic: SVG
