Author Topic: WebDT 366 (images)  (Read 6092 times)

Armor Gnome

  • Guru
  • ****
  • Posts: 309
    • View Profile
WebDT 366 (images)
« on: July 26, 2012, 08:35:37 am »
Of all the pieces and parts I have added and played with in LMCE, nothing has been more stable and to me a sort of "token" of the system than my little tablet orbiter.  Web Orbiter 2.0 looks amazing on my PS Vita screen, if I was a Dianemo user I would surely get the Red Line skin for my iPhone, and Qorbiter is looking pretty amazing as well for android users.  The little black box that could is however looking dated I am afraid.  Today on a much needed break from breaking my install I took some time to give my favorite device a makeover.

I can't seem to get Designer working on either of my main computers so decided to edit/replace/reload until I figured out where all the various pieces went.  The results so far are linked below.  They are pretty large images in order to see the detail in the icons so I am posting links.

iOS themed skin, based on Titanium.

iOS theme again with lighter icons

The second link is the skin I am currently using and will continue to tinker with.  I need to fade the blue glare marks on the icons better so they look like reflections and not spears!  Nothing fancy or too elaborate on the drawings, I stayed away from patterns and texture effects this time around.  The 'trick' to icon spacing if that is what you are after is realizing that the placement always seems to check center lower in the cell it belongs to.  As long as the image file is the correct dimension you can have as much of it transparent as you wish.  Temped to put some non-public items on the 'more' page using 100% transparent icons...

If anyone is interested in these screens for their DT or anything else locked into 800x600 send me a message and I am sure we can work out a transfer method and a trade (I am always needing remote assistance and setup help lol).  I also would be willing to personalize a skin as I did mine, all the icons are components I currently run:

Lights Icon: Standard compact florescent
Media Icon: LG 60" TV (getting the UI placed onto that stock photo was fun!)
Climate Icon: Not part of my system but a little more modern than a thermometer
Comm. Icon: Cisco 7970 (again with the UI overlayed on a stock photo)
Security Icon: LynxTouch  (just ordered mine, will break my install a few times getting that going)
Phones Icon: my iPhone


**Edit, the security mode icons were changed as well, I noticed most skins use the default ones.  At-home-secure = a cup of coffee, Do-Not-Disturb = a Do Not Disturb sign, Armed = a more detailed house with locks and chains.  The rest of the modes I will update when I get ideas.
I made a wiki!  Click here to check out my system.

tschak909

  • LinuxMCE God
  • ****
  • Posts: 5549
  • DOES work for LinuxMCE.
    • View Profile
Re: WebDT 366 (images)
« Reply #1 on: July 26, 2012, 08:30:32 pm »
Nicely done. If you have a completed skin folder at some point, you can work with us to fold it in.

-Thom

Armor Gnome

  • Guru
  • ****
  • Posts: 309
    • View Profile
Re: WebDT 366 (images)
« Reply #2 on: July 27, 2012, 04:26:39 am »
Thanks. 

It will take me a while longer to redo these in a format that is usable outside of 800 x 600.  I employed a few 'cheats' to make things line up that would be called lazy programming at best lol.  The bottom left button for example is actually drawn onto the mainmenu.png so that it would render in-line with the category buttons on the left.  I also want to play around with and figure out some mysteries on font color and why some skins pull icon files for specific buttons while others do not.  An example of this would be Blue Crystal puts the 3 different media icons on the TV, Video and Audio buttons.  Titanium pulls a single icon for all phone buttons that uita, basic and slate do not.  These are all probably explained on those web instruction videos you did a few years ago and would require Designer working. 

Could I steal 10 minutes of your time on IRC for some assistance if I cant get Designer working?

I made a wiki!  Click here to check out my system.

tschak909

  • LinuxMCE God
  • ****
  • Posts: 5549
  • DOES work for LinuxMCE.
    • View Profile
Re: WebDT 366 (images)
« Reply #3 on: July 27, 2012, 06:06:33 am »
Yes. If I am available, I will help.

-Thom

RayBe

  • Guru
  • ****
  • Posts: 315
    • View Profile
Re: WebDT 366 (images)
« Reply #4 on: July 27, 2012, 10:00:11 am »
Hi Armor Gnome,

Great job so far, i did the BlueCrystal skin (with help ;) thanks again Thom and Karel)
Did you already set a database administration tool up? (i use MySQL Workbench)
In there you can find a table under the main tree that is called 'icon'
In there you can see the column 'MainFileName' which shows you the icon's name and path.
Also a column 'Description' which basically shows you what it does

If you want a specific icon to show on the orbiter, you must make a icon for it and save it in the path and with the name shown in the column 'MainFileName'

If you have any questions just ask, i am glad to help

br,
Raymond
When you were born, you were crying and everybody else was laughing.
Live your life so when you die, you are laughing and everybody else is crying.

Armor Gnome

  • Guru
  • ****
  • Posts: 309
    • View Profile
Re: WebDT 366 (images)
« Reply #5 on: July 27, 2012, 01:09:19 pm »
Thanks RayBe,

BlueCrystal was really nice, and is something I miss about my old 8.10 install.  I tried to keep the files saved to a thumb drive when I reinstalled with 10.04 but misplaced them and wrote over them. After all the work I am doing on my orbiter skins I would love to find a way to get BlueCrystal back to use as my on-screen skin.

So far, no I havent used any tools at all to redo my skins as I cant seem to get that working.  I am taking each image from the <secret place they are kept> folder and editing them with Inkscape and Gimp.  I then reload the UI after each edit to make sure it went into the place I thought it was supposed to.  Lots of pen and paper notes to keep track of images that are reused multiple times.

I selected Titanium as a base because, wherever the database lives or whatever configuration file exists for that skin tells it to put the icon into the comm. icons as you explained below.  Other than that I am tinkering with rendering tricks to place icons in various places that I know a button will be.  Its horrible and it will only work on the screen I am developing it for at the resolution and offsets I use but until I get QuickDesigner, HA Designer or MySQL Workbench it's the best I can do.  

An example of this is the main background image is A x B pixels in resolution.  The B resolution is 6 times the draw resolution of a button file ( 266x266 ) or 6 buttons tall, though the user and room buttons seem larger. My TV button will always be second row down, and 3 buttons in from the left.  Starting from that dot, I can draw any button I want onto the background image and leave my button file completely transparent.  The touchscreen is looking for an input in that grid, it doesn't know I am clicking an invisible overlay button on a pretty background.  Again this works fine for my use but to share this with lmce and eventually have it be a selectable skin I will need to keep a clean "non-cheating" copy of my image files and do this the correct way using the configurations you mentioned.

Given the proper tools I will finally be able to find out what is drawing a grey square behind my user and room buttons!  I imagine it has something to do with using custom photos for rooms and users but it appears if they are uploaded or not.  Its a "middle" layer draw, meaning its on top of my background and below my button.  To keep it clean I have had to map the exact placement on my background where the grey box shows outside of my button's rounded edges, then color what would normally be transparent corners with the exact background color to mask it.  To give the button its transparent look like the rest of my buttons have, again I have to map the background image onto the highest layer button icon file and hope nobody notices the slight color difference. =/

**Edit.  I found that pesky gray square.  It pulls the area surrounding the photos as they are displayed on the "locations" and "users" page.  A gray background on that page = a gray background around the image when it displays it on the main page.  I suppose I am stuck mapping my mainbackground image and custom coloring the button away from transparent and back to colored to overlay and seem transparent.


« Last Edit: July 27, 2012, 01:19:51 pm by Armor Gnome »
I made a wiki!  Click here to check out my system.

Armor Gnome

  • Guru
  • ****
  • Posts: 309
    • View Profile
Re: WebDT 366 (images)
« Reply #6 on: July 30, 2012, 01:37:13 am »
Wanted to post an update on this as I have made some pretty drastic changes.  With the possibility of having something I create folded into future releases, available to others to use I could not continue putting energy into an iOS look alike.  As I worked on recreating Apple's interface I kept thinking to myself, "this is not an Apple."

I still have the skin mods I did to get as far as the screenshots posted if anybody wants them to continue on their own.


My focus of late has been the dramatic re-skining of the current UI.  These images will load onto any resolution as they don't alter any placement or UI instructions, they just replace the images it would load. 

Conceptually I am continually impressed each time I load a sample onto my orbiter.  It's an organic design where the buttons connect via living cells that stretch out across the screen.  This takes advantage of the way buttons populate from left to right as if they are growing from the main category buttons to the far left.  The bottom left menu button has been replaced with a cyborg face who controls the expansion of the cells and appears to control the system/house.  I am pushing up against the limitations of the orbiters ability to render fine lines and cheating pixels to stretch that limit.

Replacement for the Media buttons that populate based on adding devices such as TV, Videos, etc.
Replacement for the Light Category button that goes in the far left column and is always visable.

Keep in mind that photobucket didnt upload the transparency.  These are the actual squareb.png files and the black areas are transparent.

Input welcome.  :)
I made a wiki!  Click here to check out my system.

Armor Gnome

  • Guru
  • ****
  • Posts: 309
    • View Profile
Re: WebDT 366 (images)
« Reply #7 on: July 30, 2012, 11:38:37 am »
Database file:  pluto_home ?

I have read and re-read both the wiki articles on HA Designer and QuickDesigner.  In them it says something along the lines of "It will now ask you information about your database files."  Where are these files?  In the HA Designer wiki there is a clue about what those files may be when it says "make sure to backup your pluto_home file.  I am going to guess that pluto_home.(something) is my database file?

I am looking at a few different programs that could reverse engineer the UI and give me the functionality of QuickDesigner on another machine but to use them I am going to need something to open up.  Where on my hybrid would such a file or database exist?  I understand nothing about sql but again from wiki articles it appears that there is an externally hosted "master database" and there is a version of that somewhere on my core.  I have started hunting for it folder by folder but haven't bumped into it yet.  Several of these directories have a thousand or more subdirectories so I am very much looking for a needle in a haystack when I don't know what a needle looks like.

(yes, I remembered to select "show hidden files"  :o)
I made a wiki!  Click here to check out my system.